Перш ніж почати, погляньте на це зображення знизу. Чи бачите ви тут якусь проблему?
Ви маєте рацію! Замість складаного тексту виходить абракадабра: "You we'll know showyou how to how to design lead". (Дослівно: "Ви ми знаєте покажемо вам як робити дизайн керувати".)
Насправді якщо прочитати кожен стовпчик окремо, у вас вийде: “Ви знаєте, як робити дизайн. Ми покажемо вам, як керувати”.
Мабуть, ви ставите питанням, наскільки часто трапляються подібні дизайн-помилки? Але спочатку давайте докладніше розберемо, як взагалі може статися.
1. Візуальна ієрархія
Проблема виникає у тому випадку, якщо дизайнер не врахував, як саме людське око сприймає текст.
Як і у випадку з більшістю мов, що використовують латиницю, люди природно починають читати текст, написаний англійською мовою (і російською), з лівого верхнього кута, а потім вивчають його як послідовність горизонтальних ліній, розміщених одна під одною.
Дизайнер може додатково керувати поглядом користувача та спрямовувати його в різні боки, але для цього потрібен дуже уважний підхід до побудови візуальної ієрархії.
Візуальна ієрархія – порядок сприйняття оком різних елементів дизайну. Ви можете дізнатися більше про візуальні принципи в цьому пості.
2. Приклади провальної ієрархії у тексті
Ось ще кілька прикладів неправильної візуальної ієрархії тексту, яка робить повідомлення безглуздими (а найчастіше і кумедними):
Якщо прочитати те, ми бачимо, виходить таке: “Leave as welcomef may all who guests came as riends.” Швидше за все, йшлося про: “Welcome! (Ласкаво просимо! Нехай кожен, хто прийшов до нас як гість, йде як друг).
На плакаті наведено назви страв англійської кухні. Однак через відсутність нормальних відступів між ними всі слова перемішалися. В результаті ми отримуємо mash custard (заварний крем-пюре), crumpet pie (оладки-пиріг) та ploughmans & squeak (орачі та писк). Насправді назви страв повинні читатися так: pie & mash (пиріг з пюре), custard tart (тарт із заварним кремом) / crumpet (крампет або оладки з пористого тіста), pork pie (пиріг зі свининою) / ploughmans (“їжа орака ” — бутерброд із сиром), bubble & squeak (“міхур та писк” — страва з картоплі та капусти).
Можна прочитати “Don't be happy, worry” (Не будь щасливий, турбуйся) замість “Don't be happy” (Не турбуйся, будь щасливий).
Ви бачите тут “Утилізація школярів: ви не можете скористатися твоїми способами? Обидва ці варіанти абсолютно безглузді.
Напевно, було на увазі: "Увага, учні! Вам заборонено брати наші візки і використовувати їх для пересування).
Цю вивіску можна прочитати так: "We're you're not 'til not happy" або так: "We're not 'til you're not happy". Насправді автор намагався сказати: “We're not happy 'til you're not happy” (Ми не можемо бути щасливі, поки не будете щасливі ви).
Отже. Перед нами наступна фраза: “When you order, grill to we smash sear that fresh ball of beef on a hot-buttered the burger you can taste and delicious burger.”
Очевидно це повинно читатися так: “When you order, we smash that fresh ball of beef on a hot-buttered grill to sear the burger you can taste, and delicious burger.” (Коли ви робите замовлення, ми відбиваємо шматок свіжої яловичини і поміщаємо його на розпечений гриль, змащений маслом, щоб підсмажити бургер, який ви зможете спробувати, і це буде дуже смачний бургер).
Практично будь-яка людина побачить тут: “If you hard. Then you hard. Work play. А було на увазі: "If you work hard, then you play hard" (Той, хто старанно працює, добре відпочиває).
3. Схожа проблема
Хоча в цьому випадку наслідки не можна назвати такими ж катастрофічними, у читача виникнуть певні труднощі, якщо дизайнер не зміг належно візуально розмежувати кілька окремих фрагментів тексту.
Ось кілька прикладів:
На обложке название книги и имя автора сливаются в одно целое: “Turtles all the way down John Green”, что можно перевести, как “Черепахи ползут вниз по Джону Грину”. На самом деле название книги: “Черепахи — и нет им конца. Джон Грин”.
Назви двох різних відділів (“Дитячі товари” / “Пиво та вино”) у супермаркеті візуально не розмежовані та читаються як одна пропозиція: “Baby needs beers and wines” (якщо перекладати дослівно – “Дитині потрібне пиво та вино”).
Знак, що обмежує швидкість до 20 миль на годину із зазначенням, що поблизу знаходяться діти, можна прочитати так: “Do not exceed 20 children” (Не перевищуйте 20 дітей).
4. Застережте себе від появи подібних помилок!
Ось кілька порад, дотримуючись яких ви зможете створити зрозумілий дизайн та уникнути непорозумінь.
Прочитайте текст, що вийшов, зліва направо, зверху вниз і перевірте, наскільки правильним є порядок слів;
Якщо ви вирішили розділити текст на кілька окремих блоків або стовпців, переконайтеся, що між ними залишилося достатньо вільного простору;
Перевірте, чи розміщені слова на безпечній відстані;
Пошукайте, чи немає словосполучень, які люди можуть витлумачити неправильно;
Попросіть інших людей подивитись ваш дизайн до передачі готового проекту замовнику;
Не намагайтеся бути розумнішими за інших! Прості рішення завжди є найефективнішими.
Джерело: baselinehq.com