Правила юзабилити сайта или как создать идеальный сайт

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

Правила юзабилити сайта или как создать идеальный сайт

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

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

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

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

Этап первый – постановка цели

Итак, приступим. С чего начинается сайт? Нет. С вешалки начинается театр :). Сайт начинается с… нет. Даже не с идеи. Сайт начинается с цели. Какие цели ставит перед собой компания?

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

Этап второй – определение целевой аудитории

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

В общем-то, каждая компания знает своих потребителей – тут имеет значение не только пол и возраст, но и социальное и материальное положение, и уровень знаний Интернета. Важна каждая мелочь.

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

И тут, как нельзя кстати, очень помогает правило Парето, которое гласит, что 20% усилий дают 80% эффекта.

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

Этап третий - исследования

Задача любого сайта, а сайта компании, занимающейся предоставлением услуг или продажей товаров в особенности, вызывать у потребителя доверие, быть понятным для покупателя, не вызывать сомнений. Эта задача решается с применением правила User-centered design, UCD, которое означает, что у сайта должен быть дизайн, ориентированный на пользователя.

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

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

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

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

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

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

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

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

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

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

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

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

Этап четвертый – проектирование сайта

Применительно ко всему сайту в целом есть такое правило Walk-Up-And-Use Design – интуитивно понятный дизайн. Любой сайт должен быть понятен пользователю с первого взгляда.

Это правило достаточно плотно переплетается с правилами User-centered design, UCD (дизайн, направленный на пользователя) и Physical consistency (логичность), озвученными выше. Вообще многие правила юзабилити переплетаются между собой, взаимосвязаны и, что естественно, всегда повторяют одни и те же принципы:

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

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

Навигация на сайте

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

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

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

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

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

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

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

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

  1. Для страниц, таких как контакты, услуги, о компании и пр.
  2. Для меню рубрик, категорий или товаров.

На блогах это часто применяется. На сайтах тоже, но в меньшей степени. Я бы об этом не написала, если бы сама лично не сталкивалась с этим.

Как уже выше упоминала, в погоне за неординарностью, встречаются сайты, где проигнорировано правило Mystery-Meat Navigation, MMN – мистическая навигация, которое предупреждает о том, что нельзя придумывать для пунктов меню неочевидные названия, когда непонятно, что скрывается за данным пунктом. Или, как вариант, делать меню, которое сложно инициировать, как меню.

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

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

Структура страницы

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Типографика – шрифты на сайте

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

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

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

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

Этап пятый – создание сайта

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

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

Также на плечах разработчиков лежит ответственность за соблюдение таких двух правил, как Graceful Degradation, Fault-tolerance и Progressive Enhancement, PE.

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

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

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

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

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

Этап шестой – наполнение сайта

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

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

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

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

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

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

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

Этап седьмой – тестирование сайта

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

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

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

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

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

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

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


Запись опубликована автором в рубрике Как создавать сайты с метками , .

Правила юзабилити сайта или как создать идеальный сайт: 14 комментариев

  1. Si.A.A.

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

  2. SEO-Дилетант'ка

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

  3. Константин

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

  4. Euro

    Гигантская статья. Интересно читать, вроде уже час ночи, думаю, дай-ка дочитаю,  а потом перехожу по ссылке на следующий пост :)

    Кстати, дизайн сменила? :) Неплохо получилось.

  5. Mobile Lady

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

  6. Nopilo

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

  7. SEO-Дилетант'ка

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

  8. Natalya

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

  9. Elina Ketelsen

    Здравствуйте, Екатерина!
    Искала подобную инфу и безумно рада, что нашла Вашу статью, очень-очень нужная инфа.
    Но у меня масса сомнений и недопониманий, но я абсолютный чайник в этом деле. Можно ли с Вами как-то проконсультироваться, если Вы не против.
    Буду безмерно благодарна!
    Благодарю за любой ответ, Элина.

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *