Episode 6: Mobile First

Designer Luke Wroblewski.

Update! Final audio and video are now available for your listening and viewing pleasure at 5by5.tv.

This Thursday, June 3, 2010, at 1:00 PM EDT, join Dan Benjamin and me for the taping of The Big Web Show Episode Six, as we chat with leading interaction designer Luke Wroblewski about designing for the mobile space, and learn why the mobile experience for a web application or site should be designed before the PC version.

Designing for 700 million people

Luke Wroblewski is an internationally recognized digital product design leader who has designed or contributed to software used by more than 700 million people worldwide. He is the author of Web Form Design (“That rare book capable of transforming the way an entire field does its business.”—Communication Arts) and Functioning Form, and an extremely popular speaker at leading web design conferences. After long stints as Chief Design Architect at Yahoo! and Lead User Interface Designer of eBay Inc.’s platform team, he is currently Chief Design Officer and co-founder of a stealth start-up.

Watch, Listen, Participate

Participate in the live taping by sharing your questions for Luke via chatroom or phone.

Soon after taping, video and audio versions of the Episode 6 podcast will be posted in the iTunes store and on our website and announced here and via Twitter. (The complete schedule of 5by5 podcasts is available for your pleasure.)

The Big Web Show

5by5 is an Internet broadcasting network, home to podcasts like The Pipeline, The Big Web Show, The Conversation, The Dev Show, and more, with over 120,000 downloads per week. The Big Web Show features special guests and topics like the future of publishing, art direction online, content strategy, web fonts and typography, CMS shootouts, HTML5 and CSS3, building an audience, and more. Previous episodes are available for your listening and viewing pleasure.


Like Buttons Falling From the Sky

CNN announces what you should know about Facebook’s changes:

Buttons with the word “like” and a thumbs-up icon on them are going to start popping up all over the Internet [web]. By clicking one, you indicate that you find the content interesting, relevant or helpful. Basically, you would recommend it to a friend.

Before Wednesday, “like” buttons only were on Facebook. Now, they’ll be all over the place… When you click one, you post the item — whether it’s a blog post, photo or celebrity web page — to your Facebook news feed.

So how will this differ from what we have currently? For instance, how will it differ from things like the Retweet button and the social toolbar (featuring buttons for Tumblr, Facebook, Digg, and so on) found at the bottom of this post and on millions of other websites?

It will differ in three ways:

  1. The “like” button differs from a Facebook button in that it isn’t a gateway to the Facebook website; it’s a piece of the Facebook website stuck on other sites. Conceptually, this makes those sites “pages on Facebook,” and makes Facebook a dominant platform.
  2. Unlike with ordinary social buttons, you won’t have to enter a user name and password. If you’ve used Facebook recently, you’ll be able to click the “like” button on Joe’s website and have it show up in your Facebook news feed—no further action required. Again, the concept is that every site on the web is merely a page or section on Facebook; that Facebook, instead of a walled garden hidden from the web, is now the firmament on which the rest of the web rests.
  3. Finally—and here’s the part that freaks some people out—your friends’ faces will show up on websites where they’ve clicked the “like” button. Think about that. You’re on Joe’s website. You see your wife’s, girlfriend’s, and minister’s faces smiling at you from Joe’s website. The people who matter to you, and who you thought you had compartmentalized in the privacy of Facebook, a non-public-facing, password-protected website, are now out in the open. (Of course, they are out in the open to you. Achmed will see his friends, not yours. Still.)

So what will this Facebook’s redefinition mean, ultimately? No clue. But most of us, if we think about it, have seen Big Things like this come and go on the web. Remember when every third website required Microsoft Passport to unlock features or let you log in? And Mac and Linux users were angry, because the web is supposed to be an open platform, not a dominant vendor’s sandbox? Remember? Probably not. It was quite a big deal at the time, but almost nobody thinks about it now.

Just saying.


Design Lessons from iPad

Comparison of iMac and iPad screens at informationarchitects.jp.

It’s only Wednesday but we already have our link of the week. Although they call it merely a “quick write-up” (and it is a fast read), iA’s mini-compendium of design insights before and after the appearance of the iPad at their office should be required reading for all web, app, and/or interaction designers.

In the equivalent of a breathlessly quick seminar presentation, iA discusses typographic resolution and feel; the effect of the device’s brilliant contrast on readability; the kitsch produced by rigorously adhering to Apple’s “make it 3D” guidelines; whether metaphors work; and more—all of it well worth far more than the little time it will take you to absorb.

In particular, I call your attention to the section entitled, “Interaction Design: So What Works?” Although intended as a guideline to producing well-tuned iPad apps, it also works splendidly as a mini-guide to creating better websites, much like Luke Wroblewski’s brilliant “Mobile First” presentation at last week’s An Event Apart, which carried a similar message:

  1. The limited screen estate and the limited credit on the number of physical actions needed to complete one task (don’t make me swipe and touch too often), pushes the designer to create a dead simple information architecture and an elaborate an interaction design pattern with a minimal number of actions. This goes hand in hand with the economic rule of user interaction design: Minimize input, maximize output.
  2. Since the smallest touch point for each operation is a circle of the size of a male index finger tip, we cannot cram thousands of features (or ads!) in the tight frame; we have to focus on the essential elements. Don’t waste screen estate and user attention on processing secondary functions.
  3. We found that the iPad applications we designed, made it relatively easy to be translated back into websites. The iPad could prove to be a wonderful blue print to design web sites and applications. If it works on the iPad, with a few tweaks, it will work on a laptop.

Via iA » Designing for iPad: Reality Check.