10 примеров по дизайну юзабилити вашего веб сайта


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

10 правил юзабилити главных страниц, которые нарушаются чаще всего

The Ten Most Violated Homepage Design Guidelines (November 10, 2003)
автор: 2003.11.10 Якоб Нильсен
перевод: 2004.02.06 Александр Качанов

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

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

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

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

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

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

Процент сайтов, соблюдающих правило: 27%
Номер правила в книге Homepage Usability: 3

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

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

2. Используйте «резиновую» вёрстку страницы, что позволяет пользователям менять размер страницы

Процент сайтов, соблюдающих правило: 28%
Номер правила в книге Homepage Usability: 67

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

3. Используйте различные цвета для обозначения посещенных и непосещенных ссылок

Процент сайтов, соблюдающих правило: 33%
Номер правила в книге Homepage Usability: 37

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

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

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

Процент сайтов, соблюдающих правило: 35%
Номер правила в книге Homepage Usability: 56

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

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

5. Не забывайте про краткий слоган, который вкратце объясняет, чем занимается сайт или компания

Процент сайтов, соблюдающих правило: 36%
Номер правила в книге Homepage Usability: 2

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

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

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

6. Упростите доступ к старым материалам, которые недавно были у вас на главной странице

Процент сайтов, соблюдающих правило: 37%
Номер правила в книге Homepage Usability: 33

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

7. Поместите краткое описание сайта в заголовок окна

Процент сайтов, соблюдающих правило: 39%
Номер правила в книге Homepage Usability: 75

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

8. Не используйте заголовок в блоке поиска; кнопки «Искать» достаточно

Процент сайтов, соблюдающих правило: 40%
Номер правила в книге Homepage Usability: 49

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

9. Изменение котировок акций указывайте в процентах, а не только в пунктах

Процент сайтов, соблюдающих правило: 40%
Номер правила в книге Homepage Usability: 110

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

Увеличение котировки на 0.75 доллара означает различные вещи, например, если цена акции равна 8 долларам (9%-ный взлет), или 60 долларам (скромный прирост в 1%).

10. Не помещайте ссылку на главную страницу на самой главной странице

Процент сайтов, соблюдающих правило: 41%
Номер правила в книге Homepage Usability: 43

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

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

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

16 лучших примеров дизайна главной страницы сайта

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

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

Что делает хороший дизайн главной страницы сайта

1) Дизайн главной страницы четко отвечает на вопрос «Кто я?», «Что я предлагаю?» и/или «Что пользователь может сделать здесь?»

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

2) Резонанс с целевой аудиторией

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

3) Сообщение о ценном предложении

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

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

5) Включает в себя призыв к действию (СТА-элемент)

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

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

6) Постоянно изменяется

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

7) Использует отличный общий дизайн

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

Вдохновляющий веб-дизайн: 16 лучших дизайнов главной страницы

1) FreshBooks

Этот дизайн гениален, потому что:

  • Прост в использовании. Возникает много споров о том, какие домашние страницы лучше — короткие или длинные. Если вы выберете последний вариант, то должны обеспечить легкое прокручивание и чтение. Эта страница выглядит практически как история;
  • Удачно использовано сочетание цветов и позиционирование первичных СТА-элементов . Когда заходите на главную страницу сразу становится понятно, что компания хочет привлечь ваше внимание;
  • Очень заманчивый текст на СТА-элементе : « Попробуйте бесплатно в течение 30 дней »;
  • Эффектный подзаголовок: « Для более чем 5 миллионов людей, использующих FreshBooks , отправлять счета и следить за расходами теперь не проблема ». Это заявление привлекательно для целевой аудитории, потому что освоение бухгалтерского программного обеспечения, как правило, « мучительно сложно » для фрилансеров и владельцев малого бизнеса.

2) Airbnb

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

3) Mint

  • Это супер простой дизайн с сильным заголовком и подзаголовком без сленга;
  • Домашняя страница обеспечивает безопасную, но спокойную атмосферу, что очень важно для продукта, который обрабатывает финансовую информацию;
  • Он также содержит простой и убедительный призыв к действию: « Зарегистрируйтесь бесплатно «. Дизайн CTA также замечателен — иконка в виде замочка попадает точно в цель, сообщая о безопасности еще раз.

4) Dropbox(Consumer)

  • Главная страница сайта Dropbox — пример предельной простоты. Ограничено использование рекламы и видеороликов, а также объединено все фоновое пространство;
  • По статическому скриншоту выше трудно понять, но этот оформления сайтов вариант привлекает внимание тонким использованием причудливой анимации в графике;
  • Подзаголовок — простой, но мощный: « Открывайте свои файлы где угодно и на любых устройствах, и без труда предоставляйте к ним доступ ». Не нужно расшифровывать какую-либо терминологию, чтобы понять, что делает Dropbox ;
  • Акцент на одном первичном призыве к действию: « Зарегистрируйтесь бесплатно «.

5) Dropbox(Business)

  • Это яркий пример обеспечения поддержки сайта для разной аудитории. Она отличается от главной страницы, которая изначально была создана для потребителя ( смотрите выше ). Бизнес-пользователи требуют больше информации, а также дополнительное подтверждение того, что Dropbox(Business) — безопасное и масштабируемое решение для компаний ( проблему восприятия Dropbox решает непосредственно на своей домашней странице );
  • Dropbox по-прежнему продолжает применять простой дизайн и брендинг. Он включает в себя только то, что важно: большое изображение с поддержкой рекламы и кнопку « Попробуй бесплатную 30-дневную ознакомительную версию «, призывающую к действию.

6) Whitehouse.gov

  • Создание сайта, который выступает за целую нацию — задача не из легких. Whitehouse.gov постоянно меняется, чтобы отразить главные проблемы и приоритеты. Тестирование и оптимизация — ключевой компонент блестящего дизайна домашней страницы;
  • Что особенно замечательно в Whitehouse.gov так это отличие от большинства сайтов, связанных c правительством. Он имеет чистый дизайн и способствует развитию сообщества;
  • Довольно легко найти то, что вы ищете, когда оказываетесь здесь. А если вы не можете сразу найти то, что нужно, есть удобное поле поиска.

7) 4 Rivers Smokehouse

  • В сочетании с большой картинкой для оформления сайта заголовок « ГРУДИНКА. 18 лет мастерства. Для вашего удовольствия » звучит заманчиво;
  • Прокрутка параллакса проведет для вас краткую презентацию услуг, меню и покажет людей, прекрасно проводящих время – прекрасное использование популярного дизайнерского тренда.

8) Cobb Pediatric Therapy Services

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

9) Jill Konrath

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

10) Evernote

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

11) Telerik by Progress

  • « Скучное предприятие » — это не то чувство, которое возникнет, когда вы зайдете на сайт Telerik . Компания предлагает множество технологий и продуктов, использует смелые цвета, интересные дизайны и видеосъемку с энергетикой подобно Google . Одним из важных аспектов является создание обстановки, чтобы посетители чувствовали себя желанными и знали, что имеют дело с реальными людьми;
  • Мне нравится простой, выполненный на высоком уровне обзор шести товарных предложений. Это абсолютно понятный способ сообщить о том, что делает компания;
  • Реклама несерьезная и легко читается. Они говорят на языке своих клиентов.

12) Boxbee

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

13) eWedding

  • Для влюбленных, планирующих важный день, eWedding – прекрасное место для создания свадебного сайта. Домашняя страница не загромождена и включает в себя только необходимые элементы;
  • Подзаголовок « Создано более чем 800,000 свадебных сайтов! » — это большое социальное доказательство;
  • Включает в себя отличные видеоролики продукта, отличный заголовок и убедительный призыв к действию, который уменьшает сомнения благодаря тексту: « Создайте сайт ».

