designing better user interfaces

Click here to load reader

Post on 17-Aug-2014




7 download

Embed Size (px)


Designing better user interfaces sets out to teach interface design by talking through concrete examples: what works, what doesn’t work. A good interface consists of a thousand details done right. This presentation is all about those details.


  • Designing better user interfaces Fronteers, Rotterdam, February 15th, 2012
  • I would like to give some context to thispresentation. These slides are from a 35 minutepresentation called Designing better userinterfaces.
  • Designing better user interfaces sets out toteach interface design by talking throughconcrete examples: what works, what doesntwork. A good interface consists of a thousanddetails done right. This presentation is all aboutthose details.
  • Some slides only contain a few words orimages so the slides dont distract fromwhat is being said. This web versioncontains sticky notes (like this one) thatsummarize what I talked about whendisplaying the slide during the original talk.
  • 1 Introduction 102 User interface design examples 253 Q&A: throughout -
  • Introduction
  • My name is JohanWolf or @wolfr_ on the internet
  • I read stuff all day
  • I like to play video games
  • I love to write
  • I run a little freelancedesign studioWolfs Little Store
  • So this is my companys website, ( )Under work you can see what I do: interfacedesign, web design, branding and identity,HTML & CSS, photography and design formobile devices.Companies evolve and this is actually a littlebit outdated - I specically want to focusmore on the interface design part. The nextwebsite will reect this :)
  • The kind of design I do is interface design...
  • Its not about the WOW!
  • I dont really care too much for interactivepresentations or branded games. Whilethey have their right to exist aspromotional material, its not the kind ofwork I want to spend my life doing.
  • Its about creating a great product
  • Its about creating a great product Take something that blows and make it better. Thats probably what the people at Dyson were thinking when they applied their vacuum knowledge to hand dryers. Product of the year for me.
  • Avoiding this...
  • Youve got the power
  • Youve got the power I think everyone has the power to make a good product because its more about knowledge and applying that knowledge instead of having strong visual skills.
  • A good user interface =A thousand details coming together
  • A good interface is a thousand details coming together. Thedifference between a good interface and a great one is in allthose details: the spelling of a word, the spacing betweenitems, the colors used. Theres literally thousands ofdetails that are important.Today I want to talk about a few of these details.
  • Good defaults
  • This is a form I get to deal with every fewdays, its the form to transfer money to otherpeople from my bank.
  • When you get to the part where you have toselect a country, you get a country list withhundreds of options.
  • Why not put Belgium as a default? Almost alltransfers happen within Belgium.Another idea would be to list the mostpopular countries (Belgium, France,Germany, Holland) in an at thetop.
  • It might seem like a small thing, but its oneof those thousand details.Who sends money to the South Pole?!
  • Custom select boxes
  • Talking about select boxes... anyone heard ifthis thing called dropkick.js?
  • Creating custom dropdowns is usually a tediousprocess that requires a ton of extra setup time.Oftentimes lacking conveniences that nativedropdowns have such as keyboard navigation.DropKick removes the tedium and lets you focuson making [email protected]#t look good.
  • Good intentions: Advance the web Get rid of ugly dropdowns Make something to x a problem = a beautiful thing To me this is a project done out of love, and the intentions are great. Without people like the author of Dropkick we wouldnt be where we are today with HTML and CSS.
  • UnfortunatelyOnly 80% done Unfortunately these kinds of projects are only 80% done to me.
  • For example, the script doesnt trigger the native select behavior on iOS.Custom Native
  • Close w/ escape key on desktop: does not work with Dropkick. Type rst letter to select option: does not work with Dropkick.
  • A power user denitelywants to be able totype the rst letter of acountry: doesnt workwith Dropkick.
  • In general you wantyour s tohave sensible names,and not try to hack asystem together whenthere is
  • By customizing your dropdowns you just: Worsened the site load time & Made your dropdown t within rendering time the design Provided a worse experience on mobile Provided a worse desktop experience for power users I understand why this guy made it, you want your form elements to look consistent, but its better to have ugly s that work as expected than custom selects.
  • If you do nothing, the end result is better.
  • Custom is hard.People always forget things:Remember not being able to Remember not being able to use keyboardscroll in Flash sites? Yeah. nav because somebody decided to implement custom radio buttons andRemember not being able to checkboxes. an image from a Flashsite? Yeah. Accessibility and screenreaders: Im not even going to go there. It gets BAD.
  • I often hit this iceberg when I strayfrom native controls. For example, Ajaxinteractions require more polish thanbasic web pages. Custom mobilemenus require more polish than thebuilt-in version. If the team doesnthave the time to polish custom UI, itsoften better to stick to the boringnative controls that work.Braden Kowitz, Designer at Google
  • Custom is hard, and to mecustom is really saying that youhave more time to think about thebehavior of a select box thanApples interaction design team.And that you have the dev powerto x it. On every platform outthere. So sometimes you justhave to be pragmatic if yourebuilding a product.
  • But if nobody took any UI risk there wouldnot be any innovation out there, so itdepends on what youre doing. Thisscreenshot is from Al Gores Our Choice, inmy opinion the best e-book there is on iPad,interaction design-wise that is.
  • This was done by Mike Matas, Bret Victorand their team. Two names you shoulddenitely remember if youre into interfacedesign.
  • The Tapbots guys are famous for their custominterfaces. Their business is practically based onthe fact that their apps are 100% custom.
  • Recommendations Dont use custom select boxes Dont try to style them using CSS either If you must go custom, realize the consequences and be humble Use a default value that makes sense Make sure people can use the keyboard to get to the rst letter
  • Map embedding