Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Rules for creating good-looking user interfaces

weberdominik.com

Post reply on HN
Print view View original

71–80 of 183 posts

Re: Rules for creating good-looking user interfaces

#71

Post by fifticon »

Frieren wrote: post #31
keyle wrote: post #17

As a designer first turned developers in the early 2000, I beg of you to learn the gestalt. Frameworks, languages, computers, come and go, but the human body doesn't change and the knowledge I have in design, I carry every day and have barely changed over the years. Sure there are new patterns now... "hamburger buttons" and swiping, but the logic remains the same. Human's don't change quickly. They discover things th…

> "hamburger buttons" I work on a desktop PC and "hamburger buttons" frustrate me beyond reason, in the same way that many other "modern" designs. I understand that cost benefit of having just one implementation for mobile and desktop. But it is still annoying. > Frameworks, languages, computers, come and go, but the human body doesn't change and the knowledge I have in design, I carry every day and have barely chang…

I mourn that the scrollbar has been hunted to extinction, even on windows 11 desktop. Windows explorer slowly starts to behave like a web page app. If you enable many columns in the explorer file view, this design is bonkers: To navigate those columns, you need the horisontal scrollbar. But modern design lunacy dictates that this scrollbar must be INVISIBLE. So you have to guess where it should be, and wave your mouse around in that area, until the windows 11 geniuses decide to fade in and reveal that - oh My!, THERE WAS A SCROLL BAR THERE ALL ALONG. So, now naive you might think "OK, we both agree there is a scrollbar there now, so maybe we can keep it in view?" NOOOOHHH! as soon as you have used it to find your new columns, it must of course disappear again, so you must once again wave around your mouse in its general direction, next time you need it :-(.

A similar insanity happens with window borders in general, because heyaah, wow, minimalism is cool. So when you need to resize a window or, god forbid, drag it by its title bar(), that too is minimized into unrecognisability. To be clear, the problem here is, that you can't tell where window A ends and window B begins, because of design minimalism, so it is simply hard to discern where the drag-border is.

() which leads me to window title-bar anorexia: It has also become oh so popular to minimize and compact the windows title bar, so that there is no area left where your mouse can grab the window to drag it. Web browsers, among many other apps, are guilty of this. The intent behind is to avoid the "double windows top", where you have first the title bar, then the menu below that (they have been collapsed into one); but apparently no one thought about "but how can users then drag their windows?".. I guess we are not supposed to, because the app is supposed to be full-screen maxxed, on the tablet we are drooling on. Or if there is another way, I, director Skinner and Homer's dad did not get the memo.

Re: Rules for creating good-looking user interfaces

#72

Post by guappa »

userbinator wrote: post #4

I honestly don't care at all about "good-looking"; I care more about "functional". Far too many apps seem to be aiming for the former instead of or at the expense of the latter.

Because they hire designers instead of hiring people who take a scientific approach and observe what real users actually do.

Re: Rules for creating good-looking user interfaces

#73

Post by fedeb95 »

keyle wrote: post #17

As a designer first turned developers in the early 2000, I beg of you to learn the gestalt. Frameworks, languages, computers, come and go, but the human body doesn't change and the knowledge I have in design, I carry every day and have barely changed over the years. Sure there are new patterns now... "hamburger buttons" and swiping, but the logic remains the same. Human's don't change quickly. They discover things th…

do you have any pointers on where to start? Books maybe. Thanks

Re: Rules for creating good-looking user interfaces

#74

Post by whstl »

akoboldfrying wrote: post #69
bigstrat2003 wrote: post #34

Earlier quoted context omitted.

> I understand that cost benefit of having just one implementation for mobile and desktop. But it is still annoying. Of course it's annoying. When desktop software is using mobile UI, that's the result of a deliberate choice to make the software worse (something you care very much about as it affects you) in order to save the company money (something you don't care about). It would be weird if you weren't annoyed by…

> blatant disrespect Let's stop pretending that "companies" could just do things better at no extra cost. I prefer a desktop UI on a desktop, but I also prefer paying less for software I use, and halving the UI development costs to enable that is a pretty sensible tradeoff.

Companies are definitely not saving money here.

They're actually spending a shit-ton of money on designer-hours and developer-hours in order to have everything custom, but still with a subpar experience.

It's similar to accessibility: a huge chunk of free off-the-shelf options are more accessible compared to the non-accessible chimeric design system of most modern web apps and sites.

Re: Rules for creating good-looking user interfaces

#76

Post by stavros »

MarcelOlsz wrote: post #67
guappa wrote: post #56

Earlier quoted context omitted.

Yeah most designers are bad at their job. Doesn't mean design can't be done properly.

Maybe before I die I will catch a glimpse of this mythical creature.

Citymapper is very well-designed, for example. Just does what you want, when you want it, and gets out of your way otherwise.

Re: Rules for creating good-looking user interfaces

#77

Post by oneeyedpigeon »

andreareina wrote: post #30
mixedbit wrote: post #25

Earlier quoted context omitted.

I love "The Design Of Everyday Things", the book doesn't talk much about computer UI, yet the 7 design principles it introduces allow to make much more informed design decisions, where design is not just the matter of taste and aesthetic, but of achieving well-specified goals. For example, if the user has no way to figure out what a button in the UI does, and needs to click the button to check it, and even then can't…

Norman doors are still the bane of me.

More doors should take a leaf out of USB-C's book...

Re: Rules for creating good-looking user interfaces

#78

Post by blauditore »

Note that good-looking doesn't necessarily translate into well-usable. The examples of alignment and icon weight are more on the side of aesthetics. If there's too much consistency, e.g. everything aligned in the same color with same weight and similar icons, it gets hard to quickly orient on the page and find things. This seems to be a common oversight, even by large companies.

Visual "breaks", such as color changes, spaces, or variation in contrast can help a lot (and still look good). A good example are paragraphs in text: A large chunk of text is more difficult to go through, or re-discover some section, than one divided into paragraphs.

Re: Rules for creating good-looking user interfaces

#79

Post by Cordiali »

wdroz wrote: post #47

> The logo is further on the left than the other icons. But why the logo of the website/app should be aligned with the icon of the actions? > The icons are thin, compared to the text, which is bold. Why this is an issue? I can somewhat agree with the other points, but I wouldn't call this "bad design." Just because the information can sometimes be presented better doesn't mean the previous way was bad.

Whenever I read some of these design articles, I usually see this same glaring issue. Without any distinction, they'll present together a grab bag of objective facts, best practices, and simple conventions.

There's nothing objective about using ctrl+s for save, but it's an obvious best practice. So not following can be considered bad design fairly uncontroversially.

The two you mentioned are obviously not in that category. I take issue with the logo one especially, because I find the style of the "bad design" better and more functional.

>[...] I’m probably the only one who noticed that it’s calmer.

Ugh.

Re: Rules for creating good-looking user interfaces

#80

Post by WA »

tkzed49 wrote: post #39
superice wrote: post #14

Starting from 'what looks good' is putting the cart before the horse. Making a UI usable and well laid out first is key. Practical UI and Refactoring UI are great resources, as long as you read them through a lens of 'what works well?' instead of 'what looks pretty?'. The author is absolutely right in that alignment and consistency are important, but that should really be your starting point. Building a good user int…

I don't understand when people see Tailwind as anything other than a syntax for CSS. > forget all about the relations of styling rules to eachother This is a hot take, but the more cascading your styles are, the harder they are to read and debug. I've never been upset to find classes that just correspond 1:1 with DOM elements. And that's what Tailwind is doing.

Tailwind's default sizes add constraints, which makes Tailwind a bit of a design system. Also, Tailwind's default colors are just very pleasant to work with. Even on projects where I don't use Tailwind, I look up the color table in the docs.
Post reply on HN