11 ms·

Simple Does Not Mean Ugly

170 points by bradley_taunt 7y ago

tambourine_man 7y ago
The author’s CSS form project seems interesting: https://normform.netlify.com/ https://normform.netlify.com/
- dubcanada 7y 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_taunt 7y 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 7y 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 7y ago
  Counterexample: the Apple watch design.
halgir 7y ago
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 7y ago
  Sure but they are web pages, not websites. The distinction matters and does undermine the satire somewhat.
  - adrianN 7y ago
    What's the distinction?
    - pavpanchekha 7y ago
      More than one page. Sounds trivial, but having more than one web page also means you'll have navigation, which is much more challenging on default browser styles than simple document markup.
      - 7777fps 7y ago
        It's almost a shame the idea of having a sitemap.xml which the browser could parse and provide native navigation for never took off. Of course it didn't because native controls are the first thing any designer changes because native controls on the web were always associated with amateur websites.
        shantly 7y ago
        To be fair native controls were total ass for years. And still kind of are. Doubly so if you're trying to build an "app". Basic crap any half-decent UI toolkit would provide out of the box, just not there at all. The stuff that is there's often not great. It seems like as soon as it became common to work around problems with HTML ui in Javascript, the already-slow work to improve the standard appearance and functionality of HTML websites dropped to almost zero. We got some alright semantic-markup stuff after that but it took forever to even get a couple layout primitives that are non-terrible.
x3haloed 7y ago
I found the article to be frustratingly light on details and examples. Does anyone have more to contribute here?
- bradley_taunt 7y 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/ https://uglyduck.ca/death-of-personality/ (it's more of a "hot take" on flat design trends making for poor design in general)
  - x3haloed 7y 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 7y ago
  It's a strawman version of a blog post. It argues against trivial issues that are inflated into something they aren't.
