Текстові поля у мобільних додатках: написи і поля введення

Продовжуємо розглядати оптимальні варіанти роботи з текстовими полями з погляду .

➡ ➡ ➡ Читайте попередню частину.

1-mv1jk8rodxelz8j1doynfq

Написи (label) і корисна інформація

Користувач хоче знати, які дані ввести в поле введення і чіткий текст напису є одним з основних способів зробити ваш інтерфейс більш доступним. Напис повідомляє користувачеві мету текстового поля, зберігають свою корисність, коли фокус знаходиться всередині поля і мають нікуди не зникати навіть після завершення роботи в полі для введення.

Ви також можете надати корисну інформацію про контекст поля для введення. Інформація має допомогти користувачам пройти через процес легко і невимушено.

Обмежена кількість слів

Написи – це не допоміжні тексти. Ви повинні використовувати місткі, короткі і описові позначення (слово або два), так щоб користувачі могли швидко сканувати ваші текстові поля.

1-8qj_57advukzvhh73yq_pg
“Phone”, “Check in”, “Check out” – це написи для полів вводу

Якщо Вам необхідна додаткова інформація про поля, корисна інформація може бути відмінним способом усунення плутанини і можливих помилок, з якими користувач може зіткнутися при “спілкуванні” з інтерфейсом.

1-3fhqn7bhquabfk31zr1hbg
Інформація під полем “Phone” – текст довідки. Зображення: Google

Проста мова

Говоріть мовою користувачів. Невідомі терміни або фрази, збільшиють пізнавальне навантаження на користувача. Чітка комунікація і функціональність повинні завжди мати перевагу над професійним жаргоном.

1-p3dj7jrbtbnkkqvc3esvsa
Ліворуч: Нетрадиційна термінологія може ввести користувачів в оману. Праворуч: Термінологія ясна для розуміння навіть не великим знавцям англійської мови

Інлайнові написи (плейсхолдери)

Інлайнові написи чудово підходить для простих полів, таких як ім’я користувача або пароль.

1-knrzbr03ppwjj1ka5bykrg
Зображення: snapwi

Але це буде поганою заміною для окремих написів, коли є більше ніж 2 текстових полів на екрані. Так, вони дуже популярні, і так, вони дійсно виглядають добре, але у них є дві серйозні проблеми:

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

Крім цього, коли користувач бачить щось записане у текстовому полі, він може припустити, що це попередньо заповнений текст і, відтак, проігнорувати його.

Хороше рішення для плейсхолдера – плаваючий напис – коли користувач починає використовувати поле для введення тексту, вбудовані плаваючі написи переходядь поверх поля.

1-5btgqotfdcugqdn2at1lba
Плаваючий вбудовані написи. Джерело: Dribbble

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

Колір написів

Колір напису повинен відображати кольорову палітру вашого додатку, а також відповідати показникам контрастності (не повинно бути занадто яскравих або занадто темних написів).

1-q7wwnvpes3azagdi4h7m6g

Далі буде!

kazhut-dyzajnery-ne-vmiyut-pysaty-5

Вам сподобалося?

Читайте щотижня наші кращі статі про дизайн!

email рассылки

Корисна розсилка!

Все найцікавіше про дизайн і дизайнерів!
А ще свіжі вакансії і трішки гумору)

Ваш email:
email рассылки
Позначки:

Залишити відповідь