User Experience Guide


Table of Contents

About this Guide

The Microsoft CityNext Big Data Solution Accelerator User Experience Design (UXD) Guideline provides the information you need when designing and developing content, services, and features for city stakeholders on top of the Microsoft CityNext Big Data Solution Accelerator. Whether you’re a designer, developer, tester, or program manager, following these guidelines ensures that your application provides a unified and cohesive experience that embodies the Microsoft brand.

Microsoft CityNext Big Data Solution Accelerator

The Microsoft CityNext Big Data Solution Accelerator is middleware built on top of Microsoft products and open source technologies, offering the capabilities of ingesting, consolidating, storing, enriching, analyzing, rendering and disseminating data in meaningful ways. It provides an end-to-end experience of transforming data into information, into insights, and then into action. This big data platform offers great potential for service development that empowers government, businesses and citizens to shape the future of their cities.

What You Will Find in this Guide

The CityNext Big Data Solution Accelerator UXD Guide includes the following:
  • Design and content requirements for the applications within the Microsoft CityNext Big Data Solution Accelerator.
  • Guidelines, best practices and general information on user experience and interface design specific to the applications developed for the Microsoft CityNext Big Data Solution Accelerator, focusing on navigation and visual elements.
  • Examples of how to implement these guidelines.
Back to top

UX Goals and Principles

User Experience Goals

The Microsoft CityNext Big Data Solution Accelerator provides a whole new class of solutions by connecting citizens, services, and infrastructure with the intent to discover, report, manage, track, and solve city issues. It aims to enable cities to operate more efficiently and serve citizens as “One City” across eight critical functions: energy and water; buildings, infrastructure, and planning; transportation; public safety and justice; tourism, recreation, and culture; education; health and social services; and government administration.

The Microsoft CityNext Big Data Solution Accelerator user experience is designed to:
  • Provide a visual rich presentation of the insight from aggregated, powerful analytics that is superior to other services.
  • Make using the big data solution accelerator applications and services intuitive and enjoyable.
  • Create a genuine Microsoft CityNext experience across devices.

User Experience Principles

To help you make the best choice when designing your applications and services on top of the Microsoft CityNext Big Data Solution Accelerator, we have listed seven high level principles in detail below. Use these principles to address user scenarios and guide feature development for your software.

Identify real user needs

Your design process should start with thinking about real user needs. Who are the users of your application and service? What are their tasks that could be accomplished with your app? Understanding user needs deeply is crucial for the success of your digital service. Remember that what users ask for is not always what they need.
  • Gather evidence proving that a user need actually exists.
  • Write user stories from the perspective of the user to help you describe user needs.
  • Map user needs to features and determine which features to use.

Understand the context of experience

In what context will people use your service? Are they in the office? Are they on-the-go? Make sure you understand the circumstances under which people will engage with your service.
  • Always ask what is the setting and environment in which your service will be used.
  • Understand how people would interact with your service in the situation.
  • Use context scenarios to define the situation, the people, their tasks and expectations.

Do more with less

When designing and developing your service, you should focus on only one core. You can do more with less by reducing your design to its essence. Create a clean and purposeful experience by leaving only the most relevant elements on screen, so people can be immersed in the content.
  • Be great at something instead of mediocre at many things.
  • Be visually focused and direct, letting people get immersed in what they love, and they will explore the rest.
  • Inspire confidence in users.

Make things simple and clear

A primary goal of experience design is to make things simple and easy to use. Concise instructions, simple steps and clear structures are the key points to help users achieve their objectives fast and effortlessly.
  • Organize the content in natural and logical order.
  • Use appropriate vocabulary and concepts.
  • Visualize data explicitly.
  • Make the ‘help’ information helpful.

Always be responsive

Respond to user interaction quickly. Always provide feedback. People use feedback to understand where they are and what they can do next. There are various forms of feedback: selected status; highlights; confirmations; error messages; content updates; progress status; etc. Failing to provide feedback could lead to confusion and mistakes.
  • Don’t make your customers hesitate or guess.
  • Let users always know where they are, what they should do next, and how to do it.
  • Make feedback noticeable and meaningful.
  • Do not interrupt people when they are engaged in a task.
  • Provide design for touch and intuitive interaction.

Be consistent

Navigational mechanisms, organizational structure and UI elements used throughout the design must be predictable and consistent. Things should match up between multiple areas, or else users may feel confused and uncomfortable.
  • Use unified graphic design and colors.
  • Use unified interaction design.
  • Use predictable navigational mechanisms.
  • Use common sense.
  • Be consistent with brand image.

