Это модальное диалоговое окно для страницы администратора. Мы обсуждали положение кнопки закрытия. Как вы думаете, какой из них лучше?

A более распространен, и его можно увидеть во многих отличных веб-приложениях (Figma, Twitter, Slack, Bootstrap и т. д.). Б как-то на рекламу похоже. (Биг Сур использует его в уведомлении, Миро)

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

Наш опрос («что лучше всего работает для вас») показывает, что люди предпочитают Б больше. Причина в ясности и открытости.

Мой большой вопрос: почему многие замечательные приложения используют кнопку закрытия ВНУТРИ вместо кнопки B? Почему A чаще встречается, чем B (может быть, я предвзят).

enter image description here

20
yellingbytes 30 Сен 2021 в 16:10
6
Какой вопрос был в вашем опросе? «Какую кнопку закрытия вы предпочитаете?»
 – 
theonlygusti
28 Сен 2021 в 02:36
Были ли респонденты вашего опроса (и их демографические данные) репрезентативными для вашей фактической пользовательской базы (в частности, пользователей-администраторов)? Если нет, то их мнение имеет меньшее значение.
 – 
Roddy of the Frozen Peas
28 Сен 2021 в 05:02
10
Всякий раз, когда меня спрашивают «что лучше?», я отвечаю «чем лучше?». :-)
 – 
Pablo H
28 Сен 2021 в 19:00
3
Намерение имеет значение, а не только дизайн. Если бы это была была реклама или ворчание, основная функция которых состоит в том, чтобы отмахиваться, даже не взглянув на содержание, то предпочтительнее было бы B; на самом деле кнопка закрытия должна быть еще более заметной. Но если форма должна использоваться по назначению и от нее редко отказываются, тогда А лучше и элегантнее.
 – 
Zeus
29 Сен 2021 в 06:17
4
Я думаю, что есть третий вариант, который вы не рассмотрели. Иметь отдельную кнопку «Отмена» в нижнем ряду. См. также material.io/components/dialogs#anatomy. Отмена четко сообщает о предполагаемой цели взаимодействия и, как правило, является хорошо известным и устоявшимся рабочим процессом, с которым пользователи должны быть знакомы из других приложений. Вы можете понизить кнопку до плоского стиля, чтобы у нее не было цветного фона, чтобы уменьшить ее важность.
 – 
Drise
29 Сен 2021 в 22:21

8 ответов

Могу поспорить, что кнопка закрытия стандартного цвета победит. Я думаю, вы получаете B, потому что кнопка «Закрыть» не окрашена, как кнопка «Создать», поэтому пользователям приходится смотреть на X и понимать, что это кнопка.

Вот кнопка закрытия, которая соответствует кнопке создания:

enter image description here

5
moot 28 Сен 2021 в 11:52
«C» выглядит сносно, потому что цвет «Создать учетную запись» окрашен в красный цвет. Что, если бы он был оформлен в другой цветовой гамме, например, в синем? Я не думаю, что кнопка закрытия должна быть синей, золотой или любого другого цвета, отличного от красного, который дизайн может использовать для кнопок по умолчанию.
 – 
Cody Gray
29 Сен 2021 в 11:07
Я согласен с @CodyGray, основной цвет слишком сильно подчеркивает его. я думаю, что более распространенным является серый цвет при наведении на него мыши, как в Figma
 – 
yellingbytes
30 Сен 2021 в 16:03

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

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

5
user8356 29 Сен 2021 в 16:16
Это зависит от того, работаете ли вы в интересах пользователя или в интересах клиента (т. е. владельца веб-сайта, который хочет, чтобы вы нажали определенную кнопку). В этом случае я сомневаюсь, что простота закрытия диалогового окна повлияет на чье-то решение о том, создавать ли учетную запись или нет, поэтому ваша точка зрения имеет определенный вес. На самом деле, если пользователь не может понять, как закрыть наш диалог, вы можете обнаружить, что он вообще закрывает ваш сайт, а это определенно не то, что вам нужно!
 – 
HappyDog
29 Сен 2021 в 16:58
 – 
Drise
29 Сен 2021 в 22:19
Я согласен с тем, что некоторые неосведомленные клиенты хотят отговорить пользователей от легкого отказа от некоторых форм. Конечно, они ошибаются. Разочарование интерфейсами — серьезная проблема. На самом деле, поскольку все наше взаимодействие с некоторыми компаниями теперь осуществляется через интерфейсы, это может стать основной проблемой для общей удовлетворенности клиентов.
 – 
user8356
29 Сен 2021 в 23:32

Я люблю Б.

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

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

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

4
theonlygusti 28 Сен 2021 в 02:59
Это общее решение по модальным компонентам для нашей дизайн-системы. Наша цель — добиться единого стиля в приложении. Я понимаю, что Б лучше. но я борюсь с тем, что чаще встречается в веб-приложениях, в том числе в некоторых из лучших (Twitter, Bootstrap, Figma).
 – 
yellingbytes
28 Сен 2021 в 09:18
8
Можете ли вы указать на определенные факты или ресурсы, чтобы немного подтвердить это? Особенно о психологическом эффекте, который вы описываете. Без него это больше похоже на личное мнение или ощущение, которое вы описываете.
 – 
jazZRo
28 Сен 2021 в 10:14

Как пользователь, B отстой. Так же и А.

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

А также плохо, потому что ваш дизайн скрывает тот факт, что «Х» — это кнопка закрытия. Это похоже на неуместную букву, а не на кнопку, которую нужно нажать.

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

3
JRE 29 Сен 2021 в 10:46
1
Я согласен; оба ужасны. В основном потому, что мой инстинкт по умолчанию, нажатие Ctrl+W или Alt+F4, чтобы закрыть всплывающее окно, приводит к ужасным неприятным последствиям. Это одна из многих причин, по которой веб-приложения по своей сути создают плохой пользовательский опыт, и дизайнер не может ее решить. Решение требует менеджера проекта.
 – 
Cody Gray
29 Сен 2021 в 11:06
Что, по вашему мнению, было недостаточным в ответе спорного вопроса?
 – 
theonlygusti
1 Окт 2021 в 00:37

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

Это факт, что:

  • почти все кнопки закрытия из трех основных операционных систем находятся в пределах их оконных границ

  • как вы сказали, гораздо более крупные сервисы, такие как Figma, Twitter и Bootstrap, также помещают кнопку закрытия в границы окна.

С учетом этого основного закона и этих двух фактов я полагаю, что вариант А лучше, потому что вы предоставляете то, к чему привыкли пользователи.

3
Arkan Tanriwa 1 Окт 2021 в 19:18
1
Сегодня мой коллега отправил мне уведомление в Mac OS. на удивление они B на верхнем левом краю
 – 
yellingbytes
30 Сен 2021 в 16:08
Хорошо, я согласен. Таким образом, за исключением кнопок закрытия уведомлений Mac OS, подавляющее большинство кнопок закрытия находится в пределах границ окна.
 – 
Arkan Tanriwa
1 Окт 2021 в 19:18

Мой большой вопрос: почему многие замечательные приложения используют кнопку закрытия ВНУТРИ вместо кнопки B? Почему A чаще встречается, чем B (может быть, я предвзят).

Вариант А занимает меньше места и менее утомителен для дизайна в CSS.

Если вы не уверены, я хотел бы отметить, что самая популярная структура CSS на планете использует вариант А.


Либо один хорошо. Они настолько вездесущи, что ваше решение даже не будет замечено. Хотя лично у меня вариант Б ассоциируется с надоедливой рекламой.

Ключ в том, чтобы быть последовательным во всем вашем приложении/веб-сайте.

Пока ты не такой ассехат, с тобой все будет в порядке:

enter image description here


Вот как Stackexchange обрабатывает пометку/закрытие голосов:

enter image description here

