В итоге мы последовательно прошли от такого начального экрана:

К таким:

В этой части мы поговорим о главном экране приложения. Сейчас она выглядит так:

Тут есть несколько довольно очевидных проблем:

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

Прежде, чем двигаться дальше и думать, как это все поправить, хочу отметить еще несколько важных моментов, которые следуют учесть:

1. Навигация: возможность переходы к некоторым разделам стоит продублировать через панель навигации, включая доступ к поиску.
2. Хочется сделать плитки максимально соответствующими контенту, для плиток друзей хорошо бы как-то учесть социальность.
3. Одна из ключевых идей главного экрана как хаба заключается в том, чтобы вытягивать наверх дополнительную информацию с нижних уровней, помогая пользователю принять решение, что же ему делать дальше. См. также мою статью «Не говорите мне, куда мне идти», — ваш пользователь.

Давайте перейдем для начала к традиционной секции «как в других приложениях».

Как у них

Я рекомендую обратить внимание на в общем-то все те же приложения.

Музыка (встроенное приложение при Location = United States). Тут есть несколько интересных деталей:

1. При входе приложение позиционируется на втором разделе, а не первом. Слева остается доступ к «моей музыке».
2. Часть плиток в группах являются «командами» над группами, например, «воспроизвести всю музыку». Другие могут открывать всплывающие панели с дополнительными параметрами/действиями: например, «создать Smart DJ».

Также важно отметить, что формат и размер плиток может различаться, оставаясь при этом в рамках сетки и следуя также функциональности и контенту.

Nokia Music – обратите внимание, что главный экран является функционально-интерактивным. Именно на нем расположены элементы управления воспроизведением, доступен доступ к тексту песни, показываются похожие миксы и т.п.:

Во время работы с приложением рекомендую также отдельно проследить за анимациями. Далее на экране также есть «функциональные» плитки, например, плитка для создания нового микса, вытягивающая сверху специальную панель для этого действия.

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

Audible – еще один интересный пример. Хотя это приложение создано вокруг аудио-книг, а не музыки, на него тоже стоит обратить внимание.

Здесь интересно, что при начале проигрывания какого-либо произведения, оно выносится на главную страницу приложения вместе с элементами управления (раздел “now playing”), далее на странице также доступны типичные блоки доступа к собственной коллекции аудио-книг и магазину.

Переделка главного экрана

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

Здесь я вывел последние треки, добавил доступ к личной коллекции музыки и рекомендациям – все с возможностью быстро запустить проигрывание через кнопку рядом с заголовком. Далее добавил друзей и группы: также с типичными представлением.

Следующим шагом надо для каждого блока контента подумать, какое представление будет наиболее репрезентативным и соответствующим решаемой задачи.

Например, давайте посмотрим на «последние треки». Я нарисовал так, что в список нельзя погрузиться (об этом говорит отсутствие шеврона у заголовка). Я также не знаю, сколько все музыки было в списке. Также представление всего списка не является эмоциональным. На внутренних экранах у нас были фотографии альбомов и артистов, почему бы их не вынести сюда же?

Я добавил возможность погрузиться в заголовок, добавил счетчик наверху. Кнопку запуска проигрывания перенес вниз в виде немного смещенной плитки.

Список превратился просто в композицию фотографий и изображений альбомов. Над ним еще стоит поработать. Через некоторое время я прихожу к варианту, который в чем-то напоминает плитку «люди» в Windows Phone:

Главное, не забыть эту композицию сделать анимированной. Общая гипотеза, которую я тут подразумеваю заключается в том, что с главного экрана я могу хотеть просто вернуться к тому последнему впечатлению, которое я имел от приложения, а не конкретной песни. Но если нужно именно это, то такая задача также решаема, но через погружение в заголовок.

Теперь давайте перейдем к последующим спискам. В «моей музыке» я сходу скопировал нумерованный список, но это не очень понятно. То есть не понятен порядок нумерации и почему именно эти песни тут видны. Это можно исправить, добавив пояснение:

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

Для рекомендаций я вернул кнопку перемешивания, так как именно она была в изначальном приложении.

Давайте немного подумаем над списком друзей. Сейчас он «типичный» и «безликий». Вспоминаем, что мы живем в социальной сети и цифровом мире. Стоит добавить красивых анимаций, также подумать над тем, чтобы выводить какую-то дополнительную информацию о друзьях, которая позволит мне принять решение о переходе к тому или иному человеку:

Потом я посмотрел на заголовки других групп и решил, что стоит кнопки перенести ниже:

Заодно добавил кнопку «играть все» для рекомендаций. Вот вариант без нижней панели приложения:

Наконец, давайте подумаем о группах. Можно предположить, что мы также что-то знаем о них. Что-то большее, чем просто название. Например, наверняка нам могут быть известными количества песен в самой группе и на ее стенке, а также примеры того, что находится в этой группе. Это было бы весьма полезным, учитывая, что названия часто являются малоинформативными.

Можно подправить контрастность:

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

Заодно я перенес «навигационный» элемент плейлист наверх из нижней панели. Важно не забывать старать сделать представление разделов в навигационной панели также разумно информативным и побуждающим к переходу.

Теперь я могу «исследовать» музыку с любой страницы:

В следующей части мы посмотрим на работу приложения в Snap-режиме и интеграцию с контрактами.

В результате чего, от начального варианта:

Мы постепенно перешли к таким:

В этой части мы поговорим немного о том, как показывать дополнительную информацию о песне: текст и другие похожее композиции.

Напомню, что в текущей версии приложения это делается следующим образом:

В панели приложения есть специальная кнопка «О песне», по нажатию на которую открывается большая перекрывающая экран панель с текстом песни (если он доступен) и списком похожих композиций.

В таком варианте есть несколько проблем:

• Это «разрушающий» опыт, перекрывающий практически весь экран и мешающий, таким образом, взаимодействовать с чем-либо на экране. Хотелось бы, чтобы этот опыт был напротив «погружающим», что соответствовало бы нашей миссии доставить удовольствие пользователю от погружения в музыку.
• Структура этой панель также неудобна, она несбалансированная в смысле распределения информации и с большими полями слева и справа. Вертикальная прокрутка длинного текста в небольшом вертикальном пространстве также представляется неудобным для использования.
• Стилистически панель не согласована со всем приложением.

Другие приложения

Первое, уже традиционное, упражнение, которое мы постараемся проделать — это посмотреть на другие приложения на рынке в поисках интересных решений или шаблонов. Нас будут интересовать, прежде всего, экраны, на которых пользователь может увидеть дополнительную информацию о текущей композиции.

Я начну с приложения «Музыка», поставляемого вместе с Windows. Если вы запустите что-то на воспроизведения, из плеера в панели приложения вы сможете перейти на экран «расширенного плеера», в котором элементы управления доступны не только в панели, но и на самом экране, на подложку размещена качественна фотография альбома или исполнителя, а рядом с ней доступен текущий список воспроизведения:

Если вы промотаете немного дальше, то обнаружите дополнительную информацию об артисте или группе, выпущенных альбомах и также список похожих исполнителей:

Обратите также внимание на кнопку разворачивания экране на первом снимке: она скрывает все дополнительные детали и оставляет только фотографию текущей композиции.

Это хороший пример «погружения» в композицию, когда при необходимости я могу получить дополнительную релевантную информацию в удобном виде.

В другом характерном приложении «Nokia Music» дополнительные детали о композиции доступны на главном экране. При нажатии на кнопку с кавычками появляется небольшая вертикальная панель с текстом песни:

Также внутри миксов доступна дополнительная информация об исполнителях, возможно последние твиты артиста или группы, предстоящие концерты, а также список похожих исполнителей:

Опять-таки, информация доступна по запросу, но структурирована и доставляется пользователю совершенно другим образом.

Еще один пример: приложение musiXmatch, созданное вокруг текстов песен. Здесь текст является основной составляющей, поэтому как только вы переходите к конкретной композиции, вы сразу проваливаетесь на соответствующий экран:

Текст занимает основную часть экрана, сразу виден. Дополнительная информация вроде альбомов, в которые входит конкретная композиция, видна тут же.

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

Потом мы можем перейти к детальной биографии или альбомному просмотру фотографий:

Здесь обратите внимание на то, что информация, которая лежит на следующих уровнях иерархии приложения в сжатой форме проброшена наверх.

В радио-приложении Radio Paradise дополнительная информация показывается во всплывающем окошке по нажатию на плитку текущей композиции. Здесь доступен текст песни и комментарии к ней:

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

И еще один интересный вариант: приложение Vk CloudMusic. Здесь все управление и вообще все-все-все собрано на одном экране. Дополнительная информация доступна по нажатию на соответствующие кнопки. Например, если запросить информацию об артисте, вы увидите краткую справку, популярные песни, его альбомы и список похожих исполнителей:

А при запросе текста откроется маленькая панель слева с текстом:

Помимо того, что это в целом нетипичный для Windows 8 дизайн (что само по себе не является чем-то хорошим или плохим), здесь интересна компактность и попытка вместить все и сразу, но сделать как бы по явному запросу.

В этой точке я хочу отметить важный момент: между идеей исследования, раскрытия контента, постепенного в него погружения и предоставления контента по явному запросу есть большая разница. И вам в вашем приложении нужно будет решать, что вам ближе для конкретно вашего сценария.

Погружение — это вариант путешествия и исследования, когда вы наверх пользователю выносите какие-то якоря, кусочки контента с нижних уровней, по которым он может при желании перейти дальше. Это может быть также исследование на одном экране в рамках последовательной прокрутки. Погружение также предполагает, что в каждый конкретный момент времени вы позволяете пользователю сфокусироваться на чем-то одном, например, на тексте песни или на информации об исполнителя. Обычно это пропорционально тому, сколько места занимает соответствующая информация на экране.

Явный запрос — с быстрым предоставлением больше похоже на шкафчик с выдвижными ящиками. Вы нажимаете на ящик «текст песни»: бам, выезжает ящик с текстом внутри, но вы по-прежнему находитесь в предыдущем контексте и можете этот ящик легко закрыть.

Теперь давайте вернемся к Музыке VK. Сегодняшний день (или ночь) мы проведем в компании Guano Apes. ;)

Панели

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

По нажатию на последнюю кнопку с деталями должна произойти некоторая магия, о которой мы и будем думать оставшуюся часть статьи.

