9 ms·

Rules for Creating Gorgeous UI

385 points by mparramon 12y ago

GuiA 12y ago
> Good, generous whitespace can make some of the messiest interfaces look easy to use. And they make them completely unusable to anyone with less than a 27" screen, but all the hip designers apparently don't care about users who have anything less than a 2560*1440 display just like them (1024x768 is still the norm for a lot of people outside of the Silicon Valley bubble). I've seen so many web products that are less usable than 20 year old command line interfaces, notably because of this "you can never have too much whitespace!" mentality, it's appalling. The first goal of an interface is to be used.
- elecengin 12y ago
  I view whitespace as placing pressure on the rest of the UI - hopefully compressing unnecessary elements away. Of course if you dont bound the space, the pressure just expands everything like a balloon - like you describe. I think the need for whitespace should be treated more like a constraint than a solution.
- dmix 12y ago
  1366x768 overtook 1024x768 as the most popular in 2012. But most tech startups here are targetting early adopters initially so that doesn't include all of those people in China or India running XP in cybercafes.
  - bunderbunder 12y ago
    But perhaps it should include all of those people in coffee shops using Surfaces and ChromeBooks and MacBook Airs.
    - dmix 12y ago
      Is this really a problem? Responsive design is extremely popular among startups. I highly doubt most modern websites don't support 1366x768. Every front-end team I've worked with tests on iPads and smaller screens. I have a feeling the OP speculating and making blanket stereotypes against designers. But these designers almost always work with front-end developers who take usability seriously and any good teams have feedback loops to correct these issues.
      - bunderbunder 12y ago
        I've been running into it a fair bit lately. Good designers might get it, but apparently not all designers are equally thoughtful.
      - aranjedeath 12y ago
        Yeah, definite problem. I ran 1280x1024 until last month when that monitor (lcd, from 1999) finally died. The web was a horrible place and made me angry at humanity. I've got 1920x1080 now, and I now have enough screen pixels to see what they were fucking up my 1280 for. Not worth it.
  - gohrt 12y ago
    Most people don't run their web browser in full-screen mode.
    - pmontra 12y ago
      People with 11" or 13" Macbooks inevitably do. Same thing for people with 13" PCs, the ones called ultrabooks. People start using non maximized windows at 15", more if on a Mac because the UI encourages full screen windows. The trend to large fonts means that PC users with 1366x768 screens don't see much of a page if they keep windows small. Combining all those factors, most laptops users browse the web with full screen browsers. Tablets are always run full screen. I'm on a full HD 15" laptop and very rarely maximize windows, but I see I'm an exception when I look at co-workers screens.
    - danellis 12y ago
      Oh, that surprises me. What are the figures on that?
- coldcode 12y ago
  Also people seem to think tiny text with medium gray on light gray is fashionable. If people can't read your content why bother.
  - Gracana 12y ago
    And font-weight: 300, because text looks best when it's a wispy gray blob.
- mhd 12y ago
  Yea, I've noticed that on my 1920x1200 monitors, not having my browser maximized (heresy!) won't get me the "native" resolution anymore, but some scaled down version. It's weird having a huge friggin' screen and getting a hamburger menu...
  - girvo 12y ago
    Guessing you're triggering the "tablet" responsive breakpoint. That's a hard one to fix though, media queries are a bit of a hack but it's certainly better than http://mobile.example.com/ http://mobile.example.com/
- deleted 12y ago
  [deleted]
organsnyder 12y ago
Rule 1: Stop talking about making "gorgeous" user interfaces. Create usable interfaces first; then you can worry about the subjective parts.
- lamacase 12y ago
  To be fair, this is an article by a UX designer, targeting other UX designers, for the express purpose of getting their (presumably) already usable interfaces noticed, and appreciated. If you can accomplish this with 7 simple rules then you don't really have to worry about the subjective parts, and you can focus on the usability.
  - gohrt 12y ago
    Maybe so, but the fast majority of designers are designing non-usable sites, so we shouldn't be promoting advice of the nature of "How to run a fireworks show at home" [quietly assuming you are an expert in fire safety]
