IT’S ANOTHER Full-length Friday! In this 60-minute video caught live at AEA Boston, Luke Wroblewski (Mobile First) explores multi-device design from the top down (desktop to mobile) and bottom up (using mobile to expand what’s possible across all devices):
An Event Apart Atlanta has been three days of design, code, and content for people who make websites. If you couldn’t be with us, read Jeremy Keith’s write-ups of the Day 1 sessions and Luke Wroblewski’s write-ups of Days 1 and 2.
Follow today’s live action on A Feed Apart, the official aggregator of An Event Apart.
THE SEVENTH and final An Event Apart show of the year 2012—three days of forward thinking and inspiring insights on multi-device design, content strategy for mobile, the next CSS, and more—is now winding down at San Francisco’s Palace Hotel. The show may end, but the memories will linger … enhanced by digital artifacts like these:
- An Event Apart San Francisco 2012 – speakers and schedule
- A Feed Apart – official Tweetage from An Event Apart
- An Event Apart San Francisco – photos on Instagram
- An Event Apart San Francisco – photo set on Flickr
- Storify: Tweets from An Event Apart San Francisco 2012
- An Event Apart: What Clients Don’t Know – Luke Wroblewski’s notes on a presentation by Mike Monteiro. November 13, 2012
- An Event Apart: Buttons are a Hack – Luke Wroblewski’s notes on a presentation by Josh Clark. November 13, 2012
- An Event Apart: The (CSS) Future is Now – Luke Wroblewski’s notes on a presentation by Eric Meyer. November 13, 2012
- An Event Apart: Designing for Content Management Systems – Luke Wroblewski’s notes on a presentation by Jared Ponchot. November 13, 2012
- An Event Apart: Adaptive Web Content – Luke Wroblewski’s notes on a presentation by Karen McGrane. November 13, 2012
- An Event Apart: HTML5 APIs – Luke Wroblewski’s notes on a presentation by Jen Simmons. November 12, 2012
- An Event Apart: Style Tiles — Luke Wroblewski’s notes on a presentation by Samanatha Warren. November 12, 2012
HEY, FRIENDS. I write from the magical city of Chicago, where I’m enjoying the first Happy Cog Summit. Next week, following our meet-up cum strategy session cum karaoke party, comes An Event Apart Chicago, three days of peace, love, and web standards (plus more Chicago magic).
I won’t be writing here much while these events continue, but I’ve started a Chicago 2012 photo slide show for your pleasure, and will add to it as time and aesthetics permit. You can also stalk me via my new Foursquare Chicago list.
Once An Event Apart kicks in, starting Monday August 27, and until it ends Wednesday night, August 29, I’ll post links and notes here—and you can follow the hot tweet-by-tweet action on A Feed Apart, the official feed aggregator for An Event Apart. Yowee!
Registration is now open for:
- Atlanta – February 18-20, 2013
- Seattle – April 1-3, 2013
- San Diego – May 20-22, 2013
- Boston – June 24-26, 2013
- Washington, DC – August 5-7, 2013
- Chicago – August 26-28, 2013
- Austin – September 30-October 2, 2013
- San Francisco – December 9-11, 2013
Join us for three days of design, code, and content with fantastic designers, writers, and speakers including Josh Clark, Kim Goodwin, Erika Hall, Scott Jehl, Colleen Jones, Jeremy Keith, Ethan Marcotte, Karen McGrane, Mike Monteiro, Jason Santa Maria, Jen Simmons, Jared Spool, Jon Tan, Aarron Walter, and Luke Wroblewski — not to mention Eric Meyer and me.
“The Web Everywhere: Multi-Device Web Design,” a full-day workshop by Luke Wroblewski (Mobile First, A Book Apart 2012), follows each two-day conference event in all eight cities.
You can register for the one-day multi-device web design workshop, for the two-day conference, or save over $100 when you attend all three days! Tickets are now on sale, and are first-come, first-served. Every AEA show in the past three years has sold out in advance. Don’t miss out; register early.
FOLLOW THE ACTION at An Event Apart Austin – three days of design, code, and content for people who make websites, now taking place in Austin, TX.
Just the tweets.
“In his opening keynote at An Event Apart in Austin, TX 2012 Jeffrey Zeldman talked about the need to keep content front and center in websites and the web design process.” Enjoy Luke Wroblewski’s notes on my presentation, “Content First.”
“In her presentation at An Event Apart in Austin, TX 2012 Sarah Parmenter talked about the changes responsive web design requires of web designers.” Enjoy Luke Wroblewski’s notes from her talk on “Responsive Design Workflow.”
Jason Santa Maria “outlined the current state of web fonts and how to approach typography online.” Luke Wroblewski’s notes on the talk.
My notes on Luke Wroblewski’s AEA Austin presentation.
“In her Content Strategy Roadmap presentation at An Event Apart in Austin TX 2012 Kristina Halvorson talked about how to integrate content strategy into a typical web design workflow.” Enjoy Luke Wroblewski’s notes from her talk.
In this presentation, Ethan Marcotte walks through ways to tackle thorny issues in responsive design layouts, media, advertising, and more. Here are Luke Wroblewksi’s notes on the talk.
“With the explosion of web-enabled devices of all shapes and sizes, the practice of web design and development seems more complex than ever. But if we can learn to see below this overwhelming surface to the underlying web beneath, we can learn to make sites not for specific devices but for the people using them. This presentation will demonstrate how tried and tested principles like REST and progressive enhancement are more important than ever. By embracing the spirit of the web, you can ensure that your websites are backwards compatible and future friendly.” – Jeremy Keith
All the links from Andy Clarke’s amazing AEA Austin presentation.
“Andy Clarke talked about the changing processes in web design and shared a number of tools and techniques that can help designers make transition to a more modern workflow.” Luke Wroblewski’s notes from the talk.
At An Event Apart in Austin TX 2012, Aarron Walter shared why having a personality and story matters for companies. Notes by Luke Wroblewski.
Articles and books cited in the Aarron Walter talk; compiled by AW himself.
Enjoy the Flickr pool of photos from the three-day web design conference event now being held in Austin, TX.
Watch this space!
More to come.
Notes on Luke Wroblewski’s “Mobile To The Future” presentation today at An Event Apart Austin:
First there was print, then recordings, then cinema, radio, TV, and the internet. Mobile is the seventh and latest form of mass media. And the smartphone is the fastest spreading technology in history. More iPhones are activated every day than babies are born.
Can mobile do what print did? What recordings did? What cinema did? What radio did? What TV and the internet did? Yes, mobile can do all of it. It also has unique properties: always with you, always on, built-in payment mechanism, at point of inspiration, accurate audience, captures social context, augmented reality, digital interface to reality.
When new mass media comes out, we try to apply old thinking to it. We treated early TV like radio (sponsors, jingles, spokesmen, programs). Radio shows migrated whole to early TV (Abbott & Costello, Lone Ranger, etc.) It took many years to realize that TV was not radio. Likewise, we still have ingrained print characteristics impacting how we think about web and mobile. (Page/canvas, grid layouts, typography, graphical ads.) As many people will tell you — but not many people practice — the web is not print.
Mobile is not desktop. “Copy, extend, and finally, discovery of a new form. It takes a while to shelf old paradigms.” – Scott Jensen
Companies are discovering they can do more on mobile. People are 2x more likely to buy on mobile; 2.5x more likely to subscribe; 3x more likely to be engaged. Don’t just look at the *constraints* of mobile; look at the opportunities.
Outline of remainder of talk: What we know from the desktop web; how to adapt and optimize for mobile; ways to move forward.
Consider login. People do at least 15 authentications per day. 82% of people have forgotten a site password. 5%-10% of people trying to access Yahoo fail to log in (and request password). The number one problem at help desks is, “Help, I forgot my password.” Login is a ubiquitous, but broken, system. We have brought all the problems of desktop login to the mobile platform, where problems are magnified. On Amazon, they removed “I forgot my user ID or password” from login in a misguided effort to save space in small-screen mobile context. Result: 90% of their customer service calls were “I forgot my password.” Removing critical functionality is not a good way forward.
“Guest Checkout” is a popular feature on many commerce sites that increases conversion. You’d think this feature, which boosts conversions 30%, would be carried over to mobile. But Walmart.com omitted it. Instead they told the user to get a desktop computer(!). (Walmart.com has since updated its website to provide a more appropriate mobile experience.)
“Mobile must never be a dumbed-down, limited experience,” says Steven Hoober.
Don’t remove critical features!
Do get rid of autocomplete and autocapitalize on login and password inputs.
Do use input types (“type=password”) to facilitate sign-in. (Input types trigger appropriate keyboards in HTML5-capable browsers, e.g. Safari in iPhone, Chrome in Android.)
Do show passwords; password masking results in login failures and lost opportunities.
Show passwords by default. (Give people the option to “Hide password” in case they need it.)
Use Input Masks on login, e.g. start “user name” fields with an “@” symbol. On MobileMe, there was an “@me.com” input mask in the user email address input screen (since you needed an @me.com address to be able to sign in anyway).
Quora doesn’t ask for your password immediately; first it checks to make sure you’ve entered your email address correctly.
One-tap operation: the second time you visit Quora, you can enter simply by tapping your avatar picture.
Third-party credentials (“sign in with Facebook”) cause problems, because users don’t remember if they created an account or signed in with Twitter/Facebook. Bagcheck and Votizen use a pattern where you begin typing your name and a series of selects show up, allowing you to pick your name from the list. Once it knows your name, the app gives you the chance to log in via your internal account or a third-party apps.
Summary so far
Don’t remove critical features.
Use input types and attributes.
Show password by default.
If possible, save people’s passwords so they can log in with one click.
Next time the user signs up, let them enter by tapping their avatar.
These techniques don’t just benefit mobile users. They also benefit those who use desktop, tablet, and God knows what’s coming next.
New Windows phone / OS has photo sign-in. You make gestures on a photo; those gestures and their relationship to that photo become your new password. Gestural logins have astronomically more password combinations than traditional logins, thus being more secure, as well as more humane than traditional “name of a French king, your parents’ wedding anniversary” alphanumeric passwords.
Galaxy Nexus recognizes your face and smile to let you in. Going back to an alphanumeric password after using face recognition feels like stepping back five years into the past.
Can this work in the browser? We’d need Getusermedia API, access to local device multimedia streams, and more. (Not that yet.)
Hand and Fingerprint Recognition
Apple has patented finger ID. It not only knows your fingerprint, it knows which finger is down. Your sign-in could be a gang sign.
Make sure things lay out okay.
Take time to adapt.
Start to think differently (create new solutions).
Checkout – yesterday, today, tomorrow
75% of all shopping carts that got filled out were abandoned in 2011. (In 2010, it was 71%. We’re getting worse!)
Therefore, just moving your desktop experience to the mobile screen doesn’t make sense. (Dell requests your mobile number’s daytime fax number in mobile.)
Step 1 = REDUCE EFFORT. Get rid of stupid stuff that we ask people to do — stuff that gets in people’s way.
Expedia got $12M more in profit per year overnight by removing one needless field (“Company”) from their checkout process.
Consider using “Full Name” instead of First Name, Last Name, and Optional Middle Name fields (which don’t support international names very well anyway).
Dell’s 16 fields for phone number can be replaced with a single field: Daytime Phone Number. Hide irrelevant controls!
INPUT TYPE=TEL brings up a beautiful number pad, making it easy to add your phone number. After all, you are entering it on a phone! This works on Amazon Silk browser, on Android, on iPhone, etc.
Remove optional fields.
Keep people on the fields, remove needless fields.
“If you see lots of text in a form, that’s a usability problem. If the text is bold, it’s a bigger usability problem. If it’s bold and red, it’s an even bigger usability problem. Now you are all designers.” – Luke W
People make 3 purchases per second on mobile.
Luke showed a really slick, slimmed-down way to enter credit or debit card info (with just one field!).
Use “Continue” for terms of sale, instead of forcing people to accept or not accept the terms of service (since people often accidentally choose “do not accept,” thereby losing all the data they have entered … which causes them to leave without purchasing anything).
When selling digital content, your checkout form could be, “give us your email address,” use a single input to enter your credit or debit card, and go.
Amazon has 1-Click Buying with Amazon Prime. People go from spending $400 a year to spending $900 a year when they move to Amazon Prime. Reducing the barrier to buy radically increases volume.
On Amazon’s mobile site, when I buy a book, I can send it to my iPhone, my Kindle, or wherever I want.
Yet on Amazon’s Kindle app for iPhone, I can’t buy a product (because Amazon doesn’t want to pay Apple’s percentage).
Future of checkout: Local purchases – “Personal Pickup” at the Apple Store via iPhone.
When you walk into Apple Store after shopping via Personal Pickup, a store employee sees you on his/her iPhone and brings you your product when you walk in the door. This can also be done on the web (via Webworkers) but it’s not as seamless as in an app. (Web not quite there yet.)
Barcode scanning in mobile lets customers shop in the real world using their phones to scan and pay.
Self checkout at Apple lets you point your phone at a product, pay online, and walk out with the product without going to a cash register.
Dump the “start from desktop” mindset. Start from what mobile can do.
Mobile is a massive new mass medium.
Designing for it today forces us to adapt and optimize our solutions.
Designing for mobile moves us toward the future (but we need device APIs to make it work).
AT AN EVENT APART Boston, “Scott Jehl discussed ways we can improve web performance by qualifying capabilities and being smart about how assets are loaded in browsers [and] shared a … new tools he helped create that can help address these issues.”
Enjoy Luke Wroblewski’s notes on Scott’s talk.
TUESDAY, 3 APRIL 2012, was Day II of An Event Apart Seattle, a sold-out, three-day event for people who make websites. If you couldn’t be among us, never fear. The amazing Luke Wroblewski (who leads a day-long seminar on mobile web design today) took excellent notes throughout the day, and shares them herewith:
The (CSS) Future is Now – Eric Meyer
In his The Future is Now talk at An Event Apart in Seattle, WA 2012 Eric Meyer talked about some of the visual effects we can achieve with CSS today. Create shiny new visual elements with no images using progressive enhancement and CSS that is available in all modern browsers.
A Philosophy of Restraint
– Simon Collison
In his A Philosophy of Restraint talk at An Event Apart in Seattle, WA 2012 Simon Collison outlined his design philosophy and how he applies it to web projects. Embrace constraints; simplicity and complexity; design aesthetic; design systems as foundations that prepare us for future projects and complexity; affordances and type; focus and content; audit and pause — prevent catastrophic failures and shine a new light on what you’ve learned with each project.
Touch Events – Peter-Paul Koch (PPK)
In his Touch Events talk at An Event Apart in Seattle, WA 2012 Peter-Paul Koch talked about touch support in mobile browsers and how to handle touch events in web development. Includes a ranking of current mobile browsers; interaction modes in mobile versus desktop (mouse) and keyboard — how do we adjust scripts to work with touch?; touch events; supporting modes; event cascade; and “stick with click.”
Mobile to the Future – Luke Wroblewski
Alas, Luke could not take notes on his own presentation. Here’s what it was about: When something new comes along, it’s common for us to react with what we already know. Radio programming on TV, print design on web pages, and now web page design on mobile devices. But every medium ultimately needs unique thinking and design to reach its true potential. Through an in-depth look at several common web interactions, Luke outlined how to adapt existing desktop design solutions for mobile devices and how to use mobile to expand what’s possible across all devices.Instead of thinking about how to reformat your websites to fit mobile screens, attendees learned to see mobile as way to rethink the future of the web.
What’s Your Problem? – Whitney Hess
In her What’s Your Problem? Putting Purpose Back into Your Projects talk at An Event Apart in Seattle, WA 2012 Whitney Hess outlined the value of learning about opportunities directly from customers. Understand the problem before designing the solution. Ask why before you figure out how. There is no universal solution for all our projects, we need to determine which practices are “best” through our understanding of problems. Our reliance on best practices is creating a world of uniform websites that solve no one’s problem. Leave the desk and interact with people. Rather than the problem solver, be the person who can see the problem.
Properties of Intuitive Pages
– Jared Spool
At An Event Apart in Seattle WA 2012, Jared Spool walked through what makes a design intuitive, why some users need different treatment, and the role of design. Current versus acquired knowledge and how to bridge the gap (how to train users, thus making your site or app “intuitive”). Redesigns and how to avoid disaster. Design skills. The gap between current knowledge and target knowledge is where design happens. Why intuitive design is only possible in small, short iterations.
Day III begins in 90 minutes. See some of you there.
Photos: AEA Seattle Flickr pool or hashtags #aea and #aeasea on Instagram.