DesignTalk.club закінчує черговий класний матеріал – цього разу це адаптований переклад на українську мову статті Ханни Лі, топової дизайнерки Google – про повний редизайн інтерфейсу Chrome. Сьогодні до вашої уваги – третя частина цього надзвичайно цікавого лонгріду!
Частина 4
7. Одне вікно, щоб управляти ними всіма
Після того, як я набралася впевненості, переглянувши всі тексти, кольори та іконки в нашому інтерфейсі, я була готова до роботи з універсальним вікном пошуку.
Ми хотіли знайти спосіб м’яко зміцнити бренд Chrome, враховуючи той факт, що наш логотип рідко з’являється в інтерфейсі. Я створила десятки проектів, які здавалися багатообіцяючими, тільки щоб зрозуміти, що жоден з них не працює – тому що у них у всіх не було сенсу.
Отже, я повернулася до “стовпів” нашого бренду і уважно вивчила наш логотип. Перше, що я помітила, це літера “С”.
Це свідчить про неформальний характер нашого бренду, тому важливо було знайти доброзичливу форму. Ми також використовуємо ті ж чотири кольори, що і логотип Google, щоб показати нашу спадщину. Насправді, Android, Google і Chrome мають одну повторювану форму на всіх своїх логотипах. Коло.
Кола – це природні форми, на відміну від прямокутників. Тому у них менше зорового когнітивного навантаження. Ця форма була ще свіжою в моїй свідомості після дворічного перебування в Лондоні.
Коли назви станцій метрополітену вперше були позначені прямокутними знаками, пасажирам було важко відрізнити їх від плакатної реклами. Тому в 1912 році вони додали червоні кола, щоб їх було легше знайти. Потім Френк Пік включив це коло в знаменитий логотип.
Мені здалося, що це найкраща метафора для нашого універсального вікна пошуку.
Вона повинна не просто показувати, де ти знаходишся, вона повинна допомагати тобі потрапити з одного місця в інше.
Глибоко вивчивши наш логотип, мені особливо сподобалася його форма:
Це була буквально форма нашого бренду.
Він показує наш характер, продемонструвавши, що це не просто «пошуковий рядок» або «адресний рядок», а щось нове, доброзичливе.
Так як поява миші призвела до формування текстового поля, нам потрібно було щось нове для пристрою введення мобільних телефонів, представлених на ринку – наші пальці. Які ця форма також посилила.
Випадково, у нас також була команда на виставці Френка Стелли в музеї Де Янга. Використання Стелою полотен криволінійної форми виривалося з стандартної прямокутної рамки.
Як і я, він любив гоночні автомобілі, і в своїй картині «Довіль», що входить в його «серію гоночних треків», він використовував схожу форму для позначення швидкості – однієї з головних опор хрому.
Я повторила модерністські настрої, тому що традиційні форми мистецтва стають неактуальними і застарілими для наших завдань. Тому ми назвали наш новий напрямок візуального дизайну «Модерн».
Потім ми вивчили тисячі проектів.
Спочатку я дотримувалася того ж підходу, що і ми спочатку використовували в мобільному додатку. Використання 1 dp лінії контуру, здавалося, має сенс. Але на практиці він губився у морі білих сайтів з пошуковими рядками зверху. Лінія контуру також не працювала в режимі інкогніто і була погано збалансована з товстими окресленими іконками.
Один з наших дизайнерів дійсно думав, що це просто вайрфрейм.
Використання тіні Material також було не зовсім доречним, оскільки це не вирішувало нашу первісну проблему з позиціонування як простого “пошукового вікна”. А нижня додавала ще 4dp – і була важкою і вертикально зміщеною по центру.
Ми навіть спробували повністю видалити контейнер, але елементи тепер здавалися випадково розкиданими, і зміна відцентрованної URL-адреси потягла за собою значні витрати на розробку.
Як з’ясувалося, наші колеги також працювали над тим, щоб зробити нашу URL-адресу чистішою, а Material 2 тільки почав поширюватися. Він приніс з собою більш насичену колірну палітру, яка дала більше життєздатності нашій формі.
І як виявилося, маючи однакову форму, ми також зробили наш код менш складним, з меншою кількістю перехідних анімацій – ідеальним балансом дизайну та ефективності.
Тепер ми були готові перевірити це. Тисячі користувачів, місяці експериментів, досліджень зручності використання і схрещування пальців були оцінені як більш “дружні”, “інноваційн” та “інтелектуальні”, які не здаються менш “швидкими” або “яким Ви довіряєте”.
І хоча у мене є час тільки на те, щоб написати про цей рядок, насправді є ще більше 10 подібних історій для кожного дюйму нашого юзер-інтерфейсу.
Ідеально? Поки що ні, але це не те, що змушує мене не пишатися тим, що ми зробили. Справа в тому, що ми зробили Chrome меншим за розміром і знизили витрати на завантаження, зробивши так, щоб кожен піксель, який ми створили, прокладав шлях наступному дизайнеру, який прийде з чимось ще кращим.
Особисто я зрозуміла, що ми щось зробили правильно, коли один з учасників нашого дослідження користувачів сказав:
«Це змушує мене відчувати себе спокійніше і може допомогти мені протягом усього дня».
І не тому, що їм сподобався дизайн, а тому що саме таким я бачила Chrome.
Ми провели майже рік, аналізуючи кожен піксель в нашому інтерфейсі, тому що хотіли, щоб упаковка відповідала якості – як раз на той випадок, якщо цього разу ви помітите – це незвичайний рядок.
ДУЖЕ РАДИМО ПОЧИТАТИ:
6 книг які варто прочитати кожному дизайнеру: Тім Браун, Майк Монтейро, Аарон Уолтер + ще 3