drderidder 12y ago
"I love clean and simple as much as the next guy, but I don’t think [flat design] is a long-term trend here. The subtle simulation of 3-D in our interfaces seems far too natural to give up entirely." Agreed, the "flat design" trend seems like a pushback against over-done skeuomorphism that went a little too far in removing all the visual depth cues.
Animats 12y ago
Gorgeous, or usable? There's an annoying trend in UI design to make the simple stuff look really good, while making more difficult operations harder. If you think your UI concept is great, try mocking up something like Photoshop or a 3D drawing program. Those have really hard UI problems to solve. The mania for "clean design" has resulted in such things as invisible close buttons that only appear when you mouse over them. (Facebook ads work like that.) Bob Lutz, who used to be head of General Motors, ran into this. His designers had built a concept dashboard which looked like something from Bang and Olufsen, with the black-on-black design popular in the 1980s. It looked really great. Nobody could operate the controls reliably without training or a manual. There was a brief period when creative user interfaces on web pages got completely out of hand. Check out https://web.archive.org/web/20120207224137/http://www.girbaud.com/eng/ https://web.archive.org/web/20120207224137/http://www.girbau... for an over the top example from a French fashion design house. They went bankrupt a year after putting up that page.
- bunderbunder 12y ago
  My bank just replaced their online banking site with one that features a much "cleaner" design. I'll grant, it's way more pretty than the old one. But it also makes a lot of common operations take many more interactions. Getting a quick overview of how much money I have, for example - used to be, all my accounts fit neatly on screen at the same time. Now I gotta keep scrolling. Reminds me of a captioned image I saw a month or so back, of a grassy quad somewhere with a sidewalk that had a T intersection, and a bare track through the grass where everyone cuts the corner. The sidewalk was labeled "UI" and the bare track was labeled "UX".
  - notduncansmith 12y ago
    Possibly the image from this article? http://boxesandarrows.com/designing-screens-using-cores-and-paths/ http://boxesandarrows.com/designing-screens-using-cores-and-...
    - bbrian 12y ago
      Probably this: https://twitter.com/vinniequinn/status/506116655983099904 https://twitter.com/vinniequinn/status/506116655983099904 I cycle along there regularly and actually keep to the paved section because it's smoother.
Terr_ 12y ago
> I had my excuses. I don’t know crap about aesthetics. I majored in engineering– it’s almost a badge of pride to build something that looks awful. “I majored in engineering — it’s almost a badge of pride to build something that looks awful.” I guess whoever did the pull-quotes was also an engineering-major...
mhd 12y ago
Not surprisingly, most screenshots don't present a lot of data, which is where things usually get problematic. Programmers often get criticized for their fruit salad GUIs, but usually that's the result of having to present plenty of options and data. Sure, the first thing you'll hear to that issue is "Do you really need to have that many options/paths/data?". And granted, quite often this is applicable, although not always in the same way (hiding rarely used options vs. eliminating them, i.e. "advanced options" vs. "only one friggin mouse button"). But often enough, presenting lots of data and hierarchies is the whole point of an app, especially when it gets more about enterprise systems than "what pancakes do my friends like" web 2.0 frippery. And that's where the ideas coming from ad design and typography kinda fail. Which is why people like Tufte are so respected, as they go beyond this. If I recall correctly, in the initial review of the iPhone Tufte recommended against even the minimal margins of the photo gallery, removing white space for a better experience. And yes, knowing the rules before you break them might be a part of that... If you don't do this as your full-time job, I'd very much recommend going for "usable" instead of "gorgeous". The latter is very much a 80/20 deal, where you spend insane amounts of time, asking co-workers and A/B tests just to get that final ratio or pixel size right. Whereas most of your customers still have Nappa Valley as a background picture behind their copy of IE9... I don't really miss under construction signs and rotating skulls, but I do have the slight feeling that a lot of what designers are doing will be like early 20th century typography in a few years, where even some of its major proponents aren't quite sure about it anymore...
- lamacase 12y ago
  > ideas coming from ad design One of the things that bugs me most about many "modern" product pages is that they are often designed to look like brochures. Flashy and eye-catching, but with very little content or meaningful organization. Most of the time I was brought to the page by an actual advertisement, or some content performing a similar function, and I am on the page now, looking for information. It's a bit like going to a restaurant and getting a pamphlet promoting the atmosphere and decor instead of a menu. I scrolled though many sites advertising devices, looking for that elusive little table that summarizes the data I'm looking for, variously called 'features' or 'specs' or whatever. But these days even those sections are full of non-information like "all day battery life* " (That star is pointing nowhere). I'm open to the possibility that I'm using the internet wrong. Perhaps there's a very good reason that the last place I should expect to find information about a product is on the product's own page.
