design_law, Question for the web design people in the fedi: Is anything shown in (the solid lines in) this drawing something you'd refer to as a "breadcrumb"?
Mehrad, I've been using :AntennaPod: @AntennaPod for some years now and It's truly a legend in podcast world, but it suffers from one single and very tiny UI design flaw (which is understandable in such FLOSS and volunteer-based projects): some buttons are virtually hidden unless you know where to look for them.
One of the features that many podcast apps have is the ability to archive podcasts (i.e out of sight, out of mind, but keep my stats and progress).
#AntennaPod #UIDesign
🧵👇🏼
Mehrad, 🧵👆🏼
In AntennaPod there are multiple threads about this issue, for example:https://forum.antennapod.org/t/archive-pause-subscribed-podcasts/3082
https://github.com/AntennaPod/AntennaPod/issues/6672
and they suggest this manual process:
- putt them in a tag called “archive”
- disabling “show in main list”
- disabling “keep updated”
The first one is easy, the 3rd one I found it in the podcast setting, but the 2nd one was a pain to find. I even used the search box in the settings and didn't find it.
🧵👇🏼
Mehrad, 🧵👆🏼
At the end I found this short helpful article that had pictures for where to find the option I was looking for:https://antennapod.org/blog/2023/09/curating-your-podcast-archive
@AntennaPod I think the general direction is ok, but either:
Please add an option to automate this with a toggle button in each podcast settings
move/duplicate that checkbox also in the podcast settings and not tag settings (where it does not belong imho)
WebAxe, 5 ways to better design for people who are colorblind
https://uxdesign.cc/5-ways-to-design-for-the-color-blind-2040fa2692dd
#webdesign #uidesign #a11y
christianp, @WebAxe Weird that in the section about contrast ratios, they don't mention that the calculated ratio is incorrect for colourblind people.
Red (#ff0000) on black (#000000) will have a WCAG contrast ratio of 5.25, but I'll see the red as something more like #271d00, which has a very poor WCAG ratio of 1.26.
dennisl, Yup! "Placeholders in Form Fields are Harmful" https://www.youtube.com/watch?app=desktop&v=jrigp2L-P-0 #UIDesign #UXDesign #forms
design_law, User experience mini-rant:
Since the latest "update," when I type in Excel, the new entry shows up in 11-point Calibri until I hit enter or tab (at which point it turns into the proper size and typeface).
It's ugly and annoying.
Is this a ham-handed way to push us all to use Calibri? An oversight? Surely, no one thought this would be something users would like, right?
SharonCrockett, @design_law Also, in the updated Word, highlighting text for cut/paste changed, it seems. It feels more cumbersome than in the past when I could just hold down the left button of your mouse and drag. This no longer works. Or, am I just confusing Word with how highlighting text in Apple Pages works?
design_law, @SharonCrockett Oh, interesting. I've never highlighted that way, so I hadn't noticed any change.
leaverou, What a fantastic way to present #UIDesign history: The Evolution of the Scrollbar
Interactive scrollbars you can actually play with from the very first (Xerox Star, 1981) until 2015.
https://scrollbars.matoseb.com/h/t @karger
hill, Added an end meditation early feature to https://Zenti.app. Having some fun playing with the animation.
zeldman, UIUX: Evolution of the Scrollbar by Sébastien Matos.
Hat tip: Nikki Vias.
Chris, @zeldman It seems like the thinking in Mac OS 8 was “well, it’s going to be a few years before we ship anything useful with the company we just bought and its operating system, so as a stopgap, let’s just make our scrollbars look like theirs.”
CrystalLora, German Mich interessiert eine Umschulung zu UI/UX Designer Kann wer Anbieter empfehlen, die Umschulungen anbieten?
rolle, I'm experimenting on displaying media on Mastodon posts. Very long mobile posts or images with aspect-ratio of 2:3 that have more height than width are usually difficult to perceive on a busy feed. This change would make those long posts smaller while retaining the 1:1 or 16:9 posts as they are.
panda, I get, why you prefer the left side. I just can't get myself to like it tbh. ✌️
rolle, @panda Reasonably sized photos still show up like they used to. Only tall photos are rendered the way they fit better. One offs really look like they are meant to be that way.
adamsimmersive, Here’s an interactive playground I made to experiment with a variety of color picker UIs and algorithms.
My design goal: a compact, intuitive set of color swatches covering the full range of possible colors. Some innovations: serpentine hue layouts, and optical intervals that emphasize useful hues.
https://adamsimmersive.com/apps/hue-tone-color-picker
I used this sandbox to design the new “hue-tone” picker for the upcoming V3.0 of my Mind Magnets list-making app for iPhone/iPad. #MindMagnets #ColorTheory #UIdesign
A grid of color swatches ranging from pure red to black, gray, and white, surrounded by a frame of hue swatches. The number of swatches animates between a very small 4x4 UI and a large 12x12 layout.
A 7x7 UI containing a 5x5 tone square surrounded by a frame of hue swatches. Different hues are chosen and reflected in the tone square. Then several saturations and values of red are selected, reflected in the hue frame.
adamsimmersive, A rectangular layout is great for limited UI space, but here’s a “quantized” variation on a traditional triangular HSV color picker. The hue hexagon makes primaries and secondaries easy to find. #ColorTheory #UIDesign
WebAxe, “An accessible website won’t be beautiful”… really?!
https://medium.com/@chiaracielo/an-accessible-website-wont-be-beautiful-really-076802c79e90 #webdesign #UIDesign #a11y
WebAxe, Accessibility Tools and Resources for Designers https://www.digitala11y.com/accessibility-tools-and-resources-for-designers/ #webdesign #UIDesign #a11y
WebAxe, Creating Accessible UI Animations https://www.smashingmagazine.com/2023/11/creating-accessible-ui-animations/ #UIDesign #a11y #animation #webdesign
WebAxe, When I Get That Low Contrast Feeling, I Need Non-Textual Healing (Terrific article regarding WCAG 1.4.1 Use of Color)
https://www.tpgi.com/when-i-get-that-low-contrast-feeling-i-need-non-textual-healing/
#UIDesign #webdesign #webdev #a11y #wcag #color
rolle, Latest Mastodon Bird UI 2.0.0rc adds proportions for the new copy icon in profiles. Often times the icons seem too big in relation to each other in the default UI.
Please note v2.0.0rc is only supported by the bleeding edge (main/v4.3.0-alpha.0), it's a pre-release for the upcoming major Mastodon version.
Preview: https://mementomori.social/
Source code: https://github.com/ronilaukkarinen/mastodon-bird-ui/tree/2.0.0rc
#MastodonBirdUI #UIDesign #Mastodon #BirdUI #WebDev #FrontEnd #CSS
rolle, @ikkeT Strangely enough for some users it has share button in place of it. I am not sure what’s the logic there.
rolle, @ikkeT I saw that on Chrome on desktop for one user.
design_law, I know there are a lot of tech-savvy people in the fedi. Help me out?
What do you think of the USPTO's assertion that an icon or a GUI "an integral and active component in the operation of a COMPUTER"?
Would it be more accurate to say that an icon or a GUI "an integral and active component in the operation of a certain piece of SOFTWARE"?
Is this a distinction without a difference?
GuyDudeman, :) I was reading that case about the cocktail smokers and thinking... what does this have to do with what we're talking about? Then I came back here and saw you edited the link to go to your paper, which makes so much more sense!
Obviously I'm not a lawyer and I'm talking out of my ass here and probably wasting your valuable lawyer time :) But this stuff fascinates me and I want to keep learning more, so I thank you in advance if you deem this worthy of a reply. :)
I think I now see what you're saying, and let me know if I'm on the right track or not...
Company A builds a computer with a distinctive/original physical button that performs ABC command, instructing the computer to accomplish task XYZ. They get a patent on it.
Company B at some later date builds a piece of software with a GUI that exactly copies Company A's physical button design, and, when activated, accomplishes the same XYZ task.
Both buttons accomplish the same function on their respective computers, and both buttons look alike and let's say they are both positioned in similar places on their respective physical surfaces.
Company A sues, saying that Company B has violated their patent for that button.
Company B says "no, ours is Software, so therefore we aren't in violation of your patent"!
Company A should win on both design and utility grounds, right?
design_law, @GuyDudeman Interesting question. Assuming the patent is a design patent, then no, I wouldn't say the GUI would infringe. But if the design is minimally creative (and thus protected by copyright), there could be infringement.
This is because design patents protect designs as applied and copyright protects designs per se. Copyright also doesn't always require as much visual similarity.
For more on the as applied versus per se issue, see this article https://papers.ssrn.com/sol3/papers.cfm?abstract_id=2714081
chihauccisoilconte, Navigating #BrutalLegend's UI is like unboxing a vinyl disc, guiding users through a retro journey. With @jackblack leading the way, it's not just about options; it's about a soulful experience. And it runs on Linux too!... #UIDesign #UXDesign #RetroGaming #GUI #guidesign #uxdesign #brutal #vinyl #uidesign #retrogaming #LinuxGaming #steam
WebAxe, About CSS prefers-reduced-transparency:
https://developer.chrome.com/blog/css-prefers-reduced-transparency/
WebAxe, More goodness on prefers-reduced-transparency https://matuzo.at/blog/2023/100daysof-day103 from @matuzo #css #a11y
WebAxe, Burn your toast 🔥 "If you care about your communication, don't use toast. And if you don't, still don't use it because you'll give people anxiety." https://www.erikkroes.nl/blog/burn-your-toast/ by @erikKroes #UIDesign #UXDesign #a11y #usability
WebAxe, The problem with disabled buttons and what to do instead:
https://adamsilver.io/blog/the-problem-with-disabled-buttons-and-what-to-do-instead/Disabled buttons suck:
https://axesslab.com/disabled-buttons-suck/
WebAxe, Moar: "Don't disable buttons" https://gomakethings.com/dont-disable-buttons/ #UIDesign #forms #usability #a11y
minybolito, CozyFish UI - Gitlab → voici la page Gitlab de mes fichiers custom CSS et thèmes pour Firefish :chick_aww:
Les 2 ont été créés pour aller ensemble mais le custom CSS fonctionne normalement très bien avec les autres thèmes par défaut de Firefish (j'utilise les variables de couleurs dans le css)
Vous pouvez me conseiller, me réprimander parceque j'ai mal fait la page gitlab, contribuer (en rendant le code plus propre ou en ajoutant des fonctionnalités), ou partager si le projet vous plaiiit :boost_requested:
#UiUx #UiDesign #Ui #Ux #CustomCSS #Firefish #UserExperience #CSS #Fediverse #Design #Theme #CustomTheme
screenshot de ma tl Firefish, avec mon thème CozyFish, aux couleur chaudes et mon custom CSS, en dark mode
screenshot d'une publication-réponse, boosté par quelqu'un. Il y a un effet 3D pour montrer que la publication a été boosté
Screenshot des designs des hashtags et liens de mon custom CSS. le fond est de la même couleur que le texte, avec une opacité plus faible et les bords arrondis
minybolito, @AntoineD Merci !!!
Genre faire un fichier markdown à côté ?? C'est carrément possible, je le note :meow_squee: ça sera fait d'ici ce weekend 😉
omg trop trop coool ça me fait trop plaisir !!!!
AntoineD,
Sketch, The very talented Wayne Roger recreated a Dieter Rams clock, but can you guess which is the real deal, and which was made with Sketch? Let us know your guesses 👀
hill, Made a little bouncy SVG loading animation. This was my first time actually writing pure SVG animation code instead of using a library. Was surprised at how easy/powerful it is. This article from @SaraSoueidan was super helpful https://css-tricks.com/guide-svg-animations-smil/. Check out the code here: https://codepen.io/patrickhill/pen/MWZMLbo
#uidesign
amxmln, @hill @SaraSoueidan it turned out great! I love the streaking of the dot. 😊 I've always loved animating SVG directly, but it's only feasible for simple things, CSS timelines can get messy quickly, although animating things with the native animation features of JS is also getting more viable I feel. 😊
hill, @amxmln Thanks! Agree big time on the simple things comment. Would def go back to a framework if I had to animate more than a few points 😅
hill, Trying to decide between error message summary format.
First has message at top. Page would scroll up on form submit.
Second has message show right above buttons.
Button container sticks to bottom of screen on scroll.
I like the message showing right above buttons because you'd see it right where you clicked but concerned it would cover too much of the page, especially on mobile.
chrisonline,
taimar, @chrisonline @hill I feel the collapsed message just creates extra work for users as they would need to aim + tap the message in order to see the actual error descriptions.
Showing an already expanded message on top would allow people to immediately read its content w/o any extra interactions.