Icons

2022-06-19 00:35:14 Маркетологи вот уже более ста лет начинают с бизнеса. Они отталкиваются от продукта, решают, кто должен быть клиентами бизнеса, и создают этих клиентов. В UX мы делаем все наоборот. Сначала мы исследуем проблему клиента и создаем для нее решение. Для маркетолога старой школы, UX — это все равно, что тащить дерьмо в церковь.

94. Суть UX-a (2)

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

95. UX и безразличие

В сфере UX, чем вы более безразличны к себе, тем лучше станет ваш дизайн.

96. UX Мышление

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

97. Плохой UX

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

98. Дизайн и искусство

Вот чем отличаются дизайн и искусство: дизайн должен решать какую-то проблему или служить какой-то функциональной цели. Это может быть продажа товаров на Ebay, или повышение эффективности рабочего процесса, как в Trello, или показ ваших любимых фильмов в высоком качестве, как на PornHub. Если вы просто визуализируете своё внутреннее видение или пытаетесь получить эмоциональный отклик от пользователя — это искусство, а не дизайн. И нихрена это искусство не решает.

99. Закон Хика

Закон Хика — один из самых известных принципов дизайна, наряду с законами Гештальта.

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



100. Закон близости

Закон близости (один из законов Гештальта) звучит так: объекты, расположенные поблизости, мы воспринимаем как группу. Проще говоря, мозг связывает близко стоящие объекты между собой, отделяя от тех, что находятся в стороне. Так уж устроен человеческий мозг — мы всегда стремимся организовывать и группировать объекты окружающего мира.



Объекты, расположенные поблизости, мы воспринимаем как группу

В примере выше вы видите 72 кружка. Поскольку мы воспринимаем объекты группами, отталкиваясь от расстояний между ними, на рисунке мы видим несколько групп: есть большая группа из 36 кружков слева и 3 группы по 12 кружков справа.

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

101.Эффект Ресторфф

Суть эффекта Ресторфф (также известного как “эффект изоляции”) в том, что из нескольких схожих объектов мы скорее запомним тот, что отличается.

Ничего не напоминает?

Так ведь именно поэтому CTA (призывы к действию) в интерфейсе или на сайте так выделяются на фоне остальных элементов!



Пример эффекта Ресторфф в действии

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

102. Ленивая регистрация

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

103.

https://www.interaction-design.org/literature/article/10-great-sites-for-ui-design-patterns

http://ui-patterns.com/patterns Открыть/Комментировать

2022-06-19 00:35:14 77. Понятность этапов прохождения



78. Видимость ошибки при введении



79. Смежная контрастность

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



80. Туториал новых фичей





81. Понятность для пользователя

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

82. Заполнение формы

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

83. Суть UX-а

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

84. Новинка запоминается

Наш мозг обращает больше внимания на тот опыт, который вызвал более сильные чувства или был “новинкой” (он привлекает больше внимания).

85. Шаблнность тоже запоминается

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

86. Юзабилити превыше всего

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

87. Хороший User Flow - лучшая награда

Очень круто, если ваш дизайн будет настолько эффективным, что большинство людей сделает, как вы задумали!

88. Анимация хорошо, но в меру

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

89. Общий паттерн

Основные действия — это то, чего мы хотим от пользователей. Второстепенные действия — это то, чего мы не хотим, но что бывает зачастую просто необходимо. Основные действия должны быть контрастными по отношению к фону, и они обычно раскрашены в какой-то цвет. На белом фоне хорошо смотрятся темно-красные кнопки. На черном фоне — ярко-желтые.Красный и оранжевый — цвета, подходящие для множества случаев. Красные кнопки часто побеждают в A/B тестах только потому, что красный цвет заметнее.Кнопки для второстепенных действий должны быть выполнены в том же стиле, но иметь меньшую контрастность по отношению к фону. На белом фоне второстепенная кнопка может быть светло-голубой или “блестяще-белой”. К черному фону подойдет темно-коричневая, темно-серая или “блестяще-черная”. Цвет не настолько важен, как контраст. Иногда второстепенные действия даже представлены прозрачными кнопками или просто ссылками. Цель всего этого — чтобы пользователь сначала обратил внимание на основное действие. И если ему захочется продолжить, то он не будет больше никуда смотреть. Хотите — верьте, хотите — нет, но многие люди выполнят даже ненужное действие, если увидят его первым. Вот такие они крутые, наши пользователи.

