SlideShare una empresa de Scribd logo
1 de 118
Descargar para leer sin conexión
Designing better
 user interfaces
 Fronteers, Rotterdam, February 15th, 2012
I would like to give some context to this
presentation. These slides are from a 35 minute
presentation called Designing better user
interfaces.
Designing better user interfaces sets out to
teach interface design by talking through
concrete examples: what works, what doesn’t
work. A good interface consists of a thousand
details done right. This presentation is all about
those details.
Some slides only contain a few words or
images so the slides don’t distract from
what is being said. This “web” version
contains sticky notes (like this one) that
summarize what I talked about when
displaying the slide during the original talk.
1   Introduction                     10’
2   User interface design examples   25’
3   Q&A: throughout                    -
Introduction
My name is Johan
Wolf or @wolfr_ on the internet
I read stuff all day
I like to play video games
I love to write
I run a little freelance
design studio


Wolf’s Little Store
Designing better user interfaces
So this is my company’s website, ( http://
wolfslittlestore.be/ )

Under work you can see what I do: interface
design, web design, branding and identity,
HTML & CSS, photography and design for
mobile devices.

Companies evolve and this is actually a little
bit outdated - I specifically want to focus
more on the interface design part. The next
website will reflect this :)
The kind of design I do is interface design...
It’s not about the “WOW!”
I don’t really care too much for interactive
presentations or branded games. While
they have their right to exist as
promotional material, it’s not the kind of
work 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. The
difference between a good interface and a great one is in all
those details: the spelling of a word, the spacing between
items, the colors used. There’s — literally — thousands of
details 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 few
days, it's the form to transfer money to other
people from my bank.
When you get to the part where you have to
select a country, you get a country list with
hundreds of options.
Why not put Belgium as a default? Almost all
transfers happen within Belgium.

Another idea would be to list the most
popular countries (Belgium, France,
Germany, Holland) in an <optgroup> at the
top.
It might seem like a small thing, but it's one
of those thousand details.




Who sends money to the South Pole?!
Custom select boxes
Talking about select boxes... anyone heard if
this thing called dropkick.js?
“ Creating custom dropdowns is usually a tedious
process that requires a ton of extra setup time.
Oftentimes lacking conveniences that native
dropdowns have such as keyboard navigation.
DropKick removes the tedium and lets you focus
on making s@#t look good.”
Good intentions:
  •   Advance the web
  •   Get rid of ugly dropdowns
  •   Make something to fix 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.
Unfortunately

Only 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 first letter
    to select option:
    does not work
    with Dropkick.
A power user definitely
wants to be able to
type the first letter of a
country: doesn’t work
with Dropkick.
In general you want
your	
  <option>s to
have sensible names,
and not try to hack a
system together when
there is	
  <optgroup>
By customizing your dropdowns you just:
  Worsened the site load time &        Made your dropdown fit 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 keyboard
scroll in Flash sites? Yeah.   nav because somebody decided to
                               implement custom radio buttons and
Remember not being able to     checkboxes. Yeah.
save an image from a Flash
site? Yeah.
                               Accessibility and screenreaders: I’m
                               not even going to go there. It gets BAD.
I often hit this iceberg when I stray
from native controls. For example, Ajax
interactions require more polish than
basic web pages. Custom mobile
menus require more polish than the
built-in version. If the team doesn’t
have the time to polish custom UI, it’s
often better to stick to the boring
native controls that work.
Braden Kowitz, Designer at Google
Custom is hard, and to me
custom is really saying that you
have more time to think about the
behavior of a select box than
Apple’s interaction design team.

And that you have the dev power
to fix it. On every platform out
there. So sometimes you just
have to be pragmatic if you’re
building a product.
But if nobody took any UI risk there would
not be any innovation out there, so it
depends on what you’re doing. This
screenshot is from Al Gore’s Our Choice, in
my opinion the best e-book there is on iPad,
interaction design-wise that is.
This was done by Mike Matas, Bret Victor
and their team. Two names you should
definitely remember if you’re into interface
design.
Designing better user interfaces
The Tapbots guys are famous for their custom
interfaces. Their business is practically based on
the 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 first letter
Map embedding
My friend asks me to get a coffee... I don’t
know the place he suggests so I look it up.
This site provides a Google maps embed,
which is helpful. Now to get directions, I
want to get the full Google maps website.
Let’s walk through the steps on how to do
this.
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 left
the code in there that supplies a
link to the bigger version, I could
have skipped at least 5 steps of
the process.
<iframe width="425" height="350" frameborder="0"
scrolling="no" marginheight="0" marginwidth="0"
src="http://maps.google.be/maps?
f=d&amp;source=s_d&amp;saddr=Lange+Leemstraat
+388,+Antwerpen&amp;daddr=Oever
+18+2000+Antwerpen&amp;hl=nl&amp;geocode=FUpMDQMdy5BDACnPp
9V3F_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"
></iframe><br /><small><a href="http://maps.google.be/
maps?f=d&amp;source=embed&amp;saddr=Lange+Leemstraat
+388,+Antwerpen&amp;daddr=Oever
+18+2000+Antwerpen&amp;hl=nl&amp;geocode=FUpMDQMdy5BDACnPp
9V3F_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"
style="color:#0000FF;text-align:left">Grotere kaart
weergeven</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&amp;source=s_d&amp;saddr=Lange+Leemstraat
+388,+Antwerpen&amp;daddr=Oever
+18+2000+Antwerpen&amp;hl=nl&amp;geocode=FUpMDQMdy5BDACnPp
9V3F_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"
></iframe><br /><small><a href="http://maps.google.be/
maps?f=d&amp;source=embed&amp;saddr=Lange+Leemstraat
+388,+Antwerpen&amp;daddr=Oever
+18+2000+Antwerpen&amp;hl=nl&amp;geocode=FUpMDQMdy5BDACnPp
9V3F_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"
style="color:#0000FF;text-align:left">Grotere kaart
weergeven</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 is
extra frustrating on a mobile
device where you don’t really have
a keyboard to quickly open a new
tab and copy/paste text, every
action 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 to
the 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 Maps
scrollbar of death™ exactly?
When scrolling on your mobile
phone or tablet it all works
fine, but as soon as your finger
hits a google maps you start
repositioning the map inside
its 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 but
something that tells me the UI designer really
knew what he was doing. Look at the white
arrow [to the left of the word Sponsored]
Notice how when the shown image has a
white background, the arrow still shows?
That’s good design.
Some guy did a study on readability of labels
in Google Maps.
If you zoom in you see that every label has a
white 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 Google's                        but also with better clustering of information.
 city labels are thicker, and you                      Unfortunately the article is offline.
 can't 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 little
