
Simple Does Not Mean Ugly - bradley_taunt
https://uglyduck.ca/simple-does-not-mean-ugly/
======
jonathanstrange
To be honest, I have never encountered a website so far that even remotely had
the same level of usability of a really good desktop application around the
year 2000 or so.

How many websites have user-definable menu shortcuts, unlimited undo, instant
user-feedback for every operation, tooltips that can be switched on or off,
full internal drag & drop and OS-level drag and drop of files, standard user
interface elements that work how the user expects them to work, a context-
sensitive online help system, reconfigurable toolbars with user-definable icon
sets, multiple open documents at once, movable and reconfigurable tool
windows, manye internationalizations, and so on?

The web is still the future, I know, but web application UX designers are
still re-inventing the wheel and without some enforced UI guidelines like
Apple had in the 90s websites will never fully catch up with desktop apps in
terms of usability.

To be fair, a comparison with modern desktop apps is much more favorable,
because most of them have regressed in terms of usability.

~~~
smt88
> _How many websites have..._

Honestly I'd settle for buttons that are obviously buttons and menus that
aren't hidden by default.

A lot of web design has gone backwards in usability, especially since Google
popularized Material design.

~~~
shantly
I think we hit a pretty good local maximum for website usability in the few
years when "leftnav column, header, content" layouts all looked and worked
basically the same and were the standard look for lots of sites. Granted they
weren't mobile friendly ("what's mobile?") but at least you could figure out
how a site worked pretty fast if they stuck to that.

~~~
smt88
I liked that era too, and I agree that mobile-unfriendliness is most of what
killed it.

I do also think that the incentive of a designer is not to create those kinds
of designs. Familiarity is often more usable, but if your designs are
familiar, why hire you at all? Why not just copy a competitor?

------
halgir
Very old and very relevant:

