My 20-minute talk was on The Touchable Desktop – When Responsive Won’t Fly. It looked at design considerations for websites targeting desktop computers and tablets when responsive web design is not an option. Here are my slides:
Here are some additional resources to help you when designing for tablets and touchscreens:
I recently experienced firsthand the power of flexible prototyping — and it is powerful.
I was doing in-lab, moderated usability testing of a mobile website experience and had reached that point where after a few participants you know you have a problem and the team wants to test a new solution. Our team’s visual designer — also a rock star front-end coder — offered to cook up a new prototype mixing the UI elements from the current site that tested well with participants with some design elements from our prototype that also seemed to be testing well.
The prototype in question was coded in HTML5 and jQuery, running on iPhones and Androids off Dropbox. After about 30 minutes, he came back to the observation room to say the new prototype was ready to go.
Because we were at the last test session of the day, we could only test the new design with one participant, so we certainly couldn’t say it was a design success. But it did eliminate the stumbling block we kept running into.
Perhaps more importantly, the experience reminded the team of the power of lightweight flexible prototypes that can be changed and deployed very quickly. Our approach to future test planning will be focusing on how we can change the prototype mid-test, which should open the door to a more adaptive approach to user research.
It seems so obvious that tap targets on mobile devices should be discreet tappable regions on the screen. But sadly that’s not always the case, even on mobile websites and apps from major content creators.
One of the main uses of handheld mobile devices is taking a quick look at the latest news. And often people’s eyesight is not as good as the young designer who created the app, so a mechanism often is (and should be) provided for people to increase the font size, especially since reading is the main reason people are using the mobile website or app in the first place. Sadly the mobile websites for the LA Times and CNN, and the Associated Press iPhone app all fail at this simple task.
In the accompanying image note the size and spacing of the font controls on the CNN mobile website (the first screen grab). In this image I positioned them adjacent to the Mobile Safari control bar for comparision. Note the difference in size and spacing between CNN’s mobile website and what Apple recommends in its iOS Human Interface Guidelines. It’s not even close, and this is a product from a major content producer that’s designed for mobile users.
The same problem exists on the LA Times mobile website (the second screen grab). The controls to increase or decrease font size are too close to one another and are too close to the Reset link. Imagine tapping the big A twice to increase the font size and then hitting the Reset link when you are trying to increase the font size one more time.
The Associated Press iPhone app is an even stranger creature (the third screen grab). Font controls are actually buried in a settings menu. So it’s not clear to someone that they can change the font size, and if they want to they have to hunt around to find the control. The controls themselves are sliders, which require a person to apply a bit of precision to their adjustments. Wouldn’t an up/down arrow construct work just as well? This smacks of a design in search of a problem to solve.
The New York Times takes a different approach with its iPhone app (the fourth screen grab). There is only a single control, which increases the font size until you cycle through all the options and return to the smallest size. It’s not clear at first how this works, but it’s very learnable. And the size of the tap target and the spacing around it are in line with Apple’s recommendations.
Most mobile device makers provide user interface guidelines to developers. More designer should read them. Here are the design guidelines for three mobile platforms:
Size on-screen elements using physical units (points), and not pixels. Differences in pixel density make pixel-based sizing impossible.
As iPad-challenger tablets come along, and only a few (if any) succeed, expect screen sizes to solidify around a few sets of physical dimensions (7-inch and 10-inch). Expect less fragmentation in device screen size and aspect ratio over time.
What you display on a 7-inch tablet should not be a shrunken down version of what you display on 10-inch devices. Tailor your content for the 7-inch display if that is a large segment of your user population.
E-Learning in the Mobile Context
Mobile e-learning is not just migrating all your existing content to tablets and handhelds.
E-learning in the mobile space is about getting the right information to the learner at the right moment and in the right place.
Use gamification if it makes compelling content more engaging. But start with good content, because badges and leader boards don’t make bad content good.
Semantic Markup in HTML5
Use structural tags like <article>, <section>, <header>, and <footer> to help screen readers and search crawlers understand (and not just display) your content.
Semantic markup is unambiguous, accessible, and future proof.
As search engines like Google and Bing pull more of your content into their search results pages, semantic markup can place your content ahead of your competition.
Be open to evolving standards. HTML5 may be the last numbered version, at which point it becomes just HTML as an ever evolving specification.
That’s how I feel about HoverBar from Twelve South, a really sharp add-on that uses a clamp to attach your iPad to an iMac, another external monitor, or a table top. I first saw this a few days ago when a colleague showed it to me and I immediately added it to my got-to-get-it geek chic shopping list.
To the average person, the $80 Hoverpad may seem like an unnecessary product. But if you are coding and testing a responsive web design that will be served to the desktop and the tablet, this is a great add-on. Pair this with Adobe Shadow and you have a pretty nice testing setup.
One bit of advice from my friend was not to use it if you plan on interacting a lot with your iPad because the arm may wiggle a bit when you press on the iPad screen. But it’s probably perfect for watching webinars, YouTube videos, or a baseball game (not that any of us would do that at work).
If it had an additional arm to attach an iPhone or Android phone, it would provide an even better testing setup. But it also would start looking like Doctor Octopus, and that may not help sales.
I just completed my latest DePaul University graduate HCI course: Usability Issues for Handheld Devices. I want to share one of the papers I wrote, a brief survey of automotive telematics and the associated usability issues and related regulatory frameworks. It’s hardly an exhaustive work due to course time constraints and an assignment maximum page limit, so it does not touch on every aspect of telematics or all the possible usability problems in this emerging field of computing. It does, however, point to some interesting topics for more focused future research.
I recently started using a new tool for testing website designs across different mobile device screens without the hassle of having to refresh each browser I’m using.
Adobe Shadow is a free tool from Adobe that allows you to mirror your desktop Mac or Windows computer to multiple mobile devices. You can pair your desktop to iOS and Android devices, including the Kindle Fire. Shadow can connect to an unlimited number of mobile devices.
Adobe Shadow works by running an application on your desktop computer and using a Chrome browser extension to connect the desktop browser with your mobile devices. Your desktop computer and mobile devices have to be on the same network. The device synching worked fine on my home Wi-Fi network but I encountered problems with my wireless network at work due to corporate security settings that block certain ports.
Once the computer is paired with your mobile devices, the mobile displays are updated in near real-time as you browse on the desktop computer. This makes it easy to test things like media queries or any conditional logic that is using the user-agent string to tailor the layout for that device. This is done by sending a command to the mobile device that contains the URL of the page being viewed on the desktop.
Shadow also allows you to do remote inspection and editing of the HTML or CSS and immediately displays the results on all your mobile devices.
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.
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.