sjcsjc 12y ago
I really like this line: "Start thinking of whitespace as the default — everything starts as whitespace, until you take it away by adding a page element." - speaking as someone whose design sense and skills are dreadful.
bane 12y ago
Here's some rules that almost every designer I know ignores: 1) Map out your interface and interaction trees first 1-click - most common actions 2-clicks - second most common actions 3-clicks - power user level stuff Put the most commonly used stuff at 1-click or interaction. If you don't know what goes at 2 and 3 clicks in, you don't understand how the application is used, because you don't understand what the most common interactions are. If you've run out of room for the 1-click stuff in your UI, then your UI concept is poorly designed. Keep iterating and collecting information until you can fulfill this. Don't put anything at more than 3 clicks in. 2) Double the number of interaction points in the UI. Assume the application will grow and add features. If you optimize your design for the number of features you have today, you'll have no where to put all the stuff you're going to get over the application lifetime and it'll all just end up getting buried in menus. I've seen lots of gorgeously, carefully, designed applications die a year in because of this. Double everything and see if that number of interaction points still fits within your concept, that way the interface has room to grow without getting messy. 3) Don't make your users interpret, make them understand. If your concerned about how universally an icon is interpreted across cultures, you're doing it wrong. Interpretation is an additional step your users have to go through to use your UI, it's like putting everything at 2, 3 and 4 clicks in because they now have to not only look and scan the UI for what they want, they need to figure out what each interface item means before they can interact with it. Even worse, as they grow to become accustomed to your UI, they're going to end up memorizing location and placement of options because the interface widgets take too long to interpret. Get 2 revisions down the road and you move a button and wham your tech support calls jump 50% because the users never bothered to remember what the symbol for their action looked like, just where it was on the screen. 4) Everything must be discoverable. This is why the world moved to GUIs from CLIs. Don't make your users play a 1990's era adventure game where they have to click every pixel on the screen to see if they can advance their usage. The Flat UI trend is notorious for this. 5) Consistency rules. Also see #3. 6) Eliminate Steps. Map out how many steps certain actions are. Cut them down to as few as possible. I remember one time going through a file import process with a tool, by the time you got the file imported the user had to navigate 27 different steps! Almost every step required minimal or no user input. Nobody had ever bothered to map out the interaction patterns in the tool before but users were constantly complaining about how difficult it was to use. We reworked the workflow and got it down to 3 steps and user-engagement jumped triple digits. 6) After you've addressed 1-6, make it look nice.
serve_yay 12y ago
> I majored in engineering — it’s almost a badge of pride to build something that looks awful. I dislike this attitude, for me it is very reminiscent of the way people just shut down when math comes up. "I hate math" and that's it. I'm not a math person, my brain doesn't work that way. On and on. There is even a perverse sort of pride in it. Why not do the work, why not try to get better, why not try to expand into things we're not good at yet.
- captainmojo 12y ago
  I've written off aesthetics my entire coding career (15 years), blaming color-blindness, but exactly in the way you speak. I often wonder whether design is even a thing I could get better at. I'm reminded of a Dummies book I read about Real Estate that essentially said a Real Estate agent with 10 years of experience could be turbo, or they could have just repeated the first year ten times. It's nice to see articles like this that tear down some of the mystery. Another force here, using your example, is that someone pushing themselves from Algebra to Trigonometry might not be as valuable to them as someone who repairs Honda Civics studying how Ferrari's are built. I've seen people shut down to new concepts hundreds of times, but there's some solace in the idea that maybe they're improving their lives in other ways that they find meaningful.
achr2 12y ago
Does anyone have some good resources for UI/UX design for data and option heavy application (enterprise)? There are fundamental differences between most 'apps' and the kind of dense applications I work on/with.
- ThomPete 12y ago
  I did some work around that. It's older than the hills (like from 2008) Are you thinking like this https://www.behance.net/gallery/822055/LMG-Analytics-Tool https://www.behance.net/gallery/822055/LMG-Analytics-Tool Been writing a little bit on a book about design for enterprise perhaps I should pick it up.
  - silviogutierrez 12y ago
    Not the OP, but I'm also interested. The example you provided was right on.
  - achr2 12y ago
    Your work looks great. One thing that I struggle with, that you seem to have an good awareness for, is layout within a 'hierarchy' of controls/views. I look forward to your book.
    - ThomPete 12y ago
      Thanks. As I said this is older than the hills :) but still holds up IMHO. Hierarchy of controls is exactly one of those things that are very hard to do because you have to find the balance between easy to use and powerful. I.e. the more powerful you want you tool to be the more controls you need and thus the complexity rises.
