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

интерфейс

Спросить немного

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

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

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

Вот например как в Альфа-Банке заполняется заявка на ипотеку:

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

А вот как выглядит заполнение ипотечной анкеты на сайте Пика:

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

Можно пойти дальше — при онлайн-покупке спрашивать способ оплаты (при ипотеке и рассрочке шаги могут быть различны) и указывать созаемщика (тогда количество автоматически созданных форм в кабинете умножится на два).

 12   2 мес   интерфейс

Хорошая пипетка в браузере

Оказывается в Firefox есть быстрая и легкая встроенная пипетка, копирующая цвет в буфер обмена:

Можно быстро посмотреть и захватить цвет со страницы не залезая в инспектор. Назначил на нее сочетание клавиш ctrl + С, как в скетче или фигме. Браузерные расширения типа Color Picker становятся нужны все реже, для особых случаев.

 34   6 мес   интерфейс

Про навигацию на сайте Студии

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

Так было на предыдущей версии сайта:

Читалось «Новое, Инвентарь... Задизайнено... Студия, Магазинус... Кафетериус... Ководство... Поиск».

Сейчас вроде починили, но не совсем:

Интересно что дизайнеры не замечают баги на таких элементах.

 10   1 год   интерфейс   наблюдение