Creating Wireframes And Prototypes With InDesign By Shlomo Goltz

Hundreds of tools may be available for interaction designers, but there is still no industry standard for interaction design the way Photoshop and Illustrator are to graphic design. Popular programs are out there, but many of them have considerable drawbacks, which has led me to explore alternative apps.

I eventually chose Adobe InDesign for much of my preliminary interaction design work. Yes, you read that correctly: InDesign, a desktop publishing app originally created for designing books and magazines, is currently my tool of choice for designing low- to medium-fidelity wireframes and interactive prototypes.

Slowly but surely, InDesign has evolved from a print-only tool into an application that can produce interactive media for the iPad and eReaders, too. Surprisingly, it has built-in tools for creating interactivity and animation within your spreads. Though it may sound crazy at first, hundreds of thousands of designers have adopted InDesign as their go-to application for eBooks.

We’ll take InDesign one step further than these authors to produce fully interactive wireframes and prototypes. As you will soon see, InDesign has a unique set of tools and features that are perfectly suited to designing wireframes and interactive prototypes in a more intuitive way than you ever thought possible!

I look for only four categories of features in a wireframing and prototyping app. InDesign has them all in droves.What Makes It A Great Wireframing And Prototyping Tool?

WIREFRAMING

1. Creation
   Create original artwork in a flexible and robust environment, where any shape or style of object imaginable can be created easily.
2. Modularity
   Design once, and have the changes cascade throughout the whole document.

PROTOTYPING

1. Interactivity
   Create different states of a design in which the user can actively engage with the design and change the states of the prototype.
2. Animation
   Set up transitions between various states of an application.

Set-Up

SET UP INDESIGN FOR INTERACTIVITY

Before creating a wireframe or interactive prototype, setting up both InDesign and the new document correctly is imperative. After opening InDesign but before creating or opening a document, go to the “Preferences” panel (on a Mac, InDesign Menu → Preferences, and on a PC, Edit → Preferences → General) and change the following preferences.

Global preferences (i.e. when no documents are open):

• “Units & increments”: Set units to pixels
• “Display performance”:
  • “Default view”: High quality
  • “Raster images, vector graphics, transparency”: Higher quality (resolution)

Change InDesign’s application-level settings (“Units and increments”) before creating a wireframe or prototype. Larger view.

After changing the global preferences of InDesign, create a new document (on a Mac or PC, File → New → New Document), and set up the following properties.

• Intent: Web
• Properties
  • Pixels as dimension
  • Common screen sizes
  • Horizontal orientation (for desktop and traditional Web)
  • No facing pages (spreads)

Setting the “New Document” properties to “Intent: Web” enables you to create a new document with pixel dimensions. InDesign provides many presets for common screen sizes.

Note: Documents created with “Intent: Web” will have an RGB color space.

Set Up The Workspace

Make all of the interactive functionality new to InDesign CS5 and CS6 quickly accessible. I like to place them on the left side of the screen, under the tools palette. Larger view.

As stated, InDesign can be used to produce static print-based media as well as fluid, animated interactive media. The type of project you are creating will dictate what features you will need quick access to and, thus, how the user interface should be arranged.

How one sets up their workspace is a matter of personal preference, but after much trial and error, I’ve found a set-up that works for me. What works for you may be different, but I recommend using the information provided in this section as a starting point for your customization of the InDesign interface.

Once you have placed the panels the way you like them, save them as a named workspace. You can switch between workspaces in the upper-right of the InDesign application window.

Two workspace presets are provided with InDesign (found in the upper-right drop-down menu), “Digital Publishing” and “Interactive for PDF.” I have created my own workspace (named “Interactive – Custom” in the screenshot above), based on the other two.

Basically, all of my typographic, layout, color and other design-oriented panels are on the right, and all of the new interactive panels are on the left, under the tools panel. The panels listed just below are docked together on the left of my screen.

Here is a quick introduction to a subset of the interactive panels:

• Links
  Displays all external assets that have been placed in your documents. Link images, relink and update your assets.
• Media
  Manage movies and audio files placed in your document. You can customize how these media files play and are viewed in your document.
• Liquid Layout
  Set up rules for how objects may be repositioned when the document is viewed on various devices and, thus, at various page sizes and orientations.
• Buttons and Forms
  Convert objects to buttons, and control button properties.
• Animation
  Create animations, and determine how objects move.
• Timing
  When multiple animations occur on one page, control their timing so that they are played in the correct order.
• Object States
  Create objects that have multiple states (such as slideshows and drop-down menus). Each state can be shown and hidden using buttons. This is powerful for creating complex interactions.
• Preview
  Preview how an animated and interactive document will look and behave without having to export first.

These panels are where most of InDesign’s interactive functionality can be accessed.

I don’t use the panels for hyperlinks, bookmarks or page transitions much, so I don’t dock them with the others.

Wireframe Creation Features

DRAWING TOOLS

Drawing tools may seem like a commodity in the realm of design software. However, many commonly used interaction design applications rely on the placement of predefined UI controls such as buttons and sliders. Ideally, a wireframing application should have vector-drawing tools. Vector graphics are advantageous because they allow for non-destructive editing; and for the most part, the nature of vectors forces you to maintain low to medium fidelity. Jumping into visual design too early in the design process is easy if you are using a program such as Photoshop.

Although InDesign’s drawing tools are not as sophisticated as Illustrator’s, they are more than enough to get your ideas across. The logic here is that, the more robust the drawing tools in a wireframing or prototyping app are, the less you’ll have to jump in and out of other tools, which would create bottlenecks, extra work and technical hurdles.

