Современные веб-формы: еще несколько тонкостей

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





    Стоит оговориться, что под «правильным интерфейсом» я понимаю такой интерфейс, который достоверно увеличивает конверсию и обеспечивает субъективный комфорт для пользователей. Достоверность данных обеспечивается как исследованиями проводимыми нашей группой, так и исследованиями сторонних (чаще всего западных) специалистов по UX.
    В последнее время тренды в дизайне как веб-приложений в целом, так и форм в частности, стремятся к максимальному украшательству: активно используется т.н. «карамельный» дизайн, градиенты, тени, яркие и нестандартные элементы интерфейса. Порой, среди «дизайна» бывает сложно найти собственно контент.
    Такое бездумное украшательство приводит к тому, что внимание пользователя отвлекается от основной цели использования веб-приложения, пользователь начинает фиксироваться не на заполнении формы, а на изучении её дизайна. В конечном итоге, форма так и не заполняется и мы не получаем нашей драгоценной конверсии.
    Итак, давайте рассмотрим несколько модных трендов в дизайне веб-форм:
    • Нестандартное расположение заголовков полей;
    • «Креативные» метки для обязательных полей;
    • Слайдеры везде и всюду;
    • Неочевидные контекстные подсказки;

    Нестандартное расположение заголовков полей


    Заголовок (label) подсказывает, какой тип информации необходимо ввести в текстовом или ином поле. Это означает, что пользователь должен прочесть заголовок до того, как перейти к полю ввода. Для сайтов, на которых контент читается сверху вниз слева направо, label логично располагать либо над полем ввода, либо непосредственно слева от него. На практике же дизайнеры часто ставят заголовок где угодно, но только не в естественном для него месте.
    Яркий пример – label расположен ниже поля ввода (рис. 1):
    аголовок для поля ввода ниже самого поля
    Рис.1 Заголовок для поля ввода ниже самого поля

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

    Согласно нашему исследованию с использованием фокус-групп (по 30 человек в основной и контрольной группе), при заполнении формы с нестандартно расположенными заголовками полей (20 текстбоксов, 10 чекбоксов, 10 листбоксов, 4 группы радиобаттонов по 3 в каждой) произошло на 16,67% больше отказов, чем при заполнении стандартной формы контрольной группой (46,67% против 30%), на 30% больше ошибок при заполнении полей (53,33% против 23,33%), а также на 63,33% чаще высказывалось субъективное недовольство дизайном формы (73,33% против 10%).
    Результаты исследования юзабилити форм с заголовками, расположенными под полем
    Рис.2 Результаты исследования юзабилити форм с заголовками, расположенными под полем

    Другой распространенный случай – формы с заголовками внутри полей ввода (рис.3):

    Рис.3 Заголовок для поля ввода внутри самого поля

    Перечислим несколько причин, почему столь часто используемое решение является на деле не самым верным выбором:
    • Когда пользователь начинает вводить данные в поле, заголовок исчезает. И если пользователь на что-либо отвлечется, вернувшись затем к форме, он не сразу сможет понять, что за поле он заполняет;
    • В особо трудных случаях, когда разработчики поленились использовать js для автоматического исчезновения заголовка при клике в поле, пользователю придется сделать множество дополнительных умственных и физических действий для удаления этого заголовка. То же самое справедливо для существующего, но неработающего яваскрипта;
    • Поля с заголовками внутри выглядят, как заполненные, поэтому велика вероятность того, что пользователь пропустит какое-либо из полей;
    • В том случае, если форма полностью заполнена, у пользователя не остается возможности проверить верность заполнения полей, соотнося их с заголовками;
    • Пропадает возможность напрямую распечатать форму, т.к. когда отсутствуют заголовки, становится непонятно, что за поля заполнены;
    • Невозможно использовать такой дизайн форм в случаях, когда заголовки полей состоят более, чем из 2-3 слов;
    • JS, используемый для реализации данного дизайна необоснованно усложняет код фронтенда;

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

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

    «Креативные» метки для обязательных полей


    Если вам необходимо показать пользователю обязательные для заполнения поля, то почему бы не использовать красную звездочку (*), зарекомендовавшую себя, как стандарт de-facto? Возможно, это не самый лучший образец инфографики, однако за годы использования на множестве сайтов он стал привычным для пользователей. Кроме того, в звёздочке используется т.н. «двойной визуальный акцент», т.е. пользователь сразу же узнает её по особой форме и цвету и, даже в случае нарушений цветового восприятия, не возникнет двойного толкования данного индикатора.
    Тем не менее, существует определенная группа дизайнеров, которые стараются внести свои коррективы и в этот элемент информационного дизайна. Безусловно, есть люди, которые не знают, что красная звездочка означает обязательность заполнения. Но ведь намного больше людей привыкли к такому соглашению и их вводят в ступор отклонения от него в виде произвольного изменения формы и цвета меток (рис.4).
    Примеры нестандартного дизайна меток обязательных полей
    Рис.4 Примеры нестандартного дизайна меток обязательных полей

    И, наконец, самое «крутой» способ пометки обязательных полей – подчеркивание заголовка (рис.5). Да-да, даже такие вещи иногда приходят в воспаленные креативом умы некоторых дизайнеров.
    Подчеркнутые заголовки - вершина “креативного” беспредела
    Рис.5 Подчеркнутые заголовки — вершина “креативного” беспредела

    Общепринято, что подчеркивание в веб-документах означает ссылку. А теперь давайте представим себе когнитивный диссонанс, возникающий у пользователя, который видит в форме подчеркнутые заголовки. Лично я бы начал щелкать по ним, чтобы узнать, что это за ссылки и отвлекся бы от процесса заполнения формы. И для меня, как и для многих пользователей, вовсе не очевидно, что поля с подчеркнутыми заголовками являются обязательными для заполнения.
    Интереса ради, мы провели небольшое узкое исследование в фокус-группе из 30 человек на тему меток обязательных полей получили вот какие результаты: 90% опрошенных опознают красную звёздочку, как символ обязательного поля, 73,33% понимают, что красный квадратик обозначает то же, что и звездочка (при этом 33,3% из них субъективно испытывают дискомфорт от такого обозначения), и лишь 6,67% опрошенных сразу распознали в подчеркивании указание на обязательность заполнения поля (остальные попытались нажать на «ссылку»)
    Результаты исследования юзабилити форм со стандартными и не очень метками обязательных полей
    Рис.6 Результаты исследования юзабилити форм со стандартными и не очень метками обязательных полей

    Слайдеры и скроллы в формах


    В данной части статьи пойдет речь о слайдерах и скроллах, являющихся не вспомогательной частью интерфейса, а непосредственным способом ввода информации в форму.
    Стандартный набор контролов, используемых для ввода информации ограничен: текстбоксы, радиобаттоны, чекбоксы и выпадающие списки. Неудивительно, что у дизайнеров и специалистов по интерфейсам возникает постоянный соблазн расширить этот набор. Одним из таких “расширений” стал слайдер — виртуальный аналог физических регуляторов, позволяющих плавно изменять значения различных параметров, от громкости до температуры нагрева плиты. Подобно реальному аналогу, слайдер предназначен для быстрого выбора приблизительного значения. Для таких целей, как настройка уровня громкости или перемещение по видеоролику, слайдеры подходят, как нельзя лучше. Но так ли они хороши при использовании в веб-формах?
    Чаще всего главное свойство “ручки-регулятора” — плавность настройки — в вебе просто не требуется, поэтому возникают слайдеры-мутанты с четко фиксированными значениями (рис.7)
    Нецелевое использование слайдеров в формах
    Рис.7 Нецелевое использование слайдеров в формах

    В случаях, когда пользователю требуется предоставить выбор из нескольких фиксированных значений, использовать выпадающие списки или радиобаттоны логичнее и уместнее. В частности, преимущества выпадающего списка перед слайдером заключаются в следующем:
    • Контрол типа listbox сам по себе говорит о том, что пользователь может выбрать лишь одно значение из предопределенного списка, тогда как слайдер подразумевает выбор из диапазона значений;
    • Для выбора значения в выпадающем списке пользователь может использовать на его усмотрение либо клавиатуру, либо мышку, тогда как со слайдером он ограничен, в большинстве случаев, лишь мышкой;
    • Пользователи, в целом, более привычны к выпадающим спискам, чем к слайдерам;
    • Листбокс более гибок и доступен для использования людьми с ограниченными возможностями;

    Можно долго спорить о преимуществах выпадающих списков перед слайдерами, однако сухие цифры говорят сами за себя: наблюдается четкое снижение конверсии при использовании непривычных контролов.
    Так, исследование, проведенное для крупнейшего австралийского портала о работе показало восьмипроцентный прирост конверсии при замене слайдера, позволяющего выбирать диапазон зарплат, на два листбокса (рис.8).
    Результаты замены “непонятного” слайдера на привычные выпадающие списки
    Рис.8 Результаты замены “непонятного” слайдера на привычные выпадающие списки

    Конверсией в данном исследовании являлось использование пользователем в качестве критерия подбора вакансии диапазона заработных плат.
    Руководство портала приняло решение использовать “зарплатный слайдер” на странице “тонкой” настройки параметров поиска, т.е. там, где необходимо уточнение полученных результатов (рис.9).
    Слайдер с успехом может использоваться в некритичных частях проекта
    Рис.9 Слайдер с успехом может использоваться в некритичных частях проекта

    На многих сайтах слайдеры используются, чтобы предложить пользователям возможность точного выбора в широком диапазоне значений, в то время, как пользователя больше удовлетворили бы несколько предустановленных решений.
    К примеру, слайдер на рис. 10 позволяет пользователю установить максимальную стоимость девушки за ночь с точностью до 10 долларов. Но так ли нужно пользователю задумываться над тем, ограничить ли свой поиск 740 долларами или все же разориться на 750? Намного предпочтительнее облегчить выбор при помощи чекбоксов с предустановленными диапазонами цен (скажем, от 0 до 50 долларов, от 50 до 100, от 100 до 200 и т.д.).
    Слайдер против группы чекбоксов: не заставляйте людей лишний раз думать
    Рис.10 Слайдер против группы чекбоксов: не заставляйте людей лишний раз думать

    На самом деле, слайдеры не так уж и плохи, просто использовать их нужно (как и любые другие контролы) не как попало, а только в действительно необходимых случаях.
    Примером правильного использования слайдера можно считать рис. 11, и вот почему:
    • В данном случае важно показать конечные значения диапазона, из которого пользователь может выбирать. С таким визуальным представлением данных слайдер справляется отлично;
    • Имеется возможность выбора точного значения;
    • Пользователь сразу же видит влияние своего выбора на изменение стоимости страховых взносов;
    • Если пользователь знает точную стоимость своей машины, он может сразу внести её в текстбокс, совмещенный со слайдером;
    • Сам по себе слайдер, как необычный элемент интерфейса, вносит разнообразие в заполнение скучной формы;

    Слайдер позволяет пользователю точно подобрать стоимость своего автомобиля
    Рис.11 Слайдер позволяет пользователю точно подобрать стоимость своего автомобиля

    Неочевидные контекстные подсказки


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

    Использование привычных иконок, скрывающих под собой контекстную помощь, конечно, уменьшает размеры формы и приводит ее к более “аккуратному” виду (рис. 13), однако заставляет пользователя совершить лишнее действие, на которое он не всегда пойдет до совершения ошибки (мы же не любим читать инструкции).
    Использование иконок для уменьшения формы
    Рис.13 Использование иконок для уменьшения формы

    Кроме того, не стоит забывать о людях, не использующих мышку при заполнении форм. Задумайтесь, станете ли вы нажимать на малюсенькую иконку помощи, когда вы зашли на сайт с айпада или телефона? А если пользователь привык при заполнении форм использовать только клавиатуру, то ему придется, в случае возникновения вопроса, тянуться к мышке, кликать по иконке, читать, возвращать фокус на поле ввода… Вы знаете, сколько пользователей устанет и бросит заполнение?

    Согласно проведенному нами исследованию с участием фокус-группы (60 человек), 23,33% пользователей не заканчивает заполнение сложной формы из-за полного отсутствия контекстной помощи и 13,33% бросает форму, если для получения подсказки требуется кликать по соответствующей иконке. При этом, субъективное недовольство отсутствием контекстной помощи выражает 63,33% респондентов, а необходимостью дополнительного клика по иконке помощи — 30% (рис.14)
    Вследствие неграмотного использования контекстной помощи теряется до 23% пользователей, и снижается лояльность у более, чем 60%
    Рис.14 Вследствие неграмотного использования контекстной помощи теряется до 23% пользователей, и снижается лояльность у более, чем 60%

    В том же случае, если обстоятельства вынуждают нас использовать иконки вместо явной контекстной подсказки, следует озаботиться соответствием этой иконки привычным стандартам.
    Общепринято, что помощь обозначается вопросительным знаком на синем фоне. Такая инфографика используется не только в веб-дизайне, но и в повседневной жизни, следовательно, у большинства пользователей уже давно выработалось “знание”: если что-то обозначено синим значком с вопросительным знаком, значит там можно получить помощь.
    Когда дизайнер принимает решение заменить стандартную иконку на что-то более креативное, к примеру, спасательный круг (рис. 15), то этим он создает дополнительные трудности для пользователя, что, в конечном итоге, снижает конверсию.
    Использование нестандартной инфографики для обозначения подсказки приводит к трудностям восприятия такой формы
    Рис.15 Использование нестандартной инфографики для обозначения подсказки приводит к трудностям восприятия такой формы

    Казалось бы, компромиссом могло бы служить использование всплывающего окошка с текстом помощи рядом с полем, однако и тут могут подстерегать проблемы:
    • Пользователи, не зная о том, что существует контекстная помощь, могут еще до заполнения формы начать обдумывать возникающие у них вопросы. А мы ведь не хотим, чтобы пользователи напрягались, правда?
    • В тех случаях, когда используются чекбоксы, радиобаттоны и другие контролы, кроме текстбоксов, пользователи увидят контекстную помощь только после выбора;
    • Всплывающие подсказки могут перекрывать часть ключевой информации;
    • Опять же, на мобильных платформах такое решение может быть очень неудобным для пользователя;

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

    Заключение


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

    Disclaimer: статья написана отнюдь не для того, чтобы «поучать» кого-либо. Главная цель — открытие дискуссии на такую тонкую тему, как создание удобных форм. Давайте учиться друг у друга делать мир лучше.
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама

    Комментарии 126

      +11
      интересные у вас всё же примеры)
        +26
        Грудь — специальная часть женщины

        [x]
          +3
          Попка — специально ориентированная часть женщины)
            +13
            написал жепку — ставь жепку!
              +7
              Вкладкой ошибся =)
            +1
            Ага, тариф «Хреновый» ((=
            0
            Хм. в целом всё разумно. Да, я конечно понимаю, что нестандартные элементы — это чаще всего зло. Но в данном случае имеет место ещё и, может, утомляемость того же дизайнера в создании однотипных элементов. Ну например есть ты 5 лет подряд в каждом проекте рисуешь одни и те же элементы — хочется убить всех и себя, но только перестать рисовать их, сделать их по-другому.
            Более того, как отделить прогресс, от неудобных элементов. Да, понятно что многие решения проверены годами и являются наиболее оптимальными. Но как в таком случае отделить непривычное и незнакомое пользователям, но потенциально более оптимальное и эффективное решение, имеющее более высокую степень удобства, чем старые, проверенные годами методы.
              0
              Для небольших компаний выгодно занимать выжидающую позицию. Ожидать, пока крупные введут новые интерфейсы, время, пока люди привыкнут, а затем уже без особых проблем можно вводить и у себя. Слайдеров раньше тоже практически не было, а сейчас ничего, пользуются где нужно.
                0
                Замечательный пример — нестандартная многофункциональная кнопка от Google в его GMail-е. Мне она сразу понравилась, хоть и не совсем привычная для вэба.

                Думаю, со временем она появится во многих местах (уже почти придумал, где я могу использовать похожую в своем проекте)
                +4
                Утомляемость дизайнера не оправдание) Когда дизайнер перестает мыслить здраво, он перестает быть дизайнером. И даже к однотипным элементам в каждом отдельном случае нужен свой подход, т.к. условия их использования в рамках разных проектов постоянно меняются. Их можно бесконечно кантовать, перемещать, выделять и обособлять, в пределах стандартной модели разумеется. А изобретать толковый велосипед, дело достаточно трудное, поэтому заниматься этим без особой необходимости и достаточного запаса времени чаще вредно, чем полезно :)
                0
                Часто сталкиваюсь с такой ситуацией, хоть и проектирую GUI для Desktop — приложений. Вот вроде бы хочется вот эту красивую «рюшечку», но понимаю, что она красива для большинства, но на сколько удобно для большинства я не могу сказать. Часто приходится следовать традициям и удобству, тянуть корни интерфейсов большинства часто используемых в повседневной жизне программ, потому что люди уже интуитивно привыкли к ним.
                Спасибо за такое исследование, однозначно в закладки, и хочется видеть побольше таких статей с таким конструктивным подходом.
                  0
                  так вы проектируете или «раскрашиваете»?
                    0
                    По возложенным на меня обязанностям, мне приходится и проектировать и реализовывать:). У нас все на всем любят экономить.
                      0
                      мда)
                  +1
                  «Цена за ночь» улыбнула
                    +2
                    It's OVER 200k!!!

                      +31


                      >кириллица запрещена

                      Вот жеж любят в русскоязычных странах что-то запрещать юзерам. Позитивные и вежливые мессиджи нужно делать. Например, «пожалуйста, только латинские символы». Тоже на конверсию влияет, между прочим.
                        +5
                        Абсолютно согласен. С точки зрения психолингвистики, запрещающие и отрицающие словесные конструкции вызывают подсознательное отторжение.
                          0
                          Имхо, еще не помешало бы вывести подсказки на отдельных строчках.
                            0
                            И добавить функцию «сгенерировать пароль»
                              0
                              и убрать поле пароль (высылать на почту, если конечно есть необходимость наличия почты/пароля)
                                +1
                                хм, даже меня иногда эта функция пугает. кому нужно, пользуются спец. ПО
                                0
                                Имхо, хорошо бы вывести подсказки на отдельных строчках. Вы же предыдущий коммент читали про «С точки зрения психолингвистики, запрещающие и отрицающие словесные конструкции вызывают подсознательное отторжение.» ;)
                                +1
                                Ну на всех по разному действует, в одной зарубежной гостинице на мостике над бассейном на разных языках написано «пожалуйста не прыгайте в бассейн с моста» и только на русском «прыгать с моста запрещено», видимо эмпирическим путем вывели что на нас такой запрет лучше действует:)
                                  +1
                                  особенности языка, в русском много не- и отрицаний.
                                    0
                                    Прыгал, прыгаю, и буду прыгать.
                                    Особо бесят также запреты снимать на мой фотоаппарат фото/видео в аквапарках.
                                  0
                                  А еще лучше сделать так, чтобы не пришлось вводить только латинские символы, это же пароль.
                                    +1
                                    Если разрешить одновременный ввод русских и латинских символов, то это, как минимум, приведет к резкому увеличению частоты использования функции «Напомнить пароль». Оно нужно? :)
                                      +4
                                      Последнее время предпочитаю считать, что пользователи в большинстве своем умнее скота. И излишняя забота может дать нежелательный эффект. Поэтому «детские» ограничения нужно все-таки стараться нивелировать. В разумных пределах конечно…

                                      Совсем недавно, стукнулся головой о стену из похожей «заботы», когда интернет-банкинг сказал, что мой пароль может быть длиной от 8 до 12 символов, и ни в коем случае не больше. Тоже наверно подумали, что волю дай — такого напридумывают… В итоге порвали мой шаблон, заставили напрягаться :)
                                        +5
                                        Это ещё что. Когда мне при регистрации на одном сервисе сказали, что у меня e-mail неправильный (буква-собака-домен), я КРАЙНЕ удивился. Правда, напрягаться не стал, просто закрыл страницу.
                                          0
                                          Я, когда сталкиваюсь с такими ограничениями на пароль, всегда вспоминаю Novell NetWare, с которой раньше работал. У них вместо термина Password использовался термин Passphrase — т.е. прямо вот так, натурально — не пароль, а фраза, пиши что хочешь, любой длины. Очень мне это нравилось.
                                          0
                                          Что-то не понял? А Вы руками функцию «Напомнить пароль» выполняете?
                                            +2
                                            Безусловно. Специально нанятые обезьянки сидят, генерят новые пароли и с извинениями отсылают клиентам.
                                              0
                                              Ну я так и не понял причины запрещать ввод пароля на любом языке? Обезьянки берут деньги за отправку писем?
                                                –1
                                                Использование более, чем одной раскладки в поле типа password значительно увеличивает количество ошибок при вводе пароля, т.к. по-умолчанию вводимые символы скрыты звездочками. Много ошибок -> раздражение пользователей -> потеря пользователей.
                                                Если хотите использовать несколько раскладок, тогда добавьте динамическую индикацию раскладки рядом с полем.
                                                Что же касается функции «Напомнить пароль», то каждый переход, не ведущий к бизнес-цели проекта — убыточен. Зачем самостоятельно создавать поле для размножения «паразитных» переходов. Нет, если цель состоит в том, чтобы показать страницу с напоминанием пароля как можно большему количеству пользователей, тогда это имеет смысл. Иначе — нет.
                                                  +3
                                                  >Использование более, чем одной раскладки в поле типа password значительно увеличивает количество ошибок при вводе пароля, т.к. >по-умолчанию вводимые символы скрыты звездочками. Много ошибок -> раздражение пользователей -> потеря пользователей.

                                                  Странная логика. Вы говорите о том что человек может забыть переключить раскладку? Ну так он это может забыть сделать в любом случае.

                                                  Интересно, а если у меня, как у обычного юзера, не гика, есть 2-3 пароля которые я ввожу на всех сайтах, а на вашем не могу, то это не вызовет раздражение пользователя и как следствие потерю клиента?

                                                  С точки зрения юзабилити нет ни каких оснований ограничивать пользователя в его правах. IMHO
                                                    +1
                                                    Вы придумываете лишние проблемы, вместо того, чтобы просто позволить пользователю вводить все, что ему захочется (не надо считать их идиотами, и тем более не надо их заставлять так себя чувствовать), не скрывать вводимое «звездочками» (см. регистрацию на imobilco.ru), и на крайний случай присылать введенный пароль на указанный ящик, когда он указывается.
                                                      +2
                                                      Руки чешутся топик об излишней заботе о пользователе написать.
                                                        0
                                                        Я бы почитал с удовольствием)
                                                        0
                                                        Согласен с тем, что скрывать пароль под звездочками — это издевательство над пользователем. Причем не обоснованное ничем. Пожалуй, соглашусь с Вами, что нужно позволить пользователю использовать такой пароль, какой ему нравится, это будет правильнее всего.
                                                          +2
                                                          Прятать пароль за звёздочками придумали для того, чтобы его не подсмотрел стоящий на спиной. Открывать его можно, но только в том случае, если пользователь явно указывает, что хочет видеть его в открытом виде. Оставлять поле ввода пароля открытым по умолчанию нельзя ни в коем случае. А то получится как с литресом: заходишь на главную, а там твой сохранённый пароль сияет в открытом виде.
                                            +1
                                            Стоп, «только латинские символы» — не то же самое, что «кириллица запрещена». Скорее всего имелось в виду латиница, цифры, подчеркивания и т.д.
                                            0
                                            Позабавила контекстная помощь в виде спасательного круга :)
                                              0
                                              Укорачивание форм, т.е. уменьшение количества заполняемых полей, приводит к тому, что накладываемые на поле лейблы становятся вполне удобными. Мы, проектируя интерфейс «Телентиды» долго спорили на эту тему и, в итоге, пришли к решению, что форма авторизации/регистрации (которые у нас состоят из двух полей — «Логин» и «Пароль») можно спокойно делать с overlayed лейблами.

                                              Жаль, что в статье не рассматривается замена стандартных селектов с небольшим количеством вариантов на псевдо-ссылки, работающие с помощью JS.

                                              P.S. Количество пользователей с выключенным JS, в процентном соотношении, очень близко к нулю, поэтому для таких посетителей разумнее делать уведомления с помощью noscript, нежели не использовать JS в формах.
                                                0
                                                * формы</strong авторизации и регистрации * — досадная опечатка
                                                  0
                                                  Да уж, давно ничего не писал на Хабре. Надеялся, что редактирование комментариев своих когда-нибудь введут, ан нет…
                                                    +3
                                                    Я не ноль — у меня NoScript включен по умолчанию на неизвестных сайтах.
                                                    Бывает лень вносить новый сайт в белый лист.
                                                      0
                                                      «Близко к нулю» != «ноль»
                                                      Я не говорю про абсолютное отсутствие поддержки работоспособности сайта без JS, но если у пользователя нет желания пользоваться каким-либо сайтом или сервисом — он уйдет, в независимости от того, включен ли у него JS. Обратная ситуация, когда люди выключают параноидальные браузерные плагины на нормальных сайтах без всплывающей рекламы и ненужных скриптов, довольно часто встречается.
                                                  +4
                                                  > Количество пользователей с выключенным JS, в процентном соотношении, очень близко к нулю, поэтому для таких посетителей разумнее делать уведомления с помощью noscript, нежели не использовать JS в формах.

                                                  Подавляющее большинство сайтов, работоспособность которых без js невозможна, даже до NOSCRIPT не снисходят, да отсохнут у их создателей руки, чтобы больше не писали.
                                                    0
                                                    завел для себя привычку очень давно. сайт делаю чтобы все без скриптов работало. потом где хочется сделать жаваскриптовые формы вешаю на линки remote=true и скриптами перехватываю. в итоге если включен js то будет с аяксом. если нет то просто переход на страницу. сайт не ломается.
                                                      0
                                                      Ни однин справочник о remote ничего не знает. Где почитать?
                                                        0
                                                        нигде. это просто в рельсах придумано. в xhtml вы можете в любой тег добавлять свои аттрибуты. ну и делаем a href='/bbb' remote='true' и в скриптах $('a[remote=true]').bind('click', function(){}) и т.д. все это работае в любом браузере.

                                                        з.ы. может ошибся с селектором. ща думать лень :)
                                                          0
                                                          ну и preventDefault не забыть вызвать чтобы переход по ссылке не прошел.
                                                            0
                                                            точнее не remote, а data-remote чтобы еще и валидно для html5 было
                                                              0
                                                              github.com/rails/jquery-ujs/blob/master/src/rails.js

                                                              вот тут реализация data-remote для a, form, input.
                                                          0
                                                          Это еще одна сторона проектирования интерфейса и последующего написания кода, так, чтобы если выключен JS все работало как надо, пусть не в том виде.
                                                        +1
                                                        На самом деле, все правильно, но есть одно «но». В нашей стране рядовой пользователь ГОРАЗДО глупее, и вполне очевидные вещи зачастую не работают. Мне приходится ежедневно сталкиваться с теми, кто вообще первый раз в жизни форму заполняет — так и то проблемы есть при условии, что форма у меня практически вылизана до блеска. И контекстные подсказки тебе, и поля большие, и сократил их до минимума — все мало :-)

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

                                                        В общем, к чему я… Мне кажется, в статье не хватает пункта «Знай свою аудиторию». Просто от этого, на мой взгляд, нужно отталкиваться в первую очередь при создании форм.
                                                          +1
                                                          В базовые обязанности проектировщика интерфейсов априори входит анализ ЦА. Без этого вообще никуда. А для пользователей с нулевым UX нужно дополнительно к текстовым пояснениям делать видеоинструкции по работе с формой.
                                                          К счастью, пользователей с полным отсутствием опыта достаточно мало, как минимум они прошли через одноклассников, мэйл.ру и другие крупные сайты. Вот от их интерфейсов и нужно отталкиваться в таких случаях.
                                                            0
                                                            Увы, «чайников» очень много :-(
                                                            Это становится явно, когда начинаешь работать не с Москвой/Питером, а со всей страной. Мне из таких жоп пишут, что в пору становиться учителем географии.
                                                              0
                                                              Не делайте пользователя виноватым в ваших собственных ошибках.
                                                                0
                                                                Вы настолько хорошо знакомы с моим опытом, что можете делать подобный выводы? Или просто сказать нечего больше?
                                                                  0
                                                                  Я сужу по вашему комментарию, и тут не в опыте дело совершенно.
                                                                    0
                                                                    Вы судите неправильно и поверхностно. И дело таки ж в опыте, просто он у всех разный.
                                                          +4
                                                          Со слайдерами, мне кажется, палка слегка перегнута. Это полезный и удобный элемент, просто нужно чувство меры.

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

                                                          Например:
                                                          1. Выберите цвет сумки: [черный, белый, красный, розовый] — слайдер неуместен
                                                          2. Выберите тариф: [базовый, премиум, супер] — слайдер неуместен
                                                          3. На какую сумму выбираем подарок? [100...100000 рублей] — слайдер в тему
                                                          4. Дисковоле пространство: [1..100 Гб] — слайдер в тему

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

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

                                                          А упомянутый случай с +8% к конверсии, возможно, объясняется косвенными факторами. В частности, нарисован тот слайдер довольно невнятно, промежуточные значения ощущаются очень плохо.
                                                            0
                                                            Безусловно, для перечисленных Вами ситуаций слайдер можно (и даже нужно) использовать. Но на то и голова дана дизайнеру-проектировщику, чтобы думать об уместности тех или иных контролов.

                                                            По поводу конверсии на австралийском сайте: то исследование проводил, к сожалению, не я, поэтому говорить что-то о дополнительных факторах, оказывающих влияние на конверсию, не могу. Возможно, дизайн, возможно еще что-то. Тут важен результат и решение руководства портала, принятое на основе этого результата. Кстати, в том исследовании использовалась неплохая такая выборка в 24000 человек.
                                                              +7
                                                              Яндекс.Маркет решил проблему просто: над слайдером разместил поля ввода:
                                                              slider
                                                                +3
                                                                У Маркета вообще хороший интерфейс, на который во многих случаях можно равняться.
                                                              +16
                                                              А когда вводишь всё правильно включая капчу, кроме одного поля, а потом тебя кидают взад и говорят — поле-то, мол, неправильно, а капчу надо второй раз ебаться вводить? пидоры!!!
                                                                0
                                                                Халтура и некомпетентность отталкивает клиентов не только в веб-разработке, но и в других сферах.
                                                                  +2
                                                                  Еще и поле пароля скидывают, особенно при регистрации. А его еще два раза вводить надо. Арррхххх
                                                                    +1
                                                                    каптча на большинстве ресурсов стоит не из-за того что надо, а потому что модно. вот и проблемы возникают.
                                                                    +1
                                                                    > На что вы обращаете внимание при виде женщины?

                                                                    В вашем примере два самых популрных варианта-то не учтены. За юзабилити — кол, даже варианта «другое» нет.
                                                                      0
                                                                      Лицо, а что еще?
                                                                        0
                                                                        А ещё человека иногда не по частям оценивают. Этот подход принято обозначать загадочным словом «фигура».
                                                                      0
                                                                      Кто бы написал статью о том, как канонічно реализовывать сложные форм в вебе — например, иерархического типа, с подформами и всё такое…
                                                                        0
                                                                        Делайте по типу десктопных приложений, не ошибетесь. Я имею в виду оконный интерфейс. На самом деле, нужно смотреть конкретную ситуацию, исследовать, проводить тестирования. Универсального решения для таких вещей нет и быть не может.
                                                                          0
                                                                          В том-то и дело, что не всегда получается перенести концепции из мира десктопных приложений на веб-формы… Вернее, можно, конечно — но это получится просто «десктопные формы на веб-странице», а я же больше имел в виду именно применение обычных веб-форм для редактирования сложных данных. Как-то так. А если ещё вспомнить про graceful degradation — вообще голова пухнет.
                                                                            0
                                                                            Для сложных форм стоит озаботится созданием нормального видеотуториала. Если у пользователя нет навыка пользования такой формой, создайте его сами.
                                                                            За graceful degradation гнаться рентабельно далеко не всегда. Зачастую, дешевле и эффективнее явно указать пользователю минимальные требования для работы с приложением. Хотя, повторюсь, все нужно решать в каждом конкретном случае, универсальных решений нет, увы…
                                                                          0
                                                                          Дайте пример такой формы пожалуйста.
                                                                            0
                                                                            Не делать такое вообще.
                                                                            Никто не любит сложные интерфейсы. Если в какой-дь монстроподобной системе, которую продают за сотни тысяч долларов, такое себе можно позволить, то в обычном вебе практически нельзя позволять себе делать такие формы. Либо надо предлагать действительно уникальный продукт/услугу.
                                                                            +1
                                                                            > Такое расположение заголовка поля приводит к тому, что люди, привыкшие с детства читать сверху вниз, видят сначала пустое текстовое поле, после чего они вынуждены искать дальше пояснение к нему, а затем вернуться обратно к пол

                                                                            Где вы такие ебанутые интерфейсы нашли
                                                                              0
                                                                              А между прочим такое часто видел я.
                                                                              0
                                                                              Статистические данные из космоса?.. Интересно было бы увидеть источник информации, условия эксперимента. Есть ощущение, что цифры сильно завышены для красного словца:

                                                                              > следствие неграмотного использования контекстной помощи теряется до 23% пользователей, и снижается лояльность у более, чем 60%
                                                                                –4
                                                                                Подписывать рисунки «Рис. N» и ставить на них ссылки в тексте — университетское занудство.
                                                                                  0
                                                                                  Странно наблюдать трендовость Хабра. С легкой подачки перевода статьи Smashing Magazine пошла череда «формочных» постов.
                                                                                  Тоже был с хостерами, Android, Ardulino, Lisp и пр.
                                                                                    0
                                                                                    Индукция происходит, вот и все :) Какая-то тема наводит на мысль, что неплохо было бы написать статью.
                                                                                      0
                                                                                      Не припомню статьи про лиспы в Smashing Magazine.
                                                                                      +4
                                                                                      как же достали те идиоты, которые тянут нас в суровый мрачный глупый мир средневекового мс-доса
                                                                                      идите лучше полоть картофель в колхоз, умники!
                                                                                      стандартизация интерфейса — это круто!
                                                                                      вин95 сделала гигантский шаг вперед в этом направлении
                                                                                      а вы своими дурацкими красивостями все возвращаете вспять
                                                                                      тупицы… все, кто поступает — тупицы
                                                                                      в школу им пора, или в университет
                                                                                      кстати, скины для приложений — идиотизм
                                                                                      только медиаплееры по историческим причинам имеют право иметь скин
                                                                                      остальные приложения (включая новомодные 1с 8.0 с кастомным заголовком) на скин права не имеют
                                                                                      надеюсь это прочитают ее создатели и устыдятся своей глупости беспросветной
                                                                                        –3
                                                                                        А мне нравится скин Google Chrome. Я даже поставил тему, которая окна в моем WinXP превратила в сплошные хромы))

                                                                                        По теме:
                                                                                        грамотные люди, оцените, пожалуйста, веб-форму при покупке ICQ-номера

                                                                                          0
                                                                                          Поля и кнопки в разброс по всему блоку. Мне было бы неудобно.
                                                                                            +5
                                                                                            Невыровненые поля — дикий ужас
                                                                                            Цветочки на фоне — блевотина
                                                                                            Сама форма — говно.
                                                                                              0
                                                                                              Ага, спасибо за обратную связь)
                                                                                              А если сделать label's над полями ввода будет лучше?
                                                                                                –1
                                                                                                заведите мерчанта лучше (просто кнопка купить без всяких там форм). и пользователем удобнее и вам.
                                                                                                  +1
                                                                                                  Как минимум нужно:
                                                                                                  1) Убрать жуткий фон
                                                                                                  2) Вместо «10 цифр без 8 и +7» просто под полем написать пример правильного номера, но с +7, иначе юзер может не врубиться. И на лету проверять правильность и предоставлять относительную свободу в формате ввода.
                                                                                                  3) "Ваш что-то там" писать не надо, это и коню ясно, а форму загромождает.
                                                                                                  4) Выровнять поля.
                                                                                                  5) У обязательных полей просто оставить звездочки.
                                                                                                  6) У контактной аськи написать «необязательно», юзеру пофиг что там желательно, если он не захочет указывать он не укажет ее, для него это все равно «необязательно»
                                                                                                  7) Убрать звездочку с примечание, иначе юзер может может побежать глазами от поля со звездочкой к примечанию.

                                                                                                  Короче форму надо переделать.
                                                                                                    +4
                                                                                                    Оооо, спасибо большое!
                                                                                                    Поработали над ошибками, как сейчас?



                                                                                                    Ваш бла-бла решили оставить, так как не всегда клиенты спецы, которые могут даже KDE2 под FreeBSD пропатчить и иногда вводили, например, в поле Ваш текущий ICQ-номер — покупаемый номер.
                                                                                                      +1
                                                                                                      Конверсия изменилась? Уже 11 дней прошло, первые робкие выводы уже можно делать.
                                                                                                        +1
                                                                                                        Стали заказывать больше, но и увеличился процент не оплативших счет :( Такое ощущение, что людям нравится заполнять форму, но реально они не хотят покупать :)

                                                                                                        P.S. на наших микромасштабах вряд ли можно какие-то выводы делать)
                                                                                                          +1
                                                                                                          Фраза «стали заказывать больше» здесь ключевая :-)
                                                                                                          Осталось понять, почему заполняют, но не оплачивают и вообще всё отлично.
                                                                                                  0
                                                                                                  Артемий, залогинтесь.
                                                                                                0
                                                                                                Даже медиаплеер на имеет права на скин. Имхо.
                                                                                                Но вот Chromium со своим стандартным скином выглядит очень хорошо. Может быть потому что уже привык.
                                                                                                  0
                                                                                                  Используйте интерфейсы на ncurses и проблема скинов отпадёт сама собой. Они ещё и непостижимым образом стандартизировались. Сравните, например, ncmpcpp и rtorrent.
                                                                                                    0
                                                                                                    Нет. Я за то, чтобы интерфейсы софта были в рамках гайдлайнов Qt.
                                                                                                    Но терпимость к скину хромиума и сам не могу объяснить))
                                                                                                    Насчет веба, то один из самых приятных мне интерфейсов у 2ip.ru
                                                                                                0
                                                                                                статья полезна тем людям которые уже что-то понимают в UX… для новичка, который не может осмыслить все это, статья просто испортит специалиста (пусть и начинающего)

                                                                                                к каждому пункту следует добавить монолог из старой рекламы — "-Ты не любишь кошек? -Ты просто не умеешь их готовить."

                                                                                                слайдеры… рассказываете про все слайдеры что можно, а в примере показываете то что вызывает отвращение у большинства. почему не было примера с того же gandi.net/hosting? или еще откуда-нибудь?

                                                                                                обязательные поля… это сейчас привычно звездочки. но с приходом это изменится (браузеры которые понимают required уже сейчас обводят инпут красной рамочкой)

                                                                                                формы с заголовками внутри… тоже спорная вещь. надо уметь готовить :) естественно если форма из 50-ти textarea в которые надо написать по 250+ символов, то вы правы. но если login/password то это верное решение. даже в вашем вариант из примера (3 поля) вполне оправдано использование данных вещей.


                                                                                                  0
                                                                                                  disclaimer я не зря написал. Претендую на истинность только в области чисел, полученных в ходе собственных исследований (и то, выборка в 60 человек не очень репрезентативна, конечно же). Все остальное — очень тонкие вещи, зависящие от множества факторов и контекста использования. Именно поэтому и хочется дискуссии, хочется обсуждать, сравнивать с чужим опытом.
                                                                                                    0
                                                                                                    60 человек это очень мало. это как меня спросить :) я вот посмотрел на форму где лейблы под полями и запомнил что к чему там (сам я не люблю так делать по нескольким причинам — не люблю форматирование по правой стороне и лейблы не на одной строке с полями). но все таки беглого взгляда на форму хватило чтобы не испугаться и, тем более, не запутаться.
                                                                                                  0
                                                                                                  Много воды вокруг очевидных вещей. Но автор прав — мудаку-дизайнеру на заметку. Только мудаки-дизайнеры такие статьи не читают. Им лень. Они заняты «дизайном» веб-форм.
                                                                                                    0
                                                                                                    Знаете, если на маленький вопросик на айпаде нажимать неудобно, то навести мышкой, чтобы увидеть всплывающую подсказку на нем просто невозможно.
                                                                                                      –1
                                                                                                      Мне нравится эта форма:

                                                                                                      Заголовок для поля ввода внутри самого поля

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


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

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

                                                                                                      Случай, где не поленились это не минус.

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

                                                                                                      Шрифт заполненной формы и незаполненной отличается контрастом. Кому сложно отличить? Далее, если не заполнены обязательные поля, то данное поле мигнет красным, например.

                                                                                                      # Невозможно использовать такой дизайн форм в случаях, когда заголовки полей состоят более, чем из 2-3 слов;

                                                                                                      Это понятно, что если заголовок не влазит в форму. Но такое редко бывает.

                                                                                                      JS, используемый для реализации данного дизайна необоснованно усложняет код фронтенда;

                                                                                                      А как это влияет на юзабилити?

                                                                                                        0
                                                                                                        > Шрифт заполненной формы и незаполненной отличается контрастом. Кому сложно отличить?

                                                                                                        Если у клиента нет js — то не отличается.
                                                                                                          0
                                                                                                          P.S. Количество пользователей с выключенным JS, в процентном соотношении, очень близко к нулю, поэтому для таких посетителей разумнее делать уведомления с помощью noscript, нежели не использовать JS в формах.


                                                                                                          Вот про js-обсуждали
                                                                                                          habrahabr.ru/blogs/ui_design_and_usability/112083/#comment_3583525
                                                                                                          • НЛО прилетело и опубликовало эту надпись здесь
                                                                                                            0
                                                                                                            то данное поле мигнет красным


                                                                                                            «Мигать» красным в этом мире должны только сирены спец.служб и пожарной тревоги
                                                                                                          • НЛО прилетело и опубликовало эту надпись здесь
                                                                                                              +2

                                                                                                              Зачем тут (справа) чекбоксы? Тогда уж радиобаттон наверное.
                                                                                                                0
                                                                                                                Чтобы иметь возможность расширить диапазон.
                                                                                                                  0
                                                                                                                  Этак можно несколько разорванных диапазонов выбрать.
                                                                                                                    +1
                                                                                                                    «Ты так говоришь, будто это что-то плохое»
                                                                                                                    Простите, не удержался.
                                                                                                                      0
                                                                                                                      Нет, но это противоречит функционалу, предоставляемому слайдером.
                                                                                                                      0
                                                                                                                      Если нельзя выбирать несколько диапазонов, то можно на js, например, реализовать авточек всех предыдущих чекбоксов.
                                                                                                                        0
                                                                                                                        Ну можно и зубы удалять сами знаете через что…
                                                                                                                        Вот же показали уже хороший вариант, зачем изобретать велосипеды?
                                                                                                                  +3
                                                                                                                  Насчёт layered текстбоксов — ИМХО, заголовок надо писать рядом, а в качестве содержимого — серым цветом ПРИМЕР заполнения.
                                                                                                                    +2
                                                                                                                    Ну и само собой проставлять их динамически самим js-ом. Т.о. если у человека не будет включен js — то их просто не будет.
                                                                                                                      0
                                                                                                                      На мой взгляд, эта очень хорошая идея во многих случаях станет единственно возможным компромиссом между минимализмом и информативностью.
                                                                                                                      • НЛО прилетело и опубликовало эту надпись здесь
                                                                                                                    0
                                                                                                                    Все охуенно и по теме.

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

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

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

                                                                                                                      Самое читаемое