Юзабилити,Юзер Экспириенс и

потребности Клиента

Q: - Какие потребности у Клиента?

A: - Достижение бизнес-целей.

Q: - Как реализовать потребности Клиента?

A: - Предоставить Клиенту удобный инструмент достижения поставленной цели(учитывая контекст использования)

Q: - Что такое Usability (Юзабилити)?

A: - Международный стандарт ISO 9241-11 определяет понятие юзабилити как:«степень, с которой продукт может быть использован определёнными пользователями при определённом контексте использования для достижения определённых целей с должной эффективностью, продуктивностью и удовлетворённостью»

A: - Можно упростить формулировку:это степень удобства использования продукта,зависящая от трёх факторов:- кто? (кто использует этот продукт)- с какой целью? (какова цель использования)- в каком контексте? (когда,где, при каких условиях используется продукт?)

Q: - Что объединяет эти изображения и почему они разные?

A: - Их объединяет цель использования и роль.

Q: - В какой роли находится пользователь?A: - В роли водителя.

Q: - Какая цель использования?A: - С их помощью он управляет движением транспортного средства.

Q: - Тогда почему они разные, если роль, а также цели одинаковые?

Контекст

Q: - Ответ на вопрос: контекст использования.

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

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

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

Q: - Может ли первый руль быть удобным для водителя спортивного автомобиля или велосипедиста?

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

Тоже самое для велосипедиста – с автомобильным рулём на велосипеде вряд ли можно ехать, а если и можно, то наверное не долго и не далеко.

Удобство зависит от контекста использования

Рассмотрим важные аспекты проектирования

на примере сайта ПриватБанка

www.privatbank.ua

У нас есть три пользователя которые собираются зайти на сайт ПриватБанка используя следующие устройства:

             1. Nokia 6300             2. Смартфон – iPhone3G                     3. Ноутбук

Ответим на несколько вопросов:

Q: - Какая роль объединяет пользователей?A: - Клиент банка.

Q: - С какой целью они заходят на сайт?A: - Узнать где находится ближайший банкомат.

Q: - Когда? Какой контекст использования?A:  - В первом случае (Nokia 6300) Клиентом является студент, он сидит на последней лекции, и хочет узнать расположение ближайших банкоматов чтобы снять стипендию, используя для этого мобильный телефон

Во втором случае (iPhone 3G) Клиент находится в центре чужого города, ему срочно требуется снять деньги с карты, он заходит на сайт со своего iPhone.

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

A: - Начнём с владельца стандартного телефона Nokia 6300. 

Первый шаг – ввести адрес сайта ПриватБанка в браузере.У владельца мобильного телефона 6300 нет возможности вводить прямой адрес сайта. На стандартных мобильных телефонах возможен только wap, а не www доступ.WAP доступ не предполагает быстрой скорости соединения, он не поддерживат скрипты и стандартную HTML вёрстку.  WAP сайты используются как упрощённый и быстрый способ доступа к основным функциям сервиса, без упора на графику.

Чтобы Клиент смог зайти на WAP сайт ПриватБанка, ему как минимум надо знать, что WAP версия сайтасуществует. Мог бы он узнать об этом в процессе изучения сайта ПриватБанка? На текущий момент сайт не предоставляет информации о наличии WAP версии. Одним из таких решений может быть добавлениессылки "WAP cайт" в правый верхний угол сайта. 

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

Если пользователь не знает о наличии функциональности - значит её не существует.

A: - У нас есть ещё два Клиента – владелец ноутбука и владелец iPhone3G.

Сайт ПриватБанка загружен и они находятся на главной странице.

Q: - Чем отличается монитор ноутбука от монитора iPhone? A: - Физическими размерами. 

A: - Здесь возникает следующая сложность – сайт ПриватБанка имеет одинаковую ширину для любого устройства. 

A: - На ноутбуке сайт занимает всё пространство монитора, а на iPhone нам потребуется водить несколько раз пальцем по экрану и передвигать изображение с целью найти нужную ссылку.

Сайт ПриватБанка имеет один и тот же дизайн как для стандартной версии, так и для смарт фонов.

A: - Следующий фактор – контент сайта. Он одинаков, как для владельца ноутбука так и для владельца iPhone. 

