https://icons8.com
На что нацелен бизнес с их сайтом? Поддерживать высокий уровень конверсии и превращать клиентов в счастливых клиентов. Хотя это требует хорошей репутации и навыков, прихоти потенциальных клиентов зависят не только от предложений вашей компании. В большинстве случаев уровень конверсии зависит от целевой страницы вашего веб-сайта и от того, насколько хорошо он разработан. Поэтому сегодня, для разнообразия, я собираюсь поговорить о коммерческом подходе к дизайну UI / UX и о том, какие приемы вы можете использовать для повышения коэффициента конверсии. Это своего рода руководство, которое вы можете показать своему боссу, чтобы объяснить, почему вы потратили час на выбор шрифта для целевой страницы или перемещение CTA по странице. И это своего рода руководство, которое повысит ваш коэффициент конверсии на несколько ступеней.
1. Искусство макетов
Если вы читали о дизайне в последние годы, вы, вероятно, уже слышали о шаблонах в макетах. Они основаны на исследовании того, как люди взаимодействуют с веб-сайтами. По-видимому, пользователи, как правило, следят за страницей по нескольким стандартным маршрутам. Одна из наиболее распространенных находится в форме, похожей на заглавную букву F. Это означает, что пользователь сначала смотрит вверху слева, переводит взгляд через экран в верхний правый угол, затем немного вниз, поперек, а затем просто просматривает остальную часть страницы. При этом есть всего 4 или 5 баллов, где у вас есть шанс привлечь внимание пользователя. Проще говоря, вы должны заполнить эти драгоценные места ключевыми элементами, которые вы хотите, чтобы пользователи видели: призывы к действию, контактные данные, списки услуг / продуктов, которые вы предлагаете. Это простой способ улучшить дизайн и удобочитаемость веб-сайта, сохраняя чистоту целевой страницы.
Другой вариант — диаграмма Гутенберга, хотя она лучше всего подходит для страниц с большим количеством похожих текстов (например, без заголовков). или списки и другие подобные элементы, которые разделяют монотонный вид вашего письма). Этот макет предполагает, что ваши пользователи будут в первую очередь читать части экрана в левом верхнем и правом нижнем углу, а все остальное будет уделять все меньше внимания с каждой секундой, потраченной на текст. Хотя верхняя правая область также имеет шанс увидеть, она привлекает внимание только тогда, когда пользователь решает, что ваш сайт того стоит. По сути, если вы примените его к этому самому абзацу, то вы получите слова «диаграмма Гутенберга» и «используйте это, это очень хорошо». Кстати, используйте его, это довольно хорошо (видите, что я там делал?).
Третий популярный выбор — это шаблон Z, который похож на макет F, но лучше всего работает с сайтами, которые немного меньше корпоративных / официальных. Это отличный выбор для веб-сайтов, на которых продаются бренды или действительно яркие элементы, на которых вы можете использовать негативное пространство в своих интересах и размещать контент отдельно, что дает возможность взгляду пользователя сместиться. Любая информация, попавшая в ловушку на пути пользователя от одного блока к другому, вероятно, будет забыта, поэтому макеты Z-шаблона лучше всего подходят для страниц, на которых представлено не так много контента.
2. Fontastic Text
Шрифты имеют значение. Как много. Шрифт логотипа вашей компании будет формировать то, как люди о нем думают, а шрифт, который вы используете на целевой странице, определит, насколько он читабелен. Если вы не хотите, чтобы люди активно просматривали ваши призывы к действию, выберите шрифт с высокой степенью конверсии, который подходит для всех частей вашего веб-сайта. Да, кстати, даже не думайте об использовании разных шрифтов для разных элементов, если это не является строго необходимым. Максимум 3–4 шрифта должны быть видны на всем вашем веб-сайте, поскольку это обеспечивает удобство работы с пользователем.
Выбирая шрифт, выберите что-нибудь простое и легко читаемое независимо от размера экрана. Это означает шрифты без засечек, которые предлагают минималистичные и различимые буквы без каких-либо нежелательных излишеств. Если вы чувствуете себя модно и не можете устоять перед натяжкой Inria Serif или его сестер, используйте его в логотипе. Это ваше пространство для фантазии, а остальная часть сайта должна выглядеть профессионально. Ну, это если вы создаете корпоративный сайт. Если вы делаете один для небольшого бренда, в частности, для искусства и моды, то можно проявить немного креативности, так как это способ показать индивидуальность вашего бренда. Тем не менее, хорошая идея сохранить текстовые абзацы читабельными, так что не будьте дикими . Некоторые шрифты с засечками выглядят забавно и креативно, но по-прежнему легко читаются, предлагая золотую середину между этими двумя стилями.
Тело вашей целевой страницы, в идеале, будет выделено жирным шрифтом и представлена только необходимая информация. Все, что не является прямым, необходимо скрыть (я объясню почему в следующем параграфе). Держите текст чистым, редким и красивым. И убедитесь, что у вас есть правильный размер: тело должно быть около 16sp или около того, читаемое на любом устройстве. Заголовки должны быть больше, но помните, что ширина линии должна быть ограничена, иначе она не будет хорошо смотреться на мобильных устройствах и узких экранах. Важность эстетики текста и их влияние на конверсию доказана и не может быть переоценена.
3. Выбор
Люди по своей природе не способны быстро выбирать, когда представлены сразу несколько вариантов. Или, по крайней мере, неспособен быстро выбирать и сознательно. Если пользователь попадает на вашу целевую страницу и видит 15 различных абзацев текста, каждый из которых содержит сопровождающую форму, которую нужно заполнить, или кнопку, которую нужно нажать … Ну, опытные дизайнеры знают, что большинство из них просто мгновенно уйдут с вашего сайта, а остальные получат настолько растеряны, что, вероятно, им не удастся найти правильный призыв к действию.
Это называется законом Хика, и это причина слишком загруженной целевой страницы. Всегда помните этот закон и оглядывайтесь на него всякий раз, когда вы обнаружите, что добавляете еще один элемент. Означает ли наличие раздела «наши продукты просто потрясающе» потенциальное падение коэффициента конверсии? Я не думаю, что есть один предприниматель, который сказал бы, что эта сделка справедлива. Конечно, в капризных словах может быть дымовая завеса, но это тот самый дым, который теряют ваши пользователи на пути к конверсии. Вместо этого держите информацию на месте, некоторые элементы, и закон Хика не нарушается.
4. Color Me Surprised
Еще в начале десятков этого столетия (какими молодыми мы были!) Была лавина статей, «разоблачающих» «безумный трюк» за цветами постеров фильма. По сути, не дизайнеры узнали ужасную правду о цветовых комбинациях: ОНИ РАБОТАЮТ! Это ужасное открытие, но оно, кажется, полностью забыто всеми, кто не был в кругу дизайнеров. Как еще вы могли бы объяснить тот факт, что у меня была внештатная работа, когда клиенты просили желтый и бледно-зеленый логотип?
https://icons8.com
Теперь наша работа как дизайнеров заключается в создании ярких цветовых комбинаций для логотипов, веб-сайтов и т. Д. Кроме того, наша работа заключается в том, чтобы объяснить наш выбор вышестоящим, а также проверить совместимость определенных цветов. с брендом. Например, красный, как известно, указывает на продажи, как в смысле коммерции, так и скидок. Если вы выберете целевую страницу для бренда одежды среднего класса, красный может подойти. Но предметы роскоши — все о черно-белом контрасте, возможно, с примесью бежевого цвета. Знание, какие цвета выбрать и как их комбинировать, является ключевым навыком для дизайна с высокой конверсией. Все пользователи выбирают красивый и оптимизированный по цвету сайт вместо обычного.
5. Изображение будет длиться дольше
Хорошо написанный лозунг может оставить неизгладимое впечатление, но создавать его непросто. Кроме того, мы все знаем, что картинка стоит тысячи слов, верно? Поскольку я уже говорил о том, как важно, чтобы на вашей целевой странице не было новых абзацев, давайте поговорим о рисунках. Вы можете реально повысить коэффициент конверсии, а также представить свой бренд, просто выбрав хорошие фотографии с высоким разрешением для своей целевой страницы. Часто говорят, что люди должны присутствовать, если вы продаете услуги, а не продукты, поскольку это помогает «поставить лицо на компанию». Точно так же, четкое фото вашего продукта, где он легко виден, с большей вероятностью приведет к конверсиям, чем какой-то плохо освещенный снимок. Просто убедитесь, что загружаемая фотография имеет высокое разрешение, но не слишком большую, поскольку она может сократить время загрузки на вашем сайте, и это на самом деле не является необходимостью.
6. Одна строка, без ожидания
Я почти уверен, что затронул это в каждой своей статье, но я никогда не перестану произносить эту мантру: заставьте свой сайт загружаться быстрее , Прекратите использовать ненужные элементы и изображения со сверхвысоким разрешением (как я уже говорил, высокое разрешение — это хорошо, все, что выше, — это излишнее). Просто помните, что почти треть пользователей покидают сайты, которые загружаются дольше 7 секунд. Если вы не хотите присоединиться к нижней части бочки с показателями конверсии ниже 10%, делайте все возможное, чтобы поддерживать загрузку сайта как можно быстрее.
7. Простота — это ключ
Все эти правила могут сделать дизайн с удобной конверсией звучащим, но он прост, как и должен быть макет вашей целевой страницы. Не пытайтесь изобретать велосипед с помощью сложных навигационных решений, с ними не соскучится ни один новый посетитель. Просто представьте свою информацию в сжатой форме со стандартным макетом. Вы знаете правила — контактная информация идет внизу, меню сверху и сбоку. Чем меньше ваш пользователь будет думать о сайте — тем лучше.
8. В центре внимания вашего CTA
Ни для кого не секрет, что независимо от того, какой выбор оптимизации веб-сайта вы выбираете на своей целевой странице, вы преследуете одну цель: повысить конверсию в Интернете, обычно с помощью призыва к действию. В конечном итоге это означает, что вам нужно, чтобы пользователи заметили этот CTA и взаимодействовали с ним. Однако обратить их взгляд на кнопку / форму не всегда так просто, как в удобном месте. В конце концов, вы не можете поставить его на самый верх, так как большинство людей захотят увидеть немного информации о ваших предложениях, прежде чем они ответят на CTA. И слишком низкое значение может привести к тому, что люди вообще не достигнут этого. Ну так что ты делаешь? Ну, кроме того, чтобы найти изящное место для размещения вашего CTA, вам нужно улучшить его. Добавьте к этому визуальный эффект, сделайте его анимированным, сделайте цветовые акценты (кто может сопротивляться нажатию большой красной кнопки?) И т. Д.
Еще один крутой способ заставить пользователей взаимодействовать с вашими CTA, работает, когда они не кнопки но формы. Дизайнеры наконец-то начали использовать многошаговые формы, которые можно встроить прямо на целевую страницу. Это означает, что пользователям не нужно кликать по содержимому, которое они просматривали изначально, нет дополнительной загрузки, и форма, хотя и задает те же вопросы, выглядит не так долго. Все это приводит к тому, что пользователи охотнее взаимодействуют с формами и заполняют их, что, в свою очередь, повышает конверсию в Интернете! Как я всегда говорю: относитесь к своим пользователям хорошо, и они будут обращаться с вами сразу же!
Отказ от ответственности: я основал эту статью на своем опыте работы в Incode Group и персональные дизайнерские проекты, которые вы можете найти на моих страницах Dribble и . Если вы согласны и хотите улучшить дизайн конверсий, я буду рад помочь вам и создать собственный дизайн веб-сайта только для вас. Не стесняйтесь обращаться ко мне с отзывами о моих статьях или предложениях о сотрудничестве!
Большое спасибо моему коллеге по копирайтеру Семену за сотрудничество -Помощь и спасибо за чтение!
Загрузка...
