Перепроектирование Мира человека

Компания Мэйл.ру попросила деликатно улучшить страницу Мира человека в сети Мой Мир http://my.mail.ru/. Требовалось проработать компоновку блоков и дизайн нескольких элементов.

Вот как выглядела тогда эта страница:

Сбор данных

Для того, что бы выяснить что чаще всего используется людьми в социальных сетях, было проведено два интервью-наблюдения за действиями пользователей и произведён интернет-опрос 38 человек.

Основным вопросом при проведении опроса был следующий: «Какими ты соцсетями (одноклассники, в контаке, мой мир на мэйле.ру,…) пользуешься. Что в них используешь, что из используемого нравится, а что — нет». Если респондент не полностью отвечал на вопрос, то задавались уточняющие вопросы.

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

В первую группу вошли пользователи, которые пользуются одновременно тремя сетями: Моим кругом, Одноклассниками и В контакте. Вторую группу составили исключительно пользователи одноклассников. Третья – это пользователи одновременно и Одноклассников и В контакте.

Обработка данных

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

Самыми популярными в социальных сетях вещами оказались:
— Чаты 31 чел.
— Фото 28 чел.
— Поиск людей 16 чел.
— Видео 14 чел.
— Аудио 8 чел.
— Файлы 3 чел.

Плюсы и минусы, высказанные пользователями, были сведены в следующую таблицу:

Общая компоновка

Изучение системы проектов Mail.ru выявило ряд недостатков в навигации, для устранения которых в рамках проекта «Мой мир» было разработана общее компоновочное решение:

Трёхколоночная вёрстка, используемая в настоящее время, позволяет разделить блоки, ориентированные на разную информацию. Первая колонка, залитая оранжевым цветом предназначена для рекламы других проектов Mail.ru. При переходе с этих блоков пользователь попадает в разделы проектов, которые не содержат его собственный контент. Вторая колонка покарашена в зелёный цвет. При клике по элементам этой полосы пользователь остаётся в текущем проекте (Мой мир). Третья, синяя полоса предназначена для доступа к пользовательской информации в других проектах, таких как «Фото», «Видео» и т.д. Такое компоновочное решение позволит упорядочить систему навигации и устранит путаницу в переходах.

Подробная компоновка

Для производства подробной компоновки были использованы результаты обработки информации. Они были сведены в таблицу для определения приоритетов блоков:

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

Вот подробная компоновка личной страницы:

А это подробная компоновка чужой страницы:

Детальное проектирование

Часть элементов страницы была проработана до уровня передачи дизайнеру сначала карандашом (много времени ушло на меню):

… а потом и в редакторе:

Услуги:
* Аудит юзабилити – комплексная экспертиза
* Модернизация интерфейса – постепенные улучшения
* Экстремальное юзабилити – быстрый старт
* Проектирование интерфейса – тщательная проработка

Резюме, проекты, отзывы: http://fedyaev-andrey1.moikrug.ru

Рубрика: Всячина.