Оригинал статьи: https://www.interaction-design.org/literature/article/7-ux-deliverables-what-will-i-be-making-as-a-ux-designer

Автор — Андреас Камнинос (Andreas Komninos)

Что на самом деле создает UX-дизайнер? В этой статье мы рассмотрим концепцию конечных результатов UX — этот термин описывает результаты процесса UX-дизайна на разных этапах. Результаты, созданные UX-дизайнерами, различаются в зависимости от их роли в команде дизайнеров, а также в зависимости от методов и инструментов, используемых каждой ролью. Мы рассмотрим некоторые из наиболее распространенных типов результатов.

Процесс UX-дизайна обычно опирается на что-то схожее с подходом дизайнерского мышления, который состоит из пяти основных этапов:

• Понимание чувств пользователей (изучение аудитории)
• Определение проблемы (определение потребностей пользователей)
• Создание идей (генерация идей для дизайна)
• Прототипы (превращение идей в конкретные примеры)
• Тест (оценка дизайна)

Первые два этапа (понимание чувств пользователей и определение проблемы) часто группируются в термин «Исследование пользователей», то есть понимание сущности пользователей и того, как это влияет на их потребности. На каждом этапе можно использовать ряд инструментов и методов. Каждый инструмент или метод может предоставить другой тип вывода (UX-результат), но здесь мы сосредоточимся на некоторых наиболее часто используемых типах, чтобы предоставить вам обзор того, что вам предстоит создавать в роли UX-дизайнера.

Результаты исследований пользователей

Персоны

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

Copyright holder: Rosenfeld Media, Flickr. Copyright terms and license: CC BY 2.0

Пример персоны пользователя. Демография, способности, навыки, цели и мотивации представлены либо графически, либо в тексте.

Раскадровка

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

Copyright holder: Rosenfeld Media, Flickr. Copyright terms and license: CC BY 2.0

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

Карта путешествий потребителя

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

Copyright holder: Tobias Maier, Wikimedia. Copyright terms and license: CC BY-SA 3.0

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

Результаты создания идей

Мозговой штурм

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

Copyright holder: visualpun.ch, Flickr. Copyright terms and license: CC BY 2.0

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

Пользовательский маршрут (User Flow)

User flow — простая диаграмма, описывающая шаги, которые пользователь должен предпринять с вашим продуктом или услугой для достижения цели. В отличие от карты путешествия потребителя, в user flow учитывается только то, что происходит с вашим продуктом (т. е. игнорируются все внешние факторы). Эти диаграммы могут помочь дизайнерам быстро оценить эффективность процесса, необходимого для достижения цели пользователя, и могут помочь определить «как» (то есть выполнение) великих идей, определенных посредством мозгового штурма.

Copyright holder: Teo Yu Siang and Interaction Design Foundation. Copyright terms and licence: CC BY-NC-SA 3.0

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

Результаты прототипирования

Карты сайта

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

Copyright holder: Teo Yu Siang and Interaction Design Foundation. Copyright terms and licence: CC BY-NC-SA 3.0

Пример карты сайта, показывающей, как организовывается контент на веб-сайте, и как пользователи могут перейти от раздела к разделу. Здесь дизайнер показывает иерархию путем нумерации разделов содержимого (например, 2.0 является «родительским» разделом и 2.1 является подразделением).

Прототипы с низкой точностью

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

Copyright holder: VFS digital design, Flickr. Copyright terms and license: CC BY 2.0

Примеры насованных вручную (слева) и на компьютере (справа) прототипов с низкой точностью

Прототипы с высокой точностью

Эти прототипы на ступень выше прототипов с низкой точностью. Часто они называются идеально-пиксельными прототипами (pixel-perfect prototypes), потому что они пытаются показать все визуальные и типографические детали продукта, как это было бы показано на настоящем экране. Они учитывают размеры физического экрана и создаются в размере, соответствующем размеру физического устройства. Хотя эти прототипы требуют гораздо больше времени для создания по сравнению с прототипами с низкой точностью, они часто являются примером иллюстрации, которую вы хотели бы показать клиенту или заинтересованному лицу.

Copyright holder: amire80, Wikimedia. Copyright terms and license: CC BY-SA 3.0

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

Интерактивные прототипы

Прототипы с низкой и высокой точностью, рассмотренные выше, представляют собой не что иное, как набор статических изображений. Чтобы лучше оценить ваши проекты, вы можете превратить эти прототипы в интерактивную демонстрацию, нацеленную на отображение того, как взаимодействие может работать с ними. Программы для коммерческого прототипирования позволят определить активные области, переходы и события, чтобы создать интерактивный прототип, который охватывает user flow и демонстрирует взаимодействие без необходимости писать ни одной строки кода. В некоторых случаях вы можете использовать гораздо более простой инструмент, например, PowerPoint или Keynote. Даже лучше, вы можете использовать эти интерактивные прототипы в ранних тестах пользователей, прежде чем какой-либо код даже был написан. Таким образом, вы можете убедиться, что ваш дизайн, вероятно, будет работать хорошо, прежде чем перейти к дорогому и трудоемкому процессу разработки кода.

https://www.youtube.com/watch?v=AmXkqZ4dJhE

Пример того, как вы можете создать интерактивный прототип с таким простым инструментом, как программа для презентаций Keynote от Apple.

Результаты оценки

Отчет по юзабилити

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

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

• Справочная сводка: что вы протестировали, где и когда, инструменты и оборудование, которые вы использовали, и кто участвовал в исследовании.
• Методология: как вы оценивали, какие задания ставили перед пользователями, какие данные были собраны, какие сценарии использовались, кто был участниками и их демография.
• Результаты тестирования: анализ всех собранных данных, включая иллюстрации, такие как гистограммы и текстовые описания результатов, а также комментарии пользователей, которые могут быть особенно иллюстративными или информативными. В зависимости от того, кому вы подаете отчет, этот раздел может содержать несколько технических подробностей, например, тип используемого статистического анализа.
• Выводы и рекомендации: что вы рекомендуете, на основе собранных вами данных и ваших выводов? Запишите, что сработало хорошо, что плохо и почему. Укажите, что следует сделать, чтобы улучшить дизайн или продвинутся с процессом вперед.

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

Copyright holder: Teo Yu Siang and Interaction Design Foundation. Copyright terms and licence: CC BY-NC-SA 3.0

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

Аналитический отчет

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

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

Copyright holder: pexels, pixabay.com. Copyright terms and license: CC0

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

В заключение

В статье 2015 года для Norman Nielsen group, специалист по UX Пейдж Лобхаймер (Page Laubheimer) анализировал тип UX-результатов, который UX-разработчики подавали чаще всего. Как сообщается, наиболее часто создавались вайрфреймы и прототипы, а также блок-схемы, карты сайтов и отчеты по юзабилити/аналитике.

Copyright holder: Teo Yu Siang and Interaction Design Foundation. Copyright terms and licence: CC BY-NC-SA 3.0

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

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

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

Copyright holder: Teo Yu Siang and Interaction Design Foundation. Copyright terms and licence: CC BY-NC-SA 3.0

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

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

Ссылки и где узнать больше:

Hero Image: Copyright holder: Mark Congiusta, Flickr. Copyright terms and license: CC BY 2.0

Лобхаймер П. (Laubheimer, P). (2015). Какие конечные результаты UX наиболее часто создаются и передаются другим?

https://www.nngroup.com/articles/common-ux-deliverables/

Teixeira, F. & Braga, C. (2016). Методы и результаты UX-дизайна

https://uxdesign.cc/ux-design-methods-deliverables-657f54ce3c7d

Бабич Н. (Babich, N.) (2017). Полный список результатов UX

https://uxplanet.org/a-complete-list-of-ux-deliverables-d62ccf1de434

Морвилл П. (Morville, P. (2009)) Результаты UX

http://semanticstudios.com/user_experience_deliverables/

Гудман, Э. (Goodman, E.) (2012). Как я научился перестать беспокоиться и любить результаты взаимодействий, 19 (5), 8-9.

Оригинал статьи: https://www.interaction-design.org/literature/article/principle-of-consistency-and-standards-in-user-interface-design

Автор — Эуфемия Вонг (Euphemia Wong)

Научитесь создавать дизайн с учетом последовательности и стандартов и поймите причины, по которым они важны, чтобы включить их в вашу работу. Полученные от Якоба Нильсена и Рольфа Молича (Jakob Nielsen и Rolf Molich) рекомендации по пользовательскому интерфейсу «Последовательность и стандарты» проявляются во многих широко используемых продуктах, созданных одними из наиболее успешных компаний. Такие продукты, как Adobe Photoshop, первоначально выпущенные в 1990-х годах, и Google Gmail, выпущенные в середине 2000-х годов, — это лишь некоторые из самых популярных продуктов, которые демонстрируют это важное правило. Эта статья расскажет, как распознавать последовательность и стандарты и объяснит, почему они важны в дизайне пользовательского интерфейса (User Interface Design, UI Дизайн).

Два основные причины для последовательности и стандартов в UI дизайне

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

1. Сокращение обучения

Последовательность ограничивает количество способов действий и операций, которые гарантируют, что пользователям не нужно изучать новые материалы для каждой задачи. Кроме того, установление норм проектирования, таких как следование соглашения платформы, позволяет пользователям выполнять новые задачи без необходимости изучения нового набора инструментов. Это может показаться простой концепцией, но есть много примеров, которые демонстрируют отсутствие последовательности в их проектах. Одним из таких примеров, который показывает эту проблему, является веб-сайт Xfinity от Comcast Corporation, американской медиа-компании. На их сайте не только второстепенное меню непоследовательно почти каждый раз, когда пользователь нажимает на другую страницу, но оно также непоследовательно по отношению к основному меню. Давайте посмотрим и сравним три разные страницы веб-сайта: Домашняя страница, My Xfinity и ТВ (Homepage, My Xfinity, and TV.).

Author/Copyright holder: Comcast Corporation. Copyright terms and licence: Fair Use.

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

Author/Copyright holder: Comcast Corporation. Copyright terms and licence: Fair Use.

Это ТВ-страница сайта Xfinity. Что вводит пользователя в заблуждение, так это то, как цвета, расположение и стили шрифтов отличаются от домашней страницы.

Author/Copyright holder: Comcast Corporation. Copyright terms and licence: Fair Use

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

2. Устранение путаницы

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

Пять способов достижения последовательности в вашей работе

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

1. Ваш выбор языка

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

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

Когда вещи означают одно и то же или выполняют одну и ту же операцию, они должны быть представлены таким же образом, как в случае с почтовым сервисом Google, Gmail. На основе стиля организации клиентских почтовых приложений папки Gmail помечены как «Входящие», «Черновики», «Отправленные письма» и т. д. Язык, используемый для этих папок, показывает последовательность и знаком для всех, кто использовал почтовые приложения в прошлом.

Author/Copyright holder: David Bruce Jr. 2011. Copyright terms and licence: CC BY 2.0

Ярлыки папок в версии Gmail 2011 года отображают множество знакомых опций. Язык, используемый для этих папок, показывает последовательность, поскольку он использует метки «Входящие», «Черновики» и «Спам» — они знакомы всем, кто использовал почтовые приложения в прошлом.

2. Применение элементов пользовательского интерфейса так, как они первоначально определены

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

Например, селективные кнопки (radio buttons) используются, когда разрешена только одна опция. Флажки (checkboxes) с другой стороны должны использоваться только тогда, когда пользователю разрешено несколько вариантов. Во многом мы можем видеть, как HTML5 вытеснил технологию Flash на конец 2014 года. Одной из причин является, пожалуй, простота применения и простота использования, которую разработчики, дизайнеры и пользователи могут получить в результате последовательности и стандартов HTML5 в определении их UI элементов.

Селективные кнопки допускают только один вариант. Поэтому для встроенных селективных кнопок HTML разумно вести себя в функциональности так же.

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

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

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

Author/Copyright holder: BBC. Copyright terms and licence: Fair Use.

Раздел BBC Comment показывает стрелку вниз для «наивысшей оценки» и стрелку вверх для «самой низкой оценки». Это отображение является непоследовательным и запутанным для пользователей, так как понятие «наивысший» обычно является синонимом стрелки вверх, а «нижний» — синонимом стрелки вниз.

3. Использование различных устоявшихся соглашений при выборе схемы расположения

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

Author/Copyright holder: Microsoft Corporation. Copyright terms and licence: Fair Use.

Author/Copyright holder: Apple Inc. Copyright terms and licence: Fair Use.

И Microsoft, и Apple помещают свой логотип в верхнем левом углу, а поле поиска — в верхнем правом углу их веб-сайтов. Такая форма последовательности в схеме расположения помогает пользователям чувствовать себя менее дезориентированными, когда они просматривают новый и незнакомый сайт.

4. Дизайн для ожиданий пользователей

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

Author/Copyright holder: Youtube. Copyright terms and licence: Fair Use.

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

5. Создание последовательных визуальных элементов на вашем сайте

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

Author/Copyright holder: Jan-Alfred Barclay. Behance. Copyright terms and licence: CC BY-NC 4.0

