Как скругленные углы влияют на удобство использования?

Как закругленные углы на кнопках и контейнерах влияют на удобство использования? Делают ли они кнопки более привлекательными? При использовании на других элементах без кнопок они делают сайт более дружелюбным? Я ищу некоторые научные тесты по их эффекту.

digg firefox ie

Закругленные углы занимают много времени в старых версиях Internet Explorer. Многие веб-сайты, такие как Digg , просто используйте border-radius: 0.4em в браузерах, которые его поддерживают, и оставляют плохие браузеры с острые края. Они специально сделали это для IE, потому что время, необходимое для реализации закругленных углов в IE, не стоило увеличения удобства использования?

77 голосов | спросил JoJo 12 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowMon, 12 Sep 2011 19:57:15 +0400 2011, 19:57:15

11 ответов


75

Известно как смещение контура (см. это страница из книги Универсальные принципы проектирования ), закругленные углы делают объекты менее суровыми и более дружелюбными. В книге приводятся основные работы по смещению контуров как эта статья Людей, которые предпочтут изогнутые визуальные объекты в Moshe Bar и Maital Net

Однако обратите внимание, что закругленные углы не обязательно являются ответом right - в книге также говорится:

  

Объекты с заостренными функциями, вызвали более сильные активации в   области мозга, связанной с ассоциативной обработкой, что означает, что   хотя угловые объекты были менее любимы, они вызвали более глубокий уровень   обработки, а не контурные объекты - они действовали,   более интересным и более заставляющим задуматься смотреть

Так что, возможно, речь идет о том, хотите ли вы, чтобы контент казался более дружественным или более заметным. Поскольку книга продолжается:

  

Угловые объекты более эффективны в привлечении внимания и   привлечение мысли; контурные объекты более эффективны при создании   позитивное эмоциональное и эстетическое впечатление.

Edit:

Я думал о том, что мы находим в природе, и о подсознательной интерпретации.

Мы со временем подготовлены к тому, что мы находим в естественном мире. Кривые скорее встречаются в природе, а квадратные углы довольно маловероятны, и часто там, где они могут возникать (например, из-за переломов, переломов или других сил), они со временем изношены, чтобы снова создать естественную кривую. Квадратные углы просто не имеют места в естественном мире.

По этой причине, когда мы пытаемся создать естественную страницу, мы создаем закругленные углы, а не квадратные углы. Это помогает границе или кадру сидеть более комфортно в контенте. Однако, если мы используем квадратные углы, эти более острые точки становятся более заметными (подсознание жестко связано с опасностью и угрозами).

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

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

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

ответил Roger Attrill 12 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowMon, 12 Sep 2011 20:17:58 +0400 2011, 20:17:58
19

Зачем ограничивать программное обеспечение. Еще один пример «округленных прямоугольников - это проще на глазу», о котором отметил @Paul Olyslager, очевидно в продуктах Apple, поскольку это сообщение в блоге Реализации Rounded Rectangles гласит:

  

Округлые прямоугольники не останавливались на программном обеспечении. Все чаще округленный прямоугольник стал parti дизайна аппаратного обеспечения Apple. Форма сделала большие машины доступными, а маленькие - карманными.

     

введите описание изображения здесь>> </p>
</blockquote>

<p> Таким образом, закругленные углы не могут быть критическим элементом юзабилити, но они помогают в создании восприятия подхода и дружелюбия. Таким образом, они обращаются к психологической потребности на уровне <a href= висцерального уровня .

ответил Kartik G 21 stEurope/Moscowp30Europe/Moscow09bEurope/MoscowWed, 21 Sep 2011 14:03:15 +0400 2011, 14:03:15
13

Как бы то ни было, я просто написал статью об этом, названную «

ответил Paul Olyslager 13 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowTue, 13 Sep 2011 11:42:44 +0400 2011, 11:42:44
7

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

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

Рассмотрим следующую веб-форму:

введите описание изображения здесь