- datashovel 12y ago
  A project I'm working on currently (not public-facing) is a relatively complex design tool for a manufacturer. One of the tools they were using was quite clunky and was somewhat "option heavy". What I decided to do (and am glad I did) was condense alot of the "option" stuff into basic gestures or movements. I use the term "gestures" liberally in that this isn't a mobile or tablet app with touchscreen interface. It's a browser-based desktop app where the only real interaction occurs through mouse / keyboard input. Given that it's a 'design tool' there are probably alot of things about the app that couldn't be transferred to a typical data-driven GUI, but I think having this frame of mind when designing the UI / UX can probably help in alot of unexpected ways. I think the general takeaway here is that "more options doesn't always mean more buttons" :)
keyle 12y ago
Being a designer doing UI/UX for a living and building interfaces, I think this is a very good starter guide. If devs only started by lining things up and thinking in terms of visual hierarchy, they'd already be 90% there.
toolz 12y ago
It took me a few refreshes and multiple clicks just to realize I had to scroll down. I don't understand why someone would think unusable could ever be gorgeous. That page has one of the worst layouts I've ever come across and ironically it's supposed to be about enhancing users experience.
bwy 12y ago
This is actually awesome. I'm in the exact same boat that the writer started in, able to create UX but admittedly clueless about UI design. Putting some principles I've had swirling around my head for a while trying to learn into concrete writing just solidifies it.
Gracana 12y ago
> Haraldur Thorleifsson’s grayscale wireframes look as good as lesser designer’s finished sites. I thought that image was going to be an example of what not to do. In black and white, you can see that there is hardly any contrast, and I think that's a big problem. Low-contrast may look pleasant, but it makes reading the content and understanding the UI much harder, especially for users who may not have the ideal displays and lighting conditions that designers in their offices have.

385 points by mparramon 12y ago

GuiA 12y ago

> Good, generous whitespace can make some of the messiest interfaces look easy to use. And they make them completely unusable to anyone with less than a 27" screen, but all the hip designers apparently don't care about users who have anything less than a 2560*1440 display just like them (1024x768 is still the norm for a lot of people outside of the Silicon Valley bubble). I've seen so many web products that are less usable than 20 year old command line interfaces, notably because of this "you can never have too much whitespace!" mentality, it's appalling. The first goal of an interface is to be used.

elecengin 12y ago
I view whitespace as placing pressure on the rest of the UI - hopefully compressing unnecessary elements away. Of course if you dont bound the space, the pressure just expands everything like a balloon - like you describe. I think the need for whitespace should be treated more like a constraint than a solution.
dmix 12y ago
1366x768 overtook 1024x768 as the most popular in 2012. But most tech startups here are targetting early adopters initially so that doesn't include all of those people in China or India running XP in cybercafes.
- bunderbunder 12y ago
  But perhaps it should include all of those people in coffee shops using Surfaces and ChromeBooks and MacBook Airs.
  - dmix 12y ago
    Is this really a problem? Responsive design is extremely popular among startups. I highly doubt most modern websites don't support 1366x768. Every front-end team I've worked with tests on iPads and smaller screens. I have a feeling the OP speculating and making blanket stereotypes against designers. But these designers almost always work with front-end developers who take usability seriously and any good teams have feedback loops to correct these issues.
    - bunderbunder 12y ago
      I've been running into it a fair bit lately. Good designers might get it, but apparently not all designers are equally thoughtful.
    - aranjedeath 12y ago
      Yeah, definite problem. I ran 1280x1024 until last month when that monitor (lcd, from 1999) finally died. The web was a horrible place and made me angry at humanity. I've got 1920x1080 now, and I now have enough screen pixels to see what they were fucking up my 1280 for. Not worth it.
