Сегодня я хотел бы обратить ваше внимание на одну важную ошибку в проектировании интерфейса — подмену значения. Это не самая грубая или распространенная ошибка, но она часто прокрадывается в достаточно дорогие и продуманные интерфейсы. Можно даже сказать что это ошибка переоптимизации, когда проектировщик перестарался с «упрощением» интерфейса. Ее относительно легко выловить на стадии разработки, но нужно знать, куда смотреть.
В качестве основного примера я приведу стандартный дайлер на Nexus’e, и подозреваю что другие Android-дайлеры тоже ее содержат.
Сменой значения я называю момент, когда одна и та же кнопка, в зависимости от контекста, меняет свою функцию. А подменой значения — когда это происходит непрозрачно для пользователя.
Базовый пример смены значения элемента — кнопка, для добавления статьи в избранное. Если статья уже там, то этот контрол заменяется на кнопку для удаления статьи из избранного.
Просто и логично?
Для пользователя — да. Более того, если бы этот элемент работал как-то по другому, пользователю пришлось бы крепко пораскинуть мозгами на тему, где же искать это удаление из избранного.
Второй пример: кнопка покупки в интернет-магазине. Если товара нет в наличии, вместо кнопки «купить» может появится кнопка «оставить заказ». Конечно, это должно быть сделано достаточно очевидно для пользователя — другой цвет, другая надпись, пояснение. Если все правильно — эта смена не вызовет никаких затруднений, более того, это достаточно удобно.
Давайте подумаем, почему это удачная смена значения?
Естественно тут же работает и третье правило, которое мы всегда держим в голове, даже если и не пишем: Это достаточно очевидно для пользователя. Не пишем мы его потому, что никто не знает что этим пользователям очевидно. Можем только предположить.
А теперь кульминация:
Все остальные подмены значений элементов — лишняя головная боль для пользователя.
Звучит радикально, но поверьте, если вы не уверены на 100% в том, что делаете, лучше избегайте смены значения кнопки, кроме тех, которые не подпадают под указанные выше правила.
А теперь перейдем к практической части, разбору огрехов в Android.
Перед вами два скриншота из дайлера моего Nexus’a. Слева – последние звонки, а справа – телефонная книга. Цветами я пометил действия, совершаемые при нажатии на ту или иную область.
Как вы видите, меняется контекст, а вместе с ним меняется и значение элемента посредине. Но при этом этом это, во-первых, никак не взаимоисключающие элементы, во-вторых – это совершенно неочевидно для пользователя. Толком-то ничего не поменялось, экран выглядит так же, а кнопка начала выполнять другую функцию.
Грубейшая ошибка и очень хороший наглядный пример. Уверен, тысячи людей звонят пытаясь сменить фотографию в профайле и открывают профайл пытаясь позвонить.
Плюс куда-то пропадает кнопка добавления нового контакта, я обвел ее красной рамочкой на картинке. Никакой объективной причины ей пропадать я не вижу. Но ситуацию усугубляет следующий экран, экран профайла, который показывается при клике на иконку абонента. Назовем его профайл №1.
Теперь телефонная трубка «не звонит», хотя на предыдущем экране это был единственный способ позвонить абоненту. Тут это не вызывает такого резкого диссонанса, ведь она выглядит по другому, да и само оформление экрана отличается. Тем не менее, логика тоже бунтует.
Разгадку этой телефонной трубки вы найдете если добавите дополнительные контакты этому абоненту, e-mail или еще что-нибудь. На правой картинке достаточно очевидно, что теперь это просто иконка рубрикатора. Надеюсь мне никогда не придется объяснять это, например, своей маме. Боюсь в обычные 15 минут тут не уложишься.
В общем-то это все, что я хотел рассказать, надеюсь получилось не слишком затянуто, а вместо заключения хотелось бы попросить, чтоб вы никогда так не делали в своих продуктах.
Но раз уж я добрался до написания огрехов проектирования дайлера, то, в качестве бонуса, хочу обратить ваше внимание, что в андроиде аж три разных по виду, но совершенно идентичных по функциональности профайла абонента. И это не считая экрана редактирования абонента, который, в общем-то, мог бы заменить собой все три. И хотя ничего сверх-критичного в этом нет, боюсь себе даже представить каким образом такое могло пойти в продакшн.
Первые два профайла вызываются из меню «последние позвонившие», а третий – при нажатии на фотографию в любом из первых двух.
Вот теперь все, спасибо за внимание.
PS: Может кто не знал: скриншот на Nexus'e (и, возможно, на некоторых других android-телефонах) делается если зажать, одновременно, кнопку выключения и кнопку снижения громкости.
PS2: Номера на скриншотах фейковые, не люблю эти заблуривания, они отвлекают от сути. Там даже не всегда коды стран существующие.
В качестве основного примера я приведу стандартный дайлер на Nexus’e, и подозреваю что другие Android-дайлеры тоже ее содержат.
Сменой значения я называю момент, когда одна и та же кнопка, в зависимости от контекста, меняет свою функцию. А подменой значения — когда это происходит непрозрачно для пользователя.
Базовый пример смены значения элемента — кнопка, для добавления статьи в избранное. Если статья уже там, то этот контрол заменяется на кнопку для удаления статьи из избранного.
Просто и логично?
Для пользователя — да. Более того, если бы этот элемент работал как-то по другому, пользователю пришлось бы крепко пораскинуть мозгами на тему, где же искать это удаление из избранного.
Второй пример: кнопка покупки в интернет-магазине. Если товара нет в наличии, вместо кнопки «купить» может появится кнопка «оставить заказ». Конечно, это должно быть сделано достаточно очевидно для пользователя — другой цвет, другая надпись, пояснение. Если все правильно — эта смена не вызовет никаких затруднений, более того, это достаточно удобно.
Давайте подумаем, почему это удачная смена значения?
- Мы оперируем с одной сущностью, в первом случае с папкой «избранное», а во втором — покупка одного и того же товара.
- Эти кнопки — взаимоисключающие. Если товар есть, то нет смысла его заказывать, а если нет, то его никак нельзя купить.
Естественно тут же работает и третье правило, которое мы всегда держим в голове, даже если и не пишем: Это достаточно очевидно для пользователя. Не пишем мы его потому, что никто не знает что этим пользователям очевидно. Можем только предположить.
Еще один небольшой пример, для тех кто не разобрался, в чем суть
На картинке вы видите две одинаковые кнопки. Первая (+1, лайк) сменит свое значение после нажатия, а вторая (транслировать этот пост в другой источник) — не изменит. Почему?
Правильно, вторая кнопка не имеет взаимоисключающей составляющей. Вы можете расшаривать этот пост неоднократно, а если вы уже поставили плюс один, то единственное, что вам остается — убрать плюс один.
Правильно, вторая кнопка не имеет взаимоисключающей составляющей. Вы можете расшаривать этот пост неоднократно, а если вы уже поставили плюс один, то единственное, что вам остается — убрать плюс один.
А теперь кульминация:
Все остальные подмены значений элементов — лишняя головная боль для пользователя.
Звучит радикально, но поверьте, если вы не уверены на 100% в том, что делаете, лучше избегайте смены значения кнопки, кроме тех, которые не подпадают под указанные выше правила.
А теперь перейдем к практической части, разбору огрехов в Android.
Перед вами два скриншота из дайлера моего Nexus’a. Слева – последние звонки, а справа – телефонная книга. Цветами я пометил действия, совершаемые при нажатии на ту или иную область.
Как вы видите, меняется контекст, а вместе с ним меняется и значение элемента посредине. Но при этом этом это, во-первых, никак не взаимоисключающие элементы, во-вторых – это совершенно неочевидно для пользователя. Толком-то ничего не поменялось, экран выглядит так же, а кнопка начала выполнять другую функцию.
Грубейшая ошибка и очень хороший наглядный пример. Уверен, тысячи людей звонят пытаясь сменить фотографию в профайле и открывают профайл пытаясь позвонить.
Плюс куда-то пропадает кнопка добавления нового контакта, я обвел ее красной рамочкой на картинке. Никакой объективной причины ей пропадать я не вижу. Но ситуацию усугубляет следующий экран, экран профайла, который показывается при клике на иконку абонента. Назовем его профайл №1.
Теперь телефонная трубка «не звонит», хотя на предыдущем экране это был единственный способ позвонить абоненту. Тут это не вызывает такого резкого диссонанса, ведь она выглядит по другому, да и само оформление экрана отличается. Тем не менее, логика тоже бунтует.
Разгадку этой телефонной трубки вы найдете если добавите дополнительные контакты этому абоненту, e-mail или еще что-нибудь. На правой картинке достаточно очевидно, что теперь это просто иконка рубрикатора. Надеюсь мне никогда не придется объяснять это, например, своей маме. Боюсь в обычные 15 минут тут не уложишься.
В общем-то это все, что я хотел рассказать, надеюсь получилось не слишком затянуто, а вместо заключения хотелось бы попросить, чтоб вы никогда так не делали в своих продуктах.
Но раз уж я добрался до написания огрехов проектирования дайлера, то, в качестве бонуса, хочу обратить ваше внимание, что в андроиде аж три разных по виду, но совершенно идентичных по функциональности профайла абонента. И это не считая экрана редактирования абонента, который, в общем-то, мог бы заменить собой все три. И хотя ничего сверх-критичного в этом нет, боюсь себе даже представить каким образом такое могло пойти в продакшн.
Первые два профайла вызываются из меню «последние позвонившие», а третий – при нажатии на фотографию в любом из первых двух.
Вот теперь все, спасибо за внимание.
PS: Может кто не знал: скриншот на Nexus'e (и, возможно, на некоторых других android-телефонах) делается если зажать, одновременно, кнопку выключения и кнопку снижения громкости.
PS2: Номера на скриншотах фейковые, не люблю эти заблуривания, они отвлекают от сути. Там даже не всегда коды стран существующие.
