x
 
Азат
19 апреля 2007

Два вопроса:

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

Заранее спасибо.

С уважением, Азат.



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

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

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


Поделиться
Отправить

Комментарии

Алексей Мельников
19 апреля 2007

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

Результат обработки формы (к примеру):

Владимир Владимирович Познер заказал то-то, то-то и то-то.

выглядит человечнее нежели

Фамилия: Познер
Имя: Владимир
Отчество: Владимирович

Ну, и еще ФИО-порядок не самый благозвучный, как мне кажется (хотя и самый привычный), ИОФ приятнее на слух и просто напрашивается при вводе. Мы в таком порядке говорим и думаем.

— Вас как зовут, простите?
— Леха Мельников. А вас?
— Серега Чунаев.

St
19 апреля 2007

А еще нужно не забывать ставить для <td>, в котором выводятся подписи к инпутам, (да и для ячеек самих инпутов) выравнивание top left. Ведь если присутствует высокая <textarea> либо на низком разрешении переносится текст подписи, — соседний элемент уезжает в вертикальный центр ячейки.

В. С.
19 апреля 2007

Добавляя к сказанному и опираясь на GNOME Human Interface Guidelines 2.0…
0. Первый вариант предпочтительней второго.
1. Двоеточия в подписи к полю упрощают идентификацию самой подписи и визуально связывают подпись и поле при первичном сканировании.
2. Выравнивание. Если подписей несколько и если при этом они идут одним столбцом, то:
2.1. При несущественной разнице в длинах подписей все они выравниваются по левому краю.
2.2. В противном случае — по правому.


19 апреля 2007

С этого момента комментарии без указания человеческого имени не будут проходить модерацию.

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

Рекомендации по выравниванию элементов в ГНОМе можно посмотреть по этому адресу: http://developer.gnome.org/…/2.0/design-window.html#layout-dialogs

Владимир Киевский
19 апреля 2007

Возможно ли использовать такой вариант?

Александр Тихонов
19 апреля 2007

Советую почитать статью Люка Вроблевски на тему веб-форм (http://www.habrahabr.ru/blog/ui_design_and_usability/7837.html). В ней как раз описывается выбор между расположением «в один столбец» и «построчно».

Алексей Мельников
19 апреля 2007

В качестве апдейта. Считаю, что ФИО-последовательность из той же оперы, что меню и ценники. Кофе черный, чай зеленый.

Познер Владимир Владимирович — то же самое, что «хлеб цельнозерновой ржаной». Наверное, можно оправдать такое название для товарных позиций внутри компании, но в каталогах и ценниках все должно писаться по-человечески: Владимир Владимирович Познер, цельнозерновой ржаной хлеб.

Тут, видимо, играет роль стереотипное мышление: раз все так пишут, значит так правильно. Ну, и снежный ком в итоге.

P.S. Не уверен, но думаю, что ФИО пришло к нам из Советов :) …из Советов, где все были тов. Крупскими и тов. Дзержинскими. Тогда фамилия играла первостепенную роль.

А хлеб цельнозерновой — программерско-бухгалтерское нововведение, помогающее при сортировке по типу товара.

Сергей Евсеев
19 апреля 2007

Мало кто задумывается о проблеме переключения языковых раскладок между полями формы.
Например, только что я ввел в поле свое имя, затем переключился на латиницу и ввел адрес электронной почты. После этого мне снова пришлось переключить раскладку клавиатуры, чтобы напечатать это сообщение.
Заметка по этому поводу опубликована на SE Блоге (http://blog.sestudio.ru/feedback/).

P.S. Если поменять поля формы местами, количество операций сократится до минимума.

Павел Сивцов
19 апреля 2007

Алексей Мельников, ваша идея о «полном имени» разбивается о жизненные примеры. Пример: Дмитрий Сергей.

Азат Ахъяров
19 апреля 2007

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

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

Для совместимости с КПК, на мой взгляд, будет грамотным использовать не таблицы, а дивы, что, при отключении CSS и/или недостатке пространства, приведет к «распаданию» формы и отображению ее, как во втором примере.

Пример реализации такой формы: http://www.tuimazy.com/p/20070419/

Денис Братчук
19 апреля 2007

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

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

Что касается предложения Владимира Киевского (с указанием названий полей ввода в самих полях), то я бы посоветовал подумать о пользователе, который автоматически введет три единицы в поля, а потом (после прочтения предупреждения А. Г. о человеческих именах) будет судорожно вспоминать, где же там фамилия должна быть, а где — имя.

Александр EM
19 апреля 2007

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

Например: «Представьтесь, пожалуйста».

Кирилл Александров
19 апреля 2007

Мне думается, что надо различать между собой следующие ситуации:
ситуация первая) если человеку предлагают заполнить веб-форму, то уж пусть он пишет так же как и слышит, то есть Владимир Владимирович Путин — это по-человечески звучит и выглядит;

ситуация вторая) если нам надо представить большой список фамилий, то сначала фамилия, потом имя, потом отчество. Фамилий больше, чем имен… поиск по более уникальному идентификатору (фамилии) должен быть продуктивнее.

Игорь Сафонов
19 апреля 2007

