Как создать сайт или блог в 2020 году - бесплатное и простое руководство по созданию сайта

10 распространенных ошибок дизайна пользовательского интерфейса, которые убивают …

Леонардо да Винчи сказал: «Простота – высшая форма изощренности». Что бы я ни проектировал, это моя мантра.

Это также одно из основных требований для эффективного проектирования пользовательского интерфейса.

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

То же самое относится почти к любому другому произведению искусства; Разница лишь в том, что искусство может выдержать определенную дозу сложности. Я не могу.

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

Конверсия, с другой стороны, является результатом успешного путешествия клиента. Согласно Гарвард Бизнес ОбзорУспешная поездка зависит от сокращения усилий. Сегодняшние клиенты не имеют времени или терпения, чтобы прыгать через обручи и получить то, что им нужно.

UI-дизайн


Следующая статистика показывает, что:

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

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

10 распространенных ошибок дизайна пользовательского интерфейса, которые убивают ваши конверсии

1. Не отвечающий дизайн

Не отвечающий дизайн пользовательского интерфейса

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

UI-дизайн глобального цифрового населения

Но не только растущее число уникальных мобильных пользователей заставляет цифровые компании переходить на адаптивный дизайн. В феврале 2015 года Google выпустил алгоритм, который оценивает сайты, оптимизированные для мобильных устройств, выше. Хотя когда-то необязательно, отзывчивость теперь является ключевым.

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

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

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

2. Неупорядоченное расположение

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

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

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

Путешествие клиента должно быть тщательно продумано и сфокусировано на одной цели: конверсия.

Вот что происходит, когда ваш сайт недостаточно аккуратен:

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

А вот как этого избежать:

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

Что бы вы ни делали, сначала подумайте об удобстве использования, а о второй – эстетике.

3. Неинтуитивная навигация

UI-дизайн-неинтуитивная-навигация

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

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

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

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

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

4. Не приглашающий CTA

UI-дизайн непривлекательный-РСП,

CTA сжимают всю вашу силу преобразования в одну кнопку. От цвета к копии, все о них должно сказать нажмите здесь:

  • Цвет: Кнопка CTA должна выделяться на заднем плане и привлекать внимание пользователя.
  • Дизайн: Привлечение внимания не то же самое, что китч. Сохраняйте дизайн эффективным, но простым.
  • размер: CTA должен быть достаточно большим, чтобы выделиться, но достаточно маленьким, чтобы быть привлекательным.
  • образуют: Нажимаемые кнопки имеют прямоугольную форму и окружены пробелами.
  • расположение: Кнопка CTA должна быть рядом с предложением, как следующий логический шаг в путешествии.
  • язык: Вы должны создать ощущение срочности, поэтому используйте первое лицо, активные глаголы и напряженные слова.
  • длина: Держите тело коротким и сладким: вам не нужно больше 60 символов.

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

Хитрость заключается в том, чтобы найти идеальный баланс. Кликабельный CTA не должен вызывать внимания; Это должно шептать и щекотать.

5. Общие изображения

UI-дизайн-родовой-imagesry

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

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

Единственное настроение, которое создают стоковые фотографии, – это неверие.

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

Pro совет: Расположите изображение своего героя так, чтобы оно обращало внимание пользователей на кнопку CTA. Вы можете сделать это, например, увидев объекты на фотографии. Что касается моделей, выберите те, которые представляют вашу идеальную личность покупателя: посетители вашего сайта должны немедленно знать, что они пришли в нужное место.

6. Нет социального доказательства

нет UI-дизайн-нет-социально-доказательство

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

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

Фактически, почти 70% онлайн-покупателей смотрят на обзор товара перед покупкой.

Когда вы доставляете реальные сообщения от реальных клиентов, вы облегчаете умы заинтересованных потенциальных клиентов. Этот метод более убедителен, чем любое хорошо написанное CTA или описание продукта, и многочисленные исследования подтверждают это. Аутентичные отзывы клиентов в 12 раз более надежны, чем лучшие продажи.

Ничего нового, правда. Это органический маркетинг в лучшем виде.

7. Слишком много текста

UI-дизайн слишком много-текст

Большинство посетителей сайта не читают, а просматривают контент. Никто не успевает исследовать блоки текста.

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

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

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

8. Низкая скорость загрузки страницы

UI-дизайн низкооборотистые страниц loading-

По данным The Aberdeen Group, 47% людей ожидают загрузки веб-страницы в течение двух секунд или меньше. Их исследование также показало, что задержка загрузки страницы в одну секунду означает на 11% меньше посещений, снижение удовлетворенности клиентов на 16% и уменьшение количества конверсий на 7%.

Стоит ли упоминать, что скорость загрузки также влияет на рейтинг в поисковых системах?

И все это касается как настольных компьютеров, так и мобильных устройств.

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

Поэтому сохраняйте скорость загрузки страницы не более двух или трех секунд.

Вот как это сделать:

  • Оптимизируйте свои изображения
  • Уменьшить перенаправления
  • Не используйте слишком много плагинов
  • Минимизируйте HTTP-запросы

9. Заставьте пользователя думать

UI-дизайн решений-пользователь думает

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

Стив Круг установил стандарт для всех дизайнеров, изучив современного пользователя в своей книге Не заставляй меня думать, Название делает вынос самоочевидным, выступая в пользу краткости, порядка и интуиции. Никаких лишних шагов, лишних элементов, никаких усилий.

UI-дизайн пользовательского мышление-процесс

Еще раз, ваша конечная цель – максимально быстро преобразовать пользователя. Если вашим посетителям дается время переосмыслить свои решения, они могут. Если какая-то часть опыта вызывает головную боль, они просто подпрыгивают.

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

10. Дизайн для вас

UI-дизайн-дизайн-для-Вас

Последняя, ​​но не менее важная ошибка пользовательского интерфейса – это потворство своим желаниям.

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

Но помните, это не дизайн для вас, а для фиктивного пользователя.

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

И не прекращайте попытки, пока комментарии не станут идеальными.

заключение

Дизайн пользовательского интерфейса не лишен препятствий, но его можно отлично отследить.

Просто запомните эти ошибки и сделайте обратное:

Если ваш дизайн пользовательского интерфейса имеет серьезные недостатки, как вы можете ожидать идеальный коэффициент конверсии?

Об авторе

UI-дизайн автор био

Аня Скрба – менеджер по созданию контента для FirstSiteGuide, образовательного веб-сайта, который предоставляет учебные пособия и руководства, которые помогают людям создавать, развивать и поддерживать свое присутствие в Интернете.

Вы можете связаться с ней на Twitter или LinkedIn.