Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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 bett...
Designing better user interfaces sets out toteach interface design by talking throughconcrete examples: what works, what d...
Some slides only contain a few words orimages so the slides don’t distract fromwhat is being said. This “web” versionconta...
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 des...
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 aspromotio...
It’s about creating a great product
It’s about creating a great product                   Take something that blows and make it                   better. That...
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    ...
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 allth...
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 ...
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 conveni...
Good intentions:  •   Advance the web  •   Get rid of ugly dropdowns  •   Make something to fix a problem      = a beautifu...
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                                       ...
• Close w/ escape    key on desktop:    does not work    with Dropkick.•   Type first letter    to select option:    does n...
A power user definitelywants to be able totype the first 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 fit within  rendering time...
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...
I often hit this iceberg when I strayfrom native controls. For example, Ajaxinteractions require more polish thanbasic web...
Custom is hard, and to mecustom is really saying that youhave more time to think about thebehavior of a select box thanApp...
But if nobody took any UI risk there wouldnot be any innovation out there, so itdepends on what you’re doing. Thisscreensh...
This was done by Mike Matas, Bret Victorand their team. Two names you shoulddefinitely remember if you’re into interfacedes...
The Tapbots guys are famous for their custominterfaces. Their business is practically based onthe fact that their apps are...
Recommendations • Don’t use custom select boxes • Don’t try to style them using CSS either • If you must go custom, realiz...
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 em...
I select the text... and copy it.
I go to Google Maps Belgium...
Search for the address there...
Made a mistake there...
Let’s fix 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 leas...
<iframe width="425" height="350" frameborder="0"scrolling="no" marginheight="0" marginwidth="0"src="http://maps.google.be/...
scrolling="no" marginheight="0" marginwidth="0"src="http://maps.google.be/maps?f=d&amp;source=s_d&amp;saddr=Lange+Leemstra...
Worth noting is that this problem isextra frustrating on a mobiledevice where you don’t really havea keyboard to quickly o...
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 p...
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 Map...
So what is the Mapsscrollbar of death™ exactly?When scrolling on your mobilephone or tablet it all worksfine, but as soon a...
Recommendations • Don’t use Google maps embeds for displaying   single address locations   • Of course, using maps to disp...
Outlines
The next example is very much a detail butsomething that tells me the UI designer reallyknew what he was doing. Look at th...
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 th...
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 ...
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 ...
If you click an image you get this “lightbox”. Thisone by Lokesh Dakar is used on many websites. It’snot a good implementa...
Sucks on mobile... I have toswipe and drag to find 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 writ...
Lightbox2:  • Animations between items: slow, adds 1-1.5    seconds to viewing each photo  • Not very usable on mobile dev...
A good image gallery  implementation:
Niko Caignie is an Antwerpbased photographer.This is his portfolio album onGoogle+.I love how the photos take upthe availa...
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...
Recommendations • No animations between images • Clever progressive loading • Keyboard navigation • Make photos as big as ...
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 We...
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 na...
Apple is guilty of the same designmistake... you could argue it’s a thing youhave to learn, that the flyer means send.
The iPhone uses a send label, this is prettystraightforward and for me the way to go.Language is one of the clearest inter...
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                             ...
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:	  12...
Difference between left and right...verysubtle but leads to better rhythm and aclearer relationship between a heading andt...
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 pragmat...
Craftsmanship.
In the old days, when someone started tolearn a craft, they would start off as anapprentice and go to different masters to...
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:// ...
Are you a talented UI designer?I’m always looking for people to work with. Oneof my goals is to become the go-to companywh...
Subscribe to the blog:              Here’s the link:     http://wolfslittlestore.be/journal/                Through RSS:ht...
Resources      Web content mentioned in this talk      http://marketingland.com/review-galaxy-nexus-android-4-phone-1409  ...
Hire me.If you like what you’re seeing, I can apply myknowledge to your application too, or give thispresentation for your...
Are you a talented UI
Are you a talented UI
Upcoming SlideShare
Loading in …5
×
148,375 views

Published on

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

Published in: Design, Technology, Business
  • DOWNLOAD THAT BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://shorturl.at/mzUV6 } ......................................................................................................................... Download Full EPUB Ebook here { http://shorturl.at/mzUV6 } ......................................................................................................................... Download Full doc Ebook here { http://shorturl.at/mzUV6 } ......................................................................................................................... Download PDF EBOOK here { http://shorturl.at/mzUV6 } ......................................................................................................................... Download EPUB Ebook here { http://shorturl.at/mzUV6 } ......................................................................................................................... Download doc Ebook here { http://shorturl.at/mzUV6 } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book that can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer that is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story That Helped Ignite a Movement,-- Atomic Habits: An Easy &amp; Proven Way to Build Good Habits &amp; Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money That the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths that Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THAT BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book that can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer that is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story That Helped Ignite a Movement,-- Atomic Habits: An Easy &amp; Proven Way to Build Good Habits &amp; Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money That the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths that Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THAT BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book that can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer that is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story That Helped Ignite a Movement,-- Atomic Habits: An Easy &amp; Proven Way to Build Good Habits &amp; Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money That the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths that Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THAT BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book that can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer that is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story That Helped Ignite a Movement,-- Atomic Habits: An Easy &amp; Proven Way to Build Good Habits &amp; Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money That the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths that Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THAT BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book that can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer that is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story That Helped Ignite a Movement,-- Atomic Habits: An Easy &amp; Proven Way to Build Good Habits &amp; Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money That the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths that Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

×