ВебАск
ВебАск — это онлайн конструктор анкет и опросов. C его помощью вы сможете собирать обратную связь, создавать регистрационные формы, опросы, анкеты и даже проводить голосования.
UX / UI дизайн
Продукт дизайн
Дизайн-менеджмент
ЗАДАЧА
Сделать современный SaaS* конструктор адаптивных опросов с логикой переходов, экспортом ответов, интеграциями и шерингом.
SaaS (Software as a service) — это когда доступ к программам предоставляется удаленно и по подписке.
МОЯ РОЛЬ
С конца 2018 по конец 2019 — продукт-дизайнер. Я был ответственным за создание интерфейса с нуля, а также айдентики и некоторых страниц сайта. Я проектировал интерфейсы в Figma или сразу напрямую в HTML и CSS.
Краткое описание
Чем полезен ВебАск? Представьте, что перед началом большого проекта, вам нужно опросить аудиторию, посмотреть результаты и принять решение делать или не делать ваш проект. В этом поможет ВебАск.
Вы делаете опрос отправляете его целевой аудитории и исходя из ответов решаете делать или не делать.
Допустим, что вы получили положительные отзывы и решили всё таки делать проект. Где найти первых пользователей?
В ВебАск у вас уже есть список email респондентов, которые положительно восприняли вашу идею.
Ещё вы можете построить голосование за новые фичи, анкетировать ваших пользователей, делать сложные опросы с разными вопросам в зависимости от ответов.
Опрос, который я создавал для своих нужд, чтобы проверить насколько и кому полезен конструктор сайтов и веб-приложений Quarkly
Преимущества
Интерфейс ВебАск простой интуитивный и хорошо работает для неподготовленных пользователей.
Хоть интерфейс и простой, в конструкторе есть весь набор необходимых виджетов.
Сложные опросы в ВебАск могут содержать в себе условия. В зависимости от выбранного ответа, могут показываться те или иные вопросы.
Создатель опроса видит ответы в наглядной форме, может экспортировать их или делится по ссылке. В арсенале создателя имеется широкий набор контролов, интеграций и настроек.
Конструктор
ЗАДАЧА
Первая и основная задача, которая стояла передо мной, это спроектировать интерфейс конструктора опросов. При этом так, чтобы он выглядел простым, был функциональным и работал для широкой аудитории.
РЕШЕНИЕ
В результате я проделал большую работу. Результат можно разбить на блоки:
- Мини-карта опроса;
- 18 типов вопросов;
- Операции с вопросами;
- Механизм добавления вопросов;
- Редактирование значений;
- Редактирование текста;
- Настройки и варианты редактирования вопросов;
- Логика переходов на вопросы;
- Настройка дизайна опроса;
- Множество пограничных состояний, микро взаимодействий и настроек.
Базовое состояние пустого проекта приглашает начать работу над опросом
Photo by Ralph (Ravi) Kayden
Для создания опроса у взыскательного пользователя есть 18 различных контролов
Photo by Ralph (Ravi) Kayden
У каждого контрола свои персональные настройки
Photo by Ralph (Ravi) Kayden
Мини-карта опроса помогает в навигации и организации порядка вопросов
Photo by Ralph (Ravi) Kayden
Логические переходы
ЗАДАЧА
Респонденты неохотно отвечают на длинные опросы. Чтобы их сократить, можно создавать разные цепочки вопросов в зависимости от ответов.
Следующая задача это создать интерфейс для условных логических переходов. Например, если ответ на текущий вопрос «Нет», то пропускать следующий вопрос.
РЕШЕНИЕ
Я спроектировал простой интерфейс создания логики в сайдбаре*. Преимущество такого подхода в том, что пользователь параллельно может видеть сам опрос.
Сайдбар — это боковая панель сайта, визуально отделенная от контента на странице
Пользователь может создавать большое количество условий, а также настраивать переход, если эти условия не выполняются.
В условии может участвовать любое значение вопроса, а так же есть несколько возможных типов условий, например «равно», «не равно», «больше чем», «меньше чем» и тп.
Простое условие для пропуска лишнего вопроса
Photo by Ralph (Ravi) Kayden
Группа условий для разных ответов
Photo by Ralph (Ravi) Kayden
Дизайн опроса
ЗАДАЧА
Основная часть пользователей — представители компаний. Значит опросы им нужны в корпоративном оформлении. С другой стороны и другие пользователи часто хотят поменять оформление.
Следующая задача — создать место где пользователь сможет быстро и просто менять дизайн, а также персонализировать и брендировать его.
РЕШЕНИЕ
Так же как и в случае с логикой, настройки дизайна я вынес в сайдбар, чтобы наглядно смотреть как меняется оформление опроса.
Для простого перебора дизайна пользователь может кликать на миниатюры. Если нужна тонкая настройка, пользователь кликает на пиктограмму и далее может настраивать цвета, шрифты и фоны.
При желании пользователь может сохранить свои тонкие настройки в персональную тему, и применять её к другим опросам.
Кликая на превью можно легко менять тему
Photo by Ralph (Ravi) Kayden
Если это необходимо, довольно просто можно сделать своё уникальное оформление
Photo by Ralph (Ravi) Kayden
Дашборд и другие сервисные разделы
ЗАДАЧА
Сделать дизайн дашборда, настроек проекта, шеринга, превью и других сервисных разделов.
РЕШЕНИЕ
Дашборд я оформил в виде матрицы из плиток с информацией о проекте. Цвет заливки подсказывает какой фон у опроса. При нажатии на кнопку «троеточие» открывается меню с действими над проектом.
Другие разделы наследуют дизайн и выглядят в едином стиле.
Раздел «Превью» покажет пользователю как выглядит его опрос на мобильных устройствах.
В дашборде проекты располагаются плиткой
Photo by Ralph (Ravi) Kayden
Настройки предельно просты и понятны для пользователя
Photo by Ralph (Ravi) Kayden
В превью можно проверить как работает опрос
Photo by Ralph (Ravi) Kayden
Как опрос выглядит на планшете
Photo by Ralph (Ravi) Kayden
Как опрос выглядит на смартфоне
Photo by Ralph (Ravi) Kayden
Результаты опросов
ЗАДАЧА
Спроектировать наглядный способ оценивать результаты опросов в целом и в частности. Важно показать группу ответов по каждому вопросу и группу ответов по каждому пользователю.
РЕШЕНИЕ
Я разбил раздел на три подраздела:
- общая статистика,
- отчеты,
- ответы.
В общей статистике я постарался отобразить наиболее важные параметры в виде фактоидов и диаграм.
В отчетах ответы сгруппированы по вопросам. В зависимости от типа вопроса соответствующие отображение результатов. Когда в виде списка, когда в виде линейных диаграмм.
В ответах карточки показывают ответ респондента.
Ответы на удаленные вопросы, или на старые версии вопросов также сохраняются.
Все экраны адаптивны и корректно отображаются на смартфонах.
Общая сводка по результатам
Photo by Ralph (Ravi) Kayden
Отчет по каждому вопросу отдельно
Photo by Ralph (Ravi) Kayden
Все ответы респондентов
Photo by Ralph (Ravi) Kayden
Вспомогательные состояния экранов и панелей
В процессе работы нельзя забывать про пограничные неочевидные состояния: нет данных, мало данных, ошибка загрузки, и т. п.
У опроса нет ответов
Photo by Ralph (Ravi) Kayden
Ошибка сервера стилизованная под контрол рэнж, который можно двигать
Photo by Ralph (Ravi) Kayden
Логотип и фирменный стиль
Цветовая схема интерфейса ВебАск
Photo by Ralph (Ravi) Kayden
Логотип и знак ВебАск
Photo by Ralph (Ravi) Kayden
Конкурентная разведка
Перед началом работ, я проанализировал, опробовал и собрал сравнительную таблицу конкурентов. Это существенно облегчило принятие решений в будущем.
Сравнительная таблица конструкторов опросов
Photo by Ralph (Ravi) Kayden
Результаты
ВебАск живёт, помогает пользователям решать их задачи. Основная часть пользователей русскоязычные.
© Артём Жигалин | psycholcycle@gmail.com