Но, как мы уже обсудили ранее – контекст использования cервиса для этих Клиентов разный. 

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

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

A: - Пример сайта BBC на экране ноутбука и версия сайта адаптированная для мобильных утройств.

Понимая контекст использования продукта, 

мы можем правильно определить форму 

представления информации.

A: - Итак, Клиент№3 изучает главную страницу сайта.

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

- Посмотрите на эти изображения.

A: - А теперь на эти:

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

В своём опыте вы уже сталкивались с подобными изображениями, и вам не надо задумываться над тем, что вы видите. Все элементы вам очевидны, вы видите текстовое поле, кнопку, ссылку.

Вы уже привыкли к определённым паттернам и шаблонам: текстовое поле ввода имеет прямоугольную форму, кнопка объёмная, и сама по себе подсказывает, что на ней можно нажать, а ссылка подчёркнутая – чтобы вы не спутали её с обычным текстом.

Наш опыт формирует ожидания от взаимодействия с другими продуктами

A: - Когда мы заходим на сайт, или в программу, мы визуально сравниваем элементы интерфейса с теми, что мы уже встречали.

Мы не должы думать и угадывать, что изображено на экране. «Можно ли здесь нажать?», «А это ссылка или просто текстовый заголовок?».

Здесь возникает один из главных факторов влияющих на удовлетворённость от использования.

- Не заставляйте меня думать!

Итак, Клиент№3 изучил главную страницу сайта ПриватБанка, нашёл ссылку "Банкоматы и Карты" и кликает по ссылке.

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

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

Изучая список, клиент решает проверить что происходит по нажатию на ссылку Фото1.

По клику на "Фото1" – появляется страница о незащищённом соединении.

На этом этапе клиент прекращает поиск ближайшего банкомата и покидает сайт. 

A: - Подведем итоги. Текущая функциональность на сайте, позволяет решить только один сценарий - поиск всех банкоматов в городе. 

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

Q: - Как улучшить взаимодействие Клиента и сайта в этом простом сценарии? 

A: - Мы можем "персонализировать" общение с Клиентом, учитывая его контекст.

A: - Когда Клиент заходит на сайт – есть техническая возможность определить в каком городе он находится – минус один шаг с выбором города.

Мы можем точно узнать конкретный дом, где находится сейчас Клиент, но если по техническим причинам это сложно, система предложит пользователю ответить на вопрос где он сейчас находится, или предложит ему ответить какие сооружения или другие ориентиры находятся рядом с ним – например станция метро, памятник Ленина, Аэропорт.

Пользователь сообщит системе о своём местоположении через ввод адреса в текстовое поле.

Q: - Что Клиент ожидает дальше? 

A: - Он сообщил системе своё местонахождение и ожидает увидеть карту, на которой обозначено его местоположение и отмечены ближайшие к нему банкоматы.

В случае со смартфонами, процесс определения местоположения Клиента происходит ещё быстрее, есть возможность использовать GPS навигацию и Google Maps.

Вернёмся к главной странице сайта ПриватБанка и рассмотрим действие

нескольких законов юзабилити.

Закон юзабилити:"Чем меньше объект на экране, тем сложнее на него нажать"

*это вывод из закона Фитса применительно к интерфейсам. 

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

Математически закон записывается как

где:• T — среднее время, затрачиваемое на совершение действия• a — среднее время запуска/остановки движения• b — величина, зависящая от типичной скорости движения• D — дистанция от точки старта до центра цели• W — ширина цели, измеренная вдоль оси движения

Q: - Удобно ли нажимать на ссылки в блоке "Услуги для всех" ?

В результате использования мелкого шрифта и плотного расположения ссылок, надо каждый раз чётко подводить курсор мыши к пунктам списка контролируя свои движение.

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

На сколько сложно будет взаимодействовать с этим списком на тач-скринах?

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

Закон Юзабилити:"Чем больше количество вариантов заданного типа вы предоставляете, тем больше времени требуется на выбор"

*это вывод из закона Хика применительно к интерфейсам.

Полная формулировка закона Хика:Когда необходимо сделать выбор из n вариантов, время на выбор одного из них будет пропорционально логарифму по основанию 2 от числа вариантов плюс 1, при условии, что все варианты являются равновероятными.

