Дизайн = эмоции+юзабилити

 

Веб-дизайн, юзабилити, иерархия

 

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

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

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

1.    Во-первых, определить цели

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

 

Веб-дизайн, юзабилити, иерархия

 

Чтобы лучше понять это, взглянем на Amazon. Их цель – максимальное увеличение объема продаж. Они используют «up-sell» (маркетинговый ход для увеличения числа продаж, основанный на увеличении числа покупателей, что поднимает сумму продаж – прим.переводчика) и «cross-sell» (другой маркетинговый ход для увеличения числа продаж, основанный на увеличении суммы «среднего чека» — прим.переводчика) для того чтобы максимизировать покупательскую способность каждого пользователя, но этого мало, вдобавок они замедляют процесс покупки. В отличии от многих конкурентов, на Amazon нет кнопки «купить сейчас» в результатах поиска, т.е. для покупки необходимо посетить еще одну страницу (с потенциальными upsells). Это прекрасный пример того, как дизайн может соотноситься с четкими бизнес-целями.

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

 

2. Во-вторых, сосредоточьтесь на пользователях

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

  • Ориентируемся на мужчин или женщин?
  • Уровень образования?
  • В каких населенных пунктах живут?
  • Хобби?
  • Уровень дохода?
  • Кто покупает детские автомобили? Дети? Родители? Бабушки и дедушки?

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

 

3. Дизайн для ощущений

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

 

4.    Помните о правилах визуального дизайна

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

  • Обрезка: выбор фотографий – полдела, кадрирование – это то, что делает или портит всю страницу.
  • Аккуратней с пространством: следите за полями, отступами, расстоянием между строчками. Это как разница между Нью-Йорк Таймс и газетой средней школы.
  • Шрифты: все любят выбирать шрифты, но профессионал может подобрать нужный шрифт за секунды и использует на сайте 1-2 шрифта (не считая шрифт логотипа, который часто является его собственным)
  • Цвет: один из самых сложных вещей для дизайнера, его сложно использовать эффективно. Есть множество правил для подбора удачной цветовой гаммы, в то же время, из-за популярности онлайн-генераторов цветовых палитр, мало кому хочется тратить время на создание собственной.
  • Макет: создайте визуальный «поток», чтоб пользователь шел по странице, куда вам хочется, и исключите элементы, отвлекающие пользователя от целей проекта.

 

5.Простройте чистую, четкую визуальную иерархию

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

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

 

Веб-дизайн, юзабилити, иерархия

 

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

  1. Название статьи должно быть самым заметным элементом на странице. Сейчас оно даже меньше, чем подзаголовки ниже по странице. Так что я увеличил размер шрифта заголовка и уменьшил шрифт подзаголовков.
  2. Заголовок ниже был оторван от текста, к которому он относится, поэтому я уменьшил расстояние под заголовком, увеличив его пространство вверху, чтобы пользователь видел, что этот заголовок относится к тексту ниже.
  3. Я также перенес небольшое изображение –рядом с заголовком статьи- с левой стороны вправо. Таким образом пользователь, просматривая текст по левой стороне страницы, сможет держать заголовок в поле зрения.
  4. Я удалил границы и заливки синим, чтобы ничто не конкурировало с названием статьи. Я заменил синий на серый цвет, который здесь наиболее уместен.
  5. Я также удалил отвлекающий текст и изображение, выдвигающееся на первый план. То есть это перепечатка статьи, помимо этого я убрал пустые абзацы и теги <HR>.

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

 

Веб-дизайн, юзабилити, иерархия

 

6. Будьте последовательным

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

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

 

7. Нарушайте правила (если это необходимо)

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

 

Веб-дизайн, юзабилити, иерархия

 

8.Не злоупотребляйте «трюками»

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

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

9. Протестируйте и улучшите

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

 

Веб-дизайн, юзабилити, иерархия

 

Путем тщательного исследования результатов некоторых незначительных конструктивных изменений (слева – первоначальная целевая страница, справа – новая), мы обнаружили, что процент регистраций увеличился на 60%!

Запомните

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

 

 

 

 

Пройдите курс "Профессия веб-дизайнер" за 10 дней бесплатно:



Понравилась статья?
Сделайте доброе дело — поделись ей со своими друзьями и коллегами, кликнув по всем кнопкам соц.сетей:

Нравится
comments powered by HyperComments