Rules for Creating Gorgeous UI

https://medium.com/@erikdkennedy/7-rules-for-creating-gorgeous-ui-part-1-559d4e805cda?hn=1

by mparramon • 12 years ago

385 61 12 years ago

GuiA• 12 years ago

Good, generous whitespace can make some of the messiest interfaces look easy to use.

And they make them completely unusable to anyone with less than a 27" screen, but all the hip designers apparently don't care about users who have anything less than a 2560*1440 display just like them (1024x768 is still the norm for a lot of people outside of the Silicon Valley bubble).

I've seen so many web products that are less usable than 20 year old command line interfaces, notably because of this "you can never have too much whitespace!" mentality, it's appalling.

The first goal of an interface is to be used.

elecengin• 12 years ago

I view whitespace as placing pressure on the rest of the UI - hopefully compressing unnecessary elements away. Of course if you dont bound the space, the pressure just expands everything like a balloon - like you describe.

I think the need for whitespace should be treated more like a constraint than a solution.

dmix2• 12 years ago

1366x768 overtook 1024x768 as the most popular in 2012.

But most tech startups here are targetting early adopters initially so that doesn't include all of those people in China or India running XP in cybercafes.

bunderbunder3• 12 years ago

But perhaps it should include all of those people in coffee shops using Surfaces and ChromeBooks and MacBook Airs.

gohrt4• 12 years ago

Most people don't run their web browser in full-screen mode.

coldcode• 12 years ago

Also people seem to think tiny text with medium gray on light gray is fashionable. If people can't read your content why bother.

Gracana2• 12 years ago

And font-weight: 300, because text looks best when it's a wispy gray blob.

mhd4• 12 years ago

Yea, I've noticed that on my 1920x1200 monitors, not having my browser maximized (heresy!) won't get me the "native" resolution anymore, but some scaled down version. It's weird having a huge friggin' screen and getting a hamburger menu...

girvo• 12 years ago

Guessing you're triggering the "tablet" responsive breakpoint. That's a hard one to fix though, media queries are a bit of a hack but it's certainly better than http://mobile.example.com/

organsnyder• 12 years ago

Rule 1: Stop talking about making "gorgeous" user interfaces. Create usable interfaces first; then you can worry about the subjective parts.

lamacase3• 12 years ago

To be fair, this is an article by a UX designer, targeting other UX designers, for the express purpose of getting their (presumably) already usable interfaces noticed, and appreciated.

If you can accomplish this with 7 simple rules then you don't really have to worry about the subjective parts, and you can focus on the usability.

gohrt4• 12 years ago

Maybe so, but the fast majority of designers are designing non-usable sites, so we shouldn't be promoting advice of the nature of "How to run a fireworks show at home" [quietly assuming you are an expert in fire safety]

drderidder• 12 years ago

"I love clean and simple as much as the next guy, but I don’t think [flat design] is a long-term trend here. The subtle simulation of 3-D in our interfaces seems far too natural to give up entirely."

Agreed, the "flat design" trend seems like a pushback against over-done skeuomorphism that went a little too far in removing all the visual depth cues.

Animats• 12 years ago

Gorgeous, or usable?

There's an annoying trend in UI design to make the simple stuff look really good, while making more difficult operations harder. If you think your UI concept is great, try mocking up something like Photoshop or a 3D drawing program. Those have really hard UI problems to solve. The mania for "clean design" has resulted in such things as invisible close buttons that only appear when you mouse over them. (Facebook ads work like that.)

Bob Lutz, who used to be head of General Motors, ran into this. His designers had built a concept dashboard which looked like something from Bang and Olufsen, with the black-on-black design popular in the 1980s. It looked really great. Nobody could operate the controls reliably without training or a manual.

There was a brief period when creative user interfaces on web pages got completely out of hand. Check out

https://web.archive.org/web/20120207224137/http://www.girbau...

for an over the top example from a French fashion design house. They went bankrupt a year after putting up that page.

bunderbunder3• 12 years ago

My bank just replaced their online banking site with one that features a much "cleaner" design.

I'll grant, it's way more pretty than the old one. But it also makes a lot of common operations take many more interactions. Getting a quick overview of how much money I have, for example - used to be, all my accounts fit neatly on screen at the same time. Now I gotta keep scrolling.

