10 юзабилити преступлений, которых вы не должны совершать


Содержание материала:

10 критериев юзабилити сайта

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

1. Просто ли пользоваться вашим сайтом?

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

2. Знает ли пользователь, что делать?

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

3. Говорите ли вы на языке пользователя?

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

4. Консистентен ли ваш сайт?

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

5. Заставляете ли вы запоминать что-либо?

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

6. Легко ли управлять перемещением по сайту?

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

7. Помогаете ли вы избегать ошибок?

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

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

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

9. Помогает ли… ваша помощь?

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

10. Растет ли ваш сайт вместе с пользователями?

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

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

Что такое юзабилити или 7 основных правил юзабилити сайта

Приветствую тебя, Искатель драгоценного клада «Юзабилити сайта»! С помощью этой статьи ты станешь на пару шагов ближе к достижению своей цели – получению представления о юзабилити, а заодно получишь максимально понятные ответы на вопросы: Что такое юзабилити, Зачем тебе это знать, Почему этот параметр считается важным, Как он влияет на конверсию и Какие действия можно предпринять для улучшения твоего сайта. Итак, погнали навстречу приключениям!

ЧТО такое юзабилити?

Итак, что такое юзабилити ? Юзабилити – это качественный показатель простоты и удобства использования сайта.

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

Юзабилити веб сайта оценивается по 5 основным качественным компонентам:

  1. Ориентация: насколько просто новым посетителям веб-сайта совершать элементарнейшие действия, т.е. не мешают ли им дизайн и кукуева туча всплывашек, аддонов, рекламы и видюхи в режиме автоплей.
  2. Эффективность: насколько быстро юзер может ориентироваться на сайте и совершать необходимые ему действия.
  3. Запоминаемость: насколько легко будет юзеру сориентироваться на сайте после продолжительного отсутствия на сайте.
  4. Ошибки: количество ошибок, совершенных посетителем сайта, способы ликвидации этих лагов и простота в устранении последствий этих ошибочных действий.
  5. Удовлетворенность: субъективная степень «довольности» юзера, эмоциональное восприятие сайта: совокупность информации+дизайна+навигации+отображения в браузере.

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

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

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

Полезность сайта — обладает ли сайт ответами на ваши вопросы.

Юзабилити — насколько легко и удобно управлять сайтом.

Практичность сайта = юзабилити + полезность.

ПОЧЕМУ юзабилити так важно?

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

Тенденция видна? Посетитель ни за что не будет читать мануал (инструкцию по использованию навигации сайта, которой в реальности и нет) или проводить много времени, пытаясь разобраться в интерфейсе. Вокруг него много сайтов такой же тематики, поэтому юзер будет руководствоваться своими первобытными инстинктами: он покинет страницу, т.к. сбежать с места неизвестности-опасности-дискомфорта – это первое желание спасти себя, чувствуя сложность в чем-то. Просто запомни одно простое правило — первое правило электронной коммерции: если пользователь не может найти товар – он не сможет его купить.

Опираясь на описанные выше принципы юзабилити, ученые выделили 7 основных правил юзабилити сайта:

  1. Гарантии надежности. Вкладка «О компании», контактные данные в хедере, сертификаты, адрес офиса, отзывы клиентов, кейсы, банковские реквизиты – всё это дает нелишнее доказательство посетителю, что компания имеет статус и вполне компетентна в своей сфере деятельности.
  2. Кнопка Поиска. Помимо логотипа, второй по важности элемент для сайта. Кнопка «Поиск» — это первый помощник посетителя и лучший друг на любом сайте. Как минимум – если юзер в течение первых 2 секунд уже нашел эту кнопку, он чувствует себя в безопасности и уровень его напряженности и тревоги к твоему сайта резко спадет.
  3. Навигация («хлебные крошки»). Правило, согласно которому юзер всегда должен иметь представление, где он находится: тема, раздел, номер страницы.
  4. Отображение сайта. Корректное отображение элементов страницы на различных устройствах снижает процент отказов посетителей сайта и увеличивает глубину просмотра, что, в свою очередь, напрямую влияет на показатель конверсии сайта.
  5. Простота использования сайта. Этот принцип состоит из мифов и легенд о том, как скрасить пребывание посетителей на сайте. Вот некоторые из этих идей: Правило 3 кликов, Правило 1 секунды, Правило перевернутой пирамиды, Закон близости элементов, Синдром утёнка.
  6. Дизайн. Минималистичный дизайн, без отвлекающих элементов, не мешающий посетителю воспринимать информацию. Стоит отметить, что дизайн и юзабилити сайта – это два показателя, которые очень часто схлестываются между собой, но давай пока что не будем разводить холивар на эту тему.
  7. Контент. Оформление и структура текста, логическая последовательность и оптимизация контента – всё это должно соответствовать определенным правилам, помогающим юзерам быстро найти необходимую информацию в куче букв. Специально для оптимизации результата этого показателя и была придумана такая профессия как копирайтер.

Помимо этих 7 общих правил существуют ещё несколько канонов, которые группируются в 3 огромных критерия аудита юзабилити сайта. Проводится аудит с целью выявления косяков и недочетов интернет-проекта, чтобы внести изменения и увеличить производительность интернет-ресурса. Более подробно я поведаю тебе в следующей статье, а пока после парусекундного перекура, погнали в дебри Юзабилити-джунглей глубже. Ещё глубже…

КАК повысить юзабилити сайта?

