Hard prioritization, or 5 first steps to an excellent application for Windows 8. Navigation

From Idea to App

In the previous part, we looked at the first three steps on the way to designing an application:
  1. Target audience definition
  2. Application goal statement
  3. Selecting Key Scenarios

As you can see, the first three steps can really be safely applied to any projects,
I think they will only benefit from this. In this part, we will consider the fourth step - planning navigation in the application , and this time we can not do without understanding the specifics of Windows 8.


4. Plan your navigation


You probably, if you read the entire first part of the article, you are surprised that we still haven’t drawn a single screen and have never looked towards a specific implementation of anything. Do not be surprised - in this article we will not draw screens in detail and moreover we will not write code. Nevertheless, everything that we do in the next two steps will play a crucial role for all further interface design and application development itself.

The ultimate goal of the fourth step is to create an understanding of what screens will be in your application, how information will be distributed among them, and how transitions will be made between them. We need to make an information map (it is also an information architecture).

IA Sample

In principle, if you already have 1) a fairly clear idea of ​​how the application should look, and 2) an understanding of how Windows 8 works, you can draw a diagram right away: you need to draw all the key screens, show how the information is distributed between them and designate transitions between screens by linking them to transition triggers (elements, buttons, links, gestures, etc.).

We will go from two sides: let's try to understand what screens are needed for our virtual application to cover key scenarios, and I will tell you what you need to pay attention to in terms of designing applications specifically for Windows 8.

Application screens


Let's start with the screens - and there may be different strategies. For example, you can immediately try to draw an information scheme, starting from the main screen and gradually plunging into details. This approach, in principle, can work if you already have a general idea of ​​how the application should look - and, first of all, what information blocks will be in it and how it should interact with them. I think that for this you should also have some design experience.

For unfamiliar tasks, before putting the entire puzzle into a single picture, you can start with separate pieces / fragments. In some ways, this really resembles the folding of a puzzle (mosaic): from separate small pieces you first add separate fragments, and then bring these fragments into a single picture.

To begin this work, you need to return to your stories - and try to fix them in a simplified and consistent manner in accordance with various scenarios.

Пример . Продолжаем разбираться с Movie Meeting — мою историю кратко можно записать так:

  1. Я: увидел постер → узнал фильм
  2. Я: создать встречу
    • Отправить приглашения
    • Сделать видимым интерес
  3. Друзья: получили приглашения → детали
  4. Друзья: получили напоминания → детали
  5. Я: вижу статус, детали, заказываю еду
  6. Я+друзья: наслаждаемся фильмом с расширенным вовлечением


Здесь первые два пункта относятся к первому сценарию, вторые два ко второму, пятый — к вторичному заказа еды, шестой пункт записываем на счет третьего сценария.


Now you can try to translate these stories into separate small schemes - screens on which you need to identify the main blocks of information that are important for making decisions or satisfying the user, and transitions between screens that reflect the sequence of movement (application flow):

Short IAs

Буквой "A" я обозначил возникшее ощущение, что на этих экранах могут потребоваться дополнительные явные действия со стороны пользователя (actions).

Assuming your stories reveal key scenarios in different ways, you can get different sets of mini-schemes that more fully reveal the essence of your application.

Now, to move on, we need to clarify some important nuances regarding navigation patterns in Windows 8. A key article on navigation is Designing Navigation for Metro-style Applications . I will note several important points and some additional nuances that are also worth keeping in mind.

Navigation in Windows 8.


First of all, it must be said (and emphasized) that rigorous prioritization should also underlie navigation design. We must fight the obsessive urge to place as much information, actions, links, etc. as possible on one screen.

In this sense, I really like the following quote from Susan Weinschenk's article " The Psychologist's View of UX Design" :

"People will do the least amount of work possible to get a task done. It is better to show people a little bit of information and let them choose if they want more details. The fancy term for this is progressive disclosure ."


Take upstairs and to the most accessible place only what is really necessary - and let the user easily dive into the details if necessary. Along with this, try to show the user where he is, and not where he should go (I’ll explain this idea, but if you immediately grabbed it, you are on the right track).

Windows 8 apps have two key navigation patterns: hierarchical and flat. (In principle, the Master-Details option used, for example, in the Mail application can be considered as a separate type, however, we will leave this question outside the scope of this article.)
Hierarchical navigation model assumes that the user at each step sees a certain section of information with a certain degree of detail and, if necessary, can sequentially plunge into the details.

