Rules for Creating Gorgeous UI
medium.com
medium.com
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.
Don't conflate "power user" with "rarely used"
I guess i'm wondering why not? seems like a good heuristic, even if wrong.
What op described for 3 clicks is simply for rarely used use cases. Not power users.
No, a power user has nothing to do with "keyboard shortcuts" -- it's about delving deeper into more advanced features of a product regularly.
(Keyboard shortcuts in fact can be less efficient in some case and just busy-work for your mind compared to direct manipulation with the mouse).
MY point was that a power user would be the person to learn the most efficient way of using your product. Having a feature that is three clicks in would annoy a power user. Three clicks is for something that simply wont be used often
How do you balance that against the "maximum six plus-or-minus two items at each level" advice?
That advice stems from the fact that most humans can remember ~7 items in short term memory. It got then mixed up with menu items. The argumentation is that only this way user can remember immediately after seeing the menu what was in it.
But that ignores that user can open the menu again, they don't have to use the short term memory, and long term memory is not limited that way.
Probably still sometimes a good idea to use that advice just to evade letting the menus get too cramped, but other than that, it is better to ignore this advice.
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...
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.
Simplicity is only one kind of beauty. It's certainly possible to have a gorgeous interface that still presents a ton of options and data. You often see these in sci-fi movies, like Oblivion, and the aesthetic is in fact about hyper-complexity: http://www.josephychan.com/Oblivion
Most of that is pretty unusable or superfluous, too. Which is okay, when it comes to movies, of course.
But sadly this also sells in big business. Enterprise software is often defined as programs where the one buying is not the one using it. And just show a big screen with plenty of chartbarf and managers will flow to it, yet ordinary call center/sysadmin users are none the wiser.
And this is where help would be needed, yet it's quite a bit harder than "use Helvetica and white space". Although you'd be allowed to make it quite a bit less "gorgeous" when you're not -- as in most webapps -- trying to do ad and ux work at the same time.
Wait, are you saying that tiling window managers are unusable, superfluous, arcane? Or do you simply object to cargo-culting?
I can't actually use stacking window managers anymore. It's a little like the difference between auto-arranging icons, and milling about manually organizing them into little piles. It may seem like you've lost some control with automatic, but it's control over frivolous minutiae. You've shed the responsibility of micro-managing the little file-fiefdoms and their petty squabbles.
Who would not prefer a desk where all the papers sorted themselves and squared the corners of their piles?
And then you've got the problem with in-application windows, e.g. Firefox' tabs or vim/emacs buffers or tmux/screen windows. Yet another nested set of layout methods, constraints and shortcuts.
Which is why I fail to see it as inherently better, just like there's nothing wrong with on-desktop icons or scrolling desktops. Don't get me wrong, I'm using i3 myself, as the grid/stacking nature makes for some convenient keyboard shortcuts and I'm fine with the looks, but I doubt that this saves me a lot of time compared with my previous long-term staple of lwm...
But yes, the cargo-culting is pretty annoying. Ncurses apps aren't that minimalistic (esp. when you hear this from late-game Plan 9 fanboys), and if your screenshots are just a bunch of music players and IRC windows, I doubt any claims of huge productivity gains.
Or, generally, that composable.
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.girbau...
for an over the top example from a French fashion design house. They went bankrupt a year after putting up that page.
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".
I cycle along there regularly and actually keep to the paved section because it's smoother.
not a good example of bad design. It's quick to learn that if you want to throw something away, you have to touch it. Don't need the all the widget controls visible at the same time.
It's only a problem when there's an invisible remote control for a different part of the page.
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.
I think the need for whitespace should be treated more like a constraint than a solution.
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.
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.
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.
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.
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.
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.
If devs only started by lining things up and thinking in terms of visual hierarchy, they'd already be 90% there.
Are you thinking like this
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.
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.
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" :)
I'd like to see some showcases on how to approach those problems.
One thing I found to work well, is resisting the urge collect all kinds of features in a single screen/page/view - use multiple views instead and keep them clean and simple on their own. Of course this comes at the expense of needing more clicks to reach certain areas, but I prefer that to overwhleming users by putting everything related into one section.
Also, I can't emphasize enough how much consistency matters - particularly if you have a lot views, you should make sure that your users feel right at home in any of them as from their first encounter. Keep similar navigation ideas for example: If all your navigation features a hierarchy like Home -> All Items/List -> Single Item/Detail only the context will change and it will be easy to get used to that.
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.
I guess whoever did the pull-quotes was also an engineering-major...