When Microsoft originally unveiled Windows
Phone many skeptics expected the phone would simply try to play catch-up
with Apple’s and Google’s offerings. Microsoft had other plans, though.
The new operating system for the phone was a departure from existing
offerings from the other mobile operating system vendors (primarily
Apple, Research in Motion, and Google). Instead of just mimicking the
icon pattern screens that iPhone and Android seemed to love, Microsoft
thought in a different way. Application and operating system design is
defined in a new design language. This design language defines a set of guidelines
and styles for creating Windows Phone applications. The design of the
Start screen laid out by this design language is similar to other
smartphone designs in that it is a list of icons. Instead of separating
the icons into pages, Windows Phone lets users scroll through the icons.
Windows Phone is also differentiated from other smartphones in that
each icon can include information about the application. These icons are
called Live Tiles, as shown in Figure 1.Figure 1. Windows Phone Start screen
Windows Phone 8 ups the ante to include
features for the next generation of phones including support for
multi-core processors, Near Field Communications (e.g. NFC), support for
high-resolution screens, built-in support for Skype and development of
native game applications using the same APIs that are used on the Xbox
(e.g. DirectX). Windows Phone 8 is apt to be the turning point in the
maturation of the platform that will bring broad adoption of the phones.
Probably the biggest change in Windows
Phone 8 is not obvious at first glance. The underpinnings of the
operating system are now the same as Windows 8. That means that the
operation system that runs the Windows 8 RT tablets powers the new
phones. A single platform will allow for better scalability and
performance than previous incarnations of the phone.
The Start screen should be a place where users can
quickly review the status of the phone. The Live Tiles will give user
information such as the number of missed phone calls and the number of
email or SMS messages waiting, or even third-party information such as
the current weather. When you develop your own applications you can
either create a simple icon for the Start screen or build a Live Tile
for your users.
For applications, the Windows Phone screen
is divided into three areas in which the user can interact with the
phone: the system tray, the logical client, and the application bar (see
Figure 2).
Figure 2. Phone screen real estate
The system tray area is managed by the phone’s
operating system. This is where the time, signal strength, and alerts
will appear to the user. Most applications will leave this area of the
screen visible to the user. Some applications (e.g., games) may hide
this area, but you should only do so when critical to the success of
your application.
The logical client area is where your
application will exist. This area shows your user interface and any data
and points of interaction.
The application bar shows options for your
application. While using the application bar is not a requirement, it is
a very common practice as it gives users access to your application’s
options and menus. For example, Figure 3
shows a simple note-taking application that uses the application bar to
allow users to create new notes or show the menu (note that the
ellipsis can be clicked to open the list of menu items).
Figure 3. The application bar in action
One big distinction that users will see in many of the applications built into Windows Phone is the use of hubs.
The central idea of a hub is to provide a starting point to get the
user to use natural curiosity to learn what is available in the
application. Usually these hubs take the form of applications that are
larger than the phone screen. Instead of the typical page-based
applications that are fairly commonplace on smartphones, the UX design
language introduces something called a panorama application. For panorama applications the phone is used as a window that looks into a larger application surface. You’ll notice in Figure 4
that the content of the screen takes up most of the horizontal real
estate, but the next section of the panorama application shows up on the
right side of the screen to help the user understand that there is more
content.
Figure 4. Panorama application
As the user navigates through the panorama application, the virtual space is moved within the window. For example, in Figure 5 you can see how, after sliding the application to the left, the rightmost part of the panorama becomes visible.
Figure 5. Last pane of a panorama application
The use of the panorama application
results in a simple but powerful user interface design that users should
find very intuitive.
By following the guidelines specified by
UX Design Language, you can create applications that should be
consistent with the rest of the phone, while giving you the freedom to
create applications of any kind. In this way, the UX Design Language
helps by defining basic ideas of how a Windows Phone application should
look so that the user can see complete consistency. At the same time,
the UX Design Language says you can simply take over the entire user
interface and not use the basic ideas of the phone chrome, leaving you
the flexibility to create either custom experiences or applications that
look like they belong on the phone.
Figure 6 shows example apps with and without the chrome applied.
Figure 6. Using Phone chrome, or not