For example, in a news application on the first level, I see the latest and most important news - headlines and pictures, divided into separate groups. If only the last 5-10 news is not enough for me and I want to find out all the latest news about politics, I can go to the appropriate section (to the second level) and see a list of all political news there. If I don’t have enough headline and picture to understand what is happening, and some news hooked me, I can go down to the third level (from the first or second) - and read the whole news.

The fact that I am already getting a certain amount of information at each level just matches the idea of ​​showing where I am and not where I can go. It is also important to note here that diving to a lower level is done directly through the content.

Hierarchical system

There can be more than three levels in a particular application, but it is always important to remember about prioritization. You can think of it in such a way that for each next level in depth you need twice as many weighty reasons for its presence. (However, one must also restrain oneself from striving to place all the information in general on one first screen.)

To return to the navigation stack, a back arrow may be located next to the heading. Also, to quickly jump to neighboring sections and to the main page of the application, you can use the header menu (drop-down list 5 in the picture below).

Hierarchy Screen

The hierarchical navigation model is well suited for large collections of content and many sections or categories.

The flat navigation model for navigating between different screens uses a special interface element - the navigation bar (navigation bar), which appears at the top with the appropriate gesture with your fingers, either by pressing the right mouse button or by a command from the keyboard (Win + Z):

Flat system

Please note that this element is not constantly present on the screen and is called only at the request of the user.

The navigation bar is well suited if you need to switch between many tabs (for example, in a browser), IM dialogs, documents, game sessions, etc., as well as for quick access to a small number of special sections.

In a specific application, both models can be combined and used simultaneously. For example, in the Bing News application, a hierarchical model is used to dive into separate sections of news and specific news, and a flat one is used to quickly switch between the general flow, selected news and managing news sources.

Hierarchy Sample

Flat Sample

Contextual scaling (semantic zoom). In applications for Windows 8 there is another feature related to the main way of arranging information (horizontal with horizontal scrolling). As soon as your information goes beyond the screen, you will encounter the need 1) to tell the user what is next, and 2) to help quickly jump to the desired section of the content.

Long List

To solve both of these problems, a special technique is used, which is called contextual scaling that occurs when fingers are compressed, ctrl + scroll with the mouse, ctrl + "+" or by clicking on a special button, if provided by the developer:

Semantic Zoom

In this mode, all sections become visible immediately (or almost immediately) - and the user can easily select the desired one. Displaying not just section headings, but also some useful meta information is considered a good technique.

It is important to note that contextual scaling does not change the context and does not go to other pages - it only helps to quickly figure out the current page. At the same time, this technique can be used on any page in the application, if it makes sense:
Pivots , perhaps familiar to you from Windows Phone, can also occur in applications for Windows 8. For example, you can easily find them in the Windows Store, going to a particular application:

Pivots

You can perceive this decision as an “interface with tabs,” but I want to emphasize that its main purpose is the same as in Windows Phone: switching between different filters or slices (groups) of information about an object. For example, in the case of the application store, this switches between a review, details and reviews for a specific (single) application.

Charms and contracts (first of all, search, share and settings) are also an important component of your application, which takes over part of the functionality, or, more precisely, its activation.

Miracle buttons are located on a special panel that extends to the right and represents a uniform solution for four typical tasks: searching in an application, sharing (transferring) information with other applications, interacting with external devices (for example, displaying on a second screen or printing) and calling settings.

Charms

From the point of view of information architecture, this means that, for example, a call to the application settings will not be initialized by some link or button inside the application, but by clicking on the corresponding charms button. It is easy to portray, but just remember that this should work that way.

Charms IA

Search and sharing (sharing) play another important role that you need to remember: they may be activators of your application . For example, if you show the user news, he can enter your application either from a tile on the start screen (or by selecting an application in the list of applications), or by directly driving a search query in the search bar and selecting your application. In this case, the search results page from your application will open (should open) immediately. A similar scenario works for data transfer if your application can receive it.

(In principle, there may be other activators that you should know about - see the section on contracts on MSDN , but this is beyond the scope of this article).

Tiles and alerts , as you can easily guess already, can also be additional entry points to the application and, as a whole, part of the solution to the task of informing the user about the current state of certain entities of your application. I will not specifically dwell on this, however, do not forget about this when designing.

