Подсказки к полям
Почти каждый из нас вполне себе представить, зачем нужны подсказки в случае огромных массивов данных. Многие могут помыслить о подсказках во время толкания речи. Подсказки есть в учебниках, мануалах, исходниках (неважно – код это, или дизайн).
Далеко не каждые разработчики могут себе представить ситуацию, когда подсказки должны быть на сайте, а когда их тут быть вообще не должно. Что они тут забыли-то?
Что я подразумеваю под «подсказками»? Не много, ни мало – подсказки. Для того, чтобы их использовать, писать, читать , совершенно не обязательно быть мастеровитым суфлером, оратором, и т.д., и т.п.
Эта статья будет разделена на несколько логических частей – для дизайнеров, для разработчиков и для обычных пользователей, которые считают подсказки откровенным трешем и «нафигаонотамнужно?» элементами. Причем считают они так до того, как ошибутся в вводе данных.
Вот только, когда (реальный случай!) подсказки были убраны с формы регистрации, и освободилось немного свободного пространства, под названием whitespace, на сайте очень сильно уменьшилась конвертеризация пользователей анонимных в их зарегистрированных собратьев. Почему? Это и постараемся сегодня выяснить.
Нафигаонотамнужно?
Подсказки очень важны с точки зрения удобства хотя бы потому, что они не заставляют пользователя искать способы связи с администраторами сайта, у которых и без этого немало дел. Вот только известно, что люди обращаются к подсказкам только тогда, когда у них что-либо не вышло сделать, а не, скажем, перед заполнением какого-то поля. Посмотрят лишь перед готовым воплем, «Какого хрена тебе нужно тупая железяка?!», и слава богу, что «перед», а никак не «после». Хотя не исключено, да…
Какая наша задача?
Задач несколько, и они разношерстны по результату.
- Сделать так, чтобы пользователь обращал внимание на подсказки до возмущенных воплей. Это главная задача – избежать ненужных криков. Как обратить внимание? Показывать конкретную подсказку, для конкретного поля, и только во время заполнения оного. Чем обращает на себя внимание? Динамикой, красивой и грамотной. Можно применять некоторые плашки, фоны (см. первый рисунок). Рамку же лучше не применять отдельно от фона, да и с фоном её, опять же, лучше не применять. Линии сильно «загрязняют» дизайн и ухудшают восприятие «на глаз».
- Оформить подсказку таким образом, чтобы она не выбивалась из дизайна, и в то же время привлекала к себе внимание. Это несложно, достаточно проявить толику сочувствия к дизайнеру, если дизайн делали не вы. Если же это ваш дизайн, то проблем возникнуть не должно.
- Подчеркнуть то, что подсказка динамически меняется для каждого конкретного поля. В обратном случае мы получим еще более запутанного монстра, чем тот, который был в начале. Опять же – используйте плашки, чтобы подчеркнуть то, что подсказка относится к конкретному полю, и ни к чему другому. Для этого достаточно объединить единым фоном, и приблизить подсказку, для того, чтобы они воспринимались как единый объект, а не как два разных.
- Уменьшить «загрязненность» страницы. Для этого все подсказки должны быть динамическими и показываться только при заполнении поля. В купе с предыдущим пунктом мы получим хороший инструмент воздействия на подсознания пользователя, да и привлечем внимание цветом и динамикой.
- В случае неверного ввода данных подчеркнуть, что они не соответствуют подсказке. Тут всё довольно просто – нужно указать пользователю тот факт, что из-за того, что он не воспользовался подсказкой, его не пропустит валидация при окончании заполнения. Причем подчеркнуть этот факт нужно во время непосредственного ввода данных в поле.
- Подчеркнуть, что всё введено верно. Аналогично предыдущему пункту.
Что получим?
Явно увеличится конвертеризация простых пользователей в полезных, с помощью всего нескольких действий – проверено. Увеличим лояльность будущих клиентов или зарегистрированных пользователей путем удовлетворения их потребностей в хорошем визуальном оформлении и отсутствии лишнего.
Тем временем
1. Юра Гугнин размышляет о бизнесе и его системе.
2. Сергей Чаботько освещает новости Байнета.
3. Футуриус пробует себя в роли небезызвестного Дарвина.
4. Миша Квакин пишет о рейтингах и своём отношении к ним.
Телефон: +38 (091) 314-60-04,
E-mail и Jabber: dezmaster@gmail.com,
Skype: dezmaster,
icq: 486914
А я уже давно воспринимаю как данность подсказки на формах.
Кстати, совет для следующего поста — освятить регистрацию в буржуйских социалках. Я потестил facebook и myspace — был в плохом шоке 8)
Данность это хорошо, нужно бы, чтобы еще и «правильность», и «удобность» :)
Неа, не хочу больше о регистрации пока писать :) как-нибудь потом освещу этот вопрос.
У яху сделано технически не плохо, но по своей информативности они убогие, как мой п-ц.
У гугла они тоже как-то странно появляются.
Можно нескромный вопрос? «Как мой писец»? ))
Да, как-то так всё и должно быть :-)
Только вот на рисунках не показан вопрос обязательности заполнения (традиционное *) — такие пометки на мой нескромной взгляд должны присутствовать постоянно.
А речь-то идет не о «правильности» полей, а о подсказках к ним :) Поэтому обязательность заполнения тут не при чем.
(строго говоря «звёздочки» это тоже подсказки, но кажется) я вас понял
P.S. ОБМ, древовидность комментариев это такой дар, но почему-то не все им пользуются, даже компромисным двухуровневым
подсказки конечно хорошо, но когда они напротив каждого поля, да еще и все вместе — это перебор, теряется чувство прекрасного. на скринах у тебя вроде вариант с появлением коммента, когда находишься на поле- это очень удобно и красиво
Вот именно поэтому я и пропагандирую такой вид подсказок — динамический, для отдельных полей своя.
Имелось введу подсказки по заполнению:
Например:
Поле «Ник», и подсказка «Ник должен содержать от 4 до 20 символов».
PS: Что есть «ОБМ»?
Не пользуются потому, что для того, чтобы устроить это на вордпрессе нужно плясать с бубном вокруг движка и плагинов...
Он самый
осталось дело за малым — предложить вариант своего красивого решения этой задачи :) Наверно применять javascript было бы чрезмерным. Можно или CSS или ajax воспользоваться.
В картинках к статье у меня уже предложен вариант, а вот реализовать это технически — не ко мне :)
Впервые слышу подобную фразу :)
Ярослав, почему вы отправили в небытие следующий пост? Вы не ответили на вопросы заданные читателями, так нельзя. Порядочные авторы так не поступают.
Я вам верю. Но я моложе вас, и все остроты в вашу сторону потому, что вы позволяете себе не следить за своими мыслями, вы редактор сайта и вы не должны позволять, что бы вас можно было «зацепить». Для чего публиковать какие-то фразы? Это PR ход с целью завлечь в спор поситителей и поднять популярность сайта? Нет, это неправда. Если вы чему-то пытаетесь научить остальных, то промахи с вашей стороны непозволительны.
Если говорить про то что вы оставили мой комментарий, то я отвечу вам: «Если бы его удалили, то мое мнение о вас бы преуменьшилось на несколько порядков».
На вашем месте я был бы рад что есть кто-то, кто способен трезво оценить работу и обоснованно составить критику. Весьма сомнительно, что кроме меня вам кто нибудь прямо скажет где вы облажались.
Надеюсь что вы воспримите мои слова так, как я хотел что бы вы их услышали. Только непредвзятая оценка поситителя.
Также прошу удалить два последних комментария, поскольку предназначаются они для вас, да и нестоит засорять пост лишней информацией.
«так нельзя»
«Порядочные авторы так не поступают»
«вы позволяете себе не следить за своими мыслями»
«вы не должны позволять...»
«промахи с вашей стороны непозволительны...»
Нередко такие люди встречаются — сначала навешают ярлыков, расскажут что _другим_ можно/что нельзя, кто что должен, причём даже без какой-либо аргументации («все мне должны!»), а в конце приговаривают «ну я же вам только добра желаю, куда же вы убегаете...». Думаете подобная приписка перечеркнёт два килобайта *censored* что вы *censored* ранее? Максимум это успокоит вас самого (хотя, подозреваю, вам больше и не нужно).
zencd, нередко встречаются люди которые стараются во всем поддержать автора, во всем с ним соглашаются и берегут его словно он в этом нуждается. Вы позволяете себе меня отчитывать, замечу безоснованно, в отличие от меня. Я для красного словца не бросил ни одной фразы, только при случае и при необходимой мне ошибке оппонента. Также мне странно почему ВЫ защищаете автора и почему безтактно встреваете в наш диалог. Вы не уважаете автора этого проекта и вам самому не хватает признания?
zencd нередко со мной спорит, Максим, он хороший собеседник. Но понимаете-ли, Вы перегнули палку когда начали откровенно наезжать на меня, ставить условия «как и что делать НУЖНО» — никакому автору не понравится такая «критика». К обоснованной критике я отношусь вполне лояльно и стараюсь отвечать критикам в меру своих сил.
И вообще — друзья, давайте свернем эту дискуссию, и продолжим обсуждать по сабжу, тем более что новая заметка не за горами :)
Хозяин барин. Но мне искренне жаль, что вы не решились согласиться не с одним моим замечанием. Быть может вы прочитали мои заметки не с тем настроением, с которым писал их я. Ни в одной из них я не позволял себе указывать. Но это только мой недочет — я не смог донести свою мысль до читателя. Вероятно zencd пишет более простым языком, которым не владею я.
Буду изредка навещать вас, но со своим мнением впредь останусь наедине, дабы не смущать народ и не портить дружескую атмосферу, которая сложилась у вас на сайте.
[...] Подсказки к полям Почти каждый из нас вполне себе представить, зачем нужны подсказки в случае огромных массивов данных. Многие могут помыслить о подсказках во время толкания речи. Подсказки есть в учебниках, мануалах, исходниках (неважно – код это, или дизайн). Далеко не каждые разработчики могут себе представить ситуацию, когда подсказки должны быть на сайте, а когда их тут быть вообще не должно. Что они тут забыли-то? [...]
Подсказки не всегда надо прятать ;-)
В общем, в будущем буду уточнять о каких подсказках идет речь :)
[...] перева́риваемых поисковика́ми, а также о правильных подсказках для форм на сайте, чтобы идиоты-пользователи заполняли их правильно. И [...]
Мне больше всего нравятся подсказки в виде буквы «i», при наведении мышки на которую, всплывает информативное окошко