Ответ прост: провести аудит сайта, получить оценку юзабилити, внести изменения согласно показаниям, провести тестирование. Звучит легко. Но на самом деле это упорная работа. Тем не менее, не бойся, читатель, все эти 4 пункта вполне можно провести самостоятельно. И сейчас я немного расскажу тебе, как это можно сделать.

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

  1. Собрать группу из наиболее подходящих к ЦА человек (тут сделаю сноску, что С.Круг вот считает, что тестировать можно ваще что угодно на ком угодно);
  2. Дать группе задание на исполнение самых стандартных действий с сайтом;
  3. Наблюдать за действиями тестируемых, что у них получилось/не получилось сделать, с какими трудностями они столкнулись, что оказало влияние на их поведение (вебвизор, карта кликов, карта скроллинга).

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

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

КОГДА начинать работать над юзабилити сайта?

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

  1. Протестируй старый сайт прежде чем тестировать новый вариант сайта, т.к. это поможет тебе выявить сильные и слабые стороны предыдущей версии и не упустить их из виду при разработке новой версии.
  2. Проведи оценку сайтов конкурентов – это довольно-таки хороший (а главное – бесплатный!) способ получить конкурентоспособные данные, которые помогут тебе сделать СВОЙ сайт лучше и лучше ЧЕМ у конкурентов.
  3. Проведите полевое исследование, чтобы понять, как испытуемые ведут себя в их привычных условиях.
  4. Создай напечатанные версии интерфейсов сайта и протестируй их. Помни: чем меньше времени будет потрачено на корректировку этих интерфейсов, тем больше времени останется на внесение изменений после последующих тестирований.
  5. Найди корректировки, после внесения которых показатель юзабилити сайта становится лучше. По мере устранения ошибок и усовершенствования интерфейса, проводи тест уже не на бумаге, а на компьютере. И тестируй сайт после каждой новой правки.
  6. Проверь окончательный вариант сайта на соответствие с общепринятыми нормами юзабилити сайта и со своими предыдущими результатами тестирования.
  7. Проведи тестирование ЕЩЁ РАЗ напоследок, после того, как все-все-все правки были внесены, сайт уже начал свою «новую» жизнь. Потому что самые коварные проблемки могут появиться как раз после того, как появился «самый оптимальный» вариант интерфейса.

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

ГДЕ проводить юзабилити-тестирование?

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

Заключение

Итак, читающий, давай подытожим, что ты узнал о юзабилити:

  1. Юзабилити оценивает по 5 критериям: Ориентация пользователя, Эффективность его действий, Запоминаемость навигации, Ошибки в действиях пользователя, Удовлетворенность пользователя после посещения сайта, Полезность информации сайта;
  2. Показатель юзабилити важен потому, что если он низкий или отсутствует — твой сайт не принесет никакого результата от своего существования;
  3. 7 основных правил, повышающих юзабилити сайта: гарантии надежности, кнопка «Поиск», навигация («хлебные крошки»), отображение сайта, простота использования сайта, дизайн, контент;
  4. Чтобы улучшить показатели юзабилити, необходимо провести аудит юзабилити сайта;
  5. Основываясь на результате аудита, вносятся изменения в «ахиллесову пяту» сайта и запускается юзабилити-тестирование;
  6. Юзабилити-тестирование нужно проводить чем чаще, тем лучше: после каждых правок, пока результат не станет положительным по всем 5 критериям юзабилити;
  7. Для проведения тестирования достаточно «подопытного кролика», наблюдателя-контроллера процесса, бумажки с тестом/компьютера с сайтом и всё.

Бон аппети, читатель, переваривай информацию!

10 правил борьбы с плохим юзабилити

Вы решили всерьез заняться оптимизацией юзабилити, но не знаете, с чего начать? В таком случае стоит обратиться к практикам, проверенным временем. Так, например, можете взять за основу 10 базовых принципов, выделяемых Якобом Нильсеном (Jacob Nielsen). Следуя им, вы сможете создать по-настоящему дружелюбный пользовательский интерфейс.

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

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

1. Позаботьтесь об удобстве навигации

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

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

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

Выделение выбранного пункта навигационного меню

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

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

Thank You Page можно использовать в качестве инструмента, сообщающего о том, что цель клиента (будь то покупка электронной книги, регистрация в качестве участника вебинара или что-либо еще) достигнута.

Сайт The Berkshire company дает пользователю четкую обратную связь и возможность ознакомиться с навигационной цепочкой. Также стоит обратить внимание на заголовок страницы, не заметить который практически невозможно:

Клиенты MSC Industrial Supply Company, скачивающие брошюру со справочной информацией, могут следить за ходом загрузки благодаря специальному индикатору:

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

2. Найдите общий язык с вашими клиентами

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

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

Прекрасным примером того, как бизнес подстраивается под клиентов, является интерфейс медиаплеера iTunes, в котором использован предельно простой язык:

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

3. Предоставьте людям свободу действий

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

Рассмотрим четыре способа, которыми некоторые компании пытаются подтолкнуть людей к «правильному» решению:

Здесь стоит оговориться, что грамотно настроенное pop-up окно едва ли станет причиной негодования пользователя. Однако, если всплывающее окно на вашем сайте предлагает только один вариант действий, вы ступили на скользкую дорожку.

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

В полном соответствии с этим принципом, в pop-up окне компании Grainger непосредственно под призывом к действию («Join») располагается кнопка («No Thanks»), позволяющая отказаться от предложения:

Автоматически включающиеся видеоролики

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

Автоматически появляющийся онлайн-консультант

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

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

4. Будьте последовательны и придерживайтесь стандартов

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

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

Навигационная панель постоянно находится перед глазами посетителей сайта Sprint Business, что значительно облегчает процесс поиска необходимой информации:

А теперь взгляните на четыре сайта, каждый из которых имеет непосредственное отношение к американской корпорации Georgia-Pacific. Согласитесь, не слишком похоже на четыре элемента единой структуры:

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

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

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