- gohrt 12y ago
  Most people don't run their web browser in full-screen mode.
  - pmontra 12y ago
    People with 11" or 13" Macbooks inevitably do. Same thing for people with 13" PCs, the ones called ultrabooks. People start using non maximized windows at 15", more if on a Mac because the UI encourages full screen windows. The trend to large fonts means that PC users with 1366x768 screens don't see much of a page if they keep windows small. Combining all those factors, most laptops users browse the web with full screen browsers. Tablets are always run full screen. I'm on a full HD 15" laptop and very rarely maximize windows, but I see I'm an exception when I look at co-workers screens.
  - danellis 12y ago
    Oh, that surprises me. What are the figures on that?
coldcode 12y ago
Also people seem to think tiny text with medium gray on light gray is fashionable. If people can't read your content why bother.
- Gracana 12y ago
  And font-weight: 300, because text looks best when it's a wispy gray blob.
mhd 12y ago
Yea, I've noticed that on my 1920x1200 monitors, not having my browser maximized (heresy!) won't get me the "native" resolution anymore, but some scaled down version. It's weird having a huge friggin' screen and getting a hamburger menu...
- girvo 12y ago
  Guessing you're triggering the "tablet" responsive breakpoint. That's a hard one to fix though, media queries are a bit of a hack but it's certainly better than http://mobile.example.com/ http://mobile.example.com/
deleted 12y ago
[deleted]

organsnyder 12y ago

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

lamacase 12y ago
To be fair, this is an article by a UX designer, targeting other UX designers, for the express purpose of getting their (presumably) already usable interfaces noticed, and appreciated. If you can accomplish this with 7 simple rules then you don't really have to worry about the subjective parts, and you can focus on the usability.
- gohrt 12y ago
  Maybe so, but the fast majority of designers are designing non-usable sites, so we shouldn't be promoting advice of the nature of "How to run a fireworks show at home" [quietly assuming you are an expert in fire safety]

drderidder 12y ago

"I love clean and simple as much as the next guy, but I don’t think [flat design] is a long-term trend here. The subtle simulation of 3-D in our interfaces seems far too natural to give up entirely." Agreed, the "flat design" trend seems like a pushback against over-done skeuomorphism that went a little too far in removing all the visual depth cues.

Animats 12y ago

Gorgeous, or usable? There's an annoying trend in UI design to make the simple stuff look really good, while making more difficult operations harder. If you think your UI concept is great, try mocking up something like Photoshop or a 3D drawing program. Those have really hard UI problems to solve. The mania for "clean design" has resulted in such things as invisible close buttons that only appear when you mouse over them. (Facebook ads work like that.) Bob Lutz, who used to be head of General Motors, ran into this. His designers had built a concept dashboard which looked like something from Bang and Olufsen, with the black-on-black design popular in the 1980s. It looked really great. Nobody could operate the controls reliably without training or a manual. There was a brief period when creative user interfaces on web pages got completely out of hand. Check out https://web.archive.org/web/20120207224137/http://www.girbaud.com/eng/ https://web.archive.org/web/20120207224137/http://www.girbau... for an over the top example from a French fashion design house. They went bankrupt a year after putting up that page.

bunderbunder 12y ago
My bank just replaced their online banking site with one that features a much "cleaner" design. I'll grant, it's way more pretty than the old one. But it also makes a lot of common operations take many more interactions. Getting a quick overview of how much money I have, for example - used to be, all my accounts fit neatly on screen at the same time. Now I gotta keep scrolling. Reminds me of a captioned image I saw a month or so back, of a grassy quad somewhere with a sidewalk that had a T intersection, and a bare track through the grass where everyone cuts the corner. The sidewalk was labeled "UI" and the bare track was labeled "UX".
- notduncansmith 12y ago
  Possibly the image from this article? http://boxesandarrows.com/designing-screens-using-cores-and-paths/ http://boxesandarrows.com/designing-screens-using-cores-and-...
  - bbrian 12y ago
    Probably this: https://twitter.com/vinniequinn/status/506116655983099904 https://twitter.com/vinniequinn/status/506116655983099904 I cycle along there regularly and actually keep to the paved section because it's smoother.

Terr_ 12y ago

> I had my excuses. I don’t know crap about aesthetics. I majored in engineering– it’s almost a badge of pride to build something that looks awful. “I majored in engineering — it’s almost a badge of pride to build something that looks awful.” I guess whoever did the pull-quotes was also an engineering-major...

