Я ненавижу длинные вступления, поэтому: ниже представлен чеклист важных UX-советов по созданию удобных форм регистрации и входа в систему. Он основан на моем опыте изучения сотен схем входа в систему от начинающих дизайнеров. Я собрал их благодаря моим курсам Learn UI Design и Learn UX Design.
Давайте приступим.
1. Автофокус на первом поле
По иронии судьбы, фундаментальное правило дизайна взаимодействия гласит: исключите взаимодействие. Уберите клики, уберите чтение, уберите ожидание, уберите мышление.
Простой пример: 95% людей, открывающих форму регистрации, сразу же кликают по первому полю, избавьте их от этого действия и автоматически сфокусируйтесь на нем.
(Обратите внимание, автофокус может раздражать пользователей, использующих программы чтения с экрана, поэтому стоит проверить этот опыт ?)
2. Используйте специализированные мобильные клавиатуры
Единственное, в чем можно быть уверенным в этой жизни – это (а) смерть и (б) адреса электронной почты содержат символы «@» и «.». К счастью, в мобильных телефонах есть специализированные клавиатуры для ввода адреса электронной почты, отображающие эти символы, но вы должны указать это в HTML type=email. Это очень простое изменение облегчит жизнь мобильным пользователям.
Примечание: тоже относится к телефонным номерам (type=tel), URL-адресам (type = url) и номерам (type=num) в процессе регистрации.
3. Немедленно проверьте поля
Не ждите, пока пользователь заполнит всю форму, чтобы указать на возможные ошибки. Сообщите об ошибках, как только ваша система обнаружит их. Для поля электронной почты имеет смысл проверять размытие (то есть, когда фокус установлен на другом поле).
Обычно я пытаюсь перехватить незаполненные и содержащие ошибки поля электронной почты.
4. Сделайте метки интерактивными
Любое поле ввода текста должно иметь интерактивные метки. Удивительно, что это не делается в HTML по умолчанию. Просто добавьте элемент ввода внутри соответствующего элемента метки. Это не только (а) позволяет мне кликнуть по метке, чтобы начать печатать, но (б) также помогает мне, если я случайно немного промахнусь по текстовому полю.
(Совет по доступности ☝️ – программы чтения с экрана плохо сочетаются с input внутри label – поэтому также оберните текст, описывающий ввод, в отдельный span с уникальным id, а затем добавьте к нему aria-labelledby="my-unique-id"?)
5. Покажите требования к паролю, когда пользователи создают его
Ни один пользователь не должен гадать, каковы требования к паролю. Покажите их, когда они актуальны (P.S. И удалите их, когда они не нужны).
6. Разрешите пользователям отображать пароль
Разрешите пользователям просматривать введенный пароль. Это предотвратит острые UX-проблемы с выбором пароля, и при этом будет менее обременительным, чем требование ввести его дважды.
(При этом последний метод все же намного лучше, чем ничего)
7. Используйте текст кнопки, чтобы показать, что ожидает пользователя при нажатии
Метки на ваших кнопках -– это возможность – конечно же, чтобы побудить пользователей нажать на них. Не помечайте их скучными, невнятными метками (например, «Продолжить», «Отправить»).
Но спросите себя: какая ценность ждет пользователя на другой стороне? Будет ли создана бесплатная учетная запись? Я в 30 секундах от того, чтобы найти работу! Скажите мне, наконец!
8. Разрешить единый вход
Зачем заставлять пользователей выбирать еще одно имя пользователя и пароль для работы с нашим маленьким сервисом? Что, если мы позволим им использовать существующие имя и пароль? Например, учетную запись Gmail или Twitter!
Сумасшествие, правда?
Но это именно то, что мы можем сделать. Только, если у вас нет особых причин не делать этого.
(Теперь сайтам просто нужно напомнить пользователям, когда они уже выбрали эту опцию)
9. Сэкономьте клик, уведомив пользователей, что они согласны с условиями обслуживания (не требуя их явного разрешения)
Имейте ввиду, это не везде законно. ЕС, например, требует от сайтов, чтобы пользователи явно устанавливали флажок, подтверждающий согласие с условиями сайта. Мое мнение? Театр конфиденциальности и плохой UX в придачу. Сэкономьте пользователям клик, когда можете.
10. Используйте разные термины для «входа» и «регистрации»
Вы хотите, чтобы форма входа была максимально простой. Поэтому не используйте термины «Sign in» и «Sign up» – мне нужно подумать полсекунды, чтобы понять хочу ли я «войти» или «зарегистрироваться».
Вместо этого используйте такие варианты, как «Register» или «Sign in», или другие пары слов, отличающихся более чем двумя буквами. Это может сэкономить вашим пользователям всего полсекунды, но, если вы не сэкономите им полсекунды сейчас, это может отбросить тень на остальную часть вашего приложения ?.
11. Позвольте легко переключаться между «входом» и «регистрацией».
В случае, если пользователь выбрал неправильный вариант, он должен с легкостью переключиться с регистрации на вход в систему и наоборот.
Чаще всего это отображается как ссылка, а не кнопка (ошибка начинающих дизайнеров), расположенная в нижней части формы.
12. Вход в систему с помощью электронной почты, а не имени пользователя
Имена пользователей для каждого отдельного сервиса сложно запомнить, поэтому электронная почта – более простой способ войти в систему.
13. Если пользователь пытается выбрать пароль, объясните, почему он недействителен
Если пользователь угадывает пароль, который (а) неверен и (б) не соответствует требованиям к паролю, скажите, какому требованию пароль не соответствует. Это намного полезнее, чем сказать «неправильный пароль» и не подсказать, как это исправить.
14. Запомните значения, введенные между попытками ввода пароля
Если пользователь безуспешно вводит свой пароль, ему больше не придется вводить адрес электронной почты. Если вы разрешите пользователю увидеть неправильно введенный пароль, он может захотеть проверить, не допустил ли он опечатку.
15. Экран «сбросить пароль» должен запоминать, какой адрес электронной почты вы уже ввели
Слишком часто при нажатии ссылки «Забыли пароль», вам приходится повторно вводить адрес электронной почты, который вы вводили всего за 30 секунд назад. К тому времени, как пользователь исчерпал предположения относительно пароля и захочет сбросить его, не приставайте к нему, чтобы получить уже известную информацию.
Еще вопросы по UX-дизайну форм регистрации?
После изучения сотен юзерфлоу регистрации от начинающих дизайнеров я составил эти советы, решающие ряд наиболее распространенных проблем. Внедрите их все, и вы получите незаметный UX-дизайн входа в систему.
Помните: никто не заходит в ваше приложение, чтобы войти в систему. Если ваше приложение не предназначено для развлечения, большинство пользователей, вероятно, захотят использовать его для как можно более быстрого достижения определенной цели, а затем продолжить жить своей жизнью.
Как хорошие UX-дизайнеры, давайте учтем нетерпение наших пользователей и сделаем этот процесс как можно проще.
Есть вопросы о UX регистрации / входе в систему? Оставьте их в комментариях ниже.
Перевод статьи learnui.design
Топ коментарі (1)