Ниже представлен список ошибок, по которым вам следует нанести превентивный удар:

Неправильное заполнение лид-форм

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

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

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

Если целевая страница не имеет ничего общего с тем, что обещал Call to Action, пользователи будут сбиты с толку. Пример такого диссонанса между Landing Page и кнопкой призыва к действию вы можете видеть ниже:

CTA и посадочная страница компании Simply Business гораздо больше походят на звенья единой цепи:


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

Ошибки при использовании поискового окна

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

Топ-пост этого месяца:  Как делается подгонка текста для заполнения контейнера использование jQuery, JavaScript и SVG

Случайный уход с вашего сайта

Ваш веб-сайт изобилует ссылками на другие ресурсы? Не забывайте, что каждая подобная ссылка — лишняя дверь, через которую лиды могут покинуть воронку конверсии. Если вы не готовы отказаться от ссылок на сторонние ресурсы, сделайте так, чтобы при нажатии на них пользователи получали соответствующее уведомление («Вы покидаете наш сайт»). Таким образом, вы дадите возможность остаться на вашем сайте людям, которые не собирались с него уходить.

Ошибка при выборе CTA

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

6. Не заставляйте пользователей запоминать слишком большой объем информации

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

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

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

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

7. Разместите ключевые элементы так, чтобы их нельзя было не заметить

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

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

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

8. Не перегружайте интерфейс

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

На представленном ниже изображении вы можете видеть прекрасный пример сайта, созданного по всем канонам минимализма:

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

Посетителей сайта Basecamp встречает тот же белый фон и всего два призыва к действию (для постоянных клиентов и для «новичков»):

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

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

9. Сделайте сообщения об ошибках более человечными

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

Как вариант, вы можете взять пример с компании Bluegg, на сайте которой сообщения об ошибках имеют довольно оригинальный вид:

«Аaaaaaaaaaaa! Такой страницы не существует.
Не переживайте. Вы можете вернуться на домашнюю страницу, или остаться здесь и слушать козу, которая кричит как человек».

Страница ошибки 404 от TechCrunch в дополнение к вариантам дальнейших действий предлагает пользователю контент, который может быть ему интересен:

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

10. Предоставьте людям необходимую поддержку

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

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

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

Zendesk помогает пользователям сделать правильный выбор посредством всплывающих подсказок:

Заключение

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

10 мелких ошибок в дизайне, которые мы по-прежнему совершаем

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

10 мелких ошибок в дизайне, которые мы по-прежнему совершаем (Eugen Esanu на UXplanet.org)

Даже опытным дизайнерам свойственно ошибаться. Связано ли это с личным желанием переоткрыть Америку, смелостью апробировать собственные идеи и, чего уж тут, замахнуться на Вильяма нашего Шекспира… Царь я или не царь? (с) Однако есть принципы проектирования и дизайна, нарушение которых обнаруживает непрофессионализм и поверхностность исполнителя. Огульный нигилизм, нежелание познать теорию поведения человека или законов восприятия быстро низводит звезд с пьедестала. Фееричный, но неработающий дизайн — плохой дизайн (с). Поэтому мы решили вспомнить корни вместе со Стивом Кругом, автором легендарной книги Don’t make me think («Не заставляйте меня думать»).

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

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

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

Возвращение правила: «Не заставляйте меня думать» (Don’t make me think)

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

1. Мы не читаем, мы сканируем

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

Какие у нас есть приемы для улучшения такого сканирования и схватывания сути страницы на лету?

    • Используйте заголовки. Во-первых, они сразу дают понять, о чем этот кусок текста, и насколько он интересен пользователю без глубокого вчитывания. Во-вторых, в целом помогают понять, продолжать ли просматривать материал дальше или, грубо говоря, вам вообще не сюда.
    • Параграфы должны быть короткими. Длинные ленты без параграфов сложнее читать и труднее вычленять ключевые слова, все сливается. Вместо этого попробуйте разбить текст хотя бы на два параграфа, помещающихся на страницу. Вы увидите, как ориентироваться в тексте сразу станет легче.
    • Используйте буллиты. Практически все что угодно может стать списком для оформления буллитами. Допустим, у вас есть предложение с множеством запятых. Уверен, его можно превратить в перечень тезисов с буллитами, причем желательно с приемлемым расстоянием между строчками, чтобы они не сливались. Частить со всеми подряд списками не стоит, но прием работает.
  • Выделяйте ключевые термины и определения. Большинство тех, кто сканирует ваш материал ищет какие-то ключевые слова или фразы. Самое простое — выделить их жирным шрифтом, так их будет проще найти. И опять, же не злоупотребляйте выделениями, чтобы не превратить страницу визуально в тяжёлый и громоздкий текст.

2. Создавайте явные зрительные иерархии

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

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

3. Не изобретайте колесо

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

Прежде, чем мы пойдем дальше, мне важно сказать вам одну вещь:

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

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

4. Пользовательские инструкции «must die»

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

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

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

5. Нам всё равно как работает Ваш продукт

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

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

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

6. Люди не особо вдаются в Ваши подробности, им просто некогда

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

Почему так происходит? Жизнь проходит в постоянном стрессе и вызовах от окружающих нас обстоятельств, чтобы еще обращать внимание на эти приемы в виде тонировок, градиентов и прочих «пасхалок». Допустим, вы отец, и ваш ребенок кричит, потому что требует мороженого, собака лает, потому что ее кто-то позвал из открытой двери напротив, а вы в этот момент пытаетесь купить билет на экспресс, уходящий через 40 минут. В этот момент, как вы понимаете, люди не будут в восторге от ваших спецэффектов. А с другой стороны, их все-таки надо использовать, но только не в ущерб клиентскому сценарию. (добавим, что разные дизайнерские приемы добавляют шарма, не все должно быть только рациональным, но умеренным точно – прим.переводчика)