Пример руководства по стилю и руководства по брендингу, разработанного для компании «Goodnyt». Наличие руководства по стилю и брендингу поможет вам убедиться, что ваши визуальные элементы последовательны на вашем сайте.

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

Author/Copyright holder: Google Inc. Copyright terms and licence: Fair Use

Скриншот мобильного пользовательского интерфейса приложения Gmail, когда он был впервые представлен в 2013 году, показывает непоследовательность в выборе цветных прямоугольников и стилей шрифтов.

В заключение

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

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

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

Ссылки и где узнать больше

Чтобы найти дополнительную информацию о «Повышение объяснительной силы эвристики юзабилити» Якоба Нильсена, смотрите здесь: https://static.aminer.org/pdf/PDF/000/089/679/enhancing_the_explanatory_power_of_usability_heuristics.pdf

Чтобы узнать больше о различии между искусством и дизайном, смотрите здесь:

http://www.hongkiat.com/blog/design-vs-art/

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

http://www.sitepoint.com/why-consistency-is-critical/

Чтобы узнать больше о сбалансированной последовательности и инновациях, пожалуйста, смотрите здесь:

http://www.uxmatters.com/mt/archives/2010/07/achieving-and-balancing-consistency-in-user-interface-design.php

Hero Image: Author/Copyright holder: GraphBerry. Deviant Art. Copyright terms and license: CC BY-SA 3.0

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

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

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

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

Концепция ментальных моделей пришла от книги шотландского психолога Кеннета Крейка «Природа исследования». Он сказал, что ум строит «мелкомасштабные модели реальности», чтобы предвидеть и объяснять события.

Практическое правило ментальной модели (The Mental Model Rule of Thumb)

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

Author/Copyright holder: Nathanael Crawford. Copyright terms and licence: CC BY-SA 3.0

Запутанные ментальные модели

Якоб Нильсен, член-учредитель Nielsen Norman Group, предлагает отличное понимание возможной путаницы в ментальном моделировании. Это происходит, когда пользователи не распознают ключевые различия между аналогичными (но не идентичными) частями системы.

Он отмечает, что многие пользователи не могут различать поле поиска в Google и поле ввода URL-адреса в браузере. Эти пользователи будут использовать Google для поиска имени известного веб-сайта, чтобы щелкнуть ссылку, а не просто вводить название и «.com» в строке URL. (Проблема, которую Google Chrome, показанный ниже, пытается решить, сделав URL-панель поисковым инструментом).

Author/Copyright holder: Axendo. Copyright terms and licence: Public Domain.

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

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

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

Использование ментальных моделей в дизайне

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

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

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

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

 Author/Copyright holder: Nite_Owl. Copyright terms and licence: CC BY-SA 2.0

В заключение

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

Ссылки

Дополнительное объяснение ментальных моделей можно найти здесь — https://www.interaction-design.org/literature/book/the-glossary-of-human-computer-interaction/mental-models

Доклад Якоба Нильсена о ментальных моделях для группы Nielsen Norman можно найти здесь — https://www.nngroup.com/articles/mental-models/

Hero Image: Author/Copyright holder: Rosenfeld Media. Copyright terms and licence: CC BY 2.0

Оригинал статьи: https://www.nngroup.com/articles/date-input/

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

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

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

Шаблоны ввода даты

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

Пример calendar picker на мобильном телефоне, показанный в приложении Календаря Google.

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

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

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

Прокрутка элементов для выбора даты (date pickers) на мобильных устройствах является обычным явлением, но они могут раздражать, если элемент выбора (picker) содержит много дат. В таких ситуациях прокрутка в небольшом пространстве медленная и непродуктивная; лучше дать пользователям возможность вводить дату напрямую.

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

Приложение iPhone Todoist позволило пользователям прокручивать, а также вводить дату самостоятельно. (Обратите внимание на преимущество обозначения текущей даты «сегодня»: она устраняет любую неопределенность, если пользователь не помнит сегодняшнюю дату.)

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

DeviantArt предоставил раскрывающийся список для каждого раздела поля даты.

Самостоятельный ввод даты — это самый простой вариант, но во многих случаях он является наиболее эффективным, особенно когда дата далеко в прошлом (например, дата рождения) или будущем. Мы рекомендуем вам разрешать пользователям самостоятельно вводить дату, даже если доступны другие методы ввода.

Рекомендации по дизайну ввода даты

Для ограниченного количества вариантов даты сделайте список подходящих дат.

В некоторых случаях у пользователей будет всего лишь несколько вариантов выбора даты. Например, Google Express, онлайн-сервис покупок, позволяет клиентам заказывать онлайн-продукты и планировать время доставки. Вместо того чтобы предлагать пустые поля даты или calendar picker с безграничными опциями, Google Express предоставляет короткий список вариантов даты. Любые даты, которые недоступны были закрашены в серый и отключены. (В качестве альтернативы, недоступные даты могут даже не включаться в список.)

Google Express предоставил раскрывающийся список с вариантами доставки. Выбор, который недоступен, отключен и закрашен в серый.

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

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

Независимо от того, какой формат пользователь выбрал для ввода даты (тире, пробелы, косые черты, точки между компонентами месяца, дня и года), их вход должен быть распознан. Более того, крайние левые нули не должны влиять на дату. В приведенном ниже примере Priceline дата 9-3-17 отклоняется, а принимается 09/08/17, хотя никакие требования к формату не были видны перед отправкой формы.

 Priceline отклонил дату 9-3-17, даже не представив предложения о том, как правильно ее форматировать. Вместо этого он должен был принять его и проанализировать для пользователя.

Сообщите об ошибках соответствующим образом.

Если пользователь вводит дату, которая, очевидно, является ошибкой, например, 11/81/17, не делайте никаких предположений. Обеспечьте пользовательскую обратную связь и предложите рекомендации по устранению ошибки.

Устраните нелогичные варианты дат

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

Сохраняйте работу пользователей.

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

Сохраняйте диапазоны дат постоянными.

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

Southwest Airlines изменили диапазон дат возвращения, основываясь на выборе даты вылета. После выбора даты вылета 8-16-16 из диапазона дат за июль-август диапазон дат возвращения изменился, чтобы показать август-сентябрь.

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

Поля ввода дат зависят от культуры и могут вызвать серьезные проблемы для тех пользователей, которые привыкли к другому формату. «10/11/2016» может означать 11 октября 2016 года для американца, но 10 ноября — для кого-то из Европы. Следуйте этим практическим правилам при разработке дизайна ввода даты для глобальной аудитории:

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

Этот таймер обратного отсчета отделил компоненты даты и четко обозначил их.

• Укажите название месяца, чтобы отделить его от дня.

