Главное Свежее Вакансии   Проекты
340 0 В избр. Сохранено
Авторизуйтесь
Вход с паролем

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

Это тематическое исследование будет посвящено не только редизайну, но и улучшению его опыта путем добавления новых функций. Рассматривать процесс редизайна мы будем на примере статистики в Dribbble.

Больше интересных и актуальных статей ищите в нашем блоге и телеграм-канале.


Прежде чем мы продолжим


Это личный проект Ankita Kanojia. Она приняла вызов с целью улучшения своих дизайнерских навыков. В этой статье мы подробно узнаем о ее работе и разберем ее.

Промо-видео


Ниже представлено промо-видео, которое было сделано для этого проекта.

Что из себя представляет Dribble?


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

Постановка задачи


Изменить дизайн существующей страницы статистики dribbble для веб-платформ и мобильных устройств.

Процесс


Какие методы были применены:


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


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

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


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

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

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

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

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

Опрос


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

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


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


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

Цели


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

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

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

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

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


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


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

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

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

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

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


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

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

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

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

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

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

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

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

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


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


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

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

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

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

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

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

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



Итерации


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


Структура


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


Редизайн dribbble:


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

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


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

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


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

Карточки


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

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

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


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


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

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

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

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

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


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

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

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


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

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

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

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


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

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

4 Аудитория


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

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

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

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


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


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


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

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


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


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


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


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

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




0
В избр. Сохранено
Авторизуйтесь
Вход с паролем
Комментарии
Первые Новые Популярные
Комментариев еще не оставлено
Выбрать файл
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать

Spark использует cookie-файлы. С их помощью мы улучшаем работу нашего сайта и ваше взаимодействие с ним.