Хабрахабр

[Перевод] Скруглённые или остроугольные?

Скруглённые или квадратные? Вот в чём вопрос.

Какие из них лучше для юзабилити? Нужно ли менять обычные остроугольные кнопки на скруглённые? Как мы вообще принимаем подобные решения?

Мы уже знаем, что размер, контрастность и отбрасываемая тень сами по себе могут сделать кнопку заметной, но вот найти правильный баланс для элементов главного действия и вторичных не всегда просто. Именно с такими вопросам вы столкнётесь, погрузившись в UX, связанный со круглёнными кнопками в приложениях. Скруглённость в этом случае может прийти на помощь.

Переменные, используемые для улучшения заметности

Посчитать количество карточек в ряду легче, если их углы неострые. Скруглённые элементы легче для восприятия.

Скруглённые элементы легче распознать, чем острые

Напротив, карточки с острыми углами выглядят унифицировано и единообразно, что затрудняет их распознавание. Так происходит потому, что лучше различимая скруглённость помогает нашим глазам быстрее различать сами карточки.

В grid layout скруглённость работает ещё лучше.

Например, в дашборде на TurboTax глаз лучше цепляется за элементы со скруглёнными углами в верхней секции в сравнении со средней секцией, где у карточек углы острые.

Дашборд Turbotax

Пример очень удачного расположения таких кнопок — Spotify, где хорошо ощущается призыв к действию. Полностью скруглённые кнопки отлично смотрятся в интерфейсах, где адекватное количество свободного пространства.

Скруглённые кнопки на Spotify

А полностью скруглённые кнопки воспроизведения очень хорошо отличимы от UI альбомов и плейлистов, что в свою очередь побуждает пользователя нажать на «Play». Вообще говоря, в данном конкретном примере, так как работа со Spotify всегда сводится к воспроизведению (треков, подкастов, плейлистов), главное действие определено однозначно.

“Play” на Spotify

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

1. Когда скруглённые кнопки похожи на теги

Если отличить кнопку от тега (фильтра) непросто, это введёт людей в замешательство: «Я кликаю на кнопку или на фильтр?»

Что это: кнопки или фильтры? Совсем неочевидно.

2. Скруглённые кнопки не способны показать вложенные опции

Но область клика (или тача) для отображения опций у них лимитирована размером иконки (обычно 16x16 или 24x24 px). Полностью скруглённые кнопки обычно используют иконку со «стрелочками», чтобы показать наличие вложенных опций.

Удобно ли будет просматривать опции в каждом из случаев?

Такой подход работает лучше. Если использовать лишь слегка закруглённые кнопки, мы сможем прятать стрелочку, чтобы кнопка вела себя похоже на pop-up кнопку.

push buttons). Apple не рекомендует использовать скруглённые кнопки для действий (см. radio buttons). Полностью скруглённые кнопки зарезервированы для "Помощи" или предоставления взаимоисключающих вариантов (см.

Иллюстрации из Human Interface Guidelines от Apple

3. Полностью скруглённые кнопки не подходят для стеков

Например, для таблицы из 10 строк мы получим столбец из 10 кнопок, каждая из которых выглядит, как кнопка для совершения главного действия. Когда мы размещаем скруглённые кнопки рядами в таблицах и карточках, они смотрятся не к месту.

Минимизируя заметность кнопок, мы позволим пользователю сосредоточиться на главной рабочей области. В качестве альтернативы можно попробовать кнопки «без границ», как это сделано в новых уведомлениях macOS, или показывать кнопки только при наведении курсора.

Кнопки «без границ» в стеке

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

перев.) адресная строка стала скруглённой, чтобы лучше выразить доступность одновременного использования для поиска. В Хроме после недавнего апдейта (прошло полгода с момента публикации оригинальной статьи — прим. Пользователи могут увидеть часть результатов поиска прямо во время печати, ещё до перехода на страницу.

Новая строка поиска в Chrome (источник — Google blog)

Несложно найти скруглённые элементы и в других приложениях Гугла типа Calendar, Gmail и Drive. Вписываясь в новую концепцию, кнопки на тулбаре стали подсвечиваться скруглёнными при наведении.

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

Use round shapes in Material Designs

Characteristics of rounded corners

Why rounded corners are easier on the eyes

Теги
Показать больше

Похожие статьи

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Кнопка «Наверх»
Закрыть