Skip to main content

Building Mobile User Experiences

Author : Giorgio Sardo - Technical Evangelist, Microsoft Corp
Blog : http://blogs.msdn.com/Giorgio

This article appeared in the Expression Newsletter; subscribe to get the next issue.

Intro

Mobile design is a field that is changing rapidly and unexpectedly. The opportunity of applications for the converged device market (smart phones and wireless handhelds) has been growing exponentially in the last few years. However, some constraints still arise from the context of use including small form factor, cross device support, information overload and content organization. In this article you will learn some of the best practices to build rich mobile experiences using the Microsoft platform and tools.

mobile cell phone phone of the future

Market

mobile market

The number of mobile devices has grown exponentially in the last decades, moving from a few hundred by early 90’s, reaching about 10 million users in 2000 and jumping to 1 billion two years later. What about the future? Experts estimate the mobile handset proliferation to increase to 4 billion mobile phones by the end of 2010.If we couple this information with the UN prediction of 6.8 billion humans…we can easily figure out how an astounding 59% of the planet will own a phone in the next two years. This result is even more interesting if we consider that the culture and wealth distribution is not linear for all the countries; this is the case in Italy, where the mobile penetration is already up to 140% (which means there are more mobile phone than humans!).

In such a demanding market, what do our users want? What are they looking forward to using in their phones? How would they get the most out of a touch panel device? These are some of the questions a panel of 14000 people in Japan has been asked about. According to this pool, mail and task management applications are the most requested, followed by internet provider portals and infotainment applications (see Figure 1).

Chart

Figure 1 Functions' request in Japan

Challenges

However it’s fair to state that there are certainly a few limitations that have been challenging mobile developers in the last years.Mobile Challenges

Small screen size is the most obvious challenge. Complex, dense mobile application can be difficult to read and navigate on a mobile device. For this reason you should look carefully for redundant text or unnecessary graphics that you can remove without affecting your site's core functionality. Try to avoid duplicating all of the richness and functionality of a site that is designed for a desktop computer, considering instead the needs and usage scenarios of your mobile users.

Difficulty of data input is another shortcoming cited frequently. The keypad is well suited to number entry, but ill suited to text entry. Entering text on a mobile phone is hard, and people tend to avoid it if they can. The less text you have to input, the better. Moreover on-screen keyboards often fail in daily usage due to lack of UX (for instance in the keys’ design) or due to poor consideration (for instance finger/thumb, or support for left-handed people).

Finally, in the case of mobile websites, browser inconsistency, not only the usability of the interface from agent to agent, but mark-up rendering as well, is an important challenge for developers. Mobile pages are highly dependent on the level of HTML/XHTML or plug-in support provided by the target device. Mobile devices offer a variety of browsers with varying levels of support for established standards.


Technologies

Microsoft has been working on mobile platform since beginning of this century, with the first version of Windows CE 3.0 available for phone and PDA. During the last few years we’ve seen different products, frameworks and technologies. Today Microsoft offers to its customers the operating system Windows Mobile 6.1, that include a set of “state-of-art” mobile technologies such as:

  1. .NET Compact Framework
  2. ASP.NET Mobile
  3. Silverlight for Mobile

.NET Compact Framework

.NET Compact Framework

The Microsoft .NET Compact Framework is a key part of realizing Microsoft's goal to provide customers with great experiences any time, any place, and on any device. The .NET Compact Framework is a rich subset of the .NET Framework, thus providing the same benefits as the .NET Framework.  Moreover the .NET Compact Framework is designed specifically for resource-constrained devices, such as PDAs and smart mobile phones. It simplifies the process of creating and deploying applications to mobile devices while also allowing the developer to take full advantage of the capabilities of the device; for instance, the OpenNETCF framework provides a comprehensive set of mobile extensions and libraries created by the community of MVP and several proficient developers.

The latest version (.NET Compact Framework 3.5 SP1), include new features that extend an already rich and performing framework:

  • Windows Communication Foundation support. The .NET Compact Framework 3.5 supports WCF, which is Microsoft’s unified programming model for building service-oriented applications. Clients that are running the .NET Compact Framework can connect to existing WCF Web services on the desktop. In addition, support for a new WCF transport, the Microsoft Exchange Server mail transport, has been added for both .NET Compact Framework applications and desktop applications
  • Language-Integrated Query(LINQ) adds general-purpose query facilities to the .NET Compact Framework that apply to various sources of information such as relational databases, XML data, and in-memory objects
  • New Windows Forms controls, such as TabPage and Panel, Control with ClearType font support, ComboBox, etc