part of a site I’m building about World War 1,
unfortunately I can’t show the full design
since it’s still in progress. Take a look at the
“video” icon and you’ll see it uses the same
outlining technique to make the icon visible
on any background.
If I had used a standard white icon it
wouldn’t have been very visible on white.
Image galleries
Lightboxes.
   I hate ‘em.
This is a site of a friend of mine, he runs a
cool coworking space in Antwerp. I take all
my examples out of the real world so I’ll have
to buy him a beer next time and apologize
that I used his site as a “bad” example.
If you click an image you get this “lightbox”. This
one by Lokesh Dakar is used on many websites. It’s
not a good implementation: to start with, it doesn’t
really take any advantage of your screen size: if you
have a giant screen the photo will still be small.
Sucks on mobile... I have to
swipe and drag to find the
controls.
The problem is not really about the
lightbox “interaction” but about the
quality of the implementation.
I don’t want to diss the authors of these
plugins, the web runs on open source
and it’s a wonderful thing.

Lightbox2 was written in a time before
responsive webdesign and back in the
day it was an adequate solution.

These days, if you want to build
something great, you’re going to have to
do better than throw in a lightbox script
from 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
    fill the screen
A good image gallery
  implementation:
Niko Caignie is an Antwerp
based photographer.

This is his portfolio album on
Google+.

I love how the photos take up
the available space compared to
the tiny thumbnails in most
galleries.
Here’s the same shot with a
mazimized browser, notice we
see more images, and they
become bigger.
This is a detail view, once again,
super nice use of space.
This has nothing to do with the
presentation but because Niko
was kind enough to let me use
his photography as an example
here’s a link to his google+
portfolio: https://
plus.google.com/photos/
105216293260831528847/
albums/5625394812057179681

(this way you can also see for
yourself why it’s a good
implementation!)
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 watch
a trailer at the Apple trailer site.
We have a 27” screen so that is cool, we
have megahighspeed internet, so let’s watch
this baby in 720p.
Say what? The video opens... in a box? Look
at all this screen space NOT used for video.
Mysteriously enough if I open up the video in
Apple’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 a
lot of space on these screens so it’s natural
to try and display functionality using only
an icon but it surely can get confusing.
Apple is guilty of the same design
mistake... you could argue it’s a thing you
have to learn, that the flyer means send.
The iPhone uses a send label, this is pretty
straightforward 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.
Relationship
heading/paragraph
A standard way to go about spacing would
be even:
h1,	
  h2,	
  h3,	
  h4,	
  p	
  {	
  padding-­‐bottom:	
  
12px;	
  }
Consider that headings should be closer to
the paragraphs they’re related to:
h1,	
  h2,	
  h3,	
  h4	
  {	
  padding-­‐top:	
  12px;	
  
padding-­‐bottom:	
  6px;	
  }
p	
  {	
  padding-­‐bottom:	
  12px;	
  }
Difference between left and right...very
subtle but leads to better rhythm and a
clearer relationship between a heading and
the content following that heading.
A good user interface =
A thousand details coming together
Care.
To reach an epic quality level, you NEED to
care about all of these details and more. A
good interface designer is a pragmatic
perfectionist. It’s not enough to just focus on
the visual part, you need to focus on
EVERYTHING.
Craftsmanship.
In the old days, when someone started to
learn a craft, they would start off as an
apprentice and go to different masters to
educate themselves in their craft.

Ideally every master was a bit different so the
apprentice could learn from varied points of
view and form his own.

Eventually the apprentice would become a
master of their domain.

Applying this to modern UI design I believe a
good UI designer should dip their toes in
other jobs and fields like copywriting,
backend development, photography, print
design, business, marketing, front-end
development and so much more.
Thank you!

    Follow me: @wolfr_ on Twitter
  E-mail me: mail@wolfslittlestore.be
Read 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. One
of my goals is to become the go-to company
when talking about UI design. Obviously I can’t
do 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 my
knowledge to your application too, or give this
presentation for your company. Get in touch:
mail@wolfslittlestore.be

Más contenido relacionado

La actualidad más candente

The New Era of (Non-) Discoverability
The New Era of (Non-) DiscoverabilityThe New Era of (Non-) Discoverability
The New Era of (Non-) DiscoverabilityDan Saffer
 
The Future of User Experience
The Future of User ExperienceThe Future of User Experience
The Future of User ExperienceJason Mesut
 
Top Tips for Android UIs - Getting the Magic on Tablets
Top Tips for Android UIs - Getting the Magic on TabletsTop Tips for Android UIs - Getting the Magic on Tablets
Top Tips for Android UIs - Getting the Magic on TabletsMotorola Mobility - MOTODEV
 
Exploring the physical web
Exploring the physical webExploring the physical web
Exploring the physical webyiibu
 
7 User Experience Lessons from the iPhone (Introducing UX)
7 User Experience Lessons from the iPhone (Introducing UX)7 User Experience Lessons from the iPhone (Introducing UX)
7 User Experience Lessons from the iPhone (Introducing UX)Stephen Anderson
 
101 Conversational User Interfaces
101 Conversational User Interfaces 101 Conversational User Interfaces
101 Conversational User Interfaces Redweb Ltd
 
Mobile-first, a quick introduction
Mobile-first, a quick introductionMobile-first, a quick introduction
Mobile-first, a quick introductionJelle Desramaults
 
