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, ( http://wolfslittlestore.be/ )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 s@#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. Yeah.save 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

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.

I select the text... and copy it.

I go to Google Maps Belgium...

Search for the address there...

Made a mistake there...

Lets x the input.

Getting somewhere...

Found!

All of this could be much easier.

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.

Grotere kaartweergeven In a sense Google made a bad choice here.

scrolling="no" marginheight="0" marginwidth="0"src="http://maps.google.be/maps?f=d&source=s_d&saddr=Lange+Leemstraat+388,+Antwerpen&daddr=Oever+18+2000+Antwerpen&hl=nl&geocode=FUpMDQMdy5BDACnPp9V3F_fDRzGKem7xhtvLfQ%3BFRuFDQMd3RRDACn3LZoO9PbDRzH6wBiCH7Hl1A&aq=0&sll=51.217691,4.396253&sspn=0.008817,0.016222&vpsrc=0&mra=ls&ie=UTF8&t=m&z=14&output=embed">
Grotere kaartweergeven We dont like inline styles. We dont like the element, its not semantic. Most web developers will just delete this part.

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.

Map embeds:A simple solution

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.

If I hit the link on mobile Im taken directly tothe Maps application.

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 & Android

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.http://joggink.com/2012/01/responsive-google-maps/

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

Outlines

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]

Notice how when the shown image has awhite background, the arrow still shows?Thats good design.

Some guy did a study on readability of labelsin Google Maps.

If you zoom in you see that every label has awhite outline/stroke.

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. (...) http://googlesystem.blogspot.com/2010/12/why-google-maps-labels-look-better.html

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 still in progress. Take a look at thevideo icon and youll see it uses the sameoutlining technique to make the icon visibleon any background.

If I had used a standard white icon itwouldnt have been very visible on white.

Image galleries

Lightboxes. I hate em.

This is a site of a friend of mine, he runs acool coworking space in Antwerp. I take allmy examples out of the real world so Ill haveto buy him a beer next time and apologizethat I used his site as a bad example.

If you click an image you get this lightbox. Thisone by Lokesh Dakar is used on many websites. Itsnot a good implementation: to start with, it doesntreally take any advantage of your screen size: if youhave a giant screen the photo will still be small.

Sucks on mobile... I have toswipe and drag to nd thecontrols.

The problem is not really about thelightbox interaction but about thequality of the implementation.

I dont want to diss the authors of theseplugins, the web runs on open sourceand its a wonderful thing.Lightbox2 was written in a time beforeresponsive webdesign and back in theday it was an adequate solution.These days, if you want to buildsomething great, youre going to have todo better than throw in a lightbox scriptfrom 5 years ago and call it done.

Lightbox2: Animations between items: slow, adds 1-1.5 seconds to viewing each photo Not very usable on mobile devices No appropriate use of space: image doesnt ll the screen

A good image gallery implementation:

Niko Caignie is an Antwerpbased photographer.This is his portfolio album onGoogle+.I love how the photos take upthe available space compared tothe tiny thumbnails in mostgalleries.

Heres the same shot with amazimized browser, notice wesee more images, and theybecome bigger.

This is a detail view, once again,super nice use of space.

This has nothing to do with thepresentation but because Nikowas kind enough to let me usehis photography as an exampleheres a link to his google+portfolio: https://plus.google.com/photos/105216293260831528847/albums/5625394812057179681(this way you can also see foryourself why its a goodimplementation!)

Recommendations No animations between images Clever progressive loading Keyboard navigation Make photos as big as possible (appropriate use of space)

Video

So lets do something fun and lets go watcha trailer at the Apple trailer site.

We have a 27 screen so that is cool, wehave megahighspeed internet, so lets watchthis baby in 720p.

Say what? The video opens... in a box? Lookat all this screen space NOT used for video.

Mysteriously enough if I open up the video inApples Safari there is a full screen button.

Apple should know better Chrome doesnt show the fullscreen button, Safari does so its perfectly possible in Webkit Its perfectly possible in all desktop browsing using Flash, this is probably a political issue The user experience suffers

The good YouTube. Always has the option to go fullscreen. Good responsive design: bigger screen, bigger video.

Clear iconography

What does this icon mean? A paper plane?Apparently it means send. There is not alot of space on these screens so its naturalto try and display functionality using onlyan icon but it surely can get confusing.

Apple is guilty of the same designmistake... you could argue its a thing youhave to learn, that the yer means send.

The iPhone uses a send label, this is prettystraightforward and for me the way to go.Language is one of the clearest interfaces.

Same icons Anyone used the new Facebook app for iPhone? Theres two icons, they look the same...

...lead to 2 different screens ...but they lead to 2 entirely different screens. Not much to say except: be consistent. Mistakes happen to the best of us the Facebook app is hands down one of the best examples of great interface design.

Relationshipheading/paragraph

A standard way to go about spacing wouldbe even:h1, h2, h3, h4, p { padding-bottom: 12px; }

Consider that headings should be closer tothe paragraphs theyre related to:h1, h2, h3, h4 { padding-top: 12px; padding-bottom: 6px; }p { padding-bottom: 12px; }

Difference between left and right...verysubtle but leads to better rhythm and aclearer relationship between a heading andthe content following that heading.

A good user interface =A thousand details coming together

Care.

To reach an epic quality level, you NEED tocare about all of these details and more. Agood interface designer is a pragmaticperfectionist. Its not enough to just focus onthe visual part, you need to focus onEVERYTHING.

Craftsmanship.

In the old days, when someone started tolearn a craft, they would start off as anapprentice and go to different masters toeducate themselves in their craft.Ideally every master was a bit different so theapprentice could learn from varied points ofview and form his own.Eventually the apprentice would become amaster of their domain.Applying this to modern UI design I believe agood UI designer should dip their toes inother jobs and elds like copywriting,backend development, photography, printdesign, business, marketing, front-enddevelopment and so much more.

Thank you! Follow me: @wolfr_ on Twitter E-mail me: mail@wolfslittlestore.beRead the blog: wolfslittlestore.be/journal

Follow me on Twitter Heres the link: http://twitter.com/wolfr_

If you liked this presentation Check out my previous presentation Design for Developers. You can view it here: http:// www.slideshare.net/Wolfr/design-for- developersonlineversionlong

Are you a talented UI designer?Im always looking for people to work with. Oneof my goals is to become the go-to companywhen talking about UI design. Obviously I cantdo this alone. If you live in or around Antwerp,Get in touch: mail@wolfslittlestore.be

Subscribe to the blog: Heres the link: http://wolfslittlestore.be/journal/ Through RSS:http://feeds.feedburner.com/Wolfslittlestore

Resources Web content mentioned in this talk http://marketingland.com/review-galaxy-nexus-android-4-phone-1409 http://joggink.com/2012/01/responsive-google-maps/ Web content around the subject http://www.designstaff.org/articles/design-details-2011-11-29.html http://www.andybudd.com/archives/2011/12/why_designers_are_holding_themselves_bac/ http://tapbots.com/blog/design/designing-convertbot http://littlebigdetails.com/ Books you should read Defensive Design for the Web: How Designing the obvious by Robert to improve error messages, help, Hoekman Jr. forms, and other crisis points by Jason Fried & Matthew Linderman Designing for interaction by Dan Saffer Designing Web Usability by Jakob Nielsen Getting Real by 37signals http:// gettingreal.37signals.com/ Dont make me think! by Steve Krug

Hire me.If you like what youre seeing, I can apply myknowledge to your application too, or give thispresentation for your company. Get in touch:mail@wolfslittlestore.be