Зміст
- 1. Не позначайте обов’язкові поля
- 2. Не використовуйте блешні
- 3. Майте лише один тип ґудзиків або, ще краще, лише одну ґудзик на форму
- 4. Шматки поля
- 5. Подумайте, чому ви щось запитуєте, і як це відчуває користувача
- 6. Фініки - це звивисті маленькі хлопці
- 7. Форми як розробник ремесла
- 8. Не використовуйте стовпці у формах
- 9. Не використовуйте два поля, коли одне буде робити
- 10. Будьте приємними
Форми, нічого, що багато дизайнерів ненавидять більше, ніж форми. Вони не обов’язково виявляють творчі здібності, чи ні? Можливо, настав час, коли ми ще раз переглянемо форми і зрозуміємо, що форма, найголовніше, це розмова між користувачем та програмним забезпеченням.
Забудьте про точку та клацніть, форми представляють найбагатшу взаємодію, з якою ми зіткнемось як цифрові дизайнери. Наступного разу, коли у вас з’явиться форма, не думайте, що це лише питання застосування приємних ефектів CSS або додавання приємного розквіту jQuery. У розробці форм набагато більше глибини.
Я протестував сотні форм та розробив кілька складних форм для страхових компаній, взаємодії із бронюванням відпусток та багато іншого. Швидше за все, ви використовували одну з моїх форм за останні кілька місяців.
Ось уроки, про які я хотів би навчитися до того, як почав розробляти форми.
1. Не позначайте обов’язкові поля
Ви знаєте маленьку зірочку, яка позначає обов’язкове поле? Я багато разів бачив, що це не вдається під час тестування користувачів. Як поняття, обов’язкові поля не мають особливого сенсу, вони не мають еквівалента в режимі офлайн. Вони чудово підходять для розробників, оскільки пропонують хороший чорно-білий підхід до завершення. Зірочка та обов’язкове поле не виконуються, оскільки це навчена поведінка. Типова поведінка, яку я бачив під час тестування користувачів, - це те, що користувач заповнює форму вгорі і закінчує, коли їх щось зупиняє або вони натискають кнопку.
Рішення просте, позначте необов’язкові поля, позначте місце, де наш приємний користувач повинен зупинитися, і подумайте, чи потрібно їм заповнювати це поле.
2. Не використовуйте блешні
HTML5 чудовий, чи не так? Він пропонує безліч нових захоплюючих блискучих інструментів, з якими можна пограти. Нам потрібно подумати про доцільність наших нових іграшок. Числове поле тепер містить невеликі стрілки вгору та вниз, щоб користувач міг прокручувати числа.
Тут є дві проблеми. По-перше, за замовчуванням відображення стрілок у браузері робить їх дійсно малими. Дуже прискіпливо натискати, і жирний пальчик серед нас збирається боротися на iPhone. Це називається Закон Фітта, чим менше щось, тим складніше натиснути на нього.
Але я чую, як ти кричиш, ти можеш просто ввести номер прямо в числове поле. Так, ви можете, але давайте подивимось на дисплей браузера, стрілки вгору / вниз, що обертаються, нагадують наш вірний друг - вікно вибору. Користувач, якому вперше було представлено блешню, припустить, що вона нагадує поле для вибору, що вона не може в неї ввести.
Моя порада - триматися чітко, доки вони не стануть звичнішими місцями або розробники браузера не розберуть дизайн за замовчуванням.
3. Майте лише один тип ґудзиків або, ще краще, лише одну ґудзик на форму
Існує маловідомий принцип психології, який називається Законом Гіка. Закон Гіка стверджує, що чим більше варіантів нам пропонують, тим важче зробити вибір. Не ракетобудування, яке я знаю, але правило, про яке варто пам’ятати.
Ви можете допомогти своєму приємному користувачеві, допомагаючи йому зробити вибір. Якщо зробити всі основні кнопки одним кольором і мати лише одну з них на сторінці, це полегшує вибір. Яку кнопку я повинен натискати? О, це просто, це великий кольоровий.
4. Шматки поля
У попередньому житті я вивчав нейронауку і вивчав психологію пам’яті - зокрема короткочасну або робочу пам’ять. Тепер, перш ніж сказати це; ні, місткість короткострокової пам’яті не становить 7 +/- 2, 4 +/- 1, або по-людськи говорять від трьох до п’яти шматків. Ми, як люди, чудово оцінюємо зорові стимули, обмеження полягає в тому, що ми кращі, коли їх кількість менша. Розбиття форми на менші групи полегшує оцінку, оскільки часто те, що користувач повинен ввести у форму, походить з його пам’яті.
Переконайтеся, що ваші групи полів складають приблизно чотири.
5. Подумайте, чому ви щось запитуєте, і як це відчуває користувача
Це, мабуть, найпростіша порада, яку я даю, але часто найменш використана.
Візьмемо наступне:
Піддайте сумніву кожне ваше запитання. Це потрібно? Як відчуваєш запитання про це?
Найчастіше у бізнесу виникає потреба поставити запитання, і ми, як дизайнери, можемо сперечатися про необхідність, поки ми не посиніємо в обличчі. Питання має бути задане. Розуміючи потребу бізнесу в цих даних, ми часто можемо піти на компроміс.
Ми можемо допомогти, сказавши нашому приємному користувачеві, чому нам потрібно задавати це питання. Запевняйте у використанні та обміні цими даними і просто загалом будьте приємні.
Беручи наш приклад ще раз:
Це все ще важке запитання, але, сподіваємось, ми підсолодили таблетку.
6. Фініки - це звивисті маленькі хлопці
Введення дат може бути справжнім випробуванням, і є кілька підводних каменів, яких можна уникнути. Найбільша проблема полягає у вирішенні помилок.
Найпростіший підхід - це запуск календаря. Варто зазначити, що тижні починаються з понеділка у Великобританії та неділі в США. Якщо ваш користувач не зосереджується, він цілком може вибрати неділю, коли мається на увазі понеділок.
Також варто згадати міжнародні формати дат. США ставлять місяць на перше місце, а в Японії це перший рік. Тож дату, як 4/5/12, можна трактувати трьома способами.
Ось чому найкраще використовувати вибрані поля.
7. Форми як розробник ремесла
Форми - це ремесло як для розробників, так і для дизайнерів. Зрозуміти, які можливі помилки можуть бути допущені при введенні даних та розробці вашого внутрішнього коду, щоб справитись - це складна задача.
Ось простий. Введення значення валюти. Можливі помилки, які може зробити користувач, величезні. Форсування форматів даних, з якими користувачі повинні відповідати, неприємно для вашого користувача, і, погодьмось, трохи лінивий з боку розробників.
Що може бути кращим викликом для розробника, ніж створення куленепробивної форми.
8. Не використовуйте стовпці у формах
Великою проблемою використання стовпців у формах є потік. Ми починаємо форму зверху і закінчуємо знизу. При введенні стовпців потік форми може бути порушений.
Не припускайте, що вкладки користувачів перебувають у формах, тому фокус - це спосіб переміщення по формах у стовпцях. Рідко я це бачив під час тестування користувачів. Більшу частину часу ми бачимо введення деталей, клацніть мишею / сенсорною панеллю / пальцем до наступного поля, потім введіть деталі тощо.
9. Не використовуйте два поля, коли одне буде робити
Більшість людей не стосуються друкарських машинок. Під час тестування користувачів ми бачимо людей, які дивляться на клавіатуру під час набору тексту.
Коли ви вводите номер телефону, розділяючи поле форми, скажімо, додайте код міста та номер, викликає реальні проблеми. Користувачі не бачать або навіть не пам’ятають, що є два поля, тому введіть повне число в перше поле, ще гірше, якщо поле обмежене певною кількістю символів.
Використовуйте лише одне поле для номера телефону, те саме стосується номера будинку / вулиці - використовуйте лише одне поле введення тексту.
10. Будьте приємними
Ви будете здивовані, скільки там досить грубих повідомлень про помилки.
Ось приклад одного, з яким я зіткнувся нещодавно.
Сам факт, що вони пропонують вам охоче ввести дату в майбутньому, а потім досить примхлива відповідь, ну це не дуже приємно.
Знову поставте себе на місце користувача, як би ви відчули цю помилку? Роздратований? Може навіть гірше. Бути приємним легко.
Я підготував шпаргалку для шпалер, яка допоможе вам розробити кращі форми. Він включає набагато більше найкращих практичних способів розробки кращих форм.
