Дизайн
Dmitry Ilyin
1630

Как я впал в ступор в личном кабинете МТС

Зашел я сегодня в Личный Кабинет МТС, который последний полгода представляется как обновленный и очень визуализированный.

В закладки

У меня тариф с ежемесячной фиксированной оплатой.

Зашел проверить остатки услуг по месячному тарифу, и, увидев вот такую картинку, впал в ступор:

​скриншот ЛК МТС
Д. Ильин и PaintBrush

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

Ответьте на вот такой микроUX-тест (желательно, не раздумывая - первую мысль пишите):

На вышеприведенной картинке "196 мин.", "3.53 Гб" и "184 SMS" - это
Объемы уже использованных юзером услуг за месяц
Объемы услуг, превысивших норму использования за месяц
Объемы не использованных (оставшихся) услуг за месяц
А чёрт его знает, не пользуюсь мобильной связью
Зачем такие глупые вопросы задавать? Всё же очевидно!!
Затрудняюсь ответить
Показать результаты
Переголосовать
Проголосовать

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

Написать
{ "author_name": "Dmitry Ilyin", "author_type": "self", "tags": [], "comments": 28, "likes": -1, "favorites": 6, "is_advertisement": false, "subsite_label": "design", "id": 88409, "is_wide": false, "is_ugc": true, "date": "Thu, 17 Oct 2019 00:20:41 +0300", "is_special": false }
0
{ "id": 88409, "author_id": 197238, "diff_limit": 1000, "urls": {"diff":"\/comments\/88409\/get","add":"\/comments\/88409\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/88409"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114, "last_count_and_date": null }
28 комментариев
Популярные
По порядку
Написать комментарий...
14

Чарты двигаются по часовой стрелке от «12», соответственно считываются как остаток. Если бы серый сектор был левее от «12», считывалось бы как потраченные. Но тогда цвета были бы контринтуитивными. А на скрине всё выглядит логично.
Можно было бы просто сделать другой заголовок, типа «Остатки по услугам», и тогда даже такие вопросы, как в сабже, отпали бы сами собой. Недоработочка значит всё-таки есть.

Ответить
1

Как раз считаю UI данной диаграммы не логичным.

Мы заходим в раздел "Проверить остатки услуг..." 

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

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

Ответить
0

Почему ты вообще сравниваешь спидометр и пайчарт? У них ничего общего кроме формы нет, это разные сущности совершенно.

Ответить
1

Ну для начало я сравниваю не только спидометр, а приборную панель в целом, так же аналог часов где 12 часов это максимум (full) и расчёт идёт почасовой. Так же можно взять аналог загрузки, часы, уровень бензина... подсознательно выстраиваются аналогии с продуктами которые мы встречаем в повседневной жизни.

Я не согласен с тем, что серая полоска идёт с правой стоны (по часовой стрелке), если она показывает уменьшение остатка "N", то должна идти слева (против часовой).

Я же зашёл в "Проверить остатки услуг..."

Ответить
1

Я понял твою логику, но сравнение с приборной панелью всё равно какое-то кривое.
В целом да, ты прав, если мы смотрим остаток, то он является главным объектом отображения и должен отсчитываться от 12 по часовой. На графике действительно чарт отображается от потраченного трафика, но цветовая схема выправляет ситуацию, и поэтому большинство воспринимает график правильно.
Лично мне отображение всё равно кажется очевидным, но если 20% людей оказались в замешательстве, то нужно делать так, как ты описал. Вкупе с правильными цветами и заголовками всё недопонимание должно исчезнуть.
@Dmitry Ilyin спасибо, кейс на самом деле куда интереснее, чем кажется сначала!

Ответить
0

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

Ответить
0

+ на мой взгляд, понятнее было бы, если использованная часть была бы серой (как уже недоступная), а доступная - ЗЕЛЁНОЙ

Ответить
8

Я не понимаю зачем писать такие статьи. Ну если тупишь погугли.

Ответить
0

Вова, это не статья. Это тест-кейс.

Ответить
0

Спасибо всем конструктивным комментаторам!

Судя по результатам микроопроса, проблема всё-таки есть. 
Почти 20% подумали, как и я, что это - ИСПОЛЬЗОВАННЫЕ услуги. 

Лично меня смутил красный цвет, который всегда = Alert! 
Я лез в ЛК с подозрением, что у меня закончились гигабайты. И, увидев всё в красном, подумал, что это предупреждение: чувак, твои ресурсы почти ЗАКОНЧИЛИСЬ.
И только посмотрев табличку "потраченные минуты" и сложив их, я понял, что красное - все-таки оставшиеся ресурсы.

Ответить
4

 Лично меня смутил красный цвет, который всегда = Alert!

Почему бы тебе просто на Мегафон не перейти? Там всё зелёненькое, значит хорошее.

Ответить
0

еще скажи "в Билайн, там всё чёрно-желтое"

Ответить
1

Если представить, что это полоски, которые показывают HP в игре, то всё в целом норм) Типо она заполнена, а когда тратишь минуты - она убывает) 
Соответственно "Объемы не использованных (оставшихся) услуг за месяц"

Ответить
1

Хотел вы. бнуться но обосрался

Ответить
0

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

Ответить
0

20% воспринявших эту схему так же, как и я, выходят далеко за пределы стат. погрешности. Я бы сказал, для UX это дохрена! 

Тем более, тут отвечали люди, более-менее прошаренные в предмете\ отрасли. Доля "не понявших" на выборке "среднего юзера МТС" была бы выше. 

Ответить
0

Ключевое здесь: "проверить остатки услуг". Остатки, Карл!

Ответить
1

"проверить остатки" - это была моя ЦЕЛЬ посещения ЛК.

Но данная картинка встретила меня  прямо на Главной ЛК!
Т.е. я ни в какие подразделы типа "сколько у вас осталось минут/ГБ/СМС" не заходил.

Ответить
2

отгадай зачем 99% людей тужа заходят

Ответить
0

Они за вас знают, для чего вы зашли в ЛК и сразу показывают остатки, ибо желающих посмотреть, сколько было потрачено, вряд ли будет более 1% ;)

Ответить
0

я и еще 27 респондентов опроса не догадались :(

Ответить
0

В моей личной вселенной так - полный стакан подразумевает веселье. Или возможность его выпить.
Так и тут, полный кружочек означает полный объём услуги.

В общем 196 минут из 200 - это оставшиеся 196 минут.

Если же наоборот, надо рисовать маленькую дугу.

Ответить
0

Первоначальное впечатление, - что речь идёт о лимитах именно тарифа.

Ответить
0

Текст «196 из 200» однозначно говорит об остатке пакета услуг

Ответить
0

Автор, в чем сложность? Откуда ступор?

Ответить
0

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

Ответить
0

Информация доступна для чтения = все норм

Ответить
0

В целом замечание имеет место быть, но скорее вопрос в компетенции юиксера в части текста, ну или к ux-писателю..

Ответить
{ "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" } } }, { "id": 20, "label": "Кнопка в сайдбаре", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cgxmr", "p2": "gnwc" } } } ] { "page_type": "default" }