Сайт Tep Wireless, где пользователи могут арендовать портативные Wi-Fi-устройства, указал название месяца для обслуживания своей глобальной аудитории.

Веб-сайт Eurostar, показанный на английском (США), поддерживал несколько языков, но не сказал, какой формат даты он ожидал. Здесь дата отъезда может быть прочитана как 2 июля или 7 февраля.

• Используйте элементы для календаря (calendar pickers) с четко обозначенными названиями месяцев.

Некоторые фреймворки, такие как Bootstrap, предоставляют элементы для календарного выбора (calendar pickers) для поддержки однозначного выбора даты.

В календаре выбора (calendar picker) Bootstrap было указано название месяца, чтобы было ясно, какую дату выбрать.

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

Вывод

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

Автор — Дитте Мортенсен (Ditte Mortensen)

Оригинал статьи: https://www.interaction-design.org/literature/article/how-to-visualize-your-qualitative-user-research-results-for-maximum-impact

Думая о визуализации результатов исследования, у многих людей автоматически возникает в уме изображение графика. У вас также возникает этот образ? Вы были бы правы, думая, что многие результаты исследований выигрывают от графической визуализации, демонстрируя тенденции и аномалии.  Но это в основном справедливо для результатов количественных исследований пользователей. Графики часто являются не лучшим способом сообщать результаты от качественных методов исследования пользователей, таких как интервью или наблюдения. Часто количество участников этих типов исследований слишком мало для создания значимых графиков. Более того, информацию, которую вы захотите сообщить, иногда нельзя перевести в прямое число (clean number). Давайте покажем вам, как визуализировать более субъективные и нечеткие данные из качественных методов исследования пользователей, таким образом, чтобы сообщать основные идеи другим заинтересованным сторонам, чтобы им не нужно было просматривать обширные исследовательские отчеты.

«Цель визуализации — это не изображения, а проникновение в суть»

— Бен Шнейдерман, заслуженный профессор университета по информатике

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

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

Диаграмма сходства

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

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

Author/Copyright holder: Teo Yu Siang and Interaction Design Foundation. Copyright terms and licence: CC BY-NC-SA 3.0

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

Карта эмпатии

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

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

Author/Copyright holder: Teo Yu Siang and Interaction Design Foundation. Copyright terms and licence: CC BY-NC-SA 3.0

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

Карта путешествия пользователя

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

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

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

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

Author/Copyright holder: Teo Yu Siang and Interaction Design Foundation. Copyright terms and licence: CC BY-NC-SA 3.0

В заключение

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

Существует три типа визуализации, которые вы можете использовать. Диаграммы сходства больше всего напоминают результаты анализа данных, но вы должны переделать их, чтобы предоставить больше ясности людям, которые должны понять информацию. Карты эмпатии дают вашей аудитории отличный обзор четырех важных областей понимания пользователей: что люди говорят, делают, думают и чувствуют. Наконец, карты пользовательских путешествий представляют последовательность действий пользователей (user flow) за определенный промежуток времени. Вы можете использовать эти три визуализации вместе, чтобы вызвать глубокое чувство сочувствия, что поднимет ваш дизайнерский проект на следующий уровень.

Ссылки и где узнать больше

Тереза ​​Тан (Teresa Tan), Диаграммы сходства: добавление цвета к нечетким данным, 2014:

http://www.extractable.com/insights/affinity-diagrams-adding-color-to-fuzzy-data

Рич Крендалл (Rich Crandall), Карта эмпатии, 2010:

https://dschool-old.stanford.edu/groups/k12/wiki/3d994/empathy_map.html

Кейт Каплан (Kate Kaplan), Картография путешествия в реальной жизни: обзор практикующих UX, 2016:

https://www.nngroup.com/articles/journey-mapping-ux-practitioners/

Оригинал статьи: http://webbyclare.com/design-thinking-the-gift-giving-experience/

Быстрый пост (я слишком долго его откладывала!), чтобы поделиться некоторыми наблюдениями, приобретенными знаниями и размышлениями о недавнем проведении «проекта дарения подарков» Стэнфордского института дизайна (Stanford Institute of Design‘s, d.school) с группой коллег в австралийской государственной службе (the Australian Public Service).

Я думаю, что эта сессия дает фантастическую информацию о том, что такое дизайнерское мышление, и почему создание эмпатии, прототипирование, поиск обратной связи и итерация имеют решающее значение для достижения хороших результатов дизайна. Но, возможно, более важно из того, что мне нравится в этом курсе — это то, что он помогает людям раскрывать (или открывать?) их собственный творческий потенциал. Люди приступают к курсу с мыслями: «Я не дизайнер», «Я не умею рисовать», «Я не креативный», но на протяжении курса они создают дизайн, рисуют и выдают креативные решения.

D.school делает это очень легким для координаторов, предоставляя им практически все материалы, необходимые для курса — руководство для координатора, листы участников и раздаточные материалы после курса (которые вы можете бесплатно скачать и использовать по лецензии CC BY -NC-SA здесь). Примечание —  недавно выпущенный виртуальный ускоренный курс делает это еще проще, поскольку он тоже эффективно снабжает координатора!