mhd 12y ago

Not surprisingly, most screenshots don't present a lot of data, which is where things usually get problematic. Programmers often get criticized for their fruit salad GUIs, but usually that's the result of having to present plenty of options and data. Sure, the first thing you'll hear to that issue is "Do you really need to have that many options/paths/data?". And granted, quite often this is applicable, although not always in the same way (hiding rarely used options vs. eliminating them, i.e. "advanced options" vs. "only one friggin mouse button"). But often enough, presenting lots of data and hierarchies is the whole point of an app, especially when it gets more about enterprise systems than "what pancakes do my friends like" web 2.0 frippery. And that's where the ideas coming from ad design and typography kinda fail. Which is why people like Tufte are so respected, as they go beyond this. If I recall correctly, in the initial review of the iPhone Tufte recommended against even the minimal margins of the photo gallery, removing white space for a better experience. And yes, knowing the rules before you break them might be a part of that... If you don't do this as your full-time job, I'd very much recommend going for "usable" instead of "gorgeous". The latter is very much a 80/20 deal, where you spend insane amounts of time, asking co-workers and A/B tests just to get that final ratio or pixel size right. Whereas most of your customers still have Nappa Valley as a background picture behind their copy of IE9... I don't really miss under construction signs and rotating skulls, but I do have the slight feeling that a lot of what designers are doing will be like early 20th century typography in a few years, where even some of its major proponents aren't quite sure about it anymore...

lamacase 12y ago
> ideas coming from ad design One of the things that bugs me most about many "modern" product pages is that they are often designed to look like brochures. Flashy and eye-catching, but with very little content or meaningful organization. Most of the time I was brought to the page by an actual advertisement, or some content performing a similar function, and I am on the page now, looking for information. It's a bit like going to a restaurant and getting a pamphlet promoting the atmosphere and decor instead of a menu. I scrolled though many sites advertising devices, looking for that elusive little table that summarizes the data I'm looking for, variously called 'features' or 'specs' or whatever. But these days even those sections are full of non-information like "all day battery life* " (That star is pointing nowhere). I'm open to the possibility that I'm using the internet wrong. Perhaps there's a very good reason that the last place I should expect to find information about a product is on the product's own page.

sjcsjc 12y ago

I really like this line: "Start thinking of whitespace as the default — everything starts as whitespace, until you take it away by adding a page element." - speaking as someone whose design sense and skills are dreadful.

bane 12y ago

Here's some rules that almost every designer I know ignores: 1) Map out your interface and interaction trees first 1-click - most common actions 2-clicks - second most common actions 3-clicks - power user level stuff Put the most commonly used stuff at 1-click or interaction. If you don't know what goes at 2 and 3 clicks in, you don't understand how the application is used, because you don't understand what the most common interactions are. If you've run out of room for the 1-click stuff in your UI, then your UI concept is poorly designed. Keep iterating and collecting information until you can fulfill this. Don't put anything at more than 3 clicks in. 2) Double the number of interaction points in the UI. Assume the application will grow and add features. If you optimize your design for the number of features you have today, you'll have no where to put all the stuff you're going to get over the application lifetime and it'll all just end up getting buried in menus. I've seen lots of gorgeously, carefully, designed applications die a year in because of this. Double everything and see if that number of interaction points still fits within your concept, that way the interface has room to grow without getting messy. 3) Don't make your users interpret, make them understand. If your concerned about how universally an icon is interpreted across cultures, you're doing it wrong. Interpretation is an additional step your users have to go through to use your UI, it's like putting everything at 2, 3 and 4 clicks in because they now have to not only look and scan the UI for what they want, they need to figure out what each interface item means before they can interact with it. Even worse, as they grow to become accustomed to your UI, they're going to end up memorizing location and placement of options because the interface widgets take too long to interpret. Get 2 revisions down the road and you move a button and wham your tech support calls jump 50% because the users never bothered to remember what the symbol for their action looked like, just where it was on the screen. 4) Everything must be discoverable. This is why the world moved to GUIs from CLIs. Don't make your users play a 1990's era adventure game where they have to click every pixel on the screen to see if they can advance their usage. The Flat UI trend is notorious for this. 5) Consistency rules. Also see #3. 6) Eliminate Steps. Map out how many steps certain actions are. Cut them down to as few as possible. I remember one time going through a file import process with a tool, by the time you got the file imported the user had to navigate 27 different steps! Almost every step required minimal or no user input. Nobody had ever bothered to map out the interaction patterns in the tool before but users were constantly complaining about how difficult it was to use. We reworked the workflow and got it down to 3 steps and user-engagement jumped triple digits. 6) After you've addressed 1-6, make it look nice.