The drawing functionality in InDesign is similar to Illustrator’s. Many of the bells and whistles found in Illustrator may be missing, but you get a core set of streamlined and powerful drawing tools to render anything you can imagine.

LAYOUT

InDesign is one of the only design tools that has robust grid support built in, and I find myself designing with grids all the time. (You can find all of the layout functionality by going to Layout → Margins and Columns.) Grids from widely used systems, such as the 960 Grid System, can be easily and quickly created and used throughout a design by using master pages, which we’ll cover later. Horizontal and vertical guides can be used in conjunction with columns to create subgrids for greater complexity and precision in a layout.

Quickly and easily create grids for your document, such as the 12-column grid based on the 960 Grid System, shown here. Larger view.

TABLES

Not to be confused with the very old technique of laying out Web content, tables in InDesign are often used to display tabular data, as well as list and grid views, in a user interface. In fact, creating tables is one of the reasons why I started creating wireframes in InDesign in the first place!

I often turn cell borders off (either by setting the stroke to none or to 0 pixels), so that the table can inform my design but not be so literal or distracting in the final wireframe or prototype. Other common reasons why I use tables are to create tabs that evenly distribute the text label in each tab, and to create subgrids for alignment in a design when the main grid just won’t do.

Tabular data can be created in seconds in InDesign. When tables are needed, no better design program than InDesign is out there. Larger view.

LAYERS

While layers may seem like a no-brainer feature that doesn’t warrant mentioning, plenty of apps simply don’t have them. (InDesign didn’t have the ability to show objects in the Layers panel until CS5.) Layers provide the ability to group, reorganize, selectively show and hide, and selectively lock and unlock objects in a design. The larger and more complex a design is, the more important layers become.

Multi-page documents in InDesign share the same organization of layers: every page has the same number of layers, which are also in the same order. When a layer is created, moved in the stacking order or deleted, or when its visibility has changed on one page, those modifications are reflected on all other pages. While the organization of layers is consistent throughout an InDesign document, the designs on each page may be unique.

In the last several months, I have experimented with various ways to order my layers and have come to the conclusion that only a few layers are needed to adequately organize my files. Typically, I use only four layers: I place a notes layer at the top to add explanatory text about the design; next, I use an input layer, where I show user actions and input; below that, I show modals (dialog boxes, lightboxes and popovers), which appear over the background layer.

This is a common layer structure for my documents:

1. Notes
2. User input
3. Modals
4. Background

The wireframes I create usually have four layers. The background layer contains most of the design. Overlays are above the background. User input, such as from a mouse or hand, sits on top. Finally, notes are placed above everything so that I can annotate detailed interactions. Larger view.

MULTIPLE PAGES

By their very nature, interactive documents require multiple pages. Pages in website design (and screens in app design) are a fundamental unit of interaction, because they contain the content that users navigate to throughout the application.

Large and small projects would benefit from the organization that pages provide.

ALTERNATE LAYOUTS

This new feature in CS6 is a game-changer for responsive and mobile design. Alternate layouts allow you to create designs for multiple devices and orientations in the same file. With InDesign CS6, we now have a tool in our arsenal to make designing for dozens of screen variations almost as easy as designing for one. The textual content of each size and orientation is all linked, so updates will automatically propagate to all variations of a design.

Alternate layouts were designed to work with the liquid layout toolset (discussed next), so that if layout rules were set up properly in the original layout, then newly created layouts would automatically update to conform to the different dimensions. Of course, alternate layouts may be used without liquid layout rules, too, so that you can manually control how objects are displayed in each layout.

When working on more than one layout, you might need to refer to other layouts or toggle repeatedly between multiple ones. To see two layouts simultaneously and work back and forth between them, simply click on the split-view icon to the right of the scroll bar at the bottom of the InDesign window.

Alternate layouts are used to manage one design that will be viewed on multiple devices.

LIQUID LAYOUT

Liquid layout changes the way content adjusts to the size of the page. (According to Adobe, this feature is HTML5-based.) Liquid layout lets you be more flexible: you can design once and set up some simple rules, and then the design will automatically adapt when the display’s size or orientation changes.

Set up liquid layout rules in one of six ways: off, scale, recenter, object-based, guide-based, and controlled by master. The details of the liquid layout rules are enough to take up an entire article by themselves and are, thus, beyond the scope of this article. I highly recommend reading Pariah Burke’s article “InDesign How To: Using Liquid Layout” to get up to speed on the rules.

Define liquid layout rules before creating an alternate layout, to fully leverage the time-saving benefits of this feature.

As you set up the liquid layout rules for a page, preview and test those rules to see whether they have the desired effect. To test your new liquid layout, select the page tool, and you will see handles at the edges and corners of the page. By dragging these handles, you can temporarily adjust the size of the page. This behavior lets you test how the content adapts when the page changes in size. Holding Option on a Mac or Alt on a PC lets you permanently change the page’s size by hand.

Wireframe Modularity Features

MASTER PAGES

Master pages extend the functionality of pages by allowing a parent page to have objects and to have layers that are shared with its children pages. When content on the master page changes, it also changes on the children. Masters are typically used to contain headers, footers, logos and empty frames that act as placeholders. Surprisingly, very few other applications have master pages. The versatility and saved time that master pages bring cannot be overestimated. They help with consistency, and they help designers use repeatable design patterns throughout a project.

When master pages are applied to other pages, you are able to share the master’s objects to the regular pages.

Note: Objects on a master page layer appear behind objects assigned to the same layer in the document page. If you want a master item to appear in front of objects on the document page, then assign a higher layer to the object on the master. A master item on a higher layer will appear in front of all objects on lower layers. Sometimes I create special layers for masters that are above the “normal” layers.

