Low-Cost, Lightweight Mobile UX Research

Yesterday I had the pleasure of leading a panel discussion at Techweek Chicago 2013 on low-cost, lightweight methods that design teams can use to conduct user research and usability testing for mobile apps and websites.

Our team also created a list of mobile prototyping and testing tools that can be purchased for less than $300. It’s a small expense when your company is betting on you getting the product and its design right. We hope this helps you build better experiences for your users.

Luke Wroblewski on Multi-Device Web Design

Luke Wroblewski conducted a one-day workshop this week at An Event Apart Boston on The Web Everywhere: Multi-Device Web Design. Here are my notes:

A Framework for Devices and Use

  • Device sales are not the same as usage. Make sure you understand what people are referencing when they use statistics. For example, iPhone web browsing exceeds Android browsing even though more Android handsets are sold.
  • Trend: Now bigger is better for smartphones. You need to design for 3.5-inch to 7-inch screens when designing for smartphones.
  • Look at actual usage on your site and not device distribution in making strategic decisions. Figure out who is looking at what content using which devices.
  • A switch to smaller tablets is underway. Expect to see more traffic to your site from 7- to 9-inch tablets. And you can’t push the same design to a 7-inch tablet as you would to a 10-inch device.
  • Large tablets are not mobile devices. Most large tablet use is in the home. A 10-inch iPad is really a mobile-in-the-house device.
  • Human factors should drive what we do with the interface. Look at physical dimensions and human ergonomics.
  • Don’t use industry terms like “phablets” to drive your design. Think of devices as being good for the hand, good for the lap, good for the desk, or good for the wall.
  • Get ready for more diverse screen sizes. Wrist-sized screens and eye-sized screens are coming.
  • Android sales tend to follow a continuous predictable line, while iPhone sales spike and fall around device release cycles. Be aware of sales trends as you plan your design strategy.
  • Expect more growth in “hybrid convertible” devices that include elements of laptops and elements of tablets. Tablets have keyboards and laptops are becoming touch devices.
  • Computers from ASUS and HP will have touch input via peripheral devices.
  • Quoting Ethan Marcotte, “privilege the small screen” so those users have everything they need, then add more to the design for larger devices.

Navigation on Phones and Tablets

  • Try to avoid iPhone-like bottom tab bars on web designs meant for handheld devices. They conflict with Android device controls and support for fixed positioning is not universal for Android devices.
  • Use toggle menus at the top of the screen on websites designed for mobile devices.
  • Toggle menus are limited to one level of navigation. Use off-canvas menus for deeper levels of navigation.
  • Put content up front, not navigation. Allow easy access to your site’s navigation and an easy way to get back to your content.
  • The footer anchor pattern places navigation after your content but allows easy access to it with one tap on an anchor link in the site header.
  • There are more comfortable touch zones on tablets and laptops at the bottom and left and right sides of the screen. Understand this when designing websites for tablet use.
  • Responsive designs that fall back to desktop layout do not work as well as they could on tablets because of comfortable touch zones. Explore split navigation placed at the lower left and right corners of the device. Test your responsive designs with real users on tablets.

The Mobile First Approach

  • Depending on the market being served, especially international ones, you still have to plan for feature phones with minimal CSS support and no media queries. Start here and build up.
  • Within media query break points use fluid layouts to scale your design between the break points.
  • When doing responsive design consider portrait and landscape orientations. Also be aware of how your design works on widescreen devices, like Microsoft’s Surface, when they are used in portrait orientation.
  • Start your design with handhelds in mind, then enhance upward and build fluid layouts.

Design Techniques

  • Use the width of your content to determine break points. These become “stress points”.
  • Use content curation and responsive patterns when designing for multiple devices.
  • The off-canvas pattern puts navigation and supporting content off screen with UI elements to expose them. Use this as an alternative to the single-column “mobile stack”.
  • Use CSS3 and icon fonts whenever possible for buttons and other images.

