В серии статей про принципы дизайна для Windows 8 мы рассмотрели ключевые идеи и подходы, лежащие в основе всей платформы и задающие язык дизайна для Windows. Чуть ранее, обсуждая процесс проектирования приложения, мы рассматривали в общем-то эти же принципы, но уже в разрезе правильной расстановки приоритетов.
![](https://habrastorage.org/r/w1560/getpro/habr/post_images/697/ae3/c57/697ae3c579a64d25dd60533fc0487582.png)
Сегодня я хочу рассказать об еще одной идее, которая следует из этих предпосылок и общего понимания контекста использования современных устройств и приложений на них. Речь пойдет о том, что и когда мы предлагаем пользователю и как сделать его жизнь более удобной и предсказуемой. Видео-версия доступна в виде записи с конференции 404fest.
Если вы посмотрите на свои любимые веб-сайты, практический в каждом вы увидите общий элемент – некоторое меню навигации, или главное меню, разводящее пользователя по ключевым разделам сайта:
![](https://habrastorage.org/r/w1560/getpro/habr/post_images/fb1/325/efd/fb1325efda562e758477ef3e77a3544a.png)
Эта штука кажется настолько привычной и простой, что в переходе к мобильной версии сайта или мобильному приложению для соответствующего сервиса часто сохраняется как есть. При открытии приложения пользователя встречает список имеющихся разделов:
![](https://habrastorage.org/r/w1560/getpro/habr/post_images/9af/35b/94e/9af35b94e85623436e8f878a6eeafcba.png)
Когда разработчики и дизайнеры увидели «плиточный» интерфейс Windows Phone и Windows 8, они быстро смекнули визуальную составляющую, однако, суть часто оставалась прежней:
![](https://habrastorage.org/r/w1560/getpro/habr/post_images/b04/4bd/16a/b044bd16a180f4847aa0acb052fc5a32.png)
Место ссылок/кнопок/меню заняли квадратные плитки с двуцветными силуэтными картинками и небольшими подписями, все также разводящие пользователя по имеющимся разделам приложения.
![](https://habrastorage.org/r/w1560/getpro/habr/post_images/82b/8fc/438/82b8fc4383cdcadf97d4032b37c465c2.png)
Все эти «ссылки» как тупой автоответчик говорят пользователю, что ему нужно сделать, чтобы добраться до информации, ради которой он собственно и пришел в приложение – и это печально! Пользователь не приходит в приложение нажимать на ссылки или кнопки, он приходит ради контента.
Любое меню похоже на оглавление книги, которое позволяет последовательно погрузиться к нужному разделу, проходя через дебри иерархии информационных сущностей:
![](https://habrastorage.org/r/w1560/getpro/habr/post_images/53a/42d/e89/53a42de8949ab350f22ccf11acd9ee69.png)
Проблема заключается в том, что то, ради чего приходит пользователь, находится слишком глубоко (вы можете легко перевести это в количество лишних кликов или нажатий). И особенно чреватой (с негативными последствиями) эта ситуация становится в современном мобильном и динамичном окружении, когда у пользователя просто нет времени заниматься такой ерундой, как нажимать на ссылки.
![](https://habrastorage.org/r/w1560/getpro/habr/post_images/d15/e80/857/d15e80857dbf471124c13389fd9d6093.png)
Мобильный сценарий использования приложения предполагает, что пользователь время от времени возвращается к нему на короткие промежутки времени, чтобы, например, проверить статус, отследить изменение состояния или внести небольшое обновление, и изредка, когда у него есть время, желание или необходимость, погружается в детали, переходя к подробностям, дополнительным сведениями и в целом к более плотному взаимодействию с приложением.
По-умному это называется “progressive disclosure”, а по-простому это означает, что пользователю необходимо обеспечить как возможность быстро разобраться, что к чему, так и спокойно погружаться к деталям, переходя к исследованию контента. Важно и то, и другое.
Отсюда возникает вопрос: как добиться обеих задач одновременно? Если исходить из идей приоритизации целей пользователя и важности контента, ответ напрашивается сам собой.
Контент находится на самом последнем уровне? — Не вопрос! Давайте вытащим его наверх!
Конечно, невозможно вытащить все на самый верхний уровень — получится помойка, поэтому нужно отобрать только самое важное на каждом из экранов и протянуть это последовательно наверх.
![](https://habrastorage.org/r/w1560/getpro/habr/post_images/569/d50/6cf/569d506cf58c6da87c9d9bc13c615b23.png)
В такой ситуации становится прозрачной и роль живых плиток (Live Tiles) — они становятся отображением самого важного в приложении, вытянутым за пределы приложения на стартовый экран. Живая плитка — это иконка с самым важным и актуальным контентом из приложения.
![](https://habrastorage.org/r/w1560/getpro/habr/post_images/3c9/5ce/53c/3c95ce53c4f77b585a9eef21ef0910e5.png)
Как только вы проецируете эту идею на всю иерархию экранов, первый экран превращается в хаб, позволяющий быстро считать все самое важное, узнать все обновления, понять, нужно ли погружаться в детали или и так все в порядке.
Движение и распределение контента становится двунаправленным: вниз — по ходу семантической структуры, вверх — по важности и актуальности. Первое работает, когда я готов погрузиться в детали, второе — когда мне нужно быстро разобраться, что к чему.
В некоторых случаях это требует переосмысления логики приложения. Иногда это может удачно совпасть со стремлением внедрения дополнительной составляющей, как это произошло в случае игры «Сапер», в которой добавили социальной составляющей.
На первое место в приложении вынесен быстрый доступ к разным режимам игры, что является отображением основного сценария использования приложения:
![](https://habrastorage.org/r/w1560/getpro/habr/post_images/8fa/a88/2bf/8faa882bf272701334ff17cac3e8b7b5.png)
Однако сюда же, на первый экран (или хаб), вынесена и дополнительная социальная составляющая с ачивками, соревнованиями и т.п.:
![](https://habrastorage.org/r/w1560/getpro/habr/post_images/09a/794/521/09a794521e9a4e72854e2b71d4eecf9f.png)
Хаб становится проекцией всех ключевых сценариев, вынося на поверхность ключевую информацию из нижних уровней:
![](https://habrastorage.org/r/w1560/getpro/habr/post_images/006/f72/43a/006f7243a8a1e10dbd076b857fc2cea5.png)
Он становится шире и объемнее, чем просто список ссылок на следующие уровни иерархии, предоставляя быстрый доступ к самому важному, свежему и актуальному и позволяя при необходимости погрузиться вниз к деталям или перейти вправо к дополнительным сценариям.
Вместо того, чтобы говорить пользователю «смотри, вот что у нас есть», предлагая ему последовательно переходить к нижним уровням детализации контента, мы переходим к идее «смотри, вот что происходит», вынося на первый план быстрый доступ (возможно, и вовсе без необходимости погружения) к наиболее приоритетной информации с соответствующим уровнем представления и информационной насыщенности.
Несколько дополнительных сценариев, развивающих эту идею, мы рассмотрим в следующей статье.
![](https://habrastorage.org/getpro/habr/post_images/697/ae3/c57/697ae3c579a64d25dd60533fc0487582.png)
Сегодня я хочу рассказать об еще одной идее, которая следует из этих предпосылок и общего понимания контекста использования современных устройств и приложений на них. Речь пойдет о том, что и когда мы предлагаем пользователю и как сделать его жизнь более удобной и предсказуемой. Видео-версия доступна в виде записи с конференции 404fest.
Ссылки
Если вы посмотрите на свои любимые веб-сайты, практический в каждом вы увидите общий элемент – некоторое меню навигации, или главное меню, разводящее пользователя по ключевым разделам сайта:
![](https://habrastorage.org/getpro/habr/post_images/fb1/325/efd/fb1325efda562e758477ef3e77a3544a.png)
Эта штука кажется настолько привычной и простой, что в переходе к мобильной версии сайта или мобильному приложению для соответствующего сервиса часто сохраняется как есть. При открытии приложения пользователя встречает список имеющихся разделов:
![](https://habrastorage.org/getpro/habr/post_images/9af/35b/94e/9af35b94e85623436e8f878a6eeafcba.png)
Когда разработчики и дизайнеры увидели «плиточный» интерфейс Windows Phone и Windows 8, они быстро смекнули визуальную составляющую, однако, суть часто оставалась прежней:
![](https://habrastorage.org/getpro/habr/post_images/b04/4bd/16a/b044bd16a180f4847aa0acb052fc5a32.png)
Место ссылок/кнопок/меню заняли квадратные плитки с двуцветными силуэтными картинками и небольшими подписями, все также разводящие пользователя по имеющимся разделам приложения.
![](https://habrastorage.org/getpro/habr/post_images/82b/8fc/438/82b8fc4383cdcadf97d4032b37c465c2.png)
Все эти «ссылки» как тупой автоответчик говорят пользователю, что ему нужно сделать, чтобы добраться до информации, ради которой он собственно и пришел в приложение – и это печально! Пользователь не приходит в приложение нажимать на ссылки или кнопки, он приходит ради контента.
Любое меню похоже на оглавление книги, которое позволяет последовательно погрузиться к нужному разделу, проходя через дебри иерархии информационных сущностей:
![](https://habrastorage.org/getpro/habr/post_images/53a/42d/e89/53a42de8949ab350f22ccf11acd9ee69.png)
Проблема заключается в том, что то, ради чего приходит пользователь, находится слишком глубоко (вы можете легко перевести это в количество лишних кликов или нажатий). И особенно чреватой (с негативными последствиями) эта ситуация становится в современном мобильном и динамичном окружении, когда у пользователя просто нет времени заниматься такой ерундой, как нажимать на ссылки.
![](https://habrastorage.org/getpro/habr/post_images/d15/e80/857/d15e80857dbf471124c13389fd9d6093.png)
Мобильный сценарий использования приложения предполагает, что пользователь время от времени возвращается к нему на короткие промежутки времени, чтобы, например, проверить статус, отследить изменение состояния или внести небольшое обновление, и изредка, когда у него есть время, желание или необходимость, погружается в детали, переходя к подробностям, дополнительным сведениями и в целом к более плотному взаимодействию с приложением.
По-умному это называется “progressive disclosure”, а по-простому это означает, что пользователю необходимо обеспечить как возможность быстро разобраться, что к чему, так и спокойно погружаться к деталям, переходя к исследованию контента. Важно и то, и другое.
Отсюда возникает вопрос: как добиться обеих задач одновременно? Если исходить из идей приоритизации целей пользователя и важности контента, ответ напрашивается сам собой.
Контент находится на самом последнем уровне? — Не вопрос! Давайте вытащим его наверх!
Конечно, невозможно вытащить все на самый верхний уровень — получится помойка, поэтому нужно отобрать только самое важное на каждом из экранов и протянуть это последовательно наверх.
![](https://habrastorage.org/getpro/habr/post_images/569/d50/6cf/569d506cf58c6da87c9d9bc13c615b23.png)
В такой ситуации становится прозрачной и роль живых плиток (Live Tiles) — они становятся отображением самого важного в приложении, вытянутым за пределы приложения на стартовый экран. Живая плитка — это иконка с самым важным и актуальным контентом из приложения.
![](https://habrastorage.org/getpro/habr/post_images/3c9/5ce/53c/3c95ce53c4f77b585a9eef21ef0910e5.png)
Как только вы проецируете эту идею на всю иерархию экранов, первый экран превращается в хаб, позволяющий быстро считать все самое важное, узнать все обновления, понять, нужно ли погружаться в детали или и так все в порядке.
Движение и распределение контента становится двунаправленным: вниз — по ходу семантической структуры, вверх — по важности и актуальности. Первое работает, когда я готов погрузиться в детали, второе — когда мне нужно быстро разобраться, что к чему.
В некоторых случаях это требует переосмысления логики приложения. Иногда это может удачно совпасть со стремлением внедрения дополнительной составляющей, как это произошло в случае игры «Сапер», в которой добавили социальной составляющей.
На первое место в приложении вынесен быстрый доступ к разным режимам игры, что является отображением основного сценария использования приложения:
![](https://habrastorage.org/getpro/habr/post_images/8fa/a88/2bf/8faa882bf272701334ff17cac3e8b7b5.png)
Однако сюда же, на первый экран (или хаб), вынесена и дополнительная социальная составляющая с ачивками, соревнованиями и т.п.:
![](https://habrastorage.org/getpro/habr/post_images/09a/794/521/09a794521e9a4e72854e2b71d4eecf9f.png)
Хаб становится проекцией всех ключевых сценариев, вынося на поверхность ключевую информацию из нижних уровней:
![](https://habrastorage.org/getpro/habr/post_images/006/f72/43a/006f7243a8a1e10dbd076b857fc2cea5.png)
Он становится шире и объемнее, чем просто список ссылок на следующие уровни иерархии, предоставляя быстрый доступ к самому важному, свежему и актуальному и позволяя при необходимости погрузиться вниз к деталям или перейти вправо к дополнительным сценариям.
Вместо того, чтобы говорить пользователю «смотри, вот что у нас есть», предлагая ему последовательно переходить к нижним уровням детализации контента, мы переходим к идее «смотри, вот что происходит», вынося на первый план быстрый доступ (возможно, и вовсе без необходимости погружения) к наиболее приоритетной информации с соответствующим уровнем представления и информационной насыщенности.
Несколько дополнительных сценариев, развивающих эту идею, мы рассмотрим в следующей статье.