1. Материалы прототипирования. Наряду с распечатками руководства для координатора и раздаточного материала для участников, единственными дополнительными материалами, которые нужно организовать координатору, являются материалы прототипирования. Я сделала это довольно просто, дешево и легко — я обыскала стационарный шкаф и свои собственные шкафы дома, чтобы найти такие вещи, как: кусочки оберточной бумаги, фольги, резиновые полосы, цветную бумагу, старые цветные папки и множество переработанных упаковочных материалов (туалетные рулоны, картонные коробки, упаковки для яиц и т. д.). Я также взяла много клей-карандашей, кнопок, пластилина и скрепок. По сути — все, что я могла легко найти. Если бы у меня было больше времени, мне бы очень хотелось добавить такие вещи, как pipe-cleaners (щетки, проволка) и другие поделочные материалы (я пробовала Officeworks, но похоже у них нет этих материалов. Позже коллега предложил магазины типа Lincraft или Hot Dollar, которые я попробую в следующий раз).
2. Распечатка раздаточного материала для участников. Убедитесь, что вы выбрали опцию «разобрать по копиям» (collate) на копировальном аппарате при распечатке руководств участников! Я этого не сделала и в итоге потратила довольно много времени, вручную разбирая распечатки (не понимаю, почему «разбор по копиям» не является опцией по умолчанию для всех принтеров /копировальных аппаратов).      
3. Музыка/таймер. Курс рекомендует, чтобы вы показывали таймер и проигрывали музыку, но у нас не было доступа к проектору/громкоговорителям (плюс была большая официальная встреча, которая происходила в соседней комнате, поэтому мы пытались снизить уровень шума). Я просто следила за временем, используя секундомер на моем iPhone, и он отлично работал для нашей небольшой группы.
4. Размер группы. В группе было 9 человек, и это очень хорошее количество для прохождения курса в первый раз. Я бы определенно рекомендовала, чтобы в первый раз координаторы пробовали проводить курс с группой из 8-12 человек. Нечетное число участников было не идеальным — в итоге у нас была группа из трех человек (которая не работала отлично, но все же давала ощутить каждому вкус опыта дизайна), и я слегка манипулировала временными рамками и инструкциями, чтобы это сработало. Вот почему сокоординатор (или некоторые помощники) может быть действительно полезен — если бы было нечетное число участников, один из соорганизаторов мог бы участвовать, а не управлять.
5. Расчет времени. В целом, я думаю, что расчет времени сработал хорошо — мы закончили (включая подведение итогов/отчет) за 90 минут, как и планировалось. Иногда определенно чувствовалась спешка (и участники явно чувствовали себя некомфортно из-за этого), поэтому я думаю, что стоит подчеркнуть это и заранее дать участникам знать, что курс будет таким.
6. Разогрев. Потребовалось время, чтобы участники разогрелись и действительно погрузились в опыт. Я заметила, что первоначальные «интервью» были довольно формальными, спокойными, и было несколько неопределенных лиц. Но по мере того, как люди продвигались все дальше, вникали глубже в разговоры и начали ясно понимать возможные идеи/решения, разговоры стали более оживленными и восторженными. Если бы я снова проводила сеанс с группой участников, которые не знали друг друга, я бы попыталась провести быструю разминку после того, как пары были установлены — что-то веселое и быстрое, чтобы участники творчески мыслили и выстроили некую начальную связь/доверие/взаимопонимание.
7. Инструкция. Хотя целью упражнения является пересмотр опыта дарения подарка, некоторые из участников по-прежнему стремились к созданию лучшего подарка для своего партнера. Наверное, отчасти это потому, что легче проектировать и физически прототипировать продукт, а не услугу. Кроме того, на первом этапе интервью участникам предлагается спросить друг друга, как в последний раз они подарили подарок, поэтому некоторые из моих участников сосредоточились на создании лучшего подарка для этого конкретного сценария. В следующий раз я предоставлю участникам более общую инструкцию и, возможно, попрошу их поделиться не одним опытом, а несколькими (например, самый последний подарок, дающий опыт, самый положительный опыт, время, когда дарить подарок было трудно или неприятно), вместо того, чтобы фокусироваться только по самом последнем опыте. За этим нужно следить координатору и постоянно напоминать участникам, что они разрабатывают опыт, а не подарок.

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

1. Изображения против слов. Я работаю в среде, где мы постоянно используем слова! Наше общение очень сосредоточено на письменных электронных письмах, инструкциях, отчетах и ​​т. д. или устных отчетах/отзывах, полученных на встречах. Необходимость делать наброски идей определенно было тем, что вызывало дискомфорт у участников. Было много комментариев «но я не умею рисовать» и слегка расстроенных лиц. Но когда они вникли в суть упражнения и поняли, что им «нужно» рисовать, они, казалось, приняли это (или, по крайней мере, стали меньше беспокоиться об этом), будучи менее, чем идеальным художником!
2. Фокусировка на быстром получении количества. Опять же, это была трудная часть упражнения для многих участников. Придумывание множества сумасшедших идей — это не то, что мы делаем регулярно, но определение цели («вы должны придумать хотя бы 5 идей») заставляет всех думать немного шире (и, возможно, немного безумно), чем они могли бы, если бы им просто нужно было разобраться с одним решением.
3. Вовлечение пользователей заранее. Если бы участникам было предложено сделать редизайн опыта дарения подарка для своего партнера, не разговаривая или не взаимодействуя с ним, тогда результаты определенно были бы другими (и, вероятно, значительно худшими). Это упражнение четко демонстрирует, почему так важно взаимодействовать с пользователем на ранней стадии процесса и понимать их потребности и желания.

Вам не нужно быть опытным координатором или иметь какое-нибудь особенное оборудование для проведения этого сеанса. Благодаря тому, что d.school проделал большую часть работы по мышлению/планированию, это быстрый, простой и относительно недорогой способ проведения тренинга для ознакомления ваших коллег с дизайном мышления. Настоятельно рекомендую!

Оригинал статьи: https://www.interaction-design.org/literature/article/a-simple-introduction-to-lean-ux

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

Lean UX — что это?

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

Author/Copyright holder: Vimeo. Copyright terms and licence: Public Domain

Потребность в предположениях в Lean UX

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

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

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

Что такое предположение? Предположение — это, по сути, высказывание того, что мы считаем правдой. Они призваны создавать общее понимание вокруг идеи, которая дает возможность всем начать. Понятно, что предположения могут быть неверными и могут быть изменены во время проекта, так как в команде развивается лучшее понимание.

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

Стандартные вопросы:

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

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

Author/Copyright holder: visualpun.ch. Copyright terms and licence: CC BY-SA 2.0

Создание гипотезы в Lean UX

Гипотезы, созданные в Lean UX, предназначены для проверки наших предположений. Существует простой формат, который вы можете использовать, чтобы быстро и легко создавать свои собственные гипотезы.

Пример:

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

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

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

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

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

Минимальный жизнеспособный продукт и Lean UX

Минимальный жизнеспособный продукт (Minimum Viable Product, MVP) — это основная концепция Lean UX. Идея состоит в том, чтобы создать наиболее простую версию идеи, протестировать ее, и если нет никаких ценных результатов, отказаться от нее. Многообещающие MVP могут быть затем включены в дальнейшие этапы дизайна и разработки без особых проблем.

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

Author/Copyright holder: Eric delcroix. Copyright terms and licence: CC BY-NC-SA 2.0

Исследование пользователей и тестирование в Lean UX

Исследование и тестирование пользователей по самой природе Lean UX основаны на тех же принципах, что и в традиционных средах UX. Тем не менее, этот подход имеет тенденцию быть «быстрым и грязным» — результаты должны быть предоставлены до начала следующего Agile Sprint; поэтому гораздо меньше внимания уделяется мощным, тщательно документированным выводам и больше внимания уделяется необработанным, сырым данным.

Обязанности для исследований также имеют тенденцию распространяться более широко между всеми членами команды, так что нет «узкого места», созданного при наличии единого ресурса дизайна UX, пытающегося самостоятельно выполнить всю работу в сжатые сроки. Это часто приводит к практичной UX-работе и повышает уровень понимания и поддержки работы UX в команде разработчиков.