Performance and Speed

  • Executing a multi-device strategy is somewhat like packing for vacation: Responsive is like packing when you don’t know the weather; you pack all kinds of clothes. A separate mobile-specific site is like packing for the beach; you bring only what you need.
  • Responsive design is about adaptation; mobile-specific sites are about optimization. Mobile-specific sites will usually perform better in terms of speed but come with additional development and maintenance costs.
  • Transitions and other UI elements can improve the perception of performance.
  • Spinners can communicate to the user that something is happening, but also can create the perception of the app being slower. Only use spinners and other UI techniques if they really create the impression things are running faster. Test with real users to see how they perceive it.

Multi-Device Strategies

  • Strategy One: Maintain the status quo and keep a separate mobile site.
  • Strategy Two: Add adaptive styles to your existing site as a step toward responsive design. See Dan Cederholm’s write-up on using adaptive styles on Dribble.
  • Strategy Three: Extend your existing mobile website to larger devices. This is easier than downsizing an existing desktop-focused site, and takes what you already have and gradually makes it responsive without disrupting your existing site and business.
  • Strategy Four: Start fresh. If you ever needed a reason to redo your entire website, the new multi-device reality is it.
  • When first starting with responsive design, try doing it on your most used pages to get the biggest bang for the buck. If you have a video site like YouTube, the video player page is the place to start.
  • Alternatively, you can try it on your least used pages to get comfortable without a lot of risk.

What’s Next

  • Websites on TVs and wall-sized displays are on their way to becoming mainstream. Examples include Google TV, Xbox, PlayStation 3.
  • The web on a TV is not about a web browser on your TV, it’s about creating cross-device experiences that include the TV.
  • Eye-sized screens like Google Glass will be design considerations in the future.
  • Apple, Android, Samsung, LG, and Microsoft all publicly claim to be working on a wrist-sized device. It will include some kind of HTML support in the future. It’s one more screen size you will have to consider in your designs.
  • Speech is becoming an input type, with Siri and Google Voice Search being only the beginning.
  • Google Glass uses speech interfaces, eye movement, device movement, and touch. The types of inputs used with your designs will only increase.
  • If a technique is used on one device form factor, it will spread to the others. Look at what’s happened so far with touch, voice, and high-resolution screens.

The Touchable Desktop

Yesterday I presented at UX Thursday in Chicago.

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:

The event was sponsored by User Interface Engineering.

Fitting Your Ideas In A Timebox

It might seem at first like an impossible task: giving a meaningful and informative presentation in 20 minutes. But it’s not, it just requires a rethinking of how you approach the task and what you hope to accomplish.

I got to thinking about this as I put the final touches on my slides for this week’s UX Thursday in Chicago. And I realized if you think about great proverbs or sayings you love, they often impart great meaning in just a few words. Think how powerful the phrase “Don’t make me think” is. You can say a lot in 20 minutes; it’s all in how you curate.

The first thing to recognize is you usually can’t teach practice in 20 minutes. But you can introduce theory — briefly, succinctly, and hopefully in a well-illustrated manner.

Secondly, accept that you will leave people with more unanswered questions than they came with. But take heart that they are now asking those questions. If you got them that far, you’ve been successful.

And finally, remember that almost all ideas scale up and down if you are willing to work at it. Think about the simple penny and the three little words on it: E Pluribus Unum. Simple and yet elegantly beautiful. But also an idea that surely can take many forms.

So don’t worry if you only have 20 minutes to share your ideas. Focus on how to make each minute matter.

Chicago Web Conf 2012

Chicago Web Conf 2012
Chicago Web Conf 2012

I presenting a talk yesterday at Chicago Web Conf 2012 on A/B Testing Your Designs With Real Users, focusing on the role of A/B in digital product development.

I showed at a high level how we use the A/B testing solution Optimizely where I work at Cars.com to test our designs in ways that are quantitatively measurable. Like other A/B test solutions, Optimizely allows you to quickly create and implement tests and start collecting data immediately.

In addition to showing some examples of our tests and results, I also tried to show how A/B testing can fit into a company’s larger user experience testing strategy. My goal was to leave attendees with five key takeaways regarding A/B testing:

  • It’s not a replacement for testing with individuals.
  • Small changes can lead to big improvements.
  • It takes little effort to test those changes once a solution is in place.
  • This kind of testing can take some of the team friction out of the design process.
  • It can help you get better solutions to market faster.

My slides are available (PDF format).

Jared Spool’s Prototype Camp Chicago 2012 Keynote