Здесь моя форма состоит из трех визуально разных ящиков - одного синего, одного белого и другого синего. Это визуальное изменение помогает моему объекту выглядеть более интересным, чем одиночный синий или белый блок, но закругленные углы сверху или снизу показывают, что эти три объекта все еще являются частью одного и того же объекта. Пользователь видит визуально различную форму, но не откладывается, видя связанные данные в разных коробках.

ответил Jimmy Breck-McKye 13 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowTue, 13 Sep 2011 03:19:31 +0400 2011, 03:19:31
3

Статья «Движение UX» на Почему закругленные углы «Легче на глазах» отразите некоторые комментарии здесь, но также сделайте действительно интересный момент о том, как закругленные или квадратные углы работают, чтобы направлять глаз в разные стороны, с округлым выигрышем для привлечения фокуса в прямоугольник и острые углы, подчеркивающие окружающее отрицательное пространство.

ответил Todd Sieling 13 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowTue, 13 Sep 2011 00:30:52 +0400 2011, 00:30:52
3

Округлые углы отделяют элемент от структуры страницы.

Округлые объекты представляют собой особые объекты, которые структурно отделены от окружающих их объектов. Мы привыкли ассоциировать это качество с элементами, которые могут перемещать самостоятельно. На веб-сайте это обычно применяется исключительно к интерактивным элементам, таким как кнопки, которые могут быть нажаты или перемещаться каким-либо другим способом.

Должно быть довольно легко найти альтернативное дизайнерское решение для элементов в IE, которое будет воспроизводить структурную изоляцию округленных объектов. Например, заметная граница или тень на 1 пиксель. Это даст вам преимущества удобства использования закругленных углов без боли развития.

ответил josef 15 22011vEurope/Moscow11bEurope/MoscowTue, 15 Nov 2011 15:32:02 +0400 2011, 15:32:02
2
  

Неужели они намеренно сделали это для IE, потому что время, необходимое для реализации закругленных углов в IE, не стоило увеличения удобства использования?

Короткий ответ: да

Длинный ответ: Да, но не обязательно прямая проблема UX с отсутствием закругленных углов (ссылки Роджера связаны с некоторыми исследованиями с прямой релевантностью). Это скорее проблема времени, затрачиваемого на устаревание технологий, - это время, отвлеченное от остальных функций для остальных пользователей, которые могут иметь прямые улучшения UX для аудитории. Округленные углы довольно низки в списке приоритетов, поэтому это возможная функция, позволяющая отпустить пользователей IE. Вдобавок к тому, что демографический (по крайней мере, первоначально) Digg имел бы намного меньше пользователей IE.

ответил DA01 12 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowMon, 12 Sep 2011 23:31:43 +0400 2011, 23:31:43
2

Были психологические исследования, которые предполагали, что реакция человека на визуальную среду - это научное поведение - то есть, если вы живете в городской среде с множеством прямых краев, вы реагируете по-разному.

http://www.eamonfulcher.com/CogPsych/page3.htm

• Кросс-культурные исследования. Segall et al. (1966) обнаружил, что люди из племени зулусов не могли понять иллюзию Мюллера-Лиера. Это может означать, что, поскольку их визуальная среда содержит несколько прямоугольников, прямых линий и регулярных углов, они не пострадали от обработки сверху вниз (и, следовательно, подразумевая важность влияния окружающей среды в восприятии) .

Анни и Фрост (Annis and Frost, 1973) обнаружили, что канадские индейцы кри, которые жили в сельской местности, очень хорошо определяли, были ли две линии параллельны независимо от того, были ли они представлены по диагонали, по вертикали или по горизонтали, но индейцы кри, которые жили в городе плохо выполнялись, когда линии были представлены по диагонали. Предлагаемое объяснение заключается в том, что воздействие вертикальных и горизонтальных линий города затрудняет восприятие диагональных линий.
ответил PhillipW 11 PMpWed, 11 Apr 2012 12:55:46 +040055Wednesday 2012, 12:55:46
1

