При проектировании мы часто сталкиваемся с ситуациями, когда трудно принять решение, поскольку не существует единственно правильного ответа.
«Стоит ли использовать для этого фиксированное значение?»
«Стоит ли сделать его гибким в зависимости от содержимого?»
На первый взгляд это может показаться простым решением, но когда действительно приступаешь к работе, выбрать один из вариантов оказывается непросто.
Фиксированный размер делает общий дизайн аккуратным и единообразным, но в зависимости от содержимого он может казаться тесным или, наоборот, оставлять слишком много пустого пространства. И наоборот, гибкий размер позволяет учитывать различные ситуации, однако форма может отличаться от экрана к экрану, что снижает единообразие.
Подобная дилемма касается не только размера. Мы постоянно сталкиваемся с вопросами, на которые нет однозначно правильного ответа: насколько строго соблюдать правила дизайн-системы, сколько информации отображать, решить ли задачу с помощью модального окна или вынести её на отдельную страницу, использовать ли только значок или отображать рядом с ним текст.
В этой статье я сосредоточусь на теме фиксированных и гибких значений для модальных окон в веб-интерфейсах — одной из проблем, над которой, возможно, задумывались дизайнеры.
Я также расскажу, какой вариант лучше подходит для каждой ситуации, и о критериях, которыми я руководствуюсь при принятии таких решений.
Ширина модального окна: фиксированное значение VS гибкое значение
(1) Случаи, когда ширина модального окна фиксирована
При определении модальных окон в дизайн-системе обычно задают несколько значений Width, например S, M и L.
- Например, модальное окно для простого уведомления или подтверждения может иметь размер S,
- модальное окно для обычного ввода данных или отображения подробной информации — размер M,
- а модальное окно для отображения большого объёма информации — размер L.
Таким образом, спецификации можно разделить в соответствии с целью использования.
Установление таких стандартов позволяет использовать одно и то же модальное окно на нескольких экранах и упрощает управление компонентами с точки зрения разработки. Для дизайнера это также означает, что не нужно каждый раз заново определять размер модального окна.
(2) Случаи, когда сложно зафиксировать ширину модального окна
При проектировании реальных рабочих экранов можно столкнуться с несколько иными ситуациями. На некоторых экранах может быть всего несколько столбцов данных, тогда как на других — десятки элементов или длинный текст.
В частности, на экранах для операторов или администраторов объём данных, которые пользователям необходимо вводить или проверять, часто различается.
В таких ситуациях могут возникнуть проблемы, если все модальные окна определить только как S / M / L.
Если экран с большим объёмом содержимого принудительно вписать в размер L, информация может оказаться чрезмерно сжатой. Если в модальном окне отображаются, например, данные в виде таблицы, может не хватить места для всех столбцов, из-за чего появится горизонтальная прокрутка. И наоборот, если содержимое не заполняет модальное окно должным образом, может появиться ненужное пустое пространство. Спецификации обеспечивают единообразие, но не могут предоставить пространство, оптимизированное для каждого типа содержимого.
Высота модального окна с вкладками: фиксированное значение VS гибкое значение
Подобная дилемма возникает не только с Width, но и с Height.
Однажды мне пришлось создать экран с несколькими вкладками в одном модальном окне, причём объём содержимого на каждой вкладке различался.
Если вкладка A содержит большой объём информации,
вкладка B содержит несколько меньше информации,
а вкладка C — всего несколько элементов,
как следует определить высоту модального окна?
(1) Случаи, когда высота модального окна фиксирована
Можно зафиксировать высоту модального окна по вкладке с наибольшим объёмом содержимого. Это создаёт ощущение стабильности, поскольку размер модального окна не меняется при переключении между вкладками.
Это особенно полезно, когда пользователям нужно быстро переходить между вкладками, чтобы сравнивать их содержимое, поскольку размер и положение модального окна не меняются постоянно.
Однако на вкладке с меньшим объёмом содержимого останется много неиспользуемого пространства.
(2) Случаи, когда высота модального окна изменяется гибко
И наоборот, можно гибко изменять высоту модального окна в зависимости от объёма содержимого каждой вкладки.
В этом случае на вкладках с меньшим объёмом содержимого можно сократить ненужное пустое пространство, используя только необходимое место.
Однако при каждом переключении вкладок высота модального окна будет меняться. Особенно если объём содержимого на вкладках сильно различается, модальное окно может внезапно расшириться или сжаться, из-за чего изменение на экране станет заметнее для пользователя.
В конечном счёте здесь возникает та же дилемма. Фиксированная высота стабильна, но пространства может оказаться недостаточно или оно может использоваться неудачно, тогда как гибкая высота позволяет эффективнее использовать пространство, но может приводить к более заметным изменениям на экране.
Так что же лучше: фиксированное или гибкое значение?
При анализе этих примеров в конечном счёте сложно прийти к единому выводу. Фиксированное значение не всегда лучше, как и гибкое значение не всегда оказывается лучшим вариантом.
Поэтому и в данном случае, вместо того чтобы просто решить: «Поскольку это вкладки, высота должна быть фиксированной», я считаю необходимым учитывать как особенности вкладок, так и поведение пользователей.
Например, если каждая вкладка содержит схожую информацию и пользователи переходят между вкладками, чтобы сравнить содержимое, фиксированная высота может ощущаться более естественно.
И наоборот, если содержимое каждой вкладки независимо, а его объём значительно различается, более подходящей может быть гибкая высота.
В подобных ситуациях есть три основных момента, которые я проверяю в первую очередь.
(1) Объём содержимого и диапазон его изменений
Сначала я проверяю, какой объём содержимого фактически будет отображаться в сервисе. Если объём содержимого в целом стабилен, возможно, нет необходимости делать макет гибким.
И наоборот, если объём данных значительно различается от экрана к экрану, может быть сложно учесть все ситуации с помощью одного фиксированного значения.
Особенно в рабочих системах разница между примерными данными, которые используются на этапе проектирования, и фактическими эксплуатационными данными может быть значительной. Поэтому я считаю важным заранее определить возможный диапазон данных.
(2) Поведение пользователей
Затем я изучаю, как пользователи взаимодействуют с интерфейсом.
Решение может различаться в зависимости от того, является ли это модальным окном, которое пользователи просто просматривают и закрывают, модальным окном, в котором они переходят между несколькими вкладками для сравнения содержимого, или модальным окном, в котором они непосредственно вводят или редактируют большой объём данных.
Например, на экране, где пользователи быстро переключаются между вкладками, чтобы сравнивать их, может быть удобнее, чтобы модальное окно сохраняло постоянный размер, а не непрерывно меняло его.
И наоборот, если каждая вкладка предназначена для выполнения отдельной задачи, изменение размера в зависимости от содержимого может не быть существенной проблемой.
(3) Действительно ли этому содержимому место в модальном окне
Наконец, это аспект, который я считаю наиболее важным.
Безусловно увеличивать размер модального окна только потому, что оно содержит много содержимого, не всегда правильно. Если модальное окно становится чрезмерно большим, а внутренняя прокрутка занимает много времени, стоит пересмотреть, действительно ли этому содержимому следует находиться внутри модального окна.
Carbon Design System также ограничивает максимальную высоту модальных окон и рекомендует рассмотреть более крупное модальное окно, если большой объём содержимого приводит к чрезмерной прокрутке, либо перейти на полноэкранную страницу, если даже Large недостаточно.
Material Design аналогичным образом определяет минимальные и максимальные диапазоны размеров Dialog и рекомендует корректировать размер в зависимости от размера экрана. На больших экранах можно, например, задать максимальную ширину и изменять высоту в соответствии с содержимым.
В конечном счёте я считаю, что «адаптивность не должна становиться самоцелью; важно гибко реагировать в диапазоне, соответствующем содержимому и его назначению».
Критерии, которые я имею в виду
Обобщая описанные выше ситуации, я бы принимал решение на основании следующих критериев.
Модальные окна общего назначения, используемые многократно
→ Фиксированные спецификации, такие как S / M / L
Бизнес-данные, объём содержимого которых непостоянен
→ Рассмотреть адаптивную ширину в заданном диапазоне
Когда различия в объёме содержимого между вкладками невелики и важна возможность сравнения
→ Фиксированная высота
Когда различия в объёме содержимого между вкладками велики и каждая вкладка содержит независимое содержимое
→ Адаптивная высота
Когда имеется много горизонтальной информации, например в таблице данных
→ Рассмотреть более крупное модальное окно или отдельный макет с переходом в новое окно
Когда модальное окно становится чрезмерно большим или внутренняя прокрутка занимает много времени
→ Рассмотреть возможность вынести содержимое на страницу вместо использования модального окна
Здесь важно то, что «фиксированное и адаптивное не обязательно рассматривать как противоположные понятия».
На практике дизайн-системы также определяют размеры, такие как S / M / L, одновременно адаптивно изменяя фактическую ширину в зависимости от размера экрана или выбирая следующий размер на основе объёма содержимого.
Поэтому, вместо того чтобы решать, «использовать ли фиксированное или адаптивное значение», я считаю более важным определить, «какой диапазон должна контролировать система и с какого момента управление следует передать содержимому».
Кроме того, IBM’s Carbon Design System определяет размеры модальных окон в несколько этапов, например XS, S, M и L. Однако вместо применения фиксированных абсолютных значений в пикселях она использует адаптивный дизайн, основанный на пропорциях области просмотра и критериях, связанных с колонками сетки.
Иными словами, размеры определяются правилами, а фактические габариты с некоторой степенью гибкости подстраиваются. Думаю, этот аспект заставляет нас задуматься о том, что означает «фиксированное» в дизайн-системе.
Определить что-либо как фиксированное не обязательно означает применять одно и то же число, например «480px» или «640px», в любой ситуации.
В конечном счёте UI-дизайн — это вопрос выбора
Размышляя о ширине и высоте этого модального окна, я ещё раз понял, что в UI-дизайне гораздо меньше однозначно правильных ответов, чем можно было бы ожидать.
Фиксированный размер обеспечивает единообразие, но может снижать гибкость, тогда как адаптивный размер позволяет учитывать различные ситуации, но может уменьшать единообразие. В конечном счёте трудно сказать, что один из этих вариантов всегда лучше другого.
Поэтому при проектировании я стараюсь сначала подумать о следующем:
«Как именно поступает фактическое содержимое?»
«Какие действия пользователь выполняет на этом экране?»
«Какую проблему пытается решить UI?»
«Какие неудобства пользователю придётся терпеть в результате этого выбора?»
Сначала я стараюсь обдумать именно эти вопросы.
Затем, основываясь на этих критериях, я считаю правильным различать то, что должно оставаться фиксированным, и то, что следует сделать адаптивным.
На первый взгляд это может показаться простой задачей — определить ширину и высоту модального окна, — но в конечном счёте она включает несколько взаимосвязанных факторов, в том числе характер содержимого, поведение пользователей, объём данных и единообразие дизайн-системы.
Мне и дальше будут встречаться ситуации, требующие подобных решений. Каждый раз я буду стараться не применять заранее заданные правила механически, а снова обдумывать, зачем эти правила нужны, и принимать решение, соответствующее текущей ситуации.
RIMS