Simple Does Not Mean Ugly

https://uglyduck.ca/simple-does-not-mean-ugly/

by bradley_taunt • 7 years ago

170 127 7 years ago

uglyduck.ca

tambourine_man• 7 years ago

The author’s CSS form project seems interesting:

https://normform.netlify.com/

dubcanada2• 7 years ago

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_taunt3• 7 years ago

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!

huhtenberg• 7 years ago

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• 7 years ago

Counterexample: the Apple watch design.

halgir• 7 years ago

Very old and very relevant:

https://motherfuckingwebsite.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.

ChrisSD2• 7 years ago

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

adrianN• 7 years ago

What's the distinction?

x3haloed9• 7 years ago

Right. This page is also not interactive. I'd like to to see an interactive example that's also not an eye sore.

iscrewyou• 7 years ago

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

jeremycw• 7 years ago

http://www.motherfuckingblog.com/

pingyong• 7 years ago

Is it bad that I unironically like the first one, actually more than the second one?

Enginerrrd• 7 years ago

I do too.

naringas3• 7 years ago

agreed, the "better" motherfucking website wastes all that precious space with it's gloriously large and dumb margins around the text. the kind of silly idocy that makes me glad there's a reader mode to undo that crap.

the original motherfucking website is already perfect, no reaching for the reader mode.

discreditable• 7 years ago

You might like https://bestmotherfucking.website

ljw1001• 7 years ago

Yeah, but can it really be good if you can't load the motherfuckingwebsite because your IT department blocked the website because it has a dirty word in it?

dijit2• 7 years ago

My IT department intercept TLS and break half of the internet in the process.

So they can get fucked in my opinion. I’m not convinced that the issue lies with the website.

Infantilising your users is exactly why contempt exists for sysadmins.

And I say that as a sysadmin.

dredmorbius3• 7 years ago

I'm biased for obvivious reasons, but:

https://codepen.io/dredmorbius/full/KpMqqB

dorkwood3• 7 years ago

When did beauty become something we loathe? Any attempt to make something look nice invites scorn from the programmer community. Get out of here with your styling and your white space, we only want to see black text on a white background.

I mean, I get it -- it's about load times, readability, accessibility, yadda yadda. But does that really mean everything has to look like shit? Why is it a binary choice?

"Well, I actually think that motherfuckingwebsite looks good. It's beautiful in its simplicity."

Fair call, there's no accounting for taste. But does this attitude also extend to, say, public spaces? What about architecture? Should a house be designed like motherfuckingwebsite.com?

braneloop• 7 years ago

If a house is hard to live in, does it really matter how beautiful it is?

x3haloed9• 7 years ago

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