serve_yay 12y ago

> I majored in engineering — it’s almost a badge of pride to build something that looks awful. I dislike this attitude, for me it is very reminiscent of the way people just shut down when math comes up. "I hate math" and that's it. I'm not a math person, my brain doesn't work that way. On and on. There is even a perverse sort of pride in it. Why not do the work, why not try to get better, why not try to expand into things we're not good at yet.

captainmojo 12y ago
I've written off aesthetics my entire coding career (15 years), blaming color-blindness, but exactly in the way you speak. I often wonder whether design is even a thing I could get better at. I'm reminded of a Dummies book I read about Real Estate that essentially said a Real Estate agent with 10 years of experience could be turbo, or they could have just repeated the first year ten times. It's nice to see articles like this that tear down some of the mystery. Another force here, using your example, is that someone pushing themselves from Algebra to Trigonometry might not be as valuable to them as someone who repairs Honda Civics studying how Ferrari's are built. I've seen people shut down to new concepts hundreds of times, but there's some solace in the idea that maybe they're improving their lives in other ways that they find meaningful.

achr2 12y ago

Does anyone have some good resources for UI/UX design for data and option heavy application (enterprise)? There are fundamental differences between most 'apps' and the kind of dense applications I work on/with.

ThomPete 12y ago
I did some work around that. It's older than the hills (like from 2008) Are you thinking like this https://www.behance.net/gallery/822055/LMG-Analytics-Tool https://www.behance.net/gallery/822055/LMG-Analytics-Tool Been writing a little bit on a book about design for enterprise perhaps I should pick it up.
- silviogutierrez 12y ago
  Not the OP, but I'm also interested. The example you provided was right on.
- achr2 12y ago
  Your work looks great. One thing that I struggle with, that you seem to have an good awareness for, is layout within a 'hierarchy' of controls/views. I look forward to your book.
  - ThomPete 12y ago
    Thanks. As I said this is older than the hills :) but still holds up IMHO. Hierarchy of controls is exactly one of those things that are very hard to do because you have to find the balance between easy to use and powerful. I.e. the more powerful you want you tool to be the more controls you need and thus the complexity rises.
datashovel 12y ago
A project I'm working on currently (not public-facing) is a relatively complex design tool for a manufacturer. One of the tools they were using was quite clunky and was somewhat "option heavy". What I decided to do (and am glad I did) was condense alot of the "option" stuff into basic gestures or movements. I use the term "gestures" liberally in that this isn't a mobile or tablet app with touchscreen interface. It's a browser-based desktop app where the only real interaction occurs through mouse / keyboard input. Given that it's a 'design tool' there are probably alot of things about the app that couldn't be transferred to a typical data-driven GUI, but I think having this frame of mind when designing the UI / UX can probably help in alot of unexpected ways. I think the general takeaway here is that "more options doesn't always mean more buttons" :)

keyle 12y ago

Being a designer doing UI/UX for a living and building interfaces, I think this is a very good starter guide. If devs only started by lining things up and thinking in terms of visual hierarchy, they'd already be 90% there.

toolz 12y ago

It took me a few refreshes and multiple clicks just to realize I had to scroll down. I don't understand why someone would think unusable could ever be gorgeous. That page has one of the worst layouts I've ever come across and ironically it's supposed to be about enhancing users experience.

bwy 12y ago

This is actually awesome. I'm in the exact same boat that the writer started in, able to create UX but admittedly clueless about UI design. Putting some principles I've had swirling around my head for a while trying to learn into concrete writing just solidifies it.

Gracana 12y ago

> Haraldur Thorleifsson’s grayscale wireframes look as good as lesser designer’s finished sites. I thought that image was going to be an example of what not to do. In black and white, you can see that there is hardly any contrast, and I think that's a big problem. Low-contrast may look pleasant, but it makes reading the content and understanding the UI much harder, especially for users who may not have the ideal displays and lighting conditions that designers in their offices have.