For many companies, designing for mobile simply translates to migrating information available on web to the mobile platform. In a few cases, mobile design may even be tackled as a starting point for building more complex web design. In both scenarios a unified, holistic user experience with the company services and brand may not be supported because the two platforms are likely to develop in separate silos. Understanding and attending to the user experience, in addition to the end product, across platforms as a guiding focus for design, can encourage greater customer satisfaction and minimize user confusion.
Attending to the user experience when approaching design for both web and mobile web platforms entails thinking through how users uptake a company’s offerings over multiple touch points. Instead of simply transferring similar content from web to mobile, there must be some consideration given to how end-users will engage with the mobile interface that both differs from and/or builds from web content. For example, the web interface for United Airlines below highlights a number of menu options including booking a flight, finding flight specials, and referencing travel information. In contrast, the mobile interface is pared down with one-touch access to important mobile user tasks and includes personalized content. The advantage to mobile users is the quick and efficient access to both company and personal information.
United Airlines Desktop Web Interface
United Airlines Mobile Interface
This approach to cross-platform design encourages companies and UX professionals to articulate the kinds of online experiences they would like for their users to have in a holistic manner. Ideally, part of this effort is achieved through a consideration of the various contexts in which users might access information, why they are accessing the information and on what devices. For example, mobile users often reach for their phones when in-between tasks during the day or have limited time, and consequently are often very goal-directed in their behaviors. Consideration may also be given to how design will vary when users access online content initially in a desktop environment and then later with a mobile device on a slower 3G connection. As the ecosystem of online offerings expands with social media and geo-location services, understanding how to engineer the user experience across web and mobile web platforms will become even more critical (and complex). For these reasons as well as others, attending to the user experience is increasingly likely to become a first step in considering how to approach cross-platform design.
When the relationship between the web and mobile user experience is not well thought out or understood, moving between interfaces can be tedious and increase cognitive load for end-users. To avoid these complications, efforts to create the optimal user experience across platforms involve answering a few key questions for the project on hand.
Who are end-users and what do they do across web and mobile web platforms?
The need to understand end-users when developing or testing a new technology is probably a no-brainer in the world of UX design. Designing for our end-users means segmenting our given populations into meaningful categories (e.g., return users, expert users) and understanding the relevant activities of those populations. In the context of developing multiple platforms, the question of how to define our users is critical because we want to understand how their activities might vary across the different interfaces we provide. For example, if a large percentage of our user base accesses services through mobile primarily, a strategy around how to provide as much functionality as possible in the mobile space without overwhelming users may be warranted.
What are company goals for user experience across multiple platforms?
While meeting user goals is extremely valuable, we also want to ensure that company objectives are being met. We start by asking clients about the full range of company services offered and how those are highlighted for users across platforms. Thinking through how services and/or content complement and reinforce one another across platforms is an important step towards defining a holistic user experience.
Web and mobile platforms each have particular affordances that companies can take advantage of in promoting their long-and short-term objectives. For example, users regard mobile phones as highly personal objects and as such are often successfully used by companies to communicate personalized content. Desktop web environments are ideal for browsing and exploration and can be designed to encourage users to stay on sites longer.
What is the level of predictability across platforms?
Predictability has to do with the level of certainty that users have about the outcome of their actions. An evaluation of predictably is key in thinking about how users experience moving between platforms. Users may be left confused or feel burdened if they come across novel information sets across platform interfaces. Among other factors, we have evaluated predictability in relation to the visual design and information architecture presented across both the web and mobile devices.
Visual design
Maybe it’s overkill to mention the importance of consistency in visual design but this is a key element in providing users guidance on actions they can take across platforms. Some measure of predictability is lost when visual design aspects such as iconography, fonts, graphics and colors are not reliable or coherent. In addition, consistent visual design solidifies users’ understanding that they are visiting the same company site, and reinforces their experience with the company brand.
Information architecture
Replicating a consistent information architecture across platforms is also an extremely important consideration but should not entail a one-to-one mapping of navigation structures. Users will anticipate the location of information based on how they initially experienced its organization (on web or mobile). If they do not see recognizable menus, consistent labeling and or navigation structures, moving back and forth between mobile and web interfaces will be a time-consuming and tedious process. Also important to note is that desktop navigation structures replicated on smaller mobile phone screens often result in overly complicated navigational pathways and lengthy menus. For this reason, it’s helpful to have more shallow, narrowly defined information categories on mobile when compared to desktop.
The Sephora mobile interface has navigation structures on mobile that are consistent with web presentation. Note that the mobile interface highlights only the global navigation structures that can be found on web and follows same order of presentation.
Sephora Mobile Global Navigation
Sephora Web Global Navigation
How will user interface differ across platforms?
Improving navigation and decreasing user frustration will also entail adjusting user interface to accommodate the various ways users will interact with system. For example, managing the presentation of complex information sets or multiple features will vary across platforms. Particularly critical in mobile space, managing complex sets of information or processes has often been tackled through implementing progressive disclosure strategies. Using this approach, content is prioritized according to users’ primary tasks and additional options are only shown if users actively request them. There are also more straightforward considerations in interface design that are often overlooked, like sizing buttons according to whether fingers (mobile web) or mouse will be used (web) to select.