14) Basecamp

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

15) charity: water

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

16) TechValidate

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

Данная публикация представляет собой перевод статьи « 16 of the Best Website Homepage Design Examples » , подготовленной дружной командой проекта Интернет-технологии.ру

10 советов по улучшению юзабилити сайта

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

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

1. Забудьте «правило трех кликов»

В своей книге Taking Your Talent to the Web (2001) Джеффри Зельдман (Jeffrey Zeldman), известная личность в мире веб-дизайна, выдвинул идею о том, что «правило трех кликов помогает создавать веб-сайты, обладающие интуитивной и логичной иерархической структурой». То есть, если для того, чтобы получить доступ к искомому куску контента, пользователю необходимо совершить больше трех кликов, он начинает испытывать фрустрацию, потому что это требует много усилий и воспринимается как трата времени.

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

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

Согласно исследованию, проведенному британским веб-дизайнером Джошуа Портером (Joshua Porter), пользователи, не обнаружившие искомый контент после трех кликов, не склонны прекращать поиски. Более того, в ходе исследования некоторые испытуемые совершили до 25 кликов.

Взаимосвязь числа кликов и процент выполненных заданий в случаях успеха (синее) и провала (рыжее)

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

2. Помните про F-паттерн

Якоб Нильсен провел исследование, в ходе которого осуществлялся айтрекинг (eye-tracking, окулография) более чем 230 пользователей интернета в ходе просмотра ими различных веб-страниц. В результате выяснилось, что при беглом просмотре взгляд пользователей движется по F-образной траектории.

Теплокарта просмотра страниц сайта Якоба Нильсена

Eyetools, совместно с двумя маркетинговыми компаниями, Did-It и Enquiro, провела похожее исследование. В нем приняли участие 50 испытуемых, каждого из которых просили ознакомиться с результатами поиска Google. В итоге взгляд всех 50 испытуемых чаще концентрировался на верхнем левом углу, и тепловая карта имела F-образную форму.

Теплокарта просмотра страницы результатов Google

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

3. Скорость загрузки имеет значение

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

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

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

Взаимосвязь между задержкой в загрузке страницы в мс и изменением следующих показателей (слева направо): 1) число уникальных запросов на 1 пользователя (%); 2) число модификаций запросов (%); 3) прибыль на 1 пользователя (%); 4) общее число кликов (%); 5) удовлетворенность пользователей (%); 6) время на совершение клика (мс).

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

К счастью, существует множество инструментов, помогающих повысить скорость загрузки и работы страниц, например, такие как Page Speed от Google или YSlow от Yahoo.

4. Сделайте текст более читабельным

Известный юзабилити-специалист Якоб Нильсен провел исследование, в котором он изучал особенности восприятия текста посетителями своего сайта, и оказалось, что люди редко читают онлайн-контент, находящийся у них перед глазами. Посетители среднестатистической веб-страницы (ок. 593 слов) читают 20—28% текста. При дальнейшем увеличении объема текста этот показатель постепенно уменьшается вплоть до 10%.

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

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

5. Не зацикливайтесь на «линии сгиба»

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

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

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

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

Даже наоборот: движимые любопытством, пользователи, которым выше «линии сгиба» было представлено недостаточно информации, еще больше склонны скролить вниз. Специалист компании CX Partners Джо Лич (Joe Leech) также провел исследование на эту тему.

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

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

6. Важный контент — в левую часть страницы

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

Доля времени, уделяемая просмотру каждой зоны страницы в зависимости от удаленности этой зоны (в пикселях) от левого края экрана

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

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

7. Не забывайте про пустое пространство

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

Итак, вам удалось привлечь пользователя на сайт. Теперь вы хотите, чтобы он остался на нем подольше. Что нужно для этого сделать? Мы уже говорили про повышение читабельности. Один из способов заставить пользователя более подробно изучать содержимое — правильный выбор стиля и размера шрифта. Использовать шрифт serif или sans-serif? Средний кегль или крупный? А что насчет расстояния между строками и буквами? И насколько шрифт должен контрастировать с фоном?

В 2004 г. специалисты компании Microsoft провели еще одно исследование, посвященное читабельности текста в интернете. В исследовании приняли участие 20 испытуемых, каждому из которых был представлен ряд различных текстовых блоков c разными параметрами полей и высоты строки. Хотя при отсутствии полей скорость чтения увеличилась, показатель степени усвоения текста уменьшился. Такое повышение скорости чтения может быть связано с тем, что текст без полей становится шире, но короче, в результате глазу нужно физически меньше времени, чтобы преодолеть расстояние от начала до конца текста.

Влияние наличия полей: 1) на скорость чтения; 2) на степень усвоения текста. (Слева — с полями; справа — без полей).

8. Дело в мелочах

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

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

И это ошибочный подход.

Одна незначительная на вид мелочь может определить разницу между успешным и совершенно провальным ресурсом. Дизайнер пользовательских интерфейсов Джаре Спул (Jared Spool) приводит в качестве примера этому один из случаев из своей практики, когда удаление одной-единственной кнопки, которая озадачивала многих пользователей в процессе оформления заказа, в первый же месяц привело к повышению продаж на 45%. В результате только за первый год прирост выручки составил $300 000 000.

Похожие соображения, видимо, двигали специалистами дизайнерской компании Flow. На этапе оплаты заказа кредитной картой на их сайте периодически возникала ошибка, и пользователь попадал на стандартную страницу «ошибка 404». Маркетологи компании переработали страницу, и вместо бесполезного сообщения пользователи стали видеть следующий текст: «Просим прощения, возникла ошибка при обработке заказа. Списания средств с вашей карты не произошло. Пожалуйста, перейдите в корзину и попытайтесь снова». (We’re sorry, we’ve had a problem processing your order. Your card hasn’t been charged yet. Please click checkout to try again.) Вежливо, лаконично и в то же время информативно.

В результате ежемесячное число оформленных заказов возросло на 0,5%, что выразилось в дополнительных 25 000 000 фунтов стерлингов выручки в год.

Информативное сообщение вместо стандартного «ошибки 404»

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

9. Поиск не должен служить компенсацией неудобного меню

Заходя на ресурс, каждый ожидает увидеть удобное меню навигации, даже в тех случаях, когда сайт обладает хорошим функционалом поиска. Таким образом, навигация просто обязана быть хорошо структурированной и удобной в использовании. Американский дизайнер Джерри Мак-Гаверн (Gerry McGovern) провел исследование, по результатам которого 70% испытуемых для нахождения нужного контента предпочли кликать на ссылки, вместо того чтобы использовать поиск.

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

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

10. Домашняя страница теряет значимость

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

Еще одно исследование, проведенное Джерри Мак-Гаверном, показало тенденцию снижения числа просмотров домашних страниц: в 2003 г. число просмотров главной страницы одного крупного интернет-ресурса составляло 39% от общего числа просмотров, а в 2010 г. этот показатель снизился до 2%. По результатам аналогичного исследования процент просмотров главной страницы другого веб-сайта в период с 2008 по 2010 гг. уменьшился с 10% до 5% соответственно.


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

8 принципов хорошего веб-дизайна и юзабилити на примерах ЖК

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

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

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

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

8 принципов веб — дизайна для исключительного юзабилити

