Ваш браузер не поддерживает свойств CSS3 и HTML5.
Загрузите и установите один из современных, безопасных и бесплатных браузеров: Safari, Chrome или FireFox, чтобы насладиться всеми возможностями современного интернета и этого сайта в том числе.

Эффективный веб-дизайн

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

ТОЛЬКО ТЕКСТ

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

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


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


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

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


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


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

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


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


4. Используйте особенности экспозиции.

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


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


5. Использование эффективного копирайтинга.

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


- используйте короткие и краткие фразы,

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

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

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

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


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


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

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


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


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


8. Используйте визуальную коммуникацию.

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


1. Организация: предоставьте пользователю четкую и последовательную концептуальную структуру.

2. Экономия: используйте наименьшее количество сигналов и визуальных элементов.


3. Общение: учитывайте возможности пользователя

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


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


9. Стандарты - наши друзья.

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


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


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


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


10.Чаще тестируйте web страницы.

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


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


Некоторые важные моменты:

- По словам Стива Круга, тестирование одного пользователя является на 100% лучше, чем не тестирование ни одного пользователя. Тестирование в самом начале проекта лучше, чем тестирование ближе к концу.

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

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

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


Автор: Екатерина Хетагурова

Благодарим за поддержку:

Nicolas Gallagher, Sven Albrecht,Tab Atkins, Chris Coyier, Michelangelo, Chris Spooner, Marco Kuiper, Cameron Moll, Andy Clarke, Soh Tanaka, Dan Zambonini, Zoe Mickley Gillenwater, Smashingmagazine, CODROPS, Code.Google, Developer.apple, jQuery, Ajax.googleapis, Modernizr.

Читайте статьи и следуйте за нами на Twitter