MASTERS BASED ON OTHER MASTERS

Masters can be created based on previously created masters. As far as I know, this feature is unique to InDesign. By creating a parent-child relationship between masters with a document, a nesting effect occurs (similar to the cascade in a cascading style sheet), which makes for a powerful way to create constancy and to update documents with ease.

Basing a master on another enables you to create similar variants of a design. Masters may be based on only one other master at a time.

PLACING FILES

When pixel-perfect styling matters, you can switch to whatever application you want to design in, and place that file in an InDesign document for seamless integration. Placement is especially powerful when using multilayer Photoshop or Illustrator files, because InDesign displays them in full fidelity.

Note: By default, InDesign previews placed images with a low-resolution preview. This does not reflect the quality of the placement or that of the original file — InDesign uses a pixelated proxy image to keep up performance on your computer. With CS5 or CS6 and a decent computer, I have found that a high-quality image preview doesn’t affect performance and is a more accurate way to view your work. I recommend setting the display performance to “high” as the default in InDesign. (This can be done by opening InDesign and going toView → Display Performance → High.) Setting this when no document is open will set the default for all newly created files. Older files will retain the view settings that were selected the last time they were saved.

Each time a document is placed, it references the original file. For instance, if a PSD is altered, one click can update all of the instances of that Photoshop file that appear in an InDesign document. When only a portion of an image is necessary, InDesign offers some of the most intuitive and rapid masking tools available.

Note: Placed items are linked to the containing InDesign document based on their file location. To gather all files into one central folder, use the File → Package command.

You can place most media types in an InDesign document. Larger view.

The placement feature is easy to take for granted, because it is a fundamental tool in InDesign’s arsenal that has been around since the software’s debut. But placement enables you to create a kind of collage whereby you can design the pieces in whatever tool you deem appropriate, and then assemble those pieces in InDesign.

PLACING INDESIGN DOCUMENTS IN OTHER INDESIGN DOCUMENTS

InDesign allows documents to contain other InDesign documents. Think of a placed InDesign file in a master object (rather than a master spread) because it makes it easy to reuse content in a design in a consistent, fast and easy way. If the original InDesign document is edited, all instances of the document will instantly reflect the changes. A placed InDesign file may show up in its container file an infinite number of times.

This feature allows for functionality similar to that of symbols in Flash and Illustrator, but expands on their use by facilitating constancy across multiple documents. This is an extremely useful feature that is not widely known but can save countless hours. For those working on collaborative teams, you can save InDesign documents to be used as reusable components in a shared folder, and any updates made by one person will be available instantly to the rest of the team.

InDesign documents may contain other InDesign documents. This seemingly simple feature allows you to create symbol-like functionality that allows object changes to propagate to an entire document. Larger view.

SNIPPETS AND LIBRARIES

Placed InDesign files make it possible to reuse content and to edit the originals. There are other ways to reuse content, such as snippets and libraries; however, these two methods do not allow the originals to be opened or edited after creation. Because of this, they should be used prudently, and only when the content in a library or snippet is finalized and won’t change. Snippets are more flexible and powerful than libraries, but using placed InDesign documents is recommended in most cases.

STYLES (OBJECT, CHARACTER, PARAGRAPH, TABLE AND TABLE CELL)

As anyone who has used character and paragraph styles in InDesign would attest, styling is an amazing time-saver and provides a level of precision and consistency that would otherwise be impossible. Object styles enable you to style one object to your heart’s content, and when you are happy with the way it looks, you can save all of the effects and the transparency, stroke and fill of an object to be applied to other objects later on. If the style itself is updated, then all objects that have been assigned that style will be updated as well.

Styles enable you to maintain a consistent look and feel in a document and to update the styles of any and all objects when requirements change or the mood strikes. Larger view.

Interactive Prototyping Features

BUTTONS

When an object is converted into a button, it becomes clickable and interactive, able to initiate a myriad of actions such as navigating to a particular page, initiating animation or playing a sound. Almost any object can be turned into a button. A button is a special kind of “container frame” that hold the objects that make up the visual appearance of the button.

Buttons panel: details.

MULTI-STATE OBJECTS

When a person uses an application or website, the objects on the screen that they interact with will often change states. For instance, a carousel slideshow might show a featured set of 10 images that rotate through the collection, showing one photo at a time. In this example, the carousel slideshow is one object with 10 states. In other programs, you would have to create a new page or art board for each of the 10 images in the carousel.

Without multi-state objects, the carousel object would have to be duplicated nine times, each state on a different page. This method is inefficient and doesn’t accurately reflect what is actually happening — that the carousel is changing states. State changes are not the same as page changes, and InDesign allows you to differentiate between the two! Multi-state objects are special objects that can change appearance depending on how or when a user interacts with them.

Objects panel: details.

HYPERLINKS

Those blue underlined text links we have come to know and love on the Internet are alive and well in InDesign. Hyperlinks turn text into interactive objects that, when clicked, transport the user to a new page or to a different position on the same page. You can also easily turn URLs in text into hyperlinks (be sure to define the character style of hyperlinks first).

A note on named versus unnamed hyperlinks. When making a hyperlink, you need to decide whether it can be used multiple times (which InDesign calls a “shared hyperlink destination”) or will be a one-off link. If you are going to use a hyperlink several times in a document, making it named is great. That way, if you need to edit the link, you can change it once and it will get updated everywhere in the file.

MEDIA

Similar to the Links panel, the Media panel holds all of the movies and audio files that are linked within a document.

BOOKMARKS (PDF)

