Как иллюстрировать пошаговые этапы в мобильном дизайне
28 января 2019 | Опубликовано в статьюшечки | Нет комментариев »
Если ваша форма заполнения состоит из нескольких страниц, пошаговая визуализация прогресса обязательна. Она информирует пользователя о том, на каком но этапе и сколько ему осталось заполнить страниц. Отображение пошагового прогресса на мобильных устройствах становится проблемой, из-за ограниченного пространства на экране. Вариант, который вы используете в версии для больших экранов, на экране смартфона может плохо читаться.
Линейный или радиальный варианты
Линейное отображение пошагового прогресса хорошо работает на больших экранах, но не в мобильном дизайне. Когда вы используете этот вариант на небольших экранах, описания шагов читаются хуже (потому что шрифт мельче), и отслеживать прогресс по этой же причине сложнее.
Вы вынуждены впихивать описания шагов в весьма ограниченное пространство, из-за чего читать их становится сложно. Помимо этого следить за прогрессом становится еще менее удобно, потому что вы видите слишком много названий шагов и номеров одновременно. Это создает визуальный шум и пользователям становится сложнее различать и понимать свое текущее местонахождение в форме заполнения.
Для мобильных версий формы используйте радиальное отображение прогресса. Это поможет пользователям четче отслеживать прогресс и сделает форму более читаемой. Сразу видно на каком шаге вы находитесь, потому что радиальный вариант отображения оставляет достаточно места для больших заголовков. При таком варианте отображается один шаг за раз, и это помогает пользователям сосредоточиться на текущем моменте заполнения. А еще у вас остается достаточно места, чтобы описать следующий шаг.
Пользователь сможет отслеживать свой прогресс быстрее, потому ему потребуется меньше моментов фиксации зрения для сканирования текста и списка шагов. Сканируя визуально радиальный вариант отображения, взгляд фиксируется единожды. Линейный же вариант останавливает взгляд на каждом шаге, поэтому в примере сверху это будет четыре момента фиксации. Чем меньше количество фиксаций, тем быстрее пользователь заполнит форму.
Видимость + удобочитаемость
Во время заполнения многостраничных форм, пользователь должен понимать на каком этапе он находится и сколько ему осталось. Видимость и удобочитаемость пошагового отображения прогресса — ключ к успеху. Когда описания шагов и отслеживание прогресса понятны, вероятность того, что форма будет заполнена, растет. Когда же в происходящем приходится разбираться, растет вероятность того, что пользователь откажется от заполнения формы.
Автор статьи anthony
Перевод — Дежурка
Смотрите также:
Оставить ответ
Похожие статьи
-
Сайты, посвященные индустрии красоты
-
Микровзаимодействия: секрет крутых приложений
-
Графический дизайн в стиле гранж
-
15 бесплатных экшенов для ретуширования кожи
-
Крутая абстракция в веб-дизайне
-
Использование множественных фоновых изображений CSS: основы
-
Красивые примеры рисунков спиртовыми чернилами
-
Рисуем иконку мышки в Adobe Illustrator
-
Бесплатная типографика в ботаническом стиле
-
Простая фотоманипуляция рыцаря в огне в Adobe Photoshop
-
Новые примеры страниц О нас
-
Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
-
Концептуальная аэрофотосъемка Тома Хегена
-
Бесплатные текстуры для эффекта состаривания
Самые комментируемые
- Текст из крови в Adobe Photoshop
549
- Насколько важно сегодня использовать Web Safe цвета?
538
- 20 наборов кистей для Фотошопа, которые вам пригодятся
530
- Текст из воды в Adobe Photoshop
518
- 45 новых удивительных наборов кистей для творчества
423
- Более 40 фотореалистичных рисунков
205
- Ретро и винтажная типографика в веб-дизайне
194
- 30 примеров фрактального искусства
191