Jared Spool gave the keynote talk on the power of prototyping at yesterday’s Prototype Camp Chicago 2012. Here are my notes:

  • Prototyping is not just about designing products, it’s really about exploring the problems you are trying to solve.
  • When you are making products you have to focus first on the problems you are trying to solve, not on what you are building.
  • Prototypes are key elements in creating a shared understanding of what problems you are trying to solve and what you can build to solve them.
  • Prototypes are a great way to expose the differences between the vision of the perfect product that is in the designer’s head and what your team can actually build.
  • The best architects, the ones who can walk into a building and say “This is exactly as I envisioned it”, are the ones who were involved with the project throughout the journey and making changes to their designs along the way.
  • The trick to planning iterative prototyping is knowing what you are going to measure. You have to start there and then design the prototype to ensure you get those measurements.
  • The key to iterative prototyping is moving fast. Design, test, learn, change, repeat.
  • With paper prototyping you get to change the design between every test as you learn about pitfalls in the design.
  • Sketching is prototyping. It allows you to explore designs before building anything.
  • You may never make the products you prototype, but in testing them you will learn things that will influence and improve other products you build.

Prototype Camp Chicago 2012

Prototype Camp Chicago 2012
Prototype Camp Chicago 2012

I’ll be presenting a session today at Prototype Camp Chicago 2012 on mobile prototyping with Axure RP. It will be my first conference presentation and a great opportunity to share what I’ve learned about mobile prototyping with the local UX community. I also hope to learn a lot from the many smart folks who will be there sharing their knowledge.

My demonstration Axure file for the presentation is available. It was created with Axure 6.5. Consider it yours and use it as you see fit. I hope it helps you in your growth as a mobile prototyper and Axure user.

For more information on mobile prototyping with Axure, see my recent article on Smashing Magazine, in which I walk through building this demo step by step. There are links to free and paid interface widget libraries, training resources, and some great books on prototyping you should read.

I plan to demo my prototype using the Xcode iPhone Simulator on my MacBook Pro. You can save yourself some time when first building your prototype by using the simulator so you don’t have to keep reaching for your iPhone. Just download Xcode from the Mac App Store (it’s free). To run the simulator as a standalone app without ever launching Xcode, just enter the command in this file in Terminal and it will create a shortcut to the simulator in your Applications folder. You will need to test on the device as you get further along in building more complex Axure functions into your prototype, but this is a nice way to get started when creating the basic framework and navigation for your project.

Happy prototyping!

Float Mobile Symposium at Techweek 2012

Yesterday I attended the Float Mobile Symposium at Techweek 2012 and heard a few interesting speakers. Here are my notes:

Designing for Device Independence

  • 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.

Speakers included: Shay Howe, UI engineer at Groupon; Steven Hoober, author of Designing Mobile Interfaces; and Kris Rockwell, founder of Hybird Learning Systems.

Jared Spool’s UX Immersion 2012 Keynote

This week I attended the UX Immersion 2012 conference. Jared Spool’s keynote addressed why it’s a great time to be a designer. Here are my notes:

It’s a Great Time for Extraordinary Design

  • More than ever companies are realizing that a well-designed product or user experience is essential to business success.
  • Experience design is more mission critical than ever before.
  • Products like Apple’s iPhone and iPad have raised consumers’ expectations for what makes a great product.

Stages on the Road to a Great Product

  • When something first comes out it is often clunky, but people will buy it because it is new.
  • Then features are added and it’s a race to see who can have the most features.
  • Then a concern for the user experience comes along and you strip away a lot of features.

Bad Products Create More Frustration

  • Lost sales and revenue.
  • Increased support costs.
  • You waste time building things no one uses. No designer wants to do that.

To Sell Great Design You Need to Know How to Talk to Executives

  • Executive have their own language.
  • Five things executives care about: sell more stuff, decrease costs, increase market share, increase business from exist customers, and increase shareholder value.
  • If you want to sell an executive on the need for great design, you have to speak their language.

Examples of Great Design

  • Walgreens scan-to-refill pharmacy app.
  • Zipcar — User friendly solution to a vexing problem for city dwellers.
  • Cirque du Soleil uses beautiful design and is better than anything else out there.
  • Umbrella Today. It answers one simple question: Do I need to take an umbrella with me today?