Used primarily for print PDFs, bookmarks make it easy for the viewer to find a particular section of the document. Bookmarks may be nested. A table of contents can generate bookmarks without your having to add bookmarks manually, which saves a lot of time. As with HTML, a link can direct you to a whole other page or (if it’s an anchor link) to another spot on the same page. Because there is no way to name pages in InDesign, you can also use bookmarks while designing a document for reference purposes.

PAGE TRANSITIONS

Whole page-transition effects, similar to those in Keynote and PowerPoint, are available in InDesign.

Animated Prototyping Features

ANIMATION

Though they can be thought of as eye candy, transitions provide additional information, context and feedback, and they help people visualize the results of their actions. Objects animate as a result of a user action, such as navigating to a page or clicking a button. The animations in InDesign have the same presets found in Adobe Flash CS5 Professional and above. Common presets, such as bounce, slide in and fade in, come bundled with InDesign, but you can create your own presets, save them and share them with others using InDesign or Flash.

Animation panel: detail 1 of 4. Larger view.

Animation panel: detail 2 of 4. Larger view.

Animation panel: detail 3 of 4. Larger view.

Animation panel: detail 4 of 4. Larger view.

TIMING

The timing pane is used for advanced animation sequences in which a user action initiates the animation of two or more objects. The timing pane takes the place of a dedicated timeline found in apps such as Flash, and it resembles panels found in Keynote and PowerPoint (with some powerful additions). Timing is used to control the order in which objects animate, determining whether those objects animate one after another, at the same time or somewhere in between.

Timing panel: details. Larger view.

Previewing And Exporting

PREVIEWING AN INTERACTIVE DOCUMENT

With so many options to tweak in an interactive document, periodically testing your interactions will help you to iterate on the design and to experience what you are creating from a user’s perspective. Thankfully, InDesign helps you do this without having to export the whole document, which saves time and lets you stay in InDesign to test the design as you are creating it.

The difference between previewing a document and exporting a document may seem minute, but because previewing is so fast, easy and but one click away, you are more likely to use it to test, evaluate and tinker with a design — and increasing the number of iterations in the design process is a surefire way to increase the quality of your deliverable.

Preview panel: details. Larger view.

EXPORTING

InDesign’s interactive features work only when you export the file to a format that supports them, such as PDF, SWF, FLA or XHTML. And different formats support different features.

HTML EXPORT

Though InDesign has an “export to HTML” feature, it is so anemic that it is not worth using. Perhaps Adobe wants people to use its digital publishing platform — the resulting HTML files that InDesign produces natively are not useful because they don’t maintain the styling or interactivity of the working document. Adobe has said it wants to move in the direction of supporting Web standards, but as of CS6, I would not recommend exporting to the Web from InDesign.

Luckily, a company named AJAR Productions has a new Kickstarter project that aims to rectify the shortcomings of HTML exporting. Currently, the InDesign to HTML5 project is a work in progress, but it will have a 1.0 release very soon. Please take a look at this new plugin and see what it can do for you. The developers are very responsive to constructive feedback. Hopefully, Adobe will see how useful this functionality is and follow the awesome lead of this Kickstarter project. With the InDesign to HTML5 plugin, you can produce designs with the following features and benefits:

• With the WYSIWYG, no-programming-needed design environment, produce layouts that are faithful to the original InDesign file.
• Embed fonts on your website.
• Produce built-in page navigation.
• Use master page content.

EXTENDING INDESIGN

The company Eight Shapes has created a toolset called Unify to fully maximize the interactive features of InDesign. Unify is a documentation system to produce wireframes, maps, flows, storyboards, plans, style guides, specifications, usability testing reports and prototypes. I only recently discovered Unify and have found it to be extremely helpful in my work.

Drawbacks And Limitations

Before you start rushing to mock things up in InDesign, I’d like to mention a few caveats. First and foremost, few professionals are using InDesign to create wireframes and prototypes. This means that there are few tutorials and support documents to help you if you get stuck or confused. Learning how to create animated eBooks or iPad magazines might help you approximate what you are trying to do, however. Also, there are almost no native InDesign files that can be used as stencils or pre-made components similar to those found in programs such as OmniGraffle.

There is a way to quickly create your own set of stencils from those already available online, though. You can copy and paste stencils from other programs into Illustrator, clean up the images, and then paste them into InDesign. As mentioned, you can embed InDesign documents in other InDesign documents in such a way that approximates the use of symbols in Fireworks, Illustrator and Flash. Embedded InDesign documents can be treated like stencils. The advantage is that these documents can be accessed by a team from a shared location, and when the source files are updated, every document that contains the embedded InDesign files will also get updated. While getting your InDesign stencil collection up and running might require some leg work, it is well worth the effort.

The interactive features of InDesign were not intended to be used for rapid prototyping or for creating rich complex interactions. While the interactive tools are perfectly suited to eBooks, they are not yet robust. The types of documents InDesign produces are intended to be used with the Adobe Publishing Suite and EPUB — two formats with different but related limitations. Interactive PDFs, SWFs and even HTML can be exported, too, but they don’t produce files with as high a fidelity as Adobe Publishing Suite or EPUB.

In some ways, the interactive toolset makes InDesign feel like a facsimile of PowerPoint or Keynote in terms of how page transitions are handled and animations triggered. The similarity to presentation apps makes it easy to jump in and start producing work quickly. But there are some drawbacks. As anyone who has created an animation-rich prototype in a presentation program can attest, although it looks slick in the end, designing a non-linear flow in the confines of a linear document is a bit of a hack.

Despite these minor limitations, I hope you have discovered the amazing benefits of InDesign. Although not perfect, InDesign offers many perks and features that will transform the way you create wireframes and interactive prototypes.