90. Трафик в минус

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

91. MVP и его ценность

“На самом деле, MVP не является самым быстрым или самим идеальным продуктом. Это, скорее, продукт, представляющий максимальную ценность, на разработку которого потрачены минимальные усилия”.

92.Нет коллективному UX

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

93. Маркетолог против UX-era Открыть/Комментировать

2022-06-19 00:35:14 65. Управляйте вниманием пользователя

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



66. Возьмите на заметку дружественные и понятные сравнения

Часто нужно сравнить изменившийся контент с предыдущим или несколько продуктов между собой. Можно сделать такие сравнения более понятными и читаемыми. Во-первых, ограничить количество сравниваемых предметов двумя, желательно расположив их поближе друг к другу. Во-вторых, индикация «улучшенных» или «самых свежих» вещей облегчает выбор. В-третьих, чётко покажите, какие свойства поменялись, а какие остались старыми. То есть, что добавлено (или улучшено), что убрано (или ухудшилось), а что осталось тем же.



67. Собирайте предметы в наборы

Люди стремятся к собирательству. Физическому или виртуальному. Если человек видит незаконченный набор, он стремится его завершить. Часто покупку полной коллекции чего-либо можно стимулировать сильнее, продвигая некие комплексные преимущества (торт в целом вкуснее, чем его ингредиенты). Возможно, показ тех вещей, которые уже собраны, служит как бы описанием достижений пользователя. И, наконец, мотивация к сбору всех предметов коллекции будет сильнее, если будет понятно, что их количество в коллекции ограничено.



68. Использовать большие расстояния

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



69. Сторителлинг вместо сухих фактов

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



70. Предоставление обратной связи

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



71. Паттерн сложности созданного пароля



72. WYSIWYG - What You See Is What You Get

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



73. Input Feedback

Отзывчивость интерфейса на правильно/уникальную введенную информацию



74. Выбор даты, а не поиск в цифрах



74. Максимальное количество символов в инпуте



75. Показывать\Указывать место для drag n drop файлов



76. Простительность введенной информации 38-067-99-435 38 067 99 435

 Открыть/Комментировать

2022-06-19 00:35:13 К сожалению, когда у одного элемента несколько функций, иногда о них бывает сложно догадаться. Возможно, стоит зарезервировать такой подход для постоянных клиентов, которые согласны немного подучиться. Используйте его с умом и не переусердствуйте.



56. Откажитесь от двусмысленных иконок

Иконки часто бывают двусмысленными. Дополнив их надписями, можно устранить неоднозначность. Например, иконка со стрелкой вниз – означает ли она возможность сдвинуть что-то вниз, уменьшить приоритет или скачать? Иконка с «х» — это удаление, отмена или закрытие? Если уж места совсем не хватает, хорошей идей будет показывать все надписи к иконкам при наведении курсора на одну из них (а не для каждой по отдельности).



57. Используйте естественный язык вместо сухого текста

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



58. Играйте на любопытстве

Тактика заключается в том, чтобы не утаивать всю информацию, а выдать её небольшую часть для разжигания любопытства. Глава на пробу, демо-версия, пробная версия, что-то бесплатное, доступное сразу. А далее: «чтобы увидеть остальное, сделайте то-то». Интригуя пользователей и клиентов пробниками, можно заставить их захотеть продолжать пользоваться вашим продуктом. Попробуйте в тестовом режиме дать им не все возможности, а что-то оставить на потом.



59. Заверяйте пользователей

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



60. Используйте ценовые иллюзии вместо обычных цен

Можно позволить людям судить о вашем продукте самостоятельно, а можно сделать это за них. Используя иррациональность мышления, покажите ваши цены так, чтобы они выглядели привлекательнее. Используйте слова «всего», «доступный», «недорогой». Цену можно разбить на части – например, 30 копеек за страницу вместо 300 рублей за книгу, или сто рублей в день вместо 3000 в месяц. Также используйте известный трюк с ценами, заканчивающимися на «9». Показывайте меньше цифр – 300 вместо 300,00.



61. Благодарите, а не просто констатируйте факт окончания сделки

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



62. Считайте всё сами, не заставляйте пользователя делать это

Интерфейс может произвести подсчёты и избавить пользователей от такой необходимости. Допустим, вместо показа баланса в системе можно подсчитать, сколько дней осталось до окончания действия подписки. Или в списках устаревающих пунктов лучше использовать надпись «3 минуты назад», чем «последний раз обновлялся в 15:47 2-го сентября». Не заставляйте пользователя считать.



