Tips for designing Windows 8 apps

How to begin

Whether you are starting with a germ of an idea or you are an established brand, the first and foremost point to consider is the objective of the app. Try to answer the following questions

• Whom am I building the app for? (Who is my target audience?)
• Why will they download my app?
• What are the key tasks my users will be able to accomplish by the app?
• What is the USP(Unique Selling Proposition) of my app?
• Why will people choose me over other players in the same domain?

Another important thing to keep in mind is that there is a huge difference between a website and an app. As a design house we face this question all the time. “My website has so much information please can you add these to the app as well?” The thing to understand is that once a user has made an informed decision of downloading your app he/she already knows who you are and what you do. So why waste the real estate with information like ‘about us’ ‘our mission/ vision’ etc.Websites are more informative and extensive in information where as apps are more task based (application based as the name suggests). People download apps not to read about your company but to make use of what you have to offer to make their lives easier.

Thinking like an app

1. Get into the shoes of the user and try to understand how they will interact with your system.

2. Layout the different types of typical users of your app. Cater to the top 3/4 category of users.

3. Study individually what their expectations or key tasks/journeys on the app would be. Try to sketch out their interaction with the app.

4. Then merge these different journeys and then you will have a more meaningful navigation structure.

5. Draw the flow of the app rather than screens to see how the key goals can be easily achieved.

Transforming journeys to Windows 8 design patterns

Start with the ‘Hub Screen’ — this is the first screen where your user interacts with the app.

• Start the app with something that engages the customers and pulls them into the content. eg. Any special offer / interesting destination/ deals/key messaging/ featured content/ etc. Make this as appealing and aesthetic as you can. Try to bring out the essense of your brand. eg. Fasttrack is youthful, 99labels and Kaya are classy and elite, where as NSE needs to be focussed on current market scenario (live data).

• Provide triggers and overview of the different sections of your app. Design each section based on the content of that section.

• Typically a hub page can have a long horizontal scroll due to all content. Normally people do get worried about users not seeing the content of the sections further away. What we need to realize is that people owning windows 8 devices are very well versed with this mechanism and know the paradigm it works on. So explore the horizontal scroll to its full potential.
• To give an overview of the long scroll of the hub screen use the ‘Semantic Zoom’ feature. This view brings together all the sections on the hub in one screen. When the user taps on any one section icon or tile they are taken back to hub with that section anchored to the left.

• In each section try to bring out the content in each tile rather than making it a link to go inside and reveal details.

• Don’t forget the chevrons to indicate that the titles are click-able and lead to a section landing page. This is a good usability practice and helps the users navigate with ease to their desired sections. Also, this avoids the need of having ‘view more’, ‘see all’ kind of buttons which will unnecessarily take up real estate on the device.

• Never mix the horizontal and the vertical scrolls together as this is very non usable. While panning horizontally the sections placed in the vertical scroll start moving by our finger movement. This confuses the users.

Top App bar (or navigation bar) — This comes on when the user swipes from the top. Designed in view of the design philosophy ‘ CONTENT BEFORE CHROME’, this brilliant feature allows the content of your app to be the main hero and get the navigation only on demand.

• Carefully decide the various important sections of the app that the users would require to access and place these in the top app bar. Nicely designed icons with text work very well as they provide a visual relief as well as is an accebility friendly approach.
• If you have too many such sections the app bar will be more confusing than helpful. In such case its best to club the sections in one drop-down.

Bottom app bar (contextual menu)

• All the call to actions related to the content on the canvas needs to appear on the bottom bar e.g. add/edit/delete an item on a particular section. Also divide the actions into page level actions and item level actions so that they are grouped appropriately on the left or right of the bottom app bar.
• Don’t ignore the tile selected state design. Normally, this is ignored and the default-selected color takes over. Its good to decide the color as per your brand colors.

• Place the icons ergonomically. Imagine holding a tablet, you get two thumbs to navigate. So use the edges.

Spoke level page (section landing page) and details pages

• Analyze the content that needs to go in this section and decide the layout of this screen. There are various ways we can arrange these sections.
• If the spoke page is a listing we can go for a horizontal scroll arrangement of tiles.

• If it is a decision making screen where user needs to see a list and tap of one to see the details, we should use the split view.

Charms — One of the best feature on the windows 8 device is the charms bar. Microsoft has well studied the common elements needed by all apps in contemporary times and brought it together in one common element. This helps reduce clutter on the screen and lets the app use the valuable real estate on the canvas for the content.

• Search– this is one feature every app uses. There is still a thought process that how will people know where to search from and insist that search should be on the canvas. We need to clear the baggage from the web world. Once a user owns this device they will know that it is so much easier to have a standardized feature like this rather than having it in different locations and designs for every other app. If every app places search as per their whims and fancies the user has a new learning curve with each app. So its advisable to integrate this with your app.
• Share — Again, with the influence of social media on todays’ lifestyle every app has a requirement of integrating social media functionality. Instead of placing social icon all over the place its best to integrate these share charm with your app to reduce learning curve for the users
• Settings — All your app settings like language, currency, online/offline etc. can be clubbed together in the settings charm. Again a great feature which relies on users existing knowledge of the UI to de-cluttter the canvas

Splash screen

• This appears for a few seconds while the app is loading. Generally, placing your logo along with some graphic teaser or a one lines helps the user instantly connect with the intent of the app.

Live tiles

• As the name suggest, make it as live and engaging as you can. Bring out the latest info/ addition/feature…etc onto this space.

Overall windows 8 has provided a platform which is not only easy to operate but also extremely easy to design and develop. Give it a shot and if it gets too complex for you to handle, visit www.fractalink.com . We will be happy to help (with a fee off course;-)).

Special thanks to Tanay Kumar (Creative head, Fractalink Design studio Pvt. Ltd.) for helping me collate this long post.

Signing off!

PS. For detailed information visit http://msdn.microsoft.com/en-us/library/windows/apps/hh779072.aspx

Like this:

Like Loading…

Originally published at priyankaagrawal.wordpress.com on April 11, 2013.