На многих веб-сайтах приходится иметь дело с процедурой выбора даты. Для облегчения выбора и преодотвращения возможных ошибок сайты снабжаются календарями. Нередко приходится сталкиваться с тем, что календари плохо адаптированы под потребности посетителей сайтов, и поэтому их использование сопряжено с затруднениями. В данной статье мы хотели бы дать несколько практических рекомендаций по упрощению процедур ввода даты и улучшения эргономических характеристик календарей.

Упрощение ввода даты

Даже в эпоху компьютерных технологий традиционный календарь остается предметом повседневного обихода. Чем больше календарь на сайте напоминает обычный бумажный календарь, тем меньше вопросов будет возникать у пользователей относительно специфики работы с ним. Лучше основываться на распространенных стандартах, чем придумывать новую эстетику, какой бы оригинальной она ни была.

Календарь в виде радуги (пример взят с сайта badusability.com): все дни месяца отображены, но на календарь это совершенно не похоже, что только затрудняет выбор даты.

Ввод даты является очень трудоемким процессом: нужно ввести цифры и буквы, разделенные косой чертой. Подобные комбинации символов не используются в повседневной коммуникации. Календарь предлагает быстрый и удобный выбор даты одним щелчком мыши. Такой способ ввода, более простой по сравнению с вводом с клавиатуры, позволяет избежать ошибок.

На сайте авиакомпании Air France отсутсвует иконка календаря; календарь возникает на экране при переходе в раздел «Регистрация онлайн». Это может вызвать затруднения.

Традиционный вид календаря помогает пользователю лучше сориентироваться во времени. По горизонтали располагаются дни недели, а по вертикали — соответствующие им дни месяца. На некоторых сайтах в календаре отображаются только дни текущего месяца; иногда отображаются также дни предыдущего и следующего месяцев. Выбор внешнего вида календаря обусловливается спецификой его использования и соображениями удобства.
Отображение дней, не имеющих отношения к текущему месяцу, может помочь пользователю быстрее выстроить планы на будущее, т. е. быстрее выбрать дату в следующем месяце.

На сайте SNCF (французская государственная железнодорожная компания), дни предыдущего и следующего месяца отображаются при поиске поезда (слева), но не при поиске гостиниц (справа). При поиске поезда дата предустановлена, тогда как при поиске гостиниц задан лишь формата для ее ввода. Чтобы на экране не возникало некрасивых и бесполезных пустых мест, в календаре предпочтительно отображать дни предыдущего и следующего месяцев. Во избежание ошибок их лучше выделить графически (например, менее ярким шрифтом). Еще один классический элемент дизайна календарей – метки с названиями дней недели. Здесь следует учитывать специфику страны: например, во Франции неделя начинается с понедельника, тогда как в США — с воскресенья. Особые дни (например, праздники) также могут быть каким-то образом выделены. Такое выделение очень важно на сайтах, предоставляющих определенные типы услуг (например, на сайтах, предлагающих билеты на транспорт, иногда возникает необходимость выделение дней открытия и закрытия сообщения). Графическое выделение предпочтительно сопровождать текстовым пояснением (например, в виде подсказки, появляющейся при подведении курсора). Графически выделяются и выходные дни (это особенно важно при заказе билетов на поезд и самолет, турпутевок, гостиничных номеров и т. п.). Определенным образом должны выделяться и недоступные дни (на которые проданы все билеты, заняты все номера в гостинице и т. п.

В верхней части календаря расположены обозначения дней недели. Некоторые туристические фирмы (см. рисунок справа), на своих сайтах вводят систему цветовых обозначений дат при бронировании гостиничного номера. Под календарем находится легенда с разъяснением всех используемых обозначений.

Рекомендации

• На сайте должна присутствовать иконка календаря;
• Календарь должен быть представлен в привычной для пользователя форме, т. е. выглядеть так же, как традиционные бумажные календари;
• Календарь должен быть адаптирован под культурные особенности пользователей сайта;
• Важные дни месяца необходимо выделять графически.

Упрощение выбора даты

Поиск даты может осуществляться двумя способами: ввод даты в текстовом поле или же выбор в разворачивающемся календаре. Чтобы ничем не ограничивать пользователей и учитывать их индивидуальные особенности, лучше предложить им на выбор оба этих варианта. Если календарь вызывается кликом мыши, крайне желательно, чтобы он не закрывал поле для ручного ввода. Он может быть расположен как под полем ввода, так и сбоку от него.

На сайте агентства по продаже авиабилетов Opodo при наведении курсора на поле ручного ввода появляется календарь; поле ввода он при этом не заслоняет. При вводе даты вручную она выделяется и в календаре. Дни предыдущего и следующего месяев в календаря не отображаются. При открытии календаря для пользователя должна задаваться точка отчета. Обычно за точку отчета принимается текущий день, и это позволяет пользователю сориентироваться и сделать верный выбор. Дни, доступные для выбора (например, при продаже билетов или бронировании гостиничных номеров), могут быть особым образом выделен. Когда выбор уже сделан (например, когда определены дни отправления и возвращения или дни въезда и выезда из гостиницы), предпочтительно отобразить в календаре не один, а два или три месяца. Это поможет пользователю лучше сориентироваться во времени и при необходимости скорректировать выбор.

На сайте Hotels.com при выборе дат въезда и выезда на экране отображаются два месяца, чтобы пользователь мог получить более наглядное представление о периоде своего пребывания в гостинице. В некоторые случаях возникает необходимость отобразить порядковый номер недели. Номера недель обычно располагаются в начале каждой строки. Для быстрого поиска нужной даты используются различные средства графического выделения.

Пример обозначения недель в календаре.

Рекомендации

• Пользователю должна быть предоставлена возможность выбора между ручным вводом даты и выбором ее в календаре
• Поле для ручного ввода даты не должно быть пустым; желательно, чтобы оно не включало форм типа дд/мм/гг
• Способ отображения календаря должен быть адаптирован под специфику решаемых пользователем задач (например, при выборе авиарейса совершенно бесполезно отображать предыдущий месяц и предыдущие дни текущего месяца)
• Размер календаря так же должен быть адаптирован под специфику задач (например, при бронировании гостиницы на неделю и более целесообразно отображать на экране не один, а два месяца)

Заключение

Календари получают все большее распространение и все чаще используются в качестве альтернативы трудоемкому вводы даты с клавиатуры. Процедура ручного ввода может представлять серьезные трудности, в особенности если ввод нужно осуществлять в каком-то определенном формате. Календари и выпадающие списки являются элементами интерфейса, облегчающими ввод и помогающими пользователю быстрее заполнить необходимые поля. Чтобы работа с этими элементами была простой и эффективной, необходимо иметь четкое представление о контексте, в котором она будет осуществляться. Для этого представляется целесообразным создавать прототипы будущих интерфейсов.