ИКТ 03 Проектирование интерфейсов

Проектирование интерфейсов

Владимир Зимин

НАРЦИССИЗМ

• Проектировщик, аналитик, менеджер проектов, менеджер по продажам, тренер

• 3 года• ~ 40 проектов• Конференция в МИЭМ• UXMasterclass• Выступления на всяких

конференциях

ПЕРВЫМ ДЕЛОМ - САМОЛЁТЫОсновано на реальных событиях

ШЕРЕМЕТЬЕВО — НИЖНЕКАМСКверсия 1.0

Вылет 22:05 12 августа

Прибытие

23:45 12 августа

ШЕРЕМЕТЬЕВО — НИЖНЕКАМСКверсия 2.0

Вылет 23:59 12 августа

Прибытие

06:40 13 августа

КОРОЧЕ…

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

ФИНАНСОВЫЕ ПОТЕРИ

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

И КАК ЖЕ ЭТО ДЕЛАТЬ?

ГЛОССАРИЙ

Дизайн ≠ красивая картинка

Дизайн — творческий метод, процесс и результат художественно-технического проектирования <…>, ориентированного на достижение наиболее полного соответствия <…> возможностям и потребностям человека <…>.

Wikipedia

НУ ПОЧТИ…

Красивая картинка – это тоже важно, но дизайн решает более масштабные проблемы

ДЖОЗАЙЯ ВЕДЖВУД

ГЛОССАРИЙ

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

Международный стандарт ISO 9241-11

КОРОЧЕ

Юзабилити определяет эффективность продукта для пользователя в рамках его повседневных сценариев.

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

А в ГОСТе «Юзабилити» – это пригодность использования :)

ДА, У НАС ЕСТЬ ГОСТ

http://standard.gost.ru/wps/wcm/connect/d661e080413f5db8a4e9fe7ab9890bef/GOST_R_ISO_9241-210-2012.pdf?MOD=AJPERES

http://standard.gost.ru/wps/wcm/connect/d661e080413f5db8a4e9fe7ab9890bef/GOST_R_ISO_9241-210-2012.pdf?MOD=AJPERES

ГЛОССАРИЙ

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

В нашем случае – программы и пользователя.

ГЛОССАРИЙ

Интерфейс объединяет в себе все элементы и компоненты программы, которые способны оказывать влияние на взаимодействие пользователя с ПО.

ГЛОССАРИЙ

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

Eric Reiss

ГЛОССАРИЙ

И КАК ЖЕ ЭТО ДЕЛАТЬ?

ЗНАЙ СВОЁ МЕСТО

Бизнес

Проектировщик

Верстальщик

Программист

Художник

СОТРУДНИЧЕСТВО


Бизнес




Художник

Пользователи

ПРОЕКТИРОВЩИК = ПЕРЕВОДЧИК

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


Бизнес




Художник


Юзабилити-тесты


Бизнес




Художник

Маркетолог


НА ЧТО ВЛИЯЕМ

• Скорость работы• Количество человеческих ошибок• Скорость обучения• Удовлетворенность пользователя• Запоминаемость

Ben Shneiderman

ПРИЧЕМ

Некоторые характеристики интерфейса могут и обязательно будут конфликтовать друг с другом.

ВЫСОКАЯ СКОРОСТЬ ОБУЧЕНИЯ

ВЫСОКАЯ СКОРОСТЬ РАБОТЫ

КОРОЧЕ…

«Интуитивная понятность» не являетсямаксимально критичной характеристикойинтерфейса во всех без исключения случаях.

И вообще, забудьте это словосочетание.

ЗАЧЕМ ЭТО ВСЁ?

Качественные интерфейсы:• Приводят к успеху продукта• Снижают затраты на разработку• Удешевляют поддержку• Повышают

конкурентоспособность• Увеличивают лояльность клиентов• Повышают эффект автоматизации• Избавляют от критических

ситуаций

УСПЕХ ПРОДУКТА

УДЕШЕВЛЕНИЕ ПОДДЕРЖКИ

Количество обращений уменьшилось на 90%

ЛОЯЛЬНОСТЬ КЛИЕНТОВ

ЭФФЕКТИВНОСТЬ

Скорость работы увеличилась в 2,8 разаКоличество ошибок сократилось

НЕМНОГО ЦИФР

В целом по отраслям• Затраты на производство - 33-

50%• Затраты на обслуживание - 60-

90%• Увеличение продаж 40-80% (до

225%)• Рост аудитории 40-80%• Повышение эффективности 25-

65%• Повышение доверия ?

Aaron Marcus and Associates, Inc.