1. Простота

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

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

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

  • Цвета. Не используйте слишком много. В «Справочникевзаимодействийчеловекаикомпьютера« рекомендуется использовать максимум пять цветов на сайте. Допустимо – плюс-минус 2 цвета.
  • Шрифты. Выбирайте разборчивые шрифты. Используйте максимум 3 разных шрифта в максимум трех размерах.
  • Графическиеобъекты. Используйте их только если они помогают пользователю совершить действие или выполняют конкретную функцию. Не добавляйте графику как попало.

Вот отличный пример простого дизайна главной страницы ЖК Фортуна:

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

Знаменитый автомобильный дизайнер Колин Чепмен говорил: “Упростить, а затем добавить легкости.” Этот принцип обусловлен следующей идеей: каждый элемент на странице должен нести ценность для пользователя или бизнеса, а в идеале – для обоих. В действительности, если удалять все ненужные элементы, дизайн может стать слишком спартанским. И тогда нужно добавить визуальные элементы.

С таким подходом вы получаете такой результат:

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

2. Визуальная иерархия

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

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

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

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

3. Навигация

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

Эти советы помогут оптимизировать навигацию по сайту:

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

Еще одно замечание: когда вы определили структуру основной навигации на сайте, приведите ее в соответствие. Подписи и размещение должны совпадать на всех страницах. Пример с сайта ЖК Фортуна:

Так мы плавно подходим к следующему принципу.

4. Согласованность

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

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

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

Страницы с ходом строительства:

Улучшить юзабилити так же можно, если добавить альтернативный текст для всех изображений на сайте (alt-text). Если у посетителя не отображаются картинки, то он все равно поймет содержимое страницы.

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

Это приводит нас к следующему принципу.

5. Адаптивность

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

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

Улучшить юзабилити так же можно, если добавить альтернативный текст для всех изображений на сайте (alt-text). Если у посетителя не отображаются картинки, то он все равно поймет содержимое страницы.

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

Это приводит нас к следующему принципу.

6. Традиционность

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

  • Расположение навигационного меню наверху или в левой части страницы
  • Логотип располагается сверху слева и в центре
  • Логотип кликабельный и ведет посетителя на главную страницу
  • Ссылки меняют свой цвет/вид при наведении курсора

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

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

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

7. Доверие

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

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

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

8. Клиентоориентированность

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

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

Согласно данным Vitamin T, 68% посетителей не конвертируются потому что думают, что вы не беспокоитесь об их удобстве. Поэтому в качестве заключительного штриха знаний о UX/юзабилити – начинайте больше заботиться! Поставьте себя на место ваших посетителей и думайте о них на каждом шаге вашего пути.

Если вам нужна помощь в создании нового сайта или аудите существующего, обращайтесь по номеру: (044) 227-07-68, (096) 261-11-38.

Улучшение юзабилити сайта. Рекомендации.

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

Что такое юзабилити сайта

Юзабилити это – от англ. usability — «возможность использования», «полезность», «способность быть использованным» (выдержка из википедии ). Другими словами – это простота и удобство сайтов для пользователей.

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

Что такое показатель отказов

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

Вот как отказы определяет Гугл:

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

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

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

Общие рекомендации по юзабилити

Яндекс начал учитывать юзабилити еще с 2011 года. И вот что он рекомендует владельцам сайтов:

  • Понятная система навигации
  • Логичная структура
  • Отсутствие рекламы, мешающей пользователям получать информацию (например всплывающие окна).

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

Работоспособность

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

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

Всплывающие окна

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

Удобство для пользователя

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

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

На что следует обратить внимание при оценке ю забилити сайта

Давайте теперь пройдемся конкретно по пунктам…

Кроссбраузерность

Сайт должен корректно отображаться во всех популярных браузерах.

Адаптивность

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

Цвета

  • Гармонировать между собой (читайте не раздражать)
  • Соответствовать тематике сайта (например яркие краски больше подойдут для сайта детской тематики, и совершенно не подойдут для сайта консалтинговой фирмы)
  • Отражать фирменный стиль (при наличии такового)

Текст

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

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

Реальный пример нечитаемого текста:

  • Размер шрифта. (мелкий шрифт на сайте – плохо, огромный шрифт на сайте – не удобно. У кого-то большие мониторы, а кто-то будет читать с экрана маленького ноутбука или смартфона. Поэтому, не надо впадать в крайности.) Особенно это касается не адаптивных сайтов.
  • Соблюдается иерархия заголовков, а именно: заголовок имеет самый крупный шрифт, подзаголовки – набраны меньшим шрифтом, основной текст – шрифтом меньше, чем у подзаголовков.
  • В тексте имеется минимум один подзаголовок на экран текста.
  • Выравнивание текста сделано по левому краю. Это самый удобный вариант для чтения с экрана. Выравнивание по ширине использовать не рекомендуется.

Первый экран или шапка сайта

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

Скорость загрузки

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

На увеличение скорости в первую очередь влияет:

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

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

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

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

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

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

Горизонтальное меню – располагается сверху, боковое рекомендуется располагать слева.

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

Вся, важная информация для пользователя, находится на самом видном месте.

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

Сайтам с большим количеством статей и рубрик, желательно иметь «хлебные крошки».

Подвал (футер)

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

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

Сайдбар (боковая колонка)

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

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

Советы

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

Чтобы улучшить юзабилити сайта, обозначьте конкретные проблемы

Например: Нет подписчиков на блоге

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

Например: мало продаж в интернет магазине при хорошей посещаемости и малом проценте отказов

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

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

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

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

ТОР 10 ошибок юзабилити

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

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

Естественно, если посетитель не сможет найти необходимую ему информацию на вашем сайте, он его покинет навсегда, и внешний вид и функционал не сыграют никакой роли!

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

Иметь четкую и понятную систему навигации по сайту

Грамотное размещение контента на страницах сайта

Поиск по сайту должен быть функциональным

Структура сайта грамотно-организованная и прозрачная

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

8 основных правил юзабилити

  1. Не используйте всплывающие окна (поп-апы). Всплывающие окна отвлекают внимание посетителей от контента сайта, что не есть хорошо. Уважайте своих посетителей!
  2. Не изменяйте размер окна браузера посетителя. Причины те же, что и в случае с всплывающими окнами + еще одно: некоторые браузеры запоминают последний размер окна браузера и при новой загрузке воспроизводят его. Как очень метко подметил Бен Бодьен «Если вы думаете, что лучше знаете, какой размер окна браузера лучше для ваших посетителей, то вы совершаете одну из грубейших ошибок, которая не простит вас…».
  3. Не используйте мелкие, нечитабельные размеры шрифтов. Из-за этого длинные тексты читаются с большими усилиями, а на чтение коротких, уходит больше времени, чем обычно. Это относится не только к контенту, но и к ссылкам, кнопкам, формам и другим элементам веб-сайта. Хорошая новость – в Web 2.0 все наоборот!
  4. Тексты всех ссылок должны быть понятны посетителям. Тексты ссылок должны давать представление посетителям о той странице, на которую ведет конкретная ссылка. Неоднозначные и двусмысленные тексты ссылок следует исключить.
  5. На сайте не должно быть ни одной «мертвой» ссылки. Данная ошибка способна разрушить мнение посетителей о вас и вашем сайте, оно вам надо?
  6. Не используйте больше 1 анимации на странице. Анимированные баннеры очень сильно отвлекают посетителей от основного контента сайта. Если уж вы не хотите отказаться от их использования совсем, то хотя бы не размещайте их рядом с основным контентом сайта. Посетители вам за это будут очень благодарны!
  7. Сделайте процесс связи с вами максимально простым и удобным. Если вы не хотите поддерживать связь со своими посетителями – вы на грани провала. Заинтересованные вашим проектом посетители обязательно захотят связаться с вами, но если не найдут ваших координат, то сразу же потеряют интерес и доверие к вам и вашему сайту. Данное правило особенно важно для сайтов, непосредственно занимающихся электронной коммерцией.
  8. Все ссылки, имеющие место быть на вашем сайте, должны открываться в этом же окне браузера. Каждый посетитель в праве сам выбирать, как и где открывать ту или иную ссылку. Поэтому навязывание своих правил не приведет ни к чему хорошему.