63. Подтверждайте свободу выбора пользователя

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



64. Поиграйте с меняющимися вознаграждениями

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

 Открыть/Комментировать

2022-06-19 00:35:13 Скорость имеет значение, люди не любят ждать. Скорость загрузки страницы или скорость реакции на действия пользователя крайне важны. Каждая лишняя секунда влечёт уход пользователей и уменьшает конверсию. Можно уменьшить время загрузки технически, оптимизируя код и картинки. А можно уменьшить воспринимаемое время загрузки психологически. Показ индикатора загрузки способствует этому, как и возможность пользователю заняться чем-либо во время загрузки.



49. Предлагайте не только кнопки, но и горячие клавиши

Когда ваш продукт используется часто, неплохо бы вспомнить о продвинутых пользователях, которые возвращаются к вам и проводят с ним много времени. Люди ищут способы исполнять повторяющиеся задачи быстрее. После запоминания горячих клавиш скорость использования интерфейса кардинально вырастает. Например, Gmail, Twitter and Tumblr предлагают клавиши J и K как навигацию «предыдущий» и «следующий». В кнопках нет ничего плохого, но всегда хорошо иметь дополнение к ним.



50. Следуйте от больших чисел к меньшим

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



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

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



52. Показывайте информацию постепенно

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



53. Накладывайте на пользователя лишь небольшие обязательства

Сначала побуждайте людей к принятию небольших обязательств — крупные откладывайте на потом. Серьёзные обязательства отпугивают. Использование обязательств – мощная стратегия убеждения, которая работает на стремлении людей сохранить своё лицо. Подразумевается, что человеку легче совершить последовательность несложных действий, чем одно сложное. За небольшим согласием следует большое согласие. Например, сайт знакомств может давать людям осмотреться и ознакомиться с чем-либо, вместо того, чтобы сразу заставлять регистрироваться или с порога находить любовь всей своей жизни. Относительно цены услуги, можно предлагать небольшие ежемесячные платежи вместо большого годового. Также полезно дать понять пользователю, что они могут в любой момент отказаться и уйти, что никакого «контракта» ещё не заключено.



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

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



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

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

2022-06-19 00:35:13 В хорошей иерархии важные элементы отделены от менее важных. Иерархия строится через выравнивание, близость, цвет, отступы, размер шрифта, размер элемента и т.д. Правильно расположенные элементы направляют внимание пользователя и увеличивают читаемость. Грамотная иерархия не позволяет читателю соскользнуть от верха до низа страницы. Из-за этого мы проведём на странице чуть больше времени, но в результате узнаем больше о продукте. Это как путешествие – если гнать по шоссе, вы приедете быстрее, но если выбрать живописную дорогу, вы увидите больше интересных вещей по пути. Дайте глазу на чём-нибудь отдохнуть.



41. Группируйте элементы по смыслу

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



42. Проверяйте ввод пользователя автоматически

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



43. Разработайте прощающие поля ввода

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



44. Осторожно подгоняйте пользователя

Демонстрация срочности – тактика убеждения, которая заставляет людей действовать раньше, а не позже (или вообще никогда). Часто она подразумевает некий дефицит – когда что-то, доступное сегодня, не будет доступно завтра. К тому же, она работает на устранение потерь – мы не любим терять возможности. Можно возразить, что такая тактика является настойчивой и не всегда допустимой. Однако ее все же можно использовать, если вы делаете это честно. Не создавайте ложное чувство спешки – если вас раскусят, это приведёт к обратным результатам.



45. Демонстрируйте дефицит вместо изобилия

Когда чего-либо мало, мы ценим это больше. Дефицит намекает, что раньше этого было больше, сегодня этого меньше, а завтра станет ещё меньше. Ценовая политика оптовиков отличается от политики бутиков. Иногда оптовики намеренно ограничивают партии товара по количеству. При разработке программ мы забываем о дефиците, потому что байты легко скопировать. В дизайне интерфейсов, тем не менее, можно воспользоваться дефицитом и показать ограниченность чего-либо. Количество билетов на вебинар, количество клиентов, которых можно обслужить за месяц, количество продуктов, которые можно произвести за определённый промежуток времени. Спрос и предложение. Меньше – значит больше.



