Незначительные правила UI-дизайна, которые влияют на конверсию

Дизайн сайта играет важную роль в продвижении продукта. Именно решения веб-дизайнера влияют на то, каким будет первое впечатление пользователя, захочет ли он приобрести товар или услугу, порекомендует ли их друзьям, посетит ли сайт снова. И если UX-дизайн отвечает больше за техническое наполнение страниц, то зона ответственности UI — это внешний вид сайта, его визуал.

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

Что такое UI-дизайн и почему он важен для вашего сайта

Вы могли слышать о UI-дизайне в связке с UX — обычно эти два термина идут рука об руку. Как расшифровываются эти аббревиатуры и чем они отличаются между собой? Сейчас разберемся.

Если кратко, UX-дизайн (User Experience, в переводе — «пользовательский опыт») отвечает за то, как интерфейс сайта работает. А UI-дизайн (User Interface — «пользовательский интерфейс») отвечает за то, как он выглядит. UI-дизайнер определяет вид изображений, иконок и шрифтов, каким будет расположение элементов на странице, насколько гармонично все будет смотреться вместе в итоге. 

При этом визуальная составляющая сайта неразрывно связана с технической: он должен быть как понятным и приятным глазу, так и безупречным с точки зрения функционала. Поэтому обе задачи обычно выполняет один специалист — UX/UI дизайнер.

Отличия между UX и UI

Любой проект начинается с тщательной проработки UX-части: изучения конкурентов, определения потребностей, проблем и ожиданий пользователей. UX-исследования — это скелет вашего будущего продукта, в то время как UI — это его упаковка.

В задачи UX-дизайнера входит:

1. Создание стратегии и структуры проекта. Детальный анализ, определение целей, разбивка крупных задач на подзадачи, начертание плана действий и определение самого быстрого и простого пути к его исполнению. 
2. Варфреймы и прототипирование. Сформировав стратегию, необходимо проработать варфреймы, из которых позже создаются рабочие прототипы. Это — безликая схема сайта, которая определяет, как он будет работать, сколько разделов и страниц иметь.
3. Разработка и анализ. UX-дизайнеры принимают участие во всем цикле реализации продукта, координируя разработчиков и дизайнеров интерфейса. 

А чем тогда занимается UI-дизайнер? Он отвечает за то, как предварительный макет будет выглядеть в итоге и какую ассоциацию вызовет у пользователя. Его задача — создать интерфейс, который будет выделяться на фоне конкурентов и вызовет «вау-эффект». Для достижения этой цели используются различные цвета, типографика, инфографика, анимация и, конечно, основные правила дизайна. 

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

Как прорабатывать визуал сайта: четыре этапа 

Работая над проектом, UI-дизайнер выполняет несколько ключевых действий:

1. Составление мудбордов. Сначала подбираются референсы — как для продукта в целом, так и для каждой его составляющей. В результате этого шага у вас должно собраться достаточно примеров будущей работы, которые помогут воплотить идеи в жизнь. 
2. Создание мокапа. Мокап — это трехмерная модель проекта, с помощью которой можно наглядно продемонстрировать будущий дизайн. Здесь вам необходимо тщательно прорисовать все элементы будущего интерфейса и дизайна, причем сделать это внутри реального интерфейса телефона или браузера, учитывая пропорции и отличия между разными устройствами.
3. Интерактивный прототип. Это мокап нового уровня — его кликабельная версия, в которой нажатие на кнопки открывает соответствующие экраны. Таким образом можно оценить интерфейс еще до того, как он будет готов.

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

Какие существуют UI-стандарты?

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

Оптический баланс

Соблюдение оптического баланса в UI-дизайне — это создание визуального равновесия между всеми элементами интерфейса. Вот несколько ключевых правил оптического дизайна, которые стоит учитывать в работе:

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

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

Типографика

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

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

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

Пока вы не определились с общей картиной дизайна, не стоит выбирать слишком выразительные и вычурные шрифты. Также помните о золотом правиле дизайна: используйте не больше двух типов шрифтов в рамках одного проекта. Если вы хотите разнообразить тексты, можно остаться в пределах одной шрифтовой семьи (например, Alegreya и Alegreya Sans SC) и экспериментировать с жирностью и курсивом.

Цвет

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

1. Монохроматические палитры. «Семейство» из одного основного цвета, выбранные путем изменения его оттенков, яркости и насыщенности. Подходят для создания спокойной, гармоничной атмосферы и идеально вписываются в минималистичный дизайн.
2. Аналоговые палитры. Основаны на цветах, которые соседствуют друг с другом на цветовом круге. Создают гармоничные и приятные взгляду комбинации, используются для передачи атмосферы спокойствия и баланса.
3. Комплементарные палитры. Основаны на парах цветов, расположенных напротив друг друга на цветовом круге. Создают контрастные и динамичные сочетания, часто используются для привлечения внимания к определенным элементам на странице и общей картине в целом.
4. Прямоугольные (квадратные) палитры. Четыре цвета, расположенных на равных расстояниях друг от друга на цветовом круге. Позволяют создавать более сложные, но оригинальные комбинации. 
5. Триадические палитры. Три равномерно распределенных на цветовом круге оттенка. С такой палитрой получаются яркие и живые сочетания оттенков, они используются для создания энергичных и динамичных дизайнов.

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

