On Responsiveness: the Perception of Speed in Web Applications
- 2:23 PM Jonathan Keebler - We’re getting underway in about 10 mins!
- 2:27 PM Keebler (Flickr) -

- 2:35 PM Jonathan Keebler - Starting now…
- 2:35 PM Jonathan Keebler - “We are creatures of perception” = we are easy to fool
- 2:36 PM Jonathan Keebler - Ppl perceive the web to be slow, and it is kinda slow. “The internet is a mess”
- 2:37 PM Jonathan Keebler - Web apps are slow, and he doesn’t deal with that. He deals with the perception of speed. Can build apps that feel blazing fast, we can fool them.
- 2:38 PM Jonathan Keebler - A web app that seems fast, should look fast. Clean lines. Make user-goals easy to reach. Helps if you know the goals for web-apps.
- 2:39 PM Jonathan Keebler - Example: TinyURL.com ugly sites feel slow
- 2:40 PM Jonathan Keebler - Example: Google vs. Yahoo compared side by side. Google feels fast; there’s a search box right there “BAM, search”. Yahoo has “all this extra stuff”; you can’t help but spend some time looking at it.
- 2:42 PM Jonathan Keebler - Photobucket vs. Flickr = roughly equal in traffic, reach (according to Alexa). Why do people use Photobucket (owned by Fox/MySpace)? Lots of visual distractions.
- 2:42 PM verneho - 3/4 of the room shares photos on a web app. nearly 100% of those people use Flickr. #meshu
- 2:43 PM Jonathan Keebler - Flickr: naked branding experience; kinda what you want. Just tell you want you should do step by step
- 2:43 PM Keebler (Flickr) -

- 2:44 PM verneho - Be clear on what the user’s next step should be. #meshu
- 2:44 PM Jonathan Keebler - Flickr: has a consistent grid, home page tells you everything you need to know (so this is a fast page)
- 2:45 PM Jonathan Keebler - Flickr layout and design = what makes it so successful.
- 2:45 PM Jonathan Keebler - Use a simple, bold layout to guide the eye to the task at hand.
- 2:46 PM Jonathan Keebler - Don’t make ppl work harder than they need to:
- minimize effort (e.g. text box already focussed on is.gd , keyboard shortcuts in Gmail “underappreciated”)
- 2:50 PM Jonathan Keebler - Example: www.tumblr.com bookmarklet – when you highlight text on a page, assumes you want to quote. If it guessed wrong, and you want to talk about a photo, they give you a link to see all the photos on a page.
- 2:52 PM Jonathan Keebler - Example: From his site dabbledb.com . On iPhone app it starts zoomed in, that’s what you probably would have wanted to do 1st anyhow. Scrolling on iPhone = high energy task. Links to top of page, etc. are faster than scrolling.
- 2:54 PM Jonathan Keebler - iPhone has caused a renaissance in UI design. Strip down apps to essentials.
- 2:55 PM Jonathan Keebler - Example: www.urbanspoon.com iphone app is nice and fast. Website offers too much information. Same actions that you can do on the phone (that take a second), aren’t as easy or quick.
- 2:56 PM Jonathan Keebler -