Время (мс) = a + b \log_2(n+1)Если вероятность 1-го варианта равна p(i), то вместо логарифмического коэффициента используется\sum_i p(i) \log_2(1/p(i)+1)

A: - Примером не выполнения этого закон, может служить блок "Услуги для всех" и "Индивидуальным Клиентам". Для принятия решений по какой из ссылок перейти, потребуется несколько раз требуется изучить каждый список. Создание таких длинных списков требует веского обоснования. Если всё-таки пришлось внедрить подобный список, то следует посмотреть на статистику его использования, вероятно некоторые пункты списка можно безболезненно удалить, предоставив клиенту только наиболее частые варианты использования.

Закон юзабилити "7 ± 2" 

"Кратковременная человеческая память, как правило, не может запомнить и повторить более 7 ± 2 элементов"

A: - Чем больше информационных блоков одновременно представлено на одном экране сайте, тем сложнее будет пользователю ориентироваться и держать в голове цельную информационную картину.Вопрос доступности и понятности интерфейса с большим объёмом информации можно решить по средствам правильной визуализации, декомпозиции, добавлением пустого пространства, увеличением общей высоты сайта.Следует изменить структуру страницы, определить важные/второстепенные блоки, и увеличить общую высоту страницу. Тем самым мы сообщаем пользователю, что вверху присутствует наиболее важная и востребованная информация, а далее следует менее значимая.

Пример длинно-страничного сайта www.gazprom.ru. Наиболее востребованная информация присутствует на первом экране. 

Менее востребованная информация расположена на следующих экранах.

Примером того на сколько удобными могут быть сайты с длинно-страничным ориентированием, также является сайт www.lenta.ru. 

Одно из важных требований предъявляемых к удобству и доступности сайтов:

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

A: - Существует акт о дискриминации людей с ограниченными возможностями, а также WAI (Web Accessibility Initiative, Программа по организации доступа к Сети для людей с ограниченными возможностями)

Справка: Всемирный Веб Консорциум (W3C — Worldwide Web Consortium) состоит из 450 организаций. Цель этого движения — максимально эффективно использовать потенциал сети Интернет. Основная деятельность этой организации — разработка стандартов. WAI – признанный стандарт консорциума, в котором деклалируется доступность веб-сайтов для всех людей, в независимости от используемой ими платформы или недостатков.В этом стандарте содержаться рекомендации по доступности в трех сферах: веб-контента, средств для создания контента и пользовательских агентов (браузеры и подобное ПО). К первой сфере относится стандарт "Рекомендации общедоступности веб-контента" (WCAG, Web Content Accessibility Guidelines 1.0), который был впервые опубликован в 1999 году. В рекомендациях приводится таблица контрольных проверок, разбитая на три группы по уровню влияния на общедоступность. В зависимости от количества выполненных правил, веб-сайту присваивается одна из трех степеней соответствия: "A", "AA" и "AAA" (степень "A" означает, что сайт удовлетворяет основным требования и имеет низкий уровень доступности, а степень "AAA" означает 100% доступность сайта).Соблюдение этих рекомендаций носит добровольный характер. Их выполнение повышает уровень доступности сайта и как следствие увеличивает его аудиторию.

A: - Основная версия сайта президента России.

A: - Версия сайта для людей с ограниченными возможностями

Наличие версии сайта для людей с ограниченными потребностями, это один из показателей солидности компании и её заботы о всех своих клиентах.

Важный аспект юзабилити:

"Правильное расставление акцентов".

A: - Взглянем на главную страницу сайта ПриватБанка. Какие блоки привлекают внимание пользователей в первую очередь? 

A: - Для большинства пользователей, блоки "Свяжитесь с нами", "Стань агентом" привлекут наибольшее внимание, тем самым расставив главные акценты на сайте. Затем взгляд переместится к блоку услуг.

A: - Рассмотрим рекламный блок «Хотите сдать в аренду помещение…?»

Q: - Действительно ли, подавляющее большинство клиентов сайта приходят сюда чтобы сдать в аренду помещение? 

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

A: - Следующий блок привлекающий внимание пользователей "Стань агентом" - соответственно это второй по важности акцент на сайте. Но отвечает ли этот блок потребностям пользователей, ставят ли они акцент важности на этот блок также как и разработчики?