7. Не путайте фокус-группы с юзабилити-тестами

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

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

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

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

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

9. Не задавайте неправильные вопросы

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

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

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

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

  • Где я нахожусь?
  • Откуда мне начать?
  • Куда, черт возьми, они спрятали ________?
  • Что на этой странице самое важное?
  • Почему они это так называют?
  • Это реклама или часть страницы сайта?

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

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

. . .

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

Подписывайтесь на наш Телеграм, чтобы не пропустить выход новых полезных статей!


10 преступлений, ответственности за которые удалось избежать (или почти удалось)

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

10. Босоногий бандит

В 2010 году подросток по имени Колтон Харрис-Мур с помощью программы-симулятора научился самостоятельно управлять самолётом, но у него никогда не было соответствующей лицензии пилота. Ему удалось украсть самолёты, машины и лодки на сотни тысяч долларов, и всё потому, что он воровал босиком. Полиция часто находит людей по отпечаткам их обуви, но никому не приходило в голову завести картотеку босых ног. Мур знал, что пока он действует без обуви, ему может сойти с рук угон всех этих транспортных средств. Он получил прозвище «Босоногий бандит» и продолжал повторять свои кражи снова и снова. В 2010 году Мур наконец-то был пойман и отправлен в тюрьму, на тот момент ему было всего 19 лет. Он полностью отсидел свой срок и вышел под надзор в 2020 году.

История Босоногого бандита стала своего рода народной легендой. Во время интервью Мур сказал, что сожалеет о том, что сделал, тем более что он начал свою взрослую жизнь в реальном мире только в возрасте 20 лет. Мур сказал: «Я всегда был в лесах, в бегах или и то, и другое». Его история настолько интересна, что студия «20th Century Fox» заплатила 1,4 миллиона долларов, чтобы купить права на создание фильма о нём. К несчастью для грабителя, все эти деньги должны были пойти на выплату компенсаций жертвам его преступлений.

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

Секретная служба начала отслеживать эти поддельные долларовые банкноты, и её сотрудники подсчитали, что этот загадочный преступник за 10 лет, с 1938 по 1948 год, заработал не менее 5000 долларов. С учётом инфляции сегодня это около 90000 долларов. Одна из причин, почему было так трудно найти этого человека, заключалась в том, что он никогда не тратил больше, чем несколько фальшивых долларов в неделю, и никогда не использовал поддельные купюры в одном и том же магазине дважды. Мошеннику дали имя «Мистер 880» из-за номера его дела.

В 1948 году личность Мистера 880 была наконец-то установлена, им оказался Эмерих Юттнер (пользовавшийся псевдонимом Эдвард Мюллер). В свои 70 лет он был пожилым человеком и жил в маленькой квартирке. Юттнер не платил за её аренду, работая управляющим в своём многоквартирном доме, но у него не было большого дохода. Он использовал свои фальшивые деньги для покупки продуктов и предметов первой необходимости. Поскольку во всём остальном он был законопослушным гражданином, Юттнер провёл в тюрьме всего четыре месяца. Он стал легендой, и по мотивам его истории в 1950 году сняли фильм.

8. Двойняшки-похитители драгоценностей

Когда группа из трёх мужчин в масках спустилась с потолка универмага «Kaufhaus des Westens» в Берлине, это было похоже на сцену из фильма. Камеры видеонаблюдения записали, как воры похитили драгоценности на 6,8 миллиона долларов, после чего взобрались вверх по верёвке и растворились в ночи.

Это было почти идеальное преступление, за исключением одной крошечной детали. Один из воров уронил резиновые перчатки, которые были на нём. Полиция смогла извлечь из них каплю пота и определить ДНК. Единственная проблема заключалась в том, что ДНК принадлежала двум людям: близнецам-двойняшкам Хасану и Аббасу О. Хотя полиция и смогла сузить круг подозреваемых до двух человек, она не могла доказать, что в преступлении участвовал конкретный человек. По этой причине обоим удалось избежать тюремного заключения. Тем не менее, преступление не осталось совсем безнаказанным. Оба они находятся под пристальным наблюдением правоохранительных органов на всю оставшуюся жизнь.

7. Убийца Грин-Ривер

В течение 19 лет город Кинг Каунти в Вашингтоне страдал от загадочного «Убийцы Грин-Ривер». Он насиловал и убивал женщин в период с 1982 по 2001 год, и он так и не остановился, пока его не поймали на основании анализа ДНК и не предъявили обвинение в 48 разных убийствах.

Топ-пост этого месяца:  Как проверить релевантность страницы Инструкция

Власти арестовали Гари Риджуэя, но все, кто его знал, заподозрили бы Риджуэя в самую последнюю очередь. Он был ветераном Вьетнамской войны, который красил грузовики на автомобильном заводе. В свободное время он активно участвовал в церковной жизни и проповедовал Библию своим соседям. Он так удачно притворялся хорошим парнем, что был почти неотличим от Неда Фландерса из «Симпсонов». Никто никогда не заподозрил бы, что он живёт двойной жизнью. Несмотря на то, что Риджуэй предстал перед судом по 48 известным случаям убийства, сам он признался, что убил по меньшей мере 75 женщин. Он не был уверен в точном количестве, потому что потерял счёт.

6. Колдун из Мали