Conclusion

Many people are familiar with InDesign, but they often overlook it when choosing a wireframing or prototyping tool. This popular application in Adobe’s Creative Suite, once a print-only tool, has become a hybrid program that can produce multimedia content for the Web and eReaders. Though not perfect, the unique combination of its creative workflow, modularity, and toolsets for interaction and animation make InDesign a robust and powerful program that is perfect for creating both wireframes and prototypes.

Budget your time, design your life by Ev Williams

Budget your time, design your life

I once read something like, “You’ll only see a full moon X number of times before you die.” I don’t remember what X is, but it was surprisingly small. And it was true. Or, at least the point was true: We only have so much time.

Replace full moon with, sunsets, the beach, live concert, or your parents, and realize that, in a world of infinite possibilities, experiences, and things to pay attention to, time is finite. We’re here for a blip, and it’s over. How do we make the most of it? How do we use our time in the way that really reflects our values, goals, and desires?

Part of the answer, of course, is better software.

The software we use for managing time—mostly, calendar apps—has barely evolved in decades. This is an area ripe for reinvention, and I could write a few posts in this collection about it (here’s a little one). But let me offer here a more specific idea that I’ve not seen done anywhere.

“Time budgeting” is perhaps a prosaic phrase for what I’m actually picturing. What I want, ultimately, is a tool that lets one make better decision about the time they have.

Inputs

I don’t have the design fully worked out in my head—that would be a process of weeks or months. But the first part is to get a bunch of inputs from the user—essentially, commitments and goals with times attached. For example:

- Sleep: 8 hours/day

- Grooming: 30 minutes/day

- Work: 50 hours/week

- Exercise: 3 hours/week

There would need to be a hierarchy to get more detail. For example, within the work bucket, you could add:

- Recruiting: 8 hours/week

- Strategy: 8 hours/month

- Staff meeting: 2 hours/week

To be accurate, you’d also want to build in less-frequent commitments, like:

- Visit parents: 1 week/year

- Dentist: 2 hours/6 months

- Spring cleaning: 2 days/years

Ideally, this would be a reporting tool not just a one-time budgeting tool, but that requires some way to input on what you actually did. You can imagine a system for this, but that might be too much work.

Outputs

The goal is to visualize how you’re choosing to carve up your life. Charts and graphs. Maybe a block diagram that let you zoom in to various levels.

One of the most interesting exercises would be learning how muchactual free time you have. I’m guessing for the vast majority of us, it would be virtually none, which is why we’re always feeling like we can’t get done what we want to or thought we would.

Everything is Instead of Something Else

The real beauty of having this app would be when it comes to making decisions about new commitments or setting new goals. If you decide you’re going to start doing yoga, or join a committee, or learn how to juggle, you need to decide what you’re going to not do.

If you had my awesome time-budgeting app, you would enter your new commitment, and it would ask you what you want to take away from: Free time? TV time? Eating?

Likely this will make you think a lot harder before committing to anything and, hopefully, a lot less disappointed that you’ve run out of time.

I could go on, but I only have so much time budgeted to sharing this idea and, unfortunately, none budgeted to making it a reality. (Hoping someone else does.) 

The Elements Of The Mobile User Experience By Lyndon Cerejo

Mobile users and mobile usage are growing. With more users doing more on mobile, the spotlight is on how to improve the individual elements that together create the mobile user experience.

The mobile user experience encompasses the user’s perceptions and feelings before, during and after their interaction with your mobile presence — be it through a browser or an app — using a mobile device that could lie anywhere on the continuum from low-end feature phone to high-definition tablet.

Creating mobile user experiences that delight users forces us to rethink a lot of what we have taken for granted so far with desktop design. It is complicated in part by mobile-specific considerations that go hand in hand with small screens, wide variations in device features, constraints in usage and connectivity, and the hard-to-identify-but-ever-changing mobile context.

Dissecting the mobile user experience into its key components gives us a conceptual framework for building and evaluating good mobile experiences, within the context of a user-centered approach to designing for mobile. These components shape the mobile user experience — including functionality, context, user input, content and marketing, among others.

The relevance of these elements will change depending on the type of device (feature phone versus smartphone versus tablet) and the presentation interface (app versus Web). This article briefly describes each of these elements and elaborates on each with selected guidelines.

Functionality

This has to do with tools and features that enable users to complete tasks and achieve their goals.

GUIDELINES

• Prioritize and present core features from other channels that have especial relevance in a mobile environment. For an airline, this includes flight statuses and flight check-ins. For cosmetic chain Sephora, it includes supporting in-store shopping via easy access to product reviews on mobile devices.
• Offer relevant mobile-only functionality (like barcode scanning and image recognition), and enhance functionality using the capabilities of mobile devices where possible to engage and delight users. Old Navy’s app serves up surprise games or savings when users snap the logo in a store.
• Ensure that fundamental features and content are optimized for mobile. For example, make sure the store locator shows the nearest stores based on the device’s location, and make the phone numbers click-to-call.
• Include features that are relevant to the business category. For retail websites and apps, this would include product search, order status and shopping cart.
• Offer key capabilities across all channels. Users who sign in should see their personalized settings, irrespective of the device or channel being used. If certain functionality is not offered on mobile, then direct users to the appropriate channel, as TripIt does to set up a personal network.
  

ADDITIONAL READING

• “Sharing App Bump 3.0 Slashes Most Features, Proves Less Really Can Be More,” Fast Company

Information Architecture

This has to do with arranging the functionality and content into a logical structure to help users find information and complete tasks. This includes navigation, search and labeling.

GUIDELINES