Здорово, что они так хорошо это противопоставили.


Бонусные баллы

Позвольте мне закрыть всплывающее окно с помощью клавиши Esc или кнопки «Назад» на мобильном устройстве.

1
MonkeyZeus 29 Сен 2021 в 17:06
В примере со StackExchange я сразу же запутался в том, в чем разница между «отмена» и «х». Наверное, нет, но в таком случае зачем две кнопки?
 – 
HappyDog
29 Сен 2021 в 16:59
Я не разрабатывал его сам, поэтому вам нужно будет найти этого человека и спросить его, но я думаю, что это удобно. Это позволяет вам легко передумать прямо перед нажатием кнопки. Если вы жалуетесь на избыточность, то вам, вероятно, также не нравится захват ключа Esc?
 – 
MonkeyZeus
29 Сен 2021 в 17:02
"вам, вероятно, тоже не нравится захват ключа Esc?" Вовсе нет! Вы должны иметь возможность перемещаться с помощью клавиатуры или мыши. Это жизненно важно, правда. С другой стороны, избыточность по своей сути не является проблемой, если ясно, что два действия делают одно и то же. В этом случае, возможно, это не двусмысленно, но я видел формы редактирования, где неясно, закроет ли окно методами, отличными от помеченных кнопок действий, мои изменения будут зафиксированы или отброшены.
 – 
HappyDog
29 Сен 2021 в 17:26
Классический пример — если кнопки помечены как «Да» и «Нет», что делает X? Ответ - наверное зависит от вопроса.
 – 
HappyDog
29 Сен 2021 в 17:28

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

enter image description here

enter image description here

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

Вопрос должен звучать так: какой вариант предлагает лучшую контрастность кнопки закрытия окна, чтобы сделать ее функцию более понятной?

Если он должен быть внутри окна, я бы рекомендовал как минимум контраст фигура/фон + форма:

enter image description here

Я лично вижу этот второй вариант чище.

Почему многие замечательные приложения используют кнопку закрытия ВНУТРИ?

Интеграция

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

Последовательность

Кнопка закрытия внутри окна делает дизайн более последовательным. Опция out приводит к тому, что кнопка интерпретируется как отдельный элемент с собственным графическим объектом, выходящим за рамки функции, что нарушает визуальное единство дизайна.

30
Danielillo 28 Сен 2021 в 10:42
Спасибо за ответ! Вы знаете, почему А встречается чаще? как в Figma, Twitter, Bootstrap и т. д.
 – 
yellingbytes
27 Сен 2021 в 17:49
3
A более распространен, потому что: они еще не прижились ;) Ваш опрос и параллельное сравнение выявили правду, которая просто не является общепринятой. B также оказывается моим предпочтительным. Почему B не был мейнстримом с самого начала? Потому что это графическое выражение, которое может не соответствовать каждому языку дизайна, особенно старому веб-дизайну до того, как все стало таким округлым и тактильным. Как сказал Даниилло, вариант А кое-что «чище», вариант А кажется «универсальным», возможно, потому, что мы к нему привыкли, но также и потому, что он может быть несовместим с меньшим количеством языков дизайна.
 – 
theonlygusti
28 Сен 2021 в 02:30
10
Другим аспектом этого является усилие для его создания. Вариант A обычно включен в любой фреймворк по умолчанию. Я также должен сказать, что вариант B на самом деле объективно не лучше, он кажется мне неуместным.
 – 
Big_Chair
28 Сен 2021 в 11:13
7
A, вероятно, более распространен из-за истории. На протяжении большей части истории нашего компьютерного пользовательского интерфейса кнопка закрытия была частью реальной оконной рамы, которая по своей природе должна содержать все свои элементы управления внутри себя. Таким образом, кнопка закрытия привязана к нему. И, как указывает Big_Chair, это намного проще с точки зрения кода. Веб-дизайн долгое время был ограничен «простыми» сетками и вложенностью, и выход за пределы этого с помощью CSS был сомнительным.
 – 
