TOUCH introduces physicality to designs that were once strictly virtual, and puts forth a new test: How does this design feel in the hand? Josh Clark’s new book, Designing For Touch, guides designers through this new touchscreen frontier, and is the launchpad for today’s Big Web Show conversation.
In a fast-paced, freewheeling conversation, Josh and I discuss why game designers are some of our most talented and inspiring interaction designers; the economy of motion; perceptions of value when viewing objects on touchscreen versus desktop computer; teaching digital designers to think like industrial designers (and vice-versa); long press versus force touch; how and when to make gestures discoverable; and much more.
Sponsored by DreamHost and BrainTree. Big Web Show listeners can save 15% when ordering Designing For Touch at abookapart.com with discount code DFTBIGWEB. Discount valid through the end of January 2016.
AN EVENT APART Chicago—a photo set on Flickr. Pictures of the city and the conference for people who make websites.
Notes from An Event Apart Chicago 2013—Luke Wroblewski’s note-taking is legendary. Here are his notes on seven of the ten presentations at this year’s An Event Apart Chicago.
An Event Apart Chicago—sessions, schedule, and speaker bios for the conference that just ended.
AEA Chicago 2013 on Lanyrd—three days of design, code, and content on the social sharing platform for conferences.
THE NEXT AEA event takes place in Austin and is already sold out (although a few spaces are still available for the full-day workshop on multi-device design).
A handful of seats are available for the final event of the year, An Event Apart San Francisco at the Palace Hotel, December 9–11, 2013. Be there or be square.
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):
In A List Apart Issue No. 367, Peter-Paul Koch, Lyza Danger Gardner, Luke Wroblewski, and Stephanie Rieger explain why Apple’s new iPad Mini creates a vexing situation for designers and developers who create flexible, multi-device experiences.
Each week, new devices appear with varying screen sizes, pixel densities, input types, and more. As developers and designers, we agree to use standards to mark up, style, and program what we create. Browser makers in turn agree to support those standards and set defaults appropriately, so we can hold up our end of the deal. This agreement has never been more important.
That’s why it hurts when a device or browser maker does something that goes against our agreement—especially when they’re a visible and trusted friend of the web like Apple. Read Vexing Viewports and contribute to the discussion.
This issue of the magazine also marks the departure of Jason Santa Maria as creative director after seven years of brilliant design and support.
Jason’s elegant redesign of A List Apart and its brand in 2005, together with the master stroke of bringing in Kevin Cornell as illustrator, brought the magazine new fame, new readers, and new respect. Over seven great years, his attention to detail, lack of pretension, and cheerful, can-do attitude has made working on ALA a pleasure. Jason was also a key member of the strategic team that envisioned ALA’s upcoming content expansion—about which, more will be revealed when the site relaunches in January.
Jason will continue at ALA as a contributing writer and as designer of A Book Apart (“brief books for people who make websites”), of which he is also a co-founder.
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.
Touch Gestures
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.
Facial Recognition
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.
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.
Checkout optimization
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.
Summary
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).
ISSUE NO. 346 of A List Apart for people who make websites is all about massively mobile progressive enhancement. Are your site’s content and design future friendly?
It is time to move toward a future-friendly web. Our current device landscape is a plethora of desktops, laptops, netbooks, tablets, feature phones, smartphones, and more, but this is just the beginning. The rapid pace of technological change is accelerating, and our current processes, standards, and infrastructure are quickly reaching their breaking points. How can we deal with increasing device diversity and decreasing attention spans? Brad Frost of futurefriend.ly explains how, while this era of ubiquitous connectivity creates new challenges, it also creates tremendous opportunities to reach people wherever they may be.
The web as we know and build it has primarily been accessed from the desktop. That is about to change. The ITU predicts that in the next 18–24 months, mobile devices will overtake PCs as the most popular way to access the web. If these predictions come true, very soon the web—and its users—will be mostly mobile. Even designers who embrace this change can find it confusing. One problem is that we still consider the mobile web a separate thing. Stephanie Rieger of futurefriend.ly and the W3C presents principles to understand and design for a new normal, in which users are channel agnostic, devices are plentiful, standards are fleeting, mobile use doesn’t necessarily mean “hide the desktop version,” and every byte counts.
AUTHOR KRISTOFER LAYON (@klayon) joins me to discuss his book, Mobilizing Web Sites: Strategies for Mobile Web Implementation in Episode No. 62 of The Big Web Show, my weekly podcast on “everything web that matters.”
In a lively hour-long discussion, we learn why “standards-based layouts are already responsive;” discuss the Kano Model and how it helps designers create satisfying mobile experiences; talk about Kris’s road from teacher and developer to conference founder to Peachpit author; and much more.
Subscribe to The Big Web Show
The Big Web Show features special guests and topics like web publishing, art direction, content strategy, typography, web technology, and more.
ONE of the most frequent questions we get asked about the mobile web is ‘Where do I go to learn about all this stuff?’ So here’s an extensive list of helpful tools and resources that can help you create great mobile web experiences.”
FROM A LUKE Wroblewski-led mobile workshop currently in progress at An Event Apart San Francisco:
There are more mobile devices than there are people in the world.
1.3 billion mobile page views a year.
Facebook says a few years form now “almost everyone at Facebook will focus exclusively on mobile.”
1 in 10 mobile smartphones are iPhones. But one iPhone is responsible for twice the traffic of an Android phone (its nearest competitor).
27% of all Yelp usage currently comes from mobile.
Web vs. Native: Facebook has 350 Million mobile users. 50% of that access is via the web. The other 50% is native (all platforms). All native apps put together equal the same usage as web.
“People will do stuff on the closest screen near them that is good enough.”
50% of Africa and Asia only access the internet on mobile.
“Clinging to desktop experience and ignoring mobile is like a record company clinging to CDs while digital passes them by.” Luke W.
An entire generation of people starting to use the internet on mobile in Asia, Africa, etc. Kenya 20% of GDP happens on mobile devices. Mobile phones will overtake desktops as the most common web access devices worldwide by 2013.
And why mobile web (vs. native)?
Rapidly growing “real” businesses.
Access across multiple platforms and without apps.
WE ARE THRILLED to present the two newest volumes from A Book Apart (“brief books for people who make websites”):
Make your users fall in love with your site or application via the precepts packed into Aarron Walter’s new Designing for Emotion. From classic psychology to case studies, highbrow concepts to common sense, DfE demonstrates accessible strategies and memorable methods to help you make a human connection through design.
Learn data-driven techniques that will make you a master of mobile with Mobile First. Former Yahoo! design architect and co-creator of Bagcheck, Luke Wroblewski knows more about mobile experience than the rest of us, and packs all he knows into this entertaining, to-the-point guidebook.
For a limited time, save 15% when you buy both together!
THE ORGANIZATION OF MOBILE web experiences must align with how people use their mobile devices and why; emphasize content over navigation; provide relevant options for exploration and pivoting; maintain clarity and focus; and align with mobile behaviors. In this excerpt from his brand new A Book Apart book, Luke Wroblewski explains how.
HERE IS a fine collection of articles, frameworks, and other tools for a “mobile first” approach to (mainly responsive) web design. Well done, Mr Haidara. The Multi-Size Web: a Computing bag by Eric Haidara at Bagcheck.