Не исключено, что в поле нашего зрения попадёт фраза под фотографией женщины – «Очень плохое обслужЫвание»Как эту фразу могут трактовать клиенты сайта? Самокритика банка? К тому же написано с орфографической ошибкой  - буква Ы после Ж. 

Текст кажется вырваным из контекста, логически не выделеным и не привязаным ни к одному блоку на сайте – у него нет сопутствующего лейбла. Или всё-таки он связан с текстом слева «Вопросы, предложения, жалобы»? Если так то между ними слишком много пустого места, чтобы наш мозг мог сразу связать эти две части в одно целое. 

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

A: - Чтобы правильно расставлять визуальные акценты, следует понимать как пользователи смотрят на веб-сайт. Q: - Возможно пользователи последовательно сканируют каждый блок на сайте слева направо?

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

Места привлекающие наше внимание в первую очередь, обозначены красным цветом, менее привлекающие внимание жёлтым, то что мы не замечаем - размытое изображение.

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

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

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

A: - Eye-tracking технология позволяет узнать траекторию движения взгляда, начальную и финальную точки сканирования 

A: - Heat map технология, позволяет определить какие блоки на сайте привлекают наибольшее/наименьшее внимание пользователя

"Один из залогов успешного сайта - чёткое понимание сегментации аудитории, и соответствующее правильное расставление акцентов".

A: - Рассмотрим один из частых сценариев использования банковских сайтов - узнать о кредитных и депозитных программах. Как это реализовано сейчас: 1. найти ссылку "Депозиты и текущие счета” в блоке Индивидуальным клиентам", или через выпадающие пункты меню Услуги > Частным Клиентам > Вклады

A: - Переходим на страницу с описанием достоинств и преимуществ, снабжённую возможно и полезным текстом, но совершенно скучно и не вкусно представленным.

A: - Более привлекательный способ визуализации и представления информации о кредитных и депозитных программах банка Тинькофф.

A: - Представление информации о преимуществах вклада:

Важный аспект дизайна и юзабилити:

Лёгкость представления информации.

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

A: - Пример главной страницы сайта «ВТБ Банка». Грамотное использование пустых мест позволяет достичь лёгкости в восприятии информации.

От вопросов юзабилити, переходим к аспектам юзер экспириенс:

Q: - Что такое Юзер Экспириенс?

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

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

Q: - Как происходит взаимодействие с любым продуктом? A: - Изначально, в сознании каждого пользователя, создаётся ментальная модель взаимодействия. Пользователь создаёт для себя модель, как и что нужно сделать с объектом, чтобы добиться поставленной цели.

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

A: - Рассмотрим простой пример как можно установить положительную эмоциональную связь с клиентом при заполнении анкеты на получение кредита. Сейчас это выглядит скучно, серо, долго и не интересно:

A: - Можно немного упростить форму используя повествовательный формат, оставив только самые важные для заполнения поля, и дополнив уважительным обращением к пользователю.

Следующий важный психо-эмоциональный аспект:

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

A: - Рассмотрим следующий кейс: первый раз в жизни Клиент должен совершить денежный перевод. Q: - Какая возникает ментальная модель?

1. Надо иметь на руках деньги 2. Сходить в банк 3. Назвать адрес получателя4. Отдать деньги5. Получить подтверждение – чек. 

Q: - Какие эмоциональные аспекты можно выделить:- мы держим деньги в руках, соответственно имеем над ними физический контроль

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

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

- далее происходит перевод денег и мы получаем чек – гарантия того что транзакция проведена успешно.

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

Q: - Так почему же мы захотим воспользоваться каким либо электронным сервисом по оплате вместо привычной кассы

A: - Мы видим преимущества в том что перевод денег можно совершить не выходя из дома, быстро и удобно.

A: - Затем мы оцениваем риски:

 - на первый взгляд – нет контроля «денег на руках», они есть в виртуальном кошельке, нет гарантии, что никто не воспользуется этими деньгами в своих целях.

• если возникнут вопросы – как быстро можно получить ответ?

• а если будет совершена ошибка, как сложно будет её исправить?

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

A: - Выше перечисленные факторы негативно влияют на ментальную модель когда Клиент собирается воспользоваться помощью компьютера, а не человека. 

