WingNews logo WingNews GitHub [2]
top | item 4860145

Ask HN: What do you wish you knew about UI/UX design?

63 points| akrakesh | 13 years ago | reply

I'm a UI/UX designer interested in writing about design. I've written about the principles of iOS design, a case study on how I designed an iPhone app, etc., in my blog (http://radesign.in/blog/).

Instead of writing what I think is useful I want to write what the audience finds useful. So, what about UI/UX design you wish you knew? What would help you? What do you find interesting? What would you like to know?

58 comments

order
[+] anujkk|13 years ago|reply
1. Color Theory. How to decide which colors to be used for particular type of project/audience?

2. Typography. Which types of fonts to use for given situation and that works on all windows/mac/linux/android/ios? Categories of fonts and where to find free fonts/web-fonts.

3. Layouts. What different types of layouts are possible and how to decide which one to use?

4. Responsive Design Techniques.

5. CSS3 art. How can we use CSS3 to create things like Text Logos, UI elements?

6. Design Case Studies. Pick up a good well known design and redesign it explaining the design decisions taken in the process.

[+] i386|13 years ago|reply
For #5 - no no no! Hacking logos together with CSS is, well, a hack. Use SVG - modern browsers support it out of the box , its future proof (no use of -moz/-webkit vendor css prefixes which break all the time), the authoring tools rock (checkout Sketch if you have a Mac) and your images scale well to any size.
[+] lloeki|13 years ago|reply
May I recommend David Kadavy's Design for Hackers, which covers #1, #2, #3, #6, and more.
[+] akrakesh|13 years ago|reply
Thanks for the list :) I'll see if I can address them all
[+] AskHugo|13 years ago|reply
Typography. I'm still not sure which types of fonts to use for different situations (titles, paragraphs, attention-grabbing).
[+] joeld42|13 years ago|reply
My #1 want is some kind of process or hints for taking a screen that is crowded with controls and options and simplifying it. Often I am faced with this and just don't know where to begin.
[+] nnq|13 years ago|reply
do it the other way around: start with a blank screen and start adding the controls from your crowded screen, thinking for every one of them if you really need it and throwing it away if not. this process also makes sure you are exhaustive, you consider each element and don't forget weird controlls in weird places (of course, the ideal would be to start from a blank screen and a vision of what the user needs to see and do - but lacking such a vision a "cluttered mess" --> filtering --> "blank sheet UI" process helps a lot)

EDIT: + do it the pen(cil) and paper way, and implement a mockup UI only after, it really clears your mind from the "this should be here because that event expects..." crap you end up thinking about when the interface is implemented the "lipstick on a pig" way - for web, think tangled mess of HTML & Javascript DOM manipulation + unimaginable PHP horrors on the server site

[+] foz|13 years ago|reply
I don't see why so many people think of typography and color as central to UX/UI. I believe these are just as small part of the puzzle. Great interfaces are not just nice to look at - they communicate well. For me, great UX/UI is about the use of clear, consistent visual metaphors. It's about choosing the right words in your navigation, picking the best controls and form elements, and about removing anything that distracts or confuses the user. It's also about listening to your customers and understanding how they use your software.
[+] corford|13 years ago|reply
I don't know about other coders but as one myself, I find the visual metaphors, wording and control selection parts much less daunting than the other stuff. They're just as important (maybe more so) but I find them easier to tackle because the choices feel less subjective and easier to reason about.

On the other hand, choosing colours, typography and designing the general "chrome" for a site is a nightmare. It's so subjective and non-intuitive (to me at least), yet has a huge effect on making or breaking the overall design. It's maddening!

[+] knowuh|13 years ago|reply
I would like to hear about the larger process:

  * Evaluating an interfaces usability quantitatively.
  * The ROI profile for good design. What's the sweet spot, and when do you start yack shaving?
  * How do 'cool looking', 'compelling' and 'usable' relate to value. 
  * Which of the above fall are squarely in the domain of UI designer?
  * What does a UI team look like? What skills? How are decisions made?
  * From a Designers perspective, how should a software product begin its life?
[+] elisehein|13 years ago|reply
I'd like to learn more about two things:

1. Designing and prototyping in the browser -- how to do it as quickly as possible and get rid of the distraction of details (I always find details difficult to ignore when trying to do quick mockups in the browser, hence why I resort to pen and paper)

2. Case studies of user research activities that have led to particular design decisions -- what are the first steps I should take in order to create an interface that is specifically targeted towards a certain user group or demographic

