Гайд по редизайну на примере статистики Dribbble

Кто является пользователем?

Здесь представлены все дизайнеры и креативщики, которые купили себе статус про.

Понимание проблемы

— Зачем пользователю статистика? Чтобы следить за его работой. Чтобы увидеть его/ее деятельность.

— Он отслеживает и анализирует производительность.

— Статистика — наиболее эффективный способ отслеживать несколько источников данных.

— Это сокращает время, затрачиваемое пользователем на просмотр всех данных индивидуально.

— Многие пользователи впадают в ступор при виде огромного количества данных. Чтобы этого не происходило, принято использовать графическое представление данных.

Опрос

Чтобы обнаружить проблемы и определить поведение пользователей с помощью существующей страницы статистики, был проведен опрос пользователей.

Вот что стало известно:

Зачем менять дизайн?

По мнению автора статистика не выглядела визуально хорошо и действительно нуждалась в трансформации. Во-вторых, при более детальном изучении данных, их структура начала вызывать дополнительные вопросы.

Цели

Визуальное оформление: работа должна быть визуально привлекательной

Разборчивость: правильная информационная архитектура и правильное использование элементов пользовательского интерфейса.

Выделения: выделение важных ключевых моментов, которые легко бросаются в глаза.

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

Выявление проблем

Ниже представлены основные проблемы, которые были замечены на существующей странице статистики.

Выявленные проблемы:

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

— Во-вторых: период времени просмотра статистики расположен криво. Были показаны лишь данные за 30 дней и за все время.

— В-третьих: в разделе самых популярных снимков был фильтр для лайков, просмотров и комментариев. Но действительно ли пользователям нужен фильтр по просмотрам, лайкам или комментариям?

После определения проблем , содержимое было разделено на высокий, средний и низкий приоритеты.

Был составлен список моментов, которые являются важными для пользователей.

— Какие ключевые моменты важны для дизайнеров?

— Что они ищут?

— Какая информация им необходима?

— Как долго они остаются на странице статистики?

— Как часто они проверяют статистику?

— Что сподвигает пользователя проверить статистику?

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

Конкурентный анализ

Были просмотрено несколько информационных панелей и экранов статистики. Собраны изображения нескольких реальных информационных панелей, составлен список шаблонов. Были выявлены сходства и различия. Такие пункты как цвета, значки, поля, интервалы, вкладки, фильтры, текстовые ссылки и макеты.

Что вышло по итогу:

— Основная информация вверху страницы.

— Использование линейных и гистограмм.

— Минимальное использование цветов.

— Жирные числа и тексты.

— Панель навигации, содержащая значки с именами.

Создание нескольких набросков

Итерации

Придуманы разные варианты дизайна. Каждый дизайн был отдельным уроком и помог достичь следующего. Также было сделано несколько заметок по каждой итерации.

Структура

Чтобы сохранить структуру статистики в правильном порядке, она был разделена на 4 вкладки. Избегая длинной прокрутки юзеру будет легче перемещаться по статистике.

Редизайн dribbble:

Панель управления разделена на 4 вкладки: обзор, вовлеченность, лучшее время для публикации и аудитория.

1 Вкладка Обзора

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

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

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

Карточки

Карточки остались простыми и чистыми.

— Слева вы видите карточку из раздела недавних снимков. Карточка содержит изображение снимка, название с датой загрузки и статистику снимка.

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

2 Вовлеченность (взаимодействия)

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

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

Что это такое?

— Они показывают, сколько людей взаимодействовали с вашими работами. Это определяется лайками, комментариями, которые люди оставляют под вашими работами.

— Такие ключевые слова как Good и Very high говорят о том, насколько высок уровень вовлеченности. Кроме того, их легко идентифицировать, потому как они цветные.

— Еще одна новая функция, которая была добавлена — это «Просмотр профиля». Разве не полезно знать, кто посещал ваш профиль?

— Кроме того, вы как и прежде будете получать уведомления, из которых узнаете о появлении новых зрителей.

3 Лучшее время для публикации

Об этом должен был подумать каждый пользователь.

«В подходящее ли время я публикую?», «Будут ли люди вообще смотреть посты в это время?».

Итак, вот решение. На диаграмме, показанной на экране, предоставлены снимки, размещенные дизайнерами в разные дни с привязкой ко времени.

— Области светлого цвета указывают на то, что было загружено меньшее количество снимков или дизайнеры были менее активны. В то время как темный цвет указывает на то, что пора публиковать или на особую активность юзеров.

— Есть светло-розовые участки, которые сообщает игроку о лучшем времени.

— Ниже расположен график, где пользователь смог бы проверить информацию по своим постам.

4 Аудитория

Эта вкладка содержит информацию о местонахождении ваших подписчиков, топ фоловеров и ваших любимых дизайнеров.

— Была добавлена карта, чтобы можно было понять, где расположена ваша аудитория.

— С помощью фильтра можно легко определить, из какой страны или города ваши подписчики.

— Два других раздела — это главные фанаты, поставившие вам больше всего лайков и любимые дизайнеры, которых в свою очередь оценили вы.

Дизайн для мобильных устройств

В dribbble для андроида юзер должен нажать на кнопку «more», где и будет расположен раздел статистики.

Теперь, нажав на статистику, вы попадете на главный экран мобильной панели управления.

Домашняя вкладка мобильного dribbble

В обновленном дизайне осталась панель навигации, потому как она правильно распределяет статистику. Вся информация будет расположена в соответствии правильной иерархии.

Вовлеченность и фоловеры

— В мобильной версии можно ознакомится с вовлеченностью, а также узнать лучшее время для публикации постов.

И на десерт...

Красивая темная тема!