Good intentions: • Advance the Designing better user interfaces

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 doesn’twork. 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 don’t 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 10’2 User interface design examples 25’3 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 studioWolf’s Little Store

So this is my company’s 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 speciﬁcally want to focusmore on the interface design part. The nextwebsite will reﬂect this :)

The kind of design I do is interface design...

It’s not about the “WOW!”

I don’t really care too much for interactivepresentations or branded games. Whilethey have their right to exist aspromotional material, it’s not the kind ofwork I want to spend my life doing.

It’s about creating a great product

It’s about creating a great product Take something that blows and make it better. That’s 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...

You’ve got the power

You’ve got the power I think everyone has the power to make a good product because it’s 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. There’s — 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 <optgroup> 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 wouldn’t 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 doesn’t 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 deﬁnitelywants to be able totype the ﬁrst letter of acountry: doesn’t workwith Dropkick.

In general you wantyour <option>s tohave sensible names,and not try to hack asystem together whenthere is <optgroup>

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 it’s better to have ugly <select>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: I’m 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 doesn’thave the time to polish custom UI, it’soften 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 thanApple’s interaction design team.And that you have the dev powerto ﬁx it. On every platform outthere. So sometimes you justhave to be pragmatic if you’rebuilding a product.

But if nobody took any UI risk there wouldnot be any innovation out there, so itdepends on what you’re doing. Thisscreenshot is from Al Gore’s 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 shoulddeﬁnitely remember if you’re into interfacedesign.

The Tapbots guys are famous for their custominterfaces. Their business is practically based onthe fact that their apps are 100% custom.

Recommendations • Don’t use custom select boxes • Don’t 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 don’tknow 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.Let’s 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...

Let’s ﬁ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.

<iframe width="425" height="350" frameborder="0"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"></iframe><br /><small><a href="http://maps.google.be/maps?f=d&source=embed&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"style="color:#0000FF;text-align:left">Grotere kaartweergeven</a></small> 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"></iframe><br /><small><a href="http://maps.google.be/maps?f=d&source=embed&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"style="color:#0000FF;text-align:left">Grotere kaartweergeven</a></small> We don’t like inline styles. We don’t like the <small> element, it’s not semantic. Most web developers will just delete this part.

Worth noting is that this problem isextra frustrating on a mobiledevice where you don’t 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. There’s a link to the full map below so people don’t 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 I’m taken directly tothe Maps application.

Advantages • Better mobile performance: you only have to load an image, not a full map • Can’t get into the Maps scrollbar of death™ • Direct link to Google maps application on iOS & Android

So what is the Mapsscrollbar of death™ exactly?When scrolling on your mobilephone or tablet it all worksﬁne, but as soon as your ﬁngerhits a google maps you startrepositioning the map insideits container.http://joggink.com/2012/01/responsive-google-maps/

Recommendations • Don’t 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?That’s 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 outlines“The white outlines of Googles but also with better clustering of information. city labels are thicker, and you Unfortunately the article is ofﬂine. cant see maps background details (roads, rivers, etc.) behind them. (...)” http://googlesystem.blogspot.com/2010/12/why-google-maps-labels-look-better.html

Here’s an example of my own, this is a littlepart of a site I’m building about World War 1,unfortunately I can’t show the full designsince it’s still in progress. Take a look at the“video” icon and you’ll see it uses the sameoutlining technique to make the icon visibleon any background.

If I had used a standard white icon itwouldn’t 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 I’ll 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. It’snot a good implementation: to start with, it doesn’treally 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 don’t want to diss the authors of theseplugins, the web runs on open sourceand it’s 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, you’re 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 doesn’t ﬁ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.

Here’s 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 examplehere’s a link to his google+portfolio: https://plus.google.com/photos/105216293260831528847/albums/5625394812057179681(this way you can also see foryourself why it’s a goodimplementation!)

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

Video

So let’s do something fun and let’s go watcha trailer at the Apple trailer site.

We have a 27” screen so that is cool, wehave megahighspeed internet, so let’s 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 inApple’s Safari there is a full screen button.

Apple should know better • Chrome doesn’t show the fullscreen button, Safari does so it’s perfectly possible in Webkit • It’s 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 it’s naturalto try and display functionality using onlyan icon but it surely can get confusing.

Apple is guilty of the same designmistake... you could argue it’s 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? There’s 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 they’re 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. It’s 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 Here’s 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?I’m always looking for people to work with. Oneof my goals is to become the go-to companywhen talking about UI design. Obviously I can’tdo this alone. If you live in or around Antwerp,Get in touch: mail@wolfslittlestore.be

Subscribe to the blog: Here’s 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/ Don’t make me think! by Steve Krug

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

Good intentions: • Advance the Designing better user interfaces

Johan Ronsse

Good intentions: • Advance the