Rules for Creating Gorgeous UI(medium.com)
medium.com
Rules for Creating Gorgeous UI
https://medium.com/@erikdkennedy/7-rules-for-creating-gorgeous-ui-part-1-559d4e805cda?hn=1
14 comments
> Don't put anything at more than 3 clicks in.
How do you balance that against the "maximum six plus-or-minus two items at each level" advice?
How do you balance that against the "maximum six plus-or-minus two items at each level" advice?
Forgive my terrible maths, but doesn't that provide for 512 maximum functions? If your interface needs more than that, I'd argue it's time to reevaluate its scope.
I think you shouldn't.
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.
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.
That guideline is just for choosing from a menu of options.
> 3-clicks - power user level stuff
Don't conflate "power user" with "rarely used"
Don't conflate "power user" with "rarely used"
Isn't that sort of by definition though? 1% of users use this feature all the time - but the total use of that feature is low.
I guess i'm wondering why not? seems like a good heuristic, even if wrong.
I guess i'm wondering why not? seems like a good heuristic, even if wrong.
For web browser: printing, integration with Estonian ID cards or Korean banks, selecting text inside links, accessibility for blind users .
A power user is someone that will go through the effort of learning a wide array of keyboard shortcuts to gain maximum efficiency when using your product.
What op described for 3 clicks is simply for rarely used use cases. Not power users.
What op described for 3 clicks is simply for rarely used use cases. Not power users.
>A power user is someone that will go through the effort of learning a wide array of keyboard shortcuts to gain maximum efficiency when using your product.
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).
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).
>No, a power user has nothing to do with "keyboard shortcuts" -- it's about delving deeper into more advanced features of a product regularly.
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
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
Depends. Photoshop power users often have to do 10 or 20 clicks to make specific changes. DAW powers users too.
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...
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...
> 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.
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.
I've also noticed it's sometimes easier to get a gadget's specs from the summary table on a review than from that gadget's product page.
> Programmers often get criticized for their fruit salad GUIs, but usually that's the result of having to present plenty of options and data.
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
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
I'd say that this is the most common computer aesthetic even in "contemporary" movies and shows -- just think of all the random scrolling code you see whenever something gets hacked or when perp pictures are searched/compared. Not all about beauty, more about trying to present something as arcane as possibly to signify that the character knows what he or she is doing. (One reason for the recent infantile obsession about tiling window managers)
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.
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.
> (One reason for the recent infantile obsession about tiling window managers)
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?
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?
People who don't have a room for a 10'x10' desk but have ample room for drawers? I'd say that for a lot of people, constant access to other windows and constant re-arrangement (whether manual or automatic) isn't a big issue, so elaborate positioning constraints are barely an improvement over alt-tab. The primary solution for both kinds of users who need to keep several sets of different windows seems to be virtual desktops (or "tags") anyways, whether it's tiling or not. Moving windows between sets is rare enough...
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.
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.
"Ncurses apps aren't that minimalistic"
Or, generally, that composable.
Or, generally, that composable.
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.girbau...
for an over the top example from a French fashion design house. They went bankrupt a year after putting up that page.
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.
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".
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".
Possibly the image from this article? http://boxesandarrows.com/designing-screens-using-cores-and-...
Probably this:
https://twitter.com/vinniequinn/status/506116655983099904
I cycle along there regularly and actually keep to the paved section because it's smoother.
I cycle along there regularly and actually keep to the paved section because it's smoother.
Ah, well done. The denizens of the web never cease to impress me.
Desire Path: http://en.wikipedia.org/wiki/Desire_path
> as invisible close buttons that only appear when you mouse over them
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.
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.
Kind of sucks if you're trying to design something that's usable with a mouse and with touch though. Plenty of interfaces out there that don't take into account that there's no hover state for a finger.
> 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.
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.
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.
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.
Most people don't run their web browser in full-screen mode.
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.
Oh, that surprises me. What are the figures on that?
But perhaps it should include all of those people in coffee shops using Surfaces and ChromeBooks and MacBook Airs.
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.
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.
I've been running into it a fair bit lately. Good designers might get it, but apparently not all designers are equally thoughtful.
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.
[deleted]
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.
I think the need for whitespace should be treated more like a constraint than a solution.
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...
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/
"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.
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 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.
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.
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.
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.
Rule 1: Stop talking about making "gorgeous" user interfaces. Create usable interfaces first; then you can worry about the subjective parts.
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.
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.
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]
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.
If devs only started by lining things up and thinking in terms of visual hierarchy, they'd already be 90% there.
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.
Very good question - I usually develop custom, internal apps that are very data- and option-heavy. A lot of those best practices you read about everywhere are hard to apply when your software is much denser than modern "do-one-thing-well"-apps.
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'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.
[deleted]
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" :)
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 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
Been writing a little bit on a book about design for enterprise perhaps I should pick it up.
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.
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.
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.
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.
Not the OP, but I'm also interested. The example you provided was right on.
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.
> 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.
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.
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.
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.
> 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...
I guess whoever did the pull-quotes was also an engineering-major...
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.