Iterate, iterate, iterate

Iteration reduces risk. The best way of developing an effective service is to test it early with your target audience. Both success and failure during the testing phase provides important information about what does and does not work. Based on the feedback from real users, your service can make viable progress.
  • Iterate your process of exploring, testing and refining the design concepts.
  • Actively involve your target audience in various stages of iteration.
  • Set clear criteria of the degree to which design requirements must be satisfied.
  • Transform learnings from user feedback into tangible refinements.
Microsoft advocates modern and intuitive digital experiences. We implement a playful visual language that extends into Microsoft’s entire product portfolio. In this document, we recommend that all software developed on the big data solution accelerator should comply with the modern design guidelines. Below are some places where you can find more about the modern design at Microsoft:

Modern Design at Microsoft (http://www.microsoft.com/en-us/news/stories/design/)
Microsoft Design (http://www.microsoft.com/design/)
Windows Desktop User Experience Design Principles (http://msdn.microsoft.com/en-us/library/windows/desktop/dn742491.aspx)
Index of UX guidelines for Windows Runtime apps (http://msdn.microsoft.com/en-us/library/windowsphone/design/hh465424.aspx)
Microsoft Design Principles for Windows Store apps (http://msdn.microsoft.com/en-us/library/windows/apps/Hh781237.aspx)
Microsoft Design Principles for Windows Phone (http://dev.windowsphone.com/en-us/design/principles)
Back to top

Navigation

Navigation is a fundamental pillar of information architecture design. It is your app’s “table of contents”. If contents cannot be found, then the value cannot be realized. When organizing your content in your modern style app, you should consider a hierarchical or a flat system.

Hierarchical System

 
3.1 Hierarchical System.jpg The hierarchical system of navigation is common and familiar to people, which makes apps fast and fluid, while still being easy to use.

This pattern is best for apps with large content collections or many distinct sections of content for a user to explore.




In a Windows Store app, you can organize your content with hub pages, section pages and detail pages.

 
3.1 Hub pages section pages detail pages icon.jpg
Hub pages
Hub pages are the user's entry point to the app. Here content is displayed in a rich horizontally panning view allowing users to get a glimpse of what's new and available.

The Hub consists of different categories of content, each of which maps to the app's Section pages. Each section should bubble up content or functionality. The Hub should offer a lot of visual variety, engage users, and draw them into different parts of the app.




Section pages
Section pages are the second level of an app. Here content can be displayed in any form that best represents the scenario and content the section contains.

The Section page consists of individual items, each of which has its own Detail page. Section pages may also take advantage of grouping and a panorama style layout.




Detail pages
Detail pages are the third level of an app. Here the details of individual items are displayed, the format of which may vary tremendously depending upon the particular type of content.

The Detail page consists of item details or functionality. Detail pages may contain a lot of information or may contain a single object, such as a picture or video.



Flat System

 
3.2 Flat System.jpg You can also use a flat system of navigation in your Windows Store app. This pattern is best when the core scenario involves fast between a small number of pages or tabs.






The essence of the flat system is the separation of content into different pages.

 
3.2 Nav bar switching icon.jpgNavigation bar
The nav bar is great for switching between multiple contexts. Examples include tabs, documents, and messaging or game sessions.

The navigation bar is a transient element that resides at the top of the screen, and is made visible when users swipe from the top or bottom edge. While the format of items in the bar can vary, a typical treatment is the use of a simple thumbnail.



Switching
Unlike the hierarchical system, there is typically no persistent back button or navigation stack in the flat system –so moving between pages is usually done through direct links within the content or the nav bar.

You can choose to include other functionality within the nav bar, such as adding a ‘+’ button to create a new tab, page, or session.

Back to top

Visual Elements

Careful use of visual elements is important for maintaining a consistent UX presentation and a united vision of the Microsoft CityNext Big Data Solution Accelerator applications and services. In this section, we present a set of shared design elements, such as color, type, iconography and color.

Color

Color in Microsoft CityNext is intended to make your app feel profound and rigorous. It is saturated, sedated, and authentic. Microsoft CityNext uses mostly flat, solid colors, but also employs a variety of techniques to create depth, such as transparency, layering, and blending.

The appropriate use of color helps you make sure all of your customers can access and understand the communications, regardless of their abilities.

Avoid relying on color alone to convey information. Always provide text or other graphical cues to guide customers to your message.

Below are four exemplary colors we designed for your use. You can choose one of the 4 core colors (the middle parts in the color columns shown below) as the primary color in your layout. The lighter and darker tints may be used as highlights and accents.
4.1 Color.jpg
Below are some examples of applying the theme colors.

Bar chart
4.1 bar chart.png

Flow graph
4.1 flow graph.jpg

Tile background
4.1 tile background.png

Typography

Typography extends the identity and beauty of your digital product. Type can do much more than simply communicate the content. We recommend Segoe UI as the font for all products and services for the Microsoft CityNext Big Data Solution Accelerator. Modern, easy to read, and distinct, the Segoe font family is devoutly used within all Microsoft products.

Segoe UI Regular
4.2 Segoe UI Regular.png
Segoe UI Bold
4.2 Segoe UI Bold.png
Segoe UI Light
4.2 Segoe UI Light.png
Segoe UI Semibold
4.2 Segoe UI Semibold.png
Segoe UI Semilight
4.2 Segoe UI Semilight.png

Size and weight

  • Limit type to no more than three sizes.
  • Use Light for large headlines.
  • Use Regular or Semibold for increased legibility at small sizes or over backgrounds.
  • Use Semibold or Bold for subheads, but not for headlines.
  • Segoe Black or Condensed weight fonts should be used sparingly.

Sentence case

  • Sentence case is our standard for all content.
  • Use all uppercase sparingly—for titles, short headings, or subheadings, and never for full paragraphs.
  • Do not use all lowercase.

Line spacing

  • Line spacing refers to the space between lines of a different type. See the chart below for line spacing guidelines.

Letter spacing

  • Letter spacing (also known as tracking) is the space between letters.
  • Segoe is designed so that letter spacing and word spacing are set by default to zero. In some cases, spacing may need to be adjusted. Make sure that letters never touch one another. See the chart below for tracking guidelines.
4.2.4 Letter Spacing.png

Justification

  • Type should always be set flush left, ragged right.
  • Segoe should never be justified or centered.
  • Avoid widows, orphans, and lines that end with hyphens.

Icons

Icons say what need to be said without explanation. Icons are functional, and are used as a call-to-action.

We recommend that Microsoft CityNext Big Data icon design should comply with modern app iconography guidelines. They should be graphic and symbolic. They use clean lines and simple shapes that are easily recognizable. They are integral to navigating a touch-first system and should help a user navigate the UI.

Microsoft CityNext icons distill and simplify concepts using a minimum of parts and details. They reinforce the idea of content by being graphic in nature, flat in perspective, and monochromatic.
  • Use icons where there is a clear function or where words won’t work.
  • Icons should only appear in pure white. They may be placed within tiles or separately.
  • Icons should never be used decoratively.
  • Stay true to the medium. Don’t try to make an icon look realistic.
  • Don’t use an icon to represent a complex message.
  • Don’t use an icon if the message can be communicated in another way.
  • Don’t overuse icons. They shouldn't be used in place of bullet points in a list.
Examples:
4.3 Icons.png

Buttons

A button lets the user initiate an immediate action, such as submitting a form.
  • Use a concise, specific, self-explanatory text that clearly describes the action that the button performs.
  • Customize buttons with text or images to make it clear to users what happens when they tap or click the button.
  • Buttons must provide interactive feedback by changing color or size as in different status, e.g. normal, pointer over, pressed, disabled, etc.
  • Don't put too much content inside of a button.
We recommend two shapes of buttons. If buttons are on the app’s content region or on the top navigation bar, they should be square; if not, buttons should be circular.

The text and icon should be in pure white in normal status. Exception: the color of the back button can be adjusted according to the application’s color scheme.

Recommended height of buttons is 32-40 pixels.

Example of different status:
4.4 Buttons.png
4.4 Buttons 2.png

Homepage Tiles

Tiles displayed on the modern app’s home page provide easy access to some of the most frequently used functions, similar to the tiles on the Windows®8 Start screen.

Tiles are available in different sizes: small, medium, wide, and large. You can display different content in your tiles – text, images, branding, and notifications. When designing your tiles, make it simple and visually pleasant. Below are some examples of large, wide and small tiles.
4.5 Homepage Tiles.jpg

Layout

Layout is the sizing, spacing, and placement of content within a window or page. An effective layout is crucial in helping users find what they are looking for quickly, as well as making the appearance visually appealing.

The layout of your app, both the content and the navigation between pages, is essential to the overall design and feel of the app.

Application header

The baseline of the app page header is 100 pixels from the top. The left margin for the page header is 120 pixels (Screen Resolution: 1366*768).
4.6.1 Application header.jpg

Maximum content region

The maximum content region has a top margin of 140 pixels. The left margin is 70 pixels. The bottom margin is flexible. When there is only a single page without horizontally or vertically panning, the right margin is 46 pixels (Screen Resolution: 1366*768).

In general, we should align the content region with the left edge of the App page header.
4.6.2 Maximum content region.png
Back to top

Sample Windows 8 App UI

Introduction

Situational Awareness Dashboard is the Windows®8 application built on top of the Microsoft CityNext Big Data Solution Accelerator. The Dashboard provides the overview of real-time situations, point-in-time situations and cross-domain analyses for the user, and serves as the hub for emergency management operation tasks.

Navigation Design

Nav design hierarchical system

5.2.1 Nav design hierarchical system.png
*Images as shown above: Hub page (left), Section page (middle), Detail page (right)

Nav design flat system

5.2.2 Nav design flat system.png
*Images as shown above: Navigation bar (left), Switching between normal view and map view (right)

Color

Color applied in the POC is intended to make the app feel profound and sedated, but not rigid.

There are three core colors used most frequently in this sample dashboard.
5.3 App UI Color.jpg

Black, gray, and white are additional supporting colors.

5.3 App UI Color 2.jpg

App UI Icons

The dashboard uses flat graphics to convey rich content. The primary color of the icons is pure white. White is the single color that displays well in most color contexts, such as app tiles and app bars, which have richly colored backgrounds.

5.4 App UI Icons.jpg

Layout and Typography

The layout below is based on the screen resolution of 1366*768.

App loading page

On the app loading page, the logo is 235*235 pixels, centered and middle aligned.
5.5.1 App loading page.png

App page header

The baseline of the Dashboard page header is 100 pixels from the top, and the left margin for the page header is 120 pixels. The typography is Segoe UI Light, size 44pt.

The sample app uses all uppercase for the Dashboard page header, but uses sentence case for subheadings and content.
5.5.2 App page header.png


The Section/Detail page header includes a back button. The back button is 40 pixels from the left and its baseline is 100 pixels from the top.
5.5.2 App page header 2.png

App maximum content region

The maximum content region has a top margin of 140 pixels. The left margin is 70 pixels and the right margin is 46 pixels. The bottom margin is 48 pixels.

The content region and the app page header is left aligned.
5.5.3 Maximum content region.png

Dashboard layout

Horizontal padding between tiles are basically 10 pixels with an exception that, in certain scenarios, a wider padding is necessary to indicate the difference between several distinct groups.

Vertical padding between tiles is uniformly 10 pixels.
5.5.4 Dashboard layout.png

The standard size of the tile is “250x250 pixels”, which can be divided into sizes of 120x250 pixels and 120*120 pixels.
5.5.4 Dashboard layout 2.png

Navigation bar

The navigation bar has a height of 130 pixels.

The navigation button in the top navigation bar should maintain a left, upper and bottom margin of 15 pixels. The distance between two navigation buttons is 15 pixels.

The navigation button is consisted of an icon and a text description in the bottom. The icon is 40 pixels wide and 35 pixels high. The left and top margin for the icon is 10 pixels. The left and bottom margin for the text is 10 pixels. The typography is Segoe UI Regular, size 14, in all uppercase letters.

5.5.5 Nav bar.png

5.5.5 Nav bar 2.png

App bar

The app bar has a height of 88 pixels.

The commands are round, consisted of an icon and a text description in the bottom. The diameter of the commands is 40 pixels. The right margin for the icon is 40 pixels and the top margin is 15 pixels. There is 10-pixel space between the text and icon. The text is center-aligned, and its first letter is capitalized. The typography is Segoe UI Regular, size 12.

5.5.6 App bar.png

5.5.6 App bar 2.png

Contact list

The profile picture is 50*50 pixels. The space between different profile pictures is 10 pixels. The status bar of the contact list should be placed to the left, 4 pixels wide and 50 pixels high.

5.5.7 Contact list.png

Controls

Buttons
All buttons in the page content region maintain a height of 32 pixels. The left and right margin for the button description region (generally consisted of an icon and texts) is 15 pixels.

The text contained in the button applies Segoe UI Semilight, size 16.
5.5.8 Controls - buttons.png

Drop list
5.5.8 Controls - drop list.png

Check box
5.5.8 Controls - check box.jpg
5.5.8 Controls - check box 2.jpg

Message dialog
5.5.8 Controls - message dialog.jpg

Flipper
5.5.8 Controls - flipper.png
Back to top

Last edited Nov 19, 2014 at 5:24 AM by gheadd, version 10