- PVSM.RU - https://www.pvsm.ru -
Одна из сложностей, с которой, по моему опыту, сталкиваются практически все разработчики и дизайнеры, работая над приложениями для Windows 8 и Windows Phone, начинается прямо с порога – с проектирования того, как пользователь будет взаимодействовать с приложением (UX и UI).
Часто разработчик (автор приложения) приходит с некоторой готовой идей и старается напрямую перенести в Windows 8 привычную десктопную, мобильную или веб-функциональность. Обычно эта прямолинейная попытка «портирования» оборачивается стремлением сохранить все, что есть в оригинальном решении, включая схожие шаблоны решения интерфейсных задач и знакомые приемы разработки и написания кода.
По последнему пункту отмечу только один момент: хотя мы и говорим, что начать разрабатывать под Windows 8 достаточно просто (и это действительно так, если вы знаете JS, C#/VB или C++), это не означает, что разрабатывать нужно (и можно) точно так, как вы привыкли. Так, например, в мире Windows 8 большое внимание уделяется асинхронным сценариям, что накладывает свои ограничения и требования на то, как и какой вы пишите код.
Такой подход, к сожалению, не только не учитывает необходимость переосмысления уже имеющихся и привычных сценариев использования приложения, но и часто оставляет за бортом новые возможности операционной системы, открывающие новые сценарии или предлагающие другие (более универсальные) решения для привычных задач.
С этой же проблемой сталкиваются и новые оригинальные приложения, невольно тянущие за собой устоявшийся опыт дизайнеров и разработчиков. Поэтому давайте разбираться, как же сделать хорошо. И начнем мы с самого начала: планирования и проектирования приложения.
В качестве дополнительной литературы сразу могу порекомендовать две статьи, на которые в определенной степени опирается и моя:
В основе грамотного проектирования приложений для Windows 8 (подчеркну, что то же самое применимо и для Windows Phone, хотя сценарии использования, форм-фактор и интерфейсные решения будут отличаться) лежит жесткая приоритезация, которая должна пронизывать все принимаемые вами решения.
Приоритезация (или расставление приоритетов) касается практически каждого шага, начиная с определения целевой аудитории и заканчивая, к примеру планированием реализуемой функциональности и ее доступности пользователю.
В этой статье мы рассмотрим 5 ключевых этапов, на которых вам придется расставлять приоритеты:
Все начинается с пользователей и ими же заканчивается: вы делаете приложения для конкретных пользователей и конкретные пользователи будут или не будут пользоваться вашим приложением.
С точки зрения проектирования важно представлять себе (с разумной достоверностью), кто будет пользоваться вашим приложением. Ключевые вопросы, над которыми вам стоит подумать (и желательно зафиксировать ответ), звучат следующим образом:
(Я буду по ходу этого раздела иногда вставлять ссылки на рекламные ролики — и буду говорить, на что в них нужно обратить внимание.)
Подумайте о том, как ваше приложение может изменить жизнь пользователя: почему с ним ему станет лучше? Какую пользу вы ему принесете? Сэкономите время, займете время, решите проблемы, заставите задуматься, вовремя подскажите?
В ролике ниже от Nokia обратите внимание на общий посыл — как конкретное приложение переворачивает всю картину и делает возможным некоторое новое решение или новый поворот событий:
http://www.youtube.com/watch?v=9OqqSHw7V8Q [3]
Подумайте о том, как ваше приложение интегрируется в жизнь пользователя? Какими будут основные точки входа? Будет ли он им пользоваться время от времени, с утра или вечером, по 1 минуте или по 10-15 минут? По дороге, на работе, дома, в тренажерном зале, в аэропорту?
В следующем ролике заметьте, какими разнообразными могут быть условия и поводы даже в течение одно дня для того, чтобы воспользоваться любимым устройством. Какие условия и поводы необходимы для вашего приложения?
http://www.youtube.com/watch?v=2jsLcPFlM9M [4]
Подумайте о том, насколько сильно могут различаться ваши пользователи? Имеют ли значение для вашего приложения возраст, пол, социальное положение, наличие детей, уровень достатка, привычки и пристрастия? Насколько важно, учится пользователь или работает, сам готовит себе яичницу или ходит по кафе и ресторанам, ездит на собственной машине, велосипеде или общественным транспорте?
В еще одном ролике ниже (тоже от Nokia — там очень креативные ребята ;) обратите внимание на то, сколько разных, странных и интересных людей может быть вокруг вас!
http://www.youtube.com/watch?v=I1qTbs8K3go [5]
Как вы понимаете, разных пользователей и различных историй может быть довольно много, поэтому важно, имея, конечно, в виду всю совокупность, выделить для себя несколько основных моделей (персонажей), на которых вы сможете ориентироваться, прорабатывая свое приложение.
Опишите для своего приложения 2-3 ключевых персонажа:
Пример. Представьте себе приложение для организации совместного просмотра кино с друзьями. Один из персонажей мог бы выглядеть так:
![]()
Наличие деталей или какой-то уникальной специфики упрощает моделирование поведения такого персонажа при использовании вашего приложения. За особенности персонажей можно цепляться, придумывая истории вокруг работы с вашим приложением. В примере выше мне важно, что данный персонаж активно интересуется новыми приложениями, имеет предпочтения в определенных жанрах и социально замкнут, эгоистичен либо мало инициативен.
Вам нужно приоритезировать, поэтому сделайте 2-3 персонажа, которые покроют основную часть (ядро) вашей целевой аудитории. Чтобы вам было проще, выберите 3 ключевые характеристики, имеющие значение (например, техническая грамотность, наличие явных предпочтений, социальная активность) — и разнесите разных персонажей по этим характеристикам:
После этого добавьте несколько жизненных деталей, чтобы оживить персонажей.
Теперь, когда вы знаете, для кого вы делаете свое приложение, важно четко сформулировать, чем ваше приложение будет уникально. На рынке с сотнями тысяч приложений у вас всегда будут конкуренты, среди которых вам придется выделяться.
Также стоит помнить, что ваше приложение, будучи размещенным в магазин, обязательно будет попадать в ту или иную категорию (например, «развлечения» или «здоровье и фитнесс»).
Поэтому, чтобы правильно расставить приоритеты, важно четко сформулировать, в чем ваше приложение лучше других в своей категории — “best at statement”. “Best at statement” — это именно то, ради чего пользователи побегут к вам, принесут вам свою любовь и деньги и почему расскажут о нем всем своим друзьям.
Сформулируйте, запишите и повесьте в рамочку:
«Мое приложение — самое лучше в своей категории для ___для чего предназначено___»
или
«Мое приложение лучше других в своей категории ______что делает______»
Это должно быть 1) одно понятное предложение, 2) конкретное в своей формулировке и 3) реально отличающее вас от всех ваших конкурентов. Важно, чтобы ваше утверждение в полной мере отвечало действительности и вашим намерениям.
Например, сказать, что «мое приложение — самое лучшее в категории музыка и видео для просмотра фильмов» — это либо профанация, которая ничем вам не поможет, либо и в самом деле означает, что у вас, скажем, самая лучшая технология для доставки и просмотра фильмов. Это могут быть уникальные кодеки, технологии сжатия, адаптивный стримминг, качество картинки или какой-то уникальный опыт вовлечения пользователя в просмотр (некоторая расширенная реальность).
Или вот еще пример: утверждение «мое приложение — самый большой online-кинотеатр» может, конечно, означать, что у вас самая большая (по количеству) коллекция самого разного кино на фоне остальных конкурентов, но мне как пользователю никак не гарантирует, что у вас доступно самое свежее и самое интересное кино, или, если я любитель аниме, что я найду там свои любимые мультфильмы, даже если готов заплатить за просмотр.
В последнем случае, кстати, большие шансы на успех имело бы как раз более фокусное приложение — со всеми вытекающими: от целевой аудитории до тонкостей дизайна.
Наличие дифференцирующего фокуса крайне важно. Ваше приложение может дополнительно уметь делать еще много-много всего, но в нем должно быть что-то одно самое важное, говорящее мне, почему и зачем я буду им пользоваться. Имея такой фокус и ключевых персонажей, вы сможете верифицировать все остальные принимаемые решения: в частиности, проверять необходимость и устанавливать приоритетность различных сценариев и внедряемой функциональности.
Пример. Возвращаясь к озвученной выше идее, мое приложение могло бы иметь следующий фокус: «самое лучше приложение в категории “развлечения” для планирования и организации совместного с друзьями просмотра кино».
Это приложение должно помочь мне выбрать интересный для просмотра фильм, согласовать его просмотр с друзьям в удобное время и удобном месте и, собственно, организовать просмотр на месте (купить билеты в кино, либо сделать трансляцию дома).
Best == focus. Лучшее приложение должно иметь явный фокус, прозрачный для пользователей, очевидный и легко запоминающийся.
Следующий важный пункт заключается в том, чтобы выделить из возможного списка всего того, для чего ваше приложение нужно и что пользователь с ним потенциально будет делать, самое главное, на чем можно будет сделать основной акцент.
Конечно, за словом «сценарий», особенно с дополнительными атрибутами (вроде «пользовательский сценарий») могут скрываться разные вещи с различной степенью детализации, однако, в рамках данной статьи мы ограничимся простым пониманием.
Ответьте на вопрос: зачем пользователь будет использовать ваше приложение? Смежные и похожие вопросы:
На данном этапе важно не думать про интерфейсные решения и не зацикливаться на конкретных деталях реализации. Вполне возможно, что у вас уже есть в наличии продуманная идея и вы выпишите ключевые сценарии сходу.
Если вы работаете в команде (ну даже если и один/одна), вы можете устроить мозговой штурм, записывая все пришедшие в голову идеи (часть из них вам наверняка пригодится позже, поэтому сильно себя не ограничивайте и смело расширяйте список вопросов схожими).
Пример. Для моего виртуального приложения для просмотра фильмов у меня получились следующие ответы:
![]()
Как видите, мой список представляет собой большую кашу разных идей, сформулированных также в разной форме. Теперь важно выделить из них самое главное, постепенно отфильтровывая неважное или вторичное.
Отделите функциональность. Начнем с функциональности — нужно исключить из списка конкретные действия, которые я могу делать внутри приложения, и формулировки возможностей приложения. Хотя это разделение может быть весьма условным, скорее всего, исключаемые элементы подразумевают под собой конкретные интерфейсные решения и небольшие (в том числе атомарные) действия со стороны пользователя:
Отделите вторичные/сторонние сценарии. Теперь нужно выбрать ключевые сценарии, отбросив вторичные. Как я писал выше, ключом для верификации является позиционирование вашего приложения — его “best at statement”.
В моем случае это выглядело бы так:
- Например, может показаться, что прямо в этом же приложении было бы здорово заодно узнать, где можно потусоваться с друзьями на выходных (сходить на концерт, матч, вечеринку или в театр), однако, фокус нашего приложения на кино, поэтому этот сценарий является посторонним.
- Поделиться впечатлениями о фильме, вроде, выглядит неплохой идеей, однако, это действие, выходящее за временные рамки того, что мы описали в нашем позиционировании (спланировать — организовать — посмотреть), поэтому это также сторонний сценарий.
- С точки зрения организации кажется, что выбрать и купить еду/напитки прямо в приложении, является подходящим сценарием, однако, он очевидно вторичен, так как может быть решен более фокусным приложением.
- Наконец, с точки зрения общих целей компании друзей, найти интересный фильм кажется более заманчивым, чем найти что-то конкретное — первое обычно шире.
![]()
Сформулируйте 3-4 ключевых сценария использования вашего приложения. Мы близки к цели: откинув все лишнее, мы пришли к трем кандидатам на ключевые сценарии, которые рассказывают нам, зачем пользователь будет использовать наше приложение.
Повторюсь, вполне возможно, вы сможете сформулировать их сразу. Главное — убедитесь, что они соответствуют позиционированию вашего приложения и согласуются с вашими персонажами.
Пример. В моей истории у меня получились следующие сценарии:
- найти интересный фильм для просмотра,
- договориться о совместном просмотре с друзьями,
- получить массу впечатлений от просмотра.
Для моего виртуального приложения важно, чтобы пользователи могли найти что-то отвечающее их интересам, произвести некоторое коллективное действие и, наконец, приятно посмотреть кино с друзьям (здесь я виртуально предполагаю, что устройство может помочь сделать этот просмотр еще более приятным).
К слову, в данном контексте «сценарии» — это скорее названия сценариев, которые на практике могут быть более или менее детально расписаны или визуализированы вплоть до конкретики пинг-понга действий между человеком и машиной. Мы к этому перейдем несколько позже, хотя и в менее формализованном виде, чем обычно предполагается идеальной теорией.
Проверьте свои сценарии на персонажах. Напомню, что на первом шаге мы придумали 2-3 типовых персонажа, которые будут (как мы надеемся) пользоваться нашим приложением. Как вы могли заметить, выделенные сценарии заведомо покрывают разные временные отрезки (этапы) работы с приложением. (Кстати, если суть вашего приложения также предполагает разные этапы, это обязательно должно найти отражение в сценариях.)
Чтобы прогнать персонажей через сценарии, попробуйте написать или рассказать небольшие истории про своих персонажей и работу с приложением. Мне в этом аспекте нравится сочетание с комиксами — небольшими визуальными (рисованными) историями.
Пример. Для моего приложения история одного из персонажей выглядит следующим образом:
Дима Т., гуляя по улице, увидел афишу нового крутого фильма «Рембо 7». «Как было бы круто в эти выходные собраться с друзьями у меня и посмотреть новую киношку,» — подумал Дима. Сфотографировав плакат (или набрав название фильма), Дима быстро нашел информацию о фильме в Movie Meeting, выразил свое желание его посмотреть и предложил своим друзьям собраться в субботу у него и посмотреть всем вместе.
Димины друзья радостно отреагировали на новый анонс и предложение собраться у Димы и в ходе непродолжительного обсуждения договорились встретиться в 8 вечера. Несколько приглашенных отвалилось, так как не разделяли Диминой страсти к боевикам и кровавым сценам.
В пятницу Дима Т. проверил список собирающихся к нему в гости друзей и предложил всем заказать заодно пиццу с ананасами и Тархун.
В субботу Дима вместе с друзьями подключили планшет с установленным клиентом Movie Meeting к телевизору — и в назначенное время они все вместе начали просмотр кино. В отдельных сценах на планшете можно было посмотреть интересные детали (карты с местами боевых действий, характеристики оружия), планшет и телефоны, соединенные в сеть также создавали дополнительный эффект присутствия, вибрируя, распространяя звуки стрельбы и подсвечивая экранами в такт основной картинке.
Хотя я рисовал картинку для телефона, думаю, вы легко представите на его месте и планшет или ноутбук. Это, как говорится, уже детали.
Если все сценарии легко переводятся в пользовательские истории — это хороший знак. В любом случае, скажу это еще раз, важно, чтобы ваши сценарии помогали поддержать ваше позиционирование (“best at statement”). Не бойтесь отбрасывать лишнее.
Если что-то не помогает вашему приложению стать лучшим, оно мешает этому.
Кстати, в некотором смысле, взгляд на приложение через сценарии использования и истории подразумевает и сдвиг фокуса с предоставления функциональности и контента к предоставлению опыта взаимодействия (content/features provider ⇒ scenario provider).
В следующей части мы рассмотрим задачу проектирования навигации.
Автор: kichik
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/windows/13043
Ссылки в тексте:
[1] Планирование приложений в стиле Metro: http://msdn.microsoft.com/ru-ru/library/windows/apps/hh465427.aspx
[2] Cоздание выделяющихся приложений в стиле Metro: http://blogs.msdn.com/b/windowsappdev_ru/archive/2012/07/18/cr-233-ation-d-applications-de-style-metro-qui-sortent-du-lot.aspx
[3] http://www.youtube.com/watch?v=9OqqSHw7V8Q: http://www.youtube.com/watch?v=9OqqSHw7V8Q
[4] http://www.youtube.com/watch?v=2jsLcPFlM9M: http://www.youtube.com/watch?v=2jsLcPFlM9M
[5] http://www.youtube.com/watch?v=I1qTbs8K3go: http://www.youtube.com/watch?v=I1qTbs8K3go
Нажмите здесь для печати.