Блог Нетологии

Советы и обзоры для новых высот в карьере, бизнесе и жизни

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

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

«Нетология»  запускает новый курс по веб-дизайну и тоже задаетcя этим вопросом: кого мы готовим, творцов, ремесленников, или всё-таки профессионала, гармонично сочетающего в себе и то и другое?

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

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

1. Сперва определите цели веб-сайта

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

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


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

2. Сфокусируйтесь на пользователе

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

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

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

3. Добавьте эмоций

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

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


Какие из этих компаний позитивные? Расслабленные? Инновационные? Деловые?

4. Следуйте правилам графического дизайна

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

Кадрирование. Выбрать фото это только полдела. Другой вопрос как вы кадрируете фотографию перед размещением на сайте. Разные варианты могут позволить вам укрепить визуальную структуру страницы, или разрушить ее.

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

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

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

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

5. Выстраивайте четкую визуальную иерархию

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

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

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

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

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

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

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

 

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

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

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

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

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

8. Не злоупотребляйте дизайнерскими «фишками»

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

9. Тестируйте, измеряйте и улучшайте

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


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

 

Помните

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

Вы согласны с этими правилами веб-дизайна? Что-то добавите? Поделитесь комментарием!

Оригинал статьи — http://www.webdesignerdepot.com/2013/05/design-emotions-usability/

_________________

* Up-sell или поднятие суммы продажи – это мотивация покупателя потратить больше денег в вашем магазине, например, купить более дорогую модель того же продукта, добавить опции или услуги к приобретаемому продукту.

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

comments powered by Disqus

Видеокурсы по маркетингу и менеджменту

Присоединяйтесь к нам в соцсетях!

Сообщите о предложении или проблеме