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

Часто це просто світлодіодні екрани. На фото Нью Йорк, Барселона, Лондон та Будапешт:

Іноді можуть бути і екрани. Нью Йорк

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

Ті самі таймери у метро з часом від минулого поїзда. На фото видно маленький таймер для машиніста. Фото: «Экономічна правда»

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

Ідеї розміщення таймерів на платформі

Під час розробки екранів метро, були ідеї перенести на станції той самий принцип, як в екранах, і рахувати приблизний час до поїздів, це технічно не було б складно, але щось не пішло. А сьогодні метрополітен радісно прозвітували, що «знайшли партнерські можливості впровадити». І це мало б бути добре, бо ще у 2015 році петицію про таймери підтримали понад 10 тисяч людей. Але навіть така непогана ідея, як таймери, отримала таке жахливе впровадження. І замість таймерів на кожній станції з’явиться 12 додаткових рекламних екранів, на яких додатково буде показуватись таймер. Але лишимо роздуми про причини та саме таку реалізацію, подивимось на виконання і дизайн.

Впроваджені рекламні екрани (з таймером) на станціях. Фото: Київський метрополітен

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

Реклама на весь екран, а раз на 20 секунд вмикається та сама реклама, але з таймером, теж на 20 секунд.

Як можна зробити інакше?

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

Користувачі. Першочергово потрібно виходити з потреб пасажирів. Що їм потрібно на платформі? Можна виділити такі потреби:

• Коли прийде наступний поїзд? А коли ще один?
• В який бік їдуть поїзди на цій платформі?
• До якої станції прямує наступний поїзд (бо у години пік поїзди можуть ходити короткими маршрутами, наприклад до Виставкового центру або Дарниці)?

Дві мови. Оскільки ми робимо інформацію доступною і для іноземців, то варто використати трансліт та переклад. Відокремити одну мову від іншої можна або у просторі, або у часі. Оскільки у нас екрани, то краще рознести мови у часі: в один проміжок часу показується лише одна мова і перемикати їх кожні 10—15 секунд.

Дизайн. крупніше можна показати саме наступний поїзд, а меншим розміром ще 3 наступні. При цьому можна вказувати виключення для коротких маршрутів. Зверху можна лишити додаткову смугу з годинником, датою, днем тижня та погодою (не знаю нащо це потрібно, але якщо і розміщувати, то на другому плані).

Навіть якщо піти «в лоб», то можна вивести лише основний таймер і це буде максимально читабельно.

А з рекламою?

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

• розташування відео зверху, а всієї інформації внизу;
• інформація збоку від відео. При цьому з боковим розташуванням можна подумати над тим, як вмістити ще і додаткові повідомлення від метро.

Якщо одним рядком: 3д-модель → FBX → Reality converter → USDZ → iOS.

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

Метод для iOS

Увесь процес можна вкласти у чотири кроки:

1. Створити 3д-модель у будь-якій програмі, яка може зберегти модель та текстури у форматах OBJ або FBX. Я користуюсь Rhino, в якій створюю модель у розмірах та накладаю текстури з дизайном. Моделі можуть бути зовсім не складними з простих паралелепіпедів та циліндрів. Важливо робити модель або у розмірах 1:1 або 1:10, щоб потім масштаб в AR збігався.

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

3. Apple створили окрему програму — Reality Converter, яка конвертує модель у готову для AR сцену у форматі USDZ. У програмі важливо задача правильні одиниці вимірювання — міліметри чи сантиметри — в залежності від того, в якому розмірі ви робили модель.

Якщо текстури не підвантажились автоматично, можна завантажити їх вручну. Тут також можна завантажити карт нормалей, рефлексів та інших параметрів.

4. Формат USDZ підтримується нативно в iOS з версії 12 і вище. Наприклад, на сайті самого Apple всі їх нові продукти можна подивитись в AR з айфону. Для цього потрібно завантажити кудись файл USDZ і відкрити його у Сафарі на телефоні.

Я створив дуже просту сторінку на нашому хостингу і просто завантажую через FTP модель та зображення-прев’ю, посилання з якої веде на саму модель (на зображенні з’являється позначка AR).

Все. Далі нативне прев’ю дозволяє зробити фото та відео з моделлю в просторі. Я не знаю, як це працює на Андроїді, бо у мене немає на чому протестувати.

Adobe Aero

Нещодавно Adobe випустив застосунок Aero і до нього ще програму яка допомагаю створювати AR-сцени. Застосунок також дозволяє завантажити вашу модель у форматі USDZ і додати в AR, або навіть просто звичайну картинку з телефону можна вивести на віртуальну площину. Ще швидший шлях подивитись, як макет виглядає в середовищі без додаткового моделювання.

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

Наявні схеми

Що можна побачити на цій схемі?

