designing better user interfaces
TRANSCRIPT
![Page 1: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/1.jpg)
Designing betteruser interfaces
Fronteers, Rotterdam, February 15th, 2012
![Page 2: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/2.jpg)
I would like to give some context to this presentation. These slides are from a 35 minute presentation called Designing better user interfaces.
![Page 3: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/3.jpg)
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.
![Page 4: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/4.jpg)
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.
![Page 5: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/5.jpg)
IntroductionUser interface design examplesQ&A: throughout
10’25’
-
123
![Page 6: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/6.jpg)
Introduction
![Page 7: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/7.jpg)
My name is JohanWolf or @wolfr_ on the internet
![Page 8: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/8.jpg)
I read stuff all day
![Page 9: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/9.jpg)
I like to play video games
![Page 10: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/10.jpg)
I love to write
![Page 11: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/11.jpg)
I run a little freelance design studio
Wolf’s Little Store
![Page 12: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/12.jpg)
![Page 13: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/13.jpg)
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 :)
![Page 14: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/14.jpg)
The kind of design I do is interface design...
![Page 15: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/15.jpg)
It’s not about the “WOW!”
![Page 16: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/16.jpg)
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.
![Page 17: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/17.jpg)
It’s about creating a great product
![Page 18: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/18.jpg)
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.
![Page 19: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/19.jpg)
Avoiding this...
![Page 20: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/20.jpg)
You’ve got the power
![Page 21: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/21.jpg)
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.
![Page 22: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/22.jpg)
A thousand details coming togetherA good user interface =
![Page 23: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/23.jpg)
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.
![Page 24: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/24.jpg)
Good defaults
![Page 25: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/25.jpg)
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.
![Page 26: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/26.jpg)
When you get to the part where you have to select a country, you get a country list with hundreds of options.
![Page 27: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/27.jpg)
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.
![Page 28: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/28.jpg)
It might seem like a small thing, but it's one of those thousand details.
Who sends money to the South Pole?!
![Page 29: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/29.jpg)
Custom select boxes
![Page 30: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/30.jpg)
Talking about select boxes... anyone heard if this thing called dropkick.js?
![Page 31: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/31.jpg)
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.”
“
![Page 32: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/32.jpg)
• Advance the web• Get rid of ugly dropdowns• Make something to fix a problem = a beautiful thing
Good intentions:
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.
![Page 33: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/33.jpg)
Unfortunately
Only 80% done
Unfortunately these kinds of projects are only 80% done to me.
![Page 34: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/34.jpg)
Custom Native
For example, the script doesn’t trigger the native select behavior on iOS.
![Page 35: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/35.jpg)
• Close w/ escape key on desktop:does not work with Dropkick.
• Type first letter to select option: does not work with Dropkick.
![Page 36: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/36.jpg)
A power user definitely wants to be able to type the first letter of a country: doesn’t work with Dropkick.
![Page 37: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/37.jpg)
In general you want your <option>s to have sensible names, and not try to hack a system together when there is <optgroup>
![Page 38: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/38.jpg)
By customizing your dropdowns you just:
Provided a worse experience on mobile
Provided a worse desktop experience for power users
Worsened the site load time & rendering time
Made your dropdown fit within the design
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.
![Page 39: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/39.jpg)
If you do nothing, the end result is better.
![Page 40: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/40.jpg)
People always forget things:
Remember not being able to scroll in Flash sites? Yeah.
Remember not being able to use keyboard nav because somebody decided to implement custom radio buttons and checkboxes. Yeah.
Accessibility and screenreaders: I’m not even going to go there. It gets BAD.
Remember not being able to save an image from a Flash site? Yeah.
Custom is hard.
![Page 41: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/41.jpg)
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
![Page 42: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/42.jpg)
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.
![Page 43: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/43.jpg)
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.
![Page 44: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/44.jpg)
This was done by Mike Matas, Bret Victor and their team. Two names you should definitely remember if you’re into interface design.
![Page 45: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/45.jpg)
![Page 46: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/46.jpg)
The Tapbots guys are famous for their custom interfaces. Their business is practically based on the fact that their apps are 100% custom.
![Page 47: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/47.jpg)
• 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
Recommendations
![Page 48: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/48.jpg)
Map embedding
![Page 49: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/49.jpg)
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.
![Page 50: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/50.jpg)
I select the text... and copy it.
![Page 51: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/51.jpg)
I go to Google Maps Belgium...
![Page 52: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/52.jpg)
Search for the address there...
![Page 53: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/53.jpg)
Made a mistake there...
![Page 54: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/54.jpg)
Let’s fix the input.
![Page 55: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/55.jpg)
Getting somewhere...
![Page 56: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/56.jpg)
Found!
![Page 57: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/57.jpg)
All of this could be much easier.
![Page 58: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/58.jpg)
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.
![Page 59: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/59.jpg)
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.be/maps?f=d&source=s_d&saddr=Lange+Leemstraat+388,+Antwerpen&daddr=Oever+18+2000+Antwerpen&hl=nl&geocode=FUpMDQMdy5BDACnPp9V3F_fDRzGKem7xhtvLfQ%3BFRuFDQMd3RRDACn3LZoO9PbDRzH6wBiCH7Hl1A&aq=0&sll=51.217691,4.396253&sspn=0.008817,0.016222&vpsrc=0&mra=ls&ie=UTF8&t=m&z=14&output=embed"></iframe><br /><small><a href="http://maps.google.be/maps?f=d&source=embed&saddr=Lange+Leemstraat+388,+Antwerpen&daddr=Oever+18+2000+Antwerpen&hl=nl&geocode=FUpMDQMdy5BDACnPp9V3F_fDRzGKem7xhtvLfQ%3BFRuFDQMd3RRDACn3LZoO9PbDRzH6wBiCH7Hl1A&aq=0&sll=51.217691,4.396253&sspn=0.008817,0.016222&vpsrc=0&mra=ls&ie=UTF8&t=m&z=14" style="color:#0000FF;text-align:left">Grotere kaart weergeven</a></small> In a sense Google made a bad choice here.
![Page 60: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/60.jpg)
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.be/maps?f=d&source=s_d&saddr=Lange+Leemstraat+388,+Antwerpen&daddr=Oever+18+2000+Antwerpen&hl=nl&geocode=FUpMDQMdy5BDACnPp9V3F_fDRzGKem7xhtvLfQ%3BFRuFDQMd3RRDACn3LZoO9PbDRzH6wBiCH7Hl1A&aq=0&sll=51.217691,4.396253&sspn=0.008817,0.016222&vpsrc=0&mra=ls&ie=UTF8&t=m&z=14&output=embed"></iframe><br /><small><a href="http://maps.google.be/maps?f=d&source=embed&saddr=Lange+Leemstraat+388,+Antwerpen&daddr=Oever+18+2000+Antwerpen&hl=nl&geocode=FUpMDQMdy5BDACnPp9V3F_fDRzGKem7xhtvLfQ%3BFRuFDQMd3RRDACn3LZoO9PbDRzH6wBiCH7Hl1A&aq=0&sll=51.217691,4.396253&sspn=0.008817,0.016222&vpsrc=0&mra=ls&ie=UTF8&t=m&z=14" style="color:#0000FF;text-align:left">Grotere 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.
![Page 61: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/61.jpg)
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.
![Page 62: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/62.jpg)
Map embeds:A simple solution
![Page 63: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/63.jpg)
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.
![Page 64: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/64.jpg)
If I hit the link on mobile I’m taken directly to the Maps application.
![Page 65: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/65.jpg)
• 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
Advantages
![Page 66: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/66.jpg)
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/
![Page 67: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/67.jpg)
• 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
Recommendations
![Page 68: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/68.jpg)
Outlines
![Page 69: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/69.jpg)
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]
![Page 70: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/70.jpg)
Notice how when the shown image has a white background, the arrow still shows? That’s good design.
![Page 71: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/71.jpg)
Some guy did a study on readability of labels in Google Maps.
![Page 72: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/72.jpg)
If you zoom in you see that every label has a white outline/stroke.
![Page 73: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/73.jpg)
The white outlines of Google's city labels are thicker, and you can't see maps' background details (roads, rivers, etc.) behind them. (...)”http://googlesystem.blogspot.com/2010/12/why-google-maps-labels-look-better.html
“
He compared Yahoo!, Bing and Google maps and found Google maps to the most legible. This had to with the aforementioned outlines but also with better clustering of information.
Unfortunately the article is offline.
![Page 74: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/74.jpg)
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.
![Page 75: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/75.jpg)
If I had used a standard white icon it wouldn’t have been very visible on white.
![Page 76: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/76.jpg)
Image galleries
![Page 77: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/77.jpg)
Lightboxes.I hate ‘em.
![Page 78: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/78.jpg)
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.
![Page 79: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/79.jpg)
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.
![Page 80: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/80.jpg)
Sucks on mobile... I have to swipe and drag to find the controls.
![Page 81: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/81.jpg)
The problem is not really about the lightbox “interaction” but about the quality of the implementation.
![Page 82: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/82.jpg)
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.
![Page 83: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/83.jpg)
• 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
Lightbox2:
![Page 84: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/84.jpg)
A good image gallery implementation:
![Page 85: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/85.jpg)
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.
![Page 86: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/86.jpg)
Here’s the same shot with a mazimized browser, notice we see more images, and they become bigger.
![Page 87: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/87.jpg)
This is a detail view, once again, super nice use of space.
![Page 88: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/88.jpg)
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!)
![Page 89: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/89.jpg)
• No animations between images
• Clever progressive loading
• Keyboard navigation
• Make photos as big as possible(appropriate use of space)
Recommendations
![Page 90: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/90.jpg)
Video
![Page 91: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/91.jpg)
So let’s do something fun and let’s go watch a trailer at the Apple trailer site.
![Page 92: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/92.jpg)
We have a 27” screen so that is cool, we have megahighspeed internet, so let’s watch this baby in 720p.
![Page 93: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/93.jpg)
Say what? The video opens... in a box? Look at all this screen space NOT used for video.
![Page 94: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/94.jpg)
Mysteriously enough if I open up the video in Apple’s Safari there is a full screen button.
![Page 95: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/95.jpg)
• 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
Apple should know better
The user experience suffers
![Page 96: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/96.jpg)
YouTube. Always has the option to go fullscreen. Good responsive design: bigger screen, bigger video.
The good
![Page 97: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/97.jpg)
Clear iconography
![Page 98: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/98.jpg)
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.
![Page 99: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/99.jpg)
Apple is guilty of the same design mistake... you could argue it’s a thing you have to learn, that the flyer means send.
![Page 100: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/100.jpg)
The iPhone uses a send label, this is pretty straightforward and for me the way to go. Language is one of the clearest interfaces.
![Page 101: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/101.jpg)
Same icons
Anyone used the new Facebook app for iPhone? There’s two icons, they look the same...
![Page 102: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/102.jpg)
...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.
![Page 103: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/103.jpg)
Relationshipheading/paragraph
![Page 104: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/104.jpg)
A standard way to go about spacing would be even:
h1, h2, h3, h4, p { padding-‐bottom: 12px; }
![Page 105: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/105.jpg)
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; }
![Page 106: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/106.jpg)
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.
![Page 107: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/107.jpg)
A thousand details coming togetherA good user interface =
![Page 108: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/108.jpg)
Care.
![Page 109: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/109.jpg)
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.
![Page 110: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/110.jpg)
Craftsmanship.
![Page 111: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/111.jpg)
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.
![Page 112: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/112.jpg)
Thank you!
Follow me: @wolfr_ on TwitterE-mail me: [email protected]
Read the blog: wolfslittlestore.be/journal
![Page 113: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/113.jpg)
Follow me on TwitterHere’s the link:
http://twitter.com/wolfr_
![Page 114: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/114.jpg)
Check out my previous presentation Design for Developers. You can view it here: http://www.slideshare.net/Wolfr/design-for-
developersonlineversionlong
If you liked this presentation
![Page 115: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/115.jpg)
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: [email protected]
Are you a talented UI designer?
![Page 116: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/116.jpg)
Subscribe to the blog:Here’s the link:
http://wolfslittlestore.be/journal/
Through RSS:http://feeds.feedburner.com/Wolfslittlestore
![Page 117: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/117.jpg)
Resources
Books you should readDefensive Design for the Web: How to improve error messages, help, forms, and other crisis points by Jason Fried & Matthew Linderman
Designing Web Usability by Jakob Nielsen
Don’t make me think! by Steve Krug
Designing the obvious by Robert Hoekman Jr.
Designing for interaction by Dan Saffer
Getting Real by 37signals http://gettingreal.37signals.com/
Web content mentioned in this talkhttp://marketingland.com/review-galaxy-nexus-android-4-phone-1409
http://joggink.com/2012/01/responsive-google-maps/
Web content around the subjecthttp://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/
![Page 118: Designing better user interfaces](https://reader033.vdocument.in/reader033/viewer/2022052705/58f9aa2d760da3da068b7651/html5/thumbnails/118.jpg)
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:[email protected]