Smartial Wayback Machine Text Extractor

Live version of this page exists.

https://web.archive.org/web/20101003044816/http://pod.seodays.ru:80/2009/04/10-principov-effektivnogo-veb-dizajna/

This article contains 13 images. You will find them at the very end of the article.

This article contains 349 words.

Seo блог подкасты podcast podcasting » 10 принципов эффективного веб-дизайна

апреля 21, 2009

автор admin

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

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

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

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

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

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

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

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

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

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

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

Картинки показывают: последовательность того, как человек анализирует страницу.

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

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

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

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

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

На Beyondis.co.uk пользователь прежде всего обратит внимание на девиз компании.

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

На сайте ExpressionEngine схожая с Beyondis.co.uk структура, но кроме того предоставляется возможность попробовать услуги и скачать продукт.

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

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

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

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

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

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

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

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

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

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

На Humanized.com прекрасно использован принцип фокусировки. Единственным элементом, на который мы останавливаемся только попав на сайт – слово «бесплатно». Таким образом, как бы подталкивая нас попробовать бесплатную продукцию этой компании.

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

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

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

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

Dibusoft.com сочетает в себе чёткую структуру сайта и привлекательный дизайн.

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

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

5. Эффективное использование текста.

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

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

Eleven2.com яркий пример хорошего использования текста.

Оптимально:

Использование коротких и лаконичных фраз;
Чёткая структура статьи (Использование иерархий заголовков, подзаголовков разделов, выделение маркерами элементов списка и т.д.)

6. Стремление к простоте.

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

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

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

Finch чётко предоставляет пользователям информацию, без другого «мусора».

7. Не бойтесь пробелов.

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

Чем сильнее чувствуется визуальная иерархия, тем легче воспринимается информация.

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

8. Эффективное общение с помощью «зрительного языка».

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

Организация. На сайте должна быть чёткая и последовательная структура. Взаиморасположение элементов на экране, их связи, форма экрана.
Экономия. Количество подсказок и визуальных элементов должно быть наименьшим. Следует учитывать 4 основных момента: простота, понятность, различность, внимание. Простота: максимально простое восприятие элементов. Понятность: все элементы должны быть спроектированы таким образом, что бы они не были двусмысленными. Различность: элементы должны отличаться друг от друга. Внимание: наиболее важные элементы должны легко восприниматься.
Коммуникация. Сайт не должен быть перегружен лишними элементами коммуникации с пользователем. Следует помнить, что оптимальным является использование максимум 3 шрифтов и 3 различных размер, так же в каждой строке текста не должно быть более 18 слов или 50-80 символов.

9. Традиции наши друзья.

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

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

10. Начинаем тестировать на начальном этапе. Тестируем как можно чаще.

Этот принцип (в оригинале, TETO – test early, test often) необходимо применять к каждому веб-проекту, так как юзабилити тесты помогают выявить самые большие проблемы с дизайном сайта.

Важные моменты:

«Тестирование с одним пользователем в 100 раз лучше, чем тестирование без пользователей вообще, а тестирование с одним пользователем в начале проекта лучше, чем с 50 в конце», - говорит Стив Круг. В соответствии с первым законом Боэма, ошибки чаще всего закрадываются при начальных этапах проектирования и дизайна, чем позже они исправляются, тем дороже это стоит.
Тестирование есть итерационный процесс. Если тестирование будет проводиться после каждого внесения изменений, это позволит найти проблемы, которые были незамеченными при первых этапах.
Тесты юзабилити всегда дают полезные результаты. Осознание наличие или отсутствие ошибок в проекте, тоже важные знания.
«Разработчики не способны тестировать продукт», - говорит закон Вайнберга. Это же применимо и к дизайну, для того что бы найти ошибки, надо взглянуть на проект по-новому.