В то время как закругленные углы отлично смотрятся на большинстве браузеров, рассмотрите устройство, на котором он просматривается. Мобильные устройства становятся все более широко используемыми, особенно с популярностью популярной таблетки. Закругленные углы могут выглядеть меньше, чем звездные в не-IOS-планшетах и ​​мобильных устройствах.

Я бы рекомендовал контраст (между кнопкой и фоном) увеличить привлекательность и «clickabillity».

ответил Christie Day 15 22011vEurope/Moscow11bEurope/MoscowTue, 15 Nov 2011 07:30:33 +0400 2011, 07:30:33
0

Это действительно хороший вопрос, и много полезных ответов /мнений уже было дано.

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

Следует ли нам поддерживать закругленные углы для проблемных браузеров, таких как Internet Explorer 6,7,8?


Краткое объяснение того, почему поддержка IE с помощью закругленных углов и других вещей, таких как градиенты, теневой эффект, так сложно достичь для IE 6,7,8:

Каскадные таблицы стилей 3 (CSS3) могут сделать это очень просто, только с несколькими строками кода. Старые версии CSS требуют изображений или других методов для создания этих закругленных углов. Старые версии IE (6,7,8) не поддерживают этот новый язык CSS3, поэтому они все еще полагаются на более старые технологии, которые требуют более специализированных знаний CSS и, следовательно, требуют большего времени реализации. Компании часто сталкиваются с такими проблемами, поскольку эти браузеры часто кажутся наиболее используемыми клиентами. Будем надеяться, что это скоро изменится!


Правильно сказать, что круглые углы могут повлиять на работу пользователя. Ответы выше объясняют, почему. Мы просто рассматриваем аспекты удобства использования, но мы должны смотреть на него с большей точки зрения (UX).

Если поддерживать их не будет никакой проблемой, мы должны использовать их надлежащим образом. Однако в области UX мы также должны быть заинтересованы в других аспектах.

Вот некоторые причины, по которым мы не должны предоставлять поддержку закругленных углов в IE 6,7,8:

  • Проект потребует дополнительной работы и времени во время реализации для поддержки круглых углов в IE. Вам нужны более специализированные знания CSS, которые часто означают лучшие ресурсы. Все это добавляет к общей стоимости проекта, что часто ограничивается бюджетом. Нам нужен этот бюджет, чтобы сосредоточиться на гораздо более важном аспекте UX, а затем обеспечить идеальную совместимость браузера с браузером между всеми используемыми браузерами.
  • Проще рекламировать снижение рабочей нагрузки для проблемы с небольшим приоритетом UX, чем отстаивать увеличение рабочей нагрузки для той же проблемы. Очень важно сначала сосредоточиться на важных вещах.
  • Предположим, что мы полностью поддерживаем круглые углы для всех используемых браузеров. В основном это означает, что мы используем методы для обеспечения этих закругленных углов, которые создаются для поддержки этих конкретных версий браузеров. Общая поддержка этих браузеров (версий) будет удалена по всему миру, когда пройдут годы. Это означает, что вам останутся продукты, которые используют устаревшие методы для несуществующих версий браузера. Использование CSS3 немедленно и применение грамотно деградация автоматически обеспечит поддержку браузера, когда компании обновят свои браузеры для поддержки CSS3.

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

Просто убедитесь, что вы, профессионал UX, принимаете решение об этом, а не бизнес или руководство.

ответил Dennis Gommé 15 22011vEurope/Moscow11bEurope/MoscowTue, 15 Nov 2011 13:55:44 +0400 2011, 13:55:44
0

Прямоугольные кнопки острые. Наш мозг обрабатывает более острые объекты как опасность. Например, нож. Закругленные углы заставляют наш мозг чувствовать себя в безопасности.

ответил Agnel Vishal 11 62017vEurope/Moscow11bEurope/MoscowSat, 11 Nov 2017 20:44:36 +0300 2017, 20:44:36

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132