Проще всего начать с подбора трех цветов в рамках выбранной палитры: основной цвет, вторичный и акцентный. Используйте правило 60/30/10, чтобы применить эти цвета к дизайну вашего сайта: 60% площади для основного цвета, 30% — для вторичного, и 10% — для акцентного. Первые два цвета можно использовать для блоков, текста и изображений, а третий — для CTA, плашек, кнопок и других небольших элементов.

Удобство для пользователя

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

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

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

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

9 правил UI-дизайна, о которых вы могли не знать

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

Если вы хотите перейти из разряда начинающих в категорию профессионалов в дизайне, вам понадобятся две вещи: знания и опыт. Все это вам обеспечат наши курсы по веб-дизайну. Среди них есть и бесплатные — например, вебинар «Знайомство з професією UX/UI дизайнер». Регистрируйтесь по ссылке и обучайтесь перспективной профессии, которая в будущем может принести вам стабильный уверенный доход.

Внимательное использование цветов

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

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

Контрастные элементы интерфейса и текст

Контраст — это разница в характеристиках различных цветов одного изображения. Этот параметр выражается в виде коэффициента от 1:1 до 21:1. Чем более выражено отличие между цветами, тем он выше: например, белый текст на белом фоне имеет контрастность 1:1 (самый низкий показатель), тогда как белый текст на черном фоне будет иметь коэффициент 21:1 (самый высокий). Измерить и изменить контрастность различных цветов можно с помощью сотен удобных онлайн-инструментов.

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

Считается, что UI-элементы (поля форм и кнопки) должны иметь контрастность не менее 3:1. В ином случае некоторым пользователям будет сложно распознать элементы и воспользоваться ними, а значит и общее впечатление от сайта и продукта будет испорчено. 

У текста тоже есть свои рекомендуемые стандартны контрастности:

• для мелкого текста (18px и менее) параметр должен составлять минимум 4.5:1;
• для крупного текста (более 18px с жирным начертанием или более 24px с обычным начертанием) — не менее 3:1.

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

Шрифты без засечек с высокими строчными буквами

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

Вот несколько примеров таких шрифтов:

• Open Sans
• Roboto
• Lato
• Montserrat
• Source Sans Pro
• Helvetica
• Proxima Nova
• Futura
• Avenir

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

Группировка связанных элементов

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

Несколько способов группировки элементов, которые можно использовать:

1. Пространственное разделение. Внутренние промежутки между элементами нужно сделать меньше, чем внешние. Например, кнопки, которые относятся к одной и той же функции, можно расположить рядом.
2. Использование контейнеров. Элементы могут быть размещены внутри блоков, панелей или карточек. Это помогает создать наглядное визуальное разделение — сразу видно, что к чему.
3. Цветовая и стилевая группировка. Объединяем элементы в группы на основании их цвета, стиля или других визуальных схожестей. Например, все заголовки на странице могут быть одного оттенка, а ссылки — другого.
4. Логическая группировка. Элементы могут быть объединены на основе их функциональности или отношений друг с другом. Например, все что относится к оформлению заказа на сайте интернет-магазина можно сгруппировать (онлайн-форма, кнопка оформления заказа, выбор цвета и других параметров).

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

Меньше Caps Lock

Использования больших букв в дизайне интерфейса веб-сайтов и приложений лучше избегать. Во-первых, ТАКОЙ ТЕКСТ банально труднее читать. Интерфейс сразу становится более запутанным для пользователя и утомляет его. Во-вторых, Caps Lock часто воспринимается как крик или грубое выражение. Мы автоматически читаем текст с большими буквами с ярко окрашенной интонацией. Это может сбивать и создавать ненужные ассоциации, особенно в сфере продаж.

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

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

Избегание чистого черного и белого цветов

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

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

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

Последовательность в мельчайших деталях

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

1. Единый стиль оформления. Все элементы интерфейса (кнопки, поля ввода, заголовки и т.д.) должны иметь одинаковый стиль — согласованные цвета, шрифты, отступы и другие визуальные атрибуты.
2. Последовательное расположение элементов. Например, если кнопка «вход» находится в верхнем правом углу на одной странице, она должна быть в том же месте и на других.
3. Общепринятые иконки и символы. Используйте однозначные и понятные элементы в интерфейсе. Также следите за тем, чтобы они имели одинаковый визуальный вес. Если с заливкой — то все, а не вразнобой. Лучший вариант — линейные иконки с толщиной обводки 2pt и скругленными углами.
4. Единая логика взаимодействия. Пользовательская логика взаимодействия должна быть последовательной. Например, если на одной странице для смены языка используется выпадающий список, то на других страницах этот механизм должен быть таким же.

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

Выравнивание текста по левому краю

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

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

Высота строк от 1,5 до 2

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

Детальнее познакомиться с профессией UX/UI дизайнера и узнать другие секреты профессии можно на нашем бесплатном вебинаре. Регистрируйтесь и осваивайте перспективный навык, способный принести вам новое высокооплачиваемое хобби.