New mobile inputs are not just disruptive — They introduce completely new ways of doing things and totally new things to do.
Some designers will tell you not to use text inputs because people won’t type on a smartphone, but people send 4 billion SMS messages every day.
When people have something they want or need to do on their smartphone they will use text inputs if they have no other choice.
That said, avoid having people type any time you can, but don’t avoid text inputs when you can’t. Always encourage input, don’t limit it.
Think of people as one eyeball and one thumb when you design. Their partial attention requires a very focused design.
Think of a smartphone as a content creation device, not just a media consumption device. The most popular apps are content creation apps — Facebook, Twitter, Instagram, Draw Something.
Try to use the standard input types for mobile websites because they have been optimized for the operating system.
When you use standard input types, good things happen, because people already know how to use them. But don’t be afraid to go beyond the standard ones.
Try not to use select menus in Android if contents are longer than the screen because people may think their choice is limited to what is on the screen.
Try non-standard input types when there are too many taps, like the four required to use the select menu picker in iOS.
A stepper is easier than a picker if you have a small range (3 to 5) of numeric choices.
Only present input controls when people actually need them. Use progressive disclosure. Don’t hit them with everything up front in a long form.
Touch Target Size
Design for a physical size, not a pixel size, due to differences in screen resolution and pixel density. Apple, Android, and Microsoft have extensive documentation and recommendations.
Use a minimum spacing between tappable objects as recommended by the operating system developer.
Studies show that 80% to 90% of people are right handed, and that about 50% of left-handed people use their right hand to for their phone. Most apps can get away with being designed for right-handed users.
How to Make Input Less Error Prone
Use the correct keyboard version for email addresses, URLs, and numeric values like zip codes and credit card numbers. For mobile web this is supported by HTML5 input types.
Turn off auto-capitalize and auto-correct for login screens.
Use input masks to change people’s input to the correct format. For email addresses, use an input mask that puts @yourdomain.com at the end of whatever the user types and show the person this is what is happening.
Use smart defaults (for example, the no tax checkbox is selected by default on eBay mobile).
Top align field labels because of field zoom.
Don’t remove critical features, like password recovery, from a login screen.
Consider just showing the password instead of masking it as asterisks, or show it by default and give the user the option to hide it.
Apply the concept of “touch first” and only go to the keyboard when there is no other way to collect the information.
Mobile Web vs. Native Apps
It’s not about which is better, it’s about what’s right for the use context and business goals.
A mobile website has near universal reach; a native app is a much more richer experience (although HTML5 and jQuery Mobile are changing that rapidly).
Designers working on the mobile web should look at apps for examples of controls you could try on mobile websites. The creators of Android and iOS built new operating systems from the ground up so they have had to think about making controls better.
Many device features like geolocation and access to a device’s compass are now available to web browsers through APIs. Even greater access to a device’s hardware features is coming in the future.
Facebook and Twitter get half of their content from mobile devices, and half of Facebook’s mobile content is from the mobile web.
The more app usage occurs, the more mobile web use occurs, and vice versa. They both drive each other.
The more people engage with a brand through the mobile web or apps, the more they engage with the desktop experience. Recognize they are all part of a holistic experience.
Mobile Web Advantages
Cross-platform reach and near universal access with one code case.
Larger developer pool available.
You can update your app at any time and don’t have to wait for Apple App Store review or for people to download the app to get the latest features.
Native App Advantages
Deeper hardware access.
App sales and in app sales.
Integrated access with other locations like stores is easier (at least today).
Faster performance because much of the UI is already on the device.
Design From a Mobile Mindset
If you approach a checkout flow from a desktop perspective you’ll just get a shorter form.
If you approach it from a mobile mindset you’ll think about whether or not this person is in a physical store with a device that has a camera and can scan barcodes. Mobile devices can streamline the in-store checkout process.
Voice/Audio Input and Proximity Sensors
Android allows voice input to any form that allows text input.
Shazam and IntoNow use ambient sounds around a person as audio input.
If you put an iPhone next to your face during a call the proximity sensor hides the keypad so you don’t “cheek dial”.
With proximity sensors “every object in the world is now an input”.
Device Sensors for Input
Instapaper speeds up or slows down scrolling speed when you change the pitch of the device, allowing people read at their own pace without swiping.
Nearest Tube uses device motion, GPS, and the compass to show nearest London Underground station.
Google Goggles and FitBit are also examples of using hardware features as inputs.
The Android Galaxy Nexus, the first phone to come with Android 4.0 installed, uses facial recognition for its Face Unlock feature.
A proposed addition to the GetMediaUser API would open this to web browsers.
While Windows 8 is a desktop operating system, it allows people to create logins by logging custom gestures on lock screen images, for example drawing a line from a child to a pet on the picture. This is a very human solution to login problems. It’s like telling the computer “Hello, it’s me, let me in.”
Gestures for Input
Multiple finger gestures: two-finger drag moves an object, three-finger drag moves an entire pane in an app, four-finger drag moves the user between apps, and five-finger drag invokes operating system functions. However, these are emerging pattern, not universal rules.
Teach in context to help people learn how the app works when they need to know it, not in some large upfront tutorial (the Clear app does both).
Use content as navigation to remove as much chrome as possible.
This week I attended Rachel Hinman’s day-long workshop on The Mobile Frontier at the UX Immersion 2012 conference. The conference, a new gathering arranged by User Interface Enginnering, featured deep dives on mobile and agile development. Here are my notes:
There are Many Similarities Between Mobile and Desktop UX Design
Many of the tools and techniques we use are the same.
We need to learn what our users need and want.
But There are Also Differences
A phone is not a computer.
There is no sense of having windows or UI depth.
There is a smaller screen for user input and new inputs based on context and device sensors.
How a UX Designer Transitions to the Mobile Mindset
Buy a device and integrate it into your life.
Know the medium and become mindful.
Participate in the experience.
Brace yourself for a fast and crazy ride.
This is an emergent area of user experience so nothing we do will be constant for long.
Embrace ambiguity, it’s fun and exciting.
Context is complex but is essential to great mobile experiences
The mobile context is about understanding the relations between people, places, and things.
Relationships between people, places, and things are spatial, temporal, social, and semantic.
Designing for Contexts
Design for inattention and interruption.
The mobile use experience is snorkling, the desktop user experience is scuba diving.
Reduce cognitive load at every step in the experience.
Ideate in the wild — you can’t innovate in mobile from behind your monitor.
Ruthlessly edit content and features down to what’s essential.
It’s a good way to develop ruthless editing skills.
You can change a design quickly at little cost.
No expert skills needed.
The exercise helps designers new to mobile who do not yet know the heuristics and constraints of the medium.
It’s essential for mobile UX because the medium is so new.
If you are prototyping for a desktop app and a mobile app, allocate to mobile triple the amount of time you devout to the desktop.
Prototyping helps you fail early and fast.
Because a mobile experience is so contextual and personal, explore techniques like body storming and storyboarding.
Prototyping is a great way to fail when it matters (and costs) the least.
Desktop prototyping is a luxury, mobile prototyping is essential.
Graphical User Interface vs. Natural User Interface
We are at a pivotal moment in the design of user experiences — the NUI/GUI chasm.
A GUI features heavy chrome, icons, buttons, affordances; what you see is what you get.
A NUI features a little chrome as possible and is fluid so content can be the star.
As UX designers we need to work to eliminate chrome, not make the chrome beautiful.
Motion as a Design Element
Animations and transitions can teach users how the information unfolds (see Flipboard).
Motion brings fun to the party, and who doesn’t want to have fun.
I just finished reading the first book I’ve ever seen devoted exclusively to user experience design using Axure RP 6. Axure RP 6 Prototyping Essentials by Ezra Schwartz takes readers through project examples with step-by-step instructions for creating highly realistic interactive prototypes without writing a single line of code.
Unlike other prototyping books that address multiple tools, this one is focused solely on Axure.
Schwartz’s book introduces using Axure to create simple website wireframes and prototypes before moving on to more advanced topics like:
Using session-persistent variables in simulations
Using raised events
Conditional logic and behaviors
And much more
The book even addresses topics like simulating keyboard shortcuts for desktop applications through a technique that leverages hidden form fields. It is full of clever and well-illustrated examples.
There are also entire chapters on generating specification documents, using the team collaboration features of Shared Projects, and creating custom UI widgets for shared pattern libraries. There also is a brief section on prototyping for mobile devices (an area of functionality that has been improved in the recent Axure 6.5 Beta).
Axure RP 6 Prototyping Essentials also addresses important areas of the prototype planning process like object naming conventions and other things to consider if you are building highly interactive prototypes or working on a team project. While developers will understand why you need naming conventions for your objects, it’s not something UX designers usually think about, especially if they are more experienced with producing static wireframes. The coverage of pre-planning activities is extremely useful if you are new to Axure.
The book is available in both e-book and printed formats and is a great starting point if you have little to no familiarity with Axure. You’ll quickly see why Axure is one of the most widely used software tools for user experience design. A word of warning — it is helpful if you are familiar with the user centered design methodology and its focus on iterative designing and testing, which is discussed in the first chapter.
Whether your skill level with Axure is novice, intermediate, or advanced, you’ll find valuable techniques and best practices in Axure RP 6 Prototyping Essentials.
The beta version of Axure 6.5 was released recently and includes some great new features for mobile prototyping, especially simulating iOS apps.
Some features I’ve already explored:
A home screen icon for iOS can be imported into a project as a PNG
A splash screen that displays when your “app” first loads also can be imported
Full-screen display mode for prototypes launched from the home screen icon
Dynamic panels can now be “pinned” to the browser to allow simulation of a fixed tab bar with content that scrolls from underneath it
Black or translucent status bar
An iOS-style arrow button shape
Support for drag and drop
Left and right swipe events
Your prototype is still created as HTML and displayed in Mobile Safari but the full-screen mode allows you to simulate a native app’s appearance. To test your design on anyone’s iPhone or iPad just place the files on a publicly available web server or Dropbox and access them with the browser. You have to add the app to the home screen to get the icon on the device and launch in full-screen mode.
The biggest problem I’ve had with the beta is that scrolling actions can pull the simulation away the browser’s edges. This is not a real problem for a prototype being used for usability testing or requirements demonstration, but fixing it would make your simulations seem even more native (it also may be possible already and I just haven’t got it yet).
All in all the new version of Axure is pretty exciting. It’s fast become the best tool short of HTML coding for mobile prototypes.
To learn more about the new 6.5 beta consider attending the Chicago IxDA monthly chapter meeting on Wednesday at Critical Mass. I’ll be giving a short talk on Axure for mobile prototyping.
One of the immutable tenets of designing mobile user experiences is to respect (and protect) your users’ data. This means, among other things, saving form data as users move from screen to screen and eliminating the need for them to type the same information more than once.
Time Magazine either didn’t know or didn’t follow this tenet in the latest update to its iPhone app. When I launched the app for the first time after updating to version 2.2 I was shown an alert telling me that my customized settings had been reset and that I needed to redo them. To be honest, I don’t even recall what settings I may have customized (I download and explore a lot of apps and many, like this one, almost never get used after the first week). But I certainly wasn’t going to customize anything again if my settings could just be wiped out without a warning.
There are several reasons my settings may have been reset: a change to the underlying data structure that rendered them unusable, settings that I had customized had been removed, careless or rushed programming, or a simple bug that slipped through testing. If there was a legitimate reason, the app could have done a better job of letting me know why. While this may be a trivial matter for infrequent users, it could be a big deal to someone who uses the app regularly.
Sometimes apps have to change their business rules and functionality as they evolve. This is unavoidable. But app creators can manage these changes better if they start with a healthy respect for their users.
I’m always looking for a way to work smarter so I recently started using mind mapping as a note taking technique during user testing. I’ve found it superior to taking notes in a linear, chronological fashion because it allows use to organize your notes both topically and visually on the fly.
Mind mapping is a visual way of taking notes, capturing ideas, or arranging thoughts around a central idea. It has been around for several decades since it was popularized by Tony Buzan in his 1993 book The Mind Map Book, and has many uses beyond note taking.
Below is an example I created of a mind map for taking notes of observations from a user testing session. It was created with FreeMind 0.9.0, a free mind mapping tool for Mac and Windows. In addition to allowing you to visually organize notes, you can flag notes with icons with one click to mark task failures, successes, user comments, and other observations you want to quickly find later. This is a big time saver when you have notes from many sessions to digest.
Since trying this technique I have not gone back to note taking in a Word document or text file. Give it a try, you’ll be glad you did.
A recent discussion at work about how responsive web design could lead to brand consistency across platforms by repurposing and restyling shared content in a device-appropriate way got me thinking about how companies ensure common brand treatments in our multi-device world.
The theory underlying responsive design is that changes to stylesheets allow you to reuse your content on multiple devices, making it easier to maintain brand and stylistic consistency. For examples of this see the Media Queries site. Now there are plenty of usability issues with responsive design, such as pushing all your website content to mobile devices, but that’s outside the scope of this article.
So back to brand consistency across platforms. It’s not easy. But it’s also not an insurmountable task. And when I think about brands who maintain consistency across platforms and channels, Target immediately comes to mind as a best-of-class example.
Target’s recent redesign of its website introduced a bold new look for their main ecommerce property. At the same time, Target also launched a redesigned mobile website, iPhone and Android apps, and a promotional email template that strongly support the new look and feel. Once you are familiar with the Target brand, it’s clear where you are shopping no matter which platform you are using.
Target’s brand consistency is maintained with strict use of typography, layout, color, and icons. In a bold move, the famous Target logo is tucked behind the page header, a treatment also used on the mobile web, native apps, and email.
While the information design patterns for some parts of the experience are slightly different between the mobile web and apps, the brand treatment is fairly consistent.
Target has given the design community a great example of executing a brand in a consistent manner across various platforms, while still leaving room for the unique needs and constraints of each platform.
That was the message last week at the inaugural Sketchcamp Chicago conference. The one-day event, attended by about 75 UX architects, designers, and strategists, focused on tips and techniques for using sketching as a lightweight tool for user experience design.
In an exercise lead by Greg Nudelman, author of Designing Search: UX Strategies for eCommerce Success, participants were shown wireframes sketched on 3″ x 5″ Post-it notes of a search path on Amazon’s iPhone app. Nudelman then had us spend a few minutes sketching our own approaches, which included carousels, a scrollable gallery of images representing product categories, list drilldowns, and free text searches àla Google.
By the end of the exercise at least 7 different approaches were identified, showing that sketching allows for the quick expression of ideas without the encumbrances of tools like Omnigraffle or Visio. Attached to this post are Nudelman’s Amazon sketches and my take on using a carousel to represent product categories. My approach was far from optimal, but that illustrates the theme of the conference — sketching allows you to get ideas out of your head and into the world where they can be explored, refined, or discarded.
Another speaker discussed storyboarding as a way to communicate customer value to business stakeholders.
Digital and industrial designer Craighton Berman showed how he uses storyboards to illustrate user engagement and benefits in ways that a standard business plan cannot. The strength of storyboards is their ability to visually show how a product could benefit consumers in real-world situations and how well-designed products can create an emotional attachment for the people using them. Try communicating that in a spreadsheet. If a picture is worth a 1,000 words, a good storyboard may be worth 10,000.
Here are a few resources I’ve used for sketching user experience design:
One of the little-mentioned features in Apple’s new iOS 5 is the addition of Reader in Mobile Safari. Reader, which was introduced in desktop Safari last year, allows a user to click a button in the browser address bar to render a webpage in a user-friendly, text-only format.
Reader instantly turns mobile webpages that may be poorly designed or have small fonts into elegant and highly readable pages. All ads, photos, and graphics are stripped from the page. Reader also merges articles that may be spread across several pages on a mobile website into a single scrollable page. And as with all things Mac, the handling of typography is excellent.
Reader is based on technology licensed from Readability, which also created a bookmarklet version for desktop web browsers and is embedded in the Amazon Kindle and popular iPad applications like Flipboard and Reeder.
Below is an article from the Chicago Tribune using the normal Mobile Safari display and Reader. I know which one I’d rather read.