Usability Speech (Jens Hoffmann) - T3CON08
Usability Speech (Jens Hoffmann) - T3CON08Usability Speech (Jens Hoffmann) - T3CON08
Usability Speech (Jens Hoffmann) - T3CON08Jens Hoffmann
 
Design For Multiple Touchpoints
Design For Multiple TouchpointsDesign For Multiple Touchpoints
Design For Multiple TouchpointsShane Morris
 
Beginners guide-to-coding-updated
Beginners guide-to-coding-updatedBeginners guide-to-coding-updated
Beginners guide-to-coding-updatedSaidLezzar
 
Jan Kroon's talk @mdevcon 2012
Jan Kroon's talk @mdevcon 2012Jan Kroon's talk @mdevcon 2012
Jan Kroon's talk @mdevcon 2012Jan Kroon
 
Yikes...It Looks Like That?! - UI Worst Practices
Yikes...It Looks Like That?! - UI Worst PracticesYikes...It Looks Like That?! - UI Worst Practices
Yikes...It Looks Like That?! - UI Worst PracticesBruce Elgort
 
UXPA2019 Not Your Average Chatbot: Using Cognitive Intercept to Improve Infor...
UXPA2019 Not Your Average Chatbot: Using Cognitive Intercept to Improve Infor...UXPA2019 Not Your Average Chatbot: Using Cognitive Intercept to Improve Infor...
UXPA2019 Not Your Average Chatbot: Using Cognitive Intercept to Improve Infor...UXPA International
 
Bank Chris - Web UI Design Patterns - 2014
Bank Chris - Web UI Design Patterns - 2014Bank Chris - Web UI Design Patterns - 2014
Bank Chris - Web UI Design Patterns - 2014Shah Muhammad Baig
 
UX Prototyping and Personas 11-14-14
UX Prototyping and Personas 11-14-14UX Prototyping and Personas 11-14-14
UX Prototyping and Personas 11-14-14Shilpa Thanawala
 
Adobe Max Modern iPhone App Design with Rick Messer
Adobe Max Modern iPhone App Design with Rick MesserAdobe Max Modern iPhone App Design with Rick Messer
Adobe Max Modern iPhone App Design with Rick MesserRick Messer
 
Open Data in the Newsroom: What's the story? (Talk from OK Con 2011 in Berlin)
Open Data in the Newsroom: What's the story? (Talk from OK Con 2011 in Berlin)Open Data in the Newsroom: What's the story? (Talk from OK Con 2011 in Berlin)
Open Data in the Newsroom: What's the story? (Talk from OK Con 2011 in Berlin)Mirko Lorenz
 
10 Design Commandments for Mobile App Developers
10 Design Commandments for Mobile App Developers10 Design Commandments for Mobile App Developers
10 Design Commandments for Mobile App DevelopersJigyasa Makkar
 
Oli Gardner - Data-Driven Design
Oli Gardner - Data-Driven DesignOli Gardner - Data-Driven Design
Oli Gardner - Data-Driven DesignTuring Fest
 

La actualidad más candente (20)

The New Era of (Non-) Discoverability
The New Era of (Non-) DiscoverabilityThe New Era of (Non-) Discoverability
The New Era of (Non-) Discoverability
 
The Future of User Experience
The Future of User ExperienceThe Future of User Experience
The Future of User Experience
 
UX & UI Design 101
UX & UI Design 101UX & UI Design 101
UX & UI Design 101
 
Top Tips for Android UIs - Getting the Magic on Tablets
Top Tips for Android UIs - Getting the Magic on TabletsTop Tips for Android UIs - Getting the Magic on Tablets
Top Tips for Android UIs - Getting the Magic on Tablets
 
Exploring the physical web
Exploring the physical webExploring the physical web
Exploring the physical web
 
7 User Experience Lessons from the iPhone (Introducing UX)
7 User Experience Lessons from the iPhone (Introducing UX)7 User Experience Lessons from the iPhone (Introducing UX)
7 User Experience Lessons from the iPhone (Introducing UX)
 
101 Conversational User Interfaces
101 Conversational User Interfaces 101 Conversational User Interfaces
101 Conversational User Interfaces
 
Mobile-first, a quick introduction
Mobile-first, a quick introductionMobile-first, a quick introduction
Mobile-first, a quick introduction
 
Usability Speech (Jens Hoffmann) - T3CON08
Usability Speech (Jens Hoffmann) - T3CON08Usability Speech (Jens Hoffmann) - T3CON08
Usability Speech (Jens Hoffmann) - T3CON08
 
Design For Multiple Touchpoints
Design For Multiple TouchpointsDesign For Multiple Touchpoints
Design For Multiple Touchpoints
 
Beginners guide-to-coding-updated
Beginners guide-to-coding-updatedBeginners guide-to-coding-updated
Beginners guide-to-coding-updated
 
Jan Kroon's talk @mdevcon 2012
Jan Kroon's talk @mdevcon 2012Jan Kroon's talk @mdevcon 2012
Jan Kroon's talk @mdevcon 2012
 
Yikes...It Looks Like That?! - UI Worst Practices
Yikes...It Looks Like That?! - UI Worst PracticesYikes...It Looks Like That?! - UI Worst Practices
Yikes...It Looks Like That?! - UI Worst Practices
 
UXPA2019 Not Your Average Chatbot: Using Cognitive Intercept to Improve Infor...
UXPA2019 Not Your Average Chatbot: Using Cognitive Intercept to Improve Infor...UXPA2019 Not Your Average Chatbot: Using Cognitive Intercept to Improve Infor...
UXPA2019 Not Your Average Chatbot: Using Cognitive Intercept to Improve Infor...
 
Bank Chris - Web UI Design Patterns - 2014
Bank Chris - Web UI Design Patterns - 2014Bank Chris - Web UI Design Patterns - 2014
Bank Chris - Web UI Design Patterns - 2014
 
UX Prototyping and Personas 11-14-14
UX Prototyping and Personas 11-14-14UX Prototyping and Personas 11-14-14
UX Prototyping and Personas 11-14-14
 
