Как и обещал, публикую ещё 10 (с 10-го по 20-ый)пунктов из англоязычного ресурса 1990 agency (77 things to remember when designing UI).
Дисклеймер: поставил себе цель переводить по 10 пунктов из адекватных (:D) источников (пока взял 1990 agency) каждый день и публиковать их здесь. Пока перевел 10 пунктов. На литературный перевод не претендую: иногда старался подгонять под русский язык, иногда делал упор на важность донесения контекста. Ссылка на оригинальный источник будет в конце статьи (все изображения так же взял из оригинального источника).
Ссылка на предыдущую публикацию (пункт 1-10): клик!
Ссылка на оригинал - в конце поста.
11. Попробуйте добавить больше контраста вместо однотипности.
Делая ваши призывы к действию более заметными и отличающимися от окружающих их элементов, вы сделаете ваш UI более “сильным”. Вы с лёгкостью можете выделить с помощью контраста ваши основные призывы к действию самыми различными способами:
- Используя тон, можно сделать конкретные элементы более тёмными, а не светлыми;
- С помощью глубины можно сделать так, что один элемент будет визуально казаться более близким по расположению, а остальной контент – как бы отдалённо (например, при помощи теней и градиентов);
- При помощи выбора из цветовой палитры дополняющих друг друга цветов (например, жёлтый и фиолетовый) можно ещё больше усилить контраст.
12. Попробуйте “Личность” вместо сухого обобщения.
Презентуя себя или свой продукт с помощью имени, изображения или места возникновения продукта, вы создаёте более личную (человечную) коммуникацию. Упоминание страны, города, где продукт “родился”, позволит очеловечить ваше взаимодействия с пользователем. Даже несмотря на то, что данный процесс происходит виртуально, вас с большей вероятностью увидят дружелюбность. Так же указание локации, где производится ваш продукт, позволит дополнить (“подогреть”) впечатление у покупателя о более высоком качестве вашего товара.
13. Старайтесь использовать как можно меньше полей, которые нужно заполнить пользователю
Мы, как люди, от природы очень не любим задачи, которые требуют от нас больших трудозатрат, что так же верно и для заполнения различных форм и полей. Каждое поле, которое вы просите заполнить пользователя, всегда несёт в себе риск того, что посетителя вашего ресурса забьют на это и уйдут.
Не все печатают с одинаковой скоростью, а уже печатать что-либо на смартфоне до сих пор, в целом, является не особо приятным занятием. Просматривайте каждое своё поле и задавайтесь вопросом: действительно ли оно является необходимым? Если нет – удаляйте. Сделайте как можно меньше количество полей, где это возможно. Если в вашем случае большое количество полей небходимо, рассмотрите возможность перенести секцию с ними на новую страницу.
14. Попробуйте сразу показывать возможные варианты, а не прятать их.
Каждое ваше раскрывающееся меню (как правило, селекты) “прячет” от пользователя некий набор действий, которые требуют дополнительных усилий от пользователя, чтобы их найти. Если подобные “спрятанные” действия не помогают вашим пользователям получить тот результат, который они хотят, рассмотрите возможность продемонстрировать опции более открыто, избегая попыток запихнуть их куда-нибудь поглубже. Лучше используйте селекты для более понятных и привычных целей, которые не потребуют от пользователя дополнительного погружения в специфику работы ваших меню (например, календари, страна проживания, часовой пояс и пр.).
Иногда элементы раскрывающегося меню могут быть хорошим решением для тех интерфейсов, которые пользователь будет использовать очень часто (например, т.н. action menus – раскрывающиеся меню, где выбираются основные разделы сайта, к которым мы все уже достаточно привыкли. Еще более привычным делом это является почти в любом мобильном приложении).
15. Попробуйте использовать грамотный структурированный и неразрывный нарратив вашей страницы вместо “каши” и пустых (ложных) пропусков.
Пустые или “ложные” пропуски – это убийца конверсии. Да, прокручивать длинные страницы (лонгриды) – это замечательно, но будьте здесь осторожны: не наталкивайте вашего пользователя на мысль, что содержимое страницы закончилось где-то там между секциями, когда в реальности - это просто неуместный и большой разрыв между элементами страницы. Если вы используете скроллинг (прокрутку) на вашей странице, постарайтесь задать определённый визуальный паттерн (определённую систему) или “ритм”, на которые пользователь будет опираться при дальнейшей работе со страницей.
16. Старайтесь сфокусировать внимание пользователя на чём-то одном вместо того, чтобы “топить” его ссылками.
Легко создать страницу с кучей ссылок, вставленных везде и сразу в надежде угнаться за всеми теоретически возможными потребностями клиента. Однако если вашей целью является создание страницы с грамотным нарративом, призывающим к определённому действию в конце страницы, то дважды подумайте. Держите в голове информацию о том, что каждая дополнительная ссылка, расположенная до вашего основного CTA (call to action – призыв к действию) всегда несёт в себе риск увести вашего пользователя от совершения того самого основного действия, на которое вы рассчитываете.
Следите за количеством ссылок, расположенных на каждой странице вашего ресурса и попробуйте найти баланс между страницами, которые включают в себя много возможностей для пользователя найти разную информацию (такие страницы будут “потяжелее” по количеству ссылок) и страницами с меньшим количеством ссылок (с тем самым фокусом на одном конкретном призыве к действию), приводящим к более высокой конверсии.
17. Попробуйте показывать состояние элемента (-ов) вместо того, чтобы держать пользователя в неведении.
В любом пользовательском интерфейсе мы достаточно часто показываем элементы, которые могут иметь разный статус: сообщения в почте могут быть прочитанными и непрочитанными, счета могут быть оплачены или не оплачены и т.д. Информировать пользователя о конкретном статусе – хороший способ дать пользователю обратную связь. Статусы в интерфейсах помогают людям понять, какие их прошлые действия являются уже исполненными, а какие – нет и какие действия им нужно предпринять.
18. Попробуйте использовать кнопки с призывом к действию, дополняя их содержание выгодой для человека, вместо использование кнопок без описанной выгоды.
Представьте себе две простые кнопки, расположенных на странице. Одна кнопка “говорит” вам “Сохраните свои сбережения”, а другая кнопка – “Воспользуйтесь/Попробуйте”. Ставлю 100 рублей на то, что первая кнопка будет иметь более высокие шансы на то, что её нажмут, нежели вторая (у неё нет созданной и обозначенной “ценности” для пользователя). Более того, “Воспользуйтесь/Попробуйте/Подпишитесь” часто ассоциируется в голове у человека с нудным заполнением различных объёмных форм. Главная гипотеза здесь следующая: каждая кнопка, содержащая в себе понятную выгоду для пользователя, может привести к более высокой конверсии.
В качестве альтернативного варианта можно разместить информацию о выгоде для пользователя где-нибудь рядом с кнопкой призыва к действию (чтобы напомнить людям о том, зачем вообще они собираются выполнить это действие). С уверенностью можно сказать, что использование кнопок только с фокусировкой на действии (без выгод) так же имеет место, но их лучше использовать в тех частях интерфейса/страницы, где нужно меньше убеждения и больше нужна повторяемость действий.
19. Попробуйте дать пользователю напрямую воздействовать на некоторые элементы вместо того, чтобы создавать меню без контекста.
Время от времени имеет смысл сделать некоторые элементы интерактивными вместо обычного бессвязного перечисления возможных действий. Например, отображая списки с данными (сведениями, информацией), обычно мы хотим дать возможность пользователю сделать что-то с информацией, содержащейся в таком списке. Через предоставление возможности кликнуть по конкретному элементу или перетащить его мы можем показать пользователю, что с элементом можно совершить какое-то действие (удалить, переименовать и т.д.).
Еще одним примером может послужить текстовое поле для введения адреса: вы кликаете на него и получаете возможность сразу с ним взаимодействовать (вводить адрес). Теперь сравните это с подходом, если это был бы обычный селект (выпадающий список при клике по нему) без возможности ввести адрес (т.е. вы могли бы пользоваться только вариантами, которые предлагал бы вам выпадающий список).
Допуская такую возможность взаимодействия между пользователем и вашим ресурсом (страницей сайта, приложением), вы снижаете количество необходимых шагов для пользователя, чтобы он мог эффективно взаимодействовать с вашим интерфейсом. Стоит сказать, что в списках без контекста нет ничего плохого, если речь идёт о стандартных элементах, которые не предполагают возможностей пользователем изменять их (проводить с ними манипуляции).
20. Попробуйте показывать все необходимые для заполнения поля сразу на одной странице вместо того, чтобы создавать дополнительные.
К примеру, при создании лэндингов (их еще называют “посадочными” страницами или лэндинговыми страницами), которые транслируют определённую ценность продукта/услуги может быть полезным разместить поля для заполнения на этой же самой странице.
Во-первых, мы снижаем для пользователя необходимое количество шагов и, как следствие, позволяем пользователю не тратить время на эти самые лишние шаги.
Во-вторых, мы сразу даём понять пользователю, какие именно поля нужно заполнить (т.е. позволяем ему сразу увидеть, что от него потребуется для, например, регистрации вместо того, чтобы пытаться это скрыть). Конечно, делать это легче, когда наша форма не содержит большое количество полей (и стоит к этому стремиться, если есть такая возможность).
Ссылка на оригинал: https://www.1990.agency/en/77-things-to-remember-when-designing-ui/
