Удобные формы с помощью jQuery
Валидация
Иногда легко определить, что пользователь вводит неправильные данные. В адресе электронной почты не может быть русских символов. Почтовый индекс может состоять только из цифр. В номере телефона могут быть только цифры, скобки, пробелы и тире.
Для таких полей можно задавать ограничения, не позволяющие вводить пользователю неправильные данные.
-
Alphanumeric – позволяет указывать, какие символы можно вводить в каждое поле в форме (например, «только символы», «только числа», «только числа, пробелы и тире» и т.д.).
-
jVal – поддерживает проверку длины полей, регулярные выражения, сравнение значений в разных полях (например, пароль и подтверждение пароля).
-
Validation – самый известный и продвинутый плагин для валидации.
Кнопка на 300 миллионов
The $300 Million Button
Автор: Jared Spool
Источник: User Interface Engineering
Как изменение кнопки увеличило годовой доход сайта на 300 миллионов долларов
Сложно представить форму проще: два поля, две кнопки и одна ссылка. Но оказывается, эта форма была препятствием, не позволяющим клиентам покупать товары в одном крупном интернет-магазине на сумму примерно 300 миллионов долларов в год. Хуже всего было то, что дизайнеры сайта даже не догадывались о том, что с этой формой есть проблемы.
Полями были «Адрес электронной почты» и «Пароль». Кнопки – «Вход» и «Регистрация». Ссылка – «Напомнить пароль». Это была форма авторизации на сайте. С такими формами пользователи сталкиваются все время. Какие у них могут быть с ней проблемы?
Где и когда: ожидания пользователей
The Wheres and Whens of Users’ Expectations
Автор: Jared Spool
Источник: User Interface Engineering
Недавно дизайнер спросил нас, где на странице пользователи ожидают найти форму авторизации. Одни сайты размещают ее в левой колонке, другие в правой. Есть ли у нас исследование, которое может показать, что одна из позиций лучше, чем остальные?
С одной стороны, пользователи не свалились с луны – у них уже выработались определенные ожидания относительно того, где некоторые вещи должны появляться. Проектирование с учетом этих ожиданий снизит когнитивную нагрузку на пользователей и позволит сосредоточиться им на выполнении своих задач.
С другой стороны, не каждое решение, де-факто уже признанное стандартом, является оптимальным. Дизайнеры, как правило, отказываются от использования старых подходов, при наличии лучшей альтернативы. Некоторые даже ссылаются на совершенствование стандартов как на прогресс.
Таким образом, появляется противоречие: делать дизайн с учетом ожиданий пользователей или предложить пользователям улучшенный вариант использования, который может вступить в противоречие с их ожиданиями? Форма авторизации хорошее место для изучения того, какую роль может сыграть такое противоречие.
Регистрация и вход в систему: ошибки в дизайне (часть 2)
8 More Design Mistakes with Account Sign-in
Автор: Jared Spool
Источник: User Interface Engineering
Разработка процесса регистрации и входа в систему, который не препятствовал бы пользователям, задача довольно сложная. Она может казаться простой в самом начале, но куча тонкостей может превратить то, что должно быть простым, в стресс для пользователей.
В предыдущей статье я обсудил восемь общих дизайнерских ошибок при разработке процесса входа в систему. В этой статье я опишу еще восемь ошибок, с которыми сталкиваются пользователи при попытке регистрации и при входе в систему.
Ошибка 9: Не сообщать требования к имени пользователя и длине пароля
На сайте Cisco, когда пользователь подбирает себе идентификатор, ему сообщается, что имя «должно содержать минимум одну букву, не может содержать пробелов, может содержать цифры». Но после того как пользователь попытается зарегистрироваться с именем из 6 символов, появляется сообщение об ошибке, которое на самом деле изменяет правила – «имя должно быть длиной от 9 до 50 символов».
Не ясно, зачем Cisco удивляет таким дополнительным требованием пользователей, выбравших для себя короткие имена. Ни один из пользователей, принимавших участие в нашем тестировании, не был рад узнать эту дополнительную информацию.
При создании новой учетной записи Google Mail, пользователю доступна кнопка «Check Availability», которая проинформирует пользователя о требовании минимальной длины (6 символов). Такое решение лучше, чем на сайте Cisco, так как пользователю не нужно заполнять всю форму целиком, чтобы узнать, что учетную запись нельзя зарегистрировать.
Blinksale поступает еще лучше, проверяя логин после каждого напечатанного символа. По мере того, как пользователь вводит символы, ему сообщается, что логин слишком короткий или содержит недопустимые символы.
Раскраска «зебра»: действительно ли она помогает пользователям?
Zebra Striping: Does it Really Help?
Автор: Jessica Enders
Источник: A List Apart Magazine
«Зебра» – метод, заключающийся в раскраске в различные цвета строк в формах или таблицах. Сайты, которые используют такую раскраску – XE, CIA World Factbook и Monster.com. Зебра, которая сейчас популярна в интернете, пришла из бумажной печати: одно из первых упоминаний этого метода относится к 1961 году.
Многие считают, что полоски разного цвета помогают читателям двигать взгляд вдоль строки. Однако, несмотря на то, что этот метод используется почти половину столетия, практически нет доказательств того, что он действительно помогает читателям. В июне-июле 2007 года мы провели обзор источников, таких как Международная ассоциация историков бумаги (International Association of Paper Historians), Ассоциация форм документов (Business and Forms Management Association), журнал «IEEE Annals of the History of Computing», но не нашли никакой информации о происхождении или обоснования «зебры».
Тем не менее, применение «зебры» в электронной форме является нетривиальной задачей. A List Apart один раз публиковал статью о том, как сделать «зебру». Как web-дизайнеры, мы не можем позволить тратить время на реализацию, которая на самом деле не приносит пользы. Итак, мы решили провести исследование с целью убедиться, что «зебра» действительно делает вещи проще.
Регистрация и вход в систему: ошибки в дизайне
Account Sign-in: 8 Design Mistakes to Avoid
Автор: Jared Spool
Источник: User Interface Engineering
Наряду с популярной линейкой сетевого оборудования, Cisco Systems предлагает своим посетителям купить кое-что еще: под маркой Cisco продается спортивная одежда и аксессуары, все, от курток до мячей для гольфа. Единственной проблемой является то, что для того чтобы увидеть вторую линейку товаров, вам нужно сначала зарегистрироваться.
Да. Вы правильно прочитали. Просто чтобы увидеть имеющиеся товары, нужно создать учетную запись, нужно заполнить форму из 45 полей на четырех страницах. Если после этого вы вернетесь обратно, то сможете увидеть лазерные брелки с логотипом Cisco.
Есть много других преимуществ, которые можно предложить пользователям, создающих учетную запись и входящих в систему. Вы знаете, кто пользуется вашим сайтом, как часто они его посещают и что делают на сайте. Вы можете хранить информацию, которая, возможно, потребуется им в будущем – история заказов или платежей. И вы можете предложить им информацию и сервисы, зарезервированные для лучших пользователей.
Тем не менее, по результатам юзабилити-тестов известно, что регистрация и вход в систему является постоянной проблемой. Это наиболее распространенная проблема, которая отпугивает пользователей от покупок в электронных магазинах. И увеличивает число звонков в службу поддержки.
Разработка процесса регистрации и входа в систему, который не препятствовал бы пользователям, задача довольно сложная. Она может казаться простой в самом начале, но куча тонкостей может превратить то, что должно быть простым, в стресс для пользователей.
Вот основные ошибки, с которыми пользователи сталкиваются, когда пытаются регистрироваться или входить на сайты.
Формы регистрации должны умереть
Sign Up Forms Must Die
Автор: Luke Wroblewski
Источник: A List Apart Magazine
Формы регистрации должны умереть.
Во введении к этой книге я рассказал о том, как устранять препятствия, мешающие пользователям начать работу с web-сервисом. Теперь вы готовы включиться и начать работу, но что же первым встречает вас на сайте? Форма.
Можно сделать лучше. На самом деле, я считаю, что можно рассказать людям, связанным с информационными технологиями, о том, как работает сервис и почему они должны зарегистрироваться, чтобы его попробовать. Но в то же время, можно это сделать и без обязательной регистрации на первом шаге.
Паттерны дизайна взаимодействия
Interaction Design Patterns
Автор: Eelke Folmer
Источник: Interaction-Design.org
Паттерн дизайна взаимодействия (Interaction design, ID) – универсальное решение часто повторяющейся проблемы в дизайне интерфейсов или в дизайне взаимодействия. В дизайне взаимодействия паттерн обычно состоит из следующих элементов:
- Проблема. Должна быть проблема, связанная с эксплуатацией системы и имеющая отношение к пользователям.
- Условия. Ситуации (зависящие от задач, пользователей и контекста) в которых проблема мешает достижению цели. Этот раздел в основном содержит описание ситуаций, в которых возникает проблема.
- Принципы. Паттерн, как правило, основывается на одном или нескольких принципах эргономики.
- Решение. Проверенное решение проблемы. Описывается только суть решения, дизайнер может сам выбрать конкретный способ его применения.
- Объяснение. Описание, как и почему паттерн работает. Обоснование и аргументация того, каким образом, паттерн влияет на удобство использования. Какие аспекты взаимодействия можно улучшить, а какие наоборот – могут пострадать.
- Примеры. Примеры показывают, как паттерн применяется в реальных системах.
- Реализация. Некоторые паттерны включают элементы реализации.
Способы ориентирования пользователей на сайте
10 ways to orientate users on your site
Автор: Jonathan Webb
Источник: Webcredible
Представьте, что из-за пробок перекрыли все основные дороги, и вы вынуждены свернуть в незнакомую часть города. Теперь вашими помощниками будут только дорожные знаки. Ориентируясь по ним, вы продвигаетесь в нужном направлении.
Но в какой-то момент знаки исчезают, и вы уже не знаете, куда нужно повернуть. Направо или налево? Похоже, что вы потерялись. Может стоит вернуться назад и попробовать поискать другой путь? Или продолжить двигаться вперед и надеяться на лучшее.
Независимо от конечной цели сайта, одна из основных его задач – показать пользователю путь к нужной ему информации (или сервису). Но часто случается, что в какой-то момент все указатели пропадают – пользователь теряется внутри сайта и не знает, куда двигаться дальше.
Итак, как же помочь пользователю сориентироваться на сайте.
Не используйте предупреждения, если есть возможность отменить действие
Never Use a Warning When you Mean Undo
Автор: Aza Raskin
Источник: A List Apart Magazine
Попадали ли вы в ситуацию, когда через секунду после того, как вы нажали «Да» в каком-нибудь окошке, вы понимали, что нужно было нажать «Нет».
Да? Ну, тогда вы в хорошей компании – каждый хоть раз бывал в такой ситуации. На самом деле, это не ваша вина – это вина программного обеспечения.
Почему? Да потому, что программы должны знать, что у нас есть привычки. Программы должны знать, что после того, как человек десять раз подряд нажмет «Да», он, скорее всего, нажмет его и в одиннадцатый. Даже если и не собирался этого делать.
Почему программы должны знать эти вещи? Потому что разработчики программного обеспечения должны знать, что у людей развиваются привычки, хотят они того или нет.
Привычки иногда могут быть полезными: например, когда мы сталкиваемся с банальными интерфейсами, которые можно проходить на автомате. Когда в очередной раз появляется диалог «Вы действительно хотите выйти?» ваши руки сами движутся от кнопки закрытия окна к кнопке «Да» в этом диалоге. И это хорошо, потому что мы хотели бы больше времени тратить на выполнение действий, чем на размышления над подобными вопросами. К сожалению, наши привычки также заставляют нас ошибаться: довольно часто мы осознаем, что ошиблись уже после того, как совершили действие.
Итак, мы приходим к одному из основных принципов дизайна интерфейсов: хороший интерфейс должен учитывать привычки пользователей.
RSS
Последние записи
- Как я перестал волноваться и полюбил менеджеров среднего звена
- Вопрос на 3 миллиарда
- Удобные формы с помощью jQuery
- Визуальная коммуникация в контекстно-зависимых полях
- Кнопка на 300 миллионов
- Размещение стрелок рядом с текстовыми ссылками
- Почему дизайнеры терпят неудачи
- Размещение кнопок «Вперед» и «Назад» в формах
- На пути к новому интерфейсу Microsoft Office (часть 8): Точки на графике
- На пути к новому интерфейсу Microsoft Office (часть 7): Вставка в лидерах
Облако тегов
безопасность дизайн дизайн интерфейсов дизайн форм кастомизация контент логотипы менеджмент навигация паттерны поиск принципы дизайна прототипы процесс разработки редизайн системы помощи сортировка табличные данные таксономия управление проектами фильтрация юзабилити javascript jQuery Office 2007 Ribbon
Архив
- Апрель 2009
- Март 2009
- Февраль 2009
- Январь 2009
- Октябрь 2008
- Сентябрь 2008
- Август 2008
- Июнь 2008
- Май 2008
- Март 2008
- Февраль 2008
- Январь 2008
- Ноябрь 2007
- Октябрь 2007
- Сентябрь 2007
- Август 2007
- Июль 2007
- Июнь 2007
- Май 2007
- Апрель 2007
- Март 2007