Если сказать веб-дизайнеру: «Хотим сайт как у [название известного бренда]», тот, конечно, может собрать все свои дизайнерские скилы и приблизиться к эталону вроде сайта Apple, но в 99% случаев клиенту это просто не нужно. У его бизнеса другие задачи и другая целевая аудитория. А задача веб-дизайнера — сделать так, чтобы сайт был удобным и оставлял приятные впечатления.
Единых критериев оценки «удобства» не существует, но есть несколько приемов, которые помогают удерживать внимание новых посетителей. Как расположены и насколько привычны стандартные блоки, понятны ли формы регистрации, сколько шагов нужно сделать до оформления заказа и не вызывают ли отторжения цветовая схема и иллюстрации — все это повлияет на общее впечатление и определит дальнейшие действия пользователя.
Поговорим о том, как стимулировать посетителя подольше остаться на вкладке с сайтом и совершить целевое действие.
На что обратить внимание при разработке функционала
Пользователя, который впервые оказался на сайте, можно сравнить с посетителем продовольственного супермаркета. Последний знает, что на полках с охлаждением хранится мясо, рыба и полуфабрикаты, кондитерский отдел расположен по соседству с хлебным, а сухарики и чипсы нужно искать рядом со слабоалкогольными напитками. Ваша задача — сделать так, чтобы у посетителя сайта не иссяк запал и он быстро нашел то, зачем пришел: узнал физический адрес, убедился в вашей экспертности, оформил заказ, прочитал полезную статью или новость. И в первую очередь это зависит от того, насколько хорошо вы проработаете функционал. Что важно сделать:
- Разберитесь, чем сайт будет полезен посетителям, — от этого зависит его наполнение. В интернет-магазинах ищут конкретные товары по нормальной цене (чем меньше, тем лучше) и с понятной процедурой покупки. А на сайте автосалона — детальные характеристики автомобилей и форму записи на тест-драйв.
- Нарисуйте портрет или несколько портретов ваших потенциальных покупателей. Выясните, что это за люди, чем они интересуются, где живут, чем руководствуются перед тем, как принять окончательное решение. И заметьте, это не те, кого вы бы хотели видеть клиентами, а самые что ни на есть настоящие клиенты!
Магазин мужской одежды Diplomat разместил на сайте фотографии своих знаменитых клиентов. Маркетологи не только знают целевой портрет покупателя, но и предлагают другим посетителям соотнести себя с ним
- Определитесь, какие бизнес-задачи будет решать сайт. Возможно, вы не справляетесь с потоком заявок по телефону или часто сталкиваетесь с возражениями — отработать их, а заодно доказать компетентность можно именно на страницах сайта.
- Узнайте, как сайт с похожими задачами реализовали конкуренты. Возьмите у них лучшее и постарайтесь не повторить ошибки. Если конкуренты предлагают заполнить длинную форму регистрации, сделайте ее короче и понятнее, чтобы пользователь не совершал лишних действий, — правда, ему просто не хватит жизни, чтобы заполнить все эти невероятно длинные и скучные формы, которые подкидывает интернет.
Компания, которая планирует заняться доставкой цветов, может подсмотреть у этого конкурента, как реализовать выбор подходящего букета прямо на главной странице
- Продумайте структуру будущего сайта так, чтобы она была удобной будущим посетителям и понятной поисковым роботам, а затем для каждой страницы выберите наиболее подходящий набор компонентов.
Когда у нас есть компоненты — строительные блоки — будущего сайта, продумайте их размещение и расположение в пространстве. Это еще не совсем дизайн в чистом виде, а скорее то, что сделает его удобным. Изобретать ничего не нужно: все уже описано в основных принципах UX — user experience, он же «опыт пользователя».
Что такое UX и почему его нельзя игнорировать
UX — это не про визуальный интерфейс, а про опыт взаимодействия пользователя с сайтом: какой путь он проходит до совершения целевого действия, что для этого предпринимает и какими будут его впечатления от работы с сайтом. Базовые законы UX желательно изучить заранее и применить их на этапе разработки дизайна, чтобы долго и мучительно не вносить правки потом или, в худшем случае, страдать от низкой конверсии. Подробно и доступно об этих законах рассказывает на своем сайте Laws of UX известный дизайнер пользовательских интерфейсов Джон Яблонски (Jon Yablonski).
Краткое содержание UX-законов
Закон Фиттса — время для принятия решения и выполнения точных действий на сайте напрямую зависит от размеров цели. Переместить курсор и кликнуть по крупной кнопке проще, чем по маленькой, зажатой между другими элементами интерфейса.
Чем меньше цель, тем сложнее в нее попасть
Закон Хика — чем больше и сложнее варианты выбора, тем больше трудностей испытывают пользователи.
Окружите пользователя десятком разных вариантов — и он запутается быстрее, чем сделает выбор
Закон Якоба — люди проводят много времени на множестве разных сайтов и ожидают, что ваш будет работать так же, как и остальные.
Закон прегнантности — люди воспринимают сложные и неоднозначные элементы так, как им проще.
Чем запутаннее элемент, тем сильнее человеческий мозг будет стараться упростить его
Закон близости — если несколько объектов расположены близко друг к другу, пользователи считают их родственными или объединенными в группу.
Элементы, расположенные близко друг к другу, воспринимаются человеческим мозгом как единое целое
Закон Миллера — пользователь может удержать в кратковременной памяти не более семи элементов. Не стоит перегружать интерфейс лишними, пусть и красивыми, деталями, которые отвлекают внимание от главного. Например, нежелательно скрывать названия пунктов меню за кнопками с общими фразами: вместо кнопки «Подробнее» лучше использовать кнопку «Узнать больше о нашем предложении».
Закон Миллера учитывает ограничение на емкость кратковременной памяти человека
Эффект края (серийного расположения) — пользователи лучше запоминают первые и последние элементы серии.
То, что пользователь увидит первым и последним, запомнится ему лучше, чем промежуточные элементы
Закон Теслера (сохранения сложности) — для любой системы, включая сайт, есть свой минимальный предел сложности, который невозможно сократить.
Лучше потратить дополнительную неделю разработки на то, чтобы упростить интерфейс, чем пользователи сайта потратят тысячи часов на то, чтобы в нем разобраться
Эффект Ресторфф (эффект изоляции) — если среди однотипных объектов попадается один, который сильно от них отличается, то пользователи запомнят его лучше всего.
Элемент, не похожий на остальные, запоминается сильнее всего
Разница между UX, UI и юзабилити
Говорим о UX — подразумеваем юзабилити, или usability («удобство и простоту использования»). Хотя это не тождественные понятия, их часто путают. На самом деле юзабилити — это про дружественный, понятный и естественный в использовании сайт. Общие параметры юзабилити описаны в стандарте ISO 9241-210, а детально на русском узнать об удобном для людей проектировании интерактивных систем (Human Centered Design, HCD) можно здесь.
Этапы проектирования дизайна интерактивной человекоориентированной системы согласно стандарту ISO 9241-210
На популярном ресурсе Techopedia — аналоге «Википедии» для технарей — помимо определения юзабилити можно найти и общие критерии его оценки:
- Адаптивный дизайн: сайт органично выглядит и им одинаково удобно пользоваться на разных устройствах — PC, «маках», смартфонах, планшетах и ноутбуках.
- При его разработке используются общепризнанные практики: оптимального размера и цвета шрифты, логичное расположение блоков, которое позволяет быстро изучить страницу, пробежавшись по ней взглядом по диагонали.
- Информация подается естественным способом: это о том, как владельцы сайта обращаются к посетителям и как с помощью визуальных приемов подталкивают их к использованию функциональных элементов.
В других экспертных источниках встречаются другие критерии оценки юзабилити: доступность сайта, актуальное наполнение, возможность получить обратную связь, интуитивный интерфейс, для понимания которого не нужны дополнительные инструкции, подтверждение реальности компании и стоящих за ней людей. А специалист по юзабилити Якоб Нильсен убеждает, что веб-интерфейс должен быть еще и соблазнительным (seductive interface). Рекомендую прочитать его статью Seductive User Interfaces хотя бы ради того, чтобы увидеть, как можно органично использовать слова «соблазнительный» и «чувственный» применимо к юзабилити.
Пример размещения актуальной информации на главной странице демонстрирует сайт аутлета крупного розничного магазина Zappos: здесь есть информация о пандемии COVID-19, розыгрыше смартфона и летних предложениях.
6PM: главная страница информирует посетителя о самом важном
На сайте HPE, крупнейшего поставщика корпоративных IT-решений, акцент сделан на кнопку обратной связи и использованы названия категорий, которые не нуждаются в пояснениях: «Продукты и решения», «Услуги», «Поддержка» и так далее.
На сайте HPE сложно растеряться с выбором — все пункты понятны и логичны
Кроме юзабилити UX путают с UI (User Interface), который часто называют графическим дизайном. На самом деле UX — это про то, насколько интерфейс полезный в решении задачи пользователя. А UI — насколько он красивый. Получается, что UX базируется на технических принципах, в то время как UI ближе к искусству. Именно UI определяет, насколько интерфейс сайта будет притягательным, вызывающим живой интерес у пользователя.
Чтобы будущий сайт был действительно удобным и понятным, мало ознакомиться с принципами юзабилити, UX и UI. Желательно, чтобы в его разработке участвовали специалисты с соответствующими компетенциями. Например, за UX/UI отвечают UX- и UI-дизайнеры и тестировщики, а для оценки юзабилити в целом могут привлекаться проектировщики, маркетологи, дизайнеры и даже психологи. Конкретно UI-дизайнера можно сравнить с наставником, который помогает пользователю быстро, без лишнего напряжения и стресса разобраться, как работать с сайтом.
Читайте также
Как сделать сайт не только удобным, но и красивым
Дизайнеры шутят, что «верблюд — это лошадь, сделанная с учетом всех пожеланий заказчика». Как всегда, в шутке есть доля правды и намек на то, что не стоит загонять в строгие рамки, а лучше довериться творческому чутью специалиста. Вам по-прежнему нужно, чтобы пользователи решали с помощью сайта конкретные проблемы, но не забывайте, что у них должны остаться приятные впечатления от взаимодействия с ним.
Ищите источники вдохновения
Использовать для вдохновения чьи-то идеи не стыдно, в чем убеждает нас Остин Клеон, автор бестселлера «Кради как художник». Книга не учит уходить от ответственности, бессовестно копируя конкурентов, зато помогает прокачать креативность. А если вы считаете себя визуалом, ищите вдохновение на сайтах Behance, dribbble, Awwwards, Site See, Land-book или 99designs.
Главная страница 99designs встречает модными цветовыми схемами и подборкой трендов
Если с идеями возникает кризис, то можно вдохновиться необычными решениями. Подсмотреть нестандартную схему навигации можно на сайте lg2.com.
На сайте аренды автомобилей Sally во время скроллинга пользователь чувствует себя за рулем автомобиля.
А российская компания «Молочная культура» сделала акцент на стаканчике с молоком, который шустро перемещается при скроллинге.
Учитывайте тренды 2020 года в дизайне сайтов
В Shutterstock проанализировали глобальные тенденции в дизайне на 2020 год и выяснили, что к нам возвращаются 1920-е с их шиком, элегантными геометрическими фигурами и элементами стиля ар-деко, магическими символами и яркими флористическими композициями. В тренде минималистичный черный, абстрактные темные фоны и эксперименты с каллиграфией. А главными цветами года в Shutterstock назвали Lush Lava, Phantom Blue и Aqua Menthe. Ниже — коллажи, которые отражают главные тенденции 2020 года в дизайне.
Коллажи, подготовленные дизайнерами Shutterstock
В блоге глобальной креативной платформы 99designs рассказали, что тренды текущего года во многом определят вектор развития графического дизайна в следующем десятилетии. Главными тенденциями авторы блога называют ультратонкие геометрические фигуры, дымчатые текстуры, крупные шрифты и такие же контрастные элементы. Также мы ожидаем от 2020-го много ярких, смелых оттенков, неоновые свечения и набирающие популярность киберпанк и стрит-арт.
Вместо заключения
- Удобный сайт — это не компромисс между функциональностью и дизайном, а их синергия.
- Используйте законы UX, чтобы сделать сайт более удобным.
- UX — про то, как пользователь взаимодействует с сайтом, а UI — как воспринимает его с эстетической точки зрения. Уделите внимание UX, UI, а еще не забудьте о юзабилити.
- При разработке дизайна обращайте внимание на тренды и ищите источники вдохновения — сайт должен быть не только удобным и соответствовать запросам посетителей, но и вызывать у них приятные эмоции.
Комментарии