Another important thing that can affect the navigation structure, but needs to be considered separately, is the dock mode. (snapped mode), in which your application is fixed in parallel with another application in the form of a narrow strip on the right or left. In this case, you need to redesign the screens and navigation (perhaps by inserting additional intermediate screens) taking into account the less available space and mainly vertical scrolling - we actively remember the need to set hard priorities.




On this, our brief immersion in the elements of the navigation system in applications for Windows 8 is over and we can return to the main task of designing the information architecture of our virtual application.

Пример . Напомню, мы рассматриваем некоторое приложение Movie Meeting, которое помогает организовать совместный с друзьями просмотр интересного кино и у него есть три ключевых сценария:
  • Найти интересный фильм для просмотра
  • Договориться о совместном просмотре с друзьями
  • Получить массу впечатлений от просмотра


At the stage of fixing mini-schemes, we had to get an initial idea of ​​how these scripts work (sequence of actions / screens) and the information blocks necessary for them.

(Designers with a thorough approach can also safely capture detailed user scenarios in any familiar form.)

Изучая природу и время жизни всех этих сценариев, мы можем понять, что все они накладываются друг на друга, организуя некоторую пирамиду:
  • «Просмотр фильма» важен накануне и во время просмотра.
  • «Планирование просмотра/обсуждение/голосование» важно примерно в течение недели до принятия решения и параллельно с «просмотром» для любых будущих просмотров.
  • «Отбор интересного» важен все время для формирования своих предпочтений и пожеланий (как пул идей, что посмотреть).


Timing


This suggests that all three scenarios should potentially be accessible from the landing screen (landing page), and, returning to the issue of presenting content, they are immediately accessible: not by links, but directly accessible, albeit in a simplified or superficial presentation . In other words, it will be necessary to reduce the input points for all three scenarios into one screen.

В данном случае приоритизация действий (контента) по степени вовлеченности пользователя и скорости (времени жизни) сценария строится от просмотра кино к планированию и далее к формированию интересов, поэтому ближайшие просмотры, на которые собирается пользователь, должны быть на первом месте, планируемые мероприятия на втором и только после этого предпочтения/интересы пользователя и его друзей.

В первом приближении получается вот такая совокупность экранов (вместо множества стрелок-переходов я использовал цветовое кодирование) — здесь как основная используется иерархическая модель навигации:

First IA


At this stage, it is important to immediately drive away our main scenarios and make sure that they work and we have not forgotten anything fundamental:

First IA with Scenario


In further elaboration and detailing, various changes can be made.

Например, в данном конкретном случае, наверняка, будет целесообразно:

  • разнести сканер (фото) и поиск на различные экраны,
  • разделить экраны моих интересов и интересов друзей (на втором в отличие от первого имеет смысл показывать планы просмотров, а свои я вижу со стартового экрана приложения),
  • добавить отдельный экран непосредственно просмотра,
  • добавить экран заказа еды/напитков,
  • продумать, откуда берутся друзья (и вообще социальная составляющая), например, это может быть интеграция с системным Contacts Picker,
  • добавить нотификации, как дополнительные точки входа,
  • добавить промотируемый или рекомендованный контент,
  • добавить поддержку контекстного масштабирования во всех длинных списках,
  • добавить панели настроек,
  • продумать историю с покупкой билетов (включая возможности печати через соответствующий контракт),
  • и еще по мелочам…



However, in all this grandeur, it will be important to remember the priority of the main tasks and scenarios and, I repeat, to correlate each decision made with them, not forgetting to run through the information card their stories with invented characters.

In this regard, one of the most important tasks is to try to unravel the circuit, making it more straightforward and, accordingly, removing cycles as much as possible.

Пример. На одной из следующих итераций я получил следующую информационную схему экранов:

Second IA

То же самое с переходами:

Second IA with Links



What is important to pay attention to:
  • key scenarios should be solved as straightforwardly as possible (obviously);
  • scenarios with the shortest lifetime (operational) should be resolved as quickly as possible, that is, be at hand;
  • any secondary scenarios should not distract the user, although they should be easily accessible (most likely, not from the first level), if they are important.


To be continued...


Great, now we are ready to think about functionality, which is what we will do in the next part;)


Key resources
Design for Windows 8
Development for Windows 8
Application development on the Microsoft platform