UI Design

design_law,
@design_law@mastodon.social avatar

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"?

https://mastodon.social/@meredithlowry/112321242194162393

Colarusso,
@Colarusso@mastodon.social avatar

@design_law It depends. Customarily, a breadcrumb is a navigation feature that helps the user see what path they've navigated through. E.g., like "home>topic 1>subtopic 3" A generous read could be that this design specifies the containers for specific information, like maybe there will be icons in the circles showing last and next location. ¯_(ツ)_/¯

kurian,

@design_law in that diagram - without additional context of 'navigation' e.g. directional arrows of labelling of the path, I wouldn't consider that on it's own to be a 'bread crumb'

Mehrad,
@Mehrad@fosstodon.org avatar

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).


🧵👇🏼

Mehrad,
@Mehrad@fosstodon.org avatar

🧵👆🏼
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:

  1. putt them in a tag called “archive”
  2. disabling “show in main list”
  3. 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,
@Mehrad@fosstodon.org avatar

🧵👆🏼
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:

  1. Please add an option to automate this with a toggle button in each podcast settings

  2. move/duplicate that checkbox also in the podcast settings and not tag settings (where it does not belong imho)

WebAxe,
@WebAxe@a11y.info avatar
christianp,
@christianp@mathstodon.xyz avatar

@WebAxe Weird that in the section about contrast ratios, they don't mention that the calculated ratio is incorrect for colourblind people.
Red () on black () will have a WCAG contrast ratio of 5.25, but I'll see the red as something more like , which has a very poor WCAG ratio of 1.26.

dennisl,
@dennisl@mastodon.social avatar
design_law,
@design_law@mastodon.social avatar

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,
@SharonCrockett@toot.community avatar

@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,
@design_law@mastodon.social avatar

@SharonCrockett Oh, interesting. I've never highlighted that way, so I hadn't noticed any change.

leaverou,
@leaverou@front-end.social avatar

What a fantastic way to present 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.

UI demo of Zenti

zeldman,
@zeldman@front-end.social avatar

UIUX: Evolution of the Scrollbar by Sébastien Matos.
Hat tip: Nikki Vias.

https://scrollbars.matoseb.com/

Chris,
@Chris@mastodon.social avatar

@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,
@rolle@mementomori.social avatar

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,
@panda@pandas.social avatar

@rolle

I get, why you prefer the left side. I just can't get myself to like it tbh. ✌️

rolle,
@rolle@mementomori.social avatar

@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.

A tall portrait image has max-height on Mastodon.

adamsimmersive,
@adamsimmersive@mastodon.social avatar
adamsimmersive,
@adamsimmersive@mastodon.social avatar

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.

WebAxe,
@WebAxe@a11y.info avatar
WebAxe,
@WebAxe@a11y.info avatar
WebAxe,
@WebAxe@a11y.info avatar
WebAxe,
@WebAxe@a11y.info avatar

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/

rolle,
@rolle@mementomori.social avatar

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

rolle,
@rolle@mementomori.social avatar

@ikkeT Strangely enough for some users it has share button in place of it. I am not sure what’s the logic there.

rolle,
@rolle@mementomori.social avatar

@ikkeT I saw that on Chrome on desktop for one user.

design_law,
@design_law@mastodon.social avatar

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"?

See
https://www.federalregister.gov/public-inspection/2023-25473/guidance-examination-of-design-patent-applications-related-to-computer-generated-electronic-images?utm_campaign=subscriptioncenter&utm_content=&utm_medium=email&utm_name=&utm_source=govdelivery&utm_term=

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,
@GuyDudeman@beige.party avatar

@design_law

:) 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,
@design_law@mastodon.social avatar

@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 '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!...

image/png
image/png
image/png

WebAxe,
@WebAxe@a11y.info avatar
WebAxe,
@WebAxe@a11y.info avatar

More goodness on prefers-reduced-transparency https://matuzo.at/blog/2023/100daysof-day103 from @matuzo

WebAxe,
@WebAxe@a11y.info avatar

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

WebAxe,
@WebAxe@a11y.info avatar
WebAxe,
@WebAxe@a11y.info avatar
minybolito,
@minybolito@peculiar.florist avatar

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:​

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,
@minybolito@peculiar.florist avatar

@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,

@minybolito

Ouep, un demo.md par exemple 😀 super ! ​:merci:​

Compersion ☺️

Sketch,
@Sketch@mastodon.design avatar

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 👀

Image of a Dieter Rams clock displaying the time 15:40.

martind,
@martind@mastodon.online avatar

@gedeonm @Sketch @ploink the embossing in the snooze button did it for me.

simonharper,
@simonharper@mastodon.social avatar
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

loading ui animation

amxmln,
@amxmln@mastodon.design avatar

@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,
@chrisonline@androiddev.social avatar

@hill @taimar This is a nice idea. Yes of course.

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.

  • All
  • Subscribed
  • Moderated
  • Favorites
  • UIDesign
  • magazineikmin
  • rosin
  • mdbf
  • Youngstown
  • love
  • slotface
  • khanakhh
  • ngwrru68w68
  • kavyap
  • ethstaker
  • thenastyranch
  • DreamBathrooms
  • GTA5RPClips
  • osvaldo12
  • megavids
  • tacticalgear
  • modclub
  • InstantRegret
  • Durango
  • normalnudes
  • everett
  • cisconetworking
  • cubers
  • Leos
  • provamag3
  • tester
  • anitta
  • JUstTest
  • All magazines