НЕМНОГО ЦИФР

Веб-проекты• Продажи/конверсия 100%• Траффик 150%• Продуктивность действий 161%• Использование ключевых

возможностей 202%

NNGroup, 42 проекта

ТЫ ВРОДЕ ПРО ПРОЕКТИРОВАНИЕ ХОТЕЛ РАССКАЗАТЬ, ЙОПТ

ЭТАП 1 – СБОР ДАННЫХ

ЗАЧЕМ

• Понимаем предметную область• Понимаем бизнес• Понимаем пользователей• Узнаем об ограничениях

• Учимся за счёт заказчика

КАК

• Интервью с экспертами• Изучение материалов• Интервью с пользователями• Полевые наблюдения• Анализ тенденций• Изучение статистики• Изучение обращений в службу

поддержки

• Юзабилити-тестирования

ЭТАП 2 – АНАЛИЗ ДАННЫХ

ПЕРСОНАЖИ

Это не:• Реальные люди• Среднестатистическое описание

целевой аудитории• Сегменты рынка• Бизнес-роли

КАКАЯ ВЫГОДА

• Четкое позиционирование• Удобный контейнер• Коммуникации• Планирование и приоритезация

функций

КАК ПРИДУМАТЬ ПЕРСОНАЖ?

ПЕРВИЧНЫЙ АНАЛИЗ

ВопросыКто наши пользователи? Сколько их? Что они делают с системой?

МетодикиАнализ рынка, интервью, наблюдения, ФГ

РезультатОтчет с общими характеристиками ЦА

ПОСТРОЕНИЕ ГИПОТЕЗЫ

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

МетодикиВыделение целевых групп

РезультатЧерновое описание целевых групп

ОПРЕДЕЛЕНИЕ ТРЕБОВАНИЙ

ВопросыЦели? Демографические характеристики? Сценарии? Контекст?

МетодикиВыделение поведенческих переменных (10-30)

РезультатСхемы соответствия ЦГ и требований (3-6)

ПЕРЕГРУППИРОВКА (УТОЧНЕНИЕ)

ВопросыКакие требования совпадают у разных групп? Какие – значительно различны у одной?

МетодикиПерегруппировка и оптимизация

РезультатПеречень заготовок персонажей

ФИКСАЦИЯ

ВопросыКаковы общие характеристики у каждой группы? Как совокупно описать ее представителей?

МетодикиОписание характеристик персонажей

РезультатОписание персонажей

ПРОВЕРКА

ВопросыКто знает таких (реальных) людей? Нужны ли косвенные персонажи? Есть ли лишние?

МетодикиУточняющие интервью и наблюдения, оптимизация

РезультатФинальный перечень персонажей

РАНЖИРОВАНИЕ

ВопросыКаков размер ЦГ, покрываемой персонажем? Эффект, приносимый им? Его влияние?

МетодикиСоздание шкалы ценности, присваивание веса

РезультатВесовые коэффициенты

ФИКСАЦИЯ ТРЕБОВАНИЙ

ВопросыЧто требуется пользователям? Насколько важно конкретному персонажу? Все равно? Мешает?

МетодикиУточнение требований, присваивание весов

РезультатТаблица требований

ВЫЯВЛЕНИЕ КЛЮЧЕВЫХ ПЕРСОНАЖЕЙ

ВопросыЧьи требования наиболее объемны? Чьи можно реализовать в рамках другого?

МетодикиФильтрация персонажей

РезультатКлючевые персонажи (1-3), другие группы

ОПИСАНИЕ СЦЕНАРИЕВ

ВопросыКакие задачи решает персонаж? Как? В каких условиях? Как часто?

МетодикиОптимизация и проектирование сценариев

РезультатПеречень сценариев с характеристиками

ПАРАМЕТРЫ ДЛЯ ВЫДЕЛЕНИЯ ГРУПП

• Роли• Соцдем• Активность• Цели/мотивы• Контекст• Опыт• Стереотипы поведения

ОПИСЫВАЕМ ПЕРСОНАЖ• Ключевая характеристика• Имя, фото, краткий соцдем• Крик души• Краткое словесное описание• Важность персонажа• Цели• Опыт и знания• Контекст использования• Представление о продукте и

способах работы• Сценарии

СЦЕНАРИИ• Цель• Критичность• Критерий успеха• Оптимизируемые параметры• Последовательность шагов• Контекст• Сложности и проблемы• Частота, продолжительность,

насыщенность,• ограничения по времени,

прерывания• Социальные связи

