2 заметки с тегом

ux

UX показать/скрыть пароль, как правильно?

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

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

Изначально это выглядит так:

На самом деле кажется все просто: пользователь вводит пароль в поле, поле автоматически скрывает введенные символы под звездачками ***** (сегодня это жирные точки •••••• , так моднее). И тут встает вопрос какую вариацию инконки нужно показывать в состоянии скрытого пароля.

Как же правильно использовать иконку глаза в поле с паролем? Есть 2 варианта.

Вариант 1
Иконка закрытого глаза — говорит нам о том, что пароль скрыт или скрыть его по клику? Но он же уже скрыт…

Например, регистрация в Mail.ru использует этот прнцип работы.

Вариант 2
Иконка открытого глаза — говорит нам о видимом пароле или покзать пароль по клику?

Например, такой подход использует бразур Google Chrome (настройки/пароли)

А что вы думаете по этому поводу?

23 октября   ux   иконка   инпут   пароль

Про дизайн кнопок

Сделал я интерфейс с двумя страницами. На каждой странице кнопка. У кнопок одинаковый функционал (например это ссылка), но разные результаты по клику.

Я вот что подумал, почему я должен делать кнопки в интерфейсе одинаковыми? Совершенно, не должен. Чтобы оптимизировать разработку/код? В этом есть доля правды, но подойдем с другой стороны. Каждая кнопка (её внешний вид) должна ассоциироваться с ожидаемым результатом.

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

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

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

Проблемы которые могут возникнуть. Например, если пользователь встретился с кнопкой первого типа и воспольовался ей, то создается ассоциативная связь: ожидаемый результат (в нашем случае это звонок) + внешний вид кнопки. Далее, если пользователь встретит на своем пути кнопку с таким же оформлением но другим текстом, он может даже не прочитать что на ней написано, и подумать что действие будет одинаковое. Лучше этого избежать на визуальном уровне сразу.

Используйте дизайн кнопок соответственно их требованиям.
А что вы думаете по этому поводу?