Adobe Max Modern iPhone App Design with Rick Messer
Adobe Max Modern iPhone App Design with Rick MesserAdobe Max Modern iPhone App Design with Rick Messer
Adobe Max Modern iPhone App Design with Rick Messer
 
Open Data in the Newsroom: What's the story? (Talk from OK Con 2011 in Berlin)
Open Data in the Newsroom: What's the story? (Talk from OK Con 2011 in Berlin)Open Data in the Newsroom: What's the story? (Talk from OK Con 2011 in Berlin)
Open Data in the Newsroom: What's the story? (Talk from OK Con 2011 in Berlin)
 
10 Design Commandments for Mobile App Developers
10 Design Commandments for Mobile App Developers10 Design Commandments for Mobile App Developers
10 Design Commandments for Mobile App Developers
 
Oli Gardner - Data-Driven Design
Oli Gardner - Data-Driven DesignOli Gardner - Data-Driven Design
Oli Gardner - Data-Driven Design
 

Similar a Designing better user interfaces

Frugal Web Development
Frugal Web DevelopmentFrugal Web Development
Frugal Web Developmenttcottrill
 
Responsive Web Design
Responsive Web Design Responsive Web Design
Responsive Web Design CLEVER°FRANKE
 
Embracing Uncertainty: Learning to Think Responsively
Embracing Uncertainty: Learning to Think ResponsivelyEmbracing Uncertainty: Learning to Think Responsively
Embracing Uncertainty: Learning to Think ResponsivelyChad Currie
 
Ten Lessons in Designing Content for Mobile
Ten Lessons in Designing Content for MobileTen Lessons in Designing Content for Mobile
Ten Lessons in Designing Content for MobileVicke Cheung
 
Designing for Today's Web
Designing for Today's WebDesigning for Today's Web
Designing for Today's WebMeagan Fisher
 
MIMA 2014 - Changing your Responsive Design Workflow
MIMA 2014 - Changing your Responsive Design WorkflowMIMA 2014 - Changing your Responsive Design Workflow
MIMA 2014 - Changing your Responsive Design Workfloweaselsolutions
 
Between Paper & Code
Between Paper & CodeBetween Paper & Code
Between Paper & CodeMolly Wilson
 
Session on mockups
Session on mockupsSession on mockups
Session on mockupsAbdul Dibosh
 
Working with designers that dont code
Working with designers that dont codeWorking with designers that dont code
Working with designers that dont codeKirsty Burgoine
 
PSU Guest Lecture: Database Programming
PSU Guest Lecture: Database ProgrammingPSU Guest Lecture: Database Programming
PSU Guest Lecture: Database Programmingborkweb
 
13 Signs Your UX Needs an Exorcism
13 Signs Your UX Needs an Exorcism13 Signs Your UX Needs an Exorcism
13 Signs Your UX Needs an ExorcismCrystal Beasley
 
Reduce web clutter with flat design in 2014
Reduce web clutter with flat design in 2014Reduce web clutter with flat design in 2014
Reduce web clutter with flat design in 2014Christopher Dill
 
Justin French Web Directions07
Justin French Web Directions07Justin French Web Directions07
Justin French Web Directions07justinfrench
 
Preprocessing Language
Preprocessing LanguagePreprocessing Language
Preprocessing LanguageNancy Jarjis
 
Form Function Class 6, Manila, Philippines 14/11/2015
Form Function Class 6, Manila, Philippines 14/11/2015Form Function Class 6, Manila, Philippines 14/11/2015
Form Function Class 6, Manila, Philippines 14/11/2015Holger Bartel
 

Similar a Designing better user interfaces (20)

Casestudy
CasestudyCasestudy
Casestudy
 
Frugal Web Development
Frugal Web DevelopmentFrugal Web Development
Frugal Web Development
 
Let's interface
Let's interfaceLet's interface
Let's interface
 
Responsive Web Design
Responsive Web Design Responsive Web Design
Responsive Web Design
 
Embracing Uncertainty: Learning to Think Responsively
Embracing Uncertainty: Learning to Think ResponsivelyEmbracing Uncertainty: Learning to Think Responsively
Embracing Uncertainty: Learning to Think Responsively
 
Ten Lessons in Designing Content for Mobile
Ten Lessons in Designing Content for MobileTen Lessons in Designing Content for Mobile
Ten Lessons in Designing Content for Mobile
 
Designing for Today's Web
Designing for Today's WebDesigning for Today's Web
Designing for Today's Web
 
MIMA 2014 - Changing your Responsive Design Workflow
MIMA 2014 - Changing your Responsive Design WorkflowMIMA 2014 - Changing your Responsive Design Workflow
MIMA 2014 - Changing your Responsive Design Workflow
 
Between Paper & Code
Between Paper & CodeBetween Paper & Code
Between Paper & Code
 
Session on mockups
Session on mockupsSession on mockups
Session on mockups
 
Working with designers that dont code
Working with designers that dont codeWorking with designers that dont code
Working with designers that dont code
 
Prophets trends-in-interactive-design
Prophets trends-in-interactive-designProphets trends-in-interactive-design
Prophets trends-in-interactive-design
 
PSU Guest Lecture: Database Programming
PSU Guest Lecture: Database ProgrammingPSU Guest Lecture: Database Programming
PSU Guest Lecture: Database Programming
 
13 Signs Your UX Needs an Exorcism
13 Signs Your UX Needs an Exorcism13 Signs Your UX Needs an Exorcism
13 Signs Your UX Needs an Exorcism
 
Reduce web clutter with flat design in 2014
Reduce web clutter with flat design in 2014Reduce web clutter with flat design in 2014
Reduce web clutter with flat design in 2014
 
Justin French Web Directions07
Justin French Web Directions07Justin French Web Directions07
Justin French Web Directions07
 
Preprocessing Language
Preprocessing LanguagePreprocessing Language
Preprocessing Language
 
Mobile UX Challenges
Mobile UX ChallengesMobile UX Challenges
Mobile UX Challenges
 
