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