Нужна рецензия: Юзабилити больших форм
Александр
По этой ссылке расположена форма-анкета бронирования туристической
путевки.
Форму заполняет менеджер по туризму.
Согласитесь, ни о каком дизайне и тем более юзабилити тут трудно вести
разговор.
Тем немение предложения руководству разбить форму на пошаговый процесс
-- отвергались.
Уважаемые участники, дайте пожалуйста совет, как можно упростить
такого рода формы
при том что нельзя полагаться на уровень подготовки менеджеров, пол
года назад
на http://forum.usability.ru авторитетный участник посоветовал
разширить функционал hotkey-ями
якобы профессионализм менеджеров позволит им быстрее заполнять. В ходе
тестирования выяснилось
что почти никто этим не пользуется :(
Функциональные особенности формы таковы, что необходимо заполнить
максимальное количество
полей (т.к. на ней собраны лишь самые необходимые), и она должна быть
интуитивно понятна и неутомительна даже для
непрофессионального пользователя.
Большое спасибо тем кто уделит минуту и внимание. Если не в тему, то
посоветуйте пожалуйста куда можно за рецензией обратится.
Павел Коноплицкий
1) Рекомендую поля, где вводятся цифры, выравнивать по правому краю.
Чтобы получались десятки под десятками, сотни под сотнями.
2) Стоит выровнять названия полей форм тоже по правому краю, таким
образом еще четче обозначить привязку названия и поля.Это не так
критично в вашей форме, но поле и название "карта" уже на пределе
расстояния.
3) Даже самые крупные туристические компании по каким-то направлениям
возят чаще, чем по остальным. Посмотрите статистику, куда чаще всего
заполняют заявки с помощью этой формы и поменяйте порядок у полей
"Страна", "Регион","Отель","Оператор". Наиболее частотные поднимите
вверх, а после них пусть как и сейчас следуют по алфавиту.
4) Большие буквы ухудшают читаемость. Сделайте заглавную и строчные.
5) Метаэлементы "Неопределённая" (Страна) и "null" и
"Неопределённый" (Оператор) следует отделить от остальных значений. Я
обычно заключаю в [ ].
Так визуально чётко видно, что это отдельный элемент:
Россия
Великобритания
[Неопределённая]
Кроме того, метаэлемент следует вывести из сортировки по алфавиту и
поместить в конец или начало (В зависимости от частоты. Подозреваю,
что в конец).
6) Нельзя полагаться на уровень подготовки? Тогда я делаю
предположение, что может возникнуть путаница с полем "Пансион".
Рекомендация тут будет такая - добавить к некоторым полям (требующим
знание предметной области) значок вопросика, при наведении на который,
сплывает подсказка. Или сделать полноценно вызываемый хелп для всей
формы.
7) Форма отрабатывает не всегда правильно. Сабмит незаполненной формы
привёл к ками-то серверным ошибкам (а должен выводить алерт). Удалось
(немогу повторить) сделать Варшаву в Абхазии.
При создании форм руководствуюсь этими правилами сам. Описал их в
гайдлайне http://www.amazedev.com/usability_guidelines/
Если Вы представляете туристический бизнес, то, возможно, Вам было бы
интересно принять участие в нашем небольшом проекте. Подробности тут
http://groups.google.com/group/ergopro/browse_thread/thread/b6c67cc366fd63b9?hl=ru
А вообще для начала стоит пообщаться с теми, кто этой формой
пользуется. Думаю у них есть. что сказать.
On 3 янв, 13:28, Александр <grisenkoalexa...@gmail.com> wrote:
> http://agent.globaltravel.ru/form
> По этой ссылке расположена форма-анкета бронирования туристической
> путевки.
> Форму заполняет менеджер по туризму.
> Согласитесь, ни о каком дизайне и тем более юзабилити тут трудно вести
> разговор.
> Тем немение предложения руководству разбить форму на пошаговый процесс
> -- отвергались.
>
> Уважаемые участники, дайте пожалуйста совет, как можно упростить
> такого рода формы
> при том что нельзя полагаться на уровень подготовки менеджеров, пол
> года назад
> наhttp://forum.usability.ruавторитетный участник посоветовал
zetta-ua
Для начала есть парочка вопросов о самой форме и операторе:
1. Оператор заполняет форму уже когда турист/туристы принесли все
документы? Или может часть информации внести по телефону и потом
дозаполнить?
2. Наш оператор информацию о турах конкретного тур-оператора смотрит
на листике? Так же курс перещета?
3. Часто ли бывает, что "Заказчик"="Турист"?
Спасибо
----------------------------------------------------------------------
А теперь вернемся к форме.
Сейчас глобально вся информация разбита на строчки и столбики.
Можно предположить, что это сделано, дабы уместить все на одном
экране.
Но у оператора с разрешением монитора 1024х768 все еще не поместиться.
Оператор устанет головой вертеть влево-вправо от расчета тура до
оформления тура.
Поетому для начала предлагаю всю информацию разместить в одну колонку.
Более детально о конкретных полях будет дальше.
On 3 янв, 13:28, Александр <grisenkoalexa...@gmail.com> wrote:
> http://agent.globaltravel.ru/form
> По этой ссылке расположена форма-анкета бронирования туристической
> путевки.
> Форму заполняет менеджер по туризму.
> Согласитесь, ни о каком дизайне и тем более юзабилити тут трудно вести
> разговор.
> Тем немение предложения руководству разбить форму на пошаговый процесс
> -- отвергались.
>
> Уважаемые участники, дайте пожалуйста совет, как можно упростить
> такого рода формы
> при том что нельзя полагаться на уровень подготовки менеджеров, пол
> года назад
> наhttp://forum.usability.ruавторитетный участник посоветовал
Александр
1- Да, оператор (менеджер) заполняет форму тогда, когда все документы
уже есть в наличии.
с "дозаполнением" формы - оттдельная тема, она очень нужна, но я пока
не могу прийти
к единному варианту технической реализации этого, т.к. варианты
коррекции не все известны,
т.е. не хватает данных для полной картины что когда и как может
понадобиться редактировать.
2- Наш оператор (менеджер) всю информацию о туре смотрит на сайте
оператора
оттуда-же берется вся информация, и курс пересчета в т.ч.
3- 99%, что заказчик=турист (полагаю вы про автоматическое заполнение
транслитом данных в списке туристов? :))
Ваше предположение верно, форма реализована с учетом ширины экрана не
менее 1000рх,
но к сожелению реализация формы в колонку невозможно, т.к. в таком
случае вертикальная прокуртка
будет очень длинная, согласен что таким образом удобнее пользоваться
табулятором, но мной уже был
предложен руководству такой вариант, и он был отвергнут (к сожелению).
Aleksey Gulyakov
Здравствуйте, Александр.
Мне кажется, в данном случая лучше расположить элементы в одну колонку, а чтобы упростить навигацию, разбейте их на несколько страниц с закладками (типа TabControl) , но так, чтобы при переходе между закладками не требовалось запрашивать сервер.
В принципе, это тот же пошаговый вариант, но с возможностью произвольного доступа.
Александр
считая этот вариант неудобным (согласен что не руководство пользуется
этой формой, и надо
ориентироваться на менеджеров). Пока пришел к тому, что стоит сделать
несколько вариантов формы
как табы, так и списком, и ещё пару вариантов, и далее просто
предложить манагерам выбрать самим
через какую форму работать. Т.е. каждый в нстройках может выбрать тот
вариант формы, которая ему больше нравиться.
Благо технически это проблемы не составит.
ambex
Александр, хотел бы помочь в разрешении проблем с формой
последнее время я занимаюсь этим вопросом,
если Вам будет полезно - размещу свои материалы (гайдлайны)
по созданию и дизайну форм.
Вы уже все решили по ней?
адрес http://agent.globaltravel.ru/form - не работает
не было возможности ответить раньше - отдыхал
вы, видимо работаете уже с 3-го янв. =)
ambex
и которыми сам пользуюсь =)
Представленные ниже материалы являются
частично переводом из разных источников и
по большей части результатом личного опыта.
Также отмечу, что рекомендации по дизайну форм
рассчитаны на целевую аудиторию из англоязычных стран.
Так как тема форм уже затрагивалась, но только в отдельных аспектах:
как оформлять обязательные поля или как делать списки со странами...
думаю для многих этот материал будет полезен.
Его всегда можно "русифицировать" подогнать под
требования пользователей из русскоговорящих стран.
Размер формы, число полей и типы вопросов
Размер формы (количество полей с вопросами) - чем меньше, тем лучше
Например, только e-mail или только 1.Full name, 2.Email, возможно еще
3.Phone
Нельзя допускать ошибок в выборе количества инбоксов (англ. inbox -
или - поле ввода - англ. enter-field).
Например если спрашивается zip code in US, то нет смысла спрашивать
город, штат и тем более номер факса.
Таким образом, до дизайна формы необходимо ее спроектировать,
протестировать и оптимизировать.
Важно знать:
a) Размер (не пугать пользователя) - при создании форм необходимо
продумать как ее можно сократить в 2 раза при получении той же инфы -
собирать надо только необходимую инфу и продумать как сократить
излишние вопросы (zip = county + state + city, alt. phone и fax -
удалить)
б) Альтернативы (предоставить выбор) - продумать наличие
альтернативных полей - например ввод либо e-mail, либо tel. number,
либо IM (aol, msn,...)
в) Визуальная стабильность (уверенность пользователя) - если
расширение формы имеет место (хотя это отпугивает многих
пользователей) должно происходить постепенно, последовательно, без
искривления композиции дизайна сайта.
г) Отвлекающие факторы (нацеленность дизайна на кнопку) - удалить
ненужные ссылки (ведущих на about us или наличие поиска (search) -
выраженность, однозначность и нацеленность на submit).
д) Оптимальная композиция (доходчивость и ясность) - должна быть
следующей:
1. Заголовок над полями ввода. Где написано, что надо ввести требуемые
данные, чтобы получить конкретный результат. Который отобразится после
нажатия соответствующей кнопки под полями ввода
2. Поля ввода, в строгой последовательности - которая часто зависит от
культурных и национальных особенностей целевой группы (например, для
американцев - сначала first name, затем last name, затем email и т.д.)
3. Кнопка, должна быть достаточно большой, яркой, контрастной.
Говорят, что после создания кнопки дизайнером необходимо увеличить
ее...
а затем увеличить ее еще немного, тогда получится то, что надо. Однако
многое показывает юзабилити-тестирование.
На кнопке должна быть надпись, которая дает пользователю понять - что
именно после нажатия он получит или обозначать действие, которое он
совершит при нажатии кнопки. После нажатия должен отобразиться
результат действия
4. Под кнопкой - условия заполнения формы (не младше 18, только для
стран СНГ и т.п.) - и/или обозначение <<* - required fields>>
Самые эффективные средства, проверенные на практике
(нужно помнить, что люди ленивы - поэтому формы должны делать больше
работы, чем пользователи):
1.Курсор при наведении на форму должен становиться в виде <<|>>.
Курсор
должен сам переходить на следующий инбокс при введении нужного кол-ва
символов (tel. number и zip code). Должен работать Enter и Tab (на
клавиатуре) для перехода курсора.
2.Помощь - любая необходимая инфа по заполнению формы (пример даты,
чтобы показать формат)
3.Размер инбокса - должен подходить под кол-во требуемой инфы (если
большой размер - пользователь будет думать, что мало ввел, если
маленький размер - будет думать что переборщил - или вводимый текст
сдвинется за край поля ввода)
4.Нумерация вопросов должна быть лишь в том случае, когда форма
продолжается за экран или на следующую страницу
5.Информация, введенная пользователем должна сохраняться при переходе
назад или вперед по сайту
6.Выделение обязательных поля для заполнения с помощью а) жирного
текста, описывающего форму, б) выделение внутри инбокса (желтым)
цветом, в) знаком 'звездочки' и надписью Required над формой, а не под
ней. Желательно отсутствие требования Required fields, особенно
требование впечатать тел. номер (tel. number)
7.Выпадающие списки - лучше избегать (продумать как можно иначе
структурировать форму) - они просто не воспринимаются пользователями,
а также колесо прокрутки мышки часто изменяет выбранный пункт. Если
все же не удается избежать - то вверху списка необходимо помещать
наиболее частые ответы
8.Боксы - click/check-boxes и radio-buttons в одной форме не помещать.
Часто пользователи оставляют состояние их по умолчанию, особенно у
radio-buttons. Для большего удобства необходимо надпись у боксов и
кнопок делать тоже кликабельной
9.Вид формы - одна колонка
10.Порядок вопросов - В США лучше 1ое поле - first name, 2ое - last
name, но не наоборот (для сокращения строк можно пробовать - имя в
одну строку или один инбокс)
Поле ввода (inbox, enter-field)
1) Лучше использовать стандартные поля ввода, списки и др. элементы
небольшие, невычурные, непошлые - симпатичные, аккуратные, ровные,
привычные, красивые, простые, однозначные, имеющие четко очерченные
рамки
2) Поля должны быть выровненными по линии, разделяющей подписи полей
(слева) от самих полей ввода (справа), например (представьте, что поля
ввода и список <<Select>> ровные =)
First name |___________|
Last name |___________|
Email |___________|
Country |___Select___|
3) Расстояние от подписи должно быть <<достаточным>>, не впритык и не
далеко.
4) в поле ввода должны входить все требуемые символы, то есть не
должно происходить сдвига введенных цифр влево - при вводе нужного
количество символов - дальше просто нельзя вводить
Submit-button (Кнопка)
1)Делать больше, и после этого еще чуть больше
2)Красная или классическая серая? Протестировать как прямоугольник,
овал или круг
3)Протестировать слова на кнопках (лучше когда в заголовке для формы и
на кнопке одинаковые слова, также менее агрессивные призывы действуют
лучше - Try it now вместо Buy it now
4)Разные кнопки с разным текстом работают для разных целевых групп
5)Лучше использовать cart, но не basket
6)Не использовать рядом с submit другие кнопки (особенно <<clear
form>>
или <<reset>>, которые можно перепутать с <<submit>>)
Email-inbox (Почтовый адрес) (факторы способствующие заполнению
email'a)
1) Рядом с полем ставить текст
1."We value your privacy"
2."Your email is secure"
3."Your email will be held in strict confidentiality"
4."Your privacy is assured"
5."Your email will not be shared or rented"
Этот текст может работать как ссылка на privacy policy, или поместить
privacy policy внизу страницы.
Но ни в коем случае нельзя исключать privacy policy из страницы
2) Нельзя заставлять пользователя вводить email больше одного раза.
Если все же необходимо удостовериться в правильности можно
использовать подсказки Пример: http://www.phonehog.com - вылетает pop-
up с вопросом о правильности email'a (очень хороший прием)
3) Лучше предоставлять выбор рассылок с отдельными check-box'ами, если
например нужно отсылать email newsletter и sales alerts или больше
видов рассылок.
Phone-inboxes (Телефон) (факторы способствующие заполнению номера
телефона)
1)Располагающие к себе элементы на странице: testimonials, privacy and
security, <<as seen in>>, иконки членства в ассоциациях, или участия в
номинациях.
2)Фото человека (к которому якобы попадает номер)
3)Строгий официальный логотип компании
4)Ненавязчивый недлинный рекламный текст
5)Не более 3-х полей для заполнения
6) если требовать номер телефона, то только тот номер, по которому
можно связаться
Guarantees (Гарантии)
1) текст: testimonials (отзывы), credentials (рекомендации, дипломы,
аттестаты); Особенно гарантии приватности вводимой пользователем
информации у полей ввода, например e-mail'a (около инбоксов - <<we
value your privacy>>)
2) графика - security icon (иконки удостоверяющие безопасность -
например, нет спама, нет вирусов, анти хакерство и т.д.)
3) мгновенная посылка сообщения с Thank you или Welcome (с опросом
целевой группы или/и новым предложением) или новая страница с Thank
you
Interactive help (Мгновенная помощь)
1) Пользователю приятно, когда ему ненавязчиво объясняют что для чего
нужно
2) Необходимо располагать так, чтобы опытным пользователм не мешало
3) Пример: Yahoo Sign Up https://edit.yahoo.com/registration?.intl=us&new=1&.done=http%3A//mail.yahoo.com&.src=ym
После нажатия кнопки
Отображается результат действия пользователя и благодарность за
введенную инфу.
Предупреждения
Если после нажатия кнопки submit - система не получила корректных
данных - необходимо оповестить об этом пользователя - но не писать,
что он сделал ошибку или что-то не ввел - не нужно пользователю тыкать
носом как котенка.
Также не нужно писать техническую информацию о сбое - типа error -
you missed field 4
Необходимо очень вежливо попросить пользователя изменить или исправить
или дополнить необходимую информацию
ambex
так как ошибки пользователей неизбежны (они - не роботы).
Поэтому можно рассмотреть способы предупреждений:
1) Оповещать пользователя можно с помощью цвета вокруг поля
заполнения,
и соответствующего текста рядом с полем (как на yahoo),
2) Часто используют вылетающие окна (pop-up), что на мой взгляд
недопустимо...но они встречаются часто - особенно на русскоязычных
сайтах.
3) Наиболее эффективным способом, думаю, можно назвать
изменение цвета фона внутри поля ввода - например с белого на желтый,
и подпись рядом с полем о том, что именно нужно ввести или исправить.
4) Также хороший прием: использование подсказки в виде "облачка" из
комиксов
(см. http://en.wikipedia.org/wiki/Speech_balloon) рядом с полем.
После клика пользователя в поле - облачко исчезает и не мозолит
глаза.
По поводу дизайна форм можно многое почерпнуть из книги
"Студия Дизайна Робин Вильямс 2-е изд."
Не смотря на то, что там рассматриваются англоязычные формы
для печати, важным является тезис:
"Формы для сайтов должны по возможности максимально следовать
тем же основным принципам, что и для печатных форм"