Rose debug info
---------------

Олександр Колодько. Про дизайн, міста та дизайн у містах

Пізніше Ctrl + ↑

Основи ергономіки

У минулому пості я згадав книжку «Основи ергономіки» Панеро та Зелника. У мене є лише її скан, тож ділюся всією книжкою (PDF, 210 МБ).

Обкладинка

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

Рівень очей, зріст та кути зору

Так ми колись дивились, які розміри більше підходять для інфостендів, які має бути зручно читати з відстані ~80—100 см: верхня точка — 2000 мм, нижня — 750 мм (а краще 900 мм). Все що вище або нижче читати буде незручно.

В яких межах видно кут
 38   2 міс   дизайн   ергономіка   книжки

Як розрахувати відстань між підвісними знаками

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

Припустимо, що це коридор в перспективі

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

Один знак

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

Розміщення одного знака

Висота розміщення знака (hf) та висота самого знака (hs) — змінні, які ми обираємо в роботі. Наприклад, висота знаків, обумовлена інформацією, яку потрібно показати — 600 мм, а висота розміщення обумовлена висотою підлоги та зручністю зчитування людиною — 2200 мм.

Рівень очей (he) — стала, яку можна статистично розрахувати. У «Основах ергономіки» можна знайти, що середній рівень очей чоловіків — 1740 мм, жінок — 1620 мм. Можна для розрахунків взяти середнє — 1680 мм.

Середній рівень очей. Джулиус Панеро, Мартин Зелник «Основи эргономики», 2006

Відстань до знака (l3) можна порахувати виходячи з розміру текстів, якій потрібно зчитувати. Є дослідження та розрахунки, які говорять, що нормальний розмір літер — 3,4 мм висоти великої літери на кожен 1 м відстані. Такі цифри можна зустріти у гайдлайнах Transport for London (Undergriund / Signs Manual, сторінка 16), вони розраховані на людей з гостротою зору не менше ніж 50% (половина від ідеального) та в основі яких лежать дослідження Transport Research Laboratory. Тож припустимо, що на знаку використані літери висотою 100 мм, тоді середня відстань, з якої зчитуватиметься знак — ~30 м.

Таблиця розмірів шрифтів Transport for London

Два знаки

Коли у нас з’являється вже два знаки, то ближчий знак частково затулятиме віддалений. І щоб один знак не заважав зчитувати другий, потрібно розташувати їх так, щоб людина з необхідної відстані (наприклад, 30 метрів, з якої читається шрифт висотою 100 мм) бачила верхню частину другого знака.

Розміщення двох знаків, коли один затуляє собою інший

Тож перший знак потрібно розташувати на певній відстані (l2) від другого, щоб людина бачила весь знак без перешкод. При цьому у нас з’являється кут  — мінімальний кут між рівнем очей та верхньою точкою знака.

Тепер нам потрібно розрахувати параметри утвореного трикутника. Довший катет ми маємо — це відстань до знака, наприклад, 30 м. Коротший катет — це відстань від рівня очей (he) до верхньої частини знака, яка складається з висоти знака (hs) та різниці висоти знака над підлогою та самим рівнем очей (he).

hs + (hf − he) = 600 + (2200 − 1680) = 1120 мм

У нас є два катети, тож можемо визначити тангенс кута:
tg ⍺ = hs + (hf − he)  / l3 = 1,12 / 30 = 0,037

Знаючи тангенс кута можемо порахувати відстань від людини до ближчого знака:
l1  = hf − he / tg ⍺ = 2,2 м − 1,68 м / 0,037 = 14 м

Тоді відстань між знаками:
l2 = l3 − l1 = 30 − 14 = 16 м мінімальна відстань між підвісними знаками

Коротко

Якщо звести це до однієї красивої картинки та формули отримуємо:

l2 = l3 − (l3 × (hf — he) / (hs + hf − he)),

де

  • l1 — відстань від людини до знака, який розташований раніше
  • l2 — мінімальна від одного знака до іншого, щоб вони не заважали один одному
  • l3 — відстань від людини до знака, який потрібно зчитати, залежить від розміру шрифта
  • hs — висота знаків
  • hf — відстань від підлоги до знака
  • he — висота від підлоги до рівня очей людини (середнє значення 1680 мм)
  •  — кут між рівнем очей та верхньої точки знака


?

Якщо бачите десь помилку у логіці чи розрахунках, напишіть на пошту або у телеграм.

 70   3 міс   wayfinding   навігація

IBAN

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

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

  • копіювати та переслати бухгалтерам чи юристам;
  • копіювати та вставляти у клієнт-банк для оплати;
  • набирати вручну з роздрукованого договору.

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

Друзі з каналу «Юридичний дизайн» пропонують або робити частину цифр жирнішим накресленням, або сірим кольором.

Це розв’язує проблему з копіюванням, але це ризикований варіант, бо:

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

І це гарна дизайнерська задача: як можна залишити весь номер чорним та контрастним, полегшити зчитуваність довжелезного номера та залишити можливість його копіювати?

Псевдопробіли

Моя ідея в тому, щоб додати псевдопробіли міжлітерними інтервалами. Так можна розділити номер візуально і при копіюванні він буде цілісним. Це можна зробити:

  • у Adobe Illustrator, InDesign чи Photoshop збільшивши кернінг після необхідних символів (у панелі Character або натискаючи Alt +→);
  • у MS Word виділивши символ та додавши інтервал у меню Format/Font (⌘D), приклад файлу с таким форматуванням;
    * у вебі огорнувши тегом кожну окрему частину коду та додавши стиль з відступом праворуч (приклад на codepen).
Приклад налаштування міжлітерних відстаней у MS Word

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


?

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

Sublime Text

Sublime Text — дуже потужний текстовий редактор, в якому я постійно пишу код. Є купа доповнень, які дуже просто встановлюються через вбудований Package Control та запускаються через вбудований командний рядок (⌘⇧+P). Окрім кодингу активно користуюсь, коли потрібно щось робити з текстом.

Інтерфейс Sublime Text

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

Мультикурсор

Пошук та заміна одного тексту на інший за допомогою регулярних виразів (regex).

Заміна за допомогою RegEx

Типограф для зверстаного тексту.

Типограф

Безплатний, тільки раз на 10 збережень файлів показує віконце з пропозицією купити. У авторів є ще Sublime Merge — простий графічний git-клієнт. Теж користуюсь, бо консольні команди у мене якось не прижились.

Шрифт Fira Code

На додачу до редактора раджу модифікацію шрифту Fira — Fira Code, як раз для програмування та кодування. У шрифті дуже гарні лігатури для різних стрілок та іншого, з чим увесь код виглядає естетичнішим. Як встановити шрифт у Sublime Text.

Лігатури Fira Code
 20   4 міс   інструменти   дизайн

Автоматизація в дизайні 🤖

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

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

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

1. Глибше знання наявних інструментів

Ті ж Ілюстратор чи Індизайн мають багато корисних функцій, що збільшують продуктивність:

  • Робота зі змінними (Data Merge в Індизайні, Variables в Ілюстраторі), щоб робити багато різних макетів на одному шаблоні.
  • У Індизайні багато можна зробити через стилі елементів та GREP-стилі, особливо якщо перед цим правильно підготувати дані.
  • Скрипти на JavaScript, які можна знайти чи написати самостійно, та повноцінні екстеншени.

2. Інші інструменти та технології

  • Регулярні вирази (regular expressions, regex, GREP). Можна зустріти в Індизайні, чи в інших інструментах. Дозволяють  шукати та замінювати тексти за певними правилами та з певним форматуванням у великих масивах.
  • Google Sheets / Excel. Дуже зручні інструменти для різних обчислювань та підготовки даних у необхідному форматі.
  • Sublime Text. Текстовий редактор, в якому я пишу код. Має багато різних плагінів, які допомагають не тільки писати код, а і, наприклад, сортувати дані. А мультикурсори — взагалі топ.
  • Automator (Mac OS). Дуже потужна штука для різних дій з файлами прямо в ОС. У мене найбільш вживані функції: переведення зображень у різні формати, зміна їхніх розмірів, розділення PDF посторінково.
  • Термінал. Є дуже багато різних команд та скриптів на bash чи python, які створені як раз для простих дій. Наприклад, коли потрібно згенерувати 20+ qr-кодів, бо краще це робити через термінал.
  • JS, PHP та різні вебтехнології дозволяють розв’язувати будь-які задачі. Наприклад, зробити генератор макетів покажчиків чи рахувати час проїзду від однієї станції метро до всіх інших, щоб потім використати у макетах. Але для цього потрібні навички програмування і знання.

Напишіть мені в телеграм, що вам було б цікаво дізнатись? Або з якими повторюваними задачами доводиться стикатись і які б хотілося автоматизувати?

 28   4 міс   автоматизация   дизайн
Раніше Ctrl + ↓