46. Учитесь узнавать, а не вспоминать

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



47. Увеличьте размер важных элементов

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



48. Уменьшайте время загрузки Открыть/Комментировать

2022-06-19 00:35:13 Основа маркетинга такова: людям нужны не возможности продукта, а выгода, которую он им приносит. Крис Гильбо в книге «Стодолларовый стартап» пишет, что людям хочется иметь больше любви, признания и свободного времени, и меньше стрессов, конфликтов, ссор и неопределённости. Показывая функционал, прежде всего поясняйте и выгоду от него.



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

В списках бывает 10000 элементов, а бывает и 10, и 1, и даже 0. Часто дизайнеры забывают о тех случаях, когда данных ещё нет и системе нечего показывать. В этом случае есть риск оттолкнуть пользователя. Когда он смотрит на ваше приложение и видит просто пустое место без всяких подсказок – вы теряете свой шанс. Нулевое количество данных – отличный шанс начать обучение пользователя.



35. Используйте подтверждение по умолчанию

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



36. Придерживайтесь последовательного интерфейса, не требующего постоянного обучения

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



37. Используйте умные поля вместо лишней работы

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



38. Попробуйте стандарты и соглашения вместо изобретения велосипеда

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



39. Предлагайте потребителю избежать потери вместо рекламы приобретений

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



40. Стройте визуальную иерархию вместо однообразия Открыть/Комментировать

2022-06-19 00:35:13 В надежде зацепить как можно больше потенциальных клиентов легко перегрузить страницу ссылками. Однако если вы создаёте повествовательную страницу, которая постепенно подводит человека к нужному действию – подумайте дважды, нужно ли вам так распылять внимание покупателя. Всегда помните, что каждая новая ссылка повышает риск ухода клиента. Соблюдайте баланс между страницами с общим описанием услуги и "тоннельными» страницами, ведущими клиента к действию. Удалите лишние ссылки — это повысите шансы того, что клиент нажмёт на ту самую кнопку.



26. Показывайте текущее состояние услуги

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



27. Используйте кнопки с объяснениями преимуществ вместо обычных функциональных

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



28. Используйте прямые манипуляции вместо меню без контекста

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



29. Сразу показывайте поля ввода, а не прячьте их на отдельной странице

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



30. Откажитесь от внезапных выпрыгиваний в пользу плавной анимации

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



31. Вовлекайте пользователя постепенно

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



32. Не тратьте внимание пользователя на лишние рамки и границы

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



33. Продавайте выгоду, а не функционал Открыть/Комментировать

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



17. Попробуйте отмену действия вместо запросов на подтверждение

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



18. Четко охарактеризуйте свою целевую аудиторию. Не пытайтесь продавать продукт всем подряд

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



19. Будьте прямолинейны

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



20. Делайте ставку на контраст, а не на однообразие

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



21. Откажитесь от общих описаний — конкретизируйте происхождение вашего сервиса

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



22. Сокращайте количество полей для ввода

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



23. Показывайте все возможности сразу

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



24. Отображайте последовательность вместо ложных окончаний страницы

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



25. Удерживайте внимание и не злоупотребляйте ссылками Открыть/Комментировать

2022-06-19 00:35:13 1.Контраст

Более важные вещи должны быть контрастнее — как уточка в центре.



2. Визуальная иерархия

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



3. Цвета кнопок

Цветные кнопки получают намного большую кликабельность



4. Разрыв паттерна

Разорванный паттерн - непохожесть привлекает большее внимание



5. Z-Паттерн

Визуальная иерархия чтения текста (как в газете) Z Паттерн



6. F-Паттерн

Визуальная иерархия чтения текста (как в газете) Z Паттерн



7. Ось клика

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



8. Основная кнопка

Кнопки, выполняющие основные действия, — основные кнопки — должны быть максимально заметны.

Стиль основной кнопки: Она должна быть контрастной по отношению к фону. (Другого цвета или оттенка).

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



9. Второстепенная кнопка

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

Стиль второстепенной кнопки: Она должна быть минимально контрастна по отношению к фону (похожего цвета или оттенка).

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

10. Больше опций = меньший выбор

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

11. 1 Столбец лучше, чем 2

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



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

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



13. Старайтесь объединять схожие функции и не дробить интерфейс

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



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

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



15. Повторяйте призыв к основному действию

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



16. Старайтесь усиливать различия в стиле между разными элементами Открыть/Комментировать