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

19

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

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

Правильне використання словників автокорекції,

Адекватне автоматичне виставлення великих літер,

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

Дотримання порядку табуляції,

Виклик користувальницьких клавіатур на постійній основі.

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

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

Будучи поставленими лицем до лиця з реалізацією сенсорної клавіатури невисокої якості, користувачі втрачають довіру до вебсайту, а деякі навіть сумніваються у своїй здатності заповнити форму на смартфоні. Очевидно, враження від мобільного досвіду взаємодії вимагає гарних форм, а реалізація сенсорних клавіатур є його ключовою деталлю.
У цій статті ми уважно розглянемо питання юзабіліті сенсорних клавіатур, включаючи п’ять посібників з дизайну, які усунуть деякі з цих проблем. Керівництва – це уривок з 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, як тут:

2. Показуйте відповідну розмітку клавіатури (60% не роблять цього)

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

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

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

Порівняйте його з власними керівництвами Apple по дизайну, де рекомендується робити все сенсорні елементи інтерфейсу щонайменше розміром 6,85 × 6,85 міліметрів, тому що все, що менше, призведе до дуже низької точності натискання. (Microsoft і Nokia також рекомендують мінімальну область дотику приблизно в 7 × 7 міліметрів). В результаті виходять цілком передбачувані помилки.

Але, помінявши один-два атрибута в коді полів введення, можна проінструктувати телефон свого користувача, що йому слід автоматично показувати клавіатуру, оптимізовану під запитуваний enter. Наприклад, можна викликати для поля вводу кредитної картки цифрову клавіатуру, для поля введення телефону – телефонний, а для адреси е-мейл – клавіатуру електронної пошти. Таким чином, користувачеві не доведеться перемикатися з звичайної розмітки клавіатури і, у випадку з цифровими вводами, це мінімізує помилки, так як в спеціальних клавіатурах клавіші набагато більше, таким чином знижується шанс випадкового дотику.

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

Для введення номера кредитної карти на Best Buy активізується стандартна розмітка клавіатури, тому користувачеві доводиться переключитися на її цифровий тип зі спеціальними символами (посередині), а потім внести всі 16 цифр без єдиної помилки. Це стало складним завданням для багатьох піддослідних, які переводили погляд зі своєї карти на телефон, намагаючись при цьому потрапити в мініатюрні кнопки, щільно розташовані один над одним.

Під час тестування безліч опитаних звернули увагу на спеціальні клавіатури і прокоментували їх позитивно. Фактично в iOS область торкання клавіші на 471% більше в цифровій клавіатурі, ніж у традиційній (209 × 108 px проти 52 × 76 px). Ще важливіше те, що ми зареєстрували значно менше помилок при введенні цифр на відображеної цифровий розмітці клавіатури. Це вело до зменшення помилок валідації даних, у свою чергу, результатом чого стало більш гладка процедура проведення покупок на таких веб-сайтах. Особливо корисним це виявилося в довгих поєднаннях, таких як номери телефонів і кредитних карт.

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

Зліва випробуваний випадково торкнувся клавіші з дефісом замість кнопки «1» з-за маленького розміру і щільності розташування кнопок в стандартній розмітці клавіатури. Оптимізована цифрова розмітка клавіатури підійшла б набагато більше. На малюнку праворуч при заповненні користувачем поля «Телефон» на вебсайті GAP з’являється спеціальна оптимізована для введення телефону клавіатура, демонструє кнопки на 471% більше, ніж ті, які знаходяться на традиційній клавіатурі.

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

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

Надрукувати телефонний номер згідно з наведеним тут прикладом формату («555-555-5555») в iOS неможливо, тому що розмітка клавіатури не включає дефіс. (Цікаво, що можна ввести його На е; це показує, чому тестування на безлічі платформ допомагає гарантувати, що не потрібно робити форматування, можливе лише на деяких з них.)

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

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

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

Для будь-яких полів з телефонами використовуйте наступне:

Для будь-яких інших полів, де потрібно викликати цифрову клавіатуру, застосовуйте це:

Для полів введення електронної адреси використовуйте наступне:

Як вже згадувалося, є кілька відмінностей між типами цифровий розмітки клавіатури, а також деяка різниця між мобільними платформами. Наприклад, в iOS вищенаведений код активації телефонної розмітки справив би клавіатуру, яка надає користувачу можливість вводити цифри та невеликий набір спеціальних телефонних символів і сепараторів, тоді як код активації цифрової клавіатури дасть користувачу можливість вводити тільки цифри. У той же час на На е розмітка телефонної клавіатури також викликається, але з великою кількістю спеціальних символів, що дозволяють більш багате форматування телефонного номера.

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

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

3. Реалізуйте послідовний виклик розміток клавіатури (54% не роблять цього)

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

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

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

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

