Приятно смотреть, удобно закрывать [Перевод]

Это вольный перевод статьи Linzi Berry «Tap to Dismiss» на Medium.

Так уж получилось, что использование различных всплывающих окон — это тот не самый приятный для конечного пользователя инструмент, к которому приходится прибегать для того, чтобы показать некий временный контент. Например, важное сообщение, уведомление об использовании cookies, скидках на распродаже или другой аттракцион невиданной щедрости. Как хорошие разработчики, мы должны позаботиться о пользователях и сделать понятную для них кнопку закрытия модального окна.

Внешний вид

Немножко исторической справки. Тот самый, привычный нам крестик появился на заре эры компьютеров в достаточно уже далеких от нас 1970-х годах. Вероятно, его первым появлением было меню Atari TOS, список действий в котором был привязан к символам на клавиатуре, и кнопка [x] было командой для выхода.

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

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

Доступность

Начнём с самого простого и очевидного — всегда используйте значок закрытия [x], даже если для пользователя предусмотрены другие варианты, типа нажатия на фон, взаимодействия с экраном или просто кнопкой «Назад».

Лучше использовать иконку, нарисованную в одном стиле с другими элементами вашего проекта, чем взять и поставить букву х_Х. Это необходимо для того, чтобы у пользователя было абсолютно четкое понимание, что это именно кнопка закрытия, «крестик», а не случайно выпавшая откуда-то буква Х. На иллюстрации видно, что иконка имеет более четко разделённые между собой элементы. Автор этой статьи предпочитает рисовать такие иконки с углом между элементами в 90° и создавать начертание иконки в соответствии с общим комплектом иконок.

Цвет иконки должен быть нейтральным и соответствовать рекомендованной контрастности 4:1. Конечно, если он будет едва заметным, то это весьма выигрышно для всплывающего окна — пользователю сложнее найти кнопку для закрытия и легче нажать на кнопку-действие, чтобы от него уже отстали. Но такая практика — это не хорошо и лучше так не делать, потому что это разочаровывает пользователей => печальные последствия для бизнеса.

Для значка рекомендуется делать обводку или любым другим способом обозначать область вокруг него, в пределах которой он будет срабатывать. А кроме того, это можно использовать для его визуального отделения от других, статических элементов, особенно тех, которые находятся рядом с кнопкой. Есть ещё два важных момента:

• Если иконка и контейнер для неё меньше минимально рекомендуемого размера (48x48dp/pt), то лучше создать область срабатывания большего размера и не перекрывать другими элементами;
• Если значок находится внутри интерактивной панели (например, заголовок), то это уже создаёт для вас это активное пространство.

Размещение

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

Несмотря на распространнёную практику размещения таких иконок в верхнем правом углу, которую завели в Windows, иногда расположение переносится в левый верхний угол, как в Apple. Ни одна из систем дизайна не дает четкого направления расположения иконок, когда речь заходит о модальности.

Размещение модального окна

Ранее мы уже определились, что основное назначение модального окна — это необязательный информационный контент (за исключением оповещений), они не должны оказывать существенную блокировку экрана. Хотя традиционно модальное окно размещают по центру экрана, существует более современная тенденция, когда модальное окно съезжает в нижнюю часть экрана, что визуально меньше блокирует содержимое на экране.

Размещение кнопки [x]

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

Размещение с перекрытием. Разрыв в непрерывной линии привлекает наибольшее внимание к иконке [x], но имеет особый стиль визуального дизайна, который добавляет визуальную сложность и кажется менее утонченным.

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

Размещение в конце (справа) намного удобнее для нажатия на него пальцем, а кроме того, не мешает статичной иконке человечка.

Размещение в начале (слева) может соотвествовать используемому на проекте правилу размещения таких кнопок слева, однако в таком случае нам приходится увеличивать высоту модального окна, а кроме того, все элементы сваливаются в кучу. Кроме того, не стоит забывать про владельцев телефонов с большими экранами — дотянутся до такой кнопки будет очень не просто.

Следует понимать, что приведённый выше пример справедлив в первую очередь для языков, где чтение происходит слева направо (LTR). За «начало» нужно принимать то место, с которого пользователь начинает читать предложение, а конец — то, где он останавливается. В языках RTL вы должны перевернуть его влево.

Примечание автора

Оптимизируем расположение

Применим все рекомендации для получения оптимального расположения. В данном варианте — это выровненная снизу модальная модель с иконкой [x] (помещённой в контейнер с четко очерченной границей) на внутренней верхней правой стороне.

В заключении

Стоит упомянуть, что можно сделать кнопку закрытия модального окна и другим способом — кнопки можно разместить на одной горизонтальной плоскости, а рядом с кнопкой-призывом к действию (на иллюстрации выше — фиолетовая Action) располагаем кнопку типа «Скрыть» или «Закрыть». Это будет отличный вариант, который настоятельно рекомендуют при использовании Material Design. В таком случае мы добавляем кнопке дополнительный акцент и в некоторых случаях это хорошо.

Однако, у подхода с иконкой [x] есть один существенный плюс — не потребуется усилий для её локализации, когда как кнопку «Отмена» придётся перевести на все языки ваших пользователей. Поэтому кнопка [x] — это хорошее универсальное решение.