Принципи зручності для текстів в інтерфейсах

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

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

Ну а помітна граматична помилка зіпсує його загальне враження від продукту. І від дизайну також.

Іноді дизайнерам доводиться брати на себе задачу копірайтера. Але це не єдина причина, чому корисно розуміти, як слід підходити до текстів для інтерфейсів. Часто саме дизайнер першим бачить, як тексти виглядають в реальному макеті. До того ж, буває, що вам просто не передали своєчасно потрібний текст, а макет здати все одно потрібно.

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

Ключові рекомендації щодо текстів в інтерфейсах

Використовуйте гротескні шрифти для інтерфейсних елементів

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

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

Ось чому в дизайн-системах в якості системних шрифтів завжди використовують гротески.

Антиквенні шрифти тим не менш добре працюють з великими масивами тексту — скажімо, статтями. Через це, наприклад, в Human Interface Design є другий системний шрифт New York — саме для цього контексту.

Заголовкові шрифти в інтерфейсному дизайні ліпше взагалі не використовувати.

До базового шрифту корисно використовувати ті ж вимоги, що й до основного тексту

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

Скажімо, геометричний гротеск Century Gothic майже напевно створить для вас в інтерфейсі чимало клопоту, адже має цілу низку особливостей будови, незручних в інтерфейсному дизайні.

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

  • Дещо спрощений нарис
  • Більші рядкові літери
  • Великий трекінг в малих масштабах шрифту
  • Менша ширина символів

Окрім формальних рекомендацій є ще й змістовні.

В текстах має легко зчитуватись ієрархія змісту

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

Тексти в інтерфейсних елементах повинні бути лаконічними

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

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

Ось чому, коли ви працюєте з копірайтерами, корисно відразу рекомендувати їм писати тексти з огляду на максимально допустиму кількість символів.

Тексти повинні бути зрозумілими та швидко сприйматись

Тексти для інтерфейсів повинні бути не лише лаконічними, але й максимально зрозумілими.

Уникайте жаргону типу «Мерчанти» або «Юзери».

Не нехтуючи компактністю тексту, шукайте найзрозуміліше формулювання. «Вхід» — ліпше, ніж «Авторизація в системі».

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

Манера спілкування має бути адаптована під цільову аудиторію

Завжди думайте про користувача — його вік, очікувану манеру спілкування. Тексти в інтерфейсах адресовані певним цільовим аудиторіям, і коли ви їх створюєте, важливо про це пам’ятати. Неприпустимо звертатись на «ти» до клієнта банку.

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

Тексти повинні бути грамотними

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

Тексти повинні бути осмисленими

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

Це неправильний підхід. Перше, що має робити дизайнер під час верстки будь-якого елементу, який містить текст, — читати його, аналізувати.

В оформленні статей це допоможе підібрати відповідний формат, доречні ілюстрації чи декоративні прийоми. В спливаючих підказках чи формах — правильні іконки. А іноді — просто помітити чужу помилку і не пропустити її до готового продукту.

Ілюструйте зміст за кожної нагоди

Текст — це один зі способів описати певний зміст. Але не єдиний, і не завжди оптимальний. Добре відомо, що часто ліпше один раз побачити, ніж декілька разів почути (або у випадку текстів — прочитати).

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

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

Сповіщайте про помилки одразу

Якщо користувач заповнив якісь поля невірно — краще про це повідомляти, щойно помилка сталась. І, якщо можливо, зазначати, що саме не так. Для цього поле змінює оформлення, як правило, на червонувате, а поруч з формою (найліпше, під нею) з’являється текст з роз’ясненням помилки та рекомендацією того, як її виправити.

Створюйте стан відправленої форми

Не забувайте про стан вдалого відправлення форми. Часто дизайнери оформлюють лише саму форму, і розробники створюють цей стан на свій розсуд. Щоб такого не сталось, треба зробити стан відправлення форми та описати в ньому, що має відбутись далі. Наприклад, сповістити користувача, що тепер йому на пошту прийде лист з подальшими інструкціями, а якщо лист не прийшов — слід перевірити теку «спам».

Готуйте оформлення автоматичних листів

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

В кнопках використовуйте дієслова (коли це доцільно)

Кнопка — це елемент, що призводить до дії. І, відповідно, написи на кнопках мають передавати сенс певної дії. А для цього корисно використовувати дієслова. Наприклад «Шукати» для поля пошуку або «Надіслати» для відправлення листа чи повідомлення в чаті.

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

Доповнюйте важливі кнопки іконками

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

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

·
3326
·
2
·
goodsuper 34
Головна