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

21–30 of 183 posts

Re: Rules for creating good-looking user interfaces

#21

Post by thw_9a83c »

VerifiedReports wrote: post #5

Saw a lot of words here. Not a lot of examples. "Dark mode was one of the most requested features for Lighthouse. I refrained a long time from adding it because it adds additional work to every UI task." This reveals a lot about the regression in OSes. Way back in the early '90s, Windows provided a color-scheme editor. Users could set up any color scheme they liked, and all properly-written apps would inherit it and…

> ...in the early '90s, Windows provided a color-scheme editor. Users could set up any color scheme they liked, and all properly-written apps would inherit it and work fine.

The color scheme editor actually worked quite nicely up until the release of Windows 2000 [0]. After that, Windows XP introduced the "Luna" visual style (Uxtheme.dll) with inflexible, hard-coded colors. Most software developers stopped caring about color palettes, and almost all applications started using hard-coded colors in their GUIs. They tested their apps with the few skins preinstalled with Windows XP: Blue, Olive Green, and Silver.

[0]: https://imgur.com/a/sXSETJC

Re: Rules for creating good-looking user interfaces

#22

Post by ryandrake »

defanor wrote: post #16
ghssds wrote: post #6

Earlier quoted context omitted.

>Way back in the early '90s, Windows provided a color-scheme editor. Users could set up any color scheme they liked, and all properly-written apps would inherit it and work fine. It was barely usable. Many developers used the colors of the default theme no matter what. Others used the Windows-supplied colors for the background color and maybe the main foreground color, then used fixed, non-customizable colors for eve…

It is quite similar on the Web still: web browsers (at least Firefox) allow to set user CSS or change default colors, but some websites (the percentage would vary defending on the method used) do not play nicely with that. Likewise on Unix-like systems: most things can be covered with GTK and Qt themes, but some GUI programs would use a different GUI toolkit, and occasional developers would assume a dark-on-light the…

I’ve always firmly believed that the user should have ultimate control over the color, fonts, and overall design of the applications on his system. Not the developer. The developer should just be able to say “this is text” and the OS should respect the user’s chosen text color. The developer should be able to say “this is a window” and the system decides how it’s styled. Every new OS release and every new browser release, we drift farther away from that ideal. If we respected the user’s preferences, we’d have a consistently styled workspace, and all our tools would look and feel like they belonged together.

Handing all of this control over look and feel to developers was a major mistake, and we pay for it over and over by having tools we keep having to re-learn, that look and function slightly differently from each other.

Re: Rules for creating good-looking user interfaces

#23

Post by CrulesAll »

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…

Really true. If you could recommend three books/papers that go down this path, it would be appreciated. Norman's book is a great start!

Re: Rules for creating good-looking user interfaces

#24

Post by CrulesAll »

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…

"Starting from 'what looks good' is putting the cart before the horse. Making a UI usable and well laid out first is key." This is first principles yet is so often ignored.

Re: Rules for creating good-looking user interfaces

#25

Post by mixedbit »

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…

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 figure out what has happened, it is a more prominent design failure than misalignment of the button.

Re: Rules for creating good-looking user interfaces

#26

Post by serial_dev »

VerifiedReports wrote: post #5

Saw a lot of words here. Not a lot of examples. "Dark mode was one of the most requested features for Lighthouse. I refrained a long time from adding it because it adds additional work to every UI task." This reveals a lot about the regression in OSes. Way back in the early '90s, Windows provided a color-scheme editor. Users could set up any color scheme they liked, and all properly-written apps would inherit it and…

> it adds additional work to every UI task

It's not necessarily true, especially if you have a component library and "swappable" themes.

After an upfront investment of setting up the dark and light themes, you can just use your component library and rely on the themes. It's still an investment, but the investment is "constant" and doesn't scale with the number of UI tasks linearly, you don't need to reinvent the wheel, and come up with colors for every feature.

Of course it's a good idea to switch the themes every once in a while, to make sure you didn't miss something, but it's not a huge issue.

Re: Rules for creating good-looking user interfaces

#27

Post by elevation »

ghssds wrote: post #6
VerifiedReports wrote: post #5

Saw a lot of words here. Not a lot of examples. "Dark mode was one of the most requested features for Lighthouse. I refrained a long time from adding it because it adds additional work to every UI task." This reveals a lot about the regression in OSes. Way back in the early '90s, Windows provided a color-scheme editor. Users could set up any color scheme they liked, and all properly-written apps would inherit it and…

>Way back in the early '90s, Windows provided a color-scheme editor. Users could set up any color scheme they liked, and all properly-written apps would inherit it and work fine. It was barely usable. Many developers used the colors of the default theme no matter what. Others used the Windows-supplied colors for the background color and maybe the main foreground color, then used fixed, non-customizable colors for eve…

> Others used the Windows-supplied colors for the background color and maybe the main foreground color, then used fixed, non-customizable colors for everything else, making everything invisible or hard to see if you used anything but a white-ish background.

I blame the Developer UX.

In Visual Studio, objects might have defaulted to the system color scheme, but if you ever selected colors for your controls, the palette was a collection of hard-coded colors, not system color classes. The IDE gave no indication that by selecting a new color you were forgoing an accessible, system-derived hue, and the documentation I had at the time (Sam's teach yourself ____ in 24 hours) didn't give the kind of cookbook examples I would have needed to keep my own GUIs system-controlled.

Re: Rules for creating good-looking user interfaces

#28

Post by Fraterkes »

scary-size wrote: post #11

For engineers doing UIs once in a while, I can recommend Refactoring UI [1]. It has a bunch of practical tips for making your life easier: Picking a color palette, font sizes, margins/padding etc. [1] https://www.refactoringui.com/

This stuff is of course subjective, but a lot of the "improvements" on that page involve adding a bunch of extra whitespace everywhere, the exact trend a lot of people are complaining about nowadays. I'm not saying it's bad per se, but I would not present the design choices on that site as broadly good either.

Re: Rules for creating good-looking user interfaces

#30

Post by andreareina »

mixedbit wrote: post #25
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…

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.
Post reply on HN