• Present links to the main features and content on the landing page, prioritized according to the user’s needs. Mobile Design Pattern Galleryhas examples of primary and secondary navigation patterns for mobile, many of which are vertical instead of horizontal as on desktop websites.
• Enable mobile users to navigate to the most important content and functionality in as few taps or key presses as possible. Navigation optimized for small screens is usually broad and shallow instead of deep. While three clicks (or taps) is not the magic number, users need to be able to recognize that each tap is helping them complete their task. Every additional level also means more taps, more waiting for a page to load and more bandwidth consumed.
• Address the navigation needs of both touchscreen and non-touchscreen users. When designing for touch, make sure the tap size of the navigation item is at least 30 pixels wide or tall. Provide keypad shortcuts for feature phones, so that users can enter, say, a number (0 to 9) to quickly access a link:
  
  Cater to feature phone users, as CNN does with access keys (left), not as Delta does by making the first action to be nine key presses downs (middle and right).
• Provide navigational cues to let users know where they are, how to get back and how to jump back to the start. Mobile breadcrumbs are often implemented by replacing the “Back” button with a label showing users the section or category that they came from. For mobile websites, use standard conventions, such as a home icon that links back to the start screen, especially when navigation is not repeated on every screen.
• Use concise, clear, consistent and descriptive labels for navigation items and links. While always a good practice, it becomes even more important on tiny mobile devices.

ADDITIONAL READING

• “Chapter 1: Navigation,” Mobile Design Pattern Gallery, Theresa Neil

Content

Otherwise known as “the stuff on your website” (as Lou Rosenfeld and Peter Morville refer to it in Information Architecture for the World Wide Web), content is the various types of material in different formats, such as text, images and video, that provide information to the user.

GUIDELINES

• Present an appropriate and balanced mix of content to users (product information, social content, instructional and support content, marketing content).
• Use multimedia when it supports the user’s tasks in a mobile context, adds value to the content or supports the goals of the website. Most of the time, multimedia content is best provided when the user is looking for distraction or entertainment (such as news or funny clips) or when it has instructional value (for example, how to use an app or new feature).
• Always give the user control over multimedia content by not auto-starting video or sound, by allowing the user to skip or stop multimedia content and by being mindful of the bandwidth it takes up.
• Ensure that content is mobile appropriate. Just as we had chunking guidelines when going from print to Web, copy should be written for shorter attention spans on mobile devices. Optimize images and media for the device; this means scaling down for smaller devices and making sure images are sharp enough for the new iPad.
• Ensure that primary content is presented in a format supported on the target device. Even now, websites such as Volkswagen’s ask iOS users to download Flash.
  

ADDITIONAL READING

• “Mobile Content: If in Doubt, Leave It Out,” Jakob Nielsen, Alertbox
• “Mobile Content Strategy Link-o-Rama 2011,” Karen McGrane

Design

This has to do with the visual presentation and interactive experience of mobile, including graphic design, branding and layout.

GUIDELINES

• Remember the sayings “Mobilize, don’t miniaturize” (popularized by Barbara Ballard) and “Don’t shrink, rethink” (of Nokia). Both make the point that mobile design should not just rehash the desktop design.
• Design for glanceability and quick scanning. Glanceability refers to how quickly and easily the visual design conveys information.
• Maintain visual consistency with other touchpoints and experiences (mobile, app, Web, print and real world) through the use of color, typography and personality. Identifying Amazon in the stack below is easy even though the brand name is not visible.
  
• Guide users from the initial and most prominent element of the design to other elements to help them complete their tasks. This is known as visual flow. A good design brings together visual elements as well as information architecture, content and functionality to convey the brand’s identity and guide the user.
• Consider both portrait and landscape orientations in the design process. Devices increasingly support multiple orientations and automatically adjust to match their physical orientation. Maintain the user’s location on the page when they change orientation. Indicate additional or different functionality in the new orientation if applicable, as shown by ING:
  

ADDITIONAL READING

• “Designing Glanceable Peripheral Displays” (6 MB, PDF), Matthews, Forlizzi and Rohrbach, UC Berkeley
• Universal Principles of Design, Revised and Updated: 125 Ways to Enhance Usability, Influence Perception, Increase Appeal, Make Better Design Decisions, and Teach through Design, William Lidwell, Kritina Holden, Jill Butler

User Input

This has to do with the effort required to enter data, which should be minimized on mobile devices and not require the use of both hands.

GUIDELINES

• Limit input to essential fields. Or, as Luke Wroblewski says in his bookMobile First, “When it comes to mobile forms, be brutally efficient and trim, trim, trim.” Limit registration forms to the minimum fields required, and use shorter alternatives where possible, such as a ZIP code instead of city and state. My favorite offender of this guideline is Volkswagen’s form to schedule a test drive; the mobile form has more required fields than the desktop version (the extra fields are highlighted below):
  
• Display default values wherever possible. This could be the last item selected by the user (such as an airport or train station) or the most frequently selected item (such as today’s date when checking a flight’s status):
  
• Offer alternate input mechanisms based on the device’s capabilities where possible. Apps take advantage of quite a few input mechanisms built into devices, including motion, camera, gyroscope and voice, but mobile websites are just starting to use some of these features, particularly geolocation.
• Use the appropriate input mechanism and display the appropriate touch keyboard to save users from having to navigate their keyboard screens to enter data. Keep in mind that inputting data is more tedious on feature phones that have only a numeric keypad. For non-sensitive applications, allow users to stay signed in on their mobile device; and save information such as email address and user name because mobile phones tend to be personal devices, unlike tablets, which tend to be shared between multiple people.
  