Иногда для того, чтобы стать так называемым «мастером мошенничества», достаточно найти настолько легковерную жертву, что она поверит в любую вашу фантазию. В 1995 году мужчина по имени Футанга Бабани Сиссоко из западноафриканской страны Мали отправился в Дубайский исламский банк за автокредитом. Он имел разговор с менеджером банка Мухаммедом Аюбом. Сиссоко был на высоте и после непродолжительной беседы пригласил менеджера банка на ужин. Когда Сиссоко оказался с Аюбом один на один, он стал утверждать, что на самом деле является колдуном, обладающим магическими способностями.

Он взял кучу денег и в потоке магического тумана исполнил волшебный сценический трюк – деньги удвоились на глазах поражённого менеджера. Этого оказалось достаточно, чтобы убедить менеджера банка выдать Сиссоко более 100 миллионов долларов. Менеджер полагал, что с помощью магии эти деньги удвоятся. Дальше – ещё безумнее. Сиссоко вылетел в Нью-Йорк и пришёл в CitiBank, где встретился с женщиной-кассиршей и убедил её присоединиться к их плану. Стремясь оказать содействие, женщина официально вышла за него замуж, чтобы помочь ему открыть счет в американском банке. Сиссоко перевёл на него 100 миллионов долларов США, а женщине в знак благодарности вручил 500 тысяч долларов.

Сиссоко начал жить как король. Он покупал вертолёты, гоночные машины и незаконно женился на десятках женщин. Он также давал миллионы на благотворительность. Каждый раз, когда его за что-нибудь арестовывали, он просто платил залог. И когда его в конечном итоге депортировали обратно в Мали, с ним обращались как с героем. Он был признан виновным в мошенничестве и приговорён к трём годам тюремного заключения, но его освободили в связи с избранием в члены парламента (в Мали члены правительства освобождены от уголовного преследования). Несмотря на то, что Сиссоко поймали, и все знают, что он виновен, он так никогда и не сидел за свои преступления.

5. Убийца своей семьи

Джон Лист был бухгалтером, который жил в особняке в Уэстфилде, штат Нью-Джерси, со своей матерью, женой и тремя детьми. Когда он потерял работу в 1971 году, ему было так стыдно, что он никому ничего не сказал. Каждое утро он выходил из дома, но вместо того, чтобы ездить на работу, он тайно сидел на вокзале, пил кофе и читал газеты весь день. Он украл деньги с банковского счёта своей матери, чтобы оплатить услуги, но он знал, что это не может длиться вечно. Вместо того чтобы встретить лицом к лицу свои проблемы или попытаться найти новую работу, он решил, что ему нужна коренная встряска. Лист перестрелял всю свою семью, после чего сделал себе бутерброд и начал дотошно вырезать себя из всех семейных фотографий. Он позвонил в школу своих детей, чтобы сказать, что они собираются в длительный отпуск, и оставил записку на телах членов своей семьи, объясняющую, почему он «должен был» это сделать.

Затем он исчез на 18 лет. В 1989 году художник-криминалист воссоздал облик Листа для эпизода программы «Разыскивается в Америке», и его лицо узнал один из соседей. Лист изменил своё имя на Роберта Кларка и переехал жить в Колорадо и Вирджинию. Он снова женился, нашёл новую работу и прожил удивительно нормальную жизнь. Его поймали и предали суду, а затем отправили в тюрьму на всю оставшуюся жизнь. Трагическая ирония всей этой истории заключается в том, что над лестницей висела люстра Тиффани стоимостью более 100000 долларов. Если бы Лист продал её, это решило бы все его финансовые проблемы, и его семья, возможно, была бы жива.

4. Инсайдерская работа

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

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

3. Ограбление с помощью пиццы и бомбы

10 общепринятых принципов дизайна и юзабилити

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

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

За основу взял статью самого Нельсона. Оригинал (правда весьма укороченный) тут:
http://www.nngroup.com/articles/ten-usability-heuristics/

Итак, 10 общепринятых принципов юзабилити. Рассмотрим их более подробно.

1. Видимость статуса системы.

Этот принцип означает, что пользователь ВСЕГДА должен знать, что происходит и на каком участке пути он остановился. Если это сложная регистрация, указывайте, что это 2 шаг из 3. Если что-то закачивается или работает какой-то скрипт – выводите % обработки. И т.д.

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

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

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

(цифры сам не проверял и не придумывал, взято с книги).

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

2. Связь между системой и пользователем.

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

Буквально пару дней назад я смотрел два сайта компьютерной тематики с довольно похожей структурой и дизайном. НО! Один был посвящен особенностям настройки операционной системы, а второй – компьютерные курсы для начинающих.
Как вы понимаете, это две совершенно разные аудитории, и фраза «кликните 35 строку в реестре» будет более чем понятна для аудитории первого сайта, 99% пользователей второго сайта повергнет в шок.

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

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

3. Пользовательское управление (свобода выбора)

Пользователь всегда должен контролировать ситуацию, так сказать держать руку на пульсе (ну или как минимум у него должно создаваться такое впечатление). Что это означает на практике? Например, при заполнении формы обязательно должна быть кнопка «очистить форму». Если форма предусматривает несколько шагов – пользователь должен вернуться на предыдущий шаг, или наоборот, по возможности – пропустить какой-то, чтоб попозже вернуться к нему.

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

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

4. Последовательность и стандарты.

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

Все дело в том, что кампания Микрософт в своих продуктах придерживается этого принципа (хотя часто и нарушает многие другие). У них во всех продуктах одни и те же иконки находятся в одних и тех же местах и выглядят одинаково.

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

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

(как видно в этом примере, все иконки совершенно одинаковые в Ворде, Экселе и PP. Осваивая какой-либо новый продукт компании Микрософт, минимум половина функций вам сразу будет понятна).

