

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

======
bane
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.

~~~
wtracy
> 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
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.

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

~~~
lamacase
> 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
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.

------
Animats
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...](https://web.archive.org/web/20120207224137/http://www.girbaud.com/eng/)

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

~~~
bunderbunder
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".

~~~
notduncansmith
Possibly the image from this article? [http://boxesandarrows.com/designing-
screens-using-cores-and-...](http://boxesandarrows.com/designing-screens-
using-cores-and-paths/)

~~~
bbrian
Probably this:
[https://twitter.com/vinniequinn/status/506116655983099904](https://twitter.com/vinniequinn/status/506116655983099904)

I cycle along there regularly and actually keep to the paved section because
it's smoother.

~~~
notduncansmith
Ah, well done. The denizens of the web never cease to impress me.

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

~~~
dmix
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.

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

~~~
pmontra
People with 11" or 13" Macbooks inevitably do. Same thing for people with 13"
PCs, the ones called ultrabooks. People start using non maximized windows at
15", more if on a Mac because the UI encourages full screen windows. The trend
to large fonts means that PC users with 1366x768 screens don't see much of a
page if they keep windows small. Combining all those factors, most laptops
users browse the web with full screen browsers. Tablets are always run full
screen. I'm on a full HD 15" laptop and very rarely maximize windows, but I
see I'm an exception when I look at co-workers screens.

------
drderidder
" _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.

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

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

~~~
lamacase
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.

~~~
gohrt
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]

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

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

~~~
ThomPete
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](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.

~~~
achr2
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.

~~~
ThomPete
Thanks. As I said this is older than the hills :) but still holds up IMHO.

Hierarchy of controls is exactly one of those things that are very hard to do
because you have to find the balance between easy to use and powerful.

I.e. the more powerful you want you tool to be the more controls you need and
thus the complexity rises.

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

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

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

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

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