SoundPlayer, an api which enables you to play multiple sounds. A device can mix these sounds if the hardware supports this capability

ASP.NET Mobile

ASP.NET

The ASP.NET mobile controls, formerly known as the Microsoft Mobile Internet Toolkit (MMIT), extend the power of the .NET Framework and Visual Studio to build mobile Web applications by enabling ASP.NET to deliver mark-up to a wide variety of mobile devices. The ASP.NET mobile controls reduce the work required for developers to target several devices by eliminating the need to write and maintain numerous web-applications each targeted to a specific browser. The ASP.NET mobile controls render the appropriate markup (HTML 3.2, WML 1.1, cHTML, XHTML) while dealing with different screen sizes, orientations and device capabilities. Finally using Windows Mobile devices we can leverage the support of Internet Explorer Mobile for AJAX in order to build and deliver interactive asynchronous content by using the JavaScript and XML.

Silverlight for Mobile

Silverlight

Silverlight expands the reach that developers and designers have when creating rich internet applications on mobile devices. This enables them to easily leverage content, assets, and code that they are using today for browser-based Silverlight applications.

Tooling

The main tool provided by Microsoft to build mobile experiences (both for .NET Compact Framework, Asp.Net Mobile and Silverlight) is Visual Studio .NET 2008, that support natively these entire platforms by providing to the user consistent and easy templates to build mobile solutions using managed code (C#, VB.NET, …).

Visual Studio 2008

Additionally, Microsoft Expression Studio will enhance the development of Silverlight applications: Expression Blend brings together the task of wiring design with code, while Expression Design allows the creation of visual elements.

Expression Studio 2

Why three technologies? Which one is better? Each of these technologies has a different scope, works on different platforms and reaches different users.

The .NET Compact Framework should be your choice in case you’re building an enterprise application, where you need to leverage features like security, memory management, web service calls. Moreover it will be your platform for those solutions that rely on device peripherals, such as camera or GPS.

The ASP.NET Mobile in conjunction with AJAX is the ideal solution for web application with a high update rate and a low need of interaction or stunning user interface.

Support for Silverlight on devices will quickly help change the landscape for the types of user experiences consumers can expect from their phones by bridging rich interactivity, wireless data, media and more.

Nevertheless it’s possible to define a set of best practices and user experience tips which are valid across all of these technologies. Please note that these guidelines are not tied to a specific platform (consider Windows Mobile, iPhone, Symbian, Android …) and they don’t pretend to be an all-you-need-to-know in order to build mobile applications. Authors like Cameron Moll, Barbara Ballard and many others have written great books on mobile user experience (refer to the resources section for more links).


Best Practices

A mobile application must provide users with a consistent and predictable user interface. A well arranged UI provides a positive user experience, speeds up learning and lowers the total cost of ownership.

Mobile UX

Why do we need to focus on user experience for mobile application? The importance of creating a good mobile user experience in order to achieve better services has grown in prominence over the past years. Essentially, users need to find what they want, when they want it, with minimal complexity and to a satisfactory quality.

User Experience

In the next chapter we will discuss the following topics:

  • Understand the user
  • Understand the environment
  • Understand the actions

Understand the user

Creating a good UI always involves identifying your target users and making sure that your application meets their needs and requirements by taking the user and context into consideration. On smaller mobile devices, this consideration is even more important because they are often used in extremely challenging and varied situations. Consider the user’s environment, the user’s skills, and the task to be carried out using the application. Focus your application on users’ actual needs—your application won’t necessarily be better just because it has a lot of options.

Make sure you understand your users’ goals, preferences, and knowledge level before designing your application. Consider the following:

  • What are your users’ digital device skills? Are they used to working with digital devices and software applications?
  • What are your users’ skills in using your application? Does the application revolve around their professional area?
  • Is the application the focal point for your users? Or is their attention limited?

Make sure you don’t use interaction patterns that demand a lot of attention if your users don’t have the skills or have limited possibilities of interacting with your application.

Therefore, know your user, and make allowance for any special considerations in your interface design.

Understand the environment

The working environment can have a large impact on the use of the application. Consider the following case: will the user interact with the application in extreme lighting conditions (for example, a sunny day on a construction site)? Will the user interact with the application in extremely cold working conditions (for example, in a warehouse for frozen goods)?

If you want users to be able to interact with the application in extreme lighting conditions, the individual task pages must be easy to see. This can be achieved by using sharp contrasting colours, and by using large icons and navigational elements. If the user is working in extremely cold working conditions, and needs to wear gloves when using the application, the device and the application must take this into consideration. Ensure that the user can use the device without using hardware buttons or a pen. Therefore, investigate the environment in which your users will use your application, and make allowance for these considerations in your interface design.

Understand the actions

Investigate the tasks your users use the application for. Consider the following:

  • Do your users perform the tasks every day?
  • Or do they only do all or some of them every six months?
  • Are the tasks exactly the same every time? 
  • Are any of the tasks a step-by-step process?
  • Do the tasks require many options?

If the user only performs a task once every six months, it is even more important that the interface is intuitive and thorough, telling the user what to do to proceed and complete the task. If the task is different every time, the UI should make allowances for different task flows. Therefore, investigate factors concerning tasks, and make allowances for these considerations in your UI design.

If you are building a wizard, with a step-by-step flow, try to balance the number of pages with the density of the content in each page; avoid splitting the same group or set of questions in more pages, as the user will tend to forget what they replied or wrote previously. Finally, when you give options to the user, reduce to a minimum the number of possible choices.

Development

In the next chapter we will discuss the following topics:

  • Prototyping and Testing
  • Devices Size
  • Smart detection

Prototyping and Testing

Prototyping is a powerful stage to test some aspect of an intended design without attempting to exactly simulate the final visual appearance. It is also a way to understand the difficulties of development and the scale of a problem. Prototyping is an essential element of an iterative design approach, where designs are created, evaluated, and refined until the desired performance or usability is achieved.

For mobile applications, initial prototypes should be quick and dirty to help identify problems with the model and to make improvements early in the design process when they can be modified easily and inexpensively. For instance, a developer can simulate an interaction with users (perhaps even drawing screen mock-ups on paper) before actually developing the code to provide it in real-time. This allows entrepreneurs to get a quick and early sense of how users will respond to such an application design. Key to any successful prototyping is to involve potential customers and their feedback throughout the design cycle.

Phone 1Phone 2Phone 3

Figure 2 Windows Mobile Devices

Although it can be costly and time-consuming to acquire dozens of mobile devices, you should test pages on as many devices as possible. Try to acquire a representative sample of devices that span a wide range of screen sizes, browser types, and page weights.

Device capabilities and size

Over the years the relative screen size difference has increased, with a variety of devices with small resolution (128 x 128 px) to bigger screen and depth (800 x 480 px). You can see that the smaller screens have a portrait orientation and the large screens have a landscape orientation. Between them are the phones that can change orientation, they can work in both landscape and portrait. Smaller screen sizes like 176 x 220 px are disappearing and the 128 x 160 px size is pushed down into basic phones.

The latest devices in the market (HTC Touch Diamond, Sony Ericsson Xperia X1, ...) offer bigger screens, higher resolutions, higher DPI: the screens are not only getting bigger, they are getting sharper at the same time.

It is obvious that 240 x 320 px (also called QVGA) is the dominant screen size overall. It is by far the most common resolution and it is growing rapidly: if you plan to scale your application deployment on as many devices as possible, this should be your preferred target screen size.

Smart detection

Due to the big diversity in the device manufactory space (touch/non-touch, QVGA/VGA, ...), you should be proactive, providing different ways to access and interact with the mobile application depending on the device capabilities:

  • In case of stylus input, consider left hand users too
  • Eventually provide a virtual projected keyboard for device without keyboard
  • Consider finger gestures as input method on touch-screen device
  • Intercept the user-agent strings (web application) or device settings (device application), and accordingly update the size or input-system for your solution.

Design

In the next chapter we will discuss the following topics:

  • Keep it Simple
  • Layout
  • Fonts
  • Colors
  • Navigation

Keep it simple

Keep it simple

Strive for the simplest design that does the job well. Make it intuitive and easy to use:

  • Be concise. Designing for small screen sizes means that you must be concise and to the point. Keep labels of controls, headlines, columns, and commands brief and accurate.
  • Guide your users and make task completion intuitive and easy.
  • Don’t show disabled functionality. Provide only the available options for the user.
  • Give clear feedback to indicate whether a task is in progress or has failed.

Make the default experience the right experience for your users. Don’t assume that they will configure their way out of a bad initial experience.

Design your images with clean lines and simple shapes because more complicated elements tend to appear ragged. It is good practice to avoid large detailed images because the scaling operation can obscure critical information.

Layout

As you design your applications, you should keep the small screen size in mind and remember that the actual usable space is less than the total screen dimensions of your device. Avoid displaying elements that require horizontal scrolling whenever possible, especially for textual content. Necessarily large images (such as maps) are among the very few exceptions to this rule.

Size, spacing, and placement of information are critical in creating a visually consistent and predictable environment. Visual structure is also important for communicating the purpose of the elements displayed in a task page. Elements with the same indentation will acquire the same relevance; nested elements will express a dependency or hierarchy.

In general, follow the layout conventions for how information is read. In Western cultures, this means left-to-right, top-to-bottom, with the most important information located in the upper-left corner.

Let’s take for instance a well designed mobile application for the enterprise: Microsoft Dynamics Mobile. This application is optimized for QVGA in portrait, landscape, and square mode. In portrait mode, the full task page size is 240 x 320 px, but the top bar and bottom bar take up 26 px each and therefore the available task page size is 240 x 268 px. In landscape mode, the page size is 320 x 240 px, but the top and bottom bar take up 26 px each, which leaves 320 x 188 px available.

Dynamics

Figure 3 Microsoft Dynamics Mobile

The application in Figure 3follows a common design pattern, where the screen is divided in 3 main areas with specific functions:

  • Top space: notification area, where you can show important messages or give a feedback on user actions
  • Center space: content area. You need to ensure that material that is central to the meaning of the page precedes material that is not.
  • Bottom space: input area. This is a great location for user interaction (particularly input), as it enables the user to use the stylus/finger without losing focus on the main content.

Fonts

Careful use of fonts is an important part of maintaining a consistent UX presentation on mobile devices. Font support – including available typefaces and rendering capabilities – varies widely among mobile devices. Although you can’t control a particular device’s fonts, try to use common type specifications so that your pages have a consistent look. Keep in mind that it’s more important to focus on the Font-Size of the font, rather than the Font-Family, due to limited visibility and specialization on mobile devices.

Text is easiest to read when there is a large difference between the luminance of the text and the background. Black text on a white background gives the highest contrast—dark text on a very light background can provide high contrast as well. This combination is best for primary UI surfaces.

Colors

Should the application have a white background? Should it be colorful or black & white? Depending on the type of application you are developing you might choose a different color scheme. However the same rules that apply for a PowerPoint presentation are generally valid for device screen as well. As we’ve seen previously the sun or generically the weather conditions could affect the user experience of the application; it’s therefore important to implement a sufficient brightness and contrast.

Let’s consider for instance the theme colours of the MSN Mobile UX. The header background uses a dark shade of the theme colour, and other components of the site use lighter shades of the colour. Moreover most of mobile colours are consistent with the PC version of the same portal.

The following table shows the current theme colour assignments for and Mobile-based channels.  

Page/channel

PC theme

Mobile theme

Home page

blue

blue

MSNBC

dark blue (custom)

dark blue (custom)

FOX Sports

gray (custom)

steel

Weather

blue

orange

Money

blue

green

Entertainment

black

black

The following illustration shows MSN Mobile headers for Money, Weather, and FOX Sports:

MSN

Keep in mind that users have limited interaction options. This means that they need a simple and logical task flow that is easy and intuitive. You can design a good task flow on the device by streamlining common navigation tasks, and by designing each task page with a clear purpose and with a clear indication of what the task is.

Designing the navigation structure is all about giving the user control of the navigation. Small screen sizes on devices call for a simple navigation structure. Therefore, design your application to complete one task at a time.

Make sure that your users don’t waste energy thinking about where in the application they are and which navigational element to choose to proceed in the task flow. This can be done by using navigation buttons consistently. When the left soft key is used to perform the primary task on one task page, it must be used to perform the primary tasks on all task pages.

Resources

Conclusion

In this article you’ve seen how mobile design has been changing in the last few years, adapting to a more specialized and demanding market. Today mobile developers still need to face a number of constraints or limits, although technology has made huge progress. In this scenario Microsoft offers a wide variety of tools, platform and frameworks that enable you to build compelling mobile solutions.

In the next articles you will learn to get the most out of powerful tools such as Microsoft Visual Studio .NET 2008, Microsoft Expression Blend and Microsoft Expression Design to produce stunning end-user mobile applications. In the meantime, you can reach me for questions or suggestions on my blog or at gisardo@microsoft.com.

Giorgio Sardo, Technical Evangelist, Microsoft Corp