[+] talGX|13 years ago|reply
I find the correlation between UI/UX and conversation rate very interesting. Based on my experience these blog posts are usually very popular. For example : where to locate call to action buttons, location of the title, number of screenshots, etc. I made several tests on my web site, changing the design and location of the social networks buttons. After all the changes I increased the click rate from 2% to 8%. I couldn't find any good posts or references about this topic.
[+] corford|13 years ago|reply
Typography, colour and techniques for visual priority (i.e. how to guide a user's attention to different sections within a page) are all things I struggle with.

I also wish a photoshop or illustrator "cook book for coders" existed which contained just enough recipes to learn the essential techniques needed to quickly mockup and experiment with how a page might look.

[+] adrianhoward|13 years ago|reply
Typography, colour and techniques for visual priority (i.e. how to guide a user's attention to different sections within a page) are all things I struggle with.

I point people towards Robin Williams' "The non-designers design book" for all of these. It's not about the web - it's about some graphic design basics like contrast, balance, etc. - but they apply.

I also wish a photoshop or illustrator "cook book for coders" existed which contained just enough recipes to learn the essential techniques needed to quickly mockup and experiment with how a page might look.

If you want to do quick mock ups and experiments then Photoshop is not the tool you want. What you want is pen, paper and post it notes. Learn to do paper prototyping. Todd Zaki-Warfel's book "Prototyping" has a good section on it (http://rosenfeldmedia.com/books/prototyping/) and Paper Prototyping by Carolyn Snyder is the definitive book on the topic (http://www.paperprototyping.com/).

[+] fudged71|13 years ago|reply
Metaphors and complexity. How do you take an innovative new idea and make it instantly relatable and familiar to people? How has it been done in the past?

I'm struggling with page/group/stream/profile designs and don't know how to make it different than everyone else while still keeping it intuitive and fun.

[+] anujkk|13 years ago|reply
Is it necessary to make it different unless the changes made improves its user experience? If a particular design pattern works and one is unable to improve its usability isn't it better to not change it? Slight change in colors, typography etc may give it a different look.
[+] brutuscat|13 years ago|reply
Color theory, layouts and a better sense of design as a whole. Actually because of this very question I bought:

  * The Non-designer's Web Book
  * Designing the Obvious: A Common Sense Approach to Web & Mobile Application Design (Voices That Matter)
I'll read those and tell ;)
[+] thisone|13 years ago|reply
How to convince designers that just because it looks nice in photoshop doesn't mean that the people using it will find it "usable".

But seriously. This probably exists somewhere: What are the conventions that have emerged in web design and mobile design, and why have these become conventions?

[+] zachgalant|13 years ago|reply
How to use background photos well.

What makes a good photo choice? What sort of text/font/color goes well on top of it?

[+] jameshsi|13 years ago|reply
I'm extremely interested in UI/UX workflows, especially compared between differently sized teams.

A documentation of user-centric design, from the sketch/ideation phase all the way through to a product postmortem would be absolutely phenomenal.

[+] pairing|13 years ago|reply
People don't read. Sounds simple, but I find it one of the greatest challenges.
[+] stevewillows|13 years ago|reply
A little off-topic, but I'd love to see more of these Ask HN posts. As a graphic designer, I cant say how great it would be if coders understood UI/UX as much as I did :)
[+] MaxGabriel|13 years ago|reply
Oddly specific, I know, but since you design for iOS: should I be reversing the shadow direction on the text of buttons when they are pressed?
[+] akrakesh|13 years ago|reply
Not necessarily. If the text is embossed on a button, when you press the button only the button gets pressed but not the embossed text. You show the button pressed state by darkening the button a little (not necessarily the text) and maybe also by reducing the size the button's shadow. Hope it helps :)
[+] riffraff|13 years ago|reply
dirty tricks. One cannot become a designer without a _lot_ of effort, but one can learn some tricks.

E.g. making them up

* "don't try to do a complex logo/header design just use one big custom font with distinct personality"

* "use stuff from subtlepatterns for the page background"

* "use a pattern repository such as YUI's for standard interactions instead of reinventing basic UX"

etc

[+] adrianhoward|13 years ago|reply
Yes - that sort of thing would be useful. To some extent this is the sort of thing bootstrap like frameworks are giving people. A default visual design that, well, doesn't suck ;-)

A few other things that I suggest to folk who don't have design skills in-house:

* Pick a single font face and 3 sizes and use throughout

* Pick a palette of five colours (use kuler or something) and use throughout

* Go mobile-first (not because of the 'mobile' - but because of the constraints - it forces a focus on core features & usability)

The problem is that there's a fine line between giving people some rough rules of thumb to help them - and people then taking this sort of advice and seeing it as "best practice" and applying it inappropriately.

[+] akrakesh|13 years ago|reply
Love the dirty tricks idea, thanks :)
[+] abeh|13 years ago|reply
I'd like to see an article that explains the difference between UI design and UX design, with examples.
[+] adrianhoward|13 years ago|reply
I'd like to see an article that explains the difference between UI design and UX design, with examples.

The problem there is that if you ask three different designers you'll get at least four different answers ;-)

UX is a relatively new term. Coined by Don Norman on 1993 for his role at Apple it's morphed and tweaked in the intervening time and still means different things to different folk. The Elements of UX diagram from Jesse James Garrett is as good a definition as any http://www.jjg.net/elements/pdf/elements.pdf.

UI Design used to be generally read something as a pretty broad domain - similar to UX - see http://en.wikipedia.org/wiki/User_interface_design for example. However, I sometimes see it used now to refer to somebody with a narrower speciality of doing the visual design work on interfaces that have been designed by others.

The communities of practice are still rapidly evolving. Hard and fast definitions don't really apply.

[+] ky3|13 years ago|reply
I wish I didn't have to know anything about it, cuz life's complicated enough as it is!