Designing better user interfaces

Download Designing better user interfaces

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 doesnt work. A good interface consists of a thousand details done right. This presentation is all about those details.


<ul><li> Designing better user interfaces Fronteers, Rotterdam, February 15th, 2012 </li> <li> I would like to give some context to thispresentation. These slides are from a 35 minutepresentation called Designing better userinterfaces. </li> <li> 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. </li> <li> 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. </li> <li> 1 Introduction 102 User interface design examples 253 Q&amp;A: throughout - </li> <li> Introduction </li> <li> My name is JohanWolf or @wolfr_ on the internet </li> <li> I read stuff all day </li> <li> I like to play video games </li> <li> I love to write </li> <li> I run a little freelancedesign studioWolfs Little Store </li> <li> So this is my companys website, ( )Under work you can see what I do: interfacedesign, web design, branding and identity,HTML &amp; 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 :) </li> <li> The kind of design I do is interface design... </li> <li> Its not about the WOW! </li> <li> 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. </li> <li> Its about creating a great product </li> <li> 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. </li> <li> Avoiding this... </li> <li> Youve got the power </li> <li> 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. </li> <li> A good user interface =A thousand details coming together </li> <li> 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. </li> <li> Good defaults </li> <li> This is a form I get to deal with every fewdays, its the form to transfer money to otherpeople from my bank. </li> <li> When you get to the part where you have toselect a country, you get a country list withhundreds of options. </li> <li> 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. </li> <li> It might seem like a small thing, but its oneof those thousand details.Who sends money to the South Pole?! </li> <li> Custom select boxes </li> <li> Talking about select boxes... anyone heard ifthis thing called dropkick.js? </li> <li> 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 s@#t look good. </li> <li> 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. </li> <li> UnfortunatelyOnly 80% done Unfortunately these kinds of projects are only 80% done to me. </li> <li> For example, the script doesnt trigger the native select behavior on iOS.Custom Native </li> <li> Close w/ escape key on desktop: does not work with Dropkick. Type rst letter to select option: does not work with Dropkick. </li> <li> A power user denitelywants to be able totype the rst letter of acountry: doesnt workwith Dropkick. </li> <li> In general you wantyour s tohave sensible names,and not try to hack asystem together whenthere is </li> <li> By customizing your dropdowns you just: Worsened the site load time &amp; 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. </li> <li> If you do nothing, the end result is better. </li> <li> 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. </li> <li> 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 </li> <li> 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. </li> <li> 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. </li> <li> This was done by Mike Matas, Bret Victorand their team. Two names you shoulddenitely remember if youre into interfacedesign. </li> <li> The Tapbots guys are famous for their custominterfaces. Their business is practically based onthe fact that their apps are 100% custom. </li> <li> 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 </li> <li> Map embedding </li> <li> My friend asks me to get a coffee... I dontknow the place he suggests so I look it up.This site provides a Google maps embed,which is helpful. Now to get directions, Iwant to get the full Google maps website.Lets walk through the steps on how to dothis. </li> <li> I select the text... and copy it. </li> <li> I go to Google Maps Belgium... </li> <li> Search for the address there... </li> <li> Made a mistake there... </li> <li> Lets x the input. </li> <li> Getting somewhere... </li> <li> Found! </li> <li> All of this could be much easier. </li> <li> If the web developer had just leftthe code in there that supplies alink to the bigger version, I couldhave skipped at least 5 steps ofthe process. </li> <li> <br>Grotere kaartweergeven In a sense Google made a bad choice here. </li> <li> scrolling="no" marginheight="0" marginwidth="0"src=";source=s_d&amp;saddr=Lange+Leemstraat+388,+Antwerpen&amp;daddr=Oever+18+2000+Antwerpen&amp;hl=nl&amp;geocode=FUpMDQMdy5BDACnPp9V3F_fDRzGKem7xhtvLfQ%3BFRuFDQMd3RRDACn3LZoO9PbDRzH6wBiCH7Hl1A&amp;aq=0&amp;sll=51.217691,4.396253&amp;sspn=0.008817,0.016222&amp;vpsrc=0&amp;mra=ls&amp;ie=UTF8&amp;t=m&amp;z=14&amp;output=embed"&gt;<br>Grotere kaartweergeven We dont like inline styles. We dont like the element, its not semantic. Most web developers will just delete this part. </li> <li> Worth noting is that this problem isextra frustrating on a mobiledevice where you dont really havea keyboard to quickly open a newtab and copy/paste text, everyaction is slower. </li> <li> Map embeds:A simple solution </li> <li> Text The map above is just an image that links to google maps. Theres a link to the full map below so people dont have to copy/paste address info into Google Maps. Alternatively I could serve up the image with the Google Maps static maps API. </li> <li> If I hit the link on mobile Im taken directly tothe Maps application. </li> <li> Advantages Better mobile performance: you only have to load an image, not a full map Cant get into the Maps scrollbar of death Direct link to Google maps application on iOS &amp; Android </li> <li> So what is the Mapsscrollbar of deathexactly?When scrolling on your mobilephone or tablet it all worksne, but as soon as your ngerhits a google maps you startrepositioning the map insideits container. </li> <li> Recommendations Dont use Google maps embeds for displaying single address locations Of course, using maps to display map data is warranted (!) If you must, always add a link to Google maps underneath a Google embed Better, use the Google Static maps API instead of an embed if the image is for illustrative purposes, and link that image to Google maps </li> <li> Outlines </li> <li> The next example is very much a detail butsomething that tells me the UI designer reallyknew what he was doing. Look at the whitearrow [to the left of the word Sponsored] </li> <li> Notice how when the shown image has awhite background, the arrow still shows?Thats good design. </li> <li> Some guy did a study on readability of labelsin Google Maps. </li> <li> If you zoom in you see that every label has awhite outline/stroke. </li> <li> He compared Yahoo!, Bing and Google maps and found Google maps to the most legible. This had to with the aforementioned outlinesThe white outlines of Googles but also with better clustering of information. city labels are thicker, and you Unfortunately the article is ofine. cant see maps background details (roads, rivers, etc.) behind them. (...) </li> <li> Heres an example of my own, this is a littlepart of a site Im building about World War 1,unfortunately I cant show the full designsince its...</li></ul>