Ще більш дивно те, наскільки губилися деякі з випробуваних під час тестування юзабіліті. Вони починали сумніватися у своїй первісній інтерпретації окремих полів, вважаючи, що, можливо, потрібно ще що-небудь. Наприклад, побачивши стандартну розмітку клавіатури для поля «Код безпеки карти» (показано на зображенні вебсайту FTD вище), опитувані починали міркувати, чи був це той самий код з трьох цифр на звороті їх кредитної картки, або одна з багатьох інших рядків, надрукованих на ній.

4. Дотримуйтесь поведінка кнопок «Далее» і «Назад» (4% не роблять цього)

Проблема: користувачі або дратуються, або збиваються з пантелику, коли кнопки «Далее» («Далі») і «Назад» («Previous») приводять їх до нелогічно об’єднаним полів.

Під час дослідження випробовувані відчували труднощі з тими вебсайтами, яким не вдалося дотримати поведінку кнопки «Next» і «Previous». Очікуване поведінка прямолінійно: при натисканні користувача кнопку «Next» він очікує переходу до наступного логічного поля форми без змін і відправки форми. Те ж відноситься до кнопки «Previous», тільки в зворотному напрямку, звичайно.

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

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

Тут після введення ZIP-коду (ліворуч), випробувана натиснула кнопку «Далі», яка перемістила її в випадаюче меню вибору «Вид місцезнаходження» (праворуч). Але, як видно, вебсайт очистив введені опитуваної до цього дані. Очевидно, що дані зобов’язані залишатися при використанні кнопки «Next» і «Previous».

По суті, ці кнопки функціонують як мобільна версія табуляції клавіатури; отже, вони повинні перейняти ті ж принципи послідовності, що і табуляція в настільному комп’ютері. Вони зобов’язані забезпечити швидкий спосіб переходу з одного поля в інше без необхідності користуватися покажчиком (мишею або пальцем). Це особливо важливо на мобільних пристроях, тому що простір екрана так сильно обмежена, що при відкритій клавіатурі таке поле може частково перекриватися, через використання кнопки «Next» стає ще зручніше. Хоча кнопки «Next» і «Previous» можуть не використовуватися всіма користувачами, наслідки недотримання поведінки цих кнопок можуть виявитися значними.

На щастя, більшість вебсайтів передбачили це правило. Поки код чистий, мобільні браузери будуть за замовчуванням встановлювати порядок табуляції згідно з порядком появи полів. З найбільш відомих мобільних вебсайтів всього 4% не роблять цього.

5. Вимкніть автоматичне введення великих літер, де це потрібно (38% не роблять цього)

Проблема: майже всі досліджувані вважали, що адреса електронної пошти зобов’язаний писати малими літерами, тому автоматичне введення цих даних з великої літери додає до процесу непотрібні розбіжності.
Поведінка смартфонів за замовчуванням – автоматичне введення першої великої літери в стандартних текстових полях, що зазвичай бажано.

Однак у деяких випадках бажано відключення цієї функції, особливо для адрес електронної пошти, які більша частина випробуваних воліла б писати з маленької букви.

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

Цей випробуваний помітив заголовну букву «J» і повернувся до цього поля для заміни її на маленьку букву «j», бо не був упевнений, чи буде працювати варіант з великої літери.

Багато разів під час тестування випробовувані звертали увагу на заголовну букву і робили зусилля для її заміни на малу. Більшість пояснювало це невпевненістю в тому, чи можна вводити великі літери, і чи є взагалі адреси електронної пошти чутливими до регістру. У тих вебсайтах, де відключено автоматичне введення заголовних букв в поле електронної адреси, ні один з протестованих не вводив першу, заголовну літеру спеціально. Таким чином, рекомендується відключення автоматичного введення великої літери в адресі електронної пошти та інших відповідних полях (таких як ДО s).

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

Автоматичний ввід першої великої літери можна відключити, додавши атрибут autocapitalize в тег input і встановивши його на off, як тут:

Звичайно в полях електронної адреси ви повинні встановити атрибут type на email:

У iOS установка type на email автоматично відключить введення першої великої літери. Але все ж встановлюйте атрибут autocapitalize, тому що він також стане працювати в iOS і може знадобитися в інших платформах, які все ще не підтримують тип введення email або реалізують його по-іншому.

Тестування і пам’ятка

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

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

З цієї причини ми закінчимо свою статтю пам’яткою про найбільш часті помилки при роботі з полями вводу для сенсорних інтерфейсів поряд з кодом, який можна скопіювати і вставити, і оптимізованим під мобільний сенсорний інтерфейс демо-прикладом полів, що викликають правильні клавіатури, що можна використовувати як контрольний список при створенні дизайну та розробці мобільних і планшетних оптимізованих вебсайтів.

Інтерактивна пам’ятка для створення сенсорних клавіатур з оптимізованим під мобільні пристрої демо-прикладом. Ці поля зазвичай включаються в наступні типи форм: реєстрація аккаунта, вхід в обліковий запис, пошук, опитування, загальний процес перевірки, форми коментарів і контактні форми. Радимо переглянути ваші сховища коду в пошуках прикладів.