Юзабилити: Ошибка подмены значения или чем плоха встроенная звонилка Android

в 19:29, , рубрики: android, nexus 4, usability, проектирование интерфейсов, юзабилити, метки: , , ,

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

image

В качестве основного примера я приведу стандартный дайлер на Nexus’e, и подозреваю что другие Android-дайлеры тоже ее содержат.

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

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

Для пользователя — да. Более того, если бы этот элемент работал как-то по другому, пользователю пришлось бы крепко пораскинуть мозгами на тему, где же искать это удаление из избранного.

Второй пример: кнопка покупки в интернет-магазине. Если товара нет в наличии, вместо кнопки «купить» может появится кнопка «оставить заказ». Конечно, это должно быть сделано достаточно очевидно для пользователя — другой цвет, другая надпись, пояснение. Если все правильно — эта смена не вызовет никаких затруднений, более того, это достаточно удобно.
image
Давайте подумаем, почему это удачная смена значения?

  1. Мы оперируем с одной сущностью, в первом случае с папкой «избранное», а во втором — покупка одного и того же товара.
  2. Эти кнопки — взаимоисключающие. Если товар есть, то нет смысла его заказывать, а если нет, то его никак нельзя купить.

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

Еще один небольшой пример, для тех кто не разобрался, в чем суть

На картинке вы видите две одинаковые кнопки. Первая (+1, лайк) сменит свое значение после нажатия, а вторая (транслировать этот пост в другой источник) — не изменит. Почему?

image

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

А теперь кульминация:

Все остальные подмены значений элементов — лишняя головная боль для пользователя.

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

А теперь перейдем к практической части, разбору огрехов в Android.

Перед вами два скриншота из дайлера моего Nexus’a. Слева – последние звонки, а справа – телефонная книга. Цветами я пометил действия, совершаемые при нажатии на ту или иную область.
Юзабилити: Ошибка подмены значения или чем плоха встроенная звонилка Android
Как вы видите, меняется контекст, а вместе с ним меняется и значение элемента посредине. Но при этом этом это, во-первых, никак не взаимоисключающие элементы, во-вторых – это совершенно неочевидно для пользователя. Толком-то ничего не поменялось, экран выглядит так же, а кнопка начала выполнять другую функцию.

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

Плюс куда-то пропадает кнопка добавления нового контакта, я обвел ее красной рамочкой на картинке. Никакой объективной причины ей пропадать я не вижу. Но ситуацию усугубляет следующий экран, экран профайла, который показывается при клике на иконку абонента. Назовем его профайл №1.

Юзабилити: Ошибка подмены значения или чем плоха встроенная звонилка Android

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

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

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

Но раз уж я добрался до написания огрехов проектирования дайлера, то, в качестве бонуса, хочу обратить ваше внимание, что в андроиде аж три разных по виду, но совершенно идентичных по функциональности профайла абонента. И это не считая экрана редактирования абонента, который, в общем-то, мог бы заменить собой все три. И хотя ничего сверх-критичного в этом нет, боюсь себе даже представить каким образом такое могло пойти в продакшн.
Юзабилити: Ошибка подмены значения или чем плоха встроенная звонилка Android
Первые два профайла вызываются из меню «последние позвонившие», а третий – при нажатии на фотографию в любом из первых двух.

Вот теперь все, спасибо за внимание.

PS: Может кто не знал: скриншот на андроиде делается если зажать, одновременно, кнопку выключения и кнопку снижения громкости.

Автор: kyrie

Источник


* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js