Далее, с краткими пояснениями и примерами (в виде скриншотов), приведены 10 наиболее популярных ошибок юзабилити. Запомните и не повторяйте их ни при каких обстоятельствах.

1. Очень плохо заметная ссылка авторизации на сайте (Log-In)

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

А для тех кто решил не тратить свое время на поиски – ссылка для авторизации «Log-in» находится по центру страницы в желтом прямоугольнике. Правда, не особо хороший вариант её расположения?!

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

2. Всплывающие окна (поп-апы) для отображения в них контента

На данный момент практически у всех современных браузеров, таких как Firefox, Safari, Opera и Internet Explorer, есть « штатный блокировщик», который занимается блокировкой всплывающих окон, рекламных баннеров и всего того, что похоже на явную рекламу. Поэтому использовать поп-апы для отображения контента бессмысленно и не разумно.

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

3. Замена скроллинга и нового способа реализации меню перемещением элементов при помощи перетягивания курсором мыши

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

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

4. Неотличимые от обычного контента ссылки

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

Такого как на этом сайте не должно быть ни в коем случае RealPlayer.

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

Это ответ на ваш вопрос.


1, 3, 4, 6, 7 и 11 — это ссылки, 2, 5, 8, 9 и 10 – нет!

5. Неоднозначное восприятие и перенасыщение информацией

Не допускайте в контенте перенасыщение информацией веб-страниц сайта. Примером данной ситуации послужит сайт Overstock.

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

6. Блокировка браузера до тех пор, пока пользователь не выполнит требования предъявляемые на сайте

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

Что самое интересное, ничто не помогает:

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

Ни клик вне модального окошка

Окно не закрывается

Клик по иконке «?» так же не срабатывает

Очень неприятная ситуация сложившаяся всего лишь по той причине что вы чем то заинтересовались…

7. Один слой сайта «наползает» на другой

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

Подобной проблемой страдает и Yahoo.com.

8. Динамическая навигация

Очень симпатично и оригинально, не так ли?!

На самом деле это очень неудобно.

Рассмотрим еще один вариант такого меню, только на Flash.

9. Выпадающие меню

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

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

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

Примером тому могут послужить 2Advanced и Brita.net.

10. Мигающие изображения

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

Превосходное издание Digital Web Magazine, допустил эту досадную ошибку, разместив в левом сайдбаре страниц сайта анимированный рекламный блок.

Интересный эксперимент или ошибка будущего?

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

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

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

17 мифов о юзабилити в веб-дизайне

Миф №1: Люди читают в интернете

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

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

Насколько мало читают пользователи?

  • Исследования отслеживания движений глаз Якоба Нильсена (Jakob Nielsen) 2008-го года, что в среднем на сайтах прочитывается меньше 20% текстового контента.
  • В другом юзабилити-тестировании Нильсен проверял текстовые формулировки на одном сайте. Краткие, объективные тексты, которые легко сканировать взглядом, показали повышение юзабилити на 124%.
  • Герри Макгаверн (Gerry McGovern) узнал, что только 1 из 15 людей смогли увидеть нужный кусочек информации, который находился в массиве плохо сканируемой взглядом информации.
  • Стив Круг (Steve Krug) в своей книге Don’t Make Me Think заявляет, что люди в интернете не читают, а «сканируют» взглядом.
Топ-пост этого месяца:  Псевдо комментарии в CSS

Когда люди читают подробно:

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

Миф №2: Страница должна быть доступна за 3 клика

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

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

Исследования, которые ставят под сомнение правило трех кликов:

  • Исследование, проведенное компанией UIE показывает, что после трех кликов люди не уходят и не чувствуют раздражения при последующих кликах.
  • Юзабилити-тесты Якоба Нильсена показали, что вероятность нахождения продукта посетителями интернет-магазина возросла на 600% после изменения дизайна, причем страница продукта переместилась от главной на «расстояние» от трех кликов до четырех. Это из книги Prioritizing Usability, которая была упомянута в Highlights from Prioritizing Web Usability.
  • Последующие тесты от компании UIE продемонстрировали важность роли имён ссылок (а не количества кликов), которые в конечном итоге влияли на юзабилити.
  • Стоит заменить правило трех кликов на правило одного: «Каждый клик или акт взаимодействия должен приблизить человека к его цели, в то же время помочь избежать вероятности попадания не туда». Это выдержка из Breaking the Law: The 3 Click Rule.

Для дальнейшего чтения

  • Мысли Давида Хамиля (David Hamill) о нонсенсе правила трех кликов — Stop Counting Clicks.
  • Статья компании CX Partners о правиле трех кликов — 3 isn’t the magic number.

Миф №3: люди не прокручивают страницы

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

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

Многие исследования подтверждают факт использования прокрутки:

  • Поставщики карт кликов из ClickTale проанализировали 100 000 показов страниц. Результат следующий: люди использовали линейку прокрутки в 76% просмотров, а в 22% из них — прокручивали до самого конца вне зависимости от длины страницы. Это из Unfolding the Fold и ClickTale Scrolling Report и Part2.
  • Результаты исследований отслеживания движений глаз эксперта по юзабилити Якоба Нильсена показывают, что, несмотря на повышенное внимание к верхней части страницы, люди пользуются прокруткой в случае, если страница спроектирована подходящим для прокрутки образом. Это из Scrolling and Attention.
  • Изучая статистику сайта TMZ.com, Мелисса Таркуини (Milissa Tarquini) выяснила, что самые популярные ссылки находятся внизу сайта. Она также обратила внимание на высокую популярность опросов и галерей, которые расположены в самом низу страницы «Деньги и финансы AOL». Это изBlasting the Myth of the Fold.
  • В поддержку прокрутки выступают и результаты исследования отслеживания движений глаз, проведенное CX Parnters. Посетители пользуются прокруткой, если сайт спроектирован по определённым принципам. Это из The Myth of the page fold: evidence from user testing.
  • Юзабилити-тесты, проведённые Software Usability Research Laboratory (SURL), подтверждают, что люди могут читать долго, если можно быстро прокручивать информацию, а не переходить на новые страницы. Это из The Impact of Paging vs Scrolling on Reading Online Text Passages.
  • Джаред Спул (Jared Spool) проводил тесты в 1998, которые показывали реальное желание людей пользоваться прокруткой, вопреки тому, что сами они говорили о нелюбви к прокрутке. Это из As the Page Scrolls.
  • SURL проводили другое юзабилити-исследование и подтвердили, что люди относятся одинаково как прокрутке, так и постраничному просмотру, если дело касается страницы результатов поиска. Это изPaging vs. Scrolling: Looking for the Best Way to Present Search Results

Для дальнейшего чтения про прокрутку:

  • Правила проектирования страниц для удобной прокрутки от Джареда Спула (Jared Spool): Utilizing the Cut-off Look to Encourage Users To Scroll.
  • Крис Фэйхи (Chris Fahey) описывает, как усложнилось понятие сгиба (the fold) в статье The Scrolling Experience and “The Fold”.
  • Не пропустите остроумную статью Life below 600px о прокрутке.

