10 правил хороших форм
10 принципов хорошего дизайна от Дитера Рамса
10 правил хороших форм - Сергей Кулинкович
Это допустимо только для очень коротких форм например, формы авторизации. Если пользователю предоставляется возможность совершать дополнительные действия, например загружать файлы, соответствующие элементы управления должны быть менее выразительными:. Interest Region Site and Account FAQ Email IM Info. Кто многим увлекается, многое обретает Привет всем, кто заглянул в мой журнал! Буду рада видеть Вас среди своих друзей Чтобы добиться этого, достаточно следовать изложенным правилам. Поэтому все элементы управления должны наследовать характерные черты, знакомые пользователю. Если пользователю предоставляется возможность совершать дополнительные действия, например загружать файлы, соответствующие элементы управления должны быть менее выразительными: Recent Entries Archive Reading Tags Memories Profile. Most Popular Tags illustrator - 8 uses life - 47 uses web-дизайн - 4 uses ананас - 3 uses архетипы - 3 uses баклажаны - 4 uses бисер - 5 uses брокколи - 3 uses выпечка - 6 uses вязание крючком - 3 uses гаджеты - 8 uses гелиус - 3 uses грибы - 7 uses гусь - 3 uses журнал - 13 uses заготовки - 7 uses закуска - 4 uses икра - 3 uses киев - 21 uses книги - 7 uses контент-маркетинг - 4 uses копирайтинг - 6 uses крабовые палочки - 6 uses красная рыба - 6 uses кулинарное - uses курица - 2 uses магнолии - 4 uses микроволновка - 4 uses мужское - 6 uses полезное - 60 uses полимерная глина - 24 uses психология отношений - 5 uses птица - 5 uses разное - 76 uses репост - 5 uses ромны - 2 uses рукоделие - 37 uses рулеты - 3 uses салат - 20 uses сельдь - 3 uses суп - 3 uses суфле - 3 uses сыр - 9 uses творог - 4 uses тесто - 19 uses торт - 10 uses феофания - 3 uses фото - 6 uses цвет - 4 uses шоколад - 3 uses. Style Credit Base style: Stepping Stones by branchandroot Theme: At The Hop by Musyc. Expand Cut Tags No cut tags. Powered by Dreamwidth Studios. Interest Region Site and Account FAQ Email IM Info Reload page in style:
Только полноправные пользователи могут оставлять комментарии. TM Feed Хабрахабр Geektimes Тостер Мой круг Фрилансим. Хабрахабр Публикации Пользователи Хабы Компании Песочница. Большинство людей воспринимают мир с помощью глаз, поэтому визуальный дизайн имеет огромное значение при создании фронтендов веб-приложений. В данной статье я хотел бы рассказать о типичных ошибках при дизайне веб-форм, а также поделиться некоторыми секретами создания правильного интерфейса. Достоверность данных обеспечивается как исследованиями проводимыми нашей группой, так и исследованиями сторонних чаще всего западных специалистов по UX. В последнее время тренды в дизайне как веб-приложений в целом, так и форм в частности, стремятся к максимальному украшательству: Такое бездумное украшательство приводит к тому, что внимание пользователя отвлекается от основной цели использования веб-приложения, пользователь начинает фиксироваться не на заполнении формы, а на изучении её дизайна. В конечном итоге, форма так и не заполняется и мы не получаем нашей драгоценной конверсии. Итак, давайте рассмотрим несколько модных трендов в дизайне веб-форм: Это означает, что пользователь должен прочесть заголовок до того, как перейти к полю ввода. Для сайтов, на которых контент читается сверху вниз слева направо, label логично располагать либо над полем ввода, либо непосредственно слева от него. На практике же дизайнеры часто ставят заголовок где угодно, но только не в естественном для него месте. Яркий пример — label расположен ниже поля ввода рис. Получается, что пользователь при заполнении формы делает два шага вперед, затем один шаг назад, после этого, переходя к следующему полю и его заголовку, делает еще три шага вперед, затем шаг назад и т. Казалось бы — мелочь, однако продолжительная скачка туда-сюда довольно быстро утомляет. Очевидно, что пользователь затрачивает на заполнение такой нестандартной формы намного больше усилий, быстрее истощается внимание и, как следствие, увеличивается количество отказов от заполнения. Когда пользователь начинает вводить данные в поле, заголовок исчезает. И если пользователь на что-либо отвлечется, вернувшись затем к форме, он не сразу сможет понять, что за поле он заполняет; В особо трудных случаях, когда разработчики поленились использовать js для автоматического исчезновения заголовка при клике в поле, пользователю придется сделать множество дополнительных умственных и физических действий для удаления этого заголовка. То же самое справедливо для существующего, но неработающего яваскрипта; Поля с заголовками внутри выглядят, как заполненные, поэтому велика вероятность того, что пользователь пропустит какое-либо из полей; В том случае, если форма полностью заполнена, у пользователя не остается возможности проверить верность заполнения полей, соотнося их с заголовками; Пропадает возможность напрямую распечатать форму, так как когда отсутствуют заголовки, становится непонятно, что за поля заполнены; Невозможно использовать такой дизайн форм в случаях, когда заголовки полей состоят более, чем из слов; JS, используемый для реализации данного дизайна необоснованно усложняет код фронтенда; Так почему же, несмотря на столь явные недостатки, дизайнеры продолжают использовать эту технику при разработке фронтендов? Некоторые специалисты аргументируют это тем, что веб-форма приобретает более аккуратный вид. С этим утверждением можно поспорить. Да, форма занимает меньше места, однако существенно теряет при этом функциональность. Это все равно, что выкидывать из холодильника продукты просто для того, чтобы полки в нем выглядели аккуратнее. Дизайнерам стоит подавлять в себе страсть к минимализму, если он наносит ущерб юзабилити. Наконец, самое издевательское использование заголовков — заголовки с анимацией. Вы никогда не видели заголовок, который в обычном состоянии находится внутри поля, а при клике на поле медленно переползает влево или вправо от него? Я видел , это ужасно и с точки зрения юзабилити и с точки зрения дизайна. Во-первых, место при данном способе не экономится, во-вторых, анимация сильно отвлекает пользователя и мы сталкиваемся с кучей проблем: Возможно, это не самый лучший образец инфографики, однако за годы использования на множестве сайтов он стал привычным для пользователей. Кроме того, в звёздочке используется т. Тем не менее, существует определенная группа дизайнеров, которые стараются внести свои коррективы и в этот элемент информационного дизайна. Безусловно, есть люди, которые не знают, что красная звездочка означает обязательность заполнения. Но ведь намного больше людей привыкли к такому соглашению и их вводят в ступор отклонения от него в виде произвольного изменения формы и цвета меток рис. Да-да, даже такие вещи иногда приходят в воспаленные креативом умы некоторых дизайнеров. А теперь давайте представим себе когнитивный диссонанс, возникающий у пользователя, который видит в форме подчеркнутые заголовки. Лично я бы начал щелкать по ним, чтобы узнать, что это за ссылки и отвлекся бы от процесса заполнения формы. И для меня, как и для многих пользователей, вовсе не очевидно, что поля с подчеркнутыми заголовками являются обязательными для заполнения. Интереса ради, мы провели небольшое узкое исследование в фокус-группе из 30 человек на тему меток обязательных полей получили вот какие результаты: Стандартный набор контролов, используемых для ввода информации ограничен: Неудивительно, что у дизайнеров и специалистов по интерфейсам возникает постоянный соблазн расширить этот набор. Подобно реальному аналогу, слайдер предназначен для быстрого выбора приблизительного значения. Для таких целей, как настройка уровня громкости или перемещение по видеоролику, слайдеры подходят, как нельзя лучше. Но так ли они хороши при использовании в веб-формах? В частности, преимущества выпадающего списка перед слайдером заключаются в следующем: Контрол типа listbox сам по себе говорит о том, что пользователь может выбрать лишь одно значение из предопределенного списка, тогда как слайдер подразумевает выбор из диапазона значений; Для выбора значения в выпадающем списке пользователь может использовать на его усмотрение либо клавиатуру, либо мышку, тогда как со слайдером он ограничен, в большинстве случаев, лишь мышкой; Пользователи, в целом, более привычны к выпадающим спискам, чем к слайдерам; Листбокс более гибок и доступен для использования людьми с ограниченными возможностями; Можно долго спорить о преимуществах выпадающих списков перед слайдерами, однако сухие цифры говорят сами за себя: Так, исследование, проведенное для крупнейшего австралийского портала о работе показало восьмипроцентный прирост конверсии при замене слайдера, позволяющего выбирать диапазон зарплат, на два листбокса рис. К примеру, слайдер на рис. Но так ли нужно пользователю задумываться над тем, ограничить ли свой поиск долларами или все же разориться на ? Намного предпочтительнее облегчить выбор при помощи чекбоксов с предустановленными диапазонами цен скажем, от 0 до 50 долларов, от 50 до , от до и т. Примером правильного использования слайдера можно считать рис. В данном случае важно показать конечные значения диапазона, из которого пользователь может выбирать. С таким визуальным представлением данных слайдер справляется отлично; Имеется возможность выбора точного значения; Пользователь сразу же видит влияние своего выбора на изменение стоимости страховых взносов; Если пользователь знает точную стоимость своей машины, он может сразу внести её в текстбокс, совмещенный со слайдером; Сам по себе слайдер, как необычный элемент интерфейса, вносит разнообразие в заполнение скучной формы; Рис. Примером может служить описание допустимого формата пароля ниже поля пасс-бокса. Однако, в сети можно найти кучу форм, в которых контекстная помощь либо скрыта за иконками со значком вопроса, либо вообще отсутствует. Это происходит, в частности, вследствие отсутствия у специалистов по интерфейсам системных знаний в области юзабилити. Но речь сейчас не о безграмотных дизайнерах. На самом деле, предоставление пользователю контекстной помощи позволяет значительно упростить заполнение форм, и, следовательно, повысить конверсию и лояльность. Не нужно заставлять пользователя прилагать лишние усилия в виде кликов по иконкам для получения необходимой ему информации. Своевременное явное пояснение пользователю того, что ему следует использовать пароль длиной более 5 символов рис. Задумайтесь, станете ли вы нажимать на малюсенькую иконку помощи, когда вы зашли на сайт с айпада или телефона? А если пользователь привык при заполнении форм использовать только клавиатуру, то ему придется, в случае возникновения вопроса, тянуться к мышке, кликать по иконке, читать, возвращать фокус на поле ввода… Вы знаете, сколько пользователей устанет и бросит заполнение? Общепринято, что помощь обозначается вопросительным знаком на синем фоне. Когда дизайнер принимает решение заменить стандартную иконку на что-то более креативное, к примеру, спасательный круг рис. Пользователи, не зная о том, что существует контекстная помощь, могут еще до заполнения формы начать обдумывать возникающие у них вопросы. А мы ведь не хотим, чтобы пользователи напрягались, правда? В тех случаях, когда используются чекбоксы, радиобаттоны и другие контролы, кроме текстбоксов, пользователи увидят контекстную помощь только после выбора; Всплывающие подсказки могут перекрывать часть ключевой информации; Опять же, на мобильных платформах такое решение может быть очень неудобным для пользователя; Лишь в одном только случае имеет смысл скрывать контекстную помощь под иконку или не проектировать ее вообще — когда ожидаемый процент пользователей, которым может потребоваться такая помощь в данной конкретной веб-форме низок настолько, что внедрение такой функции в интерфейс становится нерентабельным. В случаях, когда контекстная помощь необходима, но её добавление в явном виде затруднительно, можно использовать тултипы — всплывающие подсказки рис. Наиболее удачная область их применения — чекбоксы и радиобаттоны, то есть те контролы, в которых всплывающее окно не помешает вводу информации и не будет отвлекать пользователя. При этом, информировать пользователя о доступности контекстной помощи можно при помощи оформления заголовка контрола пунктирным подчеркиванием, что является привычным стандартом для такого рода ссылок. Однако, не следует забывать о том, что пользователи зашедшие на сайт со смартфона или планшета, будут лишены возможности увидеть такие подсказки, если они появляются при наведении курсора на ссылку. Добавление каких либо новых элементов, а также изменение дизайна и функций стандартных должно проводиться осмотрительно. Специалист по интерфейсам при разработке форм обязан руководствоваться не собственными предпочтениями, а удобством пользователя и экономической рациональностью. Каждый внедряемый элемент формы, каждый используемый не на своем месте контрол ведет к созданию неудобств для пользователя, снижению конверсии и, в конечном итоге, к потере прибыли компанией. Дьявол — он ведь в мелочах, помните об этом. Главная цель — открытие дискуссии на такую тонкую тему, как создание удобных форм. Давайте учиться друг у друга делать мир лучше. Дизайн игр 12 авторов , 49 публикаций. Usability авторов , публикация. Добавить в закладки Владимир Мухин vnmukhin карма. Сутки Неделя Месяц Pathfinder: Грудь — специальная часть женщины [x]. Да, я конечно понимаю, что нестандартные элементы — это чаще всего зло. Но в данном случае имеет место ещё и, может, утомляемость того же дизайнера в создании однотипных элементов. Ну например есть ты 5 лет подряд в каждом проекте рисуешь одни и те же элементы — хочется убить всех и себя, но только перестать рисовать их, сделать их по-другому. Более того, как отделить прогресс, от неудобных элементов. Да, понятно что многие решения проверены годами и являются наиболее оптимальными. Но как в таком случае отделить непривычное и незнакомое пользователям, но потенциально более оптимальное и эффективное решение, имеющее более высокую степень удобства, чем старые, проверенные годами методы. Для небольших компаний выгодно занимать выжидающую позицию. Ожидать, пока крупные введут новые интерфейсы, время, пока люди привыкнут, а затем уже без особых проблем можно вводить и у себя. Слайдеров раньше тоже практически не было, а сейчас ничего, пользуются где нужно. Замечательный пример — нестандартная многофункциональная кнопка от Google в его GMail-е. Мне она сразу понравилась, хоть и не совсем привычная для вэба. Думаю, со временем она появится во многих местах уже почти придумал, где я могу использовать похожую в своем проекте. Утомляемость дизайнера не оправдание Когда дизайнер перестает мыслить здраво, он перестает быть дизайнером. И даже к однотипным элементам в каждом отдельном случае нужен свой подход, так как условия их использования в рамках разных проектов постоянно меняются. Их можно бесконечно кантовать, перемещать, выделять и обособлять, в пределах стандартной модели разумеется. А изобретать толковый велосипед, дело достаточно трудное, поэтому заниматься этим без особой необходимости и достаточного запаса времени чаще вредно, чем полезно: Часто сталкиваюсь с такой ситуацией, хоть и проектирую GUI для Desktop — приложений. Часто приходится следовать традициям и удобству, тянуть корни интерфейсов большинства часто используемых в повседневной жизне программ, потому что люди уже интуитивно привыкли к ним. Спасибо за такое исследование, однозначно в закладки, и хочется видеть побольше таких статей с таким конструктивным подходом. По возложенным на меня обязанностям, мне приходится и проектировать и реализовывать: У нас все на всем любят экономить. Позитивные и вежливые мессиджи нужно делать. Тоже на конверсию влияет, между прочим. С точки зрения психолингвистики, запрещающие и отрицающие словесные конструкции вызывают подсознательное отторжение. Имхо, еще не помешало бы вывести подсказки на отдельных строчках. Имхо, хорошо бы вывести подсказки на отдельных строчках. Прыгал, прыгаю, и буду прыгать. А еще лучше сделать так, чтобы не пришлось вводить только латинские символы, это же пароль. Последнее время предпочитаю считать, что пользователи в большинстве своем умнее скота. И излишняя забота может дать нежелательный эффект. Тоже наверно подумали, что волю дай — такого напридумывают… В итоге порвали мой шаблон, заставили напрягаться: Когда мне при регистрации на одном сервисе сказали, что у меня e-mail неправильный буква-собака-домен , я КРАЙНЕ удивился. Правда, напрягаться не стал, просто закрыл страницу. Я, когда сталкиваюсь с такими ограничениями на пароль, всегда вспоминаю Novell NetWare, с которой раньше работал. У них вместо термина Password использовался термин Passphrase — то есть прямо вот так, натурально — не пароль, а фраза, пиши что хочешь, любой длины. Очень мне это нравилось. Специально нанятые обезьянки сидят, генерят новые пароли и с извинениями отсылают клиентам. Ну я так и не понял причины запрещать ввод пароля на любом языке? Обезьянки берут деньги за отправку писем? Использование более, чем одной раскладки в поле типа password значительно увеличивает количество ошибок при вводе пароля, так как по-умолчанию вводимые символы скрыты звездочками. Если хотите использовать несколько раскладок, тогда добавьте динамическую индикацию раскладки рядом с полем. Нет, если цель состоит в том, чтобы показать страницу с напоминанием пароля как можно большему количеству пользователей, тогда это имеет смысл. Вы говорите о том что человек может забыть переключить раскладку? Ну так он это может забыть сделать в любом случае. Интересно, а если у меня, как у обычного юзера, не гика, есть пароля которые я ввожу на всех сайтах, а на вашем не могу, то это не вызовет раздражение пользователя и как следствие потерю клиента? С точки зрения юзабилити нет ни каких оснований ограничивать пользователя в его правах. Руки чешутся топик об излишней заботе о пользователе написать. Согласен с тем, что скрывать пароль под звездочками — это издевательство над пользователем. Причем не обоснованное ничем. Пожалуй, соглашусь с Вами, что нужно позволить пользователю использовать такой пароль, какой ему нравится, это будет правильнее всего. Прятать пароль за звёздочками придумали для того, чтобы его не подсмотрел стоящий на спиной. Открывать его можно, но только в том случае, если пользователь явно указывает, что хочет видеть его в открытом виде. Оставлять поле ввода пароля открытым по умолчанию нельзя ни в коем случае. А то получится как с литресом: Скорее всего имелось в виду латиница, цифры, подчеркивания и т. Позабавила контекстная помощь в виде спасательного круга: Укорачивание форм, то есть уменьшение количества заполняемых полей, приводит к тому, что накладываемые на поле лейблы становятся вполне удобными. Жаль, что в статье не рассматривается замена стандартных селектов с небольшим количеством вариантов на псевдо-ссылки, работающие с помощью JS. Количество пользователей с выключенным JS, в процентном соотношении, очень близко к нулю, поэтому для таких посетителей разумнее делать уведомления с помощью noscript , нежели не использовать JS в формах. Да уж, давно ничего не писал на Хабре. Надеялся, что редактирование комментариев своих когда-нибудь введут, ан нет…. Я не ноль — у меня NoScript включен по умолчанию на неизвестных сайтах. Бывает лень вносить новый сайт в белый лист. Обратная ситуация, когда люди выключают параноидальные браузерные плагины на нормальных сайтах без всплывающей рекламы и ненужных скриптов, довольно часто встречается. Подавляющее большинство сайтов, работоспособность которых без js невозможна, даже до NOSCRIPT не снисходят, да отсохнут у их создателей руки, чтобы больше не писали. Ни однин справочник о remote ничего не знает. Это еще одна сторона проектирования интерфейса и последующего написания кода, так, чтобы если выключен JS все работало как надо, пусть не в том виде. В нашей стране рядовой пользователь ГОРАЗДО глупее, и вполне очевидные вещи зачастую не работают. Мне приходится ежедневно сталкиваться с теми, кто вообще первый раз в жизни форму заполняет — так и то проблемы есть при условии, что форма у меня практически вылизана до блеска. И контекстные подсказки тебе, и поля большие, и сократил их до минимума — все мало: У меня, к примеру, по статистике, вообще полтора человека в день заходит с мобильных устройств, поэтому я пока кладу на это дело. Хотя на телефонах на андроиде или айфонах все должно работать — на своем проверял когда-то. Просто от этого, на мой взгляд, нужно отталкиваться в первую очередь при создании форм. В базовые обязанности проектировщика интерфейсов априори входит анализ ЦА. Без этого вообще никуда. А для пользователей с нулевым UX нужно дополнительно к текстовым пояснениям делать видеоинструкции по работе с формой. К счастью, пользователей с полным отсутствием опыта достаточно мало, как минимум они прошли через одноклассников, мэйл. Вот от их интерфейсов и нужно отталкиваться в таких случаях. Мне из таких жоп пишут, что в пору становиться учителем географии. Не делайте пользователя виноватым в ваших собственных ошибках. Вы настолько хорошо знакомы с моим опытом, что можете делать подобный выводы? Или просто сказать нечего больше? Я сужу по вашему комментарию, и тут не в опыте дело совершенно. Вы судите неправильно и поверхностно. И дело таки ж в опыте, просто он у всех разный. Со слайдерами, мне кажется, палка слегка перегнута. Это полезный и удобный элемент, просто нужно чувство меры. На какую сумму выбираем подарок? Обычно там память, диск, процессор нужно выбирать минимум из десятка значений. Представить себе такое поле чекбоксов просто страшно. Выпадающие списки тоже не очень удобны, так как не видно пределы. Речь именно о калькуляторах, когда человек хочет оценить конкретно свои затраты — тарифы сами по себе, конечно, должны быть в таблице. Правда, бывают ещё специфические особенности предметной области. В частности, нарисован тот слайдер довольно невнятно, промежуточные значения ощущаются очень плохо. Безусловно, для перечисленных Вами ситуаций слайдер можно и даже нужно использовать. Но на то и голова дана дизайнеру-проектировщику, чтобы думать об уместности тех или иных контролов. По поводу конверсии на австралийском сайте: Возможно, дизайн, возможно еще что-то. Тут важен результат и решение руководства портала, принятое на основе этого результата. Кстати, в том исследовании использовалась неплохая такая выборка в человек. Маркет решил проблему просто: У Маркета вообще хороший интерфейс, на который во многих случаях можно равняться. Халтура и некомпетентность отталкивает клиентов не только в веб-разработке, но и в других сферах. Еще и поле пароля скидывают, особенно при регистрации. А его еще два раза вводить надо. В вашем примере два самых популрных варианта-то не учтены. А ещё человека иногда не по частям оценивают. Делайте по типу десктопных приложений, не ошибетесь. Я имею в виду оконный интерфейс. На самом деле, нужно смотреть конкретную ситуацию, исследовать, проводить тестирования. Универсального решения для таких вещей нет и быть не может. А если ещё вспомнить про graceful degradation — вообще голова пухнет. Для сложных форм стоит озаботится созданием нормального видеотуториала. Если у пользователя нет навыка пользования такой формой, создайте его сами. За graceful degradation гнаться рентабельно далеко не всегда. Зачастую, дешевле и эффективнее явно указать пользователю минимальные требования для работы с приложением. Хотя, повторюсь, все нужно решать в каждом конкретном случае, универсальных решений нет, увы…. Не делать такое вообще. Никто не любит сложные интерфейсы. Если в какой-дь монстроподобной системе, которую продают за сотни тысяч долларов, такое себе можно позволить, то в обычном вебе практически нельзя позволять себе делать такие формы. Статистические данные из космоса?.. Интересно было бы увидеть источник информации, условия эксперимента. Есть ощущение, что цифры сильно завышены для красного словца: Странно наблюдать трендовость Хабра. Тоже был с хостерами, Android, Ardulino, Lisp и пр. Индукция происходит, вот и все: Какая-то тема наводит на мысль, что неплохо было бы написать статью. А мне нравится скин Google Chrome. Я даже поставил тему, которая окна в моем WinXP превратила в сплошные хромы По теме: Поля и кнопки в разброс по всему блоку. Мне было бы неудобно. Невыровненые поля — дикий ужас Цветочки на фоне — блевотина Сама форма — говно. И на лету проверять правильность и предоставлять относительную свободу в формате ввода. Короче форму надо переделать. Поработали над ошибками, как сейчас? Ваш бла-бла решили оставить, так как не всегда клиенты спецы, которые могут даже KDE2 под FreeBSD пропатчить и иногда вводили, например, в поле Ваш текущий ICQ-номер — покупаемый номер. Уже 11 дней прошло, первые робкие выводы уже можно делать. Стали заказывать больше, но и увеличился процент не оплативших счет: Такое ощущение, что людям нравится заполнять форму, но реально они не хотят покупать: Даже медиаплеер на имеет права на скин. Но вот Chromium со своим стандартным скином выглядит очень хорошо. Может быть потому что уже привык. Используйте интерфейсы на ncurses и проблема скинов отпадёт сама собой. Они ещё и непостижимым образом стандартизировались. Сравните, например, ncmpcpp и rtorrent. Я за то, чтобы интерфейсы софта были в рамках гайдлайнов Qt. Но терпимость к скину хромиума и сам не могу объяснить Насчет веба, то один из самых приятных мне интерфейсов у 2ip. Претендую на истинность только в области чисел, полученных в ходе собственных исследований и то, выборка в 60 человек не очень репрезентативна, конечно же. Все остальное — очень тонкие вещи, зависящие от множества факторов и контекста использования. Именно поэтому и хочется дискуссии, хочется обсуждать, сравнивать с чужим опытом. Много воды вокруг очевидных вещей. Но автор прав — мудаку-дизайнеру на заметку. Только мудаки-дизайнеры такие статьи не читают. Знаете, если на маленький вопросик на айпаде нажимать неудобно, то навести мышкой, чтобы увидеть всплывающую подсказку на нем просто невозможно. Мне нравится эта форма: Заголовок для поля ввода внутри самого поля По поводу минусов: И если пользователь на что-либо отвлечется, вернувшись затем к форме, он не сразу сможет понять, что за поле он заполняет; Во-первых, часто ли вас отвлекают, когда вы заполняете формы? Заполнение формы минутное дело, скорее всего вначале заполните, потом отвлечетесь. Во-вторых, пусть даже отвлекли, неужели вы уже забыли, какую форму начали заполнять? В особо трудных случаях, когда разработчики поленились использовать js для автоматического исчезновения заголовка Случай, где не поленились это не минус. Поля с заголовками внутри выглядят, как заполненные, поэтому велика вероятность того, что пользователь пропустит какое-либо из полей; Шрифт заполненной формы и незаполненной отличается контрастом. Далее, если не заполнены обязательные поля, то данное поле мигнет красным, например. Невозможно использовать такой дизайн форм в случаях, когда заголовки полей состоят более, чем из слов; Это понятно, что если заголовок не влазит в форму. Но такое редко бывает. JS, используемый для реализации данного дизайна необоснованно усложняет код фронтенда; А как это влияет на юзабилити? Если у клиента нет js — то не отличается. Количество пользователей с выключенным JS, в процентном соотношении, очень близко к нулю, поэтому для таких посетителей разумнее делать уведомления с помощью noscript, нежели не использовать JS в формах. Вот про js-обсуждали habrahabr. НЛО прилетело и опубликовало эту надпись здесь. Зачем тут справа чекбоксы? Тогда уж радиобаттон наверное. Нет, но это противоречит функционалу, предоставляемому слайдером. Если нельзя выбирать несколько диапазонов, то можно на js, например, реализовать авточек всех предыдущих чекбоксов. Ну можно и зубы удалять сами знаете через что… Вот же показали уже хороший вариант , зачем изобретать велосипеды? Насчёт layered текстбоксов — ИМХО, заголовок надо писать рядом, а в качестве содержимого — серым цветом ПРИМЕР заполнения. Ну и само собой проставлять их динамически самим js-ом. На мой взгляд, эта очень хорошая идея во многих случаях станет единственно возможным компромиссом между минимализмом и информативностью. Все охуенно и по теме. Бесят формы, где кликаешь на поле, а потом думаешь, что же туда вводить. Интересно, а нет противоречия между первой частью, где говорится и объясняется почему делать метки под строкой ввода неправильно, и последующей, где показано размещение контекстной помощи под строкой ввода? Ведь суть одно и тоже? Метки лучше разделять запятой. Сейчас Вчера Неделя Как накрутить рейтинг на Хабре и уйти незамеченным 32k Первая российская материнская плата массового сегмента 26,6k Интересные публикации Хабрахабр Geektimes. Запуск Java классов и JAR-ов не по учебнику. Критическая уязвимость механизма аутентификации BIND позволяет похищать и изменять DNS-записи серверов. Во льдах Плавучего Континента: CSS и iOS Safari. Новый подход к кэшированию процессора GT. Стабильность нейтрона в атомном ядре GT. Разделы Публикации Хабы Компании Пользователи Песочница. Информация О сайте Правила Помощь Соглашение Конфиденциальность. Услуги Реклама Тарифы Контент Семинары.
История развития компьютерной графики кратко
Укладка воздушным способом
Где регистрируется трудовая книжка
Новости в кадастровой деятельности
Сколько международных кубков выиграл милан