Reminds me of a captioned image I saw a month or so back, of a grassy quad somewhere with a sidewalk that had a T intersection, and a bare track through the grass where everyone cuts the corner. The sidewalk was labeled "UI" and the bare track was labeled "UX".

notduncansmith2• 12 years ago

Possibly the image from this article? http://boxesandarrows.com/designing-screens-using-cores-and-...

rhizome• 12 years ago

Desire Path: http://en.wikipedia.org/wiki/Desire_path

gohrt4• 12 years ago

as invisible close buttons that only appear when you mouse over them

not a good example of bad design. It's quick to learn that if you want to throw something away, you have to touch it. Don't need the all the widget controls visible at the same time.

It's only a problem when there's an invisible remote control for a different part of the page.

zarify• 12 years ago

Kind of sucks if you're trying to design something that's usable with a mouse and with touch though. Plenty of interfaces out there that don't take into account that there's no hover state for a finger.

Terr_• 12 years ago

I had my excuses. I don’t know crap about aesthetics. I majored in engineering– it’s almost a badge of pride to build something that looks awful. “I majored in engineering — it’s almost a badge of pride to build something that looks awful.”

I guess whoever did the pull-quotes was also an engineering-major...

mhd4• 12 years ago

Not surprisingly, most screenshots don't present a lot of data, which is where things usually get problematic. Programmers often get criticized for their fruit salad GUIs, but usually that's the result of having to present plenty of options and data.

Sure, the first thing you'll hear to that issue is "Do you really need to have that many options/paths/data?". And granted, quite often this is applicable, although not always in the same way (hiding rarely used options vs. eliminating them, i.e. "advanced options" vs. "only one friggin mouse button").

But often enough, presenting lots of data and hierarchies is the whole point of an app, especially when it gets more about enterprise systems than "what pancakes do my friends like" web 2.0 frippery. And that's where the ideas coming from ad design and typography kinda fail.

Which is why people like Tufte are so respected, as they go beyond this. If I recall correctly, in the initial review of the iPhone Tufte recommended against even the minimal margins of the photo gallery, removing white space for a better experience. And yes, knowing the rules before you break them might be a part of that...

If you don't do this as your full-time job, I'd very much recommend going for "usable" instead of "gorgeous". The latter is very much a 80/20 deal, where you spend insane amounts of time, asking co-workers and A/B tests just to get that final ratio or pixel size right. Whereas most of your customers still have Nappa Valley as a background picture behind their copy of IE9...

I don't really miss under construction signs and rotating skulls, but I do have the slight feeling that a lot of what designers are doing will be like early 20th century typography in a few years, where even some of its major proponents aren't quite sure about it anymore...

lamacase3• 12 years ago

ideas coming from ad design

One of the things that bugs me most about many "modern" product pages is that they are often designed to look like brochures. Flashy and eye-catching, but with very little content or meaningful organization.

Most of the time I was brought to the page by an actual advertisement, or some content performing a similar function, and I am on the page now, looking for information. It's a bit like going to a restaurant and getting a pamphlet promoting the atmosphere and decor instead of a menu.

I scrolled though many sites advertising devices, looking for that elusive little table that summarizes the data I'm looking for, variously called 'features' or 'specs' or whatever. But these days even those sections are full of non-information like "all day battery life* " (That star is pointing nowhere).

I'm open to the possibility that I'm using the internet wrong. Perhaps there's a very good reason that the last place I should expect to find information about a product is on the product's own page.

Joeri• 12 years ago

I've also noticed it's sometimes easier to get a gadget's specs from the summary table on a review than from that gadget's product page.

mrxd• 12 years ago

Programmers often get criticized for their fruit salad GUIs, but usually that's the result of having to present plenty of options and data.

Simplicity is only one kind of beauty. It's certainly possible to have a gorgeous interface that still presents a ton of options and data. You often see these in sci-fi movies, like Oblivion, and the aesthetic is in fact about hyper-complexity: http://www.josephychan.com/Oblivion

mhd4• 12 years ago

I'd say that this is the most common computer aesthetic even in "contemporary" movies and shows -- just think of all the random scrolling code you see whenever something gets hacked or when perp pictures are searched/compared. Not all about beauty, more about trying to present something as arcane as possibly to signify that the character knows what he or she is doing. (One reason for the recent infantile obsession about tiling window managers)

Most of that is pretty unusable or superfluous, too. Which is okay, when it comes to movies, of course.