- 2:57 PM Jonathan Keebler - A lot of ppl don’t use bookmarks: they go to the home page, login, then click their way to what they want to find (even if they’ve gone their time and time again)
- 2:57 PM Jonathan Keebler - DabbleDB: let’s you define your own home page (where you’re taken when you login)
- 2:59 PM Jonathan Keebler - 2. Reduce the amount of physical action needed to get from point A to point B. Take that away if you can. Make each click count for as much as possible. Power-users will thank you for keyboard shortcuts
- 2:59 PM blindmonk - “Give customer some customization, like, allowing to define a home page after logging in” — sounds stupid & counter useable. #meshu
- 2:59 PM Jonathan Keebler - Speak when spoken to: provide immediate feedback. IRL when you are asked a question, you stroke your beard, look aside etc. In the web, when you asked that question it was like getting an unblinking stare back i.e. “Loading….”
- 3:01 PM Jonathan Keebler - In Web 2.0, spinners give you a guarantee that something is going to happen in the next few seconds. For longer questions, progress bars: ppl are already conditioned for this from Desktop apps (you know once it’s loaded, it will be fast – assurance things are happening, progressing). Spinners + progress bars = buy you time.
- 3:01 PM verneho - Provide immediate feedback when users perform actions on your site. #meshu
- 3:03 PM Jonathan Keebler - Example: Picnik’s loader gives funny sayings, etc. while loading = great distraction
- 3:04 PM Jonathan Keebler - Example: Facebook: making strides at feeling fast. e.g. when you click for the next photo in a series, they have preloaded the next photo so it loads almost instantly
- 3:06 PM Jonathan Keebler - Also on Facebook, search box responds almost instantly. Loads all the possibilities when you first click/focus on the textbox (doesn’t work in all scenarios, but works grea there)
- 3:07 PM Jonathan Keebler - Example: tumblr.com Adding tags, when you type a comma it makes the tag you just typed look different immediately. Makes Tumblr seem faster to him.
- 3:08 PM Jonathan Keebler - 3. Provide immediate feedback for every action a user takes. Eliminating common web delays makes your app seem like magic.
- 3:09 PM Jonathan Keebler - Building the perception of speed:
- simplify, brutally (e.g. DabbleDB has a power interface, and a simple one)
- 3:11 PM Jonathan Keebler - Grids/alignment: helps you find everything easily and quickly
- 3:11 PM Jonathan Keebler - kuler.adobe.com helps you pick colours. lots on the page but everything looks like it’s in it’s place, feels fast.
- 3:12 PM Jonathan Keebler - wufoo.com Feels faster because doesn’t have to spend time hunting for what he wants to do.
- 3:13 PM Jonathan Keebler - Simple, bold, clean = doesn’t have to come at the expense of branding
- 3:13 PM Jonathan Keebler - Grids reference sites
960.gs
www.subtraction.com
www.markboulton.co.uk
- 3:15 PM Jonathan Keebler - Designers can write code. Big fan of JQuery jquery.com. He’s not a programmer himself but he can do a lot of this stuff himself.
- 3:20 PM Jonathan Keebler - Uses jqueryui.com for interactions like script.aculo.us
- 3:20 PM Jonathan Keebler - QUESTIONS
- 3:22 PM Jonathan Keebler - When do you load a new page and when do you use the spinner? When you want someone to be able to bookmark the page, or changing the framework of the page.
- 3:23 PM Jonathan Keebler - Have you done user-testing at DabbleDB? No. Formal testing puts ppl in a “testing bubble”. If you let ppl use your products, you’ll hear from them if things are “slow”
- 3:26 PM Jonathan Keebler - Some ppl try out Dabble and just don’t get it. “We don’t really try to keep those ppl”, will cost them support time. Have been accused of going their own way e.g. they don’t use traditional database terminology. Didn’t use different terms to be different, just thought it was more obvious.
- 3:33 PM Jonathan Keebler - How closely do you work with developers? Very closely. Don’t tell them to optimize db queries, but will suggest that they don’t do things that will take a LONG time
- 3:35 PM Jonathan Keebler - Doesn’t think HTML should be done by designers. Leave it to the developers.
- 3:35 PM cyberguss - ratio of people twitting on macbook here at #MeshU is critical
– #mesh #mesh09 #meshu #meshu09
- 3:36 PM Jonathan Keebler - What do you do when you need a more complex app, more features? For Dabble, the cost of supporting a big business like that “would exceed our interest”; not something they’re interested in
- 3:37 PM Jonathan Keebler - Luke’s website attaboy.ca
- 3:38 PM Jonathan Keebler - END/APPLAUSE

Related Posts
This entry was posted
on Monday, April 6th, 2009 at 3:19 pm and is filed under On-the-Road.
You can follow any responses to this entry through the RSS 2.0 feed.
You can leave a response, or trackback from your own site.