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