Полный 25-трюковый UX-Design Контрольный список

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


Я часто думаю о дизайне пользовательского опыта (или UX-дизайне) как о психологии, а не как о разработке.

Хороший дизайн UX – это все, что нужно, чтобы заглянуть в голову ваших посетителей.

Он предвосхищает каждый их шаг и создает простой, интуитивно понятный и удобный веб-сайт..

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

Имея это в виду, я собрал контрольный список из 25 небольших (и простых) настроек, которые сделают ваш дизайн UX сияющим.

Contents

1. Скорость

Скорость сайта – это ваш первый шанс произвести хорошее впечатление. Это ваше первое препятствие UX.

Сайт-Speed

(источник изображения)

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

Что-нибудь более медленное, чем это, и это плохо для пользователя, с самого начала.

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

2. Кто ты и чем занимаешься?

Ваша следующая большая задача – быстро информировать ваших посетителей. Кто ты? Чем ты занимаешься? И какую ценность вы можете дать им?

Стоимость пропеллера Netflix

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

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

3. Убедитесь, что посетители могут связаться с вами

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

Одной из самых больших проблем для новых посетителей является то, должны ли они доверять вам или нет – особенно если вы новый сайт.

Один из способов снять это беспокойство – показать им, что за кадром находится настоящий человек. Добавьте рабочий адрес, номер телефона и реальный адрес электронной почты. (НЕ контактная форма – люди склонны не доверять им по сравнению с обычным адресом электронной почты).

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

Tagove Live Chat

Если что-то идет не так, хорошо знать, что они могут легко связаться.

4. Всегда дайте посетителям возможность вернуться домой

Мы все потерялись на сайтах раньше. Вы переходите по ссылкам и попадаете в кроличью нору.

Если это произойдет, ваши посетители будут взволнованы и разочарованы. Они инстинктивно нажмут кнопку «X», чтобы закрыть браузер.

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

5. Еще лучше, оставьте панировочные сухари, чтобы они знали, где они

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

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

контроль-прогресс-бар

(источник изображения)

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

6. Удалите все повторяющиеся действия

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

Именно такие вещи приводят к отказу от тележки. Ваши посетители будут искать в другом месте.

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

7. Используйте подсказки, чтобы помочь новичкам (но не мешайте экспертам!)

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

Маленькие значки «подсказки» (часто обозначаемые знаком вопроса) помогут новичкам понять, что им нужно делать. Но в то же время они не мешают вашим экспертам.

всплывающие подсказки

(источник изображения)

Вы можете даже предоставить ярлыки или ускоренные треки, чтобы ускорить работу экспертов. Вы часто будете видеть ссылки «пропустить это» на большинстве веб-сайтов и в приложениях, например..

8. Создайте большой, смелый призыв к действию

Призыв к действию точно говорит посетителю, что делать: например, «Зарегистрироваться» или «Купить сейчас». Убедитесь, что это командный, простой и объясняет ценность этого.

CTA

(источник изображения)

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

9. Проведите четкое различие между первичным и вторичным призывом к действию

С большим количеством призывов к действию вы увидите два варианта. «Отправить» и «отменить», например. Или “скачать сейчас” и “бесплатная пробная версия”.

Spotify-кту

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

Это просто простая психология. Вы тонко даете своим пользователям знать, какой из них нажать.

10. Используйте иерархию, чтобы показать пользователям, куда идти дальше.

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

Прочитайте последний блог > скачать бесплатный отчет и подписаться на рассылку > записаться на платный онлайн-курс.

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

11. Не связывайтесь с ожидаемыми элементами!

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

проверка яблок

Не пытайтесь изобретать велосипед с этими важными аспектами! Будь проще.

12. Придерживайтесь простой трехцветной палитры

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

палитра

(источник изображения)

Цвет также очень полезен для формирования опыта вашего пользователя, так как он тесно связан с психологией и эмоциями. Например, мы ассоциируем синий с доверием (есть причина, по которой Facebook использует синий!)

Подберите свою цветовую палитру с вашим продуктом.

13. Почему я получаю ошибку? И что мне теперь делать?

Иногда что-то идет не так и ошибки 404 неизбежны. Тем не менее, вы можете превратить это в положительный опыт пользователя.

Объясните, почему они получают эту ошибку, создав пользовательские страницы 404 и 504. Твиттер «проваленный кит» был известен этим.

кит твиттер

В случае неизвестных ошибок убедите пользователей, что вы над ним работаете, и перенаправьте их на свой веб-сайт..

Тупики, как страницы ошибок, опасны. Пользователи естественно тянутся к кресту. Заверьте их и отправьте обратно.

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

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

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

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

15. Придерживайтесь только двух семейств шрифтов

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

Это очень сбивает с толку, если ваш логотип шрифта Futura, ваш основной текст Times New Roman, ваш призыв к действию Comic Sans, а ваши заголовки обмотки …

шрифты

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

16. Используйте отчетливые и последовательные сообщения

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

оповещения

(источник изображения)

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

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

17. ОГРАНИЧЕННЫЙ ТЕКСТ ЗАМКА

Это просто раздражает.

На самом деле, есть более важные причины, чем это. На самом деле мы читаем заглавные буквы медленнее, чем строчные. Так что намного сложнее сканировать чтение (как мы обычно читаем в Интернете).

Зарезервируйте заглавные буквы, когда вам действительно нужно оказать влияние.

18. Группируйте связанные элементы вместе

Это специально для сайтов электронной коммерции, но работает по всем направлениям.

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

сгруппированные предметы

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

Он позволяет посетителям просматривать ваш сайт, снижает показатель отказов и создает более личный опыт..

19. Держите все в соответствии

Последнее, что вам нужно, – это чтобы посетитель щелкнул ссылку и почувствовал, что он перешел на другой веб-сайт..

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

20. Дизайн макета для сканирования глаз

Мы не читаем сайты, как мы читаем книгу. Наши глаза прыгают и сканируют важную информацию.

F-паттерн

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

21. Создайте доверие с помощью отзывов и социальных доказательств

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

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

22. Сообщите пользователям, с чем они могут играть!

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

взаимодействия

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

Пригласите людей поиграть с вашим сайтом!

23. Создать мягкую кривую обучения

Никто не любит застрять на запутанном и сложном сайте.

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

24. Найти способ сопереживать с вашим посетителем быстро

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

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

Ваш посетитель подумает: «Этот сайт меня достает!», Что является отличным пользовательским опытом для создания.

25. Используйте микро-взаимодействия для создания диалога

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

Вы можете сделать это с помощью копии, например «Хорошая работа!» «Мы думали, что вам это может понравиться», «Вы хотели бы поговорить с экспертом?»

индикатор

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

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

Используете ли вы какие-либо из этих хитростей дизайна UX? Я хотел бы услышать обо всем, что я пропустил! Дайте мне знать в разделе комментариев.

Kim Martin Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map