Mobile ux sot a and challenges
Mobile ux sot a and challengesMobile ux sot a and challenges
Mobile ux sot a and challenges
 
Form Function Class 6, Manila, Philippines 14/11/2015
Form Function Class 6, Manila, Philippines 14/11/2015Form Function Class 6, Manila, Philippines 14/11/2015
Form Function Class 6, Manila, Philippines 14/11/2015
 

Más de Johan Ronsse

Design for developers
Design for developersDesign for developers
Design for developersJohan Ronsse
 
The jump to freelance
The jump to freelanceThe jump to freelance
The jump to freelanceJohan Ronsse
 
Wolf fronteers 2010
Wolf fronteers 2010Wolf fronteers 2010
Wolf fronteers 2010Johan Ronsse
 
Better CSS with Compass/Sass
Better CSS with Compass/SassBetter CSS with Compass/Sass
Better CSS with Compass/SassJohan Ronsse
 
jQuery for designers
jQuery for designersjQuery for designers
jQuery for designersJohan Ronsse
 
Meester van het CSS universum worden + Opvolging “Craftsmanship”
Meester van het CSS universum worden + Opvolging “Craftsmanship”Meester van het CSS universum worden + Opvolging “Craftsmanship”
Meester van het CSS universum worden + Opvolging “Craftsmanship”Johan Ronsse
 
Webdesign De Middelmaat Overstijgen
Webdesign De Middelmaat OverstijgenWebdesign De Middelmaat Overstijgen
Webdesign De Middelmaat OverstijgenJohan Ronsse
 

Más de Johan Ronsse (10)

What is Bedrock?
What is Bedrock?What is Bedrock?
What is Bedrock?
 
Design for developers
Design for developersDesign for developers
Design for developers
 
The jump to freelance
The jump to freelanceThe jump to freelance
The jump to freelance
 
Wolf fronteers 2010
Wolf fronteers 2010Wolf fronteers 2010
Wolf fronteers 2010
 
CSS3 now
CSS3 nowCSS3 now
CSS3 now
 
Better CSS with Compass/Sass
Better CSS with Compass/SassBetter CSS with Compass/Sass
Better CSS with Compass/Sass
 
jQuery for designers
jQuery for designersjQuery for designers
jQuery for designers
 
Workflow
WorkflowWorkflow
Workflow
 
Meester van het CSS universum worden + Opvolging “Craftsmanship”
Meester van het CSS universum worden + Opvolging “Craftsmanship”Meester van het CSS universum worden + Opvolging “Craftsmanship”
Meester van het CSS universum worden + Opvolging “Craftsmanship”
 
Webdesign De Middelmaat Overstijgen
Webdesign De Middelmaat OverstijgenWebdesign De Middelmaat Overstijgen
Webdesign De Middelmaat Overstijgen
 

Último

Revit Drafting – Drafting Tools and Software
Revit Drafting – Drafting Tools and SoftwareRevit Drafting – Drafting Tools and Software
Revit Drafting – Drafting Tools and SoftwareResDraft
 
Complete Coffee table book on Jiapur.pdf
Complete Coffee table book on Jiapur.pdfComplete Coffee table book on Jiapur.pdf
Complete Coffee table book on Jiapur.pdfaimonayesha7
 
DSGN 253 Design Portfolio Project - Julien Fedou
DSGN 253 Design Portfolio Project - Julien FedouDSGN 253 Design Portfolio Project - Julien Fedou
DSGN 253 Design Portfolio Project - Julien Fedoujfedou2105
 
Oregon State University Interior Design Portfolio
Oregon State University Interior Design PortfolioOregon State University Interior Design Portfolio
Oregon State University Interior Design Portfoliopagei
 
F.LAB Credential ©2024 : Looking The World of Experience by F.LAB
F.LAB Credential ©2024 : Looking The World of Experience by F.LABF.LAB Credential ©2024 : Looking The World of Experience by F.LAB
F.LAB Credential ©2024 : Looking The World of Experience by F.LAButariworks
 
Unit 12 - Level Design and how it affects the player.
Unit 12 - Level Design and how it affects the player.Unit 12 - Level Design and how it affects the player.
Unit 12 - Level Design and how it affects the player.JoshHolmes21
 
ورشة الطريق إلى البيم ورشة الطريق إلى البيم
ورشة الطريق إلى البيم   ورشة الطريق إلى البيمورشة الطريق إلى البيم   ورشة الطريق إلى البيم
ورشة الطريق إلى البيم ورشة الطريق إلى البيمOmarSelim27
 
Jackson Henry 24 Flock The Vote Shirt Jackson Henry 24 Flock The Vote Shirt
Jackson Henry 24 Flock The Vote Shirt  Jackson Henry 24 Flock The Vote ShirtJackson Henry 24 Flock The Vote Shirt  Jackson Henry 24 Flock The Vote Shirt
Jackson Henry 24 Flock The Vote Shirt Jackson Henry 24 Flock The Vote ShirtTeeFusion
 
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...ssuseraaa1581
 
Sign The Contract Big Boy Shirt Sign The Contract Big Boy Shirt
Sign The Contract Big Boy Shirt  Sign The Contract Big Boy ShirtSign The Contract Big Boy Shirt  Sign The Contract Big Boy Shirt
Sign The Contract Big Boy Shirt Sign The Contract Big Boy ShirtTeeFusion
 
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.Vaishnavi R
 
DesignKit IDEO Human-Centered Design course report
DesignKit IDEO Human-Centered Design course reportDesignKit IDEO Human-Centered Design course report
DesignKit IDEO Human-Centered Design course reportstudiotelon
 
MIRAE (Branding & Identity) Explained.pdf
MIRAE (Branding & Identity) Explained.pdfMIRAE (Branding & Identity) Explained.pdf
MIRAE (Branding & Identity) Explained.pdfaimonayesha7
 
