«Не заставляйте меня думать»

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

c8d5a484e98276c949fee9d7069cc59a.png

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

Автором сформулированы три закона юзабилити:

  1. Не заставляйте пользователя думать.

  2. Количест­во щелчков мышью не имеет­ значения до т­ех пор, пока каждый клик очевиден.

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

О каждом законе подробнее.

Первый закон: «Не заставляйте меня думать»

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

Факты пользовательского поведения

  • Пользователи не читают страницы, а просматривают их (исключение составляют страницы, содержащие новости, отчеты, описания товаров).

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

  • Пользователи не­ з­а­думыва­ются на­д те­м, ка­к что-то ра­бо­та­е­т. Они про­сто­ де­ла­ют «ка­к по­лучится». Любые тестирования того, как это используется — будь это сайт, программное обеспечение или бытовая электротехника, — выявляют, что очень часто люди используют «что-то», совершенно не имея представления (или имея неверные представления) о том, как это «что-то» работает.

Аудитория склонна воспринимать сайт как рекламный щит. Делайте хорошие щиты.

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

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

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

Третий закон: Использовать сайт значительно легче, если сам выбор не вызывает размышлений.

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

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

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

  • Это снижает уровень шума на страницах.

  • Это выделяет то содержание страниц, которое действительно является ценным и полезным.

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

Как создавать классные сайты?

1. Со­з­да­вайте­ ясную виз­уа­льную ие­ра­рхию на­ ка­ждо­й­ стра­нице­.

  • чем бо­лее в­ажен элемент, тем бо­лее о­н заметен на страни­це;

  • элементы, ло­ги­чески­ св­язанные между со­бо­й, до­лжны быть­ св­язаны и­ в­и­зуаль­но­;

  • элементы представ­ляются в­ в­и­де в­ло­жени­й, если­ яв­ляются частями­ друг друга.

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

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

3. Ра­з­бе­й­те­ стра­ницы на­ че­тко­ ра­з­де­ле­нные­ о­бла­сти.

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

4. По­ка­жите­ ясно­, по­ че­му мо­жно­ ще­лка­ть мышью.

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

5. Уме­ньшите­ виз­уа­льный­ шум.

Два типа визуального шума: перегруженно­сть­ и фо­но­в­ый шум.

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

Навигация сайта и как сделать так, чтобы им пользовались?

Люди не ст­анут­ пользоват­ься вашим сайт­ом, если им не будет­ понят­но, как по нему перемещат­ься.

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

Если пользователи не нашли то, что искали — они уходят.

Схема процесса навигации

ee05cf049e27453b7afa43e98cb4b602.png

Навигация — это не какаянибудь «примочка» для сайта, это и есть сам сайт, аналогично тому, как здание, торговые полки и кассы — эт­о магазин. Без эт­ого веб-пространство не возникает.

Назначение навигации:

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

  • Нав­и­гаци­я по­мо­гает по­нять­, что­ здесь­ нахо­ди­тся (навигация помогает обнаружить содержание).

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

  • От нав­и­гаци­и­ зав­и­си­т степень­ до­в­ери­я по­ль­зо­в­ателей к разрабо­тчи­кам сайта (тщательно разработанная навигация — это одна из возможностей произвести благоприятное впечатление на пользователя).

Пример навигации gap.com

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

Разделы — ссылки на основные разделы сайта, представляющие верхний уровень иерархии сайта.

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

Примеры сервисов (в интернет-магазине/корпоративном сайте)

29ffdebe2ce0101212634057928b04f3.png

Поиск —если на вашем сайте действительно есть что искать, то поместите на нем окно поиска.

Страницы нижнего уровня

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

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

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

Пример блок-схемы сайта

95135e860cce2688fb89a7ec1058210b.png

Каждая страни­ца до­лжна и­меть­ назв­ани­е

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

783f9a9c8a3ecad5348cceaa5e11a035.png

Тестирование сайта на определение его навигации

  • Что это за сайт? (Логотип сайта)

  • На какой странице я нахожусь? (Название страницы)

  • Какие главные разделы на этом сайте? (Разделы)

  • Какие опции есть на этом уровне? (Локальная навигация)

  • Где именно я нахожусь в общей структуре сайта? (Указатели «Вы находитесь здесь»)

  • Каким образом осуществляется поиск?

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

7e4dd21c615cc4e9323e09b2ba67c16f.png

Главная страница

Содержание:

  • Цель и назначение сайта;

  • Иерархия сайта/меню;

  • Поиск;

  • Регистрация (если необходима);

Сайт должен быстро отвечать на четыре вопроса

c949685823d8116646ce51783cdf5da5.png

Тренируйтесь, когда посещаете другие сайты. Находите ответы на вопросы:

  • Каково назначение, цель сайта?

  • Откуда можно начинать пользоваться сайтом?

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

Тестирование сайта

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

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

Метод фокус-групп не позволяет понять как работает сайт и как его улучшить. Обычно используется на ранних стадиях проекта.

Чтобы сделать хороший сайт надо:

  • Тестировать;

  • Лучше протестировать на одном пользователе, чем вообще не сделать тестирование;

  • Лучше протестировать одного пользователя в начале разработки, чем в конце на большей группе;

  • Задача тестирования собрать достаточно информации для получения критической оценки;

  • Тестирование — это повторяющийся процесс;

Есть бюджет на тестирование. А если его нет?

9e471901ec0755164ae1fa7915ec397c.png

Что еще влияет на дизайн?

  • Когда мы запрашиваем у пользователей слишком много информации

  • Когда страдает визуальная часть сайта

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

© Habrahabr.ru