Введение в дизайн сенсорных клавиатур (с памяткой)

Введение в дизайн сенсорных клавиатур

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

Обычно винят размер символов клавиатуры и близость клавиш, но и помимо них есть множество важных аспектов, которые следует обдумать, включая:

Правильное использование словарей автокоррекции,

Адекватное автоматическое выставление заглавных букв,

Подсказки при наборе слов,

Соблюдение порядка табуляции,

Вызов пользовательских клавиатур на постоянной основе.

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

Будучи поставленными лицом к лицу с реализацией сенсорной клавиатуры невысокого качества, пользователи теряют доверие к вебсайту, а некоторые даже сомневаются в своей способности заполнить форму на смартфоне. Очевидно, впечатление от мобильного опыта взаимодействия требует хороших форм, а реализация сенсорных клавиатур является его ключевой деталью.
В этой статье мы внимательно рассмотрим вопросы юзабилити сенсорных клавиатур, включая пять руководств по дизайну, которые устранят некоторые из этих проблем. Руководства – это отрывок из 147 руководств в отчете о юзабилити мобильной коммерции. Мы в свое время здесь, в Smashing Magazine, уже заглядывали в 10 руководств по мобильной электронной коммерции; данные 5 руководств более общие и применяются к любому мобильному вебсайту, где пользователь взаимодействует с сенсорной клавиатурой.

Более того, согласно этим пяти руководствам мы сопоставили мобильные вебсайты 50 самых лучших онлайн-продавцов и обнаружили, что их поразительное количество в 98% не соответствуют одному-двум из руководств, а 70% лучших мобильных вебсайтов не соответствуют по меньшей мере двум из них (по состоянию на 31 июля 2013г.). Хотя на первый взгляд некоторые вещи кажутся очевидными, ясно, что следует обратить на них особое внимание, раз столь многие магазины электронной коммерции, ворочающих миллионами долларов, делают в них ошибки.

1. Отключите автоисправление, если словарь бесполезен (92% не делают этого)

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

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

Как только этот участник тестирования ввел название улицы “westheimer” на вебсайте Toys’R’Us, телефон неверно исправил его на “weathermen” (слева). Однако испытуемый не заметил этого, отправил форму и получил в ответ ошибку валидации (справа).

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

На вебсайтах без валидации результатом стали заказы, отправленные на неверные адреса, если только тестируемый не был особенно внимателен на странице проверки заказа (ведь автоматически исправленные данные часто очень похожи на те, которые следовало ввести, отчего у пользователей еще меньше шансов заметить ошибку). Конечно, автоисправление самым жалким образом подводит не только в крайних случаях (как с “weatherman”), но и самых обычных (и стандартных) аббревиатурах, такой как “Rd”(от road — дорога), исправленной на “Ed.”

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

Обманчиво простая, фактически это чуть ли не самая пренебрегаемая часть юзабилити сенсорных клавиатур; почти каждый топовый мобильный сайт электронной коммерции не понимает этого. При сопоставлении обнаруживается, что 92% из их не отключили автозаполнение в поле адреса. Учитывая серьезность проблем, вызываемых автоисправлением в полях адреса и электронной почты, просто удивительно, в насколько малом количестве сайтов на самом деле отключена автокоррекция.

Выключить автоматическое исправление можно, добавив атрибут autocorrect к тэгу input и установив его на off, как здесь:

<input type="text" autocorrect="off" />

2. Показывайте соответствующую разметку клавиатуры (60% не делают этого)

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

Одно из основных ограничений сенсорных клавиатур на смартфонах – их размеры. Сами буквы микроскопического размера. Фактически, отдельный символ на iPhone 4 в книжной ориентации равен 4 × 5,9 миллиметров.

Сравните его с собственными руководствами Apple по дизайну, где рекомендуется делать все сенсорные элементы интерфейса по меньшей мере размером 6,85 × 6,85 миллиметров, потому что все, что меньше, приведет к очень низкой точности нажатия. (Microsoft и Nokia также рекомендуют минимальную область касания примерно в 7 × 7 миллиметров). В результате получаются вполне предсказуемые ошибки.

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

Для ввода номера кредитной карты на Best Buy активизируется стандартная разметка клавиатуры, поэтому пользователю приходится сначала переключиться на ее цифровой тип со специальными символами (посередине), а затем внести все 16 цифр без единой опечатки. Это стало сложной задачей для многих испытуемых, которые переводили взгляд со своей карты на телефон, пытаясь при этом попасть в миниатюрные кнопки, плотно расположенные друг над другом.

Во время тестирования множество опрошенных обратили внимание на специальные клавиатуры и прокомментировали их положительно. Фактически в iOS область касания клавиши на 471% больше в цифровой клавиатуре, чем в традиционной (209 × 108 px против 52 × 76 px). Еще важнее то, что мы зарегистрировали значительно меньше опечаток при вводе цифр на отображенной цифровой разметке клавиатуры. Это вело к уменьшению ошибок валидации данных, в свою очередь, результатом чего стало более гладкая процедура проведения покупок на таких вебсайтах. Особенно полезным это оказалось в длинных сочетаниях, таких как номера телефонов и кредитных карт.

Слева испытуемый случайно коснулся клавиши с дефисом вместо кнопки “1” из-за маленького размера и плотности расположения кнопок в стандартной разметке клавиатуры. Оптимизированная цифровая разметка клавиатуры подошла бы гораздо больше. На рисунке справа при заполнении пользователем поля “Телефон” на вебсайте GAP появляется специальная оптимизированная для введения телефона клавиатура, демонстрирующая кнопки на 471% больше, чем те, которые находятся на традиционной клавиатуре.

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

Впечатать телефонный номер согласно приведенному здесь примеру формата (“555-555-5555”) в iOS невозможно, потому что разметка клавиатуры не включает символ дефиса. (Интересно, что можно ввести его на Android’е; это показывает, почему тестирование на множестве платформ помогает гарантировать, что не нужно делать форматирование, возможное только на некоторых из них.)

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

Технически существует несколько способов вызова цифровых разметок клавиатуры, а также между ними имеются небольшие различия (например, телефонная разметка против разметки номера), с несколько разным поведением на разных платформах (iOS, Android и т.д.). В общем, два атрибута HTML активируют цифровую разметку клавиатуры, а точнее атрибуты type и pattern.

Атрибут type несет семантическое значение и должен употребляться, только когда для вашего ввода доступен соответствующий тип, что случается с телефонными номерами и адресами электронной почты. Однако для цифровых вводов рекомендуется вместо этого использовать атрибут pattern. (Обратите внимание, что вам, может быть, следует добавить атрибут novalidate, если нужно, чтобы браузер только вызывал клавиатуру, а не навязывал формат.)

Для любых полей с телефонами используйте следующее:

<input type="tel" />

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

<input type="text" pattern="\d*" novalidate />

Для полей ввода электронного адреса используйте следующее:

<input type="email" />

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

Однако, цифровая клавиатура, вызываемая атрибутом pattern, вообще не поддерживается Android’ом; вместо нее активируется обычная алфавитно-цифровая клавиатура. Хотя можно было бы использовать type=»number» для вызова цифровой клавиатуры как на iOS, так и на Android’е, установка типа на number несет семантическое значение, которое во многих случаях не будет подходящим (например, номер кредитной карты – это цифровое сочетание, а не номер).

Следовательно, мы рекомендуем более устойчивую стратегию применения pattern=»\d*», которая производит отличное впечатление в iOS, не имея при этом последствий в других платформах, еще не поддерживающих такое поведение. (Конечно, если поле не представляет число, такое как цена или количество, то очевидно следует использовать type=»number».)

3. Реализуйте последовательный вызов разметок клавиатуры (54% не делают этого)

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

Активация соответствующей разметки клавиатуры для отдельного поля ввода – это отлично (смотрите предыдущую рекомендацию), но убедитесь, что делаете это последовательно во всем своем вебсайте, иначе можете сильно озадачить пользователя. Другими словами, если поле ZIP-кода вызывает цифровую клавиатуру, то все подобные поля должны вести себя так же.

Хотя это кажется очевидным, многие вебсайты не делают последовательного вызова специальных разметок клавиатуры. Например, цветочный магазин FTD (на изображении вверху) активирует цифровую клавиатуру для номера кредитной карты, но не для следующего за ним поля с кодом безопасности, хотя оба эти значения всегда цифровые.
Из 50 самых преуспевающих онлайн-продавцов 54% не делают этого на своих мобильных вебсайтах, где одно или более телефонных, кредитных или CVV полей не вызывают цифровую сенсорную клавиатуру. Эти 54% делятся следующим образом (в абсолютных числах): 24% не активируют цифровые вводы ни для одного из трех цифровых полей (что, даже будучи последовательным действием, очень плохо), а остальные 30% (включая FTD) непостоянны, при этом цифровые разметки клавиатуры активируются только для некоторых полей.

Еще более удивительно то, насколько терялись некоторые из испытуемых во время тестирования юзабилити. Они начинали сомневаться в своей первоначальной интерпретации отдельных полей, считая, что, возможно, требовалось еще что-нибудь. Например, увидев стандартную разметку клавиатуры для поля “Код безопасности карты” (показано на изображении вебсайта FTD выше), опрашиваемые начинали размышлять, был ли это тот самый код из трех цифр на обратной стороне их кредитной карты, или одна из многих других строк, напечатанных на ней.

4. Соблюдайте поведение кнопок “Далее” и “Назад” (4% не делают этого)

Проблема: пользователи либо раздражаются, либо сбиваются с толку, когда кнопки «Далее» (“Next”) и «Назад» (“Previous”) приводят их к нелогично объединенным полям.

Во время исследования испытуемые испытывали трудности с теми вебсайтами, которым не удалось соблюсти поведение кнопок “Next” и “Previous”. Ожидаемое поведение прямолинейно: при щелчке пользователя по кнопке “Next” он ожидает перехода к следующему логическому полю формы без изменений и отправки формы. То же относится к кнопке “Previous”, только в обратном направлении, конечно.

Это – не просто подбор правильной очередности табуляции (хотя и это отличное начало). Все зачастую искажается при работе с динамическими полями, основанными на предшествующем выборе пользователя. В подобных случаях мы наблюдали удаление данных пользователя и нарушение порядка табуляции. Также следует быть особенно осторожными с интерфейсами модифицированных форм. Например в Disney Store специально созданный селектор выбора штата не является частью порядка табуляции (потому что технически не является элементом ввода), и поэтому пользователи переходят прямиком мимо этого поля.

Здесь после введения ZIP-кода (слева), испытуемая нажала кнопку “Далее”, которая переместила ее в выпадающее меню выбора “Вид местонахождения” (справа). Но, как видно, вебсайт очистил введенные опрашиваемой до этого данные. Очевидно, что данные обязаны оставаться при использовании кнопок “Next” и “Previous”.

По сути, эти кнопки функционируют как мобильная версия табуляции клавиатуры; следовательно, они должны перенять те же принципы последовательности, что и табуляция в настольном компьютере. Они обязаны обеспечить быстрый способ перехода из одного поля в другое без необходимости пользоваться указателем (мышью или пальцем). Это особенно важно на мобильных устройствах, потому что пространство экрана так сильно ограничено, что при открытой клавиатуре следующее поле может частично перекрываться, отчего использование кнопки “Next” становится еще удобнее. Хотя кнопки “Next” и “Previous” могут не использоваться всеми пользователями, последствия несоблюдения поведения этих кнопок могут оказаться значительными.

