Принципы дизайна приложений для Windows 8. Делайте быстрым и подвижным

Продолжая серию статей про принципы дизайна для Windows 8, сегодня мы поговорим о важности скорости и отзывчивости.

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

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

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

Отзывчивость

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

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

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

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

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

Движение

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

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

Для того, чтобы однотипные задачи решались схожим образом и в разных приложениях для них применялись одинаковые анимации, в Windows 8 для разработчиков есть библиотека анимации (Animation Library) – набор методов внутри WinJS.UI.Animation для приложений на HTML/JS и набор классов в пространстве Windows.UI.Xaml.Media.Animation для приложений на XAML/C#.

Жизнь

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

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

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

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

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

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

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

Ключевой ресурс по дизайну для Windows — design.windows.com