Ask HN: I can't figure out how to make good UIs. How do I learn?
A bit of background:
I'm an 18 year old junior in college studying a dual major in computer science and computer engineering. I can figure out any concept regarding technology whether it be closures in functional programming or understanding advanced cryptography concepts. Despite this, I can't seem to be able to objectively look at a user interface I've created and judge its quality; it always seems 'good enough' for me as I know where everything is in it.<p>What are some resources I could look at regarding design of user interfaces? I understand the people that might use a product I create will not see it the same way that I do; they won't have the same expertise and familiarity with it at first site. My goal is to be able to create intuitive interfaces (the best UI is no UI[0]) that most people are able to use without issues and without the dreaded "where do I click to perform this action that I absolutely KNOW should be here?".<p>[0] - http://www.cooper.com/journal/2012/08/the-best-interface-is-no-interface
6 comments
A good read would be "The design of everyday things" by Don A. Norman. It explains how brain works, and how to design by using map techniques and user tests.
A resume, when design:
1. Use both knowledge in the world and in the head. 2. Simplify the structure of tasks. 3. Make things visible. 4. Get the mappings right. 5. Exploit the powers of constraints-Natural & Artificial. 6. Design for Error. 7. When all else fails, standardize.
There's a lot of books in the matter of UI but they can fall either in the philosophy side or either the personal taste of the writer.
http://www.amazon.com/Design-Everyday-Things-Donald-Norman/d...
A resume, when design:
1. Use both knowledge in the world and in the head. 2. Simplify the structure of tasks. 3. Make things visible. 4. Get the mappings right. 5. Exploit the powers of constraints-Natural & Artificial. 6. Design for Error. 7. When all else fails, standardize.
There's a lot of books in the matter of UI but they can fall either in the philosophy side or either the personal taste of the writer.
http://www.amazon.com/Design-Everyday-Things-Donald-Norman/d...
And Don Norman has a new (and free!) MOOC on Udacity on that very same topic: https://www.udacity.com/course/design101
I have the same problem with UI. I am more of a technical person but would like to get better at design and layout. When I visit some of HN members' web sites I am always amazed at the way they look: clean and polished. I just wish I could do that kind of stuff! I will take the Udacity MOOC for a start. Thanks to other members for their suggestions on this thread.
I have the same problem with UI. I am more of a technical person but would like to get better at design and layout. When I visit some of HN members' web sites I am always amazed at the way they look: clean and polished. I just wish I could do that kind of stuff! I will take the Udacity MOOC for a start. Thanks to other members for their suggestions on this thread.
UI is pretty technical design. If you want to learn more about the aspect of it, the best thing you can do is learn design basics, typography, for example would make a big impact on your design work.
This is probably one of the most helpful UI resources I have ever stumbled upon across the Internet: https://hackdesign.org/
They go through design from the basics to how you could apply it to websites, mobile devices, etc. I still find myself returning and perusing through the chapters.
They go through design from the basics to how you could apply it to websites, mobile devices, etc. I still find myself returning and perusing through the chapters.
I switched from development into design because of Jef Raskin's book, "The Humane Interface." It's a design book for engineers, explaining things in terms of usability and ergonomics and metrics, instead of aesthetics. Those are things about "good UI" that you can measure.
Then I also recommend people read "The Non-Designer's Design Book," by Robin Williams. It covers the basic principles of page layout, which are also the same basic principles of screen layout: presenting the most important information as best as possible and getting rid of everything else.
Good UI design is good design first, and UI-specific second.
Design is also not art: design has testable goals, has a specific purpose, to get someone to understand something, to help them execute a task. You have to test your UIs with actual users and then update them based on the feedback you receive. Book like "Designing for Interaction" or "Sketching the User Experience" will include parts about getting good information up front, and then validating the UI you've designed after (or you can get more pragmatic and read "Interviewing Users" and then "Remote Research" which will leave out the "how to design the UI" bit in the middle).
At some point, you will need to get into the visual design of your UIs. I can't help you with this so much; I stay mostly on the research and high-level design side. But, David Kadavy's "Design for Hackers" seems to get around okay, so that might be a good start.
This other comment by ctbeiser also has some good recommendations from a different perspective: https://news.ycombinator.com/item?id=5199409
Then I also recommend people read "The Non-Designer's Design Book," by Robin Williams. It covers the basic principles of page layout, which are also the same basic principles of screen layout: presenting the most important information as best as possible and getting rid of everything else.
Good UI design is good design first, and UI-specific second.
Design is also not art: design has testable goals, has a specific purpose, to get someone to understand something, to help them execute a task. You have to test your UIs with actual users and then update them based on the feedback you receive. Book like "Designing for Interaction" or "Sketching the User Experience" will include parts about getting good information up front, and then validating the UI you've designed after (or you can get more pragmatic and read "Interviewing Users" and then "Remote Research" which will leave out the "how to design the UI" bit in the middle).
At some point, you will need to get into the visual design of your UIs. I can't help you with this so much; I stay mostly on the research and high-level design side. But, David Kadavy's "Design for Hackers" seems to get around okay, so that might be a good start.
This other comment by ctbeiser also has some good recommendations from a different perspective: https://news.ycombinator.com/item?id=5199409
Test on real people. While you can imagine/pretend to be a consumer all day and theorize on the things people will expect, watching real users interact will be much more accurate
And record both the screen and the user's face, after disclosing they are being recorded, of course. You aren't going to notice or remember everything and having video is also helpful to discuss with others involved in the development of the product.
A good beginner book is "Don't make me think".
If you want practical advice, I would say look at what you are making, find existing projects that have similar functionality to what you are trying to make, take lot's of screenshots of them, put them all in a folder then note what works and what doesn't, and use it to plan your design.
When you have a minimum viable product (hopefully you've planned a little bit so you don't have to restructure everything) put them side by side and pick your own work to bits.
It's easy to lose sight of what you are trying to do if you don't take breaks while designing especially if you are new to this. You can end up making something really weird if you don't take your time and try to push it all out in one go. Allow your brain time to digest what you are doing in in the background while you do other things.
Other helpful tips:
Combine actions as much as possible without being confusing. If you have a flow that is 3 or 4 pages/actions long for a mechanism that is relatively simple - you dun goof'd. I like to aim for one CTA per action but I will settle for two, three if the action is relatively complex (but all cases are different - there are no rules).
Spacing and consistency make things look polished - it's 'not important' as far as functionality goes but it goes a long way for making people want to use your product. It also gives subtle clues as to the pattern or template they should follow to get to the next action. As in: if the CTA button is usually at the bottom but then for some reason it shows up in the middle or the top you are breaking the 'shape' the user expects to encounter while progressing through your app or site or whatever.
Same for text entry fields, buttons, or text fields - unless you have a good reason to change their location, keep similar things in the similar locations, keep similar mechanisms the same size as each other and have everything act as consistently as you can.
Keep it simple. If you hand it to someone and they just freeze and ask what they should do, you need to go back and make it more clear.
If you want practical advice, I would say look at what you are making, find existing projects that have similar functionality to what you are trying to make, take lot's of screenshots of them, put them all in a folder then note what works and what doesn't, and use it to plan your design.
When you have a minimum viable product (hopefully you've planned a little bit so you don't have to restructure everything) put them side by side and pick your own work to bits.
It's easy to lose sight of what you are trying to do if you don't take breaks while designing especially if you are new to this. You can end up making something really weird if you don't take your time and try to push it all out in one go. Allow your brain time to digest what you are doing in in the background while you do other things.
Other helpful tips:
Combine actions as much as possible without being confusing. If you have a flow that is 3 or 4 pages/actions long for a mechanism that is relatively simple - you dun goof'd. I like to aim for one CTA per action but I will settle for two, three if the action is relatively complex (but all cases are different - there are no rules).
Spacing and consistency make things look polished - it's 'not important' as far as functionality goes but it goes a long way for making people want to use your product. It also gives subtle clues as to the pattern or template they should follow to get to the next action. As in: if the CTA button is usually at the bottom but then for some reason it shows up in the middle or the top you are breaking the 'shape' the user expects to encounter while progressing through your app or site or whatever.
Same for text entry fields, buttons, or text fields - unless you have a good reason to change their location, keep similar things in the similar locations, keep similar mechanisms the same size as each other and have everything act as consistently as you can.
Keep it simple. If you hand it to someone and they just freeze and ask what they should do, you need to go back and make it more clear.
I recommend all the post of http://www.joelonsoftware.com/ in the section “Software designer” (down, in the middle of the page).
The first article is “Controlling Your Environment Makes You Happy”: http://www.joelonsoftware.com/uibook/chapters/fog0000000057....
In particular, as some other comment said, sit someone (anyone) and look how s/he use the software with minimal (without) instructions. Put your hands behind your back and try to be as quiet as possible. Fix the problems and repeat, preferably with another person.
The first article is “Controlling Your Environment Makes You Happy”: http://www.joelonsoftware.com/uibook/chapters/fog0000000057....
In particular, as some other comment said, sit someone (anyone) and look how s/he use the software with minimal (without) instructions. Put your hands behind your back and try to be as quiet as possible. Fix the problems and repeat, preferably with another person.