

Foundations of a good UI - codelitt
http://www.codelitt.com/blog/the-foundations-of-a-good-ui/

======
paulojreis
Well, this is a list of nothing but truisms. Take each of the "foundations"
and do a simple test: state the opposite and check if it makes any sense; if
it doesn't make sense at all, then it probably means they aren't really saying
anything worthy.

The said "foundations", stripped down of verbosity, are:

* Consistency;

* Convention;

* Ask for minimum input;

* Load and react fast;

* Use animation to communicate changes;

* Avoid clutter;

* Avoid content which screams "fake".

Now, would anyone advocate for the opposite of consistency, convention,
minimizing user work or being fast/giving feedback? This is pretty much the
same as saying that the foundation of flying a plane is to not crash said
plane. True, but not very helpful.

~~~
calinet6
Quite to the contrary, I thought the article contained a great list. I see
these mistakes all the damn time, and for that reason, it's clear that there's
not a universal understanding of how to get them right.

This high-level "here's a few tips" view of the common ways to improve the low
hanging fruit (sorry) turns out to be really useful.

~~~
teamhappy
> This high-level "here's a few tips" view [...] turns out to be really
> useful.

Do you really think spelling out "consistency makes your UI easier to
comprehend" is gonna stop people from designing inconsistent UIs? I'd argue
it's much more useful to give low-level examples of what makes a UI
look/feel/behave consistent.

~~~
calinet6
Perfection is not a requirement. It's a nice article.

I refuse to be critical of something just because it's not the epitome of
function that solves all the problems in UX design education.

~~~
paulojreis
My point is not perfection, it's usefulness. Telling a pilot not to crash a
plane wouldn't result in a "nice" or useful article.

~~~
calinet6
Well, you and I can disagree on the usefulness of this article then. By that
analogy, I see quite a few concrete and "useful" details on how not to crash
the plane, here.

It's just a nice summary of some common errors, with suggestions on how to
avoid them. It's not the end-all utility to stop them from happening, but it's
a good high level view.

~~~
paulojreis
Without even a single reference to "get to know your users"? Sorry, but no.
It's not a nice summary; it's actually what I wouldn't give to students or
someone wanting to get a grasp on UX.

This kind of "guidelines-based" approach is detrimental to UX, as it enforces
the idea of focusing on details instead of considering UX as a whole.

~~~
voik
You seem to be conflating UX and UI. The article is no more than the title
promises; principles of a good UI.

------
jakobegger
I'd be careful with recommending animations. Getting animations right is
extremely difficult. And it's dangerous: if you get an animation just slightly
wrong, the experience will be worse than a sudden change.

Our brains are pretty good at coping with sudden changes.

What's more important than animating changes, is to make sure the user expects
the change. For example, if extra form fields appear after the user clicks a
button labelled 'show advanced settings', nobody will be surprised. However,
if form fields appear and disappear automatically as you are typing, you'll
startle the user wheter you use animation or not.

My recommendation would be: keep UI as static as possible, make changes
predictable. If you really want to use animations, put a lot of effort into
testing them to make sure they are beneficial. Hastily added animations can do
a lot of harm.

~~~
dominotw
I think animations are the one of the worst things to happen to modern webui.
They are almost always misused.

------
nsgi
Not sure I agree about stock photos. Not all stock photos are headset hotties
and bespoke photography is expensive. Even large organisations use stock
photos, so I think it makes sense for a small company, especially if it isn't
a core competency.

~~~
kevinkimball
The blog post uses a stock photo! From Unsplash!

~~~
voik
You’re right, good catch! The reason is we don’t consider Unsplash to be a
conventional stock photo repo, since the style and quality of photography
digresses so much from the usual stock photo sites. We probably should have
pointed out what we meant by stock photo- the article is targetting sites such
as Shutterstock, iStock, Dreamstime, and the like. We love Unsplash, it has a
very personal twist on similar subjects, making the photos available there
that much more relatable and honest.

~~~
nsgi
A lot of the stuff on iStock is good. Here's a window one:

[http://www.istockphoto.com/photo/white-window-frame-and-
wint...](http://www.istockphoto.com/photo/white-window-frame-and-wintery-
view-22031923?st=bc9de18)

Not sure I see the difference between that and Unsplash.

------
ak39
And the foundation of a good write up on the "Foundations of a good UI" should
always include screen shots of good and bad examples per point.

Wrong type of windows, those.

------
chdir
_For example: the color red is associated with danger and prohibition as
established by social convention. Talking about the environment in red colors
will confuse users and distract from the message trying to be communicated_

How much weight does this really carry if your product is good ? My guess,
negligible. Websites just pick a theme color and go with it e.g.
Facebook/twitter : blue, Youtube/Google+/Pinterest : red, etc.

~~~
voik
If your product is strong enough that people can link colors, shapes and
typography directly to your brand, I think you need a pat on the back! For the
rest of us, it’s good practice to be careful with established cannon when
dealing with potential ambiguities. It’s known that certain color schemes
respond to certain conventions, so as long as your brand doesn’t go against
them you can use whichever color you want and still be able to communicate
your message. The products you mention don’t go against any particular
convention, so they can establish their brands within those color schemes.

------
Gyonka
What do you think about consistency between a mobile app and a website? Logos
and other such assets aside, is it valuable to keep the colour scheme the
same, and keep UI elements such as buttons the same?

~~~
voik
Hi! I’m Vicky from the Codelitt team and author of the blog post, thanks for
your question! Consistency is a very important factor when trying to
communicate your brand values and setting a clear message for your product,
and color schemes shouldn’t be treated differently. Brands have core color
palettes that help communicate and keeping those consistent throughout
platforms will only strengthen the relationship between the user and the
product. However, keeping everything in the UI the same is a bit tricky: there
are limitations to how much desktop and mobile platforms should share in terms
of UI, as each of them have a set of rules individual to them. While working
within those rules, you should try to keep as many constants as you can. For
example, if you’ve decided to make any major CTA red with a white font, you
should keep that constant for every platform you develop. Consistency in such
elements will help ease of use when your users jump from one platform to the
next (think of picking up where you left off when switching from desktop to
your phone). Menus and navigability, on the other hand, might differ from one
platform to the next.