But sadly this also sells in big business. Enterprise software is often defined as programs where the one buying is not the one using it. And just show a big screen with plenty of chartbarf and managers will flow to it, yet ordinary call center/sysadmin users are none the wiser.

And this is where help would be needed, yet it's quite a bit harder than "use Helvetica and white space". Although you'd be allowed to make it quite a bit less "gorgeous" when you're not -- as in most webapps -- trying to do ad and ux work at the same time.

sjcsjc• 12 years ago

I really like this line: "Start thinking of whitespace as the default — everything starts as whitespace, until you take it away by adding a page element." - speaking as someone whose design sense and skills are dreadful.

bane2• 12 years ago

Here's some rules that almost every designer I know ignores:

1) Map out your interface and interaction trees first

1-click - most common actions

2-clicks - second most common actions

3-clicks - power user level stuff

Put the most commonly used stuff at 1-click or interaction. If you don't know what goes at 2 and 3 clicks in, you don't understand how the application is used, because you don't understand what the most common interactions are. If you've run out of room for the 1-click stuff in your UI, then your UI concept is poorly designed. Keep iterating and collecting information until you can fulfill this.

Don't put anything at more than 3 clicks in.

2) Double the number of interaction points in the UI. Assume the application will grow and add features. If you optimize your design for the number of features you have today, you'll have no where to put all the stuff you're going to get over the application lifetime and it'll all just end up getting buried in menus. I've seen lots of gorgeously, carefully, designed applications die a year in because of this.

Double everything and see if that number of interaction points still fits within your concept, that way the interface has room to grow without getting messy.

3) Don't make your users interpret, make them understand.

If your concerned about how universally an icon is interpreted across cultures, you're doing it wrong. Interpretation is an additional step your users have to go through to use your UI, it's like putting everything at 2, 3 and 4 clicks in because they now have to not only look and scan the UI for what they want, they need to figure out what each interface item means before they can interact with it.

Even worse, as they grow to become accustomed to your UI, they're going to end up memorizing location and placement of options because the interface widgets take too long to interpret. Get 2 revisions down the road and you move a button and wham your tech support calls jump 50% because the users never bothered to remember what the symbol for their action looked like, just where it was on the screen.

4) Everything must be discoverable. This is why the world moved to GUIs from CLIs. Don't make your users play a 1990's era adventure game where they have to click every pixel on the screen to see if they can advance their usage. The Flat UI trend is notorious for this.

5) Consistency rules. Also see #3.

6) Eliminate Steps. Map out how many steps certain actions are. Cut them down to as few as possible. I remember one time going through a file import process with a tool, by the time you got the file imported the user had to navigate 27 different steps! Almost every step required minimal or no user input. Nobody had ever bothered to map out the interaction patterns in the tool before but users were constantly complaining about how difficult it was to use.

We reworked the workflow and got it down to 3 steps and user-engagement jumped triple digits.

6) After you've addressed 1-6, make it look nice.

gohrt4• 12 years ago

3-clicks - power user level stuff

Don't conflate "power user" with "rarely used"

jfoutz• 12 years ago

Isn't that sort of by definition though? 1% of users use this feature all the time - but the total use of that feature is low.

I guess i'm wondering why not? seems like a good heuristic, even if wrong.

wtracy• 12 years ago

Don't put anything at more than 3 clicks in.

How do you balance that against the "maximum six plus-or-minus two items at each level" advice?

oneeyedpigeon• 12 years ago

Forgive my terrible maths, but doesn't that provide for 512 maximum functions? If your interface needs more than that, I'd argue it's time to reevaluate its scope.

bane2• 12 years ago

That guideline is just for choosing from a menu of options.

onli• 12 years ago

I think you shouldn't.

That advice stems from the fact that most humans can remember ~7 items in short term memory. It got then mixed up with menu items. The argumentation is that only this way user can remember immediately after seeing the menu what was in it.

But that ignores that user can open the menu again, they don't have to use the short term memory, and long term memory is not limited that way.

Probably still sometimes a good idea to use that advice just to evade letting the menus get too cramped, but other than that, it is better to ignore this advice.

serve_yay• 12 years ago

I majored in engineering — it’s almost a badge of pride to build something that looks awful.