Попутно я хочу отметить еще одну важную деталь, которую предстоит решить автору приложения, возможно, поэкспериментировав на пользователях: так как на предыдущих стадиях мы решили, что у нас будет два возможных представления этого экрана, то для каждого из них нужно теперь решить, что делать с дополнительными деталями.

Тут могут быть разные варианты. Например, можно показывать только на одном: том, который с линейным списком и сфокусирован исключительно на текущей композиции. А можно напротив позволить показывать всегда. От принятого варианта в значительной степени зависит диапазон возможных интерфейсных решений.

Предположим, мы хотим, чтобы по нажатию на кнопку деталей нам показывался текст композиции. Как это можно сделать? Однозначного ответа нет, так как есть множество вариантов, каждый из которых необходимо проверять на пользователях.

Один из самых тривиальных заключается в том, чтобы показывать всплывающую панель слева или справа, на которой будет текст текущей композиции:

Если разместить такую панель слева, то она перекроет информацию и элементы управления внизу. Нужно поверять, но это может оказаться неудобным.

В такой панели мы также неявно предполагаем, что при нажатии на экран вне панели сама панель будет скрываться. И также мы дублируем закрытие кнопкой «назад» наверху. Обратите внимание, что в заголовке продублировано название композиции, так как оно оказалось перекрыто самой панелью.

Другой вариант заключается, очевидно, в том, чтобы такую панель разместить справа:

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

Еще мы можем убрать из панели заголовок, так как название песни и так очевидно и находится слева на экране.

Мы также можем сделать вариант, аналогичный тому, что реализовано в текущем приложении:

Однако можем предусмотреть несколько дополнительных улучшений. Во-первых, мы можем вынести прямо на эту панель не только название песни, но и управление воспроизведением — один в один, как это сделано на самом экране. Во-вторых, текст песни лучше пустить горизонтально с многоколоночной версткой. Это будет лучше соответствовать динамике приложения и удобнее читать. В-третьих, я перенес кнопку закрытия в низ панели, так как иначе она конфликтует визуально с кнопкой возврата на предыдущий экран.

Далее, если мы вспомним, что в исходном варианте можно дополнительно посмотреть список похожих композиций, то мы легко придем к решению задачи добавления такого списка на любой из обозначенных выше экранов:

Переключаемся:

Тут я поменял местами заголовки вкладок, чтобы это было больше похоже на Pivot в Windows Phone, но можно и не менять местами, тогда это будут типичные вкладки.

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

Однако хочу заметить, что это не все возможные варианты. Мне пришел в голову как минимум еще один.

Погружение

Если думать об идее погружения в детали, возможности исследовать, то в голову приходят два возможных варианта решения этой задачи. Первый: можно погружаться по иерархии экранов приложения ниже, разместив все детали на отдельном экране. Второй: все дополнительное разместить справа, позволив пользователю погружаться через прокрутку.

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

Учитывая эти вводные, мы довольно быстро придем примерно к такому варианту:

Дополнительная информация появляется справа и торчит небольшим хвостиком, подсказывая пользователю, что он может прокрутить дальше и увидеть еще контент, если очень хочет.

Большой подводный камень этого решения заключается в том, что он применим только на экране с линейным списком воспроизведения.

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

Еще один интересный вопрос: как осуществлять прокрутку такого экрана? Например, можно его задвигать поверх фоновой фотографии и далее двигать вместе с альбомом (или под него?):

А можно наоборот вместе с фотографией:

Информацию о похожих песнях можно вставить еще правее или вкладками, как мы делали ранее:

Ура!

И еще одна деталь: на забывайте привязывать дизайн к сетке.

В следующей статье мы займемся главным экраном приложения.

И от такого исходного варианта:

шаг за шагом перешли к такому:

В этой статье мы рассмотрим дальнейшее развитие имеющегося решения и по сути мы сконцентрируемся на одной вещи: списке воспроизведения композиций.

Я напомню, что основным вектором развития приложения, нашим “best@statement”, является стремление обеспечить пользователю наилучшее погружение в прослушивание имеющейся у него (или его друзей) музыки. Нам важно убрать все лишнее и раздражающее, максимально предоставив место текущей композиции, но также нужно думать обо всем процессе прослушивания и учитывать социальный контекст.

Список воспроизведения

Итак, наше второе путешествие посвящено работе со списком воспроизведения, с которым, вообще говоря, сходу не очень понятно, что делать. Напомню, что сейчас он выглядит так:

Это длинный список на всю ширину экрана, под каждую композицию отведена одна полупрозрачная плитка, нажатие на любую из которых запускает проигрывание соответствующей песни.

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

В этом списке есть чисто визуальные вещи, которые меня сильно смущают, но я к ним перейду позже. Тем не менее рекомендую вам самостоятельно провести какое-то время с приложением, чтобы составить свое мнение.

Давайте для начала посмотрим, что со списками делают в других приложениях, чтобы получить представление о том, как это бывает «по-другому». Мне представляется, что умение смотреть по сторонам, является важным умением, хотя некоторые могут возразить тем, что это может убить уникальность, вкус, полет фантазии и т.п.

А как у них?

Некоторые из приложений, на которые мы сегодня посмотрим, упоминались ранее. Некоторые будут новыми. Ключевая вещь, на которую я хочу обратить ваше внимание заключается в том, какую роль играет список воспроизведения в том или ином приложении. От этого во многом зависит, в каком виде он доступен для пользователя.

Я начну обзор с приложения Desi Music. В нем мы можем запустить какой-либо список композиций на воспроизведение, либо составить свой:

После начала воспроизведения список композиций скрыт и открывается, как на скриншоте выше, после нажатия на кнопку “playlist” в панели приложения. Список как бы является частью плеера и вместе с плеером доступен на всех страницах.

В еще одном индийском приложении Dhingana список воспроизведения также открывается по нажатию кнопки в панели приложения:

Однако на этот раз список в соответствии с географической привязкой открывается справа. Также обратите внимание на интеграцию возможности удаления композиций из списка.

В приложении QQ音乐 (я не знаю китайского, поэтому могу ошибаться в суждениях) можно погрузиться в ту или иную коллекцию музыки или альбом и запустить список на воспроизведение:

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

В бразильском приложении Palco MP3 (португальский я тоже не знаю, поэтому тоже могу заблуждаться) схожая идея реализована, как мне представляется более грамотным образом. Перейдя к какой-то коллекции, я могу запустить ее на воспроизведение:

В дальнейшем на остальных страницах становится доступным сверху плеер:

Нажав на картинку альбома, я могу вернуться назад к списку воспроизведения. Важным моментом здесь является то, что в каждый момент проигрывается какой-то конкретный альбом, а не просто случайный список, поэтому связь между картинкой альбома и списком достаточно прозрачна и, я бы сказал, даже очевидна.

Во французском Qobuz при открытии некоторых списков (альбомов) можно заподозрить, что на странице есть активный список воспроизведения:

Однако это не так: список справа не отображает текущее состояние, он только позволяет запускать воспроизведение. (Также отмечу, что список играет другую роль — из него можно делать ручные выборки только нужных композиций.)

Но не все так плохо. На самом деле все хорошо — чтобы открыть текущий список воспроизведения, достаточно нажать на картинку альбома в плеере, после чего открывается отдельная страница со списком и встроенным плеером:

Отмечу также, что перейти к текущему списку можно с главной страницы через большую плитку.

В красивейшем радио-приложении DI.FM в силу природы приложения как такового списка нет, но есть список проигранных ранее композиций:

Список в ограниченном виде выводит то, что было ранее. (Стрелки назад и вперед переключают радиостанции/подборки.) Я бы не приводил это приложение в этой подборке, если бы не одна интересная мысль: а что, если иногда списка не должно быть?

Например, обратите внимание на приложение Nokia Music. Оно создано вокруг прослушивания миксов — тематических подборок композиций, в которых каждая следующая является случайной для слушателя. В таком случае никакого списка действительно не нужно!

Однако стоит перейти к своим собственным коллекциям, так возможность открытия списка сразу появляется по первому же запросу пользователя:

Кстати, обратите внимание, что опции управления списком (перемешивание и цикличность) отделены и самого плеера и привязаны к списку. И еще интересная деталь, на которую я рекомендую обратить внимание: на промежуточных экранах для возврата к списку воспроизведения есть специальная кнопка, переводящая на главную страницу приложения:

В некоторых приложениях список воспроизведения кладется в основу всей композиции приложения. Например, так это сделано в приложении Social DJ. Здесь первое же, что меня встречает, это мой плейлист (возможно, разбавленный рекомендациями):

Подумайте: плейлист занимает все возможное пространство, он и есть контент приложения!

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

Это также не хорошо или плохо. Просто обратите внимание на то, что в таких относительно простых случаях можно думать о том, чтобы все было под рукой. Правда, если фокус приложения не на том, чтобы все было под рукой, а на том, чтобы под рукой не было лишнего, такой вариант подходит не очень хорошо.

Последнее приложение, которое я хочу показать в этой подборке, — это vkTune:

У него весьма интересная композиция, в общем-то полностью умещающаяся в экран. Слева всегда висит плеер, по центру и далее до конца находятся список доступных список и текущий список воспроизведения. В данном случае список снова занимает значительную долю доступного пространства.

Я думаю, возможны и другие варианты работы со списком воспроизведения, но в целом еще раз хочу подчеркнуть важный вопрос, который нужно держать в голове, думая о музыкальном приложении: насколько важен список воспроизведения и в какие моменты он действительно важен для пользователя?

На этой ноте мы перейдем непосредственно к списку воспроизведения в Музыке VK.

А что у нас?

Ну что же, мы снова здесь и снова смотрим на экран приложения. Я смотрю на него уже в который раз, думая о разных мелочах, которые важно учитывать. Например, возникает интересная мысль о том, что хорошо бы все цветные элементы перекрашивать в какой-нибудь характерный цвет картинки — это играет на общую атмосферу:

Попутно думаю о картинке альбома и наложении на нее различных элементов управления: ключевая сложность в том, чтобы подгадать цвет и контраст элемента управления и фона. Это, конечно, нетривиальная задача: тут либо нужен какой-то алгоритм подборки цвета, либо нужно оттенять картинку, подкладывая промежуточный полупрозрачный слой:

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

Потом я смотрю снова на список воспроизведения и отмечаю для себя несколько важных моментов:

