Icons8 UX Design: Moving Stuff Around

Проблема: несколько кликов

Я смотрел на нашу статистику. Вопрос, который возник у меня в голове, был: почему люди просматривают в 3 раза меньше страниц на Icons8, чем на сайте конкурента?

Гипотеза

Я был озадачен. Я имею в виду, у меня было несколько объяснений:

• Люди могут найти нужные иконки быстрее на нашем сайте.
• У нас есть динамическое приложение, поэтому люди не покидают страницу.

Было слишком хорошо поверить.

Во-первых, мы по-прежнему отправляем события в Google Analytics, когда люди делают клики.

Во-вторых, моя интуиция заставила меня искать менее приятное объяснение.

Идея исходила от наших друзей в Usethics. Они объяснили это тем, что я не должен был пропустить. Что-то, что должен знать каждый дизайнер UX ради собеседований.

Закон Фитцса

Разделенный по формулам, он говорит, что чем ближе объекты, тем лучше. Наше приложение заставляет пользователей переключать внимание с одного места на другое по всему экрану. Это тяжелая когнитивная задача, которая заставляет пользователей уйти.

Решение

Решение прост. Откройте их рядом с экраном. Google Images делает это в течение многих лет.

Движущийся материал

Это всегда возможность переместить функциональность:

• Диалоговые окна
• Расширяющиеся разделы
• Аккордеонные меню
• Меню Burger и т. Д.

Проблема в том, что люди не ожидают этой функциональности. Поэтому они не ищут этого. Поэтому, согласно теории информационного фортификационного материала, они игнорируют все «показать больше» элементов управления.

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

Короче говоря, нам нужно показать достаточно, но и скрыть достаточно.

Редизайн

Вот начальная версия редизайна после нескольких итераций.

Коллекция

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

Им понравился результат. Напротив, мы были в ужасе. Это как писать одно слово с различными шрифтами.

Это побудило нас заново изобрести наши коллекции.

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

Таким образом, мы сделали сборники горизонтальными.

Иконка Детали

Вот диалог с информацией о значке.

Прессование

Мы положили его на диету, удалив все довольно белое пространство. Уменьшение размера шрифта. И уплотнение эффектов. Но он все еще был большим.

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

Действительно, если у нас есть все стили на экране и поиск иконки дома, у нас есть это во всех стилях.

Стили сгруппированных иконок

Когда мы создали наш текущий дизайн, у нас было четыре стиля значков. Сейчас у нас больше дюжины. Хуже всего то, что название стиля не предполагает визуального стиля. Кто знает, как выглядит стиль «Сумерки»?

До сих пор мы сгруппировали их.

Скачать

У нас есть долгая история поиска идеального управления загрузкой.

• Не волшебник, который заставляет вас двигаться вперед каждый раз при загрузке другого значка.
• Не громоздкая форма, которая съедает ваш экран.

У нас было что-то, что раньше проходило наши тесты юзабилити, более или менее. Мы начали украшать его.

Другой материал

Как эта статья балансирует между «длинным чтением» и «скучным», позвольте мне просто перечислить все другие улучшения, которые мы провели мозговой штурм и (по крайней мере частично).

• Удалено верхнее меню
• Изменено меню Моя учетная запись
• Создано изображение профиля
• Добавлены предварительные просмотры стиля на главной странице вместо новых значков.

Кроме того, мы оптимизировали производительность. Возможно, это первый раз, когда я увидел рейтинг AAAA на WebPagetest.

Будущие улучшения

На данный момент мы проводим следующий раунд юзабилити-тестов, в частности, по следующим вопросам:

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

Ваш поворот

Работа на Icons8 является особенной. Люди, которые используют Icons8, сами дизайнеры. Многие улучшения пришли от нашего сообщества. Поэтому, пожалуйста, оставляйте комментарии и присоединяйтесь к нашему форуму.

Хочешь попробовать сломать вещи? Вот наш файл эскиза.

Измененный Icons8 только что был выпущен на Product Hunt, приглашаем вас присоединиться к обсуждению — ваши отзывы будут ценны для будущих обновлений!

Об авторе: Иван Браун, дизайнер UX, основатель Icons8