whoisjuan 7y 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.
simonklitj 7y 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 https://dribbble.com/shots/7299868-Download-Buttons
- Finnucane 7y ago
  Many of your users would probably disagree.
  - dubcanada 7y 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.
    - shantly 7y ago
      Normal users tend to be "less on the design side" when it comes to actual usability. They might (or might not—I don't think most companies bother to find out) care that you came up with some hot-shit pretty design that impressed the VPs, but for UX the more "designery" your site the greater the odds it'll be hard for normal people to use. [EDIT] which is to say I think a lot of application design hours/$s have more to do with cargo-cult "brand styling" from the marketing department, and internal promotion of a project + personal portfolio-building and design-insider signaling than with benefits to end-user marketing, sales, or usability. It's not all useless from that perspective, obviously, but I'm very confident a lot of it is.
    - majewsky 7y ago
      > People here tend to be on the less design side of things, most on the can I use this entirely with my keyboard. Wrong dichotomy. "Design" is not about the amount of eye-candy. Design is about how to make a product so that the user can use it most effectively. Making it visually appealing is an integral part of that, but only part of it. https://en.wikipedia.org/wiki/Dieter_Rams#%22Good_design%22_principles https://en.wikipedia.org/wiki/Dieter_Rams#%22Good_design%22_...
EFFALO 7y 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.
- x3haloed 7y 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 7y 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.
gitgud 7y 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 7y 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_taunt 7y 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...
  - x3haloed 7y 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
kgwxd 7y 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.
- x3haloed 7y 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?
  - kgwxd 7y 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 7y ago
  Rapid data entry and Web app/site/page cannot be put in the same sentence.
  - carlmr 7y 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 7y ago
The header font is way too cramped. Simple is fine sure, but poor font pairing is indeed uncomfortable to look at.
pcurve 7y 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.
- whalesalad 7y ago
  Agreed. Masturbatory work like this stems from a lack of discipline combined with poor leadership. It’s a virus that has infected a lot of teams. When the patients run the asylum (Uber comes to mind) all kinds of wacky homegrown or shiny new tech gets piled on to the system and then you’re stuck with it and can’t move.
darepublic 7y 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 7y 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 7y 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.
- smt88 7y 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.
  - shantly 7y 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.
    - smt88 7y ago
      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?
_bxg1 7y 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 7y 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?
robofanatic 7y ago
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!
ericls 7y ago
This blog looks so beautiful
jonbronson 7y 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 7y ago
Still have overly complicated animations on his blog :hover.
dredmorbius 7y 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_it_gets_worse_the_more_you_use_it/ https://old.reddit.com/r/dredmorbius/comments/5x2sfx/pocket_...) Also: bradley_taunt: "if you" should be "if your", typo.

170 points by bradley_taunt 7y ago

tambourine_man 7y ago

The author’s CSS form project seems interesting: https://normform.netlify.com/ https://normform.netlify.com/

dubcanada 7y 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_taunt 7y 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 7y 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 7y ago
Counterexample: the Apple watch design.

halgir 7y ago

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 7y ago
Sure but they are web pages, not websites. The distinction matters and does undermine the satire somewhat.
- adrianN 7y ago
  What's the distinction?
  - pavpanchekha 7y ago
    More than one page. Sounds trivial, but having more than one web page also means you'll have navigation, which is much more challenging on default browser styles than simple document markup.
    - 7777fps 7y ago
      It's almost a shame the idea of having a sitemap.xml which the browser could parse and provide native navigation for never took off. Of course it didn't because native controls are the first thing any designer changes because native controls on the web were always associated with amateur websites.
      - shantly 7y ago
        To be fair native controls were total ass for years. And still kind of are. Doubly so if you're trying to build an "app". Basic crap any half-decent UI toolkit would provide out of the box, just not there at all. The stuff that is there's often not great. It seems like as soon as it became common to work around problems with HTML ui in Javascript, the already-slow work to improve the standard appearance and functionality of HTML websites dropped to almost zero. We got some alright semantic-markup stuff after that but it took forever to even get a couple layout primitives that are non-terrible.

x3haloed 7y ago

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

bradley_taunt 7y 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/ https://uglyduck.ca/death-of-personality/ (it's more of a "hot take" on flat design trends making for poor design in general)
- x3haloed 7y 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 7y ago
It's a strawman version of a blog post. It argues against trivial issues that are inflated into something they aren't.

whoisjuan 7y 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.

simonklitj 7y 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 https://dribbble.com/shots/7299868-Download-Buttons

Finnucane 7y ago
Many of your users would probably disagree.
- dubcanada 7y 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.
  - shantly 7y ago
    Normal users tend to be "less on the design side" when it comes to actual usability. They might (or might not—I don't think most companies bother to find out) care that you came up with some hot-shit pretty design that impressed the VPs, but for UX the more "designery" your site the greater the odds it'll be hard for normal people to use. [EDIT] which is to say I think a lot of application design hours/$s have more to do with cargo-cult "brand styling" from the marketing department, and internal promotion of a project + personal portfolio-building and design-insider signaling than with benefits to end-user marketing, sales, or usability. It's not all useless from that perspective, obviously, but I'm very confident a lot of it is.
  - majewsky 7y ago
    > People here tend to be on the less design side of things, most on the can I use this entirely with my keyboard. Wrong dichotomy. "Design" is not about the amount of eye-candy. Design is about how to make a product so that the user can use it most effectively. Making it visually appealing is an integral part of that, but only part of it. https://en.wikipedia.org/wiki/Dieter_Rams#%22Good_design%22_principles https://en.wikipedia.org/wiki/Dieter_Rams#%22Good_design%22_...

EFFALO 7y 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.

x3haloed 7y 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 7y 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.

gitgud 7y 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 7y 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_taunt 7y 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...
- x3haloed 7y 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

kgwxd 7y 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.

x3haloed 7y 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?
- kgwxd 7y 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 7y ago
Rapid data entry and Web app/site/page cannot be put in the same sentence.
- carlmr 7y 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 7y ago

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

pcurve 7y 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.

whalesalad 7y ago
Agreed. Masturbatory work like this stems from a lack of discipline combined with poor leadership. It’s a virus that has infected a lot of teams. When the patients run the asylum (Uber comes to mind) all kinds of wacky homegrown or shiny new tech gets piled on to the system and then you’re stuck with it and can’t move.

darepublic 7y 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 7y 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 7y 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.

smt88 7y 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.
- shantly 7y 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.
  - smt88 7y ago
    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?

_bxg1 7y 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 7y 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?

robofanatic 7y ago

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!

ericls 7y ago

This blog looks so beautiful

jonbronson 7y 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 7y ago

Still have overly complicated animations on his blog :hover.

dredmorbius 7y 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_it_gets_worse_the_more_you_use_it/ https://old.reddit.com/r/dredmorbius/comments/5x2sfx/pocket_...) Also: bradley_taunt: "if you" should be "if your", typo.