• Когда я спрашивал коллег, что они думаю об этом списке, несколько человек отметили, что у него низкая плотность. На экране помещается буквально около 5 композиций, то есть это текущая и ±2 еще две композиции. «В таком списке, — говорят мне, — Трудно перескочить куда-нибудь сильно дальше.»
• И это правда: такой вариант представления списка ограничивает восприятие информации. Это, опять-таки, не хорошо или плохо, скорее просто некоторое решение некоторой задачи.
• Хочется подумать над тем, как можно сделать представление более компактным. Но в то же время надо помнить о том, что размер порции информации задает и скорость потребления/смены. Также горизонтальный список непривычен, а горизонтальная прокрутка заведомо предполагает меньшую скорость смены информации.
• Список играет две роли: это элемент двойного назначения — он можно быть как текущим списком воспроизведения, так и просто некоторым открытым списком. Различить их можно будет только по заголовку страницы.
• Такая двойственность списка представляет собой довольно интересный поворот сюжета: если бы вы делали отдельно список, например, результатов поиска и отдельно список воспроизведения, это наверняка были бы два разных технических решения, как это сделано во многих приложениях.
• Как только пользователь в списке на экране запускает что-то на воспроизведение, именно этот список становится текущим списком воспроизведения. Однако существует некоторая вероятность, что этого не случится, то есть пользователь, например, вернется назад.
• Акт разрушения текущего списка воспроизведения оказывается необычайно простым в осуществлении со стороны пользователя. Впрочем, не уверен, что это плохо. Однако же! Во многом ситуацию спасает стек навигации: нажимая на кнопку назад я могу вернуться к предыдущему состоянию/списку.
• Внешний вид списка, конечно, можно улучшить, но ключевой вопрос, над которым стоит подумать — это его форма и расположение.
• Мне нравится идея, что список не должен быть сильно навязчивым, если я хочу погрузиться в текущую композицию. Возможно, он вообще должен скрываться, как это делается в некоторых приложениях?
• С другой стороны, он занимает немного места и фактически заменяет собой потребность в кнопках «вперед» и «назад»: вместо взаимодействия с элементами управления я могу взаимодействовать непосредственно с контентом. Это ли не прекрасно?
• Меня, конечно, смущает, что в некоторые моменты времени теперь на экране может оказаться аж три надписи с одной и той же композицией: на экране, в плейлисте и в самом плеере. Повторяем три раза для непонятливых, ага.

Как промежуточный вывод:

• Хочется добавить более компактного, сжатого представления, когда видно намного больше! В то же время, надо бы еще подумать над тем, нужно ли всегда показывать список воспроизведения.
• Объекты двойного назначения опасны и интересны.
• Горизонтальная прокрутка для списка воспроизведения необычна и этим привлекательна. Расположение ее в нижней части экрана верно в том смысле, что эта область лучше всего подходит для управления пальцами.
• Надо улучшить внешний вид списка. Возможно, стоит сохранить дублирование информации, но не факт, конечно.

Обновление

Ну что же, вооружившись знаниями и мыслями, давайте что-нибудь придумаем. «А как придумать-то?» — возможно, спросите вы.

Давайте начнем с первой задачи: более компактное и сжатое представление. Мое первое движение в том начинании — это попробовать воспроизвести конечную цель. Если закрыть глаза на множество мелких деталей и нюансов, как бы выглядело более компактное и насыщенное представление, возможно, очень длинного списка композиций?

В настоящий момент приложение имеет примерно такой вид:

Более сжатое и насыщенное представление, когда сразу видно намного большую часть списка, — это движение в сторону замощения плитками композиций всего свободного пространства:

Знакомо, не правда ли? Это как раз классическое представление списка с наполнением по колонкам и горизонтальной прокруткой. Конечно, тут не все так просто:

· Как при этом отображается текущая композиция (сейчас она слева в неизменном виде)?

· Как происходит прокрутка списка: «под» текущую композицию или вместе с ней?

И, в конце концов, разве мы не потеряли только что все то, к чему стремились? Свободное пространство, минимум деталей, погружение в контент и композицию. Каюсь, потеряли!

Тем не менее, я думаю, это правильное направление. Хотя и неоднозначное тоже. Возможно, вы в этот момент, как и я, задумались, что же делать? Что выбрать: интересную небольшую композицию внизу или нагруженную композицию во весь экран?

Погодите, давайте я вам в красках покажу, о чем речь:

Чувствуете, как можно легко потерять чувство свободы, выпустив из приложения доступный воздух? Тут есть, конечно, много стилистических деталей, над которыми стоит подумать, однако, попробуйте сконцентрироваться на воздухе и потерянном свободном пространстве. Чувствуете, как только что мы заперли Джона Бон Джови за решеткой плиток? Чувствуете мешанину плиток и фона (хотя есть и противоположное мнение, что фон сзади — это хорошо)?

С другой стороны, уже в таком композиции мы в 4 раза увеличили количество обозримой информации. И, наверняка, многим пользователям это даже пришлось бы по вкусу с точки зрения быстрых манипуляций над списками.

Я надеюсь, вас вслед за мной также раздирают противоречия. Без противоречий никак нельзя.

Теперь давайте эти противоречия устранять. Следите за руками!

Сжатие контекста

Я сделаю только одно, небольшое, но заметное изменение в текущем экране. Не пропустите:

Заметили? Отлично. Я еще не знаю, как этот список должен прокручиваться: вместе с текущей композицией или нет. Мне очень хочется поместить на альбом кнопку play/pause… А еще пустить на фоне легкую текстуру (да, очень хочется уйти от сплошного монотонного темно-темно-серого фона). Но это все потом. Сейчас главное — сам список.

Кажется, в таком виде он выглядит более привычно и естественно, хотя все еще есть отдельные шероховатости, к которым мы скоро перейдем. (На счет естественности, к слову, нужно отметить, что самый привычный список — это просто вертикальный список композиций, а такое замощение плитками скорее свойственно именно для Windows 8.)

Посмотрите наверх. А теперь давайте еще раз посмотрим на вариант с плоским списком внизу:

Здесь воздух, свобода и пространство. Что выбрать? Вот они, муки дизайнера.

Решение рядом. Фокус заключается в том, что надо признать, что это одно и тоже. Оба варианта в значительной степень идентичны: они показывают одно и тоже, только в разном масштабе. На «воздушном» экране мы погрузились в конкретную композицию, а на «сжатом» мы отодвинулись назад и увидели весь список целиком.

В мире Windows 8 это называется контекстным масштабирование, или Semantic Zoom. Нам просто надо добавить одну маленькую деталь:

Если не заметили, она справа над списком. Это возможность «сжать» представление и перейти к более компактному виду. Конечно, оно должно также активироваться просто жестами и с клавиатуры.

Теперь давайте их просто поставим рядом и порадуемся минуту:

«Сжимаем» Джона — и получаем маленького Бон Джови. Нажимаем на маленького — и получаем большого. Радуемся.

Я тут отмечу еще несколько моментов, прежде, чем мы двинемся дальше:

1. Надо тестировать, но может оказаться, что на практике будет хотеться взаимодействовать в сжатом режиме без переключения в «воздушный», то есть именно в режиме более полного и насыщенного списка. Повторю, надо тестировать, но в таком случае будет целесообразным подумать над каким-нибудь другим решением, возможно, что-то для «заморозки» режима.
2. Еще у меня была мысль, что если бы большой список выезжал снизу, дополняя имеющийся, это было бы забавно, но я не придумал, как расположить контент для этого. J
3. Еще вернулась Алена и сказала, что нужно на экран тоже добавить кнопку play/pause для быстрого доступа, и рекомендовала увеличить интервалы между столбцами списка, иначе не понятен порядок.
4. И еще, была мысль, что если пользователь ничего не делает на экране, то можно временно прятать все вторичные элементы, включая списки воспроизведения:
   
   
   
   Конечно, в таком случае точно хочется если не кнопочек проигрывания/паузы, то хотя бы легкой полосы прогресса. Что-то похоже реализовано, кстати, в во встроенном приложении Music.

Прокрутка

Следующий важный момент, с которым хорошо бы хотя бы чуть-чуть повозиться, заключается в том, как сжатый список прокручивается. Как я говорил, есть два основных варианта: вместе с альбомом и «под» альбом.

Первый вариант предполагает, что все, что находится на экране является единой композицией, выстроенной слева направо и соответствующим образом должно прокручиваться (я спрятал панель приложения):

Здесь есть очевидный плюс в монолитности. Такой способ прокрутки характерен для Windows 8. Контент как бы простирается от одного края до другого и за пределы краев — и экран устройства является окном к этому контенту, показывающим лишь какой-то фрагмент.

Во втором варианте часть экрана с текущей композицией и картинкой альбома является недвижимой и список уходит как бы под нее:

Это вариант тоже вполне приемлем, только нужно будет лучше проработать область стыка и решить, как ее делать. Например, она может быть градиентной, как на картинке выше, или наоборот резкой.

Какое именно решение принять, не знаю, надо пробовать: смотреть как это будет в реализации и восприниматься пользователями.