second stories test a method kit for co creationnnnnnn
second stories test a method kit for co creationnnnnnnsecond stories test a method kit for co creationnnnnnn
second stories test a method kit for co creationnnnnnnjohannesrothkegel
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
SHADES Explained (Branding & Packaging) .pdf
SHADES Explained (Branding & Packaging) .pdfSHADES Explained (Branding & Packaging) .pdf
SHADES Explained (Branding & Packaging) .pdfaimonayesha7
 
Digi Pack for the impulse band coursework.pptx
Digi Pack for the impulse band coursework.pptxDigi Pack for the impulse band coursework.pptx
Digi Pack for the impulse band coursework.pptxRufusGleave
 
Strawberry Jams But My Glock Don't Shirt
Strawberry Jams But My Glock Don't ShirtStrawberry Jams But My Glock Don't Shirt
Strawberry Jams But My Glock Don't ShirtTeeFusion
 
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...Peter139483
 
Cayden Ingman's apparel design portfolio | Oregon State University|
Cayden Ingman's apparel design portfolio | Oregon State University|Cayden Ingman's apparel design portfolio | Oregon State University|
Cayden Ingman's apparel design portfolio | Oregon State University|CaydenIngman
 

Último (20)

Revit Drafting – Drafting Tools and Software
Revit Drafting – Drafting Tools and SoftwareRevit Drafting – Drafting Tools and Software
Revit Drafting – Drafting Tools and Software
 
Complete Coffee table book on Jiapur.pdf
Complete Coffee table book on Jiapur.pdfComplete Coffee table book on Jiapur.pdf
Complete Coffee table book on Jiapur.pdf
 
DSGN 253 Design Portfolio Project - Julien Fedou
DSGN 253 Design Portfolio Project - Julien FedouDSGN 253 Design Portfolio Project - Julien Fedou
DSGN 253 Design Portfolio Project - Julien Fedou
 
Oregon State University Interior Design Portfolio
Oregon State University Interior Design PortfolioOregon State University Interior Design Portfolio
Oregon State University Interior Design Portfolio
 
F.LAB Credential ©2024 : Looking The World of Experience by F.LAB
F.LAB Credential ©2024 : Looking The World of Experience by F.LABF.LAB Credential ©2024 : Looking The World of Experience by F.LAB
F.LAB Credential ©2024 : Looking The World of Experience by F.LAB
 
Unit 12 - Level Design and how it affects the player.
Unit 12 - Level Design and how it affects the player.Unit 12 - Level Design and how it affects the player.
Unit 12 - Level Design and how it affects the player.
 
ورشة الطريق إلى البيم ورشة الطريق إلى البيم
ورشة الطريق إلى البيم   ورشة الطريق إلى البيمورشة الطريق إلى البيم   ورشة الطريق إلى البيم
ورشة الطريق إلى البيم ورشة الطريق إلى البيم
 
Jackson Henry 24 Flock The Vote Shirt Jackson Henry 24 Flock The Vote Shirt
Jackson Henry 24 Flock The Vote Shirt  Jackson Henry 24 Flock The Vote ShirtJackson Henry 24 Flock The Vote Shirt  Jackson Henry 24 Flock The Vote Shirt
Jackson Henry 24 Flock The Vote Shirt Jackson Henry 24 Flock The Vote Shirt
 
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
 
Sign The Contract Big Boy Shirt Sign The Contract Big Boy Shirt
Sign The Contract Big Boy Shirt  Sign The Contract Big Boy ShirtSign The Contract Big Boy Shirt  Sign The Contract Big Boy Shirt
Sign The Contract Big Boy Shirt Sign The Contract Big Boy Shirt
 
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.
 
DesignKit IDEO Human-Centered Design course report
DesignKit IDEO Human-Centered Design course reportDesignKit IDEO Human-Centered Design course report
DesignKit IDEO Human-Centered Design course report
 
MIRAE (Branding & Identity) Explained.pdf
MIRAE (Branding & Identity) Explained.pdfMIRAE (Branding & Identity) Explained.pdf
MIRAE (Branding & Identity) Explained.pdf
 
second stories test a method kit for co creationnnnnnn
second stories test a method kit for co creationnnnnnnsecond stories test a method kit for co creationnnnnnn
second stories test a method kit for co creationnnnnnn
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
SHADES Explained (Branding & Packaging) .pdf
SHADES Explained (Branding & Packaging) .pdfSHADES Explained (Branding & Packaging) .pdf
SHADES Explained (Branding & Packaging) .pdf
 
Digi Pack for the impulse band coursework.pptx
Digi Pack for the impulse band coursework.pptxDigi Pack for the impulse band coursework.pptx
Digi Pack for the impulse band coursework.pptx
 
Strawberry Jams But My Glock Don't Shirt
Strawberry Jams But My Glock Don't ShirtStrawberry Jams But My Glock Don't Shirt
Strawberry Jams But My Glock Don't Shirt
 
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
 
Cayden Ingman's apparel design portfolio | Oregon State University|
Cayden Ingman's apparel design portfolio | Oregon State University|Cayden Ingman's apparel design portfolio | Oregon State University|
Cayden Ingman's apparel design portfolio | Oregon State University|
 