Миф №4: Дизайн это внешний вид сайта

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

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

Понятие «дизайна» со слов дизайнеров:

  • «Дизайн это не внешний вид или ощущения от предмета. Это то, как предмет работает», — Стив Джобс (Steve Jobs)
  • «Хороший дизайн, если правильно реализован, становится невидимым. Мы замечаем его, только когда он плохо сделан. Представьте себе кондиционер. Мы думаем о нем, когда слишком жарко или холодно, или когда он сам шумит, или начинает капать. Если воздух приятный, то мы забываем про кондиционер и фокусируемся на насущных делах», — Джаред Спул (Jared Spool)
  • «Дизайн это план по упорядочиванию элементов таким образом, чтобы максимально эффективно достичь цели», — Чарльз Имз (Charles Eames)
  • «Как я понимаю дизайн? Заниматься дизайном, значит делить задачу на более мелкие, чтобы найти простейшее решение», — Пол Скривенс (Paul Scrivens)
  • «Главная задача дизайна не развлекать, не быть прикольным, не быть эстетически привлекательным. Дизайн должен работать», — Оливер Райхенштайн (Oliver Reichenstein)
  • «Дизайнер занимается решением проблем: он ищет функциональные возможности и внешний вид чего-то. Это может быть написание текста, проектирование интерфейса, разработка кресла, придумывание конвертов для Netflix, лампочек или стульев», — Джошуа Портер (Joshua Porter)
  • «В графическом дизайне нет правильного или неправильного. Есть только эффективная или неэффективная коммуникация. Каждый может сетовать на рекламу в журналах, но рекламодатели заинтересованы лишь в том, насколько хорошо их реклама привлекает потенциальных покупателей», — Питер Биллак (Peter Bilak)
  • «Дизайн направлен на человека. Создавать дизайн это означает определять проблемы и поставлять лучшее решение», — Иван Чермаев (Ivan Chermayeff)
  • … другие цитаты есть на сайте Люка Вроблевски (Luke Wroblewski)

Миф №5: Общедоступность это дорого и трудно

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

Создание хорошо доступного сайта с нуля обойдется не дороже такого же менее доступного.

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

Почему выгодно делать сайт доступным:

  • Больше людей смогут пользоваться сайтом. Около 14% населения Земли это люди с нарушениями здоровья;
  • У доступного сайта всегда выше юзабилити.
  • Доступный сайт легче подвергается SEO.
  • Общедоступность веб-сайтов дает и другие преимущества: скорость загрузки, кросс-браузерность и более простую систему управления контентом.

Миф №6: Общедоступные сайты уродливы

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

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

Прекрасные примеры красивых и доступных сайтов:

Для дополнительного чтения о связи доступности и визуального дизайна:

Миф №7: Графика делает элемент дизайна более заметным

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

В поисках чего-то определённого человек ожидает увидеть искомое среди текстов и ссылок. Часто люди воспринимают цветастые графические элементы в качестве рекламы и игнорируют их.

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

Исследования и статьи об использовании графики и ошибках в этом процессе:

  • Исследование движения глаз Якоба Нильсена подтверждает тот факт, что люди почти всегда игнорируют элементы, похожие на рекламу. Из Banner Blindness: Old and New Findings. Для более полной информации читайте его книгу Prioritizing web usability.
  • «Баннерная слепота действительно существует. Имеются в виду не только рекламные баннеры, но и все, что на них похоже», — говорит Якоб Нильсен, директор компании Nielsen Norman Group, расположенной в американском городе Фремонт в штате Калифорния; компания изучает пользователей интернета. Например, на одном некоммерческом сайте, посвященном здоровью, использовался квадртаный элемент нерекламного характера, который информировал людей о действиях при сердечном приступе. Исследование показало, что люди не обращали внимание на этот блок из-за места его расположения на странице. Из Marketers Seek a Banner-Blindness Cure.
  • Негативный результат баннерная слепота спровоцировала во время выборов 2006 года в США. Неверное размещение в бюллетенях элементов для голосования заставило 13% избирателей не заметить часть бюллетеня вообще. Из Banner Blindness in Ballot Design.
  • Франк Ларго (Franck Largeault) провел исследование 300 субъектов, которое показало существование феномена избегания рекламы (хотя исследование было направлено на сравнение графических баннеров и ссылок). Из Compared efficiency of advertisement banners and contextual sponsored links on the internet.
  • Дон Норман (Don Norman) говорит, что люди умеют сильно фокусироваться и не замечать вещей вне фокуса. Так они пропускают содержание, которое напоминает рекламу в виде ссылок или текста. Из Commentary: Banner Blindness, Human Cognition and Web Design.
  • Известный рекламный писатель Говард Люк Госсаге (Howard Luck Gossage) говорит про избегание рекламы: «Суть в том, что никто не читает рекламу. Люди читают то, что им нужно. Иногда им нужна реклама».

Миф №8: Изображения из банков улучшают впечатления пользователей

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

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

Исследования и статьи о юзабилити орнаментальной графики:

  • Юзабилити-исследование, проведенное UIE, было направлено на изучение юзабилити разной веб-графики; результаты показали, что графика, использующаяся в содержании сайта или в навигации может быть полезной, но от орнаментальной графики больше проблем, чем толка. Из Deciding When Graphics Will Help (and When They Won’t).
  • Исследование движения глаз демонстрирует отсутствие фиксаций взгляда на декоративных элементах; люди смотрят на содержание и игнорируют не важный визуальный шум.
  • Джошуа Брюэр (Joshua Brewer) говорит, что каждый акт визуальной коммуникации должен укреплять смысл общего сообщения, а стоковые изображения лишь все ухудшают. Из A picture is worth a 1000 words, except when it isn’t.
  • Декоративные картинки часто используются для выделения определенного элемента на веб-странице, но практика показывает, что этот прием делает элемент менее заметным.

Миф 9: Дизайн должен быть оригинален

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

Иногда нужно придумать новое решение, но вы должны быть уверены на 100%, что стандартное неуместно в данном случае.

Про важность веб-стандартов:

  • Стив Круг (Steve Krug) в своей книге Don’t Make Me Think, заявляет, что «стандарты это ваши друзья», и они незаменимы для пользователей при переходе с одного сайта на другой.
  • В публикации «Как сделать достаточно хороший сайт» Сет Годин (Seth Godin) говорит, что «в интернете есть больше миллиарда страниц», которыми можно вдохновляться.
  • Сайт Web Design From Scratch рассказывает, что, если избегать оригинальность, то процесс дизайна становится «быстрее, легче, более выгодным» и «полезным для пользователя».
  • Блог Carsonified’s Think Vitamin подчёркивает, что «дизайнерское решение, которое вы ищите, скорее всего уже существует».

Для дальнейшего ознакомления с понятием оригинальности:

Миф №10: Если дизайн хорош, то детали значения не имеют

«Детали это не детали. Детали создают дизайн», — сказал Чарльз Имз (Charles Eames). Чёткие детали такие, как информативное сообщение об ошибке, пара убедительных предложений в форме регистрации или перестановка продуктов в каталоге сильно влияют на впечатления посетителей.

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

