Хочу прочитать некоторый ликбез по построению полей на форме ввода, а также рассмотреть некоторые ошибки.
Ликбез (повторяем пройденное в детском саду)
Сверху — пример простой формы (фрагмент). Она хорошо отражает два главных принципа:
-
Поле должно быть достаточной длины, чтобы поместился контент — это самое важно, аксиома. Недостаток длины полей ведет к ошибкам ввода. Но это и так все знают.
-
Поле должно по возможности быть не длиннее, чем нужно. Если поле содержит точно определенное количество символов, то логично сделать его именно такой длины (не забыть про разные шрифты, браузеры и некоторый запас). Это не обязательное требование, но желательное. Конечно, бывает некрасиво, когда длина полей скачет или просто не хочется заморачиваться. Но уж точно 1-2 символа не должны вводиться в длиннющее поле. Хороший вариант — завести css-классы для длинного, короткого и среднего полей.
Переходим в старшие классы или горе от ума
Когда я сделал эту простую форму для перевода денег на определенный банковский счёт, заказчик попросил сделать две вещи — не давать вводить больше символов, чем разрешено и не давать вводить буквы и другие символы в поле для номера.
Оба этих требования ошибочны, что я и объяснил заказчику. Хотел также поделиться доводами с вами.
Ни цента больше
Блокирование ввода символов после достижения допустимой длины — это грубая ошибка. Представьте, пользователь вводит сложный 20-значный номер счёта, в середине вводит лишнюю цифру, не замечает этого, доходит до конца и... последняя цифра не вводится. Он в остервенении бьет по клавиатуре — ничего не происходит, символ не набирается. Все, гэйм овер. Лучше дать пользователю возможность ввести 21 цифру, а потом сообщить ему об ошибке, пусть найдет лишнюю цифру сознательно.
Понаехали тут
Блокирование ввода любых символов, кроме цифр в поле номера — не такая грубая, но все же ошибка. Лично я, когда нажимаю на клавишу и не вижу никакой реакции, пугаюсь и думаю, что компьютер завис. Есть возможность решить проблему недопустимых символов более мягко.
Посмотрите на форму сверху. В первом поле хоть мы и рекомендуем вводить 10 цифр телефона слитно, но прощаем и пробелы и дефисы и даже лишнюю восьмерку в начале. А почему нет? Что нам сложно отбросить лишние символы что ли!
А вот во втором поле не допускаются русские символы. Хорошо, сообщим об этом пользователю через красный хинт, расположенный под полем. Не заметил — после нажатия на кнопку, мы переведем курсор в проблемное поле, и рядом с ним выдадим более заметное сообщение. Естественно, все это сделаем без перезагрузки страницы, 21-й век на дворе.
Рекомендации по обработке ошибок в полях формы
- Не блокируйте ввод символов в поля.
- По нажатию на кнопку отправки формы выдавайте сообщения об ошибке без перезагрузки страницы. Показывайте сообщение рядом с проблемным полем. Ставьте курсор в проблемное поле.
- Если ошибку можно отследить сразу, без отправки формы, выдавайте сообщение об ошибке набора, при этом не блокируйте набор и не переводите фокус ввода.
Подбирал сейчас авиабилеты на модном сайте Агент.ру, выбрал параметры и главное заполнил поле «Дата вылета». Мне выдало сообщение «выберите другую дату — возможно, на указанную дату нет рейсов по заданному направлению».
Ну скажите, я что один думаю о поездке в масштабе недели плюс-минус пару дней? Видимо разработчиков сайта отпускают на отдых в строго определенный день :)
Решить проблему можно по-разному — сделать диапазон даты вылета или чекбокс «Показать рейсы на этой неделе». Но это все усложняет форму.
Выход очень простой — если рейсов на эту дату нет или их мало, нужно в результатах поиска выдавать список всех доступных рейсов на ближайшие дни. Естественно уведомив, что дата другая.
Маленький пук для программиста и у вас появилась дополнительные заказы.
Вывод
Старайтесь не показывать пустые результаты поиска. Ничего не нашли — извинитесь, предложите скорректировать запрос, но при этом покажите то, что может быть потенциально интересно.
Если бы мы жили в абсолютно честном мире, не было бы ни паролей, ни капчи, ни сертификатов, ни таймаутов сессий. Но правда жизни в том, что всё это необходимо, чтобы обеспечить безопасность клиентов. А повышение безопасности веб-сервисов всегда усложняет интерфейс, и порою это заходит слишком далеко и начинает попахивать маразмом.
Хостинг, на котором находится мой сайт, имеет панель администрирования, защищенную паролем. Этот пароль я сразу поменял на удобный мне, это разрешено. Из этой панели можно поменять пароли для ftp и ssh, но... только на автоматически сгенерированные, на свои нельзя. Как мне объяснили, это для безопасности. Почему при этом можно придумать себе любой мастер-пароль — загадка. В результате этого маразма постоянно борюсь с желанием сохранить пароль к ssh в текстовый файл на рабочем столе.
Мой пароль протух и пахнет
Еще одна любимая тема безопасников — принудительно менять пароли раз в месяц. Среди веб-сервисов сразу вспоминается интернет-банкинг Альфа банка. Несчастные пользователи вендо-доменов тоже вынуждены менять пароль раз в месяц. Стоит ли говорить, что подобными мерами можно добиться только записывания паролей на бумажку, лежащую около монитора (я видел это) и придумывания легкоподбираемых (пусть и длинных) паролей.
На другом моем хостинге пароль для ftp обнуляется каждые три месяца. Приходится каждый раз лезть в админку и менять его... на тот же. Стоит ли упоминать, что у большинства пользователей все пароли хранятся в браузере.
А у вас какой длины?
Да, пароли должны быть достаточно сложными. Но чтобы этого добиться не обязательно запрещать пользователям придумывать пароль самостоятельно. Достаточно запретить пароли меньше 6-8
символов и состоящие из повторяющихся символов.
Почему некоторые сайты ограничивают длину пароля 10 символами и запрещают вводить знаки типа @#$%^& — для меня загадка. Ну не на размере же базы данных они экономят! Вот и попробуйте в Альфа банке придумывать раз в месяц новый пароль не меньше 8 и не больше 10 символов.
Они все равно сделают по-своему
Не ограничивайте пользователей и не считайте их за малых детей (даже если они такими являются). Это все равно бесполезно. Они запишут ваш супер пароль на бумажку и наклеят на монитор.
Вот еще пример из мира операционных систем. Недавно моя домашняя Убунточка с Гномом на борту обновилась и я с удивлением обнаружил, что апплет, которым мы легко и быстро переключались между моей учёткой и учёткой жены больше не позволяет это сделать. Теперь нужно каждый раз идти в окно выбора пользователей и вводить пароль. Раньше это тоже было, но опционально. Естественно для дома я эту опцию ввода пароля отключал.
Можно спорить и отстаивать мнение, что от жены тоже могут быть тайны, но я не об этом. Дело в том, что имеется возможность загружать компьютер без ввода пароля вообще и эта возможность штатная. А переключаться между пользователями мы стали с помощью горячих клавиш, которые работают без настройки — пользователи в Убунте висят на разных консолях, так что Ctrl+Alt+F9 вам в помощь. Я же говорю, что пользователи все равно сделают все по-своему.
Что делать?
-
Позволяйте пользователям самим придумывать пароли. При этом запрещайте создавать пароли меньше 6 символов. В идеале сделайте индикатор надежности пароля. Не ограничивайте максимальную длину пароля.
-
Не ограничивайте срок жизни пароля или сделайте это отключаемой опцией. Если уж очень хочется — напоминайте, что пароль устарел, но не ставьте пользователям ультиматумов.
-
Повышайте безопасность за счёт своего труда, а не за счёт труда пользователя.
Да, бороться с аудитом по безопасности сложно, почти нереально. Но, если не торжествует здравый смысл, торжествует упущенная прибыль. Хотел разместить тут ссылку на поучительную историю о том как Амазон заработал кучу миллионов долларов перестав парить своих пользователей регистрацией (сделав ее необязательной). Но никак не могу найти эту статью, может кто подскажет?
Если вы не хотите, чтобы пользователи что-то делали в вашем интерфейсе, а запретить это вам лень или нету сил, тогда вы пишите объявление типа: «Матерные комменты не писать, ну пожалуйста» или «За нарушение правил форума — бан, смерть и вечное проклятие».
В эту зиму выпало много снега, и несчастные автовладельцы принялись разрабатывать подобные объявления. А те, кто порадивее, те делали серьезную защиту — палки и противотанковые ежи. В память об этом народном творчестве публикую эту небольшую подборку снежных парковок близлежащих дворов (фотки — кликабельны).
Чтобы оценить масштабы бедствия:
Мало создать интерфейс, нужно довести его до состояния, когда им возможно будет пользоваться, а вот это уже на порядок сложнее.
Есть такая компания Макдоналдз. Она американская, а Америка — это такая страна, где уважают инвалидов и считают (на практике, а не в теории) их обычными гражданами, достойными без посторонней помощи сходить на спортивный матч, в магазин или в столовку.
Именно поэтому все русские Макдоналдзы имеют отдельный туалет для инвалидов. А вот сделать крыльцо, ведущее в этот туалет ресторан, доступным для инвалидов — до этого уже руки не дошли. Короче, типичный пример тупого следования заокеанским гайдлайнами, лицемерия и русской экономии:
Назвался груздем — полезай в стандарты
В любом учебнике по веб-дизайну написано, что картинкам нужно проставлять атрибут ALT. Например, для того, чтобы пользователи браузеров для слепых могли узнать, что изображено на фотографии.
Я не пользовался браузерами для слепых, но чую, что ALT в картинках им мало поможет, когда приходится продираться сквозь чащу оформительских таблиц, распорок и прочего внутреннего мусора.
Хотите делать сайты для людей с ограниченными возможностями — следуйте стандартам, используйте семантическую верстку, резиновый дизайн, кастомизируемый размер шрифта и т.п. Тогда и подписи к картинкам пригодятся и TITLE в ссылках будет не лишним.
В заключение хочу показать пример семантической верстки как нужно делать общественные места доступными для инвалидов: версия НТВ, версия РТР.
Дублирование важной информации — вещь вроде как полезная. К сожалению, практика показывает, что толку от этого мало.
Один известный дизайнер справедливо заметил, что порою важную информацию нужно продублировать, чтобы наверняка заметили. В теории это все выглядит логично и очень полезно.
Но размышляя, я пришел к выводу, что на практике, люди склонны поступать руководствуясь каким-то внутренним (шестым?) чувством, а не красивыми плакатами и знаками, даже если этих плакатов несколько, они большие и выполнены в ярких цветах. Популярный и очень полезный для проектировщика интерфейсов ресурс Задолба!ли неоднократно это утверждение подтверждал.
Тварь я в очереди стоящая или карту имею?
Сегодня я совершал покупки в магазине IKEA. Там есть кассы, где принимают только банковские карты, наличность не принимают. Обычно очереди в них меньше, поэтому я пользуюсь.
О том, что эти кассы особенные (только карты) покупателям сообщается вербально и визуально (желтые большие щиты с черными жирными буквами), причем не один и даже не два раза. Давайте посчитаем:
- объявление по громкой связи;
- большой плакат на подходе к этим кассам;
- надпись на уровне касс;
- надпись на самой кассе;
- где-то еще, если я не ошибаюсь;
- и наконец (!) кассир спрашивает «вы по карте?».
Подходя к кассе я встретил человека, который возмущенно говорил, мол, откуда я знал, что здесь только по картам. Очевидно, что он пропустил несколько заметных предупреждений и был остановлен последним оплотом информационного дизайна — кассиром.
Расплачиваясь, я поинтересовался у кассира, как много покупателей не видят надписи с предупреждениями и разворачиваются возмущенно после его вопроса о карте. Его ответ меня поразил:
— Процентов 60%, ну, может поменьше, — ответил кассир. — А ведь столько предупреждений, везде надписи, а они не читают!
Что ж, остается только надеяться, что к дорожным знакам водители относятся более внимательно. Впрочем, мой опыт автомобилиста говорит обратное :(
Каждому покупателю по персональному кассиру
Что делать в ситуациях, где нужно привлечь внимание пользователя? Вариантов много, но главное правило — чем раньше, тем лучше, это сэкономит время и силы как покупателю, так и продавцу.
В случаи с Икеей, кассир должен был отсеивать не более 5% покупателей, но никак не 50%.
В случае с платежной системой MOBI.Деньги, чтобы уведомить пользователя о том, что имеются ограничения по сумме платежа, мы не только 2 раза пишем об этом, но и без перезагрузки страницы выдаем контекстное сообщение о превышении суммы, а также заботливо ставим курсор в проблемное поле. Я кратко об этом писал.
Так что, пожалуй, кроме принципа «чем раньше, тем лучше», важен принцип: по возможности безболезненно.
--------------------------------------------------------------
P.S. Подумал тут, что проблема в баннерной слепоте. Люди не обращают внимание на яркие и заметные вывески, потому что обычно это реклама.
Мало сделать хороший интерфейс, нужно что бы он выглядел привлекательно. Но привлекательность — понятие относительное, сильно зависящее от моды. К сожалению, в погоне за модой часто забывают о здравом смысле и портят то, что прекрасно работало.
Недавно моя жена, вернувшись из магазина, пожаловалась, что долго не могла найти на полке свой любимый шампунь. Оказалось, что бутылочка притерпела редизайн:
Проблема вовсе не в том, что привычная форма и цвет изменились — к этому можно привыкнуть. Проблема в том, что новая бутылочка очень похожа на... кучу других округло-современных шампуней и просто теряется на полке. Даже в нашей ванной комнате она сразу перепуталась с моим гелем для душа:
Старая бутылочка была выполнена в олд-скульном ключе и выделялась на однообразном фоне современных шампуней. Сам стиль я не обсуждаю, но найти ее на полке было явно легче.
Интересно, что в этом бессмысленном (на мой взгляд) ребрендинге наверняка все действовали искренне. Маркетолог искренне решил, что старая бутылка — она старая во всех смыслах и нужно как-то отрабатывать свою большую зарплату. Дизайнер искренне сделал «современную упаковку», как его просили. Фокус-группы искренне сказали, что они предпочтут новую упаковку старой с вероятностью 23%. Искренне веря в рост продаж, директор оплатил расходы на этот балаган.
Погоня за модой в интерфейсах
Навести гламура на сайте гораздо проще, чем в производстве шампуня. Поэтому дизайнер рисует «красивые» кнопки, но при этом никто не позаботился, чтобы эта красота реально нажималась (это бывает очень важно), в то время, как на стандартных кнопках это реализовано «из коробки»:
Иконки рисуют одинковыми по форме и цвету — ничего, что найти нужную кнопку так в 2 раза дольше, зато стильно. Ну а сделать шрифт помельче (кстати, кто-нибудь знает зачем это делают?) и убрать подчеркивание у ссылок — ну куда же без этого!
А вы уже разместили главный функционал своего веб-сервиса внутри последнего флэш-плеера?
|
Ах, эти интерфейсы
Этот блог — рассуждения о пользовательских интерфейсах в различных их проявлениях и веб-проектах.
|