Эти факторы лишают чувства безопасности и ощущения контроля над ситуацией.

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

vs

Реальная история из жизни: Совсем недавно когда я был в отделении ПриватБанка, мне довелось наблюдать результат негативного юзер экспириенса со стороны одного из клиентов. 

Недалеко от меня в очереди стояла женщина, лет 55-60. К ней подошёл консультант и предложил совершить оплату через банкомат – на что женщина незамедлительно ответила – нет, нет, я их боюсь. Консультант предложил свою помощь – женщина немного задумалась, но потом всё равно ответила нет, я подожду свою очередь и оплачу в кассе.

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

Здесь важны все факторы – внешний вид аппарата, кнопки, тактильная связь и сам графический интерфейс.

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

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

Я предложил ей помощь и говорю: "вы вставьте карту и не пытайтесь её достать обратно, она должна там быть на протяжении всего времени работы с банкоматом. Когда вы снимете деньги, вы сможете забрать карту". 

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

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

Определение персонажей в целевой аудитории

Q: - Что такое персонаж?

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

Каждый персонаж в системе выполняет некую роль - например администратор, или редактор контента.

• Персонаж - это действующее лицо в системе• Роль – это совокупность его действий в системе

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

Q: - Для чего нам нужно выделять персонажи и роли?A: - Давая представление о реальном поведении реальных Клиентов, персонажи способствуют разрешению конфликтов возникающих при принятии решений.

Например:·                     Мы решаем проблему так называемой «функциональной свалки» – когда вся возможная функциональность сводится воедино и навешивается на одного мифического «юзера».Вместо этого мы можем сказать что Александр готов платить высокую коммисию за перевод денег, если при этом он получает высококачественный быстрый сервис и чувствует себя комфортно, а студентка Валерия, напротив, готова поступиться скоростью оплаты но не платить комиссию.

·                     Мы решаем проблему «резинового пользователя» - на вопрос «для кого мы делаем продукт» мы уже не сможем ответить – «для юзера». Вместо этого мы скажем так - «мы делаем продукт который должен удовлетворять потребностям как Александра так и Валерии».

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

Q: - Сколько следует выделять персонажей?

A: - Чаще всего хватает 3-4 представителей целевой аудитории, но возможно и больше, 5-6. 

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

Описание персонажа включает основную и дополнительную информацию:- имя (выбираем конкретное имя, без юмора). Если представитель аудитории итальянка, то дайте ей имя Франческа, вместо Ефросинии. Не стоит называть персонажа Блондинкой или Шурик-строитель – персонажи начинают выглядеть глупо, и их ценность снижается.

- фотография  - желательно вставлять в документ фотографию «из жизни» а не постановочную фото из глянцевых журналов. Таким образом когда вы держите описание персонажа в руках вы смотрите и читаете информацию о реальном человеке)

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

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

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

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

Важная дополнительная детализация персонажа:

·         Образование·         Заработная плата·         Жизненное кредо·         Интернет-активность·         Повседневная деятельность·         Точка взаимодействия клиента с брендом – от кого он узнал о вашем сервисе – сказали друзья, случайный результат в поиске гугла, или баннер·         Техническая подготовка·         Уровень социального комфорта·         Мотивация ·         Цели клиента

В результате мы получаем портрет представителя целевой аудитории:

Генри Форд

"Если бы я спрашивал своих клиентов о том, чего они хотят, они потребовали бы более быструю лошадь"

Определение контекста использования

С помощью анализа контекста использования мы получаем следующую информацию:

·         Где будет использоваться сервис·         Как пользователь может его использовать·         Каковы технические условия системы?·         На каком оборудовании будет работать система и пользователь? 

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

Например:• менеджер проекта• представители пользователей• разработчики• обучающий персонал• персонал службы поддержки

Ключевые лица в этом списке это менеджер проекта и представители пользователей. 

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

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

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

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

Прототип интерфейса

Существует не мало средств для разработки прототипов будущих продуктов. Основное их свойство – они дают представление всем участникам процесса о том, как происходит взаимодействие с сервисом или сайтом, до начала детализированной прорисовки и дизайна. 

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

Создание прототипов даёт возможность предоставить HTML-ную кликабельную версию сервиса без графической детализации. Каждый сотрудник вовлечённый в процесс разработки может протестировать прототип.