I dislike this attitude, for me it is very reminiscent of the way people just shut down when math comes up. "I hate math" and that's it. I'm not a math person, my brain doesn't work that way. On and on. There is even a perverse sort of pride in it. Why not do the work, why not try to get better, why not try to expand into things we're not good at yet.

captainmojo• 12 years ago

I've written off aesthetics my entire coding career (15 years), blaming color-blindness, but exactly in the way you speak. I often wonder whether design is even a thing I could get better at. I'm reminded of a Dummies book I read about Real Estate that essentially said a Real Estate agent with 10 years of experience could be turbo, or they could have just repeated the first year ten times. It's nice to see articles like this that tear down some of the mystery.

Another force here, using your example, is that someone pushing themselves from Algebra to Trigonometry might not be as valuable to them as someone who repairs Honda Civics studying how Ferrari's are built. I've seen people shut down to new concepts hundreds of times, but there's some solace in the idea that maybe they're improving their lives in other ways that they find meaningful.

achr22• 12 years ago

Does anyone have some good resources for UI/UX design for data and option heavy application (enterprise)? There are fundamental differences between most 'apps' and the kind of dense applications I work on/with.

ThomPete2• 12 years ago

I did some work around that. It's older than the hills (like from 2008)

Are you thinking like this

https://www.behance.net/gallery/822055/LMG-Analytics-Tool

Been writing a little bit on a book about design for enterprise perhaps I should pick it up.

silviogutierrez• 12 years ago

Not the OP, but I'm also interested. The example you provided was right on.

achr22• 12 years ago

Your work looks great. One thing that I struggle with, that you seem to have an good awareness for, is layout within a 'hierarchy' of controls/views. I look forward to your book.

datashovel• 12 years ago

A project I'm working on currently (not public-facing) is a relatively complex design tool for a manufacturer. One of the tools they were using was quite clunky and was somewhat "option heavy".

What I decided to do (and am glad I did) was condense alot of the "option" stuff into basic gestures or movements. I use the term "gestures" liberally in that this isn't a mobile or tablet app with touchscreen interface. It's a browser-based desktop app where the only real interaction occurs through mouse / keyboard input.

Given that it's a 'design tool' there are probably alot of things about the app that couldn't be transferred to a typical data-driven GUI, but I think having this frame of mind when designing the UI / UX can probably help in alot of unexpected ways.

I think the general takeaway here is that "more options doesn't always mean more buttons" :)

thirdsun• 12 years ago

Very good question - I usually develop custom, internal apps that are very data- and option-heavy. A lot of those best practices you read about everywhere are hard to apply when your software is much denser than modern "do-one-thing-well"-apps.

I'd like to see some showcases on how to approach those problems.

One thing I found to work well, is resisting the urge collect all kinds of features in a single screen/page/view - use multiple views instead and keep them clean and simple on their own. Of course this comes at the expense of needing more clicks to reach certain areas, but I prefer that to overwhleming users by putting everything related into one section.

Also, I can't emphasize enough how much consistency matters - particularly if you have a lot views, you should make sure that your users feel right at home in any of them as from their first encounter. Keep similar navigation ideas for example: If all your navigation features a hierarchy like Home -> All Items/List -> Single Item/Detail only the context will change and it will be easy to get used to that.

keyle• 12 years ago

Being a designer doing UI/UX for a living and building interfaces, I think this is a very good starter guide.

If devs only started by lining things up and thinking in terms of visual hierarchy, they'd already be 90% there.

toolz• 12 years ago

It took me a few refreshes and multiple clicks just to realize I had to scroll down. I don't understand why someone would think unusable could ever be gorgeous. That page has one of the worst layouts I've ever come across and ironically it's supposed to be about enhancing users experience.

bwy• 12 years ago

This is actually awesome. I'm in the exact same boat that the writer started in, able to create UX but admittedly clueless about UI design. Putting some principles I've had swirling around my head for a while trying to learn into concrete writing just solidifies it.

Gracana2• 12 years ago

Haraldur Thorleifsson’s grayscale wireframes look as good as lesser designer’s finished sites.

I thought that image was going to be an example of what not to do. In black and white, you can see that there is hardly any contrast, and I think that's a big problem. Low-contrast may look pleasant, but it makes reading the content and understanding the UI much harder, especially for users who may not have the ideal displays and lighting conditions that designers in their offices have.

Rules for Creating Gorgeous UI

Related Stories