Сергій Валюх, засновник діджитал агенції Tubik, що спеціалізується на UI/UX рішеннях для сайтів та мобільних додатків, розповів, чому дизайнерам важливо «вміти в UI», і чому якісно красивий дизайн — це не прикрашання задля перемоги на Awwwards, а конкурентна перевага.

Photo by moren hsu on Unsplash  

До нас на перевірку приходить багато виконаних тестових завдань на вакансію дизайнера інтерфейсів. У більшості одна й та сама проблема: дуже роздута частина з пошуком рішень і UX, але слабкий візуал.

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

Тут досить спроєктувати 3-4 основні екрани з промальованим сценарієм однієї дії, а люди часто надсилають текстову «пояснювальну записку» на 100 сторінок з дослідженням проблематики, прототипи і флоу готового продукту в форматі blue print. Іноді десь збоку можна знайти пару екранів з UI, який є просто перефарбованим UX.

Таке відчуття, що UI робився за останні 15 хвилин, і в підсумку виглядає як вайрфрейми просто пофарбовані в кольори. За час карантину всі переглянули купу одних і тих же воркшопів, пройшли масу курсів (хороших і не дуже) в бажанні стати кращими і експертнішими для вдумливої ​​роботи над великими продуктами.

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

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

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

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

Приклад. У мобільній версії Google Chrome є така функція: коли ми робимо довгий свайп вниз екраном, зверху екрану з’являються три кнопки (нова вкладка/ перезавантаження/ закрити вкладку). Не забираючи палець можна вибрати будь-яку з кнопок і швидко виконати необхідну дію. Цей контролер супроводжується приємними анімаціями й тактильним відгуком (вібрації при переході від кнопки до кнопки). Звісно, цей функціонал продубльований і в стандартній навігаційній панелі, але його наявність є приємним бонусом у використанні. Такі штуки треба закладати ще на стадії UX, продумуючи стилістику і тип анімацій.

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

З прикладів: 1) Ракетою приємніше користуватися, ніж Glovo, тому що процес трекінгу і доставки організований в ігровій формі; 2) анімація автомобілів і банерів, що визирають, в Uklon і Uber створює враження стеження за картою і таксі в реальному часі; 3) у Pinterest приємно скролити фід.

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

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

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

«Намалювати красиво» можуть люди з якісним художнім бекграундом і світлим розумом на додачу, таких дуже мало, від цього і брак таких на ринку праці.

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

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

Звісно, студенти не стануть професійними художниками, але в їхніх головах утворяться нові нейронні зв’язки. Вони дозволять їм видавати фантастичні рішення на стадії UI навіть суперкорпоративних продуктів, які порвуть всі гіпотези й поліпшать «досвід користувача». Клієнти точно будуть задоволені.

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