Редизайн Google Chrome: історія у 3 частинах

DesignTalk.club пропонує вам черговий класний матеріал – цього разу це адаптований переклад на українську мову статті Ханни Лі, дизайнерки Google – про повний редизайн інтерфейсу Chrome.

Частина 1

На честь десятиліття Chrome у вересні 2018 року ми розпочали повний редизайн нашого інтерфейсу, який супроводжувався переглядом всього нашого процесу проектування.

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

1. Знайомтеся, наш рядок

У мене часто виникають питання на кшталт «Навіщо потрібен дизайнер для Chrome?» Мій колега чудово описав це коли сказав: Найжорсткіший фідбек, який я отримав: «Це все?»

В основі цього питання лежало припущення, що браузери повинні були виглядати так:

Це знайомо, тому що схоже на те, що вже є на моєму комп’ютері і, здається, працює для 2 млрд користувачів. Так навіщо ж щось переробляти?

Тому що всередині цього рядка був захований найскладніший в світі двигун для інтернету.

І ми хотіли його змінити так, щоб він змінив уявлення про браузери в світі.

2. Коротка історія рядків

Щоб зрозуміти, як ми до цього прийшли, давайте розглянемо детальніше:

Цей градієнтний контур 0.5 dp, з подвійною тінню та непрозорістю 22% і маленьким заокругленням у 1dp каже одне: «Я можу писати всередині».

Чому? Тому що коли комп’ютери були всього лише клавіатурами, прикріпленими до моніторів, весь екран складався з тексту.

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

Коли з’явилися браузери, це поле відігравало подвійну роль – показати вашу електронну адресу або “Uniform Resource Locator (URL)”.

У 2008 році, коли Chrome вперше побачив світ, основний принцип нашої розробки полягав в зниженні навантаження на когнітивні функції. Тому ми об’єднали пошукове вікно Google з адресним рядком і додали меню, що випадає з тінню 4dp, щоб зробити пропозиції зручнішими для сканування – звідси і назва “omnibox”.

2008 рік

Коли браузери вперше з’явилися на мобільних пристроях, екранний простір був дуже цінним, тому ми створювали кожен піксель так, щоб займати якомога менше місця. В якості альтернативи ми використовували 1dp внутрішню тінь і зробили її сірою.

2012 рік

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

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

З’явилося безліч людей, які вперше підключилися до інтернету, і разом з ними з’явився мобільний браузінг. Вони ніколи раніше не бачили цього, вони не знали всього, чого нас навчив пошук на ПК.

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

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

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

Подібно до того, як Беатріс Вард сприймала друкарню як «кришталевий кубок», я бачила Chrome не більше ніж «кристалічним дисплеєм».

Я сильно помилялася.

Слідом за еволюцією інтернету треті особи стали видавати себе за Chrome – для крадіжки інформації та навмисно вводити в оману.

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

Так що вперше ми почали сумніватися в тому, що нам потрібно бути менш невидимими.

3. Поле з 2000 граней

Коли я вперше зустрілася з нашими інженерами, щоб отримати уявлення про те, як було побудовано наш універсальне вікно пошуку –  нічого не могло підготувати мене до того, що сталося.

Виглядало так, ніби я ніколи нічого не створювала за 15 років роботи.

Ми підтримуємо понад 6 версій Android на 40 мовах – включаючи ті, які не підтримує Roboto Medium. Ми також дозволяємо розробникам змінювати колір панелі інструментів практично на будь-який колір, зберігаючи при цьому коефіцієнт контрастності для підтримки екосистеми веб-додатків.

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

Це понад 2000 варіантів рядку – ще до того, як ви розпочинаєте роботу.

Як тільки ви натискаєте, друкуєте, прокручуєте, проводите пальцем або взаємодієте іншим чином, це перетворюється на 1 з інших 2000 вариантів.

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

Наш рядок з 2000 варіантів потім множиться на більш ніж 20 тисяч з урахуванням всіх взаємодій.

Багато? Не зовсім.

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

Закінчення 1-ї частини

ДУЖЕ РАДИМО ПОЧИТАТИ:

10 невеликих помилок, яких досі припускаються дизайнери: перших 5

Нові корисні інструменти для дизайну та інші цікавинки: Vector Flow, Plectica, Dislack, Moleskine Studio + ще 1

Чому текстові кнопки на мобільних пристроях – не кращий вибір дизайнера

Залишити відповідь