После того как прототип согласован, он передаётся дизайнеру, который видя все элементы на экране, сможет легко отрисовать интерфейс, создать эффект eye-candy.

Одно из таких средств прототипирования интерфейсов это продукт Axure PRO.

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

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

Более подробно о проведении юзабилити-тестирования:

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

Определите список наиболее часто выполняемых юз-кейсов. И предложите пользователям выполнить их.

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

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

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

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

Лучше всего провести несколько мелких тестов и вносить изменения в дизайн после каждого из них:  так вы сможете сразу исправлять обнаруженные ошибки. Этот метод последовательного дизайна лучше всего позволяет улучшить качество конечного продукта. Чем больше версий и идей вы протестируете, тем лучше.

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

В результате проведения юзабилити-тестирования можно оценить следующие показатели:

• Обучаемость: насколько легко пользователи могут выполнить основные задачи, впервые встретившись с незнакомым им интерфейсом?

• Эффективность: после того, как пользователи ознакомятся с дизайном, как быстро они могут выполнить то же задание?

• Запоминаемость: После того, как пользователь снова вернется к интерфейсу через определенный промежуток времени, насколько легко ему будет восстановить свои навыки работы с данным интерфейсом?

• Ошибки: сколько ошибок делает пользователь, насколько серьезны эти ошибки, насколько легко пользователь может исправить эти ошибки?

• Удовлетворенность: насколько пользователю приятно пользоваться данным интерфейсом?

Зачем вкладывать деньги в юзабилити-тестирование, юзер экспириенс и изучение потребностей клиента?

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

    Учитывая потребности пользователя мы чётко понимаем какие бизнес-цели он собирается реализовать, и предоставляем ему инструмент которые отвечат его требованиям.

    Создание положительного опыта взаимодействия даёт нам следующие преимущества:1. Клиенты довольны вашими продуктами2. Клиенты возвращаются к вам3. Они хотят купить ваши услуги снова4. Они рекомендуют его своим знакомым и близким людям5. К вам приходят новые Клиенты

=

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

P.S.- В чём же заключается работа юзабилити и юзер экспириенс специалиста?

"Взять глыбу мрамора и отсечь от неё всё лишнее"

* Ответ Огюста Родена на вопрос одного из своих учеников в чём состоит искусство скульптора

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

Книги и статьи для начинающих:Стив Круг. Веб-дизайн: книга Стива Круга, или ’не заставляйте меня думать!Стив Круг. Как сделать сайт удобным. Юзабилити по методу Стива КругаЯкоб Нильсен. Веб-дизайн. Книга Якоба НильсенаДональд А. Норман. Дизайн привычных вещейАлан Купер. Психбольница в руках пациентов

Юзабилити, правила, психология и термины http://designformasters.info/posts/usability-rules-psychology-terms/

Принцип дизайна веб-форм для мобильных устройствhttp://habrahabr.ru/blogs/design/116370/

Полезные советы проектировщикам интерфейсовhttp://habrahabr.ru/blogs/ui/114475/

Книги для профессионалов:Джеф Раскин. Интерфейс: новые направления в проектировании компьютерных системДженифер Тидвелл. Разработка пользовательских интерфейсовР. Л. Солсо. Когнитивная психологияРасс Унгер, Кэролайн Чендлер. UX-дизайн. Практическое руководство по проектированию опыта взаимодействияСтивен К. Сеов. Проектируем время. Психология восприятия времени в программном обеспеченииJoAnn Hackos, Janice Redish. User and Task Analysis for Interface DesignТафти — Представление информации http://envisioninginformation.daiquiri.ru/Дж. Гарретт - Веб-дизайн. Элементы опыта взаимодействия

Гештальт принципы восприятия форм (eng) http://www.interactiondesign.org/encyclopedia/gestalt_principles_of_form_perception.html

Юзер Экспириенс и Экспириенс Дизайн (eng) http://www.interaction-design.org/encyclopedia/user_experience_and_experience_design.html

Визуализация данных для человеческого восприятия (eng) http://www.interaction-design.org/encyclopedia/data_visualization_for_human_perception.html

Чек-лист при подготовке контента (eng) http://www.alistapart.com/articles/a-checklist-for-content-work/