Вам колись доводилося замислюватися про те, коли ви вперше стикнулися з дизайном програм або операційних систем, де переважав темний колір фону? Можливо, цей досвід пов'язаний з користуванням операційною системою iOS 13, Windows 10, або ж під час роботи з додатками такими як Spotify чи Winamp, а може, ваш перший досвід був навіть на одному з історичних комп'ютерів від IBM.
Компоненти темної теми від Marcin Krupiński, Dribbble
Ви готові?
Я хочу запросити вас на захоплюючу подорож, де ми вивчимо ключові моменти, що сприяли змінам у популярності темних дизайнів інтерфейсів. Ми зосередимо увагу на трьох основних сферах:
- Візуальні аспекти, включаючи моду, стилістику та вплив на сприйняття.
- Технологічні аспекти, від перших комп'ютерів до останніх розробок у сфері віртуальної реальності.
- Здоров'я, з акцентом на вплив на людину, її фізіологію та зорове сприйняття.
Ці знання можуть стати вам у пригоді, дозволяючи приймати обдумані стратегічні рішення щодо дизайну ваших цифрових продуктів у майбутньому.
UI/UX для Harman Kardon Citation от Cristian Lorca, Behance
Раніше, ніж ви думали
Темні інтерфейси насправді існують стільки ж, скільки і самі комп'ютери. Понад чотири десятиліття тому, у 1981 році, вибір темного фону для перших IBM комп'ютерів був зумовлений необхідністю обійти технічні обмеження. Проблеми з якістю відображення білого кольору на ранніх моніторах призводили до того, що для зменшення візуальних спотворень було вирішено використовувати чорний фон. Таким чином, перші CLI (інтерфейси командного рядка) комп'ютери відрізнялися саме таким дизайном.
Основною перевагою темного кольору було його здатність приховувати візуальні недоліки, наприклад, мерехтіння екрану, що було обумовлено технологічними обмеженнями того часу.
IBM 3180 фільму "Дуже дивні справи", TJ HardyPRO, ArtStation
З таких міркувань для тексту та знаків обрали зелений колір, котрий забезпечував стабільне світіння аж до моменту оновлення зображення на екрані, що дозволяло зменшити видимість чорних ліній.
Зробити технології доступнішими для широкого кола користувачів
У міру того, як технології розвивалися, дизайнерам відкрилися нові горизонти для креативності. Вони врахували, що темні екрани можуть виглядати відштовхуюче для тих, хто не звик до складнощів інтерфейсів...
...таким чином, з метою зробити цифровий світ більш привітним, інтерфейси почали імітувати звичні реальні предмети та поверхні.
Це відкрило шлях до ери світлих інтерфейсів, Light UI, котрі своїм виглядом нагадували білі листи паперу з чорним текстом — чим більше новинка відповідає звичним уявленням, тим більша ймовірність її успіху серед споживачів.
Застосунок Microsoft Family Safety App от Microsoft Design, Dribbble
Недолік: Темний інтерфейс не відтворює звичний для користувачів навколишній світ
Підстава: Маркетингова стратегія, орієнтована на масового споживача
Оптимальним втіленням ідеї відтворення реальності у цифровому просторі служить текстовий процесор із принципом WYSIWYG (What You See Is What You Get — отримуєш те, що бачиш), який надає можливість попередньо переглянути на моніторі, як буде виглядати документ після друку.
MacWrite (1984) — текстовый редактор WYSIWYG
Лише одна сфера залишилася недоторканою
Тенденція до зменшення використання темних інтерфейсів торкнулася більшості індустрій, але знайшлася виняткова галузь, яка вистояла — автомобільна промисловість. Для кожного, хто хоча б раз сидів за кермом, не секрет, що безліч уваги потрібно віддавати дорозі, особливо під час негоди чи в години пік. Ви коли-небудь замислювались, чому більшість приладових панелей (чи аналогових, чи цифрових) оснащені темним фоном з контрастними піктограмами?
У повсякденних деталях криються обдумані рішення, прийняті дизайнерами.
Автомобільний розумний пошук HMI, Глеб Кузнецов, Dribbble
Уявіть ситуацію: ви не вимкнули внутрішнє освітлення в машині. Замість того, щоб увага була прикута до нічної дороги, ви бачите своє відображення в склі, а яскраве світло розсіює вашу увагу. Ви не можете сконцентруватися на дорозі. А тепер уявіть, якби весь інтерфейс автомобіля світився так само яскраво. На щастя, було прийнято мудре рішення зробити підсвічування лише для значків та показників.
Перевага: Зменшення відволікання завдяки тому, що не потрібно фіксувати погляд на інтерфейсі.
Основна причина: Забезпечення безпеки та зосередження уваги на ключових аспектах водіння.
Автомобільний інтерфейс, Vladimir Gnatovych, Dribbble
Вирішальний момент
Існує ще одна вагома перевага темних дизайнів. Вони сприяють швидшому виявленню інформації, адже наш зір інстинктивно притягується до світлих деталей на темному фоні. Ефективність цього явища була підтверджена експериментом з відстеженням погляду, який провела компанія Cuberto. Результати, представлені у вигляді теплових карт, наглядно демонструють, наскільки інтенсивніше ми реагуємо на контент у темних порівняно зі світлими інтерфейсами. Різниця була вражаючою!
Перевага: Здатність користувачів більш оперативно ідентифікувати необхідну інформацію та концентрувати увагу на ключових елементах.
Підстава: Відсутність можливості детально аналізувати інтерфейс.
Результати айтрекінг-дослідження: порівняння світлого та темного UI, Cuberto, Instagram
OLED
На зорі розвитку програмного забезпечення, чорний інтерфейс був обраний через обмежені можливості екранів. Відтоді OLED-технологія (органічні світлодіоди), яка була представлена Sony, відкрила нові перспективи. Її унікальність полягає в здатності кожного пікселя незалежно від інших випромінювати світло, дозволяючи чорним пікселям (#000) залишатись вимкненими. Це означає, що при переважанні чорного кольору на екрані, значна його частина не споживає енергію, забезпечуючи економію.
Щоб краще уявити енергоефективність, уявіть, що ви учасник вікторини, де на кону стоїть мільйон доларів. Ведучий з посмішкою задає вам питання, відповідь на яке ви знаєте не гірше за всіх:
Аккаунт Роналду в Instagram слідкують 450 мільйонів користувачів. Споживання енергії всіма його підписниками, які переглядають одне його фото, еквівалентне роботі протягом однієї години:
A. 8 пасажирських літаків
B. 360 легкових авто
C. 2400 моторних човнів
D. 720 000 ігрових ноутбуків
Задумайтесь, не поспішайте з відповіддю. Отже, ухвалили рішення? Цього разу ваш вибір виявився вірним, адже усі варіанти були правильними. Сумарне енергоспоживання підписників, які переглядають одне фото, можна порівняти з роботою, скажімо, 360 авто потужністю 200 к.с. за годину, що становить 54 мільйони ват-годин!
Якщо ви вважаєте, що як розробник програм, ви ніяк не впливаєте на цей процес, то ось де на сцену виходить темний режим і вже згадані OLED-екрани. Звісно, реальне споживання енергії екраном залежить від цілого ряду чинників, таких як дизайн програми та обрана яскравість.
Глибший аналіз здійснили спеціалісти Google. Їхні висновки були оприлюднені на Android Dev Summit 2018, саме того року, коли Android отримав темний режим. Вони провели порівняння енергоспоживання за різних кольорових схем, і ось які дані вдалося отримати:
Енергоспоживання дисплея в Youtube — світлий режим проти темного, Android Dev Summit 2018
За яскравості 50% економія енергії для темного режиму порівняно зі світлим досягала 14%, а за яскравості 100% ця різниця становила цілих 60%!
З появою темного режиму в Google Maps, зафіксовано зниження споживання енергії на 8% при середній яскравості та на 31% при максимальній. Це особливо критично для картографічних сервісів. Уявіть, ви вирушили в авантюру по безкрайніх, загадкових джунглях, де зарядний пристрій - рідкість. Збереження заряду для доступу до навігації стає пріоритетом.
Розглянемо вплив на екологію. Використання темного режиму сприяє економії енергії, роблячи його більш екологічним порівняно з яскравими налаштуваннями.
Перевага: Ефективне споживання енергії на OLED-дисплеях забезпечує менший вплив на довкілля.
Причина: Збереження природних ресурсів.
watchOS 7, apple.com
Наше життя немислиме без постійного використання екранів, що вимагає від батарей тривалої роботи. Це змушує розробників смарт-годинників та мобільних додатків вдаватися до темного дизайну.
А як щодо вас?
Довга робота з екраном у темряві викликає втому очей. Нерідко це призводить до синдрому комп'ютерного зору (CVS), який може проявлятися сухістю в очах, розмитим зором чи головним болем. Темний режим значно зменшує світлове випромінювання та знижує навантаження на очі, що робить користування пристроями зручнішим у погано освітлених умовах.
Перевага: Комфорт для очей в умовах недостатнього освітлення, наприклад, вночі.
Причина: Запобігання негативному впливу на здоров'я користувачів.
Очевидно, це стосується моментів, коли ми зіштовхуємося з дуже слабким зовнішнім освітленням та високим рівнем яскравості нашого екрану. Навпаки, у яскравий сонячний день на узбережжі, контрастність темного дизайну настільки знижується, що ми мусимо докласти зусиль, аби розібрати важливу інформацію. Такі умови можуть негативно вплинути на наш зір.
Недолік: Під сильним сонячним світлом контрастність темного дизайну стає надто низькою.
Мета: Зменшити ризик пошкодження зору.
При розробці нового цифрового продукту не слід обмежуватися однозначним вибором. Багато сучасних програм пропонують користувачам вибір зручного для них режиму або автоматично адаптуються до умов освітлення, як, наприклад, в Google Maps, де інтерфейс змінюється залежно від зовнішнього середовища. Світла тема активується в сонячні дні, а у погано освітленому тунелі — переходить на темну.
Надайте вибір користувачеві, забезпечте його потреби, і якщо вам відомо, що користувач зосереджується на критичних завданнях, наприклад водінні, запропонуйте автоматичну зміну налаштувань.
CRM-панель керування, темний дизайн від Marcin Krupiński, Dribbble
Крім того, це сучасний тренд
Чи були вам відомі всі ці переваги та недоліки темного інтерфейсу, коли ви з ним зустрілися? А може ви подумали, що ця тема набула популярності, тому що вона виглядає стильно? Частково це так.
Темний режим приваблює користувачів своїм новаторським та сучасним виглядом, особливо серед тих, для кого технології є частиною повсякденного життя. Розробники намагаються привернути увагу таких користувачів, оновлюючи дизайн своїх продуктів.
Темний режим користується популярністю серед користувачів соціальних мереж (Facebook, Instagram, Twitter, Reddit), програм для роботи в нічний час (Adobe CC, Microsoft Visual Studio Code, OBS Studio) та розважальних платформ (Spotify, Netflix, Steam, Oculus VR).
Перевага: Підходить для різних галузей та відповідає смакам багатьох користувачів, особливо технічно підкованих.
Причина: Люди використовують продукти, які їм подобаються та надихають їх.
Втім, є сектори, де чорний колір може навівати на думки про щось невеселе. Уявіть, що ви шукаєте медичну консультацію в застосунку, який нагадує вебсайт ритуальних послуг, де знайти контакт лікаря можна лише через кнопку, що випромінює світло, наче кінець тунелю.
"Дизайн - це мистецтво спілкування, яке вимагає інтуїтивного розуміння особи, до якої воно спрямоване".
Культурні розбіжності можуть викликати різні емоції у людей, тому необхідно бути готовим до змін та відкритим до нових ідей.
Недолік: Асоціації з чимось небажаним у конкретному контексті.
Причина: Невдало обраний дизайн може викликати негативні емоції.
Підсумок
Отже, ми дійшли до нашого часу. Кожен елемент вплинув на застосування темного режиму в певних індустріях. Ми повернулися до початку, але технології вже вказують нам новий шлях, пропонуючи очевидні переваги, які зачіпають навіть тих, хто раніше з ними не стикався.
"Технології розвиваються швидко, в той час як людська натура залишається більш сталою. Принципи дизайну ґрунтуються на глибокому розумінні людської сутності та завжди залишаються актуальними".
Всі переваги:
- Чорний колір приховує технічні обмеження, як-от мерехтіння екрану
- Зменшує розсіяність уваги користувачів
- Дозволяє швидше зорієнтуватися на важливі елементи
- Знижує енергоспоживання на OLED-дисплеях
- У темних умовах знижує втому очей
- Відповідає потребам різноманітних галузей та вподобань користувачів, особливо технічно освічених
Всі недоліки:
- Не відтворює звичний реальний світ для користувачів
- У яскравому освітленні контрастність стає недостатньою
- Може викликати негативні асоціації в певних ситуаціяхS
Індивідуальні сприйняття та асоціації, обмеження та переваги технологій, а також їхній вплив на здоров'я людей та екологію, на мою думку, відіграють ключову роль у виборі дизайну. Коли ви наступного разу будете обговорювати з колегами концепцію нового інтерфейсу, ви матимете на озброєнні потужні аргументи, підкріплені фактами.
Оснащені цими знаннями, ви зможете обґрунтовано підходити до вибору рішень. Спілкування з замовниками, командою та обгрунтування потреби в темному інтерфейсі, хоча б як альтернативного варіанту, стане для вас простішим.