Disney vs. Six Flags

  • The map at a Six Flags park shows how you get from ride, to ride, to ride.
  • The map at Disney World creates a sense of adventure. It shows almost no rides. Imagine being a kid stepping into that.
  • At Disney World you don’t stay in a hotel room, you stay in a resort. And when you come back the housekeeper has folded your towels into origami animals.
  • Disney pays more per housekeeper for one who can fold origami animals. And they clean fewer rooms. Can you imagine being the person to pitch that idea?
  • Six Flags = Activities, Disney = Experience. Experience is the activities plus the gaps in between.
  • The origami animal towels were started by one housekeeper on one cruise ship. No one asked them to do it. That’s often where the best design ideas come from.

How Mobile and Agile Can Help Us Redesign the UX Process

  • Agile is opportunity to redesign how we create and think about user experiences.
  • The restricted nature of a mobile device’s screen forces us to focus on the experience.
  • Mobile is an incredibly powerful wedge we can force into the business to focus them on creating great user experience.

The Making of an Extraordinary Designer

  • At every step ask yourself “are we getting closer to a better user experience?”.
  • Ask yourself “is this what a customer will pay for?”.
  • Great designers know they have to get something out quick and learn from it.
  • The extraordinary designer knows how to deliver great experiences. You strip the product down to only those features people will really use.
  • Example: In 2007 Nokia had 140 phones with lots of features. Apple had one. We all know how that worked out.
  • Great designers know that more features + more complexity = feature rot. And the user experience rots.

On Great Design Teams

  • Good judgement comes from experience, and experience comes from bad judgement. You have to give great design teams the time to fail and learn.
  • Everyone on the team needs to share the vision. Get great design embedded in your culture.

Jared Spool is the founder of User Interface Engineering. You can follow him on Twitter at @jmspool

Jeff Gothelf on Lean UX

This week I attended the UX Immersion 2012 conference. Jeff Gothelf’s featured talk looked at Lean UX and how he used it at The Ladders. Here are my notes:

On Lean UX

  • When converting from Waterfall Development to Lean UX, a great place to start is to look for stories of failure. You learn what didn’t work.
  • Lean UX doesn’t seek to answer the question “can we build this?”, but instead asks “should we build this?”.
  • Usability testing with three users helps you find the boulders, not every little flaw. Subsequent iterations can find problems in the smaller details.
  • Style guides and pattern libraries let you work faster. You have all the tools you need to solve problems. If it has pixels, it goes in the library.
  • Live style guides is a concept in which the HTML markup and CSS is attached to the product in a way that a change to the style guide changes the product.

Learnings From the Agile Transformation at The Ladders

  • UX as a shared services didn’t work because it divided people’s focus.
  • You have to put UX designers on a dedicated team to build camaraderie, focus, and trust.
  • If a UX designer must be split across two teams, make sure they have a primary team so they can prioritize work appropriately.
  • Putting a UX designer on more than two teams is a recipe for failure.
  • Solve the problem together, not in silos. Co-creation builds understanding.
  • Sketch together as a team, then everyone “owns” the solution.
  • The Ladders had many iterations on what was the right way to manage the task wall. We learned that if you cram your entire functional spec onto a board, it’s not agile.

What Lean UX Means for Designers

  • No one gets into user experience to create documents. They want to make things.
  • In fast-paced agile environments the traditional UX approach becomes a bottle neck. We need to use new tools to achieve our goals.
  • Create the lowest fidelity document possible to explain and validate whether the concept in your head is the right thing to do.
  • Don’t be afraid to sketch. All you need is a circle, a rectangle, and a triangle. This covers every interface out there.
  • Get the experience out there, not the design document. Get it in the wild to validate the concept.
  • You’ll never solve a problem with a design document, you solve them with software.
  • Unless you are building the product for yourself, your design is just a hypothesis.
  • Work in a tight integration with the rest of your product team. Designers can’t hide behind their monitors any more.
  • Pair up — Put designers together with developers when problem solving and brainstorming.
  • Pairing up also helps you build an understanding of each other’s work and limitations.

Jeff Gothelf is the author of a forthcoming book on Lean UX. You can follow him on Twitter at @jboogie