Когда маленькие изменения влияют на всё:

  • На сайте bestbuy.com маленькое изменение в виде возможности пропускать регистрацию при оформлении покупок завершилось увеличением годового оборота на $300 миллионов. The $300 Million Button.
  • ClockTale повысили количество регистраций на сайте с 40% от общей посещаемости до 80%, добавив очень заметную пометку «не обязательно» в форму регистрации, рядом с полем «телефон». Change one word, DOUBLE your conversion rate!
  • Небольшое изменение формулировки об ошибке на сайте интернет-магазина увеличило количество завершенных заказов на 0,5% (это много по сравнению с объемом изменения) и помогло сэкономить магазину £250 тысяч в год. £250,000 from better error messages.
  • Чтобы повлиять на выбор посетителя, ресторанные меню могут использовать различные ухищрения: картинки в качестве стимулов, подставные тарелки для сравнений, опущение знака валюты, избегание расположения цен в колонку и т.д. Такие детали могут показаться бессмысленными, но они очень важны. Menu Mind Games.
  • … для другие примеров веб-оптимизации сморите ABtests.com.

Еще кое-что на тему важности деталей:

  • Наз Хамид (Naz Hamid) утверждает, что дизайнеры должны уделять максимум внимания деталям: всегда надо экспериментировать, быть самокритичным, стараться проработать каждую мелочь в дизайне. Design is in the Details
  • Дес Тэйнор (Des Taynor) говорит, что люди оценивают качество программных продуктов по первому впечатлению. А ресторанные исследования показывают, что для посетителей важную роль играет качество салфеток. The thickness of napkins.
  • Дизайнер услуг Джефф Говард (Jeff Howard) пишет, что компании, в попытках создания безупречных услуг, часто не обращают внимания на часть деталей. The Problem with Service Design
  • Джошуа Брюэр (Joshua Brewer) высказал следующее на счет приятных мелочей: «Индустрия услуг давно знакома с этим секретом. Чтобы понравиться клиенту нужно время, а оно очень ограничено. В такие моменты человек может быть приятно удивлен всяческими мелочами: вниманием к деталям, скоростью обслуживания, всякими бонусами или просто улыбкой. Если клиент уходит с ощущением, что ему оказали чуть-чуть больше внимания, то можно гарантировать, что он вернется и расскажет про вас друзьям. Design for Delight.

Миф №11: Сайты надо периодически переделывать

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

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

Почему стоит избегать радикальных изменений:

  • Кэмерон Мол (Cameron Moll) объясняет, почему дизайнерам надо аккуратно подходить к редизайнам. В первую очередь дизайнеры должны понимать потребность компании в редизайне и думать о том, чего будет стоит посетителю понять изменения и привыкнуть. Великолепная статья о целесообразности редизайна: «Хорошие дизайнеры редизайнят, а отличные дизайнеры перегруппировывают».
  • Якоб Нильсен отмечает, что это в порядке вещей, когда заказчику интересен новый внешний вид сайта, потому что от старого в глазах рябит. Посетители сайтов, однако, предпочитают знакомый дизайн, потому что им все в нем известно, они быстро находят нужное и уходят. — Fresh vs. Familiar: How Aggressively to Redesign.
  • Когда в 2010 Facebook переделал свою главную страницу, то люди стали её презирать. Аналогичное было и с лентой новостей в 2006, хотя сейчас это одна из основополагающих функций сайта.
  • Новое меню программы Word 2007 (ribbon interface) был намного лучше предыдущего интерфейса Word. В Microsoft до сих пор поступают жалобы от пользователей, которые и в своих блогах пишут о проблемах.
  • «Не делайте редизайна просто так, переделывать надо, когда появился лучший ответ на вопрос», — предупреждает Пол Скривенс (Paul Scrivens) в What is design.
  • Джаред Спул (Jared Spool) утверждает, что кардинальный редизайн стоит дорого и очень рискован. Джаред советует пошагово вносить изменения, потому что так проще адаптироваться к изменяющимся условиям бизнеса. — Avoiding Redesigns (подкаст).

Миф №12: Чем больше функций и шире выбор, тем выше удовлетворение

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

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

Про выбор

  • Классический пример парадокса выбора показывает, что люди скорее сделают покупку, если выбор ограничен. Более того, они будут больше удовлетворены своим выбором в такой ситуации. — When Choice is Demotivating: Can One Desire Too Much of a Good Thing? (pdf)
  • В своем бестселлере «The Paradox of Choice: Why More Is Less» (Парадокс выбора: почему больше это меньше) Бери Шварц (Barry Schwartz) рассказывает про свое исследование проблемы слишком широкого выбора. Посмотрите его видео на TED или почитайте краткое изложение его рассказа на UI11.
  • Исследование «Feature Fatigue: When Product Capabilities Become Too Much of a Good Thing» (Усталость от возможностей: когда продукт умеет намного больше, чем надо) рассказывает, что «Перед использованием, возможности значили больше для участников тестов, чем юзабилити, но после использования, именно юзабилити продукта влияло на удовлетворение. В результате, удовлетворение было полнее теми продуктами, которые были проще, а сложные версии большинство участников просто отвергало».
  • Нейропсихолог Сюзан Вайншенк (Susan Weinschenk) предлагает «противостоять желанию предлагать клиентам больше и больше выбора. Запомните: они СКАЖУТ, что хотят широкий выбор, и вы подумаете, что это хорошо (вам он тоже нравится), но слишком широкий выбор означает, что люди вообще ничего не купят.» — You Want More Choices and Information Than You Can Actually Process
  • Закон Хика (Hick’s Law) гласит, что время, которое тратится на выбор увеличивается с количеством альтернатив и их слонжностью. С увеличением времени на выбор страдают впечатления людей.
  • Джошуа Брюэр (Joshua Brewer) утверждает, что «дизайнеры могут очень сильно воздействовать на впечатления людей, если будут аккуратно относится к основным задачам, которые решает продукт; надо знать в какой момент лучше убрать альтернативы в пользу одной и понятной. Наилучший пример такого подхода это Apple. Apple всегда создает продукты с минималистичным дизайном, эти продукты последовательны и нацеленные на решение задач. iPod, iPhone и iPad это все потрясающие тому примеры, они — результат работы в контексте дизайна портативных устройств.
  • В своей книге «Sketching user experience» (Зарисовываем user experience) Бил Бакстон (Bill Buxton) пишет, что бизнес-модель, построенная на принципе N+1 (создается основной продукт, а потом дополняется возможностями), не рассчитана на далекие перспективы. После нескольких версий, внедрение улучшений в продукт стоит дороже, чем воспринимаемая покупателями стоимость результата улучшений и они не готовы платить.
  • Помните, что добавить возможность бывает проще, чем потом от нее избавиться: Netflix хотели убрать функцию, которая казалась им чересчур запутанной, но пользователи протестовали. В последствии компания оставила функцию — Features are a one-way street
  • Джейсон Фрайд (Jason Fried) из 37Signals считает, что над функциями надо работать (как работают над книгами в библиотеке или над выставками) — Is it really the number of features that matter?
  • Книга компании 37Signals под названием «Getting real» рассказывает о точке зрения авторов на внедрение лишь самых необходимых функций и создании минимально жизнеспособного продукта.
  • Хорошей стратегий является использование продуманного заранее сделанного выбора, что создает впечатление простого выбора. Например Smart Defaults in Travel Booking Forms (Умный предустановленный выбор на сайте заказа билетов).

Миф №13: Графические иконки улучшают юзабилити

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

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