Logarr
28 Сен 2021 в 21:45
6
B «намного сложнее» кодировать. Как инженер, если дизайн B не был явно указан, я бы выбрал A. Мне пришлось бы искать, как сделать B, и возиться с CSS в течение нескольких часов, вероятно.
 – 
personjerry
29 Сен 2021 в 00:02

Я не буду вдаваться в подробности вашего примера, но есть некоторые общие положения, которые могут помочь объяснить, почему A часто предпочтительнее:

  • Раньше окна пользовательского интерфейса всегда были прямоугольными. Они определялись координатами (x,y) в сочетании с шириной и высотой, и вы не могли рисовать за пределами этой прямоугольной области без больших дополнительных усилий (если это вообще было возможно). Это установило правила размещения кнопок.
  • В большинстве оконных систем задействовано больше, чем просто кнопка закрытия. Представьте, как выглядел бы дизайн B, если бы нам также нужно было включить свертывание, развертывание/восстановление и любые другие кнопки управления окнами, которые может предоставить система. Таким образом, этот дизайн не масштабируется более чем на одну кнопку.
  • Размещение кнопок закрытия за пределами фрейма может быть более сложным с технической точки зрения (например, в настольном приложении может потребоваться обработка прозрачности, а в веб-приложениях это может вызвать проблемы с позиционированием/обрезкой, если переполнение скрыто или для определенных значений display атрибут).
  • Реализация общих решений с настраиваемыми изображениями кнопок может усложнить позиционирование. Внутри кадра вы можете просто расположить его сверху/справа, тогда как с изображением вам нужно будет «центрировать» его на границе, а визуальный центр может не быть физическим центром.
  • Из-за всех вышеперечисленных проблем библиотеки пользовательского интерфейса общего назначения будут предоставлять функциональные возможности для реализации кнопок внутри фрейма, но с гораздо меньшей вероятностью потребуют дополнительной работы, позволяющей разместить их вне фрейма. Это увеличивает усилия пользователей этих библиотек по перемещению кнопки за пределы фрейма, что еще больше укрепляет соглашение.
  • Кроме того, частичное размещение кнопки за пределами рамки может создать проблемы с удобством использования, когда фон занят — в ваших примерах используется простой фон, но если бы он был поверх чего-то более сложного, кнопка могла бы потеряться.
  • У вас могут возникнуть проблемы с макетом на маленьких экранах, когда вы хотите, чтобы модальное окно занимало весь экран. Это потребует дополнительного поля вокруг всего модального окна (или верхнего и правого краев, если вам удобно, когда модальное окно не центрировано). Или адаптивный дизайн, который размещает кнопку внутри фрейма на небольших экранах, что потенциально удваивает работу (поскольку вам нужно учитывать два разных макета).
14
HappyDog 29 Сен 2021 в 12:07
1
Windows поддерживала непрямоугольные окна приложений гораздо дольше, чем вы думаете - комбинация обработки сообщений SetWindowRgn и WM_NCHITTEST существует уже более 20 лет....
 – 
rackandboneman
30 Сен 2021 в 03:07
2
20 лет не особенно стар. Я не помню, чтобы это было возможно в Windows 3.x или более ранних версиях, а также на ранних машинах Mac/Xerox — если и было, то использовалось невероятно редко. Соглашения были установлены задолго до выхода Windows 95, и, честно говоря, даже когда в приложениях начали появляться пользовательские стили и формы окон, элементы управления окном все еще находились внутри видимой области окна.
 – 
HappyDog
30 Сен 2021 в 13:04
Но Windows 3.x была 20 лет назад… не так ли? :-\
 – 
Tim Pederick
30 Сен 2021 в 19:00
20 лет назад самой последней домашней операционной системой Windows была Windows Me (выпущена 14 сентября 2000 г.). К этому времени в следующем месяце Windows XP исполнится 20 лет (выпущена 25 октября 2001 г.).
 – 
Andrew Ray
30 Сен 2021 в 23:59