[https://motherfuckingwebsite.com/](https://motherfuckingwebsite.com/)

[http://bettermotherfuckingwebsite.com/](http://bettermotherfuckingwebsite.com/)

And if you search for "motherfucking website", you'll find a million similar,
satirical versions of a website inspired by that first one.

~~~
ChrisSD
Sure but they are web pages, not websites. The distinction matters and does
undermine the satire somewhat.

~~~
iscrewyou
There’s a distinction between a website and a web app. Web pages and websites
are synonymous.

~~~
ChrisSD
No I meant those two pages are each a single, individual, isolated page. A
website is a collection of web pages, usually structured (even if loosely).

~~~
wtetzner
So, to make it a website you just need some links on each page that let you
get to the other pages. I don't see how that undermines the satire.

~~~
earthboundkid
Because it's easy to make one webpage, but when you make a website, you
immediately run into a huge wall of issues about consistency and navigability.
For example, it's become a convention that in the upper-left of a website,
there will be a logo that leads you to the homepage of the site. How do you do
that with bettermotherfuckingwebsite?

~~~
debaserab2
Hugo or any other static page generator work perfectly for maintaining clean
and consistent markup.

------
whoisjuan
Usability != Aesthetics. "Ugly" it's an inaccurate term for what this person
is trying to explain or argue here. If you ask me, I find the website of the
article quite ugly. But that doesn't mean it's not usable and simple.

------
gitgud
> I’m saying that you shouldn’t hide the elements themselves just to replace
> them with mimicking components...

I've fallen into this trap before. It's easy to make a component that's just a
little different than a default HTML field e.g. a text input with auto-
complete. If you start disabling/hiding the underlying input element,
accessibility drops massively...

~~~
Zarel
It's funny that he says that, then suggests using Normform instead, which very
much hides checkboxes to replace them with mimicking components.

To be fair, it's not like I've found a better solution for styling checkboxes.

~~~
x3haloed
Yeah, checkboxes simply need better theming support. Hiding them is not good,
but also having them break consistency and sticking out like a sore thumb
because there's no way to skin them is also not good

------
kgwxd
I'd love to see styling guides for very large forms, hundreds of inputs,
intended for rapid data entry. They've been a major part of my job for a few
decades and I have plenty of thoughts on the subject, but I'm not super happy
with any of them.

Things like Normform look great for basic forms, but when the entire screen is
filled with inputs, so much uniformity and white space seems to hinder
navigation and input speed.

~~~
x3haloed
I'm curious about why the entire screen is filled with inputs. Is it because
the job is complicated, and the user should be highly skilled and trained?

~~~
kgwxd
The user is, or will quickly be, very familiar with the forms. The forms have
been the same for decades, some users have even been using them that long.
They occasionally need to jump around the form to reference other data so tabs
and wizards slow them down.

Also, the forms are filled out differently based on customer defined rules
which vary widely and change frequently, especially around qualitative
questions. For large, long-term projects, the final form is hidden,
qualitative questions are turned into multiple quantitative questions and
mapped to the final answer so the user doesn't have to constantly think about
the custom rules. But for small projects, it's too much development work and
the user is expected to follow the rules manually.

------
jonbronson
"The hamburger is a great example of “ugly simple”. You are purposely hiding
the main structure that allows your users to move around your product freely
behind an additional interaction. That is the opposite of simple."

The author appears to be confusing two forms of simplicity. The burger bar
isn't there to simplify the number of user actions to navigate. It's there
because navigation is not the main mode of interaction, rather a side-affair.
Always showing that content actually increases the visual clutter and
cognitive load placed on the user for ALL their interactions.

------
robofanatic
May be slightly relevant to the topic

worst kind of embedded video seen so far

[https://womenhack.com/events/#eb-events-section-
title](https://womenhack.com/events/#eb-events-section-title)

why is that video running behind a text?? (only on a desktop, it doesn't show
up on mobile)

It makes me dizzy as soon as I start reading the text. I can't finish reading!

------
simonklitj
Sorry, but those buttons are absolutely atrocious. I get that underlined links
aren't that great, but I'd much prefer it to that. Or maybe something like
this: [https://dribbble.com/shots/7299868-Download-
Buttons](https://dribbble.com/shots/7299868-Download-Buttons)

~~~
x3haloed
I think the buttons are a little much, but they are also very obviously
buttons, which is good for usability.

~~~
simonklitj
Sure, but I think something like this:
[https://dribbble.com/shots/5915773-Unlock-
calls](https://dribbble.com/shots/5915773-Unlock-calls) is just a obviously a
button. I might be wrong.

~~~
pdpi
You can't decide whether it's "obviously a button" in isolation. Depends
entirely on how that particular element fits into the rest of the page.

The only exception I can think of is that it's obviously a button if it uses
system controls.

~~~
munmaek
Those are quite obviously buttons. The difference is the design is flat versus
the style in the post.

Those are a thousand times better than "buttons" that are just underlined
text.

~~~
ASalazarMX
Or simply bold blue text.

------
x3haloed
I found the article to be frustratingly light on details and examples. Does
anyone have more to contribute here?

~~~
bradley_taunt
This probably isn't quite what you're looking, for but I wrote a post back in
2017 that might touch on these items a bit more? [https://uglyduck.ca/death-
of-personality/](https://uglyduck.ca/death-of-personality/) (it's more of a
"hot take" on flat design trends making for poor design in general)

~~~
x3haloed
There are some good examples of what not to do. Your button state example is
the best.

I agree with you that they've turned the dial too far.

I'm hoping someone has a good collection of examples where the designer chose
obvious interactions and visuals instead of something "clever" and it turned
out well.

------
pcurve
As a leader that manages both design and engineering teams I feel worse sin is
being committed by the latter these days through unnecessary complexity in
front end technology usage.

------
davidjnelson
> Your job as a designer is to focus on the user experience journey and
> understand what those users expect to happen - not what you want to happen.
> This is a very delicate balance of design “give and take”, hence why simple
> designs always seem to work best.

Interesting. Why not give users exactly what they want and make it easy by
using standard patterns they see on all the consumer products they use?

------
TianlanSha
This article seems a little biased as the two images shown for example - one
flat and one with gradients and reflections are poorly picked.

The flat one is clearly a better designed one and the gradient/reflection one
is a badly designed and there are better examples the writer of the article
could've chosen, but I think they picked it on purpose to back up their
subjective opinion.

------
_bxg1
This comes off as excessively ranty.

That said, if you replace the word "ugly" with "unintuitive", the points are
mostly valid, if not particularly original.

#2 bothered me though, because while I've seen overly-simplified buttons that
were just colored text without a border, I've _never_ seen ones where the text
was underlined. Underlined colored text is still respected as the absolute
universal signifier of a link. Now, some sites do remove those underlines on
links which can create interference with other sites where non-underlined
colored text is a button. But still, he should've used a more realistic
example of the actual problem instead of a straw-man.

------
huhtenberg
> _Simple Does Not Mean Ugly_

Sure, but that's obvious.

Simplicity of use and the simplicity of appearance are two different things.
Of course, one doesn't mean the other.

~~~
amelius
Counterexample: the Apple watch design.

------
sansnomme
The header font is way too cramped. Simple is fine sure, but poor font pairing
is indeed uncomfortable to look at.

------
ericls
This blog looks so beautiful

------
hartator
Still have overly complicated animations on his blog :hover.

------
darepublic
the ugliest part of the site imo is the super dark borders around the code
snippets near the bottom. Should have kept it simpler

------
tambourine_man
The author’s CSS form project seems interesting:

[https://normform.netlify.com/](https://normform.netlify.com/)

~~~
dubcanada
Honestly it seems terrible and wrong according to most popular user
experiments on web forms.

1\. Error messages are non existant, all that shows is a redish/pink badge on
the left. Which a color blind person may have trouble finding a difference
from the blue one above. Also gives no indication as to what is wrong? Email
missing a ., shows a red. Hard to say what exactly the error is without
further details. And honestly errors are the biggest and most important part
of any form. Good quality errors with clear messaging will go miles above any
other "improvement".

The number one biggest annoyance is filling out a form only to get an error
with something you didn't know needed to be done or you did incorrectly.

Rules are simple

\- Keep already in inputted date

\- Try and indicate as clearly as you can what the error is

\- Show the user to the error (if it's one maybe focus that element)

\- Help the user fix the error by offering suggestions, things like if a user
types @gmial.com maybe say are you sure it isn't @gmail.com?)

\- If you are gonna hide forms in an accordion like checkout experiences, let
me go back. And show something that indicates that section is good to go. Real
time validation is really good. But PLEASE KEEP it the same as on the backend.
Nothing worse then getting a checkmark on the front only to get an error after
submitting from the backend.

\- KEEP THE ALREADY ENTERED DATA EXACTLY AS IT WAS I cannot stress this
enough. The amount of times I've closed a website after entering a form and
having all my data cleared from an error is more then enough.

2\. There is WAYYYY to much space between each element.

3\. The font is small, you should be using larger then size 12px font on
forms. At least 14px.

4\. The implied "success" is a green border, however the dropdown does not
turn green on selecting an option. So it does not look correct.

5\. The hover/focus state on the buttons is a slightly bigger light grey box
shadow. Hard to read, and hard to know what is focused.

6\. Checkbox/radio group has no tab function, you cannot tab to it.

I could go on and on, and I'm not even that skilled with UX.

Also it breaks default styles for several other html 5 input elements, because
it targets "input" rather than specific input elements.

Honestly if you want alright base styles that look good just use Bootstrap, at
least it handles focus states correctly.

~~~
bradley_taunt
I've been meaning to look-over Normform again (since it's been a while since
I've touched it) and these are excellent points. I'll be looking to remedy
these issues in the next iteration. Thank you!

------
dredmorbius
Not to detract from a very good rant, on a site design which exemplifies and
models its message, but the most critical element for design to me is that
_design complexity should be appropriate to the problem domain._

Note that in _most_ cases, the problem domain is relatively simple, _and the
design should reflect this._

Also: _the design AND problem domain should have minimal sufficient
complexity_.

But beyond that, I see several specific cases of obviously bad design:

\- The design is needlessly complicated. It is _excessivly_ complex for the
problem domain.

\- The design is _insufficiently expressive_. It is _overly simplified_ for
the problem domain.

\- A variant of the second: the design sweeps complexity under the rug.
Usually a small area pattern with three horizontal lines. A/k/a, if you're
relying on a Hamburger Menu (or its diet power-yoga version, the kebab menu),
you've probably got a Complexity Impedence Mismatch Problem.

Cases of design insufficient to a problem domain are ... well, pretty much
anything which requires repeatitive actions on more than about 10 elements at
a time. If your interface can present me with 10s, 100s, 1,000s, or more,
elements or options, _and there is no way to meaningfully group or class those
actions_ , then you have _insufficient design capability_. You've created an
_appearance_ of simplicity by squooshing the complexity into the user-site (or
-app) interaction.

Power-user tools are examples of more complex, but also _infinitely more
capable_ designs. As a long-time user of tools such as vim, mutt, awk, etc., a
small number of advanced capabilities allow me to work with ... 10s to 100s of
thousands of emails, millions of files, documents numbering in the thousands
(or more) printed pages, etc.

Contrast, as a totally random example, Google Chrome/Android, in which
managing open tabs becomes effectively impossible at counts above 10-20 open
tabs -- a milestone I can achieve in seconds after starting a new session.

My Firefox session, on a desktop, using Tree-Style Tabs, has 1,530+ tabs open
(among other features: the browser includes reporting, buried, but available,
of open tabs. I literally _do not know_ the equivalent count on my Chrome
session, it's not available).

The count is, admittedly, high.

*But the browser remains useful and usable, and (given time to go through and process the tabs), I can in theory deal with the overage. I can at least identify and contain the parts of the session associated with various projects.

Firefox's "Pocket" article archiver is an example of a tool exceedingly poorly
matched to its problem domain. I have ~15,000 articles saved within the
system. The browser is actually more useful than the putative archival tool.

(I've written on Pocket's many failings:
[https://old.reddit.com/r/dredmorbius/comments/5x2sfx/pocket_...](https://old.reddit.com/r/dredmorbius/comments/5x2sfx/pocket_it_gets_worse_the_more_you_use_it/))

Also: bradley_taunt: "if you" should be "if your", typo.

------
EFFALO
"User experience design" is one of the most pretentious titles that Design
(with a big D in front) has ever appropriated. As if a designer (little d) can
really design an experience... Experiences unfold in realtime, shaped by a
multitude of forces which the designer could never predict or even begin to
comprehend.

This article reminds us to focus on what Design (big D) once knew when our
practice focused on interactions and augmenting human intellect...
affordances, feedback, loops.

Seeing my parents and peers struggle with understanding iOS or dealing with
shitty bank websites makes me feel that we lost our way somewhere. Maybe one
day we will return.

~~~
noen
Sorry but as a UxD of 15+ years, that is exactly what I and my team do. It is
entirely possible and reasonable for a little d designer to understand and
account for the realtime forces that affect a user in context.

The problem is three-fold. First, is that UxD has become a catch all for any
digital designer (it took me 8 months to hire 2 qualified UxDs). Second, most
companies simply don't pay for professional design talent.

I can tell you with certainty that banks pay between 30% and 50% of market
rate for senior design talent. Most mobile app startups pay slightly less than
that.

Third is that we don't write the code. We can only recommend what a developer
should build and what a stakeholder should prioritize. I've watched both
sandbag good design in favor of more features more times than I can count.
I've watched both sandbag good design because there was no percieved business
value more than once. I've had so many countless conversations with developers
who wouldn't do the work because they didn't know how to implement a design
and wouldn't admit their knowledge gap.

A true UxD who can cover interaction, behavioral psychology, kinesiology,
aesthetics, workflow, accessibility, information architecture and basic
research methods can command good money that most companies outside FAANG
aren't willing to spend.

~~~
kps
> _I 've watched both sandbag good design because there was no percieved
> business value more than once._

Riffing on the article title: Simple Does Not Mean Deficient.

“Star had many fewer commands than today’s systems, and it didn’t do it by
having fewer functions. It just had fewer commands.” — Dave Smith at The Final
Demonstration of the Xerox ‘Star’ Computer (video:
[https://www.youtube.com/watch?v=_OwG_rQ_Hqw](https://www.youtube.com/watch?v=_OwG_rQ_Hqw)
text:
[http://archive.computerhistory.org/resources/access/text/201...](http://archive.computerhistory.org/resources/access/text/2015/09/102737965-05-01-acc.pdf)
)

