8 принципов веб-дизайна, которые будут работать в 2020 году
Опубликовано: 2021-07-22Дизайн вашего веб-сайта важнее для конверсии, чем вы думаете. Вы можете реализовать любую тактику повышения конверсии в мире, но если ваш веб-дизайн выглядит как дерьмо, это не принесет вам особой пользы.
Дизайн - это не только то, чем занимаются дизайнеры. Дизайн - это маркетинг. Дизайн - это ваш продукт и то, как он работает. Чем больше я узнаю о принципах веб-дизайна, тем лучше получаю результаты.
Бесплатный курс UX и юзабилити
Переходите от принципов к практике. Посмотрите бесплатные курсы по UX и юзабилити.
Вот 8 эффективных принципов веб-дизайна, которые вы должны знать и соблюдать.
1. Визуальная иерархия
Смазывают скрипящие колеса, а привлекательный внешний вид привлекает внимание. Визуальная иерархия - один из важнейших принципов хорошего веб-дизайна. Это порядок, в котором человеческий глаз воспринимает то, что видит.
Упражнение. Расположите кружки в порядке важности:
Не зная ничего об этих кругах, вы могли ранжировать их
без труда. Это визуальная иерархия.
Некоторые части вашего веб-сайта более важны, чем другие (формы, призывы к действию, ценностные предложения и т. Д.), И вы хотите, чтобы они привлекали больше внимания, чем менее важные части.
Если в меню вашего сайта 10 пунктов, все ли они одинаково важны? Где вы хотите, чтобы пользователь щелкнул? Сделайте важные ссылки более заметными.
Иерархия не зависит от размера. Amazon делает кнопки призыва к действию «Добавить в корзину» и «Купить сейчас» более заметными, используя цвет:
Начните с бизнес-цели
Вы должны ранжировать элементы на своем веб-сайте на основе вашей бизнес-цели. Если у вас нет конкретной цели, вы не будете знать, что делать в первую очередь.
Вот пример. Это скриншот, который я сделал с веб-сайта Williams-Sonoma. Они хотят продавать уличную посуду.
Больше всего привлекает внимание огромный кусок мяса (заставьте меня захотеть его), за которым следует заголовок (скажите, что это такое) и призыв к действию (получите). Четвертое место занимает абзац текста под заголовком; пятый - баннер бесплатной доставки, а верхняя навигация - последняя.
Это визуальная иерархия - вневременной принцип веб-дизайна - хорошо сделана.
Упражнение. Просматривайте веб-страницы и сознательно ранжируйте элементы в визуальной иерархии. Тогда зайдите на свой сайт. Не находится ли что-то важное (например, ключевая информация, которую ищут посетители) слишком далеко в иерархии? Сделайте это более заметным.
2. Божественные пропорции
Золотое сечение - это магическое число 1,618 (φ). Считается, что дизайны, в которых используются пропорции, определяемые золотым сечением, эстетичны.
Затем есть последовательность Фибоначчи. Каждый член представляет собой сумму двух предыдущих членов: 0, 1, 1, 2, 3, 5, 8, 13, 21 и так далее. Интересно то, что две, казалось бы, не связанные между собой темы дают одно и то же точное число.
Вот как выглядит золотое сечение:
Многие художники и архитекторы используют пропорции, чтобы приблизиться к золотому сечению. Знаменитый пример - Парфенон, построенный в Древней Греции:
Может ли золотое сечение работать в веб-дизайне? Вы делаете ставку. Вот твиттер:
Вот комментарий креативного директора Twitter Дуга Боумена, сделанный много лет назад. Выбор дизайна был не случаен:
Итак, если ширина вашего макета составляет 960 пикселей, разделите его на 1,618 (= 593 пикселей). Вы знаете, что ширина области содержимого должна быть 593 пикселей, а ширина боковой панели - 367 пикселей. Если высота веб-сайта составляет 760 пикселей, вы можете разделить его на блоки по 470 и 290 пикселей (760 / 1,618 = ~ 470).
Если вы хотите узнать больше, ознакомьтесь с этой статьей о том, как применить золотое сечение к типографике.
3. Закон Хика.
Закон Хика гласит, что с каждым дополнительным выбором увеличивается время, необходимое для принятия решения.
Вы испытывали это бесчисленное количество раз в ресторанах. Меню с огромным количеством вариантов затрудняют выбор ужина. Если бы предлагалось два варианта, принятие решения заняло бы гораздо меньше времени. Это похоже на парадокс выбора - чем больше вариантов вы дадите, тем легче ничего не выбирать. Оба принципа играют важную роль в веб-дизайне.
Чем больше опций у пользователя на вашем сайте, тем сложнее им пользоваться (если они вообще используются). Нам нужно избавиться от выбора. Чтобы улучшить веб-дизайн, сосредоточьтесь на устранении отвлекающих факторов на протяжении всего процесса проектирования.
В эпоху бесконечного выбора людям нужны более качественные фильтры! Если вы продаете огромное количество товаров, добавьте более качественные фильтры, чтобы облегчить принятие решений. В винной библиотеке продается огромное количество вина.
Они хорошо справляются с фильтрами:
4. Закон Фитта.
Закон Фитта гласит, что время, необходимое для перехода к целевой области (например, щелчка кнопки), является функцией расстояния до цели и ее размера . Другими словами, чем больше объект и чем он ближе, тем проще его использовать.
Spotify упрощает нажатие «Play», чем другие кнопки:
В приложении для мобильного телефона они также помещают кнопку воспроизведения в удобное для нажатия место.
Больше не всегда лучше. Кнопка, занимающая половину экрана, - не лучшая идея, и нам не нужны математические исследования, чтобы сказать нам об этом. Даже в этом случае закон Фитта представляет собой двоичный логарифм. Это означает, что прогнозируемые результаты использования объекта проходят по кривой, а не по прямой.
На крошечную кнопку намного легче нажимать, если увеличить размер на 20%, тогда как очень большой объект при таком же увеличении размера на 20% не принесет таких же преимуществ в удобстве использования.
Это похоже на правило размера цели. Размер кнопки должен быть пропорционален ожидаемой частоте ее использования. Вы можете использовать отслеживание мыши, чтобы увидеть, какие кнопки люди используют чаще всего, а затем сделать популярные кнопки больше (чтобы их было легче нажимать).
Представим, что есть форма, которую вы хотите, чтобы люди заполнили. В конце формы есть две кнопки: «Отправить» и «Сбросить» (очистить поля).
99,9999% хотят нажать «Отправить». Следовательно, кнопка должна быть намного больше, чем «сброс».
5. Правило третей
Хорошая идея - использовать изображения в вашем дизайне. Визуализация передает ваши идеи намного быстрее, чем текст.
Лучшие изображения следуют правилу третей: изображение должно быть разделено на девять равных частей двумя одинаковыми горизонтальными линиями и двумя одинаковыми вертикальными линиями. Вдоль этих линий или на их пересечениях следует размещать важные композиционные элементы.
Ниже смотрите, чем интереснее изображение справа? Это правило третей в действии.
Использование красивых больших изображений способствует хорошему веб-дизайну. Если ваши изображения более интересны, ваш сайт будет более привлекательным.
6. Законы гештальт-дизайна
Гештальт-психология - это теория разума и мозга. Его принцип заключается в том, что человеческий глаз видит объекты целиком, прежде чем воспринимать их отдельные части.
Вот что я имею в виду:
Обратите внимание, как вы могли видеть собаку, не обращая внимания на каждое черное пятно, из которого состоит собака? Основатель гештальтизма Курт Коффка объяснил это так: «Целое существует независимо от частей».
Что касается веб-дизайна, люди сначала видят весь ваш веб-сайт - прежде, чем они различают заголовок, меню, нижний колонтитул и так далее.
Есть восемь так называемых законов гештальт-дизайна, которые позволяют нам предсказать, как люди что-то воспримут. Вот как каждый из них связан с веб-дизайном:
1. Закон близости
Люди группируют предметы, которые находятся близко друг к другу в пространстве. Они становятся единым воспринимаемым объектом.
Для эффективного веб-дизайна убедитесь, что вещи, которые не сочетаются друг с другом, не воспринимаются как одно целое. Точно так же вы группируете связанные элементы дизайна вместе (меню навигации, нижний колонтитул и т. Д.), Чтобы сообщить, что они образуют единое целое.
Craigslist использует этот закон, чтобы легко понять, какие подкатегории подпадают под категорию «для продажи»:
2. Закон подобия.
Мы группируем похожие вещи вместе. Это сходство может проявляться в форме, цвете, оттенке или других качествах.
Здесь мы группируем черные точки в одну группу, а белые - в другую, потому что, ну, точки одного цвета похожи друг на друга.
Как это выглядит применительно к веб-дизайну? Mixpanel использует аналогичный дизайн для ссылок на тематические исследования, поэтому мы рассматриваем их как единую группу, каждая из которых усиливает другую:
3. Закон закрытия
Мы стремимся к полноте. Когда формы, которые не замкнуты, или части изображения отсутствуют, наше восприятие заполняет визуальный пробел. Мы видим круг и квадрат, хотя на приведенном ниже рисунке на самом деле нет ни одной формы.
Без закона замыкания мы бы просто увидели разные линии разной длины. Но закон замыкания объединяет линии в цельные формы.
Использование закона закрытия может сделать логотипы или элементы дизайна более интересными. Хорошим примером является логотип Всемирного фонда дикой природы, который был разработан сэром Питером Скоттом в 1961 году:
4. Закон симметрии.
Разум воспринимает объекты как симметричные, образующиеся вокруг центральной точки. С точки зрения восприятия приятно разделять предметы на четное количество симметричных частей.
Когда мы видим два симметричных элемента, которые не связаны между собой, разум перцептивно связывает их, образуя связную форму.
Когда мы смотрим на изображение выше, мы склонны видеть три пары симметричных скобок, а не шесть отдельных скобок.
Люди предпочитают симметричный вид асимметричному. Чередование столбцов с изображениями и текстом, ползунки по центру и список из трех столбцов добавляют визуального удовольствия от дизайна домашней страницы Trello:
5. Закон общей судьбы
Мы склонны воспринимать объекты как линии, движущиеся по пути. Мы группируем вместе объекты, которые имеют одинаковую тенденцию движения и, следовательно, находятся на одном пути.
Мысленно люди группируются вместе палками или поднятыми руками, указывающими куда-то, потому что все они указывают в одном направлении. В дизайне своего сайта вы можете использовать это, чтобы направить внимание пользователя на что-то (например, форма регистрации, ценностное предложение и т. Д.).
Например, если есть массив точек, и половина точек движется вверх, а другая половина движется вниз, мы воспринимаем движущиеся вверх точки и движущиеся вниз точки как две отдельные единицы.
6. Закон непрерывности
Люди склонны воспринимать линию как продолжение установленного направления. Когда есть пересечение между объектами (например, линиями), мы склонны воспринимать две линии как два отдельных непрерывных объекта. Стимулы остаются отчетливыми даже при наложении.
Fixel использует это для подключения лиц к BIOS:
Существуют и другие законы гештальта, такие как «Образ и основание» или «Закон хорошего гештальта». (Объекты, как правило, группируются вместе в восприятии, если они образуют регулярный, простой и упорядоченный узор - например, олимпийские кольца.) Однако те, которые описаны выше, являются лучшими руководящими принципами для веб-дизайна.
7. Пустое пространство и чистый дизайн.
Белое пространство (также называемое «отрицательным пространством») - это часть веб-страницы, которая остается «пустой». Это пространство между графикой, полями, промежутками, промежутком между столбцами, промежутком между строками текста или визуальными элементами.
Это не просто «пустое» пространство - это важный элемент веб-дизайна. Это позволяет объектам внутри него существовать. Белое пространство - это использование иерархии для информации, типографики, цвета или изображений.
Страница без пробелов, переполненная текстом или графикой, может показаться загруженной или загроможденной. Обычно это трудно читать. (Люди даже не станут беспокоиться.) Вот почему простые веб-сайты лучше с научной точки зрения.
Правильное количество белого пространства делает веб-сайт «чистым». Хотя чистый дизайн имеет решающее значение для передачи четкого сообщения, он не означает только меньше контента.
Чистый дизайн позволяет наилучшим образом использовать пространство, в котором он находится. Чтобы создать чистый дизайн сайта, вам нужно знать, как четко общаться, разумно используя пустое пространство. Made.com хорошо использует белое пространство:
Тонкое использование белого пространства позволяет легко сосредоточиться на основном сообщении и визуальных эффектах, а основной текст легко читается. В целом пустое пространство способствует элегантности и изысканности, улучшает читаемость и стимулирует фокусировку.
Узнайте больше о пустом пространстве и простоте.
8. Бритва Оккама.
При наличии нескольких конкурирующих гипотез бритва Оккама побуждает вас выбрать ту, которая делает наименьшее количество предположений и, таким образом, предлагает простейшее объяснение. Если рассматривать это в контексте веб-дизайна, бритва Оккама утверждает, что самое простое решение обычно является лучшим.
В сообщении об опыте работы с Angelpad команда Pipedrive пишет:
Команда и наставники Angelpad поставили перед нами разные задачи. «У вас слишком много вещей на вашей домашней странице» - это то, с чем мы сначала не согласились, но мы счастливы протестировать. И оказалось, что мы действительно ошибались. Мы удалили 80% контента и оставили одну кнопку регистрации и одну ссылку «Узнать больше» на главной странице. Конверсия на регистрацию увеличилась на 300%.
Дело не только в внешнем виде, но и в том, как это работает. Некоторые компании, например 37Signals, превратили «простую» в бизнес-модель. Вот цитата из книги Rework, написанной основателями Джейсоном Фридом:
Многие люди ненавидят нас, потому что наши продукты уступают конкурентам. Они оскорбляются, когда мы отказываемся включать их домашнее животное. Но мы так же гордимся тем, чего не делают наши продукты, как и тем, что они делают. Мы делаем их простыми, потому что считаем, что большая часть программного обеспечения слишком сложна: слишком много функций, слишком много кнопок, слишком много путаницы.
Простой минималистичный дизайн еще не гарантирует, что он будет работать. Но, по моему опыту, простота всегда лучше, чем противоположность, и, следовательно, мы должны стремиться к упрощению нашего веб-дизайна.
Заключение
Эффективный веб-дизайн и искусство - это не одно и то же. Но к веб-сайтам применимы многие психологические и дизайнерские принципы. Вы можете создать отличный веб-сайт, применив соответствующие аспекты этих законов к своему макету, типографике и изображениям.
Дизайн для пользователя и ваших бизнес-целей. Хороший веб-дизайн может дать эстетически приятный и финансово выгодный результат.