Почему закругленные углы популярнее острых
!!Вы заметили, что самые популярные продукты, вроде Facebook, Netflix и Spotify, чаще используют закругленные углы в своих интерфейсах?
Хотя острые углы для UI – отраслевой стандарт, закругленные углы постепенно становятся трендом. Давайте разберемся, чем они привлекательнее острых и когда их использовать в своих проектах.
Стоит ли за этим наука? Некоторые из вас, возможно, уже встречали в LinkedIn посты UI/UX дизайнеров с вопросом: «Какой интерфейс лучше?» В контексте этой темы я проанализировала несколько сообщений, в которых предлагали сравнить элементы с закругленными и острыми углами. В большинстве случаев люди голосовали за первые. Однако самый волнующий вопрос – есть ли у этого какое-то научное объяснение? По словам экспертов, визуальная обработка прямоугольников с закругленными углами намного проще, чем прямоугольников с острыми. Они требуют меньше когнитивных усилий.
!!Острые углы подчеркивают признак опасности или небезопасности. Поэтому наш разум приучен по возможности избегать их.
С другой же стороны у нас закругленные углы, которые создают дружелюбную и безопасную атмосферу. Следовательно:
!!Изогнутые углы выглядят более привлекательно просто потому, что они приятнее для глаз 👀.
Когда использовать закругленные углы? Кнопки (поодиночке)
Проведя опрос, я обнаружила, что 65% предпочитают закругленные углы в сравнениях дизайна кнопок. Выходит, можно с уверенностью сказать, что закругленные углы для кнопок хорошее решение для общих случаев использования
Диалоговые окна (поодиночке) Когда дело доходит до информационных диалоговых окон, многие предпочитают окно посередине с умеренно закругленными углами
Слева: острый угол | Центр: закругленный угол | Справа: полностью закругленный угол
!!В опросах конкурировали в основном острые и закругленные углы, поэтому третий вариант был наименее предпочтительным.
Но означает ли это, что нужно избегать использования острых углов? Нет! Есть много крутых вариантов их использования. Сейчас разберем, когда людям нравится видеть острые углы, по результатам моего опроса
Когда использовать острые углы? Кнопки и диалоговые окна (поодиночке) Как я уже упоминала ранее, острые углы в некоторых случаях привлекают наше внимание. В случае кнопок и диалоговых окон есть некоторые варианты использования, которые по результатам опроса отлично подойдут для острых углов: Важное и требующее особого внимание содержимое боксов. Кнопки, которые должны быть заметны.
Слева: острый угол | Центр: закругленный угол | Справа: полностью закругленный угол
!!Таким образом, элементы интерфейса с острыми углами хорошо вписываются в сценарии, где важно внимания пользователя.
Интересно, что когда мы группируем несколько кнопок, мнение людей начинает меняться.
Слева: острый угол | Центр: закругленный угол | Справа: полностью закругленный угол.
!!Большинство участников опроса предпочли кнопку с острым углом (самая левая на изображении выше) даже в тех случаях, когда она не требует пристального внимания.
Затем я оценила, будет ли какой-то эффект, если мы используем сочетание разных контейнеров для этих групп. Результаты были гораздо интереснее. Большинство предпочитало контейнер с острыми углами для групп кнопок с закругленными углами. Однако многие предпочитают не смешивать разные типы углов. Так что лучше так, действительно, не делать, если нет веской причины
Группы кнопок: эксперименты с фильтрами
Также я оценила использование кнопок в качестве фильтрующего элемента. Мне хотелось понять, какие углы люди предпочтут при группировании тегов.
!! Опять же, результаты опроса показывают, что большинство предпочитает фильтры с острыми углами.
Кроме того, важно отметить, что на выбор разных типов углов все равно влияет контекст. Например, работники медицинской отрасли могут предпочесть одно, а творческие люди – другое. Поэтому не спешите с выводами и не воспринимайте результаты опроса как истину в последней инстанции. Вместо этого я настоятельно рекомендую вам провести дальнейшие A/B-тесты для аудитории вашего приложения.
Тем не менее, ниже я обобщила результаты опроса для быстрого ознакомления. Где использовать острые углы:
- Для элементов, требующих особого внимания
- Для кнопок, требующих сиюминутного взаимодействия
- При комбинировании разных элементов
- Для тэгов, фильтров, выпадающих списков
Где НЕ использовать острые углы:
Где использовать закругленные углы:
- Для карт и диаграмм
- Для визуально приятных элементов
- Для информационных боксов
- Для кнопок «Подписаться сейчас», «Купить сейчас» (CTA)
Где НЕ использовать закругленные углы:
Примечание: выбор углов может отличаться в зависимости от устройства или режима, например в мобильной версии и десктопной.
Как вы уже увидели, существует множество способов сделать ваш интерфейс лучше и привлекательнее. Не существует жестких правил использования только элементов с закругленными углами. Плюс всегда стоит следить за тем, чтобы не злоупотреблять ими. А еще, прежде чем делать какие-то выводы, проводите с пользователями юзабилити-тесты. На их выбор могут влиять многие другие факторы.