By Gemma Yussuf, Microsoft

This article focuses on the fundamentals one must consider when designing for Windows Phone 8, highlighting why this is the platform that offers designers the opportunity to create new, exciting and innovative apps. The 8 reasons below will help you understand why this platform is revolutionising the way we think about design, carving the future of the digital world.

Design Style

One of WP8’s core principles is about content and putting it front and centre, allowing the user to be immersed in what they love. Let’s say Goodbye to Chrome which is nothing but a distraction to the user, stripping away those boxes, lines, navigation, and interactions to create a more clean and modern looking app.

The layout in WP8 is very important, allowing typography to create a sense of structure within your app, creating a more natural way of navigating. Using whitespace content can be separated, giving the app a clean and open feel that is a much more user friendly experience.

Another important principle is around being authentically digital, about going beyond the rules and properties of the physical world to create new and exciting possibilities in a purely digital space. There are occasions when the digital world can enhance the users experience, so let’s take advantage of this and forget about Skeumorphic design. The Official British Lions app, below, gives users the opportunity to pick the players they feel should be on the plane to the 2013 rugby tour, in real life how would we ever get the chance to do that?

image

When thinking about WP8 Design Style, remember:

  • Clean, open, and fast is the key
  • Celebrate typography
  • Think authentically digital

 

Branding

Due to the flat design of WP8, we believe it allows your brand to shine through without seeming overpowering to the user.

So how do we allow the brand to shine? Where are the right places to surface the brand in an app?

By emphasising your brand in the right places with text foreground colour, panorama backgrounds, small brand elements at the tops of pages.

Lastminute.com is a great example of this, where they feature a main city on the landing page to give the user an immersive experience, a user is likely to launch the app to see which new city is being featured. New content draws the user back in. The background image continuity is throughout the app, bringing in the different elements from their website. The Secret Hotel image shows a dark and mysterious background image and, whilst it is subtle, it ties into the content of that page where the name of the hotel is unknown. Other ways that lastminute.com allow their brand to shine through is by using their pink brand font as the accent colour in the app.

image

Remember when considering Branding within your app:

  • Use a background on the panorama to make the screen more immersive
  • Add a brand logo to the panorama, or a smaller logo to the top of secondary pages
  • Use the brand colours as accent colours in the app

Panorama

The panorama control gives the designer the ability to create a more immersive experience for the user. Imagine a long horizontal canvas, it extends beyond the confines of the phone screen. Consider the 3 main themes within your app, and ensure that you design each section uniquely, allowing the most important content to surface. We often compare the landing screen to a magazine cover, which highlights the best content within. The panorama is designed in a similar mindset, surfacing the best bits within the app to encourage the user to drill deeper into the content.

We advise that you do not have more than 4/5 panes, one section could go across more than 1 pane adding character to that area, i.e. the photo’s section within the FB app. We find that 5 panes ensures high quality performance but also the user needs to keep track. It acts as a carousel where the user can swipe left or right to see the different navigational sections.

In the Foursquare example below, you can see that each pane is differentiated, showcasing each section as its own entity. There are links in each pane that leads to “more” content, allowing the user to dive deeper into the app.

image

I recommend that you always refer to the native applications when planning your hub screen, such as the store, music, games. They incorporate a menu as 1 of the panes. Please look into the 5 different navigational models for WP8.

When using a panorama consider:

  • Immersive experience
  • Surface highlights within the app
  • No more than 3 themes or 5 panes

 

Pivots

The pivot control provides a quick way to manage the navigation of views within an application and consists of several different areas that the user can tab through based around one single theme with each tab representing a unique filtered view. Think of this as a more focused version of the panorama control, where they are similar to tab controls but show different views of related data. A great native example is the Hotmail / Outlook app which lists unread, flagged and urgent lists. These all follow the same data templates. A more varied approach is the example from the native people’s hub app. Here the data is still related to the same profile but uses different data templates, ie. The picture template. It is initiative, as the user knows they can swipe to see the next section or tap on the next heading to view that page.

