Сегодня для рубрики #Переделка материал нам подкинули дизайнеры из «Билайн». Расскажем, как сделать плохой переключатель хорошим.
«Переделка» — это рубрика, в которой дизайнеры студии берут примеры плохого дизайна и показывают, как его исправить. Выходит в виде статей, клипов и видео, а ещё иногда мы проводим прямые эфиры. Если хотите, чтобы мы реформировали ваш дизайн, присылайте на почту [email protected] с темой «На переделку».
И так, вот перед нами приложение «Билайн», раздел «Услуги».
Наше желание работать вызвал не сам интерфейс, а лишь один его элемент. Этот элемент на человеческом называется «переключателем», дизайнеры его обзывают «свитч», «тагл», «тумблер» или даже «рубильник».
Уберём лишнее, чтобы не отвлекало.
Чтобы понять в чём проблема, нужно задать себе вопрос: «Что сейчас делает этот переключатель? Он включен, и стоит какая-то защита? Он включен, и нужно его выключить, чтобы что-то закрыть? Он включен и недоступен к выключению?
Именно то, что нельзя однозначно ответить в каком состоянии сейчас переключатель и что произойдёт при нажатии на него — главная его проблема.
Возникает эта неоднозначность из-за того, что иконка находится прямо на цветном ползунке переключателя, цвет говорит «включено», значит иконка показывает что именно включено. При этом стоит эта иконка в том направлении, в каком тагл выключается, а это намекает, что вот сюда смести, чтобы переключить на то состояние, которое показывает иконка. Запутались? Ага, в этом и проблема.
Дизайнеры любят делать себе вызовы, чтобы придумать что-то новое и необычное. переключатели тоже порой попадают под руку. Попробуйте в этих примерах понять, что сейчас с переключателем и что будет, если вы его переключите.
Интерфейс прежде всего должен быть понятным, а уже потом красивым. Чтобы сделать понятный переключатель в нашем примере, нужно разобраться что он показывает. И тут всё просто: услуга либо подключена, либо нет.
Значит достаточно убрать иконку, потому что включатель или горит жёлтым или не горит — этого достаточно. Иконка никакой пользы не даёт.
Вообще, никакие иконки переключателям не нужны, потому что они показывают очень простую мысль: включено или нет. Ниже на картинке звонки включены, сообщения и контакты выключены. Всё понятно без лишних иконок в переключателях.
Но есть один случай, когда иконки всё же пригодятся — когда нужно показать переключение между двумя состояниями, то есть когда переключатель не «вкл-выкл», а «одно или другое», например, переключение между светлой и тёмной темами.
Кстати, в приложении замок в итоге означает, что услуга подключена и отключить её нельзя, поэтому нужно сделать переключатель недоступным для нажатия.
Вот вроде бы верно, но зачем давать возможность нажать то, что заведомо ни к чему не приведёт? Когда в интерфейсе всё очевидно и предсказуемо, тогда ты не делаешь лишнего.
Деактивированный тумблер во включённом состоянии, который вы предложили, создаёт ощущение, что за пользователя все решили и он не может повлиять на систему.А он может повлиять?
… на нажатие привязать аккуратный тултип и хаптик, которые сообщали бы пользователю, что это конечное состояние системы.Согласны! Идеально, когда интерфейс не просто запрещает, а ещё и поясняет почему он в таком состоянии, чтобы у пользователя не складывалось ощущение, что что-то сломалось, и он беспомощно должен это принять.
Получается, что лучше всего отключить тумблер и сказать пользователю, почему он отключен?
Чтобы это заявлять, нужно провести серьёзную исследовательскую работу из интервью с пользователями и юзабилити-тестов. У вас же это лишь предположение, на основе которого вы сделали решение.
А он может повлиять?Он может чувствовать себя причастным. Иногда чувство причастности — тоже взаимодействие.
Получается, что лучше всего отключить тумблер и сказать пользователю, почему он отключен?Именно так. Пользователь должен знать, почему состояние системы именно такое. Возможно, это такие условия тарифа, или, например, есть какие-то ограничения на стороне оператора. Это и есть осознанный сервис, который даёт ответы, а не создаёт вопросы.
Здравствуйте. Это же переключатель опции, который говорит — что услуга активна на тарифном плане и ее нельзя отключить. При попытке переключения ничего не произойдет.
Но, если убрать изображение замка с переключателя и не давать изменять состояние, не больше ли будет запутан пользователь?
У МТС такой же функционал.
Или я чего-то не понимаю? 🤔
Всё верно, в итоге этот замок означает, что отключить услугу нельзя. Сбивает с толку сам переключатель — он выглядит так, будто его можно нажать, а это плохо, потому что нажать его на самом деле нельзя. Иконка всё так же не нужна, достаточно сделать переключатель неактивным.
Не мудри.
Это неотключаемая опция, значит замочек на месте.
Давайте отделять мух от котлет. Этот тумблер вы нажать можете, хоть экран до дыр затереть — ваше право. Но одно дело — нажатие, другое — получение обратной связи от системы.
Проблема не в том, что тумблер нельзя нажать, а в том, что дизайнеры не предусмотрели подходящую обратную связь на нажатие, которая сообщала бы о том, что это конечное состояние системы.
Деактивированный тумблер во включённом состоянии, который вы предложили, создаёт ощущение, что за пользователя все решили и он не может повлиять на систему. В какой-то момент такой опыт приведёт к тревоге и раздражению, что негативно скажется на отношении к приложению и бренду в целом.
Поэтому лучшим решением здесь было бы оставить активированный вид с замочком, но на нажатие привязать аккуратный тултип и хаптик, которые сообщали бы пользователю, что это конечное состояние системы. Так пользователь все ещё будет чувствовать себя причастным, при этом у него не будет тревоги от лишения выбора.