bradley_taunt3• 7 years ago

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/ (it's more of a "hot take" on flat design trends making for poor design in general)

x3haloed9• 7 years ago

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.

eps• 7 years ago

It's a strawman version of a blog post. It argues against trivial issues that are inflated into something they aren't.

whoisjuan• 7 years ago

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.

simonklitj5• 7 years ago

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

Finnucane• 7 years ago

Many of your users would probably disagree.

dubcanada2• 7 years ago

Many of Hacker News visitors would probably disagree. What most of us don't seem to understand is what Hacker News says is not the common statement of most. People here tend to be on the less design side of things, most on the can I use this entirely with my keyboard. Most of the population however is not like that.

I don't see any statistics that the average user has any preference over which button to use out of the 3 examples provided. I think most users would assume buttons are supposed to look like the sites/apps they visit/use most, amazon, facebook, google, instagram, etc. If you button functions similar to those examples your users would be happy.

simonklitj5• 7 years ago

Really? I personally doubt users would prefer Skeuomorphic buttons. I know most of my friends are hit by nostalgia when they see something Skeuomorphic, sort of a "Remember when things were this way?", and I honestly do not want any of my products to perpetuate this emotion.

jefftk• 7 years ago

You've linked to animated download buttons. Are you being serious?

simonklitj5• 7 years ago

What's wrong with it being a download button? Does it have to be a "Cancel" or "Yes" button for the example to apply?

But sure, they're animated. I'm referring to the design of the buttons, not the animations. Try this on for size: https://dribbble.com/shots/5915773-Unlock-calls

I don't get this obsession with Skeumorphism. IMO it's not a good look and should be left in the 2000's.

x3haloed9• 7 years ago

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

simonklitj5• 7 years ago

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

Double_a_92• 7 years ago

very obviously buttons

They might not be to some non-tech-savy people... If you don't understand the concept of a virtual button that thing might just look like a rounded, blue rectangle with text in it. Nothing hints that it is supposed to be touched, it might as well just be some kind of highlighting.

EFFALO• 7 years ago

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

x3haloed9• 7 years ago

I would argue that what you're seeing with bad design is not the fault of UX design as a concept but rather specific examples where it failed. UX designers are supposed to help ensure that software is usable and frustration free. If the software fails to achieve those things, then either the UX designer has failed or has been overridden by someone else. Or it's consensus design. The UX designers job us not to make things prettier or more sexy than usable, because sacrificing usability with frustrate people, which is something they should understand and apply.

noen• 7 years ago

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.

interactivecode• 7 years ago

As a ux designer it can also be incredibly hard to find a job that's doing actual ux research. When I worked as a UX designer every boss just wanted me to confirm a design is "user friendly" instead of taking the time to research user flows and designing behaviour.

kps• 7 years ago

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 text: http://archive.computerhistory.org/resources/access/text/201... )

gitgud• 7 years ago

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• 7 years ago

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.

bradley_taunt3• 7 years ago

Completely agree! I've been meaning to jump back into that project and try some new things (maybe pull back on some of the custom styling even). It has been quite a while since I've updated that repo...

x3haloed9• 7 years ago

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

kgwxd2• 7 years ago

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.

x3haloed9• 7 years ago

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?

kgwxd2• 7 years ago

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.

grumpy-cowboy• 7 years ago

Rapid data entry and Web app/site/page cannot be put in the same sentence.

carlmr3• 7 years ago

From experience I agree, but is it impossible or are the current frameworks just lacking?

Usually some terminal UI is the best for rapid data entry, which is why a shop I used to work at switched back to their TUI because the shiny new GUI was blocking everything.

The TUI you had to learn and the GUI was intuitive, but after a week anybody could use the TUI at the same speed and after a month they'd 10x or and soon 100x the entry speed.

sansnomme• 7 years ago

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

pcurve• 7 years ago

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.

darepublic• 7 years ago

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

TianlanSha• 7 years ago

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.

jonathanstrange• 7 years ago

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.

smt883• 7 years ago

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.

shantly4• 7 years ago

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.

burnte• 7 years ago

I Agree about usability regressing. One of the biggest I've seen is this trend towards two part login screens. Now rather than hitting my password manager button once, I have to do it twice, for no good reason. The "best" theory I heard was that the site is checking if you're SSO or not, but you can do that without two steps, just ignore the password and pas to SSO if they are, or use the password if the SSO check fails.

dredmorbius3• 7 years ago

Shuttling the left-column navigation beneath the content, and preserving a minimal header, would preserve most of the functionality and remain mobile-friendly.

chipotle_coyote3• 7 years ago

While I don't entirely disagree, how many web sites need the kind of features you're talking about? Have you ever looked at Hacker News and thought "if only this had user-definable menu shortcuts," or been shopping on Amazon and thought "this would be so much better if it had toolbars with custom icons"? Probably not.

One of the most frustrating things about modern web development, at least to cranky old people like me, is the conflation of web sites with web applications. If the use case you're talking about is truly trying to replace what would otherwise be a desktop application, like Gmail or (heaven help us) a code editor or word processor, then many of the features you're talking about start becoming useful. But for so, so many web sites, the focus on feature-rich client side toolkits has become, well, kind of a distraction. Is there any real advantage to the user if the New York Times web site is a state-of-the-art React application? Is it improving my reading experience? I not only don't need them to be using a toolkit that gives them desktop-class drag and drop capability, I don't want it, because I'm just there to read a damn article.

So when you write "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," my reaction can't help but be: you literally just used "web application" and "website" as if they were interchangeable, and they are not. There's a worthwhile discussion to be had over how much "desktop-class UX" we actually need for our web applications, but I'd like to see our web sites stop being built like they were web applications when they don't need to be.

mc32• 7 years ago

”it had toolbars with custom icons"

This would be pretty cool, actually. Specially the AWS services where the icons are more or less divorced from what they’re supposed to represent.

marcosdumay• 7 years ago

Honestly, I have never wanted user-definable menu shortcuts on a 90's desktop application either. Each time I saw it, it was a crutch for making a badly designed menu a bit less worse, and things would be much better if the time spent on that feature was simply spent on a better menu.

Very few CAD programs gained something from customized menus (not icons). But this one was also almost always a crutch for fixing bad designs, and those same few programs always gained much more by having a good keyboard based interface.

RandallBrown• 7 years ago

To be really fair, how many applications from around 2000 actually had all of that stuff you're describing.

I know that it was built into a lot of the default application toolkits at the time, but my recollection is that not every application supported everything. Sometimes the things that were supported didn't actually work very well and what actually happened was a bit of a surprise.

smacktoward• 7 years ago

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 reason you got all that stuff with desktop applications is that the designers of the platforms those applications ran on (Microsoft and Apple, mostly) included them in the platform by default. As long as you colored within the lines of the platform, your application would pick up all those nice features without you having to do any work to add them. You got them all "for free."

You could of course build a desktop application that didn't get those features by coloring outside the lines -- building your own GUI widget set rather than using the one the platform provided, for instance. But, and this is the important bit, that meant doing extra work, and most programmers (like most people) are lazy. They don't want to do extra work unless they really have to. So most developers stayed within the lines, and the platform rewarded them for doing so by giving them all these nice accessibility and usability benefits. The Lazy Way and the Right Way were deliberately aligned, and everybody benefited.

This is what the Web platform is missing: nobody has done the extra work to force the Lazy Way and the Right Way into alignment. The set of UI primitives the Web platform offers a developer is very small, and hasn't really changed since the late '90s. So the inevitable result is that everyone ends up building their own custom versions of everything -- and since people are lazy, those custom versions end up half-baked. They get just enough polish to address the most common cases, but things like accessibility and usability aren't deemed worth the extra effort they'd require to implement. So we get applications that feel broken compared to desktop apps.

What we need is a richer set of common primitives that are attractive enough to convince people to use them instead of rolling their own, and that also provide all those nice features you mentioned by default. We'll never get an accessible Web app ecosystem if we expect every developer to build accessibility for themselves. It only works if they get that stuff for free.

carlmr3• 7 years ago

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

A lot of desktop apps are basically packaged web apps now, so that's no surprise.

_bxg1• 7 years ago

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.

davidjnelson• 7 years ago

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?

robofanatic3• 7 years ago

May be slightly relevant to the topic

worst kind of embedded video seen so far

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!

ericls• 7 years ago

This blog looks so beautiful

jonbronson• 7 years ago

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

hartator• 7 years ago

Still have overly complicated animations on his blog :hover.

dredmorbius3• 7 years ago

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_...)

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

Simple Does Not Mean Ugly

Related Stories