Заключение

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

Header Image: Author/Copyright holder: Rosenfeld Media. Copyright terms and licence: CC BY 2.0

Оригинал статьи: https://www.interaction-design.org/literature/article/norman-s-three-levels-of-design

Автор — Андреас Комнинос (Andreas Komninos)

В человеческом разуме есть множество областей, ответственных за то, что мы называем эмоциями; в совокупности эти зоны составляют эмоциональную систему. Дон Норман предлагает, чтобы эмоциональная система состояла из трех разных, но взаимосвязанных уровней, каждый из которых влияет определенным образом на наш опыт в мире. Три уровня — это интуитивный, поведенческий и рефлекторный. Интуитивный уровень отвечает за укоренившиеся, непроизвольные и подобные животным инстинктам качества человеческих эмоций, которые почти полностью не поддаются нашему контролю. Поведенческий уровень относится к контролируемым аспектам человеческих действий, где мы бессознательно анализируем ситуацию, чтобы разработать направленные на цель стратегии, которые, скорее всего, окажутся эффективными в кратчайшие сроки или с наименьшим количеством действий. Рефлекторный уровень по словам Дона Нормана, «… дом размышлений, сознательной мысли, изучения новых понятий и общих выводов о мире.» Эти три уровня, хоть и классифицируются как отдельные измерения эмоциональной системы, связаны и влияют друг на друга, чтобы создать наш общий эмоциональный опыт в мире.

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

Интуитивный дизайн — «Относится к внешнему виду».

Этот уровень дизайна относится к ощутимым качествам объекта и тому, какие чувства они вызывают у пользователя/наблюдателя. Например, фамильные старинные часы не имеют больше возможностей или функций, определяющих время, чем маленькие, безликие часы каминной полки, но интуитивные (глубоко укоренившиеся, бессознательные, субъективные и непроизвольные чувства) качества отличают эти два объекта в глазах владельца. Большая часть времени, затраченного на разработку продукта, теперь посвящена интуитивному дизайну, поскольку большинство продуктов в определенной группе (например, горелки/фонарики, чайники, тостеры и лампы) имеют тенденцию предлагать один и тот же или аналогичный набор функций, поэтому внешние аспекты помогают отличить продукт от конкурентов. То, что мы тут подразумеваем, — это «брендинг», а именно акт различения одного продукта от другого, для чего применяют не преимущества, которые они предлагают пользователю, а используют взгляды, убеждения, чувства пользователей и то, что они хотят чувствовать, чтобы вызывать такие эмоциональные реакции.

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

Поведенческий дизайн — «… имеет отношение к удовольствию и эффективности использования».

Поведенческий дизайн, вероятно, чаще всего называют удобством использования (юзабилити), но эти два термина в основном касаются практических и функциональных аспектов продукта или всего того, что мы можем использовать в нашей среде. Поведенческий дизайн (мы будем использовать этот термин вместо юзабилити с этого момента) заинтересован, например, в том, как пользователи выполняют свою деятельность, насколько быстро и точно они могут достичь своих целей и задач, сколько ошибок пользователи делают при выполнении определенных задач и насколько хорошо продукт учитывает как опытных, так и неопытных пользователей. Поведенческий дизайн, пожалуй, легче всего тестировать, поскольку уровни производительности можно измерить, когда физические (например, ручки, кнопки, рычаги, переключатели и ключи) или используемые части объекта будут изменены. Например, кнопки, ответственные за две отдельные операции, могут располагаться на разных расстояниях друг от друга, чтобы проверить, сколько времени потребуется пользователю для выполнения двух задач последовательно. В качестве альтернативы, частота ошибок может быть измерена с использованием той (тех) же манипуляции(ий). Примеры опыта на поведенческом уровне включают удовольствие, получаемое от возможности найти контакт и немедленно позвонить на мобильном телефоне, а также легкость печатания на клавиатуре компьютера, сложность ввода на маленьком сенсорном устройстве, например, iPod Touch и наслаждение, которое мы чувствуем при использовании хорошо продуманного контроллера компьютерной игры (например, по моему скромному мнению, панель управления N64). Поведенческий уровень в основном относится к эмоциям, которые мы испытываем в результате выполнения или невыполнения наших целей. Когда продукты/объекты позволяют нам выполнять свои задачи с минимальными трудностями и небольшими сознательными усилиями, эмоции, скорее всего, будут положительными. Напротив, когда продукты ограничивают нас, заставляют нас менять или корректировать наши цели в соответствии с их ограничениями или просто вынуждают нас быть пристально внимательными во время использования, мы более склонны испытывать опыт негативных эмоций.

Рефлективный дизайн — «… рассматривает рационализацию и интеллектуализацию продукта.

Могу ли я рассказать историю об этом? Обращена ли она к моей самооценке, к моей гордости?»  Это самый высокий уровень эмоционального дизайна; представляющий сознательный уровень мысли, где мы сознательно приближаемся к дизайну; взвешивая свои плюсы и минусы, судя по нашей более нюансной и рациональной стороне и извлекая информацию, чтобы определить, что это значит для нас как индивидуума. Рефлективное мышление позволяет нам рационализировать информацию внешней среды, чтобы влиять на поведенческий уровень. Возьмем, например, умные часы (smartwatches)/ «Исследователи Jaewon Choi и Songcheol Kim из Корейского университета изучили намерения пользователей пользоваться умными часами по двум основным факторам: восприятие пользователем устройства как технологического новшества и как роскошного модного продукта. Взгляд пользователей на умные часы в качестве технологической инновации связан с их восприятием полезности устройства и простоты использования (поведенческий уровень). С другой стороны, взгляд пользователей на умные часы как на роскошный модный продукт связан с их восприятием того, насколько они будут радоваться часам, и с уровнями самовыражения, которые им предоставит устройство, то есть способность выражать себя и улучшить свой имидж. И наслаждение, и самовыражение зависит от интуитивного уровня («Выглядят ли часы красиво?»), но также и от рефлекторного уровня («Что подумают мои друзья, когда увидят меня в этих часах?»). Рефлективный уровень взаимодействует с последствиями поведенческого уровня — пользователи могут смириться с трудностями и недостатками в удобстве использования умных часов, потому что они считают, что они получат другие, нефункциональные преимущества от него. Первая версия умных часов Apple имела множество функциональных недочетов и проблем юзабилити, но это не помешало компании получить второй по величине мировой доход в часовой индустрии в течение первого года продажи!

В заключение