К счастью, большинство вебсайтов предусмотрели это правило. Пока код чистый, мобильные браузеры будут по умолчанию устанавливать порядок табуляции в соответствии с порядком появления полей. Из самых известных мобильных вебсайтов всего 4% не делают этого.

5. Отключите автоматическое введение заглавных букв, где это нужно (38% не делают этого)

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

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

Этот испытуемый заметил заглавную букву “J” и вернулся к этому полю для замены ее на маленькую букву “j”, потому что не был уверен, будет ли работать вариант с заглавной буквой.

Много раз во время тестирования испытуемые обращали внимание на заглавную букву и предпринимали усилия для ее замены на строчную. Большинство объясняло это неуверенностью в том, можно ли вводить заглавные буквы, и являются ли вообще адреса электронной почты чувствительными к регистру. В тех вебсайтах, где отключено автоматическое введение заглавных букв в поле электронного адреса, ни один из тестируемых не вводил первую заглавную букву специально. Таким образом, рекомендуется отключение автоматического ввода заглавной буквы в адресе электронной почты и других соответствующих полях (таких как URL’ы).

Среди топовых вебсайтов мобильной коммерции 38% не отключают автоматический ввода первой заглавной буквы в полях электронного адреса, оставляя их как бы полями ввода обычного текста, и заставляя менее технически продвинутых пользователей испытывать по этому поводу сомнения.

Автоматический ввод первой заглавной буквы можно отключить, добавив атрибут autocapitalize в тэг input и установив его на off, как здесь:

<input type="text" autocapitalize="off" />

Конечно в полях электронного адреса вы должны установить атрибут type на email:

<input type="email" autocapitalize="off" />

В iOS установка type на email автоматически отключит ввод первой заглавной буквы. Но все же устанавливайте атрибут autocapitalize, потому что он также станет работать в iOS и может понадобиться в других платформах, которые все еще не поддерживают тип ввода email или реализуют его по-другому.

Тестирование и памятка

Хотя на первый взгляд все эти фундаментальные правила кажутся очевидными, помните о том, что 98% самых больших в мире вебсайтов мобильной коммерции не следуют по меньшей мере одному из них (смотрите полный список). 70% не соответствуют двум или более из этих правил создания сенсорных клавиатур. Фактически 24% вообще не оптимизировали свои вводы под сенсорные клавиатуры, либо пропустив основные разметки клавиатуры (телефонную, почтовую, цифровую), реализуя их непоследовательно (или последовательно, но плохо), не отключая автоматическую коррекцию там, где это должно, или не отключая автоматический ввод первой заглавной буквы в полях для электронной почты.

Одной из причин подобного несоответствия может быть то, что на большом вебсайте потребуется очень тщательное тестирование для выявления всех промахов — отсюда вытекает третья рекомендация последовательного вызова разметок клавиатуры, о чем в идеале даже не нужно упоминать. Другой причиной, упомянутой в prior Smashing Magazine article, стало то, что мобильный и сенсорный интерфейсы представляют сравнительно новую платформу с совершенно новым способом взаимодействия, требующим внимания к мириадам мелочей — деталей, которые мы, будучи веб-дизайнерами и разработчиками, еще не привыкли активно рассматривать и создавать их дизайн.

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

Интерактивная памятка для создания сенсорных клавиатур с оптимизированным под мобильные устройства демо-примером. Эти поля обычно включаются в следующие типы форм: регистрация аккаунта, вход в аккаунт, поиск, опросы, общий процесс проверки, формы комментариев и контактные формы. Советуем пересмотреть ваши хранилища кода в поисках примеров.

Автор: Christian Holst

Источник: http://uxdesign.smashingmagazine.com/

Редакция: Команда webformyself.

Хотите научиться создавать шикарные дизайны сайтов?

Получите бесплатную пошаговую обучающую систему по веб-дизайну

Получить

Метки: ,

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree