Чаты поблизости или как сделать юзабельный интерфейс

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

Задача

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

Идеи

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

Собрав необходимое количество скриншотов, я отправился в библиотеку компонентов VK в Figma. Кстати, я выбрал платформу iOS, так как раннее был знаком с Human Interface Guidelines.

Я решил побрейнштормить на тему того, какие элементы должны быть на карте, какие в целом на экране.

Но нельзя было сразу с горящими глазами броситься рисовать экраны, нужно было провести небольшое исследование, в процессе которого я бы учёл какие-то анатомические привычки и особенности.

Что? Как? Где?

В моём анализе был 1 главный вопрос и 3 дополнительных.

Зачем пользователю чаты поблизости? (Иначе, что он хочет там делать?)

Ответ: Новые знакомства и обмен мнением. Да-да, только представьте сколько интересных людей находится рядом с вами. А кроме них есть ещё и чаты любимых мест, мероприятий и сообществ. Новый раздел поможет быстрее освоиться в незнакомом месте и завести больше друзей.

А вот дополнительные вопросы, ответы на которые я дам далее в статье:

— Что люди хотят видеть в разделе «Чаты поблизости?»

— Как будут отображаться такие чаты?

— Где у пользователя будет возможность попасть в раздел с такими чатами?

Большой палец — наше всё!

Не секрет, что самые главные частые в использовании элементы интерфейса стоит расположить в зоне досягаемости большого пальца. Я наметил 3 основные зоны: нижний (главный) блок, карта и шапка.

To scroll, or not to scroll: that is the question…

Оставить пользователя наедине с кучей точек нельзя. Как тогда он должен ориентироваться? Я представил себе кейс, когда мы знаем, как чат называется, знаем примерно, где он находится. Но вот проблема…в этой местности ещё 15 чатов. Придётся протапать, в худшем случае, все 15, чтобы найти верный! В моей голове родились 3 варианта реализации:

Каждому из них я устроил стресс-тест (пытался найти кейсы, когда решение оказывается неюзабельным). Результаты следующие:

— Modal View удобен, когда карта играет второстепенную роль. При его использовании, на 5 чате в списке карты уже не видно 👎

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

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

Мы уже становимся близки к итоговому варианту:

CJM (кастомер джорни мэп)

Параллельно с изучением анатомических особенностей нашего удивительного тела, я составлял Customer Jorney Map.

Фильтр показан пунктиром, так как попасть в фильтр можно не только из главного экрана, но и из других мест. Поэтому я показал только главный вариант взаимодействия.

Определившись с CJM, приступим к проработке макета и ключевых точек.

Вокруг, поблизости или рядом?

Вопрос нейминга встал ребром, когда выяснилось, что в жизни (а не в макете в Figma) используется VK Sans вместо TT Commons. Что поставило использование двух кнопок в верхнем меню под удар.

Я придумал 3 варианта решения этой проблемы:

1. Уменьшить на 2 пункта размер шрифта в меню (Таким образом пришлось бы уйти от стилей, используемых в дизайн-системе)
2. Сместить текст в меню влево, добавив выпадающее меню (Тогда шапка превратилась бы в кашу)
3. Изменить название на какое-то другое (Нужно накинуть вариантов)

Тогда в моей голове поселилось 4 варианта:

Каждый из них по-своему описывал новую функцию, но и имел свои минусы. «Около» намекает на объект и без него звучит очень абстрактно. «Вокруг» хоть и интересный вариант, но интуиция подсказывает, что в нём что-то не так. Возвращаться к «поблизости» уже нельзя, ведь назад дороги нет. Остался вариант «рядом», который также лаконичен, как и «вокруг», но не вызывает никаких вопросов, читается быстро и остаётся в памяти. А главное, помещается в шапку при стандартном кегле и межбуквенном расстоянии!

Список

Здесь, как оказалось, очень много мелких деталей, о которых нельзя забывать. Нарисовал я вид списком вот так:

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

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

— Пользователю нужно видеть, какое расстояние до соответствующего чата. Здесь пригождается Second Subtitle, используемый в Rich Cell.

— У пользователя должен быть призыв к действию. Эту роль здесь выполняет кнопка, которая также контекстуально подсказывает тип соответствующего чата.

Сбор фидбека

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

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

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

Создание чата

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

Фильтр

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

Как можно было заметить — кнопка фильтра находится внизу. При тапе по ней вызывается Modal Page с параметрами фильтрации:

Финал — отсылка к началу

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

Ассоциация играет очень важную роль в нашем восприятии. Разместить точку входа в раздел локальных чатов в фотографиях нельзя, так как это не позволит установить ассоциативную связь функции с разделом. Поэтому я принял решение разместить точку входа в «Мессенджере».

Alternative

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

— Кнопка «На карте»

— Строка поиска на карте (Хотя кейс с поиском чата на карте кажется в моей голове непопулярным). Всё-таки поиск уже есть в списке.

Прототип

Сейчас всё, что я нарисовал живёт лишь в моих макетах. Но я сделал интерактивный прототип, где можно попробовать то, о чём я писал здесь. Но не стоит забывать, что я не написал приложение, а сделал интерактивный прототип! Так что не стоит пробовать подвигать карту или открыть чат.

Наслаждайтесь: прототип