• Consider offering auto-completion, spellcheck suggestions and prediction technology to reduce the effort required to input data and to reduce errors — with the ability to revert as needed. Disable features such as CAPTCHA where not appropriate.

ADDITIONAL READING

• “Forms on Mobile Devices: Modern Solutions,” Luke Wroblewski

Mobile Context

A mobile device can be used at anytime, anywhere. The mobile context is about the environment and circumstances of usage — anything that affects the interaction between the user and the interface, which is especially important for mobile because the context can change constantly and rapidly. While we often focus on distractions, multitasking, motion, low lighting conditions and poor connectivity, it also includes the other extreme — think using a tablet in a relaxed setting over a fast Wi-Fi connection.

“The Context of Mobile Interaction,” Nadav Savio

GUIDELINES

• Use device features and capabilities to anticipate and support the user’s context of use. The iCookbook app allows users to walk through a recipe using voice commands — a nice feature when your hands are covered in batter!
• Accommodate for changes in context based on the time of day and when the user is using the app. The Navfree GPS app automatically switches from day to night mode, showing low-glare maps for safer nighttime driving.
  
• Use location to identify where the user is and to display relevant nearby content and offers. A Google search for “movies” on a mobile device brings up movies playing nearby and that day’s showtimes, with links to buy tickets online if available.
• Leverage information that the user has provided, and respect their preferences and settings. After the first leg of a multi-leg flight, TripIt showed me the flight and gate information for my next flight, as well as how much time I had to kill. United’s app did no such thing, even though it knew much more about me. It could have shown me how to get from my current plane to the connecting flight and highlighted the location of the United Club along the way, where I could comfortably spend my two-hour wait, since it knew I was a member.
• Default to the user experience most appropriate for the device (i.e. a mobile experience for small screens, and perhaps a desktop-like experience for tablets), but give users the option to have enhanced features. A big discussion on how to present this to the user recently took place, with Jakob Nielsen recommending a separate mobile website and Josh Clark arguing instead for a responsive design; yet others believe that Nielsen and Clark are both wrong.

ADDITIONAL READING

• “The Context of Mobile Interaction” (0.2 MB, PDF), Nadav Savio and Jared Braiterman
• “On Mobile Context,” Jason Grigsby
  Don’t miss the links to resources on the mobile context near the end.
• “When and Where Are People Using Mobile Devices?,” Luke Wroblewski

Usability

This is the overall measure of how well the information architecture, design, content and other elements work together to enable users to accomplish their goals.

GUIDELINES

• Make it clear to the user what can be selected, tapped or swiped (this is known as affordance), especially on touchscreen devices. One of the big findings of Nielsen Norman Group’s usability studies of the iPad was that users didn’t know what was touchable or tappable. Another issue was swipe ambiguity: when the same swipe gesture means different things in different areas of a screen. Ensure that touchability is clear and that items such as links, icons and buttons are visibly tappable.
• For touchscreen devices, ensure that touch targets are appropriately sized and well spaced to avoid selection errors. Also, place touch targets in the appropriate screen zones; for example, put destructive actions such as those for deletion in the “Reach” zone, as shown by Luke Wroblewski in his book Mobile First:
  
• Follow conventions and patterns to reduce the learning curve for users and to make the mobile experience more intuitive. Dedicated apps should follow platform-specific standards and guidelines. A comprehensive collection of links to official UI and UX guidelines is available in the article “UI Guidelines for Mobile and Tablet Web App Design” on Breaking the Mobile Web.
• Ensure usability in variable conditions, including for daylight glare and changed angle of viewing and orientation, by paying attention to design elements like contrast, color, typography and font size.
• Do not rely on technology that is not universally supported by your audience’s devices, including Java, JavaScript, cookies, Flash, frames, pop-ups and auto-refreshing. When opening new windows or transitioning from an app to the browser, warn users to avoid overwriting already open tabs.

ADDITIONAL READING

• “Usability of iPad Apps and Websites,” Nielsen Norman Group
• “UI Guidelines for Mobile and Tablet Web App Design,” Max Firtman
• “Mobile Usability Update,” Jakob Nielsen, Alertbox

Trustworthiness

This relates to the level of confidence, trust and comfort that users feel when using a mobile website or app. According to a 2011 study by Truste and Harris Interactive, privacy and security are the top two concerns among smartphone users:

GUIDELINES

• Do not collect or use personal information (such as location and contact list) from mobile devices without the explicit permission of the user. The first few months of this year have seen numerous reports of apps secretly copying smartphone address books, with watchdogs up in armsand users retaliating.
• Make it easy for users to control how their personal information is shared in a mobile app by asking before collecting their location data and by allowing them to opt out of targeted advertising.
• Clearly state your business practices (including for privacy, security and returns), and present them contextually (such as by displaying links to your privacy and security policies on the registration screen). The policies themselves should be accessible in a secondary section of the mobile user experience (such as the footer or a “More” tab). Reinforce credibility by displaying trusted badges, especially when users need to trust you with their personal or financial information.
• Present policies appropriately on mobile devices by offering a concise summary and an option to email the entire policy. Privacy and security policies tend to be notoriously long and full of boring legalese that users often blindly click through to continue what they really want to do, so make it easy for users who are interested in the fine print.
• Don’t break the user’s workflow when displaying legalese. Take them back to where they were before being interrupted, instead of making them start all over.

ADDITIONAL READING

• “Layered Policy Design“, TRUSTe Blog

Feedback

This has to do with the methods for attracting the user’s attention and displaying important information.

GUIDELINES