Еще один вариант, кстати, сделать что-то наподобие решения, которое используется в Netflix на главной странице (см. видео: https://www.youtube.com/watch?v=rrME7SITf70 ):

Красная лента слева прячется наверх, как только начинается прокрутка — и разворачивается по нажатию на заголовок в любом состоянии прокрутки. Мы можем сделать свою сворачивающуюся область:

Далее во время прокрутки лента может схлопываться:

Кажется, это может работать, но и это тоже надо тестировать, причем учитывая множество дополнительных деталей, которые мы еще не рассматривали. Например, что будет если нажать на кнопку с деталями песни, где сейчас показываются текст и похожие композиции? Открыть всплывающий элемент, показать сбоку? Как это должно накладываться на все остальное?

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

Детали

Наконец, последнее на сегодня упражнение: попробовать проработать некоторые детали отображения списка.

Прежде всего, как я уже говорил и показывал на примерах в начале, наиболее частое представление списка — классическое вертикальное. Здесь мы его принципиально не рассматриваем, но это тоже может быть разумным вариантом!

Я начну со сжатого представления. Сейчас оно выглядит вот так:

Одно из первых действий, следуя мудрому совету, немного раздвинуть колонки, чтобы была более очевидной последовательность в списке:

Можно попробовать удалить время или перенести его в правый верхний угол, тогда можно будет уменьшить высоту плиток и вместить больше композиций на экран, но это не является самоцелью и также уменьшит область попадания, плюс возникнет риск наложения длинного заголовка на подпись со временем.

Еще одна мысль заключается в том, чтобы попробовать добавить явно номер композиции в списке, чтобы сделать более очевидным порядок (и заодно положение композиции в списке и объем списка):

Потенциально явные номера могут помочь найти «песню во второй сотне», но не очевидно, что делать, если список перемешан.

Еще одна вариация заключается в том, чтобы вообще убрать подложки:

Тут мы фактически для выстраивания контента используем сетку и сам контент, как и завещают рекомендации по дизайну для Windows 8. Заодно у нас слева от чисел добавилось воздуха — и они теперь не висят впритык к плиткам слева.

Мне кажется, так стало лучше:

Думаю, в мелочах еще нужно поработать над типографикой. Возможно, при прокрутке, когда появляется скролл, стоит как-то отдельно отмечать, где относительно всего списка находится текущая активная композиция.

Теперь давайте попробуем применить это же в «воздушном» варианте:

Кажется, удаление лишних деталей в виде плиток в целом сказывается позитивно, однако, мы тут мы явно попадаем в проблему с контрастом между текстом и фоном. Один из путей ее решения нам хорошо знаком: нужно добавить что-нибудь оттеняющее нужную часть пространства.

Кажется, работает! Из мелочей: пожалуй, текущая композиция в списке стала менее «активной», чем окружение и по идее должно быть наоборот.

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

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

Еще важный момент: несмотря на некоторые мнения, лично я не отношу себя к дизайнерам, скорее к просто достаточно разумным для некоторых задач людям. Я также не формулирую гайдлайны для Windows 8 и не имею никакого отношения к разработке каких-либо из упоминаемых приложений.

Давайте двигаться дальше. Первое, что я рекомендую вам сделать, чтобы вы тоже могли прочувствовать мои выводы (кстати, если вы с ними не согласны или у вас есть другие варианты решений/улучшений, и я, и Филипп, будем рады увидеть ваше мнение в комментариях), это поставить себе приложение. Сделать это можно, перейдя по этой ссылке: https://apps.microsoft.com/webpdp/app/f2a74b99-7263-418a-a3d3-4d0c0f69a6b2.

Поиграйтесь с приложением, послушайте любимую музыку, проведите с ним какое-то время. Это неплохое приложение. Да. Хотя местами мрачноватое и несколько неуклюжее в деталях. Но неплохое.

Вообще, должен отметить, что если бы задача формулировалась просто как «сделать классное приложение для проигрывания музыки из Вконтакта», возможно, это было бы тоже многим интересно. В постановке «а давайте все выкинем и спроектируем с нуля», безусловно, есть какой-то свой разрушающий шарм. Однако я буду заниматься совершенно другим: стараться постепенно, шаг за шагом, подтянуть уровень приложения до новой более высокой планки, оставляя, впрочем, автору многие свободы и право самостоятельно выбрать путь дальнейшего развития приложения.

Ах да, *just in case*, вся музыка в моих личных аудиозаписях честно куплена. А теперь в бой!

Где север?

Прежде всего, чтобы двигаться, нам нужно направление. Нужны ориентиры, от которых мы сможем отталкиваться, и цель, к которой мы будем двигаться. С первым все более-менее просто — это наши гайдлайны (https://design.windows.com) и принципы дизайна для Windows 8, вместе задающие рамки, в которые нужно стараться попасть. Со вторым сложнее — и наверняка цель приложения может сформулировать только его автор. Но я все же попытаюсь определить некоторые варианты.

Иметь перед собой достаточно ясную цель, понимать, зачем и для кого вы что-то делаете, — это все чрезвычайно важно. Вы, конечно, можете делать просто так, для души, не сильно задумываясь о критериях, но боюсь, что даже гениальные художники вначале должны научиться орудовать кистью и красками, а потом последовательно мазок за мазком стремиться к своему совершенству.

Чтобы понять, что какое-то решение является более приемлемым, чем другое, или, например, что какой-то элемент приложения можно спокойно выкинуть, нужно такие решения с чем-то соизмерять. Одним из вариантом соизмерения является формулировка того, в чем ваше приложение лучше других (best at statement). Готовясь к этой серии, я пересмотрел около 20 различных приложений музыкальной направленности, среди которых были и приложения для радио, и для проигрывания музыкальных коллекций из разных источников, и с явным фокусом на тексте песен, и да… несколько музыкальных приложений для Вконтакте.

Автор должен задать себе вопрос: «а ведь и правда, в чем мое приложение лучше?». И я задаю этот вопрос себе, заведомо понимая, что от ответа будут зависеть принимаемые решения. Например, я могу ответить, что «это лучшее приложение для проигрывания музыки из Вконтакте», но таких уже несколько — и все они могут быть лучшими. Мимо. Нужно направить в какое-то конкретное русло. Это может быть «лучшее социальное приложение для проигрывания музыки из Вконтакте» — лучше, но это явно не фокус данного приложения, по крайней мере, сейчас. Еще?

«Лучшее приложения для погружения в музыку из Вконтакта» — кажется, это уже ближе к делу, и мне даже начинает нравиться. Мы будем создавать атмосферу, выкидывать лишнее, стремиться дать пользователю не просто послушать какие-то списки музыки, но и действительно насладиться музыкой. Создать атмосферу — это непросто, но автор уже сделал один простой, но важный и харизматичный шаг, поставив на фон каждой композиции фотографию группы, отведя ей очень много места, спрятав по умолчанию много лишних деталей. К таким проявлениям и надо стремиться:

Это прекрасно. Это не всем нравится, но это, правда, прекрасно!

На самом деле, вам, как авторам, разработчикам и дизайнерам, тоже надо быть готовыми к тому, чтобы делать прекрасные вещи, которые не всем будут нравиться. Я специально поспрашивал ряд коллег, что они об этом думают, — и мнения были разными. Но лично я думаю, что это тоже прекрасно, хотя еще и не представляю, в какой мере этим мнения нужно учитывать.

Ура, у нас есть цель, но…

Хьюстон, у нас проблема: приложение-то ужасно. Честно говоря, это была моя первая реакция, которая меня еще долго не покидала и в отдельных аспектах не покидает до сих пор. Филипп сказал, что это он и так знает, но вопрос в том, как сделать приложение лучше.

Плеер

Вторая и основная часть этой статьи будет посвящена исключительно одному вопросу: что делать с плеером, причем, забегая вперед, скажу, что сегодня мы разберем только половину дела, которой, возможно, и хватит для начала автору, но не хватит мне.

«С плеером беда», — подумал я, посмотрев на приложение. Нет, это не самый ужасный или плохой плеер, который я видел. Вполне себе плеер.

Кстати, для не очень наблюдательных слушателей отмечу, что у плеера есть еще две части. Вот список воспроизведения:

А вот еще регулировка громкости сверху:

Основная проблема этого плеера в том, что он перегружен. В нем слишком много элементов управления, которые неаккуратно разбросаны направо-налево. Элементов так много, что элемент управления уровнем звука оказался вытеснен наверх. Вот как много!

Кстати, в практическом выражении это приводит к некорректной обрезке в Fill-режиме работы приложения:

Не забывайте это тестировать. Минимальное разрешение, которое должно поддерживать ваше приложение: 1024x768.

Есть и еще несколько важных мелочей, но их мы обсудим позже.

Почему плеер?

Если вы еще на задались вопросом, почему я начал с плеера, самое время его задать. А действительно, почему мы начали с плеера, а не, скажем, с главной страницы? Это, друзья, один из ключевых вопросов нашей пьесы.

Плеер, как способ управления воспроизведением композиций, является одним из краеугольных камней музыкального приложения. В чем-то даже фундаментом для всего остального здания. В некоторых случаях, как, например, в приложении Radio Paradise он настолько важен, что кроме него и атмосферы в приложении почти ничего нет:

(Тут, впрочем, плеер можно спрятать — и тогда останется одна атмосфера, но этот момент мы оставим на потом.)

Плеер находится в центре событий и, не разобравшись с ним, мы не сможем продуктивно двигаться дальше. Здесь я себе также позволю заметное отступление в сторону общих вопросов создания и использования плеера в приложении и размещения его в панели приложения в частности.

Типичный плеер

Если вы поставите себе с десяток различных музыкальных приложений для Windows 8, вы довольно быстро обнаружите одну закономерность:

Большинство из этих приложений имеют общую схему композиции в части размещения плеера воспроизведения в нижней панели приложения. И это не случайно. Этой же схемы придерживается и автор приложения Музыка ВК.

В целом, схема выглядит примерно так:

Плеер на разных страницах единообразно размещается в панели приложения, поддерживая текущий статус воспроизведения и предоставляя доступ к различным элементам управления. Иногда в панели также можно вызвать вторичны команды вроде показа списка воспроизведения. Сами команды плеера также можно условно разделить на главные (play/pause/stop) и вторичные (prev/next/shuffle/cycle…).

Авторы каждого конкретного приложения сами расставляют приоритеты, но в целом это типовое решение стандартной задачи, думаю, во многом вдохновленное приложением Music, поставляемым вместе с Windows 8:

Вот, например, плеер приложения Gaana:

Здесь вся композиция центрирована, а элементов «вперед/назад», кстати, вообще нет. Нет здесь и управления звуком, так как используется просто системный уровень громкости. По нажатию на небольшую стрелочку слева от кнопки паузы открывается список воспроизведения.

А вот плеер приложения 双子电台 для прослушивания радиостанций:

Здесь плеер небольшой, также нет звука, а слева много пустого пространства.

Еще одно китайское приложение — QQ音乐, уже музыкальное:

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

Кстати, в этом же приложении интересно нетипичное меню для смена цикличности (это не стандартное flyout-меню):

В приложении Multimedia 8 панель приложения двоякая, что связано с сутью приложения. Оно нацелено на управление коллекциями музыки и в частности одной из задач является создание списков воспроизведения. Поэтому на многих страницах вы увидите вот такую композицию:

В правой, контекстной, части находится то, что связано с выделенным набором песен, а слева, в глобальной, — достаточно компактный плеер для воспроизведения. Нажав на иконку альбома можно перейти непосредственно к полноэкранному плееру:

Дополнительные опции спрятаны за многоточием, вперед/назад не в фокусе, а звук, кстати, вынесен отдельно наверх.

И еще один пример — приложение Desi Music из Индии:

Тут плеер занимает значительную часть пространства и отнесен в правую, глобальную, часть. Чем-то напоминает плеер из Music: наиболее частые команды вынесены совсем направо традиционной группой prev/play|pause/next, а вторичные команды смешивания и повторения оказались левее. У меня это вызывает некоторое замешательство, так как я бы переставил эти группы как раз в обратном порядке, но, возможно, тут есть еще какие-то культурные особенности. Слева в панели находится правильно вынесенная отдельно команда доступа к плейлисту (однако, она не контекстная по сути), и рядом с ней — настройки для загрузки композиций.

И еще… тоже из Индии — веселое и яркое приложение Dhingana:

Кастомная панель приложения с более плотной композицией кнопок, но в общем-то с той же последовательностью элементов, что и в примере выше. Список воспроизведения внесен «внутрь».

И еще… плеер из приложения 8tracks radio:

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

И последний пример в этой подборке — приложение 多米音乐:

Здесь плеер разделен на две части: слева — то, что сейчас происходит + лайк, справа — элементы управления плеером. Панели и кнопки кастомные и весьма своеобразно стилизованные.

Примеры можно было бы и продолжать, благо их хватает. Во многих приложениях можно найти отдельные интересные решения, которые могут послужить источником вдохновения для собственного творчества. Кстати, рекомендую просмотреть эти примеры еще раз. Обратите внимание, что в них по-разному выстаивается, например, работа со шкалой прогресса воспроизведения и отображением времени.

Мысли про плееры

Прежде, чем мы перейдем непосредственно к плееру приложения Музыка ВК, я постараюсь резюмировать несколько своих мыслей на счет использования для него панели приложения и поведения самого плеера:

• В зависимости от природы контента (например, контент радиостанции или музыкальная коллекция) функциональность кнопок вперед/назад может различаться. В большинстве случае обе кнопки являются вторичными и иногда могу опускаться. Особенно это касается кнопки «назад», которая размещается скорее по привычке и для симметрии, а на практике используется редко. К слову, в приложении Музыка ВК кнопка «назад» в плеере отсутствует, хотя это не означает, что нет способа вернуться к предыдущей композиции.
• Решение о лево- или правостороннем размещении плеера в панели приложения авторами, похоже, принимается несистемно, но исходя из некоторых представлении о симметрии и эстетики. Тем не менее, общая рекомендация заключается в том, чтобы размещать глобальные команды справа, а контекстные (например, завязанные на текущее состояние или выделение) слева. Также, конечно, следует учитывать стилистические моменты и в целом стремиться к достижению баланса в заполнении панели приложения, чтобы не было больших перекосов в одной из частей.
• Визуальный стиль элементов может отличаться, но в целом разнообразие не очень большое и есть стремление к общей стилистике элементов управления в Windows 8: круглые кнопки на панели приложения, простые иконки и т.п. Например, вот так выглядит панель в приложении NRJ:
  
  
  
  Обратите внимание на забавный ползунок для управления уровнем звука.
• Обычно в приложении есть только один текущий список воспроизведения — и, как только он изменен, нет способа вернуться к предыдущему состоянию, если только оно не было явно сохранено. Не уверен, что это действительно проблема, но это прослеживается почти во всех приложениях.

• В большинстве случае плеер с панелью приложения по умолчанию спрятан, хотя иногда может намеренно активироваться, чтобы подсказать пользователю, где искать элементы управления. В некоторых приложениях панель постоянно видна, иногда это полностью кастомный элемент управления, использующий область панели приложения.
• Тот факт, что элементы управления прячутся с панелью приложения — это правильное и разумное поведение. Однако надо иметь в виду, что оно рассчитано на то, что основное действие (например, погружение в контент) происходит прямо на экране и команды, размещенные в панели приложения, носят вторичный характер. Обратная сторона этого решения как раз заключается в том, что пользователь теряет контроль над ключевым действием: чтобы остановить воспроизведение или перейти к следующей композиции нужен промежуточный шаг по открытию панели.
• В некоторых приложениях этот тонкий момент обходится вынесением элементов управления на экран приложения (в отдельных страницах). Например, в приложении iHeartRadio на главной странице кнопка запуска/остановки воспроизведения размещена сразу при входе:
  
  
  
  А на остальных страницах она доступна в панели приложения:
  
  
  
  Однако со всеми решениями, меняющими расположение типовых элементов от страницы к странице, нужно быть предельно осторожными.
• Отдельный момент — уровень громкости. В некоторых приложениях он есть, в некоторых нет — из расчета на системный регулятор. В целом история выглядит следующим образом: когда ваше приложение проигрывает аудиокомпозиции, оно может интегрироваться в системный механизм воспроизведения — соответствующее меню с уровнем громкости, а также кнопками проигрывания/паузы и вперед/назад появляется при нажатии на кнопки регулирования громкости на устройстве или клавиатуре (слева наверху):
  
  
  
  Это общесистемный уровень громкости. В приложении может быть также свой собственный, что в большинстве случаев является полезным, так как позволяет более тонко регулировать уровень, причем независимо для разных приложений. Обратная сторона встраивания такого регулятора, очевидно, в том, что возникает дополнительная интерфейсная сложность: как расположить ползунок, где разместить кнопку и т.п. Некоторые авторы сразу выставляют шкалу рядом с плеером, некоторые, как в примере выше, прячут ее за кнопкой (мне такой вариант представляется более правильным).
• Старайтесь не переусложнять панель приложения и плеер различными опциями. Для музыкальных приложений типичными дополнительными кнопками, например, являются команды перемешивания и режима повторения. В разных приложениях с ними обходятся по-разному: где-то их вообще нет, где-то они спрятаны в дополнительных опциях (например, за многоточием – см. скриншот выше), где-то размещены рядом с командами воспроизведения или напротив разнесены с ними по разные стороны панели. Одна из ключевых минизадач заключается как раз в том, чтобы дать правильную оценку, насколько они важны в вашем приложении. Например, в приложении Qobuz для этих команд явно отдан пониженный приоритет:
  
  
• Не забывайте про Snap-режим закрепления приложения слева или справа. В этом состоянии панель приложения занимается заметно меньше места, поэтому вам надо будет хорошенько подумать как над тем, что и в каком виде отображается на экране, так и над тем, что осталось от вашей панели приложения. Например, в упоминавшемся выше приложении QQ音乐 в Snap-режиме показывается текст текущей композиции, а кнопки в панели приложения центрированы и имеют несколько другой порядок по сравнению с полной версией:
  
  
  
  Кстати, если вы хорошо поработаете над этим состоянием приложения, оно может быть одним из самых любимых у ваших пользователей.
• Помните также об областях взаимодействия: с командами в углах работать проще, чем с командами где-то совсем в середине длинной панели.
• И последнее: несмотря на все схожие моменты, здесь все еще есть много места для грамотного приложения творчества и фантазии.

Плеер Музыки ВК

Теперь, когда вы вооружены многими знаниями и примерами, самое время посмотреть еще раз на плеер и панель приложения нашего подопытного кролика:

Я напомню, что в приложении над панелью также показывается список воспроизведения:

И дополнительно есть управление уровнем громкости внутри приложения.

Проблемы:

1. Панель приложения вместе с плеером оказывается перегруженной. Она также обрезается в Fill-режиме:
   
   
   
   ⇒ Панель нужно разгружать.
2. В панели с одной стороны видна попытка сбалансировать «вес» слева и справа, с другой стороны произошло явное смешение разнородных элементов:
• Слева: контекстные «добавить к себе» и «о песне», а также глобальные, относящиеся к плееру «играть вперемешку» и «повторять композицию» и… навигационная «текущий плейлист».
• Справа сам плеер с текущей композицией (название, прогресс проигрывания) и кнопками воспроизведения/паузы и перехода к следующей композиции. (Я бы сказал, что это тоже смесь локального и глобального, но вполне привычная).

⇒ Желательно отделить явно контекстное от глобального (и самого плеера).

⇒ Навигацию желательно отделить от управления.

Кстати, обратите внимание, что кнопки слева и справа имеют разный размер. Мне это представляется вполне сознательным действием, носящим в значительной степени эстетический характер:



Кнопки воспроизведения/паузы и вперед более важны и также не содержат подписи, поэтому центрированы в панели по вертикали без учета подписей у остальных элементов.

1. Важная мелкая деталь касается самих кнопок, точнее их внутреннего содержания. Здесь есть два момента: 1) выбор подходящих иконок и 2) правильное их размещение внутри круга.
• С первым вопросом я бы рекомендовал обратить внимание на иконки для плейлиста и перемешивания. Относительно кассеты я не уверен, а вот для перемешивания лучше использовать классическую (красную):
  
  
  
  Вообще, по умолчанию рекомендуется использовать стандартные иконки: https://msdn.microsoft.com/en-us/library/windows/apps/hh770557.aspx
  
  Также некоторые вопросы вызывает иконка добавления к себе. Плюсик — это обычно «добавление нового», а тут явно запоминание/сохранение или добавление в избранное. Для этого больше подходит звездочка или сердечко.