Исследования и статьи на тему низкой эффективности пиктограмм:

  • Компания UIE провела два эксперимента с целью изучить юзабилити кнопок с иконками. В первом были изменены только графические элементы кнопок, в то время как расположение кнопок осталось тем же. Пользователи быстро привыкли к этому нововведению. Во втором, наоборот, сами кнопки были поменяны местами, хотя графика осталась прежней. Такой поворот запутал участников эксперимента и вызвал лишние трудности:Orbitz Can’t Get A Date.
  • Михаэль Цушлаг (Michael Zuschlag) говорит, что «иконки противоречат интуиции и не обязательно помогают пользователю найти пункт меню быстрее, чем простой текст. Они не стоят того»[1].
  • История с Microsoft Outlook, которая упоминалась выше: пока к пиктограммам не были добавлены подписи, большинство пользователей вообще не пользовалось панелью инструментов (за исключением кнопки «Удалить»). Затем «были протестированы различные исправления: новые иконки, новые позиции кнопок и так далее. В конце концов, единственное изменение вызвало полный переворот: наиболее важным кнопкам просто были присвоены подписи. Почти сразу же панель инструментов получила должное внимание и все пользователи, независимо от уровня квалификации, начали использовать ее.» — The Importance Of Labels.
  • В статьеThe Problem With Icons прекрасно описано, как сложно понять назначение иконки, рядом с которой нет поясняющей надписи.
  • 37signals.com приветствует решение сервиса MobileMe, разработанного Apple, о замене иконки «Выход» на обычную текстовую надпись. —UI Sighting: Clear over clever on MobileMe.
  • Датский дизайнер Петер Стеен Хёгенхауг (Peter Steen Høgenhaug)провел собственное исследованиетого, насколько хорошо пользователи понимают иконки, используемые в различных системах управления контентом. Результат: повсеместно используемую иконку «Вставить ссылку» распознали всего 35% участников. И даже на классические «Отменить» и «Повторить» правильно указала только половина участников.

Где можно использовать иконки:

  • Хорошо работают такие универсальные иконки, как «Распечатать», «Закрыть», «Старт/Стоп» в медиаплеере и подобные им.
  • Иконки могут акцентировать внимание в тексте или структурировать веб-страницу (иконки типов файлов — PDF, DOC и т.д.).
  • Качественно нарисованные иконки могут улучшить общее восприятие контента на сайте.

Миф №14: Вы и ваши пользователи — одно и то же

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

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

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

Почему вы отличаетесь от вашей аудитории?

  • Якоб Нильсен (Jakob Nielsen) утверждает, что «одна из самых трудных вещей в юзабилити — понять, что вы — не ваш пользователь. Если вы разработчик проекта, то вы мыслите по-другому. Проектирование опыта пользовательского взаимодействия подразумевает мнение тех, кто не находится в рамках проекта. Хорошее «противоядие» — это тестирование пользователей: выясните нужды среднестатистического пользователя вашего продукта. Очень заманчиво работать, «пока горячо», но, чтобы заработать деньги, сосредоточьтесь на том, что действительно ценно для клиентов» —Growing a Business Website: Fixthe Basics First.
  • В другой статье Нильсен говорит, что пользователи и разработчики — это люди разных «пород» с совершенно различным менталитетом. —Are developers people?
  • Запуск Google Buzz очень хорошо иллюстрирует это заблуждение. Сервис Buzz протестировали 20 000 сотрудников Google, и все равно он был запущен с функционалом, который вызвал волну жалоб и возмущений (после чего был исправлен). Ни один из разработчиков Google не заметил ошибок, потому что не был реальным пользователем. —You are not your user. No matter how good you think you are.
  • Кэти Сьерра (Kathy Sierra)советует сосредоточиться на точке зрения и нуждах пользователя, а не бизнеса: «Перестаньте рассказывать нам о том, как вы прекрасны — лучше расскажите, как вы собираетесь помочь пользователям стать лучше».
  • Даже создатели языка программирования и сами программисты находятся на разных уровнях: «ниндзя-разработч

Юзабилити сайта: как перестать терять посетителей и начать получать лиды

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

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

Аналогично с сайтом – если он не дает удобной связи между посетителем и компанией, толку от него будет мало. За качество этой коммуникации и отвечает юзабилити – удобство использования сайта.

Юзабилити сайта складывается из двух частей:

  1. Внешняя часть: то, как пользователь видит сайт. Причем смотря на сайт, пользователь видит так и всю компанию. Сайт – это не просто набор текстов и картинок, это лицо компании в сети.
  2. Внутренняя часть: то, как сайт взаимодействует с пользователем. Здесь аналогично – взаимодействие сайта с собой человек воспринимает как отношение к себе всей компании. И временно неработающая выписка по карте в Сбербанк-Онлайне становится плевком в душу от всего Сбербанка.

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

Улучшаем UI

Сначала займемся «лицом» – внешней частью. Еще ее называют UI (User Interface) – интерфейс пользователя.

Проверяем такие параметры:

1. Дизайн сайта

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

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

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

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

Смотрим на примеры. Пример 1 – сайт компании, которая строит дома под ключ:

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

Попробуем изменить дизайн и добавить ему аккуратности (заметьте, профессионального дизайнера не привлекаем):

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

Второй пример – это случай, когда дизайн сбивает с толку и дает неверное представление о компании:

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

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

2. Навигация

Это меню (основное верхнее, вспомогательные слева и в подвале) и хлебные крошки. Навигация показывает, что есть на сайте – какие товары/услуги предлагает компания и что можно про компанию узнать. Оптимально использовать 1-2 уровня вложенности. Если их больше, то будет сложно ориентироваться.

Топ-пост этого месяца:  Проверка кроссбраузерности сайта – обзор нескольких веб-сервисов

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

Старайтесь не ставить на одном уровне меню более 6-8 пунктов. Не забывайте, что объем внимания обычного человека – 5-7 объектов.

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

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

Возвращаемся к примерам. На сайте строительной компании было два меню (вверху и слева), мы можем объединить их в одно. Пункты «Услуги» и «Цены» объединим в один раздел «Услуги и цены» – как-то глупо рассказывать про услуги на одной странице, а про их цены – на другой. Пункт «Схема проезда» уберем вообще, схема будет в разделе «Контакты». Разделы «Вакансии», «Партнеры», «Карта сайта» тоже убираем, основной целевой аудитории этого сайта они не нужны. Пункт «Калькулятор» убираем из меню, делаем его отдельным блоком и ставим в правой части сайта.

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

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

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

3. Шапка

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

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

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

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

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

4. Подвал


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

Текущий футер у сайта из первого примера лишен смысла:

Добавим ему пользы:

Помимо информации из шапки добавили ссылки на разделы «Партнеры» и «Вакансии» – они могут пригодиться примерно 2-5% посетителей этого сайта, поэтому они в футере. Также указали здесь дополнительные телефоны менеджеров (но их еще надо будет продублировать в разделе «Контакты»).

Футер второго примера лишь чуть-чуть информативнее первого:

Сделаем его более «солидным»:

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

5. Контент

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

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

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

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

К примерам. На сайте строительной компании есть страница про ленточный фундамент:

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

В статье обязательно используем фотографии – ведь 50% людей хлебом не корми, а дай только фотки посмотреть, и даже не важно чьи =)

В примере спортивного магазина возьмем страницу о доставке:

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

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

6. Тексты

И еще пару слов отдельно о текстах. Есть 3 важных момента:

  1. Конкретика. Тут все просто. Пишем не «в нашей парикмахерской самые низкие цены», а «мужские стрижки от 300 рублей». Представьте, что рекомендуете компанию лучшему другу. Ему вы не скажете «индивидуальный подход», а доходчиво объясните – «закрепим за тобой спеца, он будет сопровождать все этапы работ и согласовывать с тобой». Не стесняйтесь говорить со своими посетителями таким же понятным языком.
  2. «Вы получите». Описывайте не то, что вы сделаете, а то, как от этого станет хорошо клиенту. Не «мы подберем вам лучшую путевку», а «вы проведете 10 дней в месте, о котором мечтали».
  3. Целевое действие. Увлекшись написанием правильного текста, не забудьте разместить в нем призыв к действию – Позвоните, Напишите, Оставьте заявку, Перейдите в каталог и пр.