• Цікавий номер маршруту S5. Здається, не вистачає загальної схеми, щоб зрозуміти, які ще є маршрути. В ідеалі інтегрувати їх у схему швидкісного транспорту. Підкажіть, якщо хтось розумію всі нові маршрути.
• Немає трансліту та перекладу всіх назв.
• Білий текст на жовтому зовсім неконтрастний.
• Сумнівний вибір жовтого кольору для лінії, який схожий на колір міської електрички на інших схемах. Краще було б обрати колір, який би відрізнявся від інших кольорів міського швидкісного транспорту.
• Назви зупинок написані всіма великими літерами та під кутом, це погіршує зчитування, при цьому нічого не заважає написати їх рівно.
• Піктограми іншого транспорту в колах схожі одна на одну. Та і позначення всіх автобусів викликає сумнів: для тих, хто вперше їде, номери ні про що не говорять без опису маршрутів, тож достатньо вказати швидкісний транспорт.
• Номери маршрутів електрички зайві, оскільки вони обидва рухаються по колу, просто в різні боки.

Горизонтальний варіант схеми

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

• Прибираємо зайві плашки під текстом, а номер пишемо контрастним до жовтого чорним кольором. Ще можна додати унікальності в ідентифікації цих електричок формою плашки під номером у вигляді спрощеного лого УЗ.
• Повертаємо написи горизонтально, додаємо трансліт.
• Назву маршруту можна прибрати, вона не несе ніякої додаткової інформації, а всі станції можна охопити поглядом.
• Пересадки покажемо тільки на швидкісний транспорт та маршрути до аеропортів.

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

Вертикальний варіант схеми

Лого УЗ, сайт та телефон знизу і невеликі. Тут потрібно зрозуміти, навіщо пасажиру ця інформація. Чи можна поскаржитись за телефоном, чи отримати допомогу. Якщо нічого такого, то можна прибрати цю інформацію.

Візуалізація

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

Якщо у Пінтересті пошукати за словом wayfinding, то можна побачити багато всякої краси.

Результати по запросу wayfinding на Пінтересті. Але це лише ~5% навігаційного проєкту.

Що таке навігація

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

Рішення мають допомагати:

• Зрозуміти, де ти знаходишся.
• Зрозуміти, як все влаштовано навкруги та як побудувати маршрут.
• У точках прийняття рішень зрозуміти, куди рухатись далі (повороти, розгалуження тощо)
• Підтверджувати правильність напрямку по маршруту.
• Ідентифікувати місце, якого дістався.

І якщо спростити, системи навігації складаються з чотирьох типів знаків:
* Орієнтувальні — карти чи схеми для орієнтування у просторі та будування маршруту;
* Напрямні — вказівники у точках прийняття рішень та розгалуженнях;
* Ідентифікаційні — підписують об’єкт, щоб людина зрозуміла, куди потрапила;
* Інформаційні — заборони, обмеження, правила (наприклад, «Проходу немає»).

Типи навігаційних знаків

Процес створення

Створення і життя навігації зазвичай можна розкласти на шість етапів:

1. Розуміння контексту. Для цього є дві складові: місце і люди (користувачі) цим місцем. Потрібно зрозуміти як влаштоване місце, які у нього користувачі та які у цих користувачів потреби і як користувачі сприймають місце.
2. Інфопланування. Планування розміщення майбутніх знаків, створення контенту цих знаків та принципів їх створення.. Мабуть, найвідповідальніший етап, бо не важливо наскільки класний знак, він не буде корисним, якщо він розміщений не там, де потрібно, і говорить не те, що потрібно.
3. Дизайн. Навігація як частина комунікації місця та його бренду. Потрібно створювати універсальний дизайн — для всіх користувачів, та враховувати саме навігаційні нюанси.
4. Тестування. Всі придумані рішення потрібно подивитись в самому середовищі, а краще відтестувати на користувачах.
5. Виробництво та монтаж. Навігація — реальні артефакти та конструкції, які треба виготовити. Для цього потрібні документація та специфікації для виробників, макети всіх знаків та схеми розміщення. Після виробництва всі знаки треба змонтувати на реальні місця, це також варто контролювати.
6. Обслуговування. Після встановлення життя навігації не закінчується, починається процес обслуговування, бо потрібно тримати інформацію актуальною та оновлювати знаки, або відновлювати навігацію після вандалізму.

В наступних частинах ми детальніше подивимось на кожен з етапів.

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

Дальтонізм

Близько 8% чоловіків та 0,5% жінок народжуються з одним із видів дальтонізму. Тому будь-які макети треба перевіряти на доступність при кольоровій сліпоті, особливо, коли одночасно використовуються червоний та зелений кольори.

Adobe

У Adobe Photoshop, Illustrator та InDesign є вбудована функція перевірки макетів на два найпоширеніші види кольорової сліпоти: View / Proof Setup / Color Blindness Protanopia та Deuteranopia type. Для комфортної роботи можете додати гарячу клавішу для ввімкнення цих режимів у Edit / Keyboard Shortcuts.

Перевірка схеми метро на дейтеранопію

Color Oracle

