https://futureofcoding.org/ logo
#thinking-together
Title
# thinking-together
e

Eli Mellen

10/30/2023, 3:20 PM
when approaching UI design, I find it really helpful to layout the goals that the UI will need to support before doing any design. So, here, I’d ask “what are the top few activities that someone would be looking to do when using this UI?”
inversely, I’d also ask “what actions don’t I need to support?” that can help you decide what is a must have vs what is extra.
a

Arcade Wise

10/30/2023, 3:29 PM
I guess the main activity would be looking for a certain piece of media someone has heard about. Maybe price isn't necessary then... :>
e

Eli Mellen

10/30/2023, 3:30 PM
sort of following on that line “how will they be looking, what info do they need to find that thing?”
a

Arcade Wise

10/30/2023, 3:39 PM
Hmm, yeah
m

Mike Austin

10/30/2023, 5:33 PM
Honest feedback, good start. Design is something that you just need to internalize, and look at lots and lots of other designs and see what speaks to you. Sometimes you don't know why a design looks so nice until you break it apart. Then you can use that information to build your own. Contrast, size, alignment, proximity, shape, etc. all work together (or not). https://vwo.com/blog/crap-design-principles There's also a book (maybe overpriced but still a great read) that gets more into the details: https://www.practical-ui.com
A few other things to try is to put yourself in someone else's shoes. "I barely know how to use a mouse. What am I looking at, what should I do?". Another is using realistic, long text in designs. If you use short ones like "genre", you'll find later that nothing fits. One more thing is you can blur the design to get a feeling of weight and hierarchy. If you can generally understand the hierarchy (without clearly seeing the text or images), it's good.
a

alltom

10/30/2023, 5:49 PM
What you have is so charming! I got noticeably cheerier after looking at it. Thanks for sharing. :) I suspect putting real data in there might reveal a few small things to change, like I noticed that there’s probably not nearly enough room for artist and album names, for example. If you want, http://worrydream.com/#!/MagicInk breaks down the user needs for a very similar store listing UI that I think is a good example of how you might answer many of the questions people are posing here like “What are people trying to accomplish?”
a

Arcade Wise

10/31/2023, 4:16 PM
Oh yeah!! I was actually super inspired by Magic Ink, though I might not have a hang on the ideas
Thanks for those links @Mike Austin
j

jaukia

11/06/2023, 7:43 AM
Great start! Process-wise, I'd recommend showing this to someone who hasn't seen the UI and ask them to explain what they see (or how they'd start doing different tasks) — this is sometimes called "guerrilla usability testing". Also, I'd use more real data to see what happens to the layout with longer song names, artist names, genres, etc. On UX/usability level things that I'd pay attention to: do users realize song is a drop-down and song name an input? What do icons such as "P" and "P + circle" mean? Which elements are clickable and how to make that obvious? On UI level I'd try to reduce clutter to make the design more clean to reduce extra load from the user to perform their tasks. So: just one typeface, more neutral zebra row color (or remove it), remove the note icons, remove vertical bars next to album art, etc. And then, if you like, add the visual matrix printer motif back when all extra clutter is removed. I'd avoid also strong border colors and use subtle background colors, and try to be uniform with paddings, borders, etc.
I think good visual design and design systems are a lot like style guides for coding: you decide on what kinds of patterns work best for you and then you try to stick to those. Every now and then you might do things differently, if you have good reason for that. And if the conventions are restricting you, then you adjust them.
A good book on the visual side of UI design is Refactoring UI: https://www.refactoringui.com
a

Arcade Wise

11/06/2023, 2:29 PM
Oo thanks
m

Mike Austin

11/06/2023, 6:47 PM
The trend to use white or grey buttons or text fields is an interesting subject, as I noticed it in the first example of Refactoring UI. You could say the gray textbox looks more like a button. Thoughts?
The convention seems to be flip the color of the background no matter if it's a button or text field, instead of using a consistent color. You can see this in iOS, Android, MacOS, Windows probably.
j

jaukia

11/07/2023, 2:36 PM
Refactoring UI was released in the end of 2018, so it is now almost five years old. I don't think it has been updated since. The fundamentals are ofc up-to-date, but some trends, such as colors of buttons, have shifted a bit since the release of the book, such as what colors to use for buttons. I think something like Shadcn (and Vercel UI) are what would be trendy/default now: https://ui.shadcn.com
7 Views