Здесь мы представили три уровня дизайна Дона Нормана: интуитивный, поведенческий и рефлекторный. Интуитивный уровень дизайна относится к первому впечатлению от дизайна, как с точки зрения восприятия пользователем продукта, так и с точки зрения чувств, которые возникают у пользователя из-за продукта. Поведенческий уровень относится к опыту использования продукта. Мы часто думаем об этом уровне, когда мы думаем о пользовательском опыте. Рефлекторный уровень относится к размышлению пользователя о продукте, как до, во время, так и после использования. Все три уровня объединяются, чтобы сформировать весь опыт продукта.

Ниже следует идеальное видео: три способа хорошего дизайна делают нас счастливыми от Дона Нормана

Ссылки и где узнать больше

Choi, J., & Kim, S. (2016). «Являются ли умные часы IT-продуктом или модным продуктом? Исследование факторов, влияющих на намерение использовать умные часы.» Компьютеры в поведении человека, 63, 777-786.

Оригинал статьи: https://www.interaction-design.org/literature/article/etch-a-sketch-how-to-use-sketching-in-user-experience-design

Билл Бакстон, пионер из Канады в области взаимодействия человека и компьютера и главный дизайнер Microsoft Research, считает, что в разработке программного обеспечения отсутствует «процесс проектирования», который помогает разработчикам UX получить четкость в отношении своих проектных решений до создания системы. Исходя из этого, Бакстон и его коллеги написали Sketching User Experiences: Getting the Design Right and the Right Design, 2007.

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

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

— Билл Бакстон

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

 

Преимущества эскизов

В частности, эскизы могут помочь вам в процессе проектирования следующими способами (Greenberg et al., Стр. 4):

• Более открыто и творчески думать о своих идеях
• Создавать шикарные идеи, не беспокоясь об их качестве
• Изобретать и исследовать концепции, быстро фикируя идеи
• Фиксировать идеи, с которыми вы сталкиваетесь
• Обсуждать, критиковать и делиться идеями с другими
• Выбирать стоящие идеи
• Накапливать свои идеи для последующего размышления
• Получать удовольствие при разработке

Это эскиз?

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

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

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

— Билл Бакстон

Эскизы против прототипов, сражайтесь!

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

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

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

«… хотя дизайн очень важен, его недостаточно. Дизайн — это один, хотя и важный элемент, один из компонентов, необходимых для развития успешных, подходящих и ответственных продуктов».

— Билл Бакстон

Author/Copyright holder:Jorge Gonzalez. Copyright terms and licence: CC BY-SA 2.0

Эскизы и прототипы по-разному применяются в проектной воронке. Адаптировано от Билла Бакстона, опыт пользователя Sketching: получение права на дизайн и правильный дизайн, 2007.

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

Author/Copyright holder: Jose Rojas and Interaction Design Foundation. Copyright terms and licence: CC BY-NC-ND

Конструкционная воронка иллюстрирует использование эскизов для определения правильной конструкции, а также применение методов юзабилити для ее усовершенствования. По мере увеличения инвестиций (красная стрелка) вы теряете возможность вносить существенные изменения в выбранный проект. Адаптировано от Билла Бакстона, Bill Buxton Sketching User Experiences: Getting the Design Right and the Right Design, 2007.

Получение правильного дизайна

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

Author/Copyright holder: Jose Rojas and Interaction Design Foundation. Copyright terms and licence: CC BY-NC-ND

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

Адаптировано от Билла Бакстона, Sketching User Experiences: Getting the Design Right and the Right Design, 2007.

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

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

Более того, все отзывы коллег и пользователей будут направлены только на то единственное решение, которое вы представите. Это обстоятельство может еще больше дезориентировать вас, оставит без альтернативных возможностей. Кроме того, клиенты относятся предвзято к презентации одного проекта или концепции. Они могут отреагировать сдержано и проявить меньше заинтересованности, чем при наличии возможности выбора из нескольких вариантов дизайна (Tohidi et al., 2006).

«… дизайн — это отличная дисциплина. Он включает в себя уникальные навыки, которые имеют решающее значение для формования новых технологий […] в форму, которая служит нашему обществу и отражает его ценности. Это отнюдь не роскошь, информированный дизайн имеет важное значение с технической, экономической и культурной точек зрения ».

— Билл Бакстон

Достижение правильного дизайна

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

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

Author/Copyright holder: Jose Rojas and Interaction Design Foundation. Copyright terms and licence: CC BY-NC-ND

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

Bill Buxton Sketching User Experiences: Getting the Design Right and the Right Design, 2007.

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

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

Author/Copyright holder: Jose Rojas and Interaction Design Foundation. Copyright terms and licence: CC BY-NC-ND

Полный обзор роли дизайна, юзабилити и других областей бизнес-предприятия в цикле разработки продукта. Адаптировано от Саула Гринберга, Sheelagh Carpendale, Николая Марквардта и Билла Бакстона, Sketching User Experience: The Workbook, 2011.

ABC’s Sketching

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

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

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

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

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

Author/Copyright holder: Jose Rojas and Interaction Design Foundation. Copyright terms and licence: CC BY-NC-ND

Используйте вариации осанки, эмоции лица и объекты для передачи широкого спектра действий и ситуаций. Адаптировано от Саула Гринберга, Sheelagh Carpendale, Николая Марквардта и Билла Бакстона, Sketching User Experience: The Workbook, 2011.

Улучшение эскиза: аннотации, стрелки и заметки

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

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

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

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

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

Author/Copyright holder: Yandle. Copyright terms and licence: CC BY-SA 2.0

Аннотации, стрелки и заметки увеличивают коммуникативную силу ваших эскизов.

Методы эскизов

Вы также можете использовать эскиз, как метод сбора информации. Используйте эскизы для «захвата» идей и / или проектов, с которыми вы сталкиваетесь в своей повседневной деятельности. Добавьте их в свой банк знаний, чтобы ремикшировать, влиять, вдохновлять или управлять своими идеями в разных и, возможно, неожиданных и инновационных направлениях. Чтобы помочь вам в этом процессе, мы приводим ниже два простых подхода к сбору виртуальных и реальных проектов.

1. Начертание эскиза

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

Author/Copyright holder: Espen Klem. Copyright terms and licence: CC BY 2.0

Определите суть объекта, дизайна или действия, которое вы собираетесь сделать

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

2. Отбор проб с помощью камер

Цель этого метода — использовать неподвижные фотографии и видео для отображения некоторых особенностей мира. Вы можете применить эту методику во время своих еженедельных покупок в продуктовых магазинах, при поездке на работу, или, когда вы встречаетесь с друзьями на ужин. Широкое распространение смартфонов облегчает эту задачу. «Захватывайте» объекты, проекты и действия, которые радуют, вдохновляют и раздражают вас.