Якщо не прив’язуватись тільки до програм Adode, можна звернутись до більш універсальної програми — Color Oracle. Є версії для MacOS, Windows та Linux. Вона запускається незалежно від інших програм та переводить у режим перевірки на дальтонізм все, що відображується на екрані.

Sim Daltonism

Окремо для Mac є програма Sim Daltonism.

Sim Daltonism

Sketch + Stark

Для тих, хто проектує інтерфейси у Скетчі, є окремий плагін Stark. Ще плагін вміє порівнювати два кольори на контрастність.

Sketch + Stark

Figma + Color Blind

Для Фігми є плагін Color Blind, який копіює артборд чи об’єкт та перетворює його кольори так, як би це бачили люди з дальтонізмом.

Figma та плагін Color Blind

Контраст кольорів

Є такий розповсюджений стереотип: «Усім давно відомо, що жовтий текст на чорному тлі — максимально доступний та читабельний» (або жовтий на синьому, або будь-яка інша пара кольорів, просто найчастіше згадують жовтий). Але це все маячня, звернемось до науки.

Light Reflectance Value

Light reflectance value (LRV) — здатність поверхні певного кольору відбивати світло. Чим більше LRV, тим більше світла відбиває поверхня, тим яскравіший колір. Читабельність тексту напряму залежить від різниці LRV двох кольорів: тла і тексту. Більша різниця — більший контраст та розпізнаваність (legibility) тексту.

Різниця (P) рахується за формулою:

P = [(B1 — B2) / B1] x 100

де B1 — значення LRV світлого кольору, B2 — темного.

Наприклад, для київських адресних покажчиків LRV синього кольору (RAL 5013) дорівнює 3, а LRV білого — 88. Тому за формулою отримуємо контраст кольорів P = (88−3)/88 × 100% = 97%. І для порівняння розрахуємо різницю чорного та жовтого. Чорний — Traffic Black 9017 з LRV = 2 та найбільш «отрутний» жовтий RAL Sulful Yellow 71, з LRV = 71. Отримаємо P = (71−2)/71 × 100% = 97%. Як бачите, різниці по розпізнаваності немає.

Згідно зі стандартом The Americans with Disabilities Act accessibility guidelines (ADAAG) для знаків з піктограмами та текстом рекомендований контраст повинен бути більше ніж 70%. Хоча це не жорстке обмеження, для деяких кольорів 60-70% також працює непогано.

On signage with words or pictograms The Americans with Disabilities Act accessibility guidelines recommend a light reflectance value of 70%, but this is not a strict requirement. Several other color combinations in the 60-70% range also work well.

В Україні доступність регулює стандарт ДСТУ Б ISO 21542 2013 «Будинки і споруди. Доступність і зручність використання побудованого життєвого середовища» (ISO 21542 2011, IDT). У стандарті також використовуються розрахунки різниці LRV. Для тексту рекомендована така ж різниця у 70%.

Уривок з ДСТУ Б ISO 21542 2013 «Будинки і споруди. Доступність і зручність використання побудованого життєвого середовища»

Як розрахувати LRV

Простий калькулятор є у Asi Signage. Але у них замало відтінків і не зовсім ясно, яким реальним кольорам в палітрах RAL чи Pantone вони відповідають.

Приблизні значення LRV для реальних палітр RAL, Pantone та інших можна знайти на сайті e-paint.co-uk.

Саме значення з цього сайту лягли в основу сайту для порівняння контрасту кольорів реальних палітр (RAL, Pantone та інших) — color.a3.kyiv.ua. Працює не ідеально, але основні висновки можна робити.

Контраст кольорів реальних палітр

Ще один приклад від Designworkplan зі зрозумілою матрицею для порівняння основних кольорів.

UPD: інженер Віктор Петрук правильно помітив, що на попередній картинці деякі пари кольорів з низькою різницею контрасту читабельніші за інші пари з більшою різницею. Він порівнює кольори з картинки через яскравість у RGB. Але не коректно порівнювати RBG та LRV. RGB — адитивна колірна модель, яка відтворює зображення за допомогою випромінення світла екрану. LRV — параметр, що описує яскравість світла, яке відбивається від кольорової поверхні (це більше відноситься до субтрактивної моделі, як CMYK). Це все одно, що порівнювати фінальний вигляд картинки на моніторі та на паперовому носії.

Нюанси сприйняття шрифтів

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

Наприклад, шрифт FS Millbank має дві версії: для світлого тла та для темного (із врахуванням внутрішньої підсвітки знаків).

Шрифт FS Millbank

Можна це враховувати при підборі шрифтів для проекту.

P.S.

Ще один ненауковий метод визначення контрастності кольорів — переведення зображення у чорно-білий режим. У такому виді ми відкидаємо будь-який колір та дивимось лише на контраст яскравості. Більша різниця яскравості — краща розпізнаваність.

P.P.S.

Contrast-ratio.com —інструмент для перевірки контрасту для екранів