Должны ли метки меток быть вправо или влево?

У меня есть флажки с текстовыми значениями различной длины (от 5 символов до 60), что является предпочтительным макетом? Значение слева и флажок вправо или наоборот?

74 голоса | спросил Becskr 6 PMpTue, 06 Apr 2010 20:20:22 +040020Tuesday 2010, 20:20:22

11 ответов


61

Хотя Microsoft и Apple не являются явными в этой проблеме, Java Swing Look and Feel Guidelines явно заявляет, что label/value должно быть справа от элемента управления для языков, читаемых слева направо. Тот же применяется к переключателям .

В древнем стиле OSF Motif Style также явно указано, что метка находится справа от флажков и переключателей (pg9-133). И, хотя мы делаем археологию, стандарты IBM Common User Access утверждают, что справа от флажка , но они без звука на переключателях .

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

ответил Michael Zuschlag 6 PMpTue, 06 Apr 2010 22:33:23 +040033Tuesday 2010, 22:33:23
14

Если мы игнорируем возможность права на чтение порядка чтения (используется на некоторых языках), я считаю, что метка должна всегда находиться в правой части поля.

В Windows на самом деле невозможно поставить метку слева от флажка, с технической точки зрения. В любой среде разработки программного обеспечения Windows метка флажка будет установлена ​​с правой стороны флажка автоматически. Невозможно изменить это. То, что некоторые программисты будут делать жестко, создает флажок без метки вообще, а затем ставит статическую метку слева от нее как отдельный элемент управления. Помимо уродства у него есть недостаток мэра: пользователь не может щелкнуть метку, чтобы изменить состояние флажка.

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

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

<p> Итак, есть люди, которые считают, что это правильно, потому что выравнивание выглядит лучше. Я не. Я думаю, что позиция флажка верна, но позиция метки неверна. Вы, ребята, видите это как исключение? </p></body></html>

ответил Bart Gijssens 3 PM00000050000002831 2011, 17:39:28
12

Для выбора одного или нескольких вариантов отметьте справа. Это позволяет легко визуализировать сканирование и позволить пользователю мыши /пальцем по прямой линии:

[ ] option 1

[ ] this is option 2

[ ] #3

Если метка была слева, это было бы немного беспорядка:

option 1 [ ] 

this is option 2 [ ] 

#3 [ ] 

Кроме того, у вас часто будет ярлык «группы», и, хотя это можно сделать сверху, это часто слева:

Pick one or more options:   [ ] option 1

                            [ ] this is option 2

                            [ ] #3

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

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

To opt in to our incessant spam emails we ask that you click this checkbox: [ ]
ответил DA01 17 PM00000090000003731 2012, 21:39:37
8

Основное предположение заключается в том, что вы хотите использовать наиболее читаемый вариант.

Одним из важных аспектов является scannability , насколько легко получить обзор без сознательного рассмотрения каждого элемента в полном объеме. Для этого важно, чтобы флажки имели постоянную ширину. поэтому, если вы выровняете одну сторону флажков по вертикали, другая сторона также будет выровнена по вертикали. Текст имеет переменную ширину, поэтому этого обычно не может быть достигнуто без растягивания текста (что может сделать его очень трудным для чтения). Обычно рекомендуется помещать важные слова в начале предложений, поэтому для текста LTR мы должны расставить приоритеты по выравниванию влево по правильному выравниванию.

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

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

Еще одна вещь, которую следует учитывать, состоит в том, что набор радиокнопок эквивалентен списку HTML <select> по умолчанию, тогда как флажки эквивалентны <select multiple="multiple">

ответил l0b0 3 PM00000060000000131 2011, 18:13:01
7

Моим мгновенным ответом является то, что флажок должен быть слева от метки, но прежде чем отвечать, я хотел бы подтвердить рекомендации.

К сожалению, рекомендации Microsoft, Sun и IBM UI не являются явными в этом отношении (они, как правило, говорят о том, когда использовать флажки над переключателем и т. д.), но все их примеры используют условное обозначение control-then-label.

Поэтому я бы выбрал это.

ответил Matt Goddard 6 PMpTue, 06 Apr 2010 20:46:13 +040046Tuesday 2010, 20:46:13
3

Настольные GUI Toolkits, такие как SWT, инкапсулируют флажки в качестве варианта Button-widget, где текстовое свойство кнопки становится меткой. Он будет отображаться, по крайней мере, в системах, о которых я знаю, справа от флажка. Так что, в отличие от html, вам даже не нужно делать выбор.

ответил 6 PMpTue, 06 Apr 2010 23:58:36 +040058Tuesday 2010, 23:58:36
3

Это зависит от использования флажка.

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

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

Флажок

Параметры , в контексте других параметров, может быть после метки. Однако, в общем, я стараюсь держаться подальше от опционных флажков, потому что они скорее некоммуникабельны. Более новые элементы управления, такие как ползунок для iPhone, более коммуникабельны, или вы можете использовать кнопки bistate, выпадающие списки или другие методы, чтобы дать пользователю больше информации, чем простой «проверенный /не проверенный».

ответил Alex Feinman 3 PM00000060000001131 2011, 18:09:11
3

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

ответил Boris 16 Jam1000000amThu, 16 Jan 2014 01:17:43 +040014 2014, 01:17:43
2

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

ответил Ayyash 26 Mayam11 2011, 10:14:49
2

Итак, для программного обеспечения Windows или Apple, кажется, ясно поставить флажок слева. Если это правильно, чтобы уважать принципы Гельстата, метки должны быть выровнены справа, чтобы флажки были выровнены по вертикали. ..

Но для программного обеспечения для мобильных устройств флажок справа от ярлыков выглядит лучше для доступности. ..

Если вы хотите удалить некоторые сообщения, имейте в виду диспетчер SMS смартфона.

ответил pierre lebailly 5 WedEurope/Moscow2012-12-05T22:25:44+04:00Europe/Moscow12bEurope/MoscowWed, 05 Dec 2012 22:25:44 +0400 2012, 22:25:44
1

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

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

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

Name         Title               Hire Date         Select
--------     ---------------     ---------         ------
John Doe     Sales Associate     9/12/03           [x]
Jane Doe     Regional Manager    12/3/01           [x]

В этом случае я считаю, что флажки должны располагаться справа, потому что коннотация отличается (вы выбираете элементы для дальнейших действий, а не для исключения из списка). И iOS (ничего особенного в HIG, странно) и Android ( http: //developer.android.com/guide/topics/ui/controls/checkbox.html ) поместите флажки справа. Для меня это имеет наибольший смысл для этого типа приложений, поскольку оно дает визуальное различие для флажков; плавание их в этом случае, по-моему, было бы немного неудобным.

ответил Brian 4 FebruaryEurope/MoscowbTue, 04 Feb 2014 19:19:05 +0400000000pmTue, 04 Feb 2014 19:19:05 +040014 2014, 19:19:05

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

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

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