• Второй вопрос — более тонкий и требует привлечения некоторой механики, особенно, при ручном задании содержания кнопок/размеров и позиционирования. Я не уверен, что у нас есть попиксельная инструкция для Windows 8, но в целом тут должны быть применимы те же соображения, что и для Windows Phone: желательно, чтобы иконки внутри круга вписывались в некоторую область внутри и были сбалансированы в размере относительно друг друга:
  
  
  
  Стандартные кнопки в панели приложения имеют размер 40x40px. Вот как эта схема ложится на кнопки в панели рассматриваемого приложения:
  
  
  
  Это скорее действительно мелочи и, например, для иконки с кассетой большая ширина компенсируется небольшой высотой. Но у иконки повторения помимо выступающего конца стрелки, есть также явный артефакт центрирования, что в сумме делает ее слишком близко расположенной к границе:
  
  
  
  Слева направо: текущая кнопка, наложенная центрированная стрелка, кнопка с центрированной стрелкой.
  — Ну и что это? Разница всего в один/полтора пикселя, — возможно, скажите вы.
  
  А из таких пикселей и складывается общее впечатление — внимание к мелочам, помните принципы дизайна?
2. Теперь давайте посмотрим на текущую проигрываемую композицию: здесь мы видим обложку альбома, название песни и имя автора/название группы, а также текущий прогресс воспроизведения.
   
   
   
   Это кажется традиционным вариантом решения, однако, нужно обратить внимание на еще несколько мелочей:
• Во-первых, хорошо бы явно выделить, что является чем в названии, более внимательно расставив приоритеты. Как вариант, можно было бы сделать название группы/альбома или имя артисты сделать менее насыщенным/ярким и т.п.
• Во-вторых, правила типографики требуют, чтобы здесь использовалось тире, но никак не дефис.
• В-третьих, надо себе давать четкий ответ на вопрос: нужно ли здесь указывать время, длительность композиции и т.п. Возможно, что не нужно, но это должно быть уверенным решением.
• В-четвертых, также надо определиться, нужно ли давать пользователю возможность легко перепрыгнуть в любое место композиции (в текущем варианте да). И если да, тогда нужно обеспечить, чтобы в ползунок было удобно тыкать пальцам и размер цели соответствовал задаче.
  
  ⇒ Сам плеер надо отдельно оптимизировать

Еще из важных деталей, которые нужно учитывать:

• Кнопка с плюсиком «добавить к себе» доступна только на «чужих» песнях. Другими словами, иногда она есть, иногда ее нет.
• Кнопка с текстом «о песне» открывает всплывающий элемент, в котором можно посмотреть текст песни или увидеть похожие композиции:
  
  

Самое время распечатать банку с красками!

Колдовство

Ну что же, давайте попробуем с панелью приложения что-нибудь сделать. С технической точки зрения, моя работа движется параллельно в двух потоках: с одной стороны, я пытаюсь соотнести решение с логикой, с другой, смотрю на визуальную составляющую. Нужно искать правильный баланс между естественностью, логичность и эстетикой — в идеале они должны слиться в одном достаточно разумном решении, но никто не говорит, что само решение будет всегда идеальным…

В визуальной части я начну с того, что воспроизведу исходную панель, поменяв, однако, иконки в соответствии с обсуждавшимся выше. Исходная панель:

Обновленная панель:

С логической точки зрения нужно начать с разделения всех элементов на отдельные связанные группы:

• Действия с текущей песней, не связанные с плеером:
• добавление к себе,
• информация о песне;
• Действия с воспроизведением (плеер):
• название композиции + обложка,
• текущий прогресс воспроизведения,
• проигрывание/пауза;
• Действия с плейлистом (плеер):
• перейти к следующей песне,
• посмотреть список воспроизведения;
• Настройки режима воспроизведения (плеер):
• перемешивать,
• повторять.
• И отдельно звук!

10 элементов — многовато, конечно. И это еще нет кнопки «назад»!

Сейчас мой экран приложения выглядит примерно так, как на скриншоте ниже.

Помимо слегка обновленной панели я сделал еще несколько косметических изменений: 1) добавил некоторый акцентный цвет (на экране в тон картинки альбома) для кнопки назад и текущей композиции в плейлисте, 2) сместил картинку альбома влево, чтобы она не маячила в самом центре и было больше сплошного места для фона, 3) добавил название текущей композиции над альбомом и 4) накидал на скорую руку плейлист по аналогии с тем, что есть в реальном приложении, но с несколько другим оформлением. Это только макет — основной фокус на панели приложения.

Мой первый шаг — временно выкинуть из панели то, что не связано с плеером, так как плеер и все, что с ним связано, определенно занимает большую часть пространства. (Попутно себя ловлю на мысли, что нет ничего более постоянного, чем временное.)

Следующим шагом я убираю кнопку перехода на текущий плейлист — с ней я тоже пока не знаю, что делать. Далее у меня остается сам плеер справа и две кнопки переключения режима слева. Вспоминаю, что справа должно быть глобальное, слева — контекстное.

Плеер, текущая композиция — это текущий контекст воспроизведения, то, что происходит здесь и сейчас. Кнопки перемешивания и повторения — это глобальные настройки плеера, т.е. то, что может случиться со следующей песней или через одну. Меняем их местами, смотрим, что получилось:

Теперь правая часть мне нравится сильно больше. Зато левая стала заметно хуже, давайте попробуем уменьшить ее сложность и улучшить визуальное представление.

Первая мысль, которая меня беспокоит, — это положение кнопок воспроизведения и вперед. Ну, «вперед», еще ладно, а как дотянуться до проигрывания и паузы? Давайте подвинем их налево:

Смотрится лучше, но не очень — текущая песня оторвалась от кнопок и висит справа от них сама по себе. К тому же появился разрыв между композицией и кнопкой начала/остановки воспроизведения. Думаем еще.

В голову приходит еще одна мысль: кнопку проигрывания можно положить на альбом. Мы же останавливаем и проигрываем не воздух, а конкретную песню, значит надо интегрировать управление в нее. Пробуем:

Лучше. Кнопку «вперед» вернули на место. Есть некоторые эстетические моменты, которые нужно будет учитывать, например, контрастность и видимость кнопки, размещенной поверх картинки альбома, но это отдельная задача. Размер для кнопок также можно сделать дефолтным, еще одна мысль, которая посещает голову попутно: сделать подписи к кнопкам справа в одну строчку (заодно уменьшаем немного высоту панели):

Следующий шаг: нужно что-то сделать с названием композиции. Сейчас в нем неправильно расставлены приоритеты: сначала должна идти композиция, потом исполнитель — это вторичная информация, с которой нужно снять акцент. Пробуем варианты:

Лучше, но не то, к тому же оба названия могут быть длинными и не вместятся. Разносим на разные строчки, двигая прогресс воспроизведения ниже:

С надписями стало лучше, надо поиграться со шрифтами. Прогресс воспроизведения теперь слишком впритык к нижней границе — надо попробовать передвинуть наверх. Также имеет смысл уменьшить длину: кнопка «вперед» теперь как одинокий всадник в поле.

Компактнее.

Внезапно возникают вопросы:

• Нужно ли добавить время?
• Что, если убрать возможность перепрыгивать внутри композиции?
• Если не убирать, можно ли сделать более удобным для пальцев?

Пробуем. Удобнее для пальцев, значит, нужно увеличить область касания, и ее контрастность относительно фона и самой линии:

Подгоняем размеры картинки с альбомом под границы контента справа:

Играемся с деталями, пробуем добавить время:

Получается нагромождение подписей, экспериментируем дальше:

Да, похоже на то, что нужно.

Смотрим вариант без ползунка:

Стало пустовато, но тоже работает. Двигаемся дальше.

Начинает раздражать одиноко висящая кнопка «вперед» — надо с ней что-то сделать. Раздражают три вещи:

1. Без подписи она не похожа на кнопки справа, а подпись к ней делать бессмысленно.
2. Она одиноко висит справа от текущей песни, это по-прежнему одиноко висящая кнопка. Возможно, к ней надо добавить кнопки плейлиста или еще что-то из того, что мы временно выкинули. Однако при этом не хочется вклиниваться между традиционным порядком “prev, play/pause, next”, поэтому если добавлять, то правее от нее.
3. Она ничего не значит, кроме как «эй стоп, то есть вперед! Мне надоела текущая песня». В кнопке нет содержания, кроме действия.

Смотрю на скриншоты других приложений. Подглядываю интересную идею в приложении 8tracks radio: что если явно показать, что там впереди? Только пойти еще дальше — и вообще выкинуть кнопку вперед?

Думал поверх тоже положить кнопки, но получается слишком мелко и иконки для «вперед через одну» не придумалось. Оставили только контент. Это мне, кстати, напоминает не только мысль об интеграции действий в контент, но и идею о том, что в цифровом мире у нас есть информация о следующих композициях в отличие от традиционных аналоговых плееров, в которых такой информации нет, поэтому используются обобщенные кнопки. Вполне в духе стремления к аутентично цифровым решениям!

Ловлю себя на мысли, что как здорово, что мы фактически только что выкинули одну кнопку, а перед этим еще одну интегрировали в контент — и сэкономили тем самым место. Это ли не волшебство?

Теперь давайте вернемся к тому, что мы выкинули на первых шагах. Во-первых, мы забыли звук — его нужно возвратить в лоно панели приложения:

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

Остались избранное, информация о песне и плейлист.

Начнем с первых двух — тут в моей голове случается большая коллизия:

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

или

     
В обоих случаях соблюдение близости нарушает достигнутую эстетическую гармонию.     

• С третьей, вне наши предыдущие манипуляции фактически (сознательно или не очень) сводились к тому, чтобы выкинуть лишнее… оставив только плеер. Для плеера это несколько чужеродные элементы, так как они относятся к песне, а не самому плееру.

Смотрим на экран: куда же их впихнуть?

«На экран и впихнуть», — решаю я и перекидываю кнопки наверх.

Думаем над эстетикой. Возможно, можно выкинуть подписи или разместить кнопки сбоку?

Или внутри?

Запоминаем оба варианта, останавливаемся пока на последнем.

Теперь плейлист. Пробуем с простого варианта — добавляем его в ряд кнопок справа:

Кажется, не так уж и плохо. Даем себе еще пару минут на подумать, прежде, чем принять текущий вариант как достаточно разумный.

Что, если эту кнопку тоже сделать контекстной?

Оставляем, как потенциально работающий вариант. Смотрим на то, что получилось:

или

Радуемся.

Можно потратить еще несколько часов и отточить отдельные детали: отступы, подписи и т.п. Также стоит продумать какие-то интересные моменты: например, как происходит смена трека, меняется ли порядок иконок в «далее» и плейлисте при нажатии на кнопку случайно, если нажата кнопка «повторять текущую композицию», надо ли это как-то дополнительно отмечать?

p.s. Плейлист все же раздражает – хочется его в навигацию перенести. Посмотрим…

В следующих частях мы посмотрим,

• как можно улучшить отображение плейлиста и дополнительной информации о песне;   
• дизайн главной страницы приложения;
• snap-view, контракты, плитки и т.п.

В конце серии также обсудим некоторые дополнительные альтернативы.

Если у вас уже есть опубликованные приложения для Windows Phone и Windows 8 и вы готовы к тому, чтобы мы их немножко распотрошили и рассказали всем (в общем, мы об этом напишем статью и расскажем на DevCon), что вы сделали хорошо, а что вам категорически нужно переделывать и заодно подумали для вас, как это "переделывать" лучше всего реализовать с точки зрения дизайна, то велкам в комментарии со ссылками на ваши приложения.

Напишите в комментарии ссылку на приложение (или две ссылки, если оно есть под W8 и WP) и коротко, что вы бы хотели в нем переделать или что вам не нравится (ответ "все" или "дизайн" не подходит). Ну и какой-нибудь контакт для связи не забудьте.