• Minimize the number of alerts the app displays, and ensure that each alert offers critical information and useful choices. For a smile, look at Chris Crutchfield’s video on notification and alert overload.
• Keep alerts brief and clear, explaining what caused the alert and what the user can do, along with clearly labeled buttons.
• Notifications should be brief and informative, not interfere with anything the user is doing, and be easy to act on or dismiss.
• Provide feedback and confirmation on screen without disrupting the user’s workflow.
• If your app displays badges and status bar notifications, keep the badges updated and clear them only when the user has attended to the new information. Chase clears the notifications badge for its mobile app the moment the user visits the notification section, even before the user has seen which of their multiple accounts triggered the badge, forcing them to hunt through each account to see what triggered it.

ADDITIONAL READING

• “Mobile Notifications,” Fred Wilson
• “The Future of Mobile Notifications,” True Ventures
• “Chapter 8: Feedback and Affordance,” Mobile Design Pattern Gallery, Theresa Neil

Help

This relates to the options, products and services that are available to assist the user in using the website or app.

GUIDELINES

• Make it easy for users to access help and support options. Users commonly look for help in the footer of a mobile website and in the toolbar or tab bar of an app.
• Offer multiple ways to get support, including options relevant in a mobile context, such as self-serve FAQs, live support via click-to-call, and near-real-time Direct Message tweets. Two financial service companies that actively offer support via Twitter are American Express and Citibank.
• Present a quick introduction and short tutorial on using the app when it first launches, with options for the user to skip and view later.
• When introducing new or unique functionality (such as when check depositing via mobile apps was first introduced), offer contextual help and tips to guide users the first time, and as a refresher for infrequently used functionality.
• Offer help videos when appropriate, but allow the user to start, pause, stop and control the volume as they wish, and keep in mind the multimedia guidelines mentioned in the “Content” section above.

ADDITIONAL READING

• “Chapter 7: Invitations” and “Chapter 9: Help,” Mobile Design Pattern Gallery: UI Patters for Mobile Applications, Theresa Neil
  Chapter 7 is available online at UX Booth.
• “Top 6 Help Design Patterns for iPhone Apps,” Catriona Cornett, inspireUX

Social

This relates to content and features that create a sense of social participation, that enable user interaction and that facilitate sharing on established social networks.

GUIDELINES

• Create and maintain a presence on social networks (for example, a Facebook page) and local services (for example, a profile page on services such as Google Places, Bing Business Portal and Yahoo Local). These will be highlighted in search results and on location-based social networking services. In addition to your business’ name, include your physical address, phone number, URL and hours of operation.
• Incorporate your social presence and activity into your website’s mobile experience by showing your recent activity and offering an easy way to follow or like you on these networks.
• Integrate social networking features into your website’s mobile experience to make it easy for users to connect with their own social networks. This could be as simple as using APIs to enable social sharing, bookmarking, tagging, liking and commenting.
• Invite users to generate content featuring your brand, product or service from their mobile device, offering some incentive in return. For example, the burger chain Red Robin could invite the user to share a picture of their child reading a school book at one of its locations to get a free milkshake.
• Provide mobile offers that can be shared and go viral. American Express currently offers savings and discounts to users who sync their profiles on networks such as Facebook, Twitter and Foursquare to their credit card.
• Apps that rely on social contributions from users should look at ways to seed content in a way that is useful and, eventually, self-sustaining. For example, the My TSA app has a user-contributed feature that shows the wait times at security checkpoints, but it often shows outdated information, even though airport staff post physical signs of wait times at some airports.

ADDITIONAL READING

• “The Definitive Guide to Adding Social Features to Your Mobile Apps“, Verious

Marketing

This has to do with the methods by which a user finds a website or app and the factors that encourage repeated usage.

GUIDELINES

• Ensure findability by optimizing for mobile search and discovery, such as by keeping URLs short. If you have a separate mobile website, follow URL naming conventions (m.site.com or mobile.site.com). In mobile search results, provide quick access to location-based content (e.g. directions from one’s current location) and device-formatted options (e.g. click to call).
  
  Mobile-formatted information is optimized for UPS (left), but partially missing for FedEx (right).
• “Quick response” (QR) codes should lead to a mobile-optimized landing page, instead of a traditional page that requires zooming or, worse still, to the website’s home page, from where the user has to hunt for information. As a side note, QR codes painted on buildings should be big and clear enough to be recognized and deciphered by mobile devices.
• Email campaigns should include a link to view the message in a mobile-friendly format, which itself links to the relevant offer page formatted for mobile — unlike CVS/pharmacy, which takes users to its mobile home page.
• Promote your app in other channels where possible (TV, print and in-store advertising), and offer incentives to download and use the app, usually in the form of discounts and savings. If your app has a price tag, attract users to buy it in an overcrowded market by offering a limited-time promotional price. Another option is to promote the app through the Free App A Day marketplace.
• Prompt users to rate and review your app or to share it on social networks after they have used it, but give them the option to postpone or stop these prompts. This will not only generate word of mouth, but give you insight into what users like and don’t like about the app. “Taking Control of Your Reviews” by smalltech discusses the strategy of encouraging happy customers to post reviews and unhappy customers to email you feedback.

ADDITIONAL READING

• “iPad App Marketing Case Study: Flickpad,” Chad Podoski, Mobile Orchard
• “The Art of Launching an App: A Case Study,” John Casey, Smashing Magazine
• “How to Market Your Mobile Application,” Michael Flarup, Smashing Magazine

Conclusion

Mobile user experience is still a developing field, and opportunities for improvement continue to emerge. We’ve presented an overview of the key elements of the mobile user experience, along with some guidelines to get started in each. Focusing on these individual elements will help us create great overall mobile user experiences for our users.

Special thanks to Mr. Lyndon Cerejo