По поводу варианта Владимира Киевского:

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

Алексей Мельников
20 апреля 2007

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

Пример Сергея, с перетасовкой полей ввода в Советах, из той же сферы, что и хлеб цельнозерновой ржаной. Как это так, начинать представляться с адреса электронной почты?

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

Андрей Колпаков
20 апреля 2007

У каждой формы есть две главных цели:

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

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

Названия полей не должны допускать двойственных ответов и не должны вызывать сомнений. Одна из самых интересных задач
— правильная запись даты рождения. На картинке ниже — несколько вариантов. Верхние два варианта хорошие
(первый рассчитан на более опытных, второй — на всех). Третий ужасен — придется выбирать свой год в списке от 1900 до 2007. Четвертый неоднозначен — в каком формате писать данные? Сейчас напишу, а на следующей странице заботливый
программист напишет ошибку — не бывает, мол, в году 18-го месяца, и в месяце никак нет 1987-го дня.

2. Форма должна получить данные в наиболее приемлемом для хранения и дальнейшего испоьзования виде. Хранить ФИО в базе данных удобнее в трех колонках, а не в одной. Написать фамилию, имя и отчество в трех ячейках не труднее,
чем в одной (даже по нажатиям клавиш: вместо пробела нажимаем таб). А если писать
в одной, то дополнительно следует указать порядок следования ФИО—ИОФ. Кроме того, увеличивается вероятность ошибки:
пользователь мог написать ФИО вместо ИОФ. Вдобавок, этим пользователем мог оказаться Остап-Мария Бендер-Бей
или Султанов Юсуп Насир Оглы. Не столь простая задача для программиста — правильно выделить отсюда
фамилию, имя и отчество.

Вероятнее всего, одно поле ввода для ФИО при необходимости их раздельного использования — мина замедленного действия для интерфейса.


23 апреля 2007

Почему, глядя на графу ФИО в чужой бумажной анкете, человек почти всегда может понять, где имя, а где фамилия?

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

Мне кажется, определить в трех словах отчество не так сложно, и, соответственно, вычислить порядок остальных составляющих. Эвристические алгоритмы Яндекса умеют вычислять имена и фамилии одних и тех же людей в тексте новостей в разном порядке и словоформах.

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

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

Подобный интерфейс уже пару лет используется в Яндекс-почте.

Вовка Соловьёв
24 апреля 2007

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

Это очень легко проверить — достаточно попробовать заполнить дюжину раз и тот и другой вариант.

Павел Сивцов
24 апреля 2007

Кстати, фамилия в моём примере — «Сергей». 8-) Позозреваю, что болгарского происхождения.


25 апреля 2007

В первом случае траектория выглядит проще. Разделение на две колонки — прием, обычно облегчающий чтение. См. улучшение примера http://www.artgorbunov.ru/bb/soviet/20070409/

Сергей Гоцуляк
2 сентября 2010

Второй вариант, как тут заметили в конце, предпочтительнее с точки зрения сокращения движений глаз:
http://habrahabr.ru/blogs/ui_design_and_usability/103327/

Алекс Дорохович
23 августа 2011

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

Роман Ватриковский
29 октября 2014

Я бы рассматривал три отдельных случая:

1. Подписи расположены слева от полей формы, выровнены по левому краю.
С одной стороны, такая в`рстка помогает сразу оценить структуру формы — достаточно прочитать список названий полей. С другой стороны, читать так всё же сложнее. Большой интерлиньяж, конечно, немного улучшит ситуацию, но всё равно в этом варианте присутствует некая «табличность» — приходится сконцентрированно преодолевать взглядом пустое пространство между подписью и полем ввода, даже если это пространство мало.

Аргумент Артёма насчет разделения на колонки я не очень понял — если говорить об обычных колонках, то они читаются вертикально, если о табличных (как в комментариях по приведённой ссылке), то зачем делать таблицу там, где можно обойтись без неё? Даже хорошая таблица будет сложнее хорошей же строки при небольшом объёме данных, разве нет?

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

2. Подписи расположены слева от полей формы, выровнены по правому краю.
По-моему, оптимальный вариант. В такой верстке движение глаз будет наиболее естественным, без частых скачков с одной короткой строки на другую, без напряженного преодолевания пустоты между подписью и полем. Кстати, быстрый поиск по названию в этом варианте тоже очень даже возможен.
Сергей Кулинкович, как вы, наверное, знаете, рекомендует в этом случае проставлять двоеточия: http://www.artlebedev.ru/tools/technogrette/etc/forms/ (5 пункт)

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


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

Иногда люди, когда пытаются оценить, насколько выгодно расположены элементы на форме, рисуют линию, по которой якобы глаз скользит 2 10 Как правильно писать ОКПО, ОГРН, ИНН/КПП в реквизитах организации? 5 11




Недавно всплыло

Как сделать нагляднее таблицу перфорированных лотков? Часть вторая 5 Несмотря на то, что между нами была договорённость о работе по ФФФ, клиент был в бешенстве 5 Поделитесь соображениями, как работать, путешествуя 8 Это какие‑то другие пиксели? Как они соотносятся? 2