Каждый из нас хотя бы раз сталкивался на том или ином сайте с несколькими шагами по оформлению чего-либо: заполнению формы или информации о покупке, регистрации и прочее. При этом сначала нужно ввести информацию о себе, затем появляется ШАГ 2 – платежные данные, потом ШАГ 3 – проверка, ШАГ 4 – подтверждение о принятии. Из сайта в сайт такая система многоступенчатого заполнения данных однотипна по своей сути, и её можно сравнить с одним из вариантов использования «хлебных крошек» или навигационной цепочки. То есть, когда страницы или цели пользователей идут строго друг за другом, будь это обычный информационный контент или товары в онлайн-магазине.
Смысл и принцип работы шагов прогресса понятен, но нам, как веб-дизайнерам, интереснее рассмотреть их с художественной точки зрения, поскольку, как ни странно, практически все они имеют разное оформление. Даже более того, при разном оформлении, которое подходит по дизайну (хотя и бывают исключения), структурность пошаговости, цепочки, всегда работает. Её легко понять, в ней удобно ориентироваться и, по факту, даже если пользователь видит, что впереди при оформлении заказа его ожидает 3-4 шага до конца, его это и не смущает и не останавливает. Наоборот, все ясно и понятно. Что уж говорить, что в случае возможных сбоев сервера/связи общаться с техподдержкой становится тоже проще (пользователю).
В интернете можно найти множество готовых и отрисованных в векторе изображений шагов прогресса. Но в этом материале мы рассмотрим несколько интересных плагинов (бесплатных), наиболее симпатичные и современные по стилю художественные работы и, разумеется, идеи дизайнеров, вариации, что помогают найти вдохновение.
Подсказки
Всякий раз, когда идет работа и осмысление шагов прогресса почти всем веб-дизайнерам хочется оформить их в виде наклеек, этикеток. То есть сделать крупными и яркими (по сравнению с основной палитрой сайта). В целом такая мысль правильная, потому что пользователи должны знать, где они находятся в процессе заполнения и оформления.
Поэтому текст хорошо создавать полужирным шрифтом, прописными буквами, ярким и контрастным по цветности в сравнении с цветом фона, даже в случае того, если шаги еще не активны. Затем приглядитесь внимательнее и убедитесь, что вам удалось подобрать тот текст, что наиболее тщательно объясняет каждый шаг пути к цели. Например, Всемирная продовольственная программа, Shyne.
Пояснять и обозначать тот шаг, на котором находится пользователь в данный момент можно и с помощью изменения цвета шрифта в заголовках этикеток, а можно и с помощью таких элементов как стрелочки, линии, смена иконок и прочее. Но и они должны быть хорошо видимы на фоне. Такие метки, этикетки, могут дать пользователю возможность увидеть, что весь процесс оформления чего-либо может потребовать, какие данные, информацию из какой области. Это особенно полезно для объемных страниц по оплате, где вы хотите удержать пользователя на сайте, а не сразу предложить ему завершение.
Но нет никакой волшебной формулы для идеальной этикетки. Тем не менее, оптимальное количество шагов, с человеческой точки зрения, это 3-4 этапа, в противном случае, пользователям будет утомительно, а может и привести к легкой рассеянности при вводе данных или, что чаще, запутанности.
Посмотрим на варианты: Подружка, 1c-interes, primagames и прочие аналоги. Везде используется 3-4 шага, где последний – не более чем обычное сообщение: «Ура! Мы приняли Ваш заказ!». То есть, от пользователя уже ничего и не требуется. Обратите внимание на цветность шрифта, контрастность, четкость начертания и понятность целостности (логического смысла). При этом стоит обратить внимание, что пустого пространства (места) на таких страницах очень много, так как кроме самих полей ввода здесь не может быть чего-либо лишнего, нежелательны даже блоки рекламы. В результате получается, что у веб-дизайнера уже есть почти все возможности для тонкой настройки дизайна.
Иконки в помощь визуализации
Если пространства много при создании и отрисовке шагов прогресса, то попробуйте добавить некоторые пользовательские иконки (мы уже рассказывали об их значимости), олицетворяющие собой смысл каждого шага. Они могут быть любого стиля, какой вам больше нравится: от детализированной графики до векторных SVG или чем-то между ними. Цель, в данном случае, заключается во внесении большей ясности, чтобы помочь провести пользователя по всем шагам более ясно, дружелюбнее.
Отличный пример от Tri Nguyen, хотя куда чаще дизайнеры используют только порядковые номера. Как мы уже говорили ранее, текст всегда хорошо осветлять. Но даже добавление анимации (пусть даже это обычная смена одной иконки на другую) помогает продавать товары/продукцию гораздо быстрее. Вот почему в идеале вы должны не только создать дизайн, но и опробовать его, сымитировать его использование, стать на мгновение самим пользователем.
Отличной идеей может стать банальное добавление иконки-галочки для уже пройденного шага. Это приятно визуально, это удобно в использовании форм. Простой визуальный сигнал для возможности отобразить момент, где пользователь находится в настоящее время в общем потоке. Такой иконкой может быть не только галочка (даже обычная смена цвета один на другой), но именно галочки являются яркими и простыми в использовании, их быстрее узнают сами пользователи.
Навигация
И то, с чего мы начали материал – интерфейс и прогресс изучения контента. Цель шагов прогресса (или навигационной цепочки) в интерфейсе заключается в создании своеобразного руководства пользователя по серии страниц. В данном случае уместнее думать уже не о шагах по изучению, а именно о навигации: последовательной и иерархичной.
Посмотрим на lonelyplanet, marchanddetrucs, park, ieee, hflu, sberbank. Любая визуализация проста и порой даже незаметна, но её наличие значительно упрощает изучение контента. И, разумеется, такие варианты навигации, цепочки, подходят только для действительно крупных сайтов с очень большим количеством страниц.
На что здесь стоит обратить внимание? Банально, но стремитесь к последовательности. Здесь, как и с формами, не нужно беспокоиться о том, сколько места вы используете или насколько заметными вы создаете этикетки. Если присмотреться к большинству крупных проектов, то навигация использует только стрелочки и текст, без особого дополнительного визуального оформления.
Главное, что веб-дизайнеры всегда помнят и на что нацеливаются – создание того, что всегда будет оставаться в поле зрения пользователя. Таким образом, пользователь точно знает, куда заглянуть, по какой ссылке перейти, если ему хочется узнать больше информации на своем пути изучения контента. И, разумеется, дизайн такой навигационной цепочки должен соответствовать общему дизайну сайта.
Например, проект le-hameau-du-renard-blanc имеет весьма хорошо сделанную визуализацию. Идея не нова, но… прокучивая длинную страницу, что состоит из разных секций (разделов), можно увидеть, как движется и линия прогресса, и активируется название читаемого в данный момент раздела.
Аналогично отрисован прогресс и на moleskine, thomasmaybespoke, hoover, bistroboudin. «Будущие» шаги имеют более светлый оттенок цвета. Когда пользователь пролистывает страницу или переходит по следующим ссылкам, оттенок темнеет и остается таковым в дальнейшем. Такого эффекта можно достичь разными способами, но цель всегда одна: дать достаточно информации, чтобы помочь пользователю определить, сколько он завершил изучать и сколько еще осталось информации.
Вариации дизайна шагов прогресса
Начинать создавать дизайн шагов прогресса с нуля – не великая радость для любого мастера. Но, халява – лучший друг всех пользователей РС и интернета. Она способна дать идеи, помочь вдохновиться некоторыми моментами. Поэтому теперь посмотрим на самые интересные варианты отрисовки и идеи создания прогрессов, отвечающих и современным трендам, и моде, и стилю в целом. Все вариации очень легко перепроектировать, и вы даже можете поменять линии, цвета или иконки, чтобы удовлетворить те идеи, которые были подобраны для сайта. Отличные варианты шаблонов для дизайна любых шагов прогресса при работе с UI.
Вариант 1
Тахир Юсуф представил один из самых простых и коротких вариантов. Тонкие линии, понятные иконки-кружочки, превращающиеся в большие по размеру, когда пользователь находится в данном разделе, а затем в галочку, когда этап пройден. Существует и бесплатный PSD с отрисовкой.
Еще один вариант прогресса по оформлению заказа, состоящий из трех шагов, от Barbara. Вариант довольно уникален, хотя бы только тем, что линии между пройденным шагом и совершающимся, имеют градиент. При этом основная роль отдана иконкам, отлично подобранным, а слова служат не более чем дополнением. Отличный вариант для мобильного UI и для десктопа. Также имеется PSD для загрузки.
Прагматичный интерфейс для создания шагов прогресса при оформлении покупки в интернет-магазине. При этом были использованы и скромные, строгие, линейные иконки, и текст, и нумерация, и смена цветов. И да, тоже есть PSD.
Код и плагины
Спроектированные и красиво нарисованные в макете сайта «прогрессы» – хорошо и отлично, но они только первый этап. После этого предстоит еще закодировать всю эту красоту. Являетесь вы веб-верстальщиком или только дизайнером, но мы расскажем о некоторых также полезных плагинах, которые позволяют поработать с прогрессами. Некоторые дизайнеры предпочитают начинать с кода и сначала продумать макет, потом рисовать. Другие – делают это наоборот. А третьи, и тем более, только рисуют. Модули ниже помогут сэкономить кучу времени, как только будет совершён переход к этапу кодирования, но и они могут дать каплю вдохновения.
Плагин был выпущен 2017 году и уже успел завоевать огромное количество поклонников. Он один из немногих плагинов по работе с прогрессом, но один из лучших. Быстрая установка, простая настройка и работа. Что еще может желать каждый из нас.
Если есть идеи создать более «навороченное», то стоит приглядеться к SmartWizard. Он создан для Jquery + Bootstrap 4, поэтому работает только на фреймворке BS. Не для всех он окажется полезным, но это и отличный повод изучить фреймворк. Плагин позволяет делать разные варианты шагов прогресса, добавлять иконки, текст или ограничиться только иконками. Вариантов много, анимации тоже.
Еще один плагин, стоящий упоминания. Он создан на JQuery и поддерживает много возможностей по настройке. Но это (настройка) и времени у вас займет немало. Зато в дальнейшем будет возможность создавать быстро и легко разные и разные варианты. Все подробно описано на странице с плагином, поэтому придётся найти время на изучение.
Кроме того существуют варианты создания прогресса шагов и с помощью CSS и JS. Здесь на помощь приходит наш старый добрый CodePen. Речь идет о Progress Steps in Bootstrap, Multi-Step Form и Progress Wizard. Также поискать идеи и примеры, шаблоны можно задав поиск по тегу progress.
Завершение
Прогресс шагов в дизайне пользовательского интерфейса – тенденция быстро развивающаяся, но всегда делающая ставку на удобство для пользователей. Упрощенный интерфейс и многочисленные ненавязчивые подсказки форм заказа/регистрации могут даже в некоторой степени привнести спокойствие пользователям, поощрить к совершению заказа, создать атмосферу дружелюбия и отзывчивости.
Мы надеемся, что наши примеры и ресурсы дадут вам достаточно идей, чтобы попробовать создать что-то свое, придумать нечто среднее, возможно, для этого сочетая «с миру по нитке». Но тем уникальность и хороша, что, вроде, всё уже было, а, вроде, как-то и по-новому выглядит.
И никогда не забывайте искать в интернете готовые варианты и ими вдохновляться. Авторы для того их и представляют миру, чтобы все могли создавать и учиться на материалах, находить идеи, творить что-то свое.