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.
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 :)
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.
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.
“ 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.
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.
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
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.
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.
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.
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
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.
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.
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.
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!)
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
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.
...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.
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.
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.
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: email@example.com
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:firstname.lastname@example.org