Ответ
6 ошибок в UX дизайне и как их исправить Опции темы
Старый 20.06.2016, 10:31
  #1
Nataly
 
Регистрация: 29.07.2014
Сообщений: 474

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

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

Что такое UX на самом деле?

Если вы читаете эту статью, то, скорее всего, вы знаете, что UX расшифровывается как опыт пользователя. Согласно Google Trends, интерес к пользовательскому опыту неуклонно растет на протяжении многих лет:





Недостаточно просто знать, что нужно оптимизировать пользовательский опыт, также важно понимать, как это правильно сделать. Первый шаг - понять основные принципы UX. К сожалению, существуют споры вокруг них. Вот пять UX принципов, которых рекомендует придерживаться Jordan Julien из Hostile Sheep Digital Experience Lab:

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

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

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

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

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

Leo Frishberg из Phase II, с другой стороны, описывает три принципа UX, изначально представленные Римским инженером, который жил в 1-ом веке до нашей эры:

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

Venustas —красота или восторг;

Firmitas — твердость или постоянство;

Utilitas — полезность или удобство;

Мы можем легко свести эти три принципа в BTU модель: Business (удобство), Technology (обоснованность) и User (восторг). Как только вы обратитесь к каждой из этих областей, вы сможете достичь уровня ясности, при котором будете применять минимум ресурсов для получения максимальной прибыли.

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

В то время, как разные эксперты используют разные слова для определения UX, большинство говорят одно и то же:

• Проведите UX исследования для определения точек трения.

• Ищите возможности для уменьшения отвлекающих элементов.

• Ищите возможности для добавления ясности.

• Ищите возможности для улучшения релевантности.

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

Какая разница между UX и UI?

Я часто вижу, что UX и UI (пользовательский интерфейс) используются как синонимы. Это позор, поскольку это два совершенно разных понятия. Вот как Don Norman и Jakob Nielsen из Norman Nielsen Group описывают разницу между ними:

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

Таким образом, интерфейс пользователя является лишь небольшой частью UX в целом.





Ошибка #1: Создание дизайна «под себя»

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

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

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

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

Без тестирования юзабилити и других видов исследования конверсий на сайте вы выбрасываете деньги на ветер. В лучшем случае, вы делаете грамотные прикидки о UX. Вот что говорит об этом Adam Fairhead из Fairhead Creative:

«Пользователям iPhone было нелегко пользоваться клавиатурой, когда был запущен iOS7. И это возмутило большинство из них, потому что пробел был слишком мал и неудобен. Позже, конечно, Apple исправил это в последующих релизах iOS. Но для того выпуска был нанесен серьезный ущерб.

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

Исправление

• Проведите количественные исследования с целью выявления проблемных областей. Где пользователи уходят? На что они тратя много времени? На каких страницах они нажимают кнопку «Назад»?

• Проведите качественные исследования для определения причины происходящего. Почему пользователи уходят? Почему они «зависают» на странице? Зачем им нужна кнопка «Назад»?

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

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

Ошибка № 2: Креативность в ущерб ясности

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

Почему? Потому что многие дизайнеры (и оптимизаторы) жертвуют понятностью в пользу красоты. Как подтверждает Adam, ясность должна иметь приоритет над креативностью:

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

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

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

Исправление

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

• При проведении тестирования сайта пользователями, попросите их выполнить основные шаги воронки конверсии (например, войти в личный кабинет, найти продукт Х, добавить продукт Х в корзину). Каким путем они идут? Как он отличается от намеченного пути? Почему?

• Где пользователи испытывают сомнения? Это указывает на то, что на сайте есть непонятные места. Человек комфортно себя чувствует, зная точно, что произойдет, после совершения им того или иного действия. Если пользователи не уверены, они, вероятно, будут колебаться.

Ошибка #3: Непонятная навигация

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

Это более распространено, чем вы думаете. В попытке заставить пользователей совершить наиболее значимые действия, оптимизаторы бомбардируют их призывами к действию. Вот скриншот, который я взял от Neil Patel из Quick Sprout:





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

Исправление

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

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

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

