Идеальные формы
В свете довольно бурной дискуссии с людьми по поводу Идеальной регистрации я решил продолжить серию записей в разделе «Идеалы». Формат написания остался такой же как и в предыдущей заметке — а именно сборником «невредных советов». Обязательно воспользуйтесь ими если не хотите что-бы люди входящие на ваш сайт пугались и убегали в ужасе. Иногда эти советы будут дополняться не мение полезными изображениями, ведь текстовая информация вкупе с графической закрепляется на порядок лучше, чем просто текстовая. За сим — оставлю вас наедине с моими текстами.
Идеальная регистрация, это конечно хорошо, но помимо регистрации есть еще огромная масса вещей которые используют формы. И наверняка нижеперечисленные советы помогут начинающим сайтостроителям.
Для начала давайте определимся с понятием «формы». Ведь обсуждать мы разумеется будем не девушек и их пышные формы, а кое-что другое. А жаль.
Форма — это некий список взаимосвязанных элементов, которые используются для сбора, управления и отправки информации на сервер и обратно. Для полноты понимания данного определения проведите аналогии с заполнением форм на собеседовании, или оплаты счетов. Думаю аналогии ясны и понимание от аналогий не отстает.
Давайте же закрепим на примерах. Самыми явными и частоиспользуемыми формами являются:
1. Формы поиска.
2. Формы регистрации.
3. Формы авторизации (входа на сайт).
С определением мы окончили, давайте приступим к моделированию ситуации.
Давайте представим, что вам дали задание спланировать замечательное поле поиска не оглядываясь на уже известные поисковики (потом вы в любом случае придете к решению, которое используется большинством поисковиков, но это дело десятое). Давайте же приступим — это интересно.
Правильно расставляйте поля
Шаг 1. Первое задание
Итак: у нас есть по-умолчанию два стандартных поля, без которых поиск не может быть поиском. Это поле для ввода поисковой фразы и кнопка.
Не похоже на поиск — не правда ли? Продолжим.
Для начала нам нужно что-то написать на кнопке — не так ли?
А давайте напишем «тыыыщь» и всем будет красиво? Нет? Не будет? Точно, не будет. Может «искать»? Забудьте о приказательной форме надписей на кнопках. Не приказывайте пользователю, даже таким образом — он ведь не верный пес, которому вы кинули палку. Давайте напишем «Поиск». Думаю вполне уместный и распространенный компромисс.
Едем дальше. Мы уже знаем, что элементы интерфейса приводящие к следующему шагу должны находится справа, следовательно кнопку мы тоже должны поместить туда, ведь выдача результатов это несомненно следующий шаг в поиске.
Уже более похоже на поисковую форму, не так ли? Но возникает проблема — слишком много пространства для одного поля и кнопки, следовательно нужно экономить пространство. Сразу напрашивается разместить кнопку прямо напротив поля. Это и делаем. Вот только кнопку нужно располагать не как-то так, а именно вблизи поля, в которое вводится запрос. Именно этим нехитрым решением мы достигаем того, что 2 совершенно разных элемента воспринимаются как единое целое. Часто подобное описывается в книгах по юзабилити, это один из самых главных штампов, который следует запомнить. Можете взглянуть теорию близости для этого.
Группируйте поля
Очень важный пункт, который просто нужно запомнить. Возьмем для примера среднестатистическую регистрацию на сайте (да, опять — очень наглядный пример).
Исходные данные: есть 6 полей (Логин, пароль, подтверждение пароля, e-mail, страна, и город), кнопка, и чекбокс для согласия с правилами.
Вот их вид в ряд. Вполне себе удобоваримо, но можно лучше.
Давайте улучшим тем, что сгруппируем поля по исполняемым функциям.
Таким нехитрым действием мы разделили регистрацию на 5 независимых друг от друга зон: зона логина, зона пароля, зона e-mail, зона местонахождения, и вспомогательная зона.
Расставляйте кнопки правильно
В данном пункте рассказывать особо нечего, всё я уже рассказал. Пройдите по ссылке.
Общие положения
Просто сгруппированный список из нескольких пунктов посвященных разным элементам форм.
Поле
- Если нужно разместить подсказку к полю — пропишите эту подсказку непосредственно в нем, и убирайте её при клике на поле.
- Если полей много — группируйте их, очень поможет в плане удобства.
- Если полей мало — располагайте их наиболее близко к друг другу, чтобы глаз пользователя их не «потерял».
- Если есть такая возможность, и это не мешает концепции дизайна — не оставляйте поля по умолчанию пустыми
- Если это поле каптчи — ставьте картинку справа от поля. Не под, не над, а именно справа. Экономьте пользовательский моск.
- Если есть подпись к полю — располагайте его в непосредственной близости именно от этого поля. Еще лучше — группируйте или выделяйте как-либо визуально.
- Делайте пояснительные надписи к полям, либо проясняйте для чего это поле непосредственно внутри него.
Кнопка
- Если кнопка относится к полю — располагайте кнопку справа от поля. Вы уже знаете что нужно экономить и место и мозг пользователя.
- Если кнопка относится к чему-либо — располагайте её в непосредственной близости к этому «чему-то», ведь никому не нравится рыться на странице в поисках.
- Если кнопка относится к группе полей — располагайте её к низу от группы, но в непосредственной близости от полей, чтобы сделать визуальную группировку.
- Если кнопка переносит пользователя на следующий шаг — располагайте её справа.
- Если это кнопка поиска — не пишите там всякую чушь.
- Если эта кнопка приводит к удалению, отмене и другим подобным действиям — располагайте её слева, напротив кнопки перехода к следующему шагу. Кнопку удаления же располагайте на видном месте, но так, чтобы она не сразу бросалась в глаза — пользователь не должен нажать её по ошибке.
- Не употребляйте повелительное наклонение в надписях на кнопках. Пользователь не ваша любимая собачка, апорт не возьмет.
- Если действие нельзя повторить — делайте кнопку после нажатия неактивной.
Выпадающий список
- Если список большой — сделайте группировку элементов.
- Не выдавайте список раскрытым, кому нужно — тот нажмет сам.
- Если это список товаров — лучше разделите его на несколько списков.
Общие рекомендации для всех типов
- Не мешайте разные типы форм, лучше создайте несколько визуальных групп из одинаковых (кроме случаев, когда уже произошла группировка по другим признакам)
- Не применяйте к формам какое-то особенное оформление. Наверняка можно найти компромисс с вашим дизайном, и интегрировать стандартный вид поля удобно и красиво. Польза от этого такова: пользователь уже привык к определенному виду форм, и не захочет изменять своим привычкам ради вашего сервиса.
- Не изменяйте стандартный шрифт на кнопках, не применяйте полужирность, или курсив, вообще и «для красоты» в том числе. Такой вид самодеятельности больше раздражает, чем помогает пользователю. Сужу по своему примеру.
Вышеперечисленные суждения на нобелевскую премию не претендуют, но определенно полезны для начинающих, и не очень.
Сила контраста
Тут бы мне хотелось немного отступить от повествования, и просто перечислить вам некоторое количество скриншотов регистраций на сервисах, и потом обсудить ошибки на них в комментариях.
1. Memori
2. Live4Fun
3. Imhonet
4. Отдыхали
5. БобрДобр
Пишите свои мнения и методики улучшения в комментариях. Буду рад.
Телефон: +38 (091) 314-60-04,
E-mail и Jabber: dezmaster@gmail.com,
Skype: dezmaster,
icq: 486914
Первый нах.
Всё высказанное является правильным. С точки зрения обычного сёрвера инета всё должно способствовать восприятию («Основы построения эрготехнических человекомашинных систем»)
ЗЫ. Совет по поводу капчи.
В своё время я писал систему ОCR, поэтому могу сказать, что для изображения капчи контрастность надо минимизировать до такой степени, чтобы стандартный юзверь мог её распознать — чем меньше контрастность тем меньше шансов у бота её взломать. Исключения составляют капчи, где символы изображены друг к другу. (imhonet и memory), другие же 2 капчи из статью в принципе ломаются просто. Но это относиться больше к программистам, чем к дизайнерам :).
g1uck, каптча — это отдельный разговор, она в статье вообще вскользь упоминается :)
эммммм
а вы о чём тут?!
Говорим мы тут о всяких вещах, которые помогают использованию сайта.
а в соотв. с каким правилом нельзя класть капчу НАД полем ввода ее содержимого?
«Если это поле каптчи — ставьте картинку справа от поля. Не под, не над, а именно справа. Экономьте пользовательский моск.»
разве это не естественное движение:
— прочесть код
— пойти дальше, т.е. скользнуть вниз (логика формы ведь вертикальная, верно?)
— вбить код
?
СЕ, тут уже зависит от того, где располагаются подписи к полям. У меня они располагались сверху, и каптча бы там просто убила внимание к подписи — т.е. процентов эдак 10 людей мы бы потеряли на таком шаге.
Вот тут, скажем.
В первом блоке - воспринимается как единый элемент.
Во втором — из-за разницы в длинах и подписи над обоими элементами воспринимается как несколько разных элементов.
В третьем — из-за того, что разницу в длинах я намеренно убрал — воспринимается как единый элемент. Так тоже удобно.
[...] применить группировку по цвету, которую я описывал в заметке о формах. Еще, как вариант, можно (да и нужно) главную кнопку [...]
[...] разграничение блоков, которые я мимоходом описал в заметке о идеальных формах, и собираюсь в ближайшее время занятся продолжением [...]
Мне понравились на я.ру. Много форм, но они собраны по группам, и от этого работать с ними удобнее.
nicholass, взглянул на я.ру не нашел там форм. Где найти? :)
Возможно имелось ввиду beta.ya.ru )
Витовт, если быть совсем уж точным — то wow.ya.ru — но я там не нашел обилия форм...
[...] такое форма мы уже уяснили в этой заметке, и довольно хорошо разобрались с их внешним видом, их [...]
7. Не употребляйте повелительное наклонение в надписях на кнопках. Пользователь не ваша любимая собачка, апорт не возьмет.
То, что пользователь не собачка я согласен. Но с тем, что нельзя употреблять повелительное наклонение полностью не согласен.
Дело в том, что текст, написанный на кнопке не предназначен пользователю, как инструкция к применению. Этот текст служит командой для программы (интернет приложения). Поэтому слово «Поиск» на кнопке означает, что после нажатия на эту кнопку пользователь перейдёт к странице поиска, а не к результатам поиска, то есть тут кнопка работает как ссылка.
А если написать «Искать». Тогда пользователь понимает, что нажимая на данную кнопку, он даёт программе команду к действию.
Посмотри на своём сайте на кнопку «Комментировать». В каком наклонении стоит глагол?
То же самое касается текста для документации к программе. Лучше будет: «Нажмите первую ссылку, что бы попасть на страницу 2». Чем «Что бы попасть на страницу 2 необходимо нажать первую ссылку». В данном случае вы побуждаете пользователя к действию — к решению возникшей у него проблемы.
4. Если кнопка переносит пользователя на следующий шаг — располагайте её справа.
Тогда почему же у тебя кнопка «Комментировать» переносит нас в прошлое?
8. Если действие нельзя повторить — делайте кнопку после нажатия неактивной.
Как аналог: можно показать анимацию передачи данных.
Списки:
2. Не выдавайте список раскрытым, кому нужно — тот нажмет сам.
Тогда это уже не список.
А ещё хорошо, что бы был выставлен элемент по умолчанию в списке.
> Посмотри на своём сайте на кнопку «Комментировать». В каком наклонении стоит глагол?
Типичное стремление — «А вот у тебя на сайте...». Стоит задуматься хотя-бы о том, что я ни разу не программист ;)
Предупреждая вопрос — «А почему ты тогда не наймешь его?» — я это уже сделал, спасибо.
А я и не говорю, что бы ты был программистом или нанял его. Просто подумать почему написанно так. И что бы изменить програмистом быть не обязательно. И вообще комментарии не по теме.
xes, мы всё-таки находимся у меня в блоге, верно? Тут уже я решаю о том, что по теме, а что нет.
> А я и не говорю, что бы ты был программистом или нанял его
Я вообще не помню чтобы мы когда-то переходили на «ты».
Ну да ладно. ТЫ мне указал на недостаток в движке блога (или в его дизайне). Поэтому я счел ответить. Отвечаю:
Просто я очень не люблю любимую стратегию многих: прийти в блог, и начать критиковать его, прекрасно зная, что не это (далеко не это) является профессиональными навыками автора.
Обобщая: дождемся МОЕГО сверстанного дизайна (сверстанного и напрограммированного не мной ес-но), и уже будем критиковать, договорились?
Хорошо. Извини за переход на ТЫ. Давай на ВЫ.
И давай поговорим всё же о том как писать и как делать.
А не о вордпресном движке.
Хорошо.
Скажу по-правде, я уже давно пересмотрел некоторые взгляды касательно надписей на кнопках.
Мое мнение теперь таково: надпись в приказательном склонении имет место лишь в том случае, если не имеет под собой негативной психологической подоплеки.
Скажем: «Искать» — имеет такую подоплеку, из-за популярности команды для собак. В частности меня жутко раздражает Aport со своей одноименной командой.
«Комментировать» — не имеет в себе такого явно плохого фона, поэтому его употребление в принципе оправдано.
По поводу правосторонности кнопок: это скорее зависит от специфики проекта, но в большинстве случаев правосторонняя кнопка по привычке нажимается лучше, и чаще, в сравнении с левосторонней. Хотя иногда я ставлю эксперименты с целью проверки правильности этой мысли.
Как я уже говорил: мои мысли могут меняться. Статья ведь не нова.
По привычке потому, что «смотрите в свою ОС».
Но команда даётся не для человека, а для программы.
И ещё Ярослав. Наше личное мнение может меняться, а от этого страдают пользователи. Поэтому мы должны делать, то что проверено пользователями, а не наши предположения и предпочтения.
Но это ИМХО.
Также можно написать не «Искать», а «Найти» — это тоже глагол повелительного наклонения.
Александр, от чего конкретно страдают конечные пользователи? От того, что я попросил не употреблять склонение к действию на кнопках? :) Глупо — тут не от чего страдать.
> то что проверено пользователями, а не наши предположения и предпочтения.
это личный опыт каждого — и я описываю свой. В блоге я не ставлю за цель создать библию юзабилиста — я общаюсь с людьми, спрашиваю мнения, описываю свои ощущения, предпочтения — помоему это вполне нормально.
Я пишу в своем блоге свои мысли, которые естественно могут меняться, но не в корне. Скажем так — время вносит свои корректировки (не фатальные для изначальных мыслей), к сожалению от этого никуда не убежать, и не скрыться.
Я в каждой следующей заметке развиваю свои предыдущие мысли.
Согласен.
Применительно к словам «Поиск», «Искать» и «Найти», — следует рассмотреть эти слова с точки зрения действия...
«Поиск» и «Искать» характеризуют процесс, который растягивается во времени и неизвестно как долго можно искать, а вот «Найти» — направлен на результат. Последний — более оптимистичнее. Некоторые добавляют к слову искать «!» (что было в ранней версии Яндекса), но, на мой взгляд, это излишне.
Что касается слова «Комментировать», то это короткое повелительное наклонение настраивает собеседника на «выстрел», сказать, как отрезать. А в особо горячей дискуссии — на плевок.
На сайте, где автор устанавливает собственные правила хорошего тона, желательнее использовать фразу «Написать комментарий», а лучше — «Добавить комментарий», психологически как бы присоединяясь к сказанному.
> Если нужно разместить подсказку к полю — пропишите эту подсказку непосредственно в нем, и убирайте её при клике на поле.
Не согласен. Пользователь может отвлечься от совершаемой операции и забыть посыл, вложенный в подсказку.
Но все равно — спасибо. Очень многим людям не хватает выборки, имеющейся в этой статье. Must read.
Мне понравился скриншот формы регистрации с сайта «Memori»... Написано «Введите число, изображенное на картинке». А на картинке пять букв и одно число... =)