Взглянем на страницу с описанием услуг нашего первого примера:

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

И даже гарантию от срыва сроков сюда добавили (слишком уж больное место, и не только в строительстве).

В примере интернет-магазина обратимся к главной странице:

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

Здесь целевое действие – это клик по карточке товара, поэтому каких-то отдельных кнопок нет.

7. Отзывы и кейсы

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

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

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

К примерам. Портфолио от строительной компании. На один объект – всего одна фотография.

Это мало. Как минимум, штук 10 фото на каждый объект – на разных этапах постройки, под разными углами. Плюс краткое описание – где, что и как строили.

Для интернет-магазина в наше время вот так уже пусто:

Взгляд привычно ищет отзывы:

8. Первый экран

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

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

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

Смотрим на примере. Вспомним первый экран сайта строительной компании:

Чет не зацепило. Попробуем привлечь попаданием в желание пользователя:

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

Теперь первый экран магазина спорттоваров:

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

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

9. Формы

Самая распространенная форма – обратная связь, «напишите нам». Для интернет-магазинов – форма отправки заказа.

Для пользователя работа с формами – не самый приятный момент, приходится отвлекаться на клавиатуру (не у всех высокая скорость печати, а кто-то еще и с телефона). Поэтому чем меньше полей в форме, тем лучше. Хотя правильнее сказать – чем меньше обязательных полей, тем лучше. Можно оставить в форме и 5-6 полей, если обязательны к заполнению только 2 поля. Кто не поленится и заполнит все поля – хорошо, у остальных нужную информацию выспросит менеджер.

Все поля в форме нужно подписать (в 2-3 слова). Можно добавить небольшое пояснение или пример заполнения. Обязательные поля нужно отметить звездочками – это уже давно стало стандартом.

Как пример рассмотрим форму заполнения заявки на расчет стоимости:

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

10. Поиск

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

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

11. Онлайн-консультант

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

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

И не стоит настраивать «выскакивание» окна «Чем я могу вам помочь» через 5 секунд после того, как пользователь попал на сайт. Он только начал знакомиться с вашим сайтом, и вопросы у него еще не возникли.

Стандартное место кнопки онлайн-консультанта – правый край окна (либо нижний правый угол).

В качестве примера – провокационный вопрос консультанта на сайте Мосигры:

Всплывает сам после просмотра 3-4 страниц сайта и после 20-30 секунд на странице – то есть когда похоже, что человек зашел в тупик с выбором игры.

12. Виджеты соцсетей

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

Например, покажите отзывы из ВКонтакте:

Такие отзывы вызывают больше доверия. Но важно, чтобы отзывы были свежими.

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

Улучшаем UX

Теперь переходим к скрытой части – к взаимодействию. Это UX (User eXperience) – опыт взаимодействия пользователя.

1. Скорость загрузки

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

2. Отсутствие ошибок

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

3. Увеличение картинок по клику

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

4. Валидация форм

Это проверка, правильно ли заполнена форма. Если посетитель не заполнил какое-то обязательное поле, то выделите это поле и укажите, что не заполнено именно оно:

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

5. Сообщения после отправки форм

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

6. Статусные сообщения и диалоги

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

Перепишите сообщения естественным языком:

7. Email-уведомления

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

8. Динамический контент

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

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

А если он пришел с объявления «Детские спортивные комплексы», то в слайдере мы поставим на первое место тот из слайдов, который имеет отношение к детям, и ниже блок с детскими товарами тоже поставим первым.

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

9. Полезные инструменты

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

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

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

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

Мелочи

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

Из часто встречающегося:

1. А так можно было?

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

2. Адреса картинок и файлов

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

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

3. Кнопка «Наверх»

Актуальна для реально длинных страниц (например, как эта статья). Стандартное место – справа внизу, но может быть и слева (ВКонтакте, Хабр). Изначально кнопка невидима, но появляется, если человек уже прокрутил 1-2 экранов вниз. Я по старинке пользуюсь кнопкой «Home» на клавиатуре, но статистика показывает, что кнопка «Наверх» тоже имеет своих приверженцев.

4. «Приклеенная» шапка

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

Здесь сразу пример и «приклеенной» шапки, и кнопки «Наверх».

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

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

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

5 примеров как улучшить юзабилити интернет-магазина

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

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

Как это сделать? Представляем пять примеров как улучшить юзабилити интернет-магазина.

Простая и понятная навигация

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

Как можно проверить свою систему? Проведите онлайн-голосование – предложите пользователям выбрать наиболее важные для них категории товаров. Либо прямой опрос в духе «Если бы вам нужно было найти товар Х, то куда бы вы нажимали?». Ответы могут вас сильно удивить.

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

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

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

Путь пользователя

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

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

Строка пути также приносит пользу с точки зрения SEO, поскольку отображается прямо в результатах поиска, под заголовком:

Правило F

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

Эта модель поведения (F-паттерн) была описана экспертами NNGroup еще в 2006 году и актуальна для всех культур, где читают слева направо.

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

По возможности протестируйте сайт с помощью инструментов айтрекинга (отслеживание движения глаз). Также не забудьте про карту кликов и карту скроллинга в Яндекс Метрике.

Mobile-friendly

48% мобильных пользователей испытывают разочарование и раздражение, если сайт плохо оптимизирован для работы с мобильными гаджетами. А 36% моментально уходят.

Ключевые параметры:

  • Большие кнопки.
  • Меньше текста.
  • Автоподстройка картинок под размер экрана.
  • Только вертикальный скроллинг.
  • Упрощенная навигация, не закрывающая весь экран.
  • Строка поиска на видном месте.

С апреля 2015 года Google начал поднимать mobile-friendly сайты в результатах выдачи и сильно понижать неоптимизированные.

Быстрый поиск

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

Обратите внимание на:

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

Резюме

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

Основные правила юзабилити в веб-дизайне

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

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

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

Основные принципы эффективного веб-дизайна

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

Как мы думаем?

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

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

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

Читателям на заметку: Если вас интересует дизайн и верстка журналов, то обращайтесь к Дмитрию Исправнику. Уверен, вы останетесь довольны взаимовыгодным сотрудничеством!

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

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

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

Не испытывайте терпение посетителя

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

Управляйте пользовательским вниманием

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

  • Расположены в верхней части экрана;
  • Соответственно ярко или экстравагантно оформлены для притягивания внимания.

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

Добивайтесь понимания в композиции

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

Стремитесь к простоте

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

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

«Я руководствовался одним правилом – всё сложное делаем простым»

Используйте эффективно текст

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

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

Общение с помощью «зрительного языка»

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

  • Организация. Всегда преследуйте последовательную и чёткую структуру. Продуманное взаиморасположение элементов сайта на экране, должны быть связь между ними;
  • Коммуникация. На сайте не должно быть много элементов для общения с посетителем, то есть форма комментирования, плюс гостевая книга и ещё что-нибудь, не должно быть на одной странице. Многие блогеры советуют использовать на сайте, до 3 шрифтов и 3 различных размера текста, так же в одной строке текста должно быть не более 50 – 75 символов или 18 слов;
  • Экономия. Экономьте время посетителя по максимуму – меньше графической и информационной нагрузки. Помните: понятность, простота, внимание, различность.

Традиции – очень важны

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

Тестируем всегда и постоянно

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

«Тестирование с одним пользователем в сто раз лучше, чем тестирование без пользователей вообще»

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

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

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