Ошибка № 4: Игнорирование прототипов

Эта ошибка нарушает принцип интуитивной понятности. Скорее всего, вы знакомы с некоторыми прототипами. Например, вот три случайных сайта из Landingfolio:





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

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

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

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

Прототипы делают пользовательский опыт простым. Элементы сайта находятся там, где пользователь ожидает их увидеть на основе прошлого опыта взаимодействия с подобными сайтами. Почему это важно? Как объясняет Heydon Pickering из The Paciello Group, сложность - злейший враг UX:

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

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

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

Пример: The Norman Door

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

Всякий раз, когда вы позоритесь, надавливая на дверь, которую нужно тянуть на себя или дергает за дверь, которая открывается «от себя», вы сталкиваетесь с примером Norman Door. Недавно Vox обратился к YouTube, чтобы объяснить это более подробно...



В видео Don рассказывает немного о понятности:

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

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

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





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

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

Luke Wroblewski из Google предлагает объяснение тому, почему «Будь проще, дурачок» может быть таким сложным советом:

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

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

Исправление

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

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

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

Ошибка № 5: Предположение о том, что те же правила применимы для мобильной версии сайта

Эта ошибка нарушает принцип релевантности. Я не должен говорить вам, что потребление мобильного контента возрастает:





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

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

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

3. Чем меньше кликов, тем лучше. Как отмечает Luke, иногда лучший пользовательский интерфейс – это его отсутствие. Чем меньше кликов вы требуете от пользователей, тем лучше. Зачем заставлять пользователей открывать множество страниц, если можно сжать все в одно окно?





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

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

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

Итак, мобильный UX отличается от UX на ПК. Черт возьми, UX на iPhone может отличаться от UX на Android. Не думайте, что результаты исследований и тестов можно обобщить на всех устройствах.

Исправление

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

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

• Обеспечение качества является ключевым моментом. Протестируйте UX на всех устройствах. Где возникает трение? Страница медленно загружается? Возможно, что-то загружается некорректно? Изображения не подгружаются? Возможно, картинки слишком большие? Легко ли кликать на ссылки?

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

Ошибка #6: Пренебрежение производительностью

Эта ошибка нарушает принцип проведения исследования. Когда вы думаете о UX, я готов поспорить, что одна из последних вещей, о которой вы заботитесь - это производительность сайта. Это печально, потому что, как объясняет Brad Frost из Brad Frost Web, это может оказывать большое влияние:

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

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

Только от нас зависит, как расставить приоритеты в работе наших проектов, чтобы лучше обслуживать пользователей».

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

Если пользователи получают ошибки, что-то сломалось с вашей стороны. Либо сам сайт (например, проблемы с сервером) либо UX (например, люди заканчивают свой путь там, где не должны этого делать).

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

Исправление

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

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

Заключение

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

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

1. Создавайте дизайн для реальных пользователей, а не для себя или идеальных потенциальных клиентов.

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

3. Не забрасывайте пользователей призывами к действию или не внедряйте «новую фишку» без тестирования юзабилити.

4. Применяйте существующие прототипы в отрасли, используя их в своих интересах. Простота - это главная сила.

5. Мобильный опыт – это совершенно другой зверь. Мобильный UX отличается от UX на ПК. UX на iPhone может даже отличаться от UX на Android. Действуйте соответственно.

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

Ответ
 
 

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Логический конец: как избежать ошибок в UX дизайне Nataly Статьи 0 21.03.2016 21:22
Как избежать 9 грубейших SMM ошибок annasty Статьи 0 24.09.2014 10:44
Как найти и исправить 404 ошибку в метрике Google annasty Сервисы 0 24.08.2014 10:28
Помогите исправить ошибки на сайте kink Работа 3 12.05.2014 04:01
15 распространённых ошибок пользователей WordPress stomatolog Хостинг 6 02.02.2013 11:45

Метки
ux дизайн, аудитория, конверсии, опыт пользователя, трафик


Здесь присутствуют: 1 (пользователей: 0, гостей: 1)
 
Опции темы

Быстрый переход


Текущее время: 04:32. Часовой пояс GMT +3.