UX-патруль, выпуск третий: «ВКонтакте»

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

В закладки
Аудио

Пишем про то, что неудобно нам и нашим знакомым. Есть чем дополнить? Напишите в комментарии. После публикации и сбора обратной связи мы направим все проблемы разработчикам сервиса.

Предыдущие выпуски:

Сегодня разбираем «ВКонтакте». Затронули только страницу сообщества. Погнали!

Постеры

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

Сейчас выбор фона для постера реализован в виде карусели, в которой видно только 8 элементов из ~40. Следовательно, для выбора тёмного фона нужно сделать 6 кликов. Либо кликать по не очень очевидному элементу сверху.

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

Как сделать удобнее

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

Сделали логику, как у смайлов и категории рядом, а не вверху постера

Отложенная публикация

Ранее эта функция была среди прикрепленных материалов и называлась «Таймер». Вынести её отдельно — правильное решение. Но сделали это не совсем удачно. Посмотрите на текущий сценарий:

Не смотря на мой опыт работы с сайтами, я частенько непроизвольно кликаю на кнопку «Сбросить», так как дату выбрал, окно не пропало — интуитивно ищу кнопку «Применить», но из-за спешки жму «Сбросить». Возвращаюсь, пытаюсь выбрать даблкликом — тоже не выходит.

И выбор времени оказался на втором плане, хотя кому-то нужно только время задать.

Хочется сказать: «Раньше было лучше»

Старый интерфейс отложенной публикации

Тут выбор однозначный, после клика на дату — она выбиралась. Время и дата имеют одинаковый вес. По-моему, тут всё ок.

Возможно, текущее решение сделано с целью экономии клика, т.к. если сделать также надпись «Сейчас», а по клику отображать вот этот интерфейс — для открытия календаря потребуется ещё один клик. Но сэкономленный клик теперь приходится производить вне области, после выбора даты. Это не очевидно.

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

Смайлики в пост

Расставлять смайлики по тексту больно.

Сейчас покажу наглядно, о чем речь:

  1. Кликаю на строку, в которую нужно вставить смайл;

  2. Листаю вверх, к иконке смайла;

  3. Кликаю по ней;

  4. Ищу нужный смайл;

  5. Кликаю по нему;

  6. Не понимаю, что произошло;

  7. Жму ещё раз;

  8. Снова ничего не понимаю;

  9. Листаю в конец поста и вижу смайл;

  10. Вырезаю и вставляю туда, куда мне нужно.

Почему так происходит? Разобрался не сразу. Оказывается, смайлы появляются при наведении, а не при клике. Соответственно, клик по иконке сбрасывает выбранное место.

Как сделать удобнее

Раскрывать смайлы и по клику и при наведении.

Ещё есть проблема, которую выше указал под п.2 — если хочешь вставить смайл в длинном тексте, то приходится всегда листать вверх, выбирать смайл, листать вниз и смотреть, как он выглядит.

Для решения этой проблемы можно сделать смайл плавающим при скролле:

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

Прикрепление аудиозаписей

Это самая большая боль для меня.

Хочешь прикрепить 10 аудиозаписей? Сделай 30 кликов и каждый раз ищи место, на котором остановился:

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

Прикрепленные аудио никак не идентифицируются. Часто кликаю по уже прикрепленным из-за этого.

Ну и прикрепление аудио по одной — ужас.

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

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

Прочие недостатки

1. Отмена публикации. Если написал пост и передумал его публиковать — придется вручную удалять весь текст и откреплять вложения.

Как сделать удобнее— добавить функцию отмены публикации.

2. Иконка смайла. Иконка прикрепления смайликов имеет больший отступ, чем аватарка сообщества. Из-за этого текст попадает под иконку:

Как сделать удобнее сдвинуть иконку хотя бы на 5px.

3. Редактирование информации. Не понимаю, почему какие-то сущности можно редактировать не из настроек, какие-то нельзя. Какие-то открываются в попапе, какие-то отдельной страницей.

Как сделать удобнее — сущности «Контакты» и «Ссылки» имеют не большую разницу, поэтому можно обе сделать всплывающими окнами. Редактирование описания сообщества тоже было бы удобно реализовать на этой странице, а не искать в настройках.

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

4. Раздел «Ссылки». Если, к примеру, у меня обновился домен сайта и нужно обновить ссылку, то сейчас придется постараться:

Как сделать удобнее — позволить редактировать ссылку и, желательно, изображение тоже. Хотя бы миниатюру.

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

Артём Конаков
основатель студии UXART

Да, все замечания субъективны и основаны на нашем пользовательском опыте. Да, не имеем доступа к метрикам и бизнес-замыслам разработчиков.

Но мы пользуемся этим сайтом. Нам неудобно — критикуем и предлагаем.

P.S. Укажите сайты, приложения, программы, которые вы бы хотели увидеть в следующих выпусках UX-патруля от команды UXART.

Материал опубликован пользователем.
Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Артем Конаков", "author_type": "self", "tags": ["\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441","ux_\u043f\u0430\u0442\u0440\u0443\u043b\u044c","uxart","ux","design"], "comments": 18, "likes": 27, "favorites": 59, "is_advertisement": false, "subsite_label": "design", "id": 74977, "is_wide": false, "is_ugc": true, "date": "Sun, 14 Jul 2019 17:11:51 +0300", "is_special": false }
0
{ "id": 74977, "author_id": 56964, "diff_limit": 1000, "urls": {"diff":"\/comments\/74977\/get","add":"\/comments\/74977\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/74977"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114, "last_count_and_date": null }
18 комментариев
Популярные
По порядку
Написать комментарий...
4

Основывать ui анализ на фундаменте «я пользуюсь и мне неудобно» — как минимум непрофессионально.

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

Это было бы в разы информативнее и полезнее для всех.

Ответить
7

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

Ответить
3

ux

Пишем про то, что неудобно нам и нашим знакомым.

Куда погнали то?
На основании каких данных ты решаешь насколько реализация удобна или очевидна? Количество кликов ? Ага...
Свои решения ты на основании чего предлагаешь ?
Ты даже в конце пишешь, что замечания субъективны, но все равно для чего-то пишешь этот пост. На мой взгляд это яркий маркер некомпетентности в вопросе своего же поста.
А то, что ты не понимаешь почему в рамках одного продукта, контролы/поведения реализованы по-разному, объясняется тем, что весь твой опыт ограничивается сайтами, а не продуктами.

Ответить
3

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

Кратко: пользуюсь → сталкиваюсь с неудобствами → предлагаю изменения.

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

Ответить
1

Тогда при чем тут UX?

Ответить
1

Есть пользователь. Есть взаимодействие с сервисом, при помощи определенных интерфейсов. Следовательно, есть пользовательский сценарий, к примеру, написание поста или создание постера. Мы анализируем сценарий, интерфейсы и предлагаем улучшения.

Ответить
4

Интересный материал, но цитировать самого себя в своей статье кажется мне публичным онанизмом :)

Ответить
0

Очень дилетантский взгляд на мир - "Мне так удобно, значит так правильно". Автор понятия не имеет, чем руководствуется продуктовая команда в разработке той или иной фичи. И если автору неудобно, это вообще ни о чем не говоритф

Ответить
0

Если кому-то неудобно, то можно собрать статистику из целевой группы и увидеть, что твои фичи - бесполезны.
Снова восстание макако-кодеров. Идите общайтесь в консоли через создание скриптов

Ответить
0

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

Ответить
0

Не согласна с вами категорически! "Мне так удобно, значит так правильно" - так рассуждает каждый пользователь, и вы в том числе. Автор и пытается рассуждать как пользователь, которому неудобно. Между прочим, любой цифровой продукт делается прежде всего ДЛЯ пользователя и решения его задач при помощи этого продукта. И оценивает он его исключительно с точки зрения удобно-неудобно. А если команда Вк разрабатывает фичи, не учитывая это, то извините......

Ответить
1

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

Ответить
1

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

Ответить
1

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

В общем, это как обзор на дом, который горит :D
Но обзор хороший, и за это спасибо)

Ответить
0

Ты молодец! Но лучше на видео ещё снимать. Странно, что ещё нигде не работаешь.

Ответить
0

Спасибо! Но вы ошиблись с тем, что я нигде не работаю. У меня студия интерфейсов UXART. В статье указал ссылку :)

Ответить
0

Смайлики в пост это проблема уже на уровне js. Это просто так кроссбраузерно не сделать

Ответить
0

Сделайте UX-патруль Aviasales, пожалуйста.

Ответить
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "Article Branding", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cfovx", "p2": "glug" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Баннер в ленте на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "disable": true, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ] { "page_type": "default" }