ТРЕБОВАНИЯ К ИНТЕРФЕЙСУ• Формулировка• Весовые коэффициенты для

каждого персонажа (выделяем критичные и отрицательные)

• Концептуальность требования• Идеи и соображения по

реализации

Ольга32 года, директор по работе с региональными агентствами, туризм

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

Сервис выбора кредитных карт Credit-card.ru, анализ конкурентов [март, 2013] 75

Ключевая характеристика: Берет кредит под конкретные цели. Старается разобраться в тонкостях выбора предложения.

Оформление кредитной карты – вынужденное решение: на завершение ремонта срочно потребовались дополнительные средства. Семья Ольги будет располагать нужными средствами, но несколько позже. Муж Ольги уже оформлял кредитную карту, поэтому решили оформить карту на Ольгу. Ориентируется на определенную сумму, но понимает, что расходы на завершение ремонта могут измениться. Чтобы избежать лишних трат, Ольга старается выбрать оптимальное решение, советуется с семьей, друзьями и коллегами, а также изучает профильные сайты, например, banki.ru. Ориентируется на процентную ставку и беспроцентный срок погашения. Также для нее важны стабильность банка, его рейтинг. Читает отзывы.


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


• Понять, на что требуется обратить внимание при выборе карты в ее конкретной ситуации

• Выбрать предложение по важным параметрам

• Быть уверенной в полноте и ясности информации

• Узнать рейтинг банка – банк должен быть надежный и стабильный

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

• Сформировать доверие к материалам и возможностям сервиса.

• Изучение информации “How to” («как выбрать лучшую для себя кредитную карту»)

• Подбор предложения и изучение карточки

• Изучение рейтинга банков, отзывов, экспертного мнения

• Обращение к эксперту за ответом на ее персональный вопрос

• Переход к оформлению онлайн-заявки с сайта сервиса

Ольге необходимо:

Наши цели:

Ключевые сценарии Ольги:


Сценарий 1: Изучение информации “How to” Цель: Понять, с чего начать и каким образом выбрать оптимальное предложение


Описание: Итак, Ольге требуется срочно выбрать оптимальное предложение. На сайтах банков информация предлагается в разном объеме. Для начала она вводит в поисковике запрос «как выбрать кредитную карту» и по первым же ссылкам переходит в данный сервис. Здесь она получает исчерпывающуюся информацию о том, какие параметры ей будут важны в первую очередь. Любопытства ради она читает также информацию о картах для других случаев – кобрендиновые, карты Gold и Platinum, и удостоверяется, что данные варианты ей не подходят. Посылает ссылку мужу, чтобы посоветоваться с ним, нет ли у него другого мнения относительно значимых параметров.

Успех: Ольга располагает всей необходимой, по ее мнению, информацией и готова воспользоваться инструментом подбора предложения

Частота: Разовый сценарий – по возникновению потребности в новом виде продукта (карт)

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

Продолжительность: 15-20 минут, важна глубина просмотра.

Наличие прерываний: Возможно

Оптимизируемые параметры: структура материалов – «от простого к сложному», логические переходы между статьями.


Сценарий 2: Подбор предложения и изучение карточки предложенияЦель: Выбрать оптимальное предложение по кредитным картам


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

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

Частота: Разовый сценарий – по возникновению потребности в новом виде продукта (карт)

Критичность: Высокая.

Продолжительность: 10-15 минут.

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

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

Список пользовательских требований


Требование Категория Ольга Анастасия Общий балл

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

переход к банку 2 2 4

быть уверенным в актуальности информации контент 2 2 4простой понятный стиль изложения материалов контент 2 2 4при первом посещении быстро перейти к инструкции как подобрать себе оптимальное решение контент 2 2 4изучить отзывы владельцев карт общение 1 2 3быть уверенным в полноте информации контент 2 1 3рассчитать размер выплат по кредитной карте поиск 2 1 3изучить экспертные мнения, аналитику, статьи, рейтинги контент 1 0 1задать вопрос эксперту общение 1 0 1

ЭТАП 3 – СЦЕНАРИИ

ЭТАП 4 – ИНФОРМАЦИОННАЯ АРХИТЕКТУРА

ГЛОССАРИЙ

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

Louis Rosenfeld

ЭТАП 5 – ПРОТОТИПИРОВАНИЕ

ЭТАП N – ЮТ

О ЧЁМ ЕЩЁ НЕ СКАЗАЛ

СПАСИБО!

Владимир Зимин

[email protected]

fb.com/darkspi

twitter.com/darkspi

vk.com/darkspi

darkspi.ru

ИКТ 03 Проектирование интерфейсов

Documents