Запись неудачных проектных усилий

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

Запись успешного проекта

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

Взять с собой

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

Ссылки и где узнать больше

Bill Buxton Sketching User Experiences: Getting the Design Right and the Right Design, 2007.

Саул Гринберг, Sheelagh Carpendale, Николай Маркардт и Билл Бакстон, Sketching User Experience: The Workbook, 2011

Tohidi, M., Buxton, W., Baecker, R. & Sellen, A., «Правильный дизайн и дизайн»: тестирование многих лучше, чем одно из конференций ACM-SIGCHI по человеческим факторам в вычислительных системах (p 1243-1252), 2006: http://www.billbuxton.com/rightDesign.pdf

Дизайн, ориентированный на конверсию (ДОК) существует, чтобы помочь дизайнерам создать пользовательский интерфейс, который управляет единой бизнес-задачей.

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

Оригинал статьи: https://www.interaction-design.org/literature/article/the-seven-simple-principles-of-conversion-centred-design-ccd-and-how-to-use-them

И наоборот, ДОК позволяет легко определить, когда дизайн не увенчался успехом, поскольку он не в состоянии сыграть свою роль в преобразовании посетителей в клиентов. Как и во всем, ДОК — это гибрид искусства (визуальный, UX и контент-дизайн) и статистики (измерение и анализ результатов).

Оли предлагает использовать 7 принципов, которые, по его словам, являются основой для создания ДОК для ваших проектов:

• Внимание! Важно использовать на сайте элементы, привлекающие внимание
• Контрасты
• Направление движения
• Использование большого количества «белого» (свободного) пространства
• Срочность и ограниченность во времени
• Тестирование перед покупкой
• Отзывы (социальное доказательство)

Давайте рассмотрим их подробно и с некоторыми примерами.

7 принципов ДОК

Первый принцип — Внимание

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

Что вы делаете в ДОК? Создаете нечто, на что необходимо кликнуть. А для того, чтобы на это кликнуть, нужно, чтобы кнопка была большой и интересной. Если это регистрация, особенно обратите внимание на этот факт.

Примеры элементов (кнопки социальных сетей):

Author/Copyright holder: Free Stock Images. Copyright terms and licence: CC BY 2.0

Второй принцип ДОК — Контраст

Поместите большую красную кнопку на ярко-красный фон. Что происходит? Она становится неотличимой от фона.

Что важно в ДОК? Не цвет, который вы используете имеет значение, а контрастность фона.

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

Author/Copyright holder: Kwamikagami. Copyright terms and licence: CC BY-SA 4.0

Третий принцип ДОК – Направленность действия

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

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

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

Author/Copyright holder: Pixabay. Copyright terms and licence: Free to use

Четвертый принцип ДОК — Использование большого количества свободного пространства

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

Нет лучшего примера мощного использования свободного пространства, чем главная страница Google.

Пятый принцип ДОК – Срочность и ограниченность во времени

Если вы хотите, чтобы люди сделали что-то здесь и сейчас, вы должны дать им повод сделать это. Психологи утверждают, что вы можете заставить людей действовать, ограничивая время принятия решения. Вы можете сделать это либо за счет нехватки ресурсов — «Только 7 камер по этой цене!», либо ограничивая во времени — «Осталось 23 минуты, чтобы заказать доставку на завтрашнее утро!».

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

Как вы можете видеть на этом снимке с сайта Amazon —  эта специальная цена действует ограниченное количество времени, и уже заказано 35% товара. Сообщение дает понять: сейчас или никогда!

Author/Copyright holder: Unknown. Copyright terms and licence: Fair Use

Шестой принцип CCD — Тестирование перед покупкой

Если вы когда-либо были в супермаркете, то вам предлагали образец продукта. Вам предложили этот образец не из щедрости производителя. Это поможет вам принять решение купить продукт, если вам это понравится. Да, невозможно дать кому-то глоток Колы или кусочек сыра он-лайн, но вы можете все равно использовать эту идею, даже в цифровом исполнении. Например, бесплатная глава из книги или 10 минут учебного видео.

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

Вот пример из «The Reading Room», в котором даются для предварительного просмотра бесплатные главы продающихся там книг:

Author/Copyright holder: Unknown. Copyright terms and licence: Fair Use

Седьмой принцип ДОК – Отзывы (социальное доказательство)

Завершающим аккордом для заключения сделки является то, что посетитель доверяет вам достаточно, чтобы стать клиентом. Одним из простейших способов помочь создать это доверие — предоставление «социального доказательства», которое представляет собой отзывы других клиентов и посетителей о том, как они оценивают ваши продукты или услуги.

Они могут  быть представлены в виде «звездных» рейтингов (например, в приведенном выше примере для чтения) или полных отзывов, подобных приведенным ниже от «Legal and General» (страховщик):

Author/Copyright holder: Legal & General. Copyright terms and licence: All rights reserved Img source

Также хорошо для понимания использовать (как в примере выше) небольшое объяснение с рекомендацией.

Пример ДОК в действии — Wistia.Com

Давайте рассмотрим страницу Wistia и посмотрим, какие правила ДОК они используют:

Фраза «Создать учетную запись» полностью инкапсулирована, и она явно контрастирует с фоном. На экране вообще не так много выбора, и это дает много свободного места и четко направляет пользователя: заполните форму, пожалуйста. Они также предлагают опцию «попробовать перед покупкой»: «2-недельная бесплатная пробная версия … убедитесь, что вас все устраивает, прежде, чем платить нам десять центов».

Фактически, единственное, чего не хватает —  это отзывы.

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

Почему мы выбрали Wistia для этого примера? HubSpot выбрал его как лучшую целевую страницу 2015 года.

Взять с собой.

ДОК — это новая концепция дизайна, а Оли Гарднер из Unbounce — ее ведущий практик. Однако цель ДОК не нова. Владельцы веб-сайтов и компании ищут конверсии, это задача номер один, которую нужно решить. Несмотря на то, что ваши проекты по-прежнему должны нравиться вашим пользователям, важно также, чтобы они решали реальные бизнес-проблемы. Если этого не будет, никто не захочет платить за них.

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

Рекомендации

Hero Image: Author/Copyright holder: Hubspot. Copyright terms and licence: All rights reserved. Img

Хотите услышать рассказ о ДОК (Conversion Centered Design) из уст самого Оли Гарднера?

Найдите его здесь: http://www.shutterstock.com/blog/the-7-principles-of-conversion-centered-design-for-landing-pages

Хотите изучить лучшие целевые страницы 2015 года?

Найдите целевые страницы здесь: http://blog.hubspot.com/marketing/landing-page-examples-list