image

When implementing pivot controls remember to surface the following:

  • Show related content
  • Show detail
  • Be efficient and focussed

 

App Bar

The app bar is an ellipsis along the bottom of the phones screen, with a row of up to 4 icon buttons that provide actionable commands. If the user clicks on the ellipsis it displays the labels for each icon button and the menu items that are relevant to that screen. It is important to implement your primary commands in the app to help create a consistent user experience across all applications on WP8. The beauty of the app bar is that it is always discoverable, regardless as to where you are on the page. The app bar always takes precedence over anything including the UI keyboard and will also automatically adjust when you change the phone to landscape orientation, showing the app bar on the side of the screen.

Mini app bar for when there are no primary commands

image

Default size of the icons

image

When clicking on the ellipsis, it shows the labels of the primary actions and the list of the secondary items known as the menu list.

image

Below are some example of apps using the standard app bar commands.

image

When designing your apps consider:

  • Which primary commands are important to that page
  • Which secondary commands (if any) should appear in the expanded app bar, avoiding the use of more than 5 as the user will have to scroll vertically
  • Use the custom colours for the app bar unless you have a compelling reason not to

 

Tiles

A tile allows you to present rich and engaging content to your customers on the Windows Phone Start screen when your app isn’t running. Bringing the users start screen to life due to its highly customisable nature, it acts as a representation of who the user is, highlighting what is important to them. There are 3 sizes of tiles, small (just an icon), medium (surfacing some live content) and large (which is a wide tile that can bring in further imagery or content).

Consider this as your front door to your app, being responsive, alive and engaging. Plus you can run the gamut of your imagination, from notifying the user about new emails to giving them an inside tip on drink specials at their favourite bar. When designing a tile, imagine what type of content needs to surface to encourage the user to launch the app.

There is also a concept known as secondary tiles, where users have the ability to pin shortcuts (acting as a deep link) into features that can really stand up on their own, for example the Shazam tag secondary tile below. This gives you the chance to own more real estate on the users start screen.

image

When designing your tile consider:

  • Provide fresh, personalised content to help users feel connected to your content and motivate launch
  • Use badges to show simple numeric or glyph information
  • Live updates should be accessible from the home screen of your app

 

Platform Integration

When designing, focus on how you can surface your app in other apps. For example, when a user is in the camera app, they can look to see which other apps use the lenses, which could lead to your app being discovered through the store.

image

Other apps may use the accelerometer for tilt functionality, or shake the phone to refresh. A good example for platform integration is Spotify which integrates into media hub where you can access your music history and launch a song previously played, automatically opening up Spotify. See the image below as it automatically launches the Now Playing screen.

image

When considering platform Integration, think about the native apps and hardware:

  • Integrating into the camera lens
  • Using the accelerometer
  • Integrating into the apps, such as Xbox music and games

App Lifecycle

The app lifecycle in WP8 is incredibly powerful. Whenever you tap onto a tile that was previously opened, it brings you back to the same point at which you left the app. An article is a good example of this, if a user was to start to read an article and then exit the app, it is suspended and its state is preserved in memory. Consequently when the user re-launches the app, the instance resumes in the same state it was when the user navigated away, therefore, the user can continue reading the article from where they left off.

I hope this article has given you an overview of what is possible when designing for WP8. Good luck with your apps. I wish you all the success whilst developing on what I believe is the greatest platform in the world. For further information, please refer to the following link with design, development and SDK information.

 

About the Author

clip_image002Gemma is a UX Evangelist at Microsoft, focused on working with the Top Apps in the UK helping create innovative and cutting edge designs for both Windows 8 and WP8.  She regularly runs design workshops in the Microsoft Technology Center (MTC) where she aims to educate customers on the UX fundamentals, formulate ideas, identify the scope of the project and draw out high level wireframes which lead to the creation of visual designs.