Designing better user interfaces

  • 1. Designing better user interfaces Fronteers, Rotterdam, February 15th, 2012
  • 2. I would like to give some context to this presentation. These slides are from a 35 minute presentation called Designing better user interfaces.
  • 3. Designing better user interfaces sets out to teach interface design by talking through concrete examples: what works, what doesn’t work. A good interface consists of a thousand details done right. This presentation is all about those details.
  • 4. Some slides only contain a few words or images so the slides don’t distract from what is being said. This “web” version contains sticky notes (like this one) that summarize what I talked about when displaying the slide during the original talk.
  • 5. 1 Introduction 10’ 2 User interface design examples 25’ 3 Q&A: throughout -
  • 7. My name is Johan Wolf or @wolfr_ on the internet
  • 8. I read stuff all day
  • 9. I like to play video games
  • 10. I love to write
  • 11. I run a little freelance design studio Wolf’s Little Store
  • 13. So this is my company’s website, ( http:// wolfslittlestore.be/ ) Under work you can see what I do: interface design, web design, branding and identity, HTML & CSS, photography and design for mobile devices. Companies evolve and this is actually a little bit outdated - I specifically want to focus more on the interface design part. The next website will reflect this :)
  • 14. The kind of design I do is interface design...
  • 15. It’s not about the “WOW!”
  • 16. I don’t really care too much for interactive presentations or branded games. While they have their right to exist as promotional material, it’s not the kind of work I want to spend my life doing.
  • 17. It’s about creating a great product
  • 18. 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.
  • 21. 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.
  • 22. A good user interface = A thousand details coming together
  • 23. A good interface is a thousand details coming together. The difference between a good interface and a great one is in all those details: the spelling of a word, the spacing between items, the colors used. There’s — literally — thousands of details that are important. Today I want to talk about a few of these details.
  • 25. This is a form I get to deal with every few days, it's the form to transfer money to other people from my bank.
  • 26. When you get to the part where you have to select a country, you get a country list with hundreds of options.
  • 27. Why not put Belgium as a default? Almost all transfers happen within Belgium. Another idea would be to list the most popular countries (Belgium, France, Germany, Holland) in an <optgroup> at the top.
  • 28. It might seem like a small thing, but it's one of those thousand details. Who sends money to the South Pole?!
  • 30. Talking about select boxes... anyone heard if this thing called dropkick.js?
  • 31. “ Creating custom dropdowns is usually a tedious process that requires a ton of extra setup time. Oftentimes lacking conveniences that native dropdowns have such as keyboard navigation. DropKick removes the tedium and lets you focus on making s@#t look good.”
  • 32. Good intentions: • Advance the web • Get rid of ugly dropdowns • Make something to fix 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.
  • 33. Unfortunately Only 80% done Unfortunately these kinds of projects are only 80% done to me.
  • 34. For example, the script doesn’t trigger the native select behavior on iOS. Custom Native
  • 35. • Close w/ escape key on desktop: does not work with Dropkick. • Type first letter to select option: does not work with Dropkick.
  • 36. A power user definitely wants to be able to type the first letter of a country: doesn’t work with Dropkick.
  • 37. In general you want your  <option>s to have sensible names, and not try to hack a system together when there is  <optgroup>
  • 38. By customizing your dropdowns you just: Worsened the site load time & Made your dropdown fit 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.
  • 39. If you do nothing, the end result is better.
  • 40. Custom is hard. People always forget things: Remember not being able to Remember not being able to use keyboard scroll in Flash sites? Yeah. nav because somebody decided to implement custom radio buttons and Remember not being able to checkboxes. Yeah. save an image from a Flash site? Yeah. Accessibility and screenreaders: I’m not even going to go there. It gets BAD.
  • 41. I often hit this iceberg when I stray from native controls. For example, Ajax interactions require more polish than basic web pages. Custom mobile menus require more polish than the built-in version. If the team doesn’t have the time to polish custom UI, it’s often better to stick to the boring native controls that work. Braden Kowitz, Designer at Google
  • 42. Custom is hard, and to me custom is really saying that you have more time to think about the behavior of a select box than Apple’s interaction design team. And that you have the dev power to fix it. On every platform out there. So sometimes you just have to be pragmatic if you’re building a product.
  • 43. But if nobody took any UI risk there would not be any innovation out there, so it depends on what you’re doing. This screenshot is from Al Gore’s Our Choice, in my opinion the best e-book there is on iPad, interaction design-wise that is.
  • 44. This was done by Mike Matas, Bret Victor and their team. Two names you should definitely remember if you’re into interface design.
  • 46. The Tapbots guys are famous for their custom interfaces. Their business is practically based on the fact that their apps are 100% custom.
  • 47. 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 first letter
  • 49. My friend asks me to get a coffee... I don’t know the place he suggests so I look it up. This site provides a Google maps embed, which is helpful. Now to get directions, I want to get the full Google maps website. Let’s walk through the steps on how to do this.
  • 50. I select the text... and copy it.
  • 51. I go to Google Maps Belgium...
  • 52. Search for the address there...
  • 53. Made a mistake there...
  • 57. All of this could be much easier.
  • 58. If the web developer had just left the code in there that supplies a link to the bigger version, I could have skipped at least 5 steps of the process.
  • 59. <iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.be/maps? f=d&amp;source=s_d&amp;saddr=Lange+Leemstraat +388,+Antwerpen&amp;daddr=Oever +18+2000+Antwerpen&amp;hl=nl&amp;geocode=FUpMDQMdy5BDACnPp 9V3F_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" ></iframe><br /><small><a href="http://maps.google.be/ maps?f=d&amp;source=embed&amp;saddr=Lange+Leemstraat +388,+Antwerpen&amp;daddr=Oever +18+2000+Antwerpen&amp;hl=nl&amp;geocode=FUpMDQMdy5BDACnPp 9V3F_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" style="color:#0000FF;text-align:left">Grotere kaart weergeven</a></small> In a sense Google made a bad choice here.
  • 60. scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.be/maps? f=d&amp;source=s_d&amp;saddr=Lange+Leemstraat +388,+Antwerpen&amp;daddr=Oever +18+2000+Antwerpen&amp;hl=nl&amp;geocode=FUpMDQMdy5BDACnPp 9V3F_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" ></iframe><br /><small><a href="http://maps.google.be/ maps?f=d&amp;source=embed&amp;saddr=Lange+Leemstraat +388,+Antwerpen&amp;daddr=Oever +18+2000+Antwerpen&amp;hl=nl&amp;geocode=FUpMDQMdy5BDACnPp 9V3F_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" style="color:#0000FF;text-align:left">Grotere kaart weergeven</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.
  • 61. Worth noting is that this problem is extra frustrating on a mobile device where you don’t really have a keyboard to quickly open a new tab and copy/paste text, every action is slower.
  • 63. 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.
  • 64. If I hit the link on mobile I’m taken directly to the Maps application.
  • 65. 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
  • 66. So what is the Maps scrollbar of death™ exactly? When scrolling on your mobile phone or tablet it all works fine, but as soon as your finger hits a google maps you start repositioning the map inside its container. http://joggink.com/2012/01/responsive- google-maps/
  • 67. 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
  • 69. The next example is very much a detail but something that tells me the UI designer really knew what he was doing. Look at the white arrow [to the left of the word Sponsored]
  • 70. Notice how when the shown image has a white background, the arrow still shows? That’s good design.
  • 71. Some guy did a study on readability of labels in Google Maps.
  • 72. If you zoom in you see that every label has a white outline/stroke.
  • 73. 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 Google's but also with better clustering of information. city labels are thicker, and you Unfortunately the article is offline. can't see maps' background details (roads, rivers, etc.) behind them. (...)” http://googlesystem.blogspot.com/2010/12/why-google-maps-labels-look-better.html
  • 74. Here’s an example of my own, this is a little part of a site I’m building about World War 1, unfortunately I can’t show the full design since it’s still in progress. Take a look at the “video” icon and you’ll see it uses the same outlining technique to make the icon visible on any background.
  • 75. If I had used a standard white icon it wouldn’t have been very visible on white.
  • 77. Lightboxes. I hate ‘em.
  • 78. This is a site of a friend of mine, he runs a cool coworking space in Antwerp. I take all my examples out of the real world so I’ll have to buy him a beer next time and apologize that I used his site as a “bad” example.
  • 79. If you click an image you get this “lightbox”. This one by Lokesh Dakar is used on many websites. It’s not a good implementation: to start with, it doesn’t really take any advantage of your screen size: if you have a giant screen the photo will still be small.
  • 80. Sucks on mobile... I have to swipe and drag to find the controls.
  • 81. The problem is not really about the lightbox “interaction” but about the quality of the implementation.
  • 82. I don’t want to diss the authors of these plugins, the web runs on open source and it’s a wonderful thing. Lightbox2 was written in a time before responsive webdesign and back in the day it was an adequate solution. These days, if you want to build something great, you’re going to have to do better than throw in a lightbox script from 5 years ago and call it done.
  • 83. 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 fill the screen
  • 84. A good image gallery implementation:
  • 85. Niko Caignie is an Antwerp based photographer. This is his portfolio album on Google+. I love how the photos take up the available space compared to the tiny thumbnails in most galleries.
  • 86. Here’s the same shot with a mazimized browser, notice we see more images, and they become bigger.
  • 87. This is a detail view, once again, super nice use of space.
  • 88. This has nothing to do with the presentation but because Niko was kind enough to let me use his photography as an example here’s a link to his google+ portfolio: https:// plus.google.com/photos/ 105216293260831528847/ albums/5625394812057179681 (this way you can also see for yourself why it’s a good implementation!)
  • 89. Recommendations • No animations between images • Clever progressive loading • Keyboard navigation • Make photos as big as possible (appropriate use of space)
  • 90. Video
  • 91. So let’s do something fun and let’s go watch a trailer at the Apple trailer site.
  • 92. We have a 27” screen so that is cool, we have megahighspeed internet, so let’s watch this baby in 720p.
  • 93. Say what? The video opens... in a box? Look at all this screen space NOT used for video.
  • 94. Mysteriously enough if I open up the video in Apple’s Safari there is a full screen button.
  • 95. 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
  • 96. The good YouTube. Always has the option to go fullscreen. Good responsive design: bigger screen, bigger video.
  • 98. What does this icon mean? A paper plane? Apparently it means “send”. There is not a lot of space on these screens so it’s natural to try and display functionality using only an icon but it surely can get confusing.
  • 99. Apple is guilty of the same design mistake... you could argue it’s a thing you have to learn, that the flyer means send.
  • 100. The iPhone uses a send label, this is pretty straightforward and for me the way to go. Language is one of the clearest interfaces.
  • 101. Same icons Anyone used the new Facebook app for iPhone? There’s two icons, they look the same...
  • 102. ...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.
  • 104. A standard way to go about spacing would be even: h1,  h2,  h3,  h4,  p  {  padding-­‐bottom:   12px;  }
  • 105. Consider that headings should be closer to the paragraphs they’re related to: h1,  h2,  h3,  h4  {  padding-­‐top:  12px;   padding-­‐bottom:  6px;  } p  {  padding-­‐bottom:  12px;  }
  • 106. Difference between left and right...very subtle but leads to better rhythm and a clearer relationship between a heading and the content following that heading.
  • 107. A good user interface = A thousand details coming together
  • 108. Care.
  • 109. To reach an epic quality level, you NEED to care about all of these details and more. A good interface designer is a pragmatic perfectionist. It’s not enough to just focus on the visual part, you need to focus on EVERYTHING.
  • 111. In the old days, when someone started to learn a craft, they would start off as an apprentice and go to different masters to educate themselves in their craft. Ideally every master was a bit different so the apprentice could learn from varied points of view and form his own. Eventually the apprentice would become a master of their domain. Applying this to modern UI design I believe a good UI designer should dip their toes in other jobs and fields like copywriting, backend development, photography, print design, business, marketing, front-end development and so much more.
  • 112. Thank you! Follow me: @wolfr_ on Twitter E-mail me: mail@wolfslittlestore.be Read the blog: wolfslittlestore.be/journal
  • 113. Follow me on Twitter Here’s the link: http://twitter.com/wolfr_
  • 114. 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
  • 115. Are you a talented UI designer? I’m always looking for people to work with. One of my goals is to become the go-to company when talking about UI design. Obviously I can’t do this alone. If you live in or around Antwerp, Get in touch: mail@wolfslittlestore.be
  • 116. Subscribe to the blog: Here’s the link: http://wolfslittlestore.be/journal/ Through RSS: http://feeds.feedburner.com/Wolfslittlestore
  • 117. 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
  • 118. Hire me. If you like what you’re seeing, I can apply my knowledge to your application too, or give this presentation for your company. Get in touch: mail@wolfslittlestore.be