p.s. Скажу честно, что мы потянем до DevCon только 2-3 приложения в дополнение к тем, которые мы уже запланировали проанализировать, поэтому приоритет будет отдаваться тем приложениям, относительно которых нам явно будет что сказать и что предложить (это сугубо субъективно), и если у вас комбинированная история WP+W8, нам это тоже более интересно (это не исключает из рассмотрения приложения только под одну из платформ).

p.p.s. Если вы хотите понять, что мы понимаем под "распотрошить", то это примерно вот так: https://blogs.msdn.com/b/kichinsky/archive/tags/_2300_metrolynch/ -- конечно, в обновленных реалиях :)

• Разработка с учетом специальных возможностей (MSDN)
• Windows 8 fact sheet for printing and and Accessibility guide for Windows 8
• Introduction to Accessibility (Channel 9)
• Designing with Narrator in mind (Channel 9)
• Создание доступных приложений (C#, VB, C++, MSDN)
• Специальные возможности в приложениях (JavaScript, MSDN)

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.

А тем, кто заинтересован в подробностях с точки зрения юзабилити, рекомендую соответствующую статью Якоба Нильсена – “Progressive Disclosure”.

Сегодня мы попробуем заглянуть в эту область еще с нескольких сторон – и я постараюсь показать, как идея вытягивания важной информации наверх может изменять UX и связанные интерфейсные решения, особенно в проекции на Windows 8.

Время

У всякой информации может быть много проекцией, по которым она раскладывается в пользовательском опыте. Например, все, что мы рассматривали до этого, касалось семантической структуры информации и ее распределения по экранам.

Другой важной проекцией информации является ее временная составляющая: когда та или иная информация появляется в процессе взаимодействия с приложением.

В одном реальном приложении его авторы столкнулись с такой задачей:

• есть поле для ключевой активности приложения, которая завязана на, скажем, собирание «яблок»;
• собранные «яблоки» заносятся в ящики;
• логика приложения такова, что пользователь, заинтересованный в ключевой активности, собирает «яблоки», однако, количество ящиков ограничено – и чтобы снять это ограничение он должен зарегистрироваться/заплатить/сделать дополнительное действие.

Это в общем-то классический прием любых триальных ограничений, подсаживающих пользователя на работу с приложением, но требующих в какой-то момент выполнения дополнительного действия, выгодного авторам приложения. Однако нас в этой истории интересует совсем другой момент – как пользователь узнает об этом ограничении.

В первом варианте приложения это выглядело следующим образом: пользователь мог в волю работать с приложением, пока количество заполненных ящиков не достигало некоторого порогового значения, например, 15. После этого, как только он хотел добавить шестнадцатое яблоко, его «радовало» сообщение о том, что он должен сделать дальше:



Это — проблема, потому что произошедшее событие не является в полной мере предсказуемым для пользователя: у него нет контроля над происходящими действиями (или ощущения такого контроля). Также подобное сообщение, конечно, обескураживает в самый неподходящий момент.



У этой проблемы есть и классическое решение, о котором я расскажу чуть ниже, однако, на что я хочу обратить ваше внимание, так это на временную проекцию данной информации.

Надо начать с того, что наличие подобного порогового значения и его скорое приближение является важной информацией с точки зрения сценариев работы с приложением. Можно даже сказать, что она является критичной для как для пользователя, так и для авторов приложения. Поэтому возникает мысль о вытягивании этой информации ближе к пользователю, но уже не по иерархии экранов, а по временной шкале.

Чем раньше я об этом узнаю, тем лучше. Впрочем, когда это «раньше» должно наступить, требует внимательного изучения в каждом конкретном случае. Например, можно вести пользователя за ручку сразу, выводя некоторую полосу прогресса:



А можно вывести предупреждение за шаг или несколько до наступления события, заблокировав дальнейшие действия:



Или сделать и то, и другое сразу:



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

Здесь также работает идея о том, что вместо того, чтобы выдавать пользователю сообщение об ошибке в его действиях (в нашем случае попытке добавить еще одно яблоко), лучше просто не разрешать подобное действие, если оно уже невозможно, сообщив, однако, что именно происходит в текущий момент.



Я не думаю, что описанное выше должно быть для вас большим откровением, тем не менее, надеюсь, мне удалось проиллюстрировать общую идею.

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

Контекст

Давайте рассмотрим еще один интересный пример и поговорим о географии, точнее о геопривязке. Тема эта известная, возможно, даже чуть-чуть поднадоевшая, но надеюсь, окажется тоже достаточно прозрачной.

Представьте, что вы решили предоставить пользователю доступ к каталогу каких-то географических объектов, скажем, кафе/ресторанов с живой музыкой или чего-то более зимнего, например, катков в г. М.

Вы можете начать с идеи вывести все объекты на карте города, дав возможность масштабировать и, к примеру, накладывать некоторые фильтры:



Далее по нажатию на любой из объектов можно показывать сопутствующую информацию (описание, адрес, средний размер чека, время работы и т.п.), либо непосредственно переводить на карточку объекта.

Это как бы базовая идея, отправная точка, которая, возможно, пришла вам в голову. Теперь надо забраться в голову к пользователю. Например, выяснить, насколько целевая аудитория в реальности ориентируется по карте, представляет себе те или иные районы города и говорит ли ей что-нибудь расположение конкретной метки, кроме «это примерно вот там»?

Может оказаться, что оптимальным способом представления информации и вовсе будет не карта, а самый настоящий список объектов. Список, понятное дело, нельзя выводить хаотично, нужна сортировка, фильтрации и т.п.



Дальше нужно копаться в детали и смотреть на сущность информации и пользовательские сценарии, стремясь достичь очень простого результата: релевантности выдачи, то есть по умолчанию большинство пользователей должно получить подходящий объект среди первых нескольких в списке, хотя сам список может содержать сотни позиций.

Одна из первых идей, которая приходит в голову, — это выводить список с учетом геопривязки устройства пользователя, то есть сортировать по расстоянию от устройства до объекта и показывать соответственно само расстояние. В списке это выводится просто текстом, например, «1.4 км». На карте достаточно обозначить текущее местоположение пользователя и прокладывать маршруты до выбранной точки.

В итоге мы получим географическую близость объектов к пользователю. Если расширить это понятие, то можно говорить о том, что мы ближе к пользователю вытаскиваем то, что ближе ему по текущему контексту.

Это может быть не только расстояние до объекта, но и, например, способ проезда к объекту: если мы из каких-то условий понимаем, что пользователь едет общественным транспортом, это одна ситуация и одни маршруты, если на машине или такси, это уже совсем другая ситуация. На карте проезда от текущего местоположения пользователя нужно показывать то, что соответствует запросам пользователя.

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



Разбивка также позволяет быстрой перейти к группе, которая меня устраивает больше всего: например, я не хочу идти в ресторан в округе, но и слишком далеко тоже не хочу – перешел к группе по середине, быстро сориентировавшись по заголовку.

Еще пример на контекстность: если заведение скоро закроется, об этом хорошо бы подсказывать пользователю, либо просто при сортировке по некоторой релевантности поднимать те, в которые пользователь потенциально еще может попасть и хорошо провести там время.

Это все хорошо, но полет мысли не заканчивается. Может оказаться так: в результате исследования пользователей выясняется, что расстояние для значительной группы любителей ресторанов с живой музыкой вообще не играет никакой роли! Например, они ездят в одни и те же избранные заведения, прислушиваются к рекомендациям друзей и вообще пользовательским отзывам и рейтингам ресторанов.

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

Это не отменяет, конечно, полностью наших предыдущих умопостроений, однако, заставляет переосмыслить, что же является главным в приложении для быстрого принятия решений. Например, им может оказаться контекст самого пользователя (личные предпочтения) и социальный контекст (друзья, другие пользователи) и только на третьем месте ближайшие в каком-либо другом смысле результаты.

В такой ситуации данные приложения расслаиваются по способам фильтрации и сортировки, но для каждого из них мы по-прежнему можем выносить основную информацию на первых хаб, предполагая, что информация в одной из выделенных порций информации окажется наиболее подходящей:



В такой ситуации мы как раз приходим к тому, что обсуждали в предыдущей статье: наверх в хаб выносится то, что является самым важным из нижележащих разделов, а в самом хабе сортировка происходит по приоритетности сценариев для пользователя – в данном случае на первое место выносится личная близость, на второе социальная, на третье географическая.

Конечно, это не мешает параллельно реализовать возможность переключения со списочного представления на представление в виде карты, с которого мы собственно говоря и начали.

Кстати, в каком-нибудь другом приложении, где исходя из важности сценариев, географическому списку будет отдан низкий приоритет, последний может вообще исчезнуть с хаба, переместившись полностью в поиск, где учет географии окажется наоборот имеющим весомое значение.

Действия

Возвращаемся к идее о том, что все вторичное должно быть убрано на задний план, а важное наоборот вынесено на поверхность. Если идея применима к контенту, как ее применить к управлению?

Первое, что приходит на ум, это, конечно, разнесение функциональности по уровням иерархии приложения. Основные действия нужно уметь делать быстро и сразу, а вторичные можно опустить на последующие экраны и состояния.

Например, в почтовом приложении (Mail) для Windows 8 на самом экране размещено не так много кнопок, но все они отвечают ключевым сценариям: чистый текст, отправить и удалить (или сохранить в черновиках):



Вторичные действия, имеющие смысл время от времени, вынесены на панели приложения, которые появляются по запросу пользователя:



Здесь мы легко найдем как управление шрифтом, так и, например, доступ к функциональности по прикреплению вложений. Это все важно, но вторично по отношению к основному сценарию: написанию письма и его отправке.

На первый уровень, или основное состояние экрана, выносится основная функциональность, вторичная – появляется по запросу пользователя.

Давайте рассмотрим еще один пример. Представьте, что на экране описания какого-то товара в магазине вы предоставляете пользователю возможность сделать несколько действий с ним. Например,

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

Про друзей все просто – это системный контракт, который вызывается системной кнопкой, остальное размещаем на экране (корзину) и панели приложения (вторичные действия):



С этим экраном — понятно, особой магии тут нет. Давайте на минуту поднимемся на уровень выше: скорее всего, это был экран со списком товаров.



Дальше, анализируя пользовательские сценарии, мы можем выяснить, что иногда пользователь готов совершить то или иное действие, не погружаясь на уровень ниже. К примеру, ему достаточно названия, описания товара и рейтинга – он готов сразу добавить в корзину или в закладки. Или еще один важный сценарий, который мне вспомнился – добавить к сравнению, особенно актуальный в общем списке.

Можем ли мы вытянуть действия, находящиеся на уровне ниже наверх? Технически, да: мы могли бы рядом с каждым товаром поставить три-четыре кнопочки:



Постарайтесь так не делать. Вообще, подобный иконостас очень быстро превращается в помойку с большим количеством визуального шума. И самое главное — все это убивает контент, которому как раз должен отдаваться приоритет, и основной (прямой) способ взаимодействия с ним.

Тем не менее идея вынести возможность делать быстрые действия на уровень выше остается разумной. Что же делать?

Во-первых, возможно, можно не далеко уходя от представленной выше идеи, ограничиться несколькими товарами, для которых возможны быстрые действия:



Так, кстати, сделали в приложении «ЛитРес» — кнопка «читать книгу» сразу переводит к режиму чтения без промежуточных страниц описания:



Во-вторых, что можно также совмещать с первым, специально для таких случаев можно использовать выделение объектов списка, к которому подвешивается контекстная панель приложения, предоставляющая быстрый доступ к действиям относительно выделенных элементов:



Здесь, конечно, важно тоже расставлять приоритеты и выносить на уровень выше только ключевые действия, например, в данном случае за бортом оставлено закрепление на экран «Пуск».

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

Наконец, давайте вкратце рассмотрим еще один интересный срез.

Сущность

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

Понятно, что при этом может сокращаться уровень детализации информации, да и тащить наверх все описание пускай и самого важного объекта, как правило, бессмысленно. Сокращая уровень детализации, вы, например, можете последовательно ограничиться заголовком и кратким описанием или основным параметрами на втором уровне и только заголовком на первом:



Во многих случаях такое решение оказывается подходящим под задачу и в целом весьма хорошим.

Однако в некоторых случаях, особенно когда речь идет о каких-то процессах, имеет смысл задумываться и о качественном переходе: поднимаясь вверх по иерархии, не просто сужать объем предоставляемой информации, а делать ее представление более компактным, информационно насыщенным. От сырых данных на нижнем уровне, переходить к извлечению сущностного содержания данных на верхних.

Здесь уже начинают работать как в целом анализ данных, так и инфографика как способ визуализации данных.

Например, представьте, что ваше приложение в какой-то цепочке экранов выводит данные о перевозке грузов:

• на самом нижнем экране вы выводите все параметры какой-то конкретной перевозки,
• на уровне выше вы говорите о каком-то направлении (например, перевозки по северо-западному региону), выводя также кратко информацию по происходящем в регионе перевозкам;
• на первом уровне вы выводите регионы, суммируя информацию с уровней ниже.

Чем выше уровень, тем важнее даже не столько обобщение информации, сколько извлечение из нее сути происходящих процессов. В примере выше, речь может идти не просто о сумме перевозок, но и о динамике или оповещениях, позволяющим принять решение: нужно ли что-то срочно делать, погружаться в детали и изучать более полное представление данных.

Если бы мы говорили не о перевозках, а например, о наблюдении за серверными стойками, на первом уровне имело бы смысл выводить, скажем, не столько информацию о том, сколько места осталось на всех жестких дисках, а непосредственно инсайт о том, что места мало и исходя из статистики наблюдений завтра все место закончится и ай-ай-ай – нужно срочно что-то делать.

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

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

Сегодня я хочу рассказать об еще одной идее, которая следует из этих предпосылок и общего понимания контекста использования современных устройств и приложений на них. Речь пойдет о том, что и когда мы предлагаем пользователю и как сделать его жизнь более удобной и предсказуемой. Видео-версия доступна в виде записи с конференции 404fest.

Ссылки

Если вы посмотрите на свои любимые веб-сайты, практический в каждом вы увидите общий элемент – некоторое меню навигации, или главное меню, разводящее пользователя по ключевым разделам сайта:

Эта штука кажется настолько привычной и простой, что в переходе к мобильной версии сайта или мобильному приложению для соответствующего сервиса часто сохраняется как есть. При открытии приложения пользователя встречает список имеющихся разделов:

Когда разработчики и дизайнеры увидели «плиточный» интерфейс Windows Phone и Windows 8, они быстро смекнули визуальную составляющую, однако, суть часто оставалась прежней:

Место ссылок/кнопок/меню заняли квадратные плитки с двуцветными силуэтными картинками и небольшими подписями, все также разводящие пользователя по имеющимся разделам приложения.

Все эти «ссылки» как тупой автоответчик говорят пользователю, что ему нужно сделать, чтобы добраться до информации, ради которой он собственно и пришел в приложение – и это печально! Пользователь не приходит в приложение нажимать на ссылки или кнопки, он приходит ради контента.

Любое меню похоже на оглавление книги, которое позволяет последовательно погрузиться к нужному разделу, проходя через дебри иерархии информационных сущностей:

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

Мобильный сценарий использования приложения предполагает, что пользователь время от времени возвращается к нему на короткие промежутки времени, чтобы, например, проверить статус, отследить изменение состояния или внести небольшое обновление, и изредка, когда у него есть время, желание или необходимость, погружается в детали, переходя к подробностям, дополнительным сведениями и в целом к более плотному взаимодействию с приложением.

По-умному это называется “progressive disclosure”, а по-простому это означает, что пользователю необходимо обеспечить как возможность быстро разобраться, что к чему, так и спокойно погружаться к деталям, переходя к исследованию контента. Важно и то, и другое.

Отсюда возникает вопрос: как добиться обеих задач одновременно? Если исходить из идей приоритизации целей пользователя и важности контента, ответ напрашивается сам собой.

Контент находится на самом последнем уровне? — Не вопрос! Давайте вытащим его наверх!

Конечно, невозможно вытащить все на самый верхний уровень — получится помойка, поэтому нужно отобрать только самое важное на каждом из экранов и протянуть это последовательно наверх.

В такой ситуации становится прозрачной и роль живых плиток (Live Tiles) — они становятся отображением самого важного в приложении, вытянутым за пределы приложения на стартовый экран. Живая плитка — это иконка с самым важным и актуальным контентом из приложения.

Как только вы проецируете эту идею на всю иерархию экранов, первый экран превращается в хаб, позволяющий быстро считать все самое важное, узнать все обновления, понять, нужно ли погружаться в детали или и так все в порядке.

Движение и распределение контента становится двунаправленным: вниз — по ходу семантической структуры, вверх — по важности и актуальности. Первое работает, когда я готов погрузиться в детали, второе — когда мне нужно быстро разобраться, что к чему.

В некоторых случаях это требует переосмысления логики приложения. Иногда это может удачно совпасть со стремлением внедрения дополнительной составляющей, как это произошло в случае игры «Сапер», в которой добавили социальной составляющей.

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

Однако сюда же, на первый экран (или хаб), вынесена и дополнительная социальная составляющая с ачивками, соревнованиями и т.п.:

Хаб становится проекцией всех ключевых сценариев, вынося на поверхность ключевую информацию из нижних уровней:

Он становится шире и объемнее, чем просто список ссылок на следующие уровни иерархии, предоставляя быстрый доступ к самому важному, свежему и актуальному и позволяя при необходимости погрузиться вниз к деталям или перейти вправо к дополнительным сценариям.

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

Несколько дополнительных сценариев, развивающих эту идею, мы рассмотрим в следующей статье.

На Channel 9 стали доступны записи буткампа по дизайну для Windows Phone. Лекции читает Jared T Potter, руководивший в течение трех лет интеграцией дизайна в команде Windows Phone, а сейчас главный дизайнер в SixThAveStudios.com: 

101

1. What is Design?
2. Windows Design Language
3. The Design Driven Product
4. Windows Phone 8 Demo
5. Windows Ecosystem & Cocktail Flow apps case study

201

1. The System
2. Composition
3. Controls & API's

13 декабря,
Digital October, Москва

Design Camp — это профессиональная конференция Microsoft, проводимая при поддержке Британской высшей школы дизайна и посвященная дизайну и проектированию современных приложений.

Регистрация: events.techdays.ru/descamp/2012-12/

Зачем мы ее проводим?

Вот простой ответ: мы просто посмотрели на то, что происходит вокруг, и решили, что пора провести конференцию для дизайнеров.

Тема дизайна и, в частности, дизайна приложений для нас не новая. На самом деле, уже больше года практически на всех наших конференциях и других мероприятиях, посвященных разработке приложений для Windows Phone и Windows 8 мы вставляем хотя бы одну сессию, посвященную дизайну. Качественный дизайн приложений для наших платформ — это, безусловно, ключевой фактор в успехе наших платформ. Как и все вы, мы хотим, чтобы приложения были лучше, а пользователи довольнее.

Сегодня мы видим, что пора пойти дальше и сделать что-то специальное, расширив вовлекаемую профессиональную аудиторию и тематику мероприятия. Организуя Design Camp, мы ориентируемся на дизайнеров, проектировщиков и юзабилистов, руководителей проектов и разработчиков, создающих современные приложения.

Что будет?

Мы и приглашенные эксперты (они, кстати, в большинстве) будем говорить не только о платформах Microsoft. Мы смотрим шире и видим, что сегодня важно не только изучать конкретные кейсы дизайна приложений и перенимать лучшие практики, но и видеть тренды, по-новому смотреть на процессы, происходящие в дизайн-индустрии, не забывая, конечно, об основах — тех идеях и трансформациях, которые стоят за новым дизайном Microsoft.

Специально для вас мы позвали экспертов из Mail.ru Group, Яндекса, Usabilitylab, UIDesign, Parcsis и ведущих преподавателей Британской высшей школы дизайна. Специальный гость — Евгений Гаврилов из команды Windows Phone Design (Microsoft), который расскажет о том, как картинки превращаются в жизнь и об опыте их команды по интеграции дизайна.

Регистрация: events.techdays.ru/descamp/2012-12/

И еще! Тренинг!

В выходные после конференции мы организуем Зимнюю школу по дизайну для Windows 8. Это двухдневное бесплатное мероприятие, проводимое при поддержке компании ITMozg.

Попадут не все, подать заявку на участие можно тут: msevents.microsoft.com/CUI/EventDetail.aspx?EventID=1032537874&Culture=ru-RU&community=0