5. Профилактика ошибок.

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

Это касается и кнопок. Например, ПРИНЯТЬ, обычно делают крупнее и ярче, чем Очистить форму. Если вам что-то известно о вводимой информации – подсказывайте ее пользователю (формат телефона или код региона) и т.д.

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

6. Узнать проще, чем вспомнить.

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

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

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

7. Гибкость и эффективность использования.

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

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

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

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

8. Эстетический и минималистический дизайн

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

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

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

Точно так же, на сайте (или в программе, эти принципы универсальны), не стоит выводить пользователю ту информацию, которая может быть когда-нибудь ему понадобиться. Например, возьмем тот же Микрософтовский Ворд. Скажите, как часто вы пользуетесь функцией «навигатор» или в вставкой Дата-Время? А тем ни менее, эти кнопки всегда на виду в тулбаре (в зависимости от версии кнопки могут быть разными, но я уверен что если вы посмотрите на них, вы найдете минимум 40% иконок, которыми вы НИКОГДА не пользовались, и даже не знаете что они делают).

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

9. Помочь пользователю понять и исправить ошибку.

Скажите, что означает ошибка базы данных в строке 433? Или длинные жуткие ошибки в строке памяти LXR-XXX-5438645?
Все эти системные сообщения должны сохраняться в логах для администратора сайта/системы. Пользователю же пишите нормальным языком, в чем конкретно ошибка. Более того, пользователя по сути интересует только одно: виноват он или система? И можно ли что-то сделать?

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

Хотя все же такие серьезные ошибки встречаются все реже. Но другой вариант бесит еще больше – ты заполняешь довольно длинную форму, нажимаешь отправить и видишь красную надпись (или всплывающее окно) – внимательно заполните все поля, отмеченные звездочкой.
И снова ты сидишь и думаешь – какие поля? Какой звездочкой? Вроде бы я все заполнил, внимательно просмотрел… а потом оказывается что там номер телефона надо написать с пробелами, а не дефисом.

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

10. Помощь и документация

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

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

(а вот тут Сапа подкачала: ведь я нахожусь на конкретной странице – мои площадки, и есть ссылка, которая прямо кричит мне – СЮДА! Справка по ЭТОЙ странице. Но, увы, перекидывает меня на общий раздел хелпа).

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

Похожие статьи:

  • Идеи юзабилисту 2 Идеи для юзабилити страниц. Продолжение статьи «Идеи юзабилисту». 16. Постарайтесь сфокусировать внимание, а не рассеивать его. Иногда мы настолько сильно…

Покупки в интернете Обзор исследования: процесс покупки и оплаты он-лайн Недавно мне попалось обширное исследование, которое провели мои коллеги из UsabilityLab совместно с…

Юзабилити интернет-магазина Конференция: «Бизнес интернет-магазинов и онлайн-сервисов». Тема доклада: юзабилити интернет-магазинов: как не выкидывать деньги на ветер. Проходила: 27.10.2009 в Киеве. Скачать…

Создание кнопок и ссылок Создание кнопок для удобный интерфейсов Бывало ли у вас так, что вы посещали сайты, кликая на текст, который не являлся…

Понравилась статья? Подпишись на новые по E-mail

10 юзабилити преступлений, которых вы не должны совершать

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

Ответ «нет» есть в отчете Clicktale, компании из сферы веб-аналитики. Ее исследования показали, что длина страницы не имеет никакого влияния на вероятность скроллирования.

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

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

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

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

Пользователи перепроверяли свои данные, вводили правильно — и в результате выручка компании возросла на $ 300 млн. всего за год. А в первый месяц после нововведения продажи возросли на 45%. Заслуга принадлежит именно такому подходу к оформлению онлайн-заказа.

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

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

3 вопроса про юзабилити, которые нужно себе задать

Время чтения: 5 минут Нет времени читать? Нет времени?

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

Вопрос 1. Дизайн: красивый vs. некрасивый?

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

Конечно, в идеале лучше избавиться от всех противоречий и сделать красивым функциональное. Но красота — это такая странная вещь… Вот посмотрите:

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

У функционального дизайна есть несколько основных признаков, вот они:

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

  • На страницах коммерческого сайта, как правило, присутствует контент, который не напрямую, а косвенно влияет на положительное восприятие пользователем страницы. Имеются в виду элементы навигации, кнопки социальных сетей, форма заказа и пр. Пользователь должен сразу четко понимать, какой контент на странице является основным, а какой — дополнительным.
  • Используемые шрифты, иллюстрации, фон и т.д. — все это должно подчеркивать, выгодно «представлять» основной контент страницы.
  • Реклама, если она присутствует, не должна отвлекать пользователя от основного для данной страницы контента.
Топ-пост этого месяца:  Как полностью отключить REST API введенный в WP 4.4

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

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

  • Создайте для веб-страницы столько различных элементов, сколько сможете придумать.
  • Расположите все эти элементы в произвольном порядке.
  • В качестве фона используйте… да хоть розовые розы на розовом фоне.
  • Обойдитесь без элементов навигации.
  • Не забудьте про GIF-анимацию и изображения, мало связанные с тематикой веб-страницы, — этого добра должно быть много.

Вопрос 2. Точно ли пользователи воспринимают как полезное и удобное, то что вы таковым считаете?

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

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

Самый простой и эффективный способ проверить, удобно ли вашим пользователям то, что считаете удобным вы сами, — это провести А/В-тестирование.

Вопрос 3. А что вообще значит фраза «нужно экономить время пользователя»?

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

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

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

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

10 золотых правил юзабилити: как удвоить продажи на сайте?

ведущий специалист по поисковой оптимизации холдинга Ingate

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

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

Многие из вас наверняка не раз слышали такое понятие, как “дружественный интерфейс” (friendly interface), обеспечивающий пользователю максимально удобное взаимодействие с ресурсом за счет наглядных и понятных изображений, значков, меню, кнопок, подсказок и т.п. Так вот, интерфейс на исследуемом нами сайте совсем не подталкивает пользователей к совершению покупки. Какие конкретно ошибки есть на сайте и как я советую их исправить, вы как раз узнаете из проведенного мной аудита. Сразу замечу, что в вопросах юзабилити не всегда правильное решение единственно верное, и вполне может быть несколько способов устранения одной проблемы.

1. Анализ главной страницы сайта

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

1) Использование в шапке заголовка ссылки “Главная” излишне, так как она находится непосредственно под одноимённым пунктом основного меню:

Решение: Удалить лишнюю ссылку.

2) Заголовок H1 представляет собой некорректную фразу:

Пользователь может подумать, что фирма называется “Акриловые ванны”. Некоторых посетителей может оттолкнуть уже сам факт неграмотно построенного предложения.

Решение: Исправить эту фразу на более корректную, например, “Акватика — производство и продажа гидромассажных акриловых ванн”.

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

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

4) Перейдя по баннеру “Скидки здесь”, мы попадём на страницу, где должна находиться информация о скидках. Но самой информации там нет — есть лишь предложение узнать о скидках в розничных точках продаж. Кроме того, в блоке слева от текста находится баннер “Скидки здесь”, наличие которого излишне, так как мы и так уже находимся на странице, на которой должна быть информация о скидках.

Решение: Добавить информацию о скидках и убрать лишний баннер “Скидки здесь”.

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

Решение: Три больших баннера, которые идут ниже категорий ванн, объединить в один слайд-блок, как, например, изображенный на этом скриншоте:

Частоту смены слайдов необходимо снизить, а сам блок поместить под шапку. На место этих баннеров перенести блок текста “Покупая акриловые гидромассажные ванны в компании Акватика, Вы получаете:…”, который расположен внизу страницы. В этом блоке описаны преимущества компании, поэтому важно, чтобы пользователь увидел эту информацию, а далеко не каждый прокрутит такую длинную страницу до самого конца.

6) Блок “Популярные модели” находится на главной странице, что очень хорошо. Но он занимает слишком большое пространство, и, чтобы добраться до конца страницы, придётся долго прокручивать её вниз. В самих карточках используются звёздочки после слова “гидромассаж” и цены. При этом на самой странице нет никакого описания этих сносок:

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

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

2. Навигация

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

Решение: Расширить кликабельную область логотипа примерно до масштабов, выделенных на скриншоте зелёным:

2) На внутренних страницах сайта не используются так называемые “хлебные крошки” — элемент навигации, который показывает посетителю, на какой странице он находится и сколько разделов отделяет его от “корня”.

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

3) В основном меню отсутствуют такие полезные для пользователей пункты, как “Отзывы”, “Статьи”, “Новости”, “FAQ”.

Решение: Сделать главное меню с выпадающими подпунктами. Пункты “Магазины” и “Сервис-центр” сделать подпунктами “Контакты”. В пункт “О компании” стоит добавить подпункты “Новости”, “Сертификаты” (для большего доверия со стороны пользователей), “Отзывы клиентов”. В освободившиеся места меню можно вставить пункты “FAQ” и “Статьи”.

4) В дополнительном меню, расположенном слева от основного контента, названия многих пунктов дублируются. Этого следует избегать — каждый пункт должен иметь уникальное название, дающее возможность пользователю понять, о чём будет страница, на которую он попадёт, перейдя по ссылке. Пункты меню, выделенные красным на скриншоте, ведут на страницы подкаталога, на которых присутствует только одна модель, а остальные ячейки пустые. Пункт “Душевые” (выделен на скриншоте зелёным) ведёт на пустую страницу:

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

3. Шапка и футер

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

Решение: Указать адрес, телефон и слоган компании в шапке сайта. Если будет мало места, можно сдвинуть ниже заголовок. Также рекомендую разместить форму поиска на всём сайте.

2) Отсутствует “Корзина”, которая, безусловно, должна быть на сайте любого интернет-магазина.

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

3) В футере нет ссылок на полезные и важные для пользователя разделы сайта.

Решение: Добавить ссылки в футер — их наличие упростит пользователю перемещение, особенно на страницах с большой полосой прокрутки.

4. Карточка товаров

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

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

2) Меню на скриншоте с выключенным JavaScript не работает:

Решение: Переделать локальное меню на страницах карточек товаров так, чтобы оно работало и с выключенным JavaScript.

3) Не предусмотрены отзывы покупателей.

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

4) Кнопка “Заказать” не привлекает внимание, так как у нее слишком простой дизайн:

Решение: Изменить дизайн кнопки “Заказать” — сделать её более примечательной. Также советую реструктурировать страницы карточек товаров под общий шаблон сайта, так как сейчас они напоминают версии для печати.

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

Решение: Добавить блок похожих товаров с их мини-изображениями.

6) Отсутствует прямой возврат к разделу подкаталога.

Решение: Создать возможность возврата на предыдущую страницу.

5. Страница заказа

1) На странице заказа очень много информации, а её здесь должно быть минимум — только самое необходимое. Большие тексты, анкеты или громоздкие формы заказа могут отпугнуть потенциального клиента.

Решение: Пункты “Доставка” и “Установка” лучше объединить в один — это сэкономит место. Пункт “Как вы узнали о нас” советую перенести на страницу подтверждения заказа, чтобы он не отвлекал пользователя от оформления заказа. Пункт “Где оплатить” тоже желательно перенести на страницу подтверждения заказа — он хоть и содержит полезную информацию, но слишком большой, а пользователи наверняка, прежде чем начать оформлять заказ, уже выяснили всю необходимую контактную информацию.

2) Кнопка “Оформить заказ” сливается по внешнему виду с полями формы заказа и не привлекает внимание пользователя:

Решение: Изменить дизайн кнопки и сделать её более заметной.

3) При попытке заказать (перейти на страницу заказа) любую шторку из представленных на сайте вместо страницы заказа мы попадаем на пустую страницу:

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

6. Cтраница «Контакты»

Наличие страницы “Контакты” является обязательным для любого сайта интернет-магазина, и анализируемый сайт www.aquatika.ru не исключение. В нашем случае страница реализована достаточно грамотно и на неё имеется ссылка в основном меню.

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

Решение: Добавить на страницу “Контакты” форму обратной связи и поместить её в пустующую область слева от основного контента (примерная позиция выделена зелёным на скриншоте):

7. Cтраница видеопрезентаций

Видеоролики мы уже рассмотрели при анализе главной страницы, но они представлены на сайте не только в виде тех двух баннеров, поэтому я рассмотрю страницу видеопрезентаций подробнее (кроме перехода через баннер на неё ещё можно попасть с помощью пункта дополнительного меню “Презентация”):

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

Решение: Уменьшить габариты проигрывателя, чтобы он не вылезал за визуальную границу основной области страницы.

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

Решение: Удалить данный баннер. Вместо него можно разместить баннер со ссылкой на другой видеоролик с подписью либо просто рекламные баннеры. Как вариант можно второй ролик разместить ниже текущего ролика в основной области страницы. В таком случае баннер на него сбоку размещать уже не нужно.

8. Анализ форм на функциональность

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

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

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

2) В форме заказа отсутствуют сообщения об ошибках при неправильном заполнении поля и переходе на другое поле. Не поддерживаются маски ввода данных и автоматическое приведение данных к нужному формату (форматы для телефонов, адрес в виде “Страна — Область — Город — Адрес” и т.п.). Отсутствует механизм запоминания уже введенной информации и блокировка кнопки “Оформить заказ” до корректного заполнения обязательных полей формы:

Решение: Если какое-либо поле в форме заказа заполнено некорректно, справа от него должно появиться сообщение об ошибке, выделенное красным цветом. Нужно сделать маску ввода для телефона и желательно для Ф.И.О., а также организовать автоматическое приведение данных к нужному формату для поля “Адрес доставки”. До тех пор пока контактный телефон не будет корректно введён, кнопка “Оформить заказ” должна быть недоступна для нажатия.

9. Читабельность текста

1) Размер основного шрифта на сайте слишком мелкий, и от чтения быстро устают глаза. Текст слишком плотный, что затрудняет его чтение:

Решение: Увеличить размер шрифта и отступ между строками и между пунктами списков.

2) Текст едва различим на фоновых картинках:

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

10. Внешний вид

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

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

Для сайтов, так или иначе связанных с тематикой воды, наиболее подходящими являются светло-синий цвет фона и белый текст либо белый цвет фона и синий/светло-синий цвет шрифта. Такая расцветка привычнее и лучше всего ассоциируется с водой. Кроме того, когда в самом названии компании присутствует слово “вода” (например, как в случае с нашим сайтом — “Акватика”), такая расцветка улучшает запоминаемость названия.

Заключение

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

  1. Важно позаботиться о максимальном удобстве главной страницы для пользователя и помнить, что “встречают по одёжке”.
  2. Проследите путь клиентов от главной страницы до заполнения формы заказа. Устраните все возможные помехи на этом пути и сделайте его максимально коротким, чтобы пользователю не нужно было совершать лишних действий.
  3. Позаботьтесь, чтобы на любом шаге до оформления заказа у пользователя была возможность получить информацию о доставке, контактные данные и FAQ.
  4. Обязательно добавьте на сайт те элементы, без которых пользователю трудно сделать заказ (например, “хлебные крошки”, “Корзина”).
  5. Используйте социальные плагины — дайте возможность пользователям поделиться понравившимися товарами с друзьями в сети.
  6. Необходимо, чтобы пользователи получали всю необходимую информацию о товаре. При этом важно помнить, что слишком большие тексты хуже воспринимаются. Поэтому лучше выделить самое основное и разместить на карточке товара, а на дополнительную информацию дать ссылку для тех пользователей, кто хочет подробнее узнать о товаре.
  7. Проследите, чтобы никакие лишние элементы не раздражали пользователей и не мешали им выбрать товар и совершить заказ.
  8. Проверьте, на всех ли страницах текст легко читается. Сделайте подходящий фон, на котором слова не теряются, а также оптимальный размер шрифта и отступов между абзацами.
  9. Размещайте отзывы других покупателей о товаре — это существенно повысит доверие клиентов.
  10. Постарайтесь учесть при разработке дизайна сайта тематику фирмы. Правильно выбранные цвета помогут улучшить запоминаемость вашей компании пользователями.

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

10 критериев юзабилити сайта

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

1. Просто ли пользоваться вашим сайтом?

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

2. Знает ли пользователь, что делать?

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

3. Говорите ли вы на языке пользователя?

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

4. Консистентен ли ваш сайт?

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

5. Заставляете ли вы запоминать что-либо?

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

6. Легко ли управлять перемещением по сайту?

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

7. Помогаете ли вы избегать ошибок?

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

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

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

9. Помогает ли… ваша помощь?

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

10. Растет ли ваш сайт вместе с пользователями?

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

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

Добавить комментарий