Насколько глубоко понятие веб-дизайн? Что важно при создании Landing Page или интернет-магазина, блога или корпоративного сайта? Несомненно, внешний вид и информативность. Но, между тем, маркетологи и сами пользователи в большинстве говорят о том, что не менее важно веб-дизайнеру думать и о том, удобно ли посетителю будет на сайте. Веб-дизайн или редизайн – это гораздо больше, чем графический дизайн в общепринятом понятии: цвет, формы, размеры. Иногда, излишне увлекаясь размещением и рисованием кнопочек или инфоблоков, можно забыть о том, а уместно ли обилие этих элементов, расположены ли они там, где взгляд посетителя их ожидает.
Почти 88% пользователей интернета всегда уверяют в том, что если сайт с первого раза им не приглянулся, они что-то не поняли и прочее, то они почти никогда не возвращаются на него. Именно поэтому дизайн сайта, в большей степени, основывается на пользовательском опыте или, как его чаще называют, User eXperience Design, или просто UX.
О сложном UX в двух словах
User eXperience Design не дизайн в том виде, что мы привыкли понимать под этим словом. Это проектирование взаимодействия и поведения пользователя на сайте в целом, на страницах сайта. Что он должен увидеть/прочитать, вариативность его кликов далее и следующая информация (это если условно). При этом сам пользователь уже имеет некий опыт взаимодействия с разными по типу сайтами, а потому, приходя на новый (для него), он ожидает чего-то знакомого и понятного ему, того, к чему он привык за многие и многие годы. Примеры сайтов NVidia и Microsoft наглядный тому пример. И дело не в том, что шаблоны самих сайтов похожи, а в том, что информация систематизирована и удобно размещена, даже ожидаемо, что новости и ключевые моменты будут представлены на главной странице.
Таким образом, использование пользовательского опыта в веб-дизайне - это учет и особенности применения графики, фотографий, создания понятной и наглядной навигации, разработка «подачи» информации и контента на страницах сайта. И, да, несмотря на то, что пользовательский опыт преимущественно понятен каждому, веб-дизайн, в целом, иногда получается весьма неудачным и посещаемость ресурса не возрастает с течением времени даже при условии интересного контента. И проблема как раз в том, что, например, навигация, удобная для веб-дизайнера, для конечного пользователя остается загадкой.
UX-дизайн важен не только для самого веб-мастера, о нем говорит и заказчик, когда определяет для каких целей ему нужен сайт. И, разумеется, что немаловажную роль User eXperience Design играет во время редизайна. Мы рассмотрим основные моменты пользовательского опыта и как он реализуется на разных сайтах. И даже то, как не стоит делать.
Визуальная иерархия
Цель визуальной иерархии – сообщить быстро и понятно посетителю в течение первых 2-4 секунд о чем сайт, как им пользоваться и зачем он ему вообще нужен.
Defringe
Блог о креативных достижениях в мире. Статьи, фотографии и рассказы. При этом верхнее меню сразу позволяет узнать о сайте, открыть список категорий статей, заняться поиском. Информация находится буквально на поверхности и становится понятно, что и зачем.
HARRY'S
Проект германского бренда HARRY'S, под которым выпускаются мужские принадлежности для бритья и сами бритвенные станки, существует и технологическое подразделение. В первую очередь, сайт ориентирован на интернет-магазин, а уже затем на подробности о компании. Поэтому все статьи, новости, вопросы и ответы можно найти внизу, а информацию о продукции и возможности заказа в верхней части.
Фокус на главном
Иногда сайты создаются для большого объема информации. Ну вот, не деться никуда и она должна быть. Но это не значит, что все «тексты» должны быть размещены в том количестве, чтобы все уместилось на одной главной страннице, с мыслью: «а вдруг не дочитают». Мы рассказывали уже о важности использования пространства в веб-дизайне. Вот именно это и важно здесь.
Invisionapp
Компания рассказала о своем продукте (командная работа над дизайном и макетом сайта, прототипами) кратко и лаконично, хотя о нем говорить и пояснять принципы работы можно долго и подробно. Часть информации была убрана на отдельные страницы, другая коротко предстала на главной.
Apple
Компания Apple также коротко рассказывает о своих новых продуктах. Но при этом все подробности и особенности каждого момента (дизайн, графические возможности, производительность и пр.) выносит на отельные страницы и представляет в виде больших и интересных статей. Таким образом, визуально человеку понятно, какой и где новый моноблок, ему легко найти нужное и уже этот конкретный вопрос изучить подробнее.
Наглядная навигация
В течение многих лет можно было увидеть на сайтах маленькую и аккуратную ссылочку «карта сайта». Сейчас она встречается редко, только на тех сайтах, которые имеют необычный дизайн или реально имеют очень много и разного контента. Сейчас навигация становится проще и понятней, ибо никто не хочет, чтобы посетитель потерялся на сайте или тратил много время на поиск чего-либо. Поэтому навигацию стараются создать интуитивно-понятной, используя даже общеизвестные иконки.
Рив Гош
Один из популярных и удобных интернет-магазинов. В меню существуют пункты для мужчин и женщин, отдельно парфюм и макияж, уход за волосами и прочее, несмотря на то, что многие категории имеют общие переходы и подкатегории. Здесь также есть и поиск, и корзина на виду.
Robstep
Интернет-магазин товаров бренда Robstep. Имеет сообразную новаторскую находку в навигации. Категории товаров представлены не в виде меню, а в виде пиктограмм, а в меню разместилась та информация, что обычно находится в конце страниц (о доставке, faq, контакты и пр.).
Bellroy
Компания специализируется на создании компактных и удобных бумажников. Меню простое и наглядное. Интересуют коллекции? Есть подкатегории с иконками. Магазин? Аналогично. Если говорить о вертикальной иерархии, то и контент представлен поэтапно. Посетителям удобно почитать и посмотреть вариации чехлов для смартфонов или бумажников, кошельков.
Walmart
Пример не лучшего варианта навигации, для наглядности. Интернет-магазин walmart.com продает все, что угодно. И казалось бы навигация подробная, структура иерархична, все красиво и понятно. Но попробуйте перейти в категории товаров. Найти необходимое крайне сложно, тем более что в разных браузерах навигация работает по-разному и не всегда умещается в окно.
Отзывчивость
Иногда это понятие называют как адаптивность. Все больше людей сейчас пользуются смартфонами или планшетами/ноутбуками/нетбуками. Поэтому, если сайт не будет отображаться на этих устройствах корректно и красиво, то и толку-то от него будет мало. Иногда веб-мастера создают отдельный вид мобильного сайта, если десктопная версия имеет уникальный графический дизайн или много информации. Но иногда, как, например, в Китае, мобильная версия сайтов стоит в приоритете.
Harrys
Мы рассказывали о проекте выше. В данном случае компания решила создать отдельную мобильную версию, которая сразу загружается с малой шириной.
Лэтуаль
Интернет-магазин косметики и парфюмерии, наоборот, не имеет мобильной версии сайта. Если открыть сайт на смартфоне, то он отобразиться с мелким шрифтом, махонькими картинками и прочее. Но они компенсировали это мобильным приложением.
Gismeteo
Ресурс прогноза погоды Gismeteo имеет десктопный вид сайта - узкий и в одну колонку. Но при открытии его на смартфоне адрес меняется на мобильный и дизайн тоже в корне изменяется.
Adobe
Дизайн сайта Adobe.com наглядный пример адаптивности. В десктопной версии все крупно и наглядно, но при открытии на смартфоне немного уменьшается шрифт и картинки, при этом наглядность не исчезает. Сайтом удобно пользоваться, удобно читать информацию.
Завершая рассказ
Каждый веб-мастер хочет быть фаворитом в постоянно меняющемся мире веб-дизайна. И это, действительно, замечательно, но, не рискуя оттолкнуть пользователей. Интернет в течение последних 30 лет стал одним из основных частей нашей жизни, а потому люди уже имеют не только привычки, но и ожидания, если говорить о навигации. Пусть сайт будет внешне простоват или с большими текстовыми и графическими блоками, но он будет понятен и приятен.
Разумеется, мы осветили только малую толику того, из чего складывается пользовательский опыт в веб-дизайне. Но все прочее - это моменты тестирования и интерпретирования разных точек зрения, это анализ поведения на сайте, интересов целевой аудитории. Даже подбор цветовой гаммы и шрифтов - тоже относится к UX.
Если сайт выглядит круто и просто «вау!», это ещё не означает, что он будет иметь успех, что продажи товаров взлетят до небес, а блог будут читать по 1000 человек в день. Каждый аспект веб-дизайна должен привносить что-то свое и помогать создавать совокупность, которая зовется – «сайт» и дарить незабываемые впечатления для посетителя.