Основы дизайна с учетом опыта взаимодействия

Презентацию к данной лекции можно скачать здесь.

Цель лекции

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

Что такое опыт взаимодействия (UX)

Опыт взаимодействия - это диалог между продуктом и пользователем, эмоции, восприятие и реакции пользователя. Этот термин появился относительно недавно(середина 90-х годов ХХ века) и все еще эволюционирует. Дизайнерам важно помнить, что приложение создается для пользователя-человека, и учитывать это на всех этапах работы. Пройдя данную лекцию, вы поймете, какие методы UX используют дизайнеры при создании приложений, чтобы сделать интерфейс максимально удобным для человека. В частности, это следующие методы::

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

создание историй для разработки сценариев;

создание набросков приложения и вариантов взаимодействия с ним;

создание чернового макета;

тестирование

Шаг первый: Исследования

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

Обзор слабых мест приложения, обнаруженных пользователями

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

Онлайновый мозговой штурм с потенциальными пользователями

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

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

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

Шаг второй: Сочинение историй

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

Построение таблицы

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

Люди(list 10)	Места(list 10)	Деятельность(list 10)	Мотивы(list 10)
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

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

Люди	Места	Деятельность	Мотивы
Тренер	На скамейке	Смотрит игру	Хочет всегда быть в курсе, как играют соперники
Студент	В классе	Слушает лекцию	Скучает, пытается не заснуть
Продавец	В зале магазина	Ждет покупателей	Проверяет результаты матчей, чтобы вечером об этом поговорить с друзьями
Официант	В ресторане	Во время перерыва	Следит за результатами
Спортсмен(не бейсболист)	Дома	Пытается устроиться на работу	Хочет, чтобы работодатель понял, что он интересуется разными видами спорта

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

Создание истории

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

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

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

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

Шаг третий: Формулировка высказывания

Как только вы придумаете истории, вам необходимо сформулировать высказывание о ключевых преимуществах приложения, состоящее из одного предложения. В новом дизайне Microsoft это предложение называется "best-at" ("лучшее в чем-либо"). То есть, фраза должна соответствовать придуманной истории, объяснять, в чём ваше приложение лучшее и чем оно отличается от похожих приложений на рынке.

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

Шаг четвертый: Согласование функций приложения с высказыванием и сценариями

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

Выбор функциональных особенностей приложения

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

Результаты мозгового штурма по выбору функциональности:

Нажатием на игрока открывать его статистику

Поиск предстоящих матчей

Счет текущих игр

Результаты прошедших игр

Чат с друзьями, для обсуждения результатов

Возможность создавать список избранного

Покупка билетов на матчи

Возможность комментировать команды

Поиск и сортировка бейсбольных команд

Шаг пятый: Черновой набросок информационной архитектуры приложения

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

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

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

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

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

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

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

Шаг шестой: Создание набросков экранов приложения

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

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

Шаг седьмой: Создание макета дизайна

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

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

Бумажные макеты

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

Интерактивные макеты

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

Также программа предоставляет схему экранов вашего приложения и разнообразные отчеты. Скачать ее можно по ссылке: http://expression.microsoft.com - вместе с приложением ExpressionBlend.

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

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

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

Итоги

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

Самостоятельная работа

Изучите по крайней мере 2 приложения для Windows на предмет того, как легко и понятно вы перемещаетесь по ним, поставьте оценки по шкале от 1 до 10. Откройте обозреватель и таким же образом изучите 2 сайта, также поставьте оценки.

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

Вопросы

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

Почему важно сформулировать высказывание о ключевых преимуществах приложения?

Что такое информационная архитектура приложения?

Ответы

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

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

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