Тотальний редизайн Google Chrome, як це було (ІСТОРІЯ 3-тя)

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

Частина 3

6. Проектування для швидкості

Місяцями ми просто видаляли щось – те що накопичилося за роки проектної та інженерної роботи. Тепер, коли у нас була кришталево чиста поверхня і система “будівельних” блоків, ми були готові почати проектування.

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

Панель інструментів відокремлює наш юзер-інтерфейс від вмісту і системно призначеного юзер-інтерфейсу. Коли ви натискаєте на білий квадрат, він заповнює сірий квадрат, і внизу з’являється ще один квадрат сірого кольору. (Збиває з пантелику, так?)

Тут ми покажемо все, що ми робимо за завісою, аби зробити Chrome настільки корисним, наскільки це можливо. Але чому всі ці блоки змінюють розміри і стан?

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

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

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

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

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

Навіть якщо це економить одній людині лише 1 секунду, це приблизно 2 млн секунд, або 23,14 дні часу. Подумайте, що люди можуть зробити з 23 додатковими днями!

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

Ви помічаєте – як багато відкидають очі навколо екрану, щоб обробляти різні елементи?

Тепер давайте подивимося на той же екран з видаленням лише кольорів та тіней:

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

На щастя, ми знали його творців і отримали велику підтримку від команди Android, щоб змінити колір в залежності від контенту (це ще шість місяців шляху, який заслуговує на окрему розповідь).

Але давайте перейдемо до панелі інструментів. Ці іконки йшли у пакеті з двома іншими невидимими клітинками (зонами):

1. «Обмежувальна рамка», яка позначає зону, що займає зображення.

2. «Зона дії», яка позначає область, до якої можна доторкнутися.

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

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

Так, я цілий тиждень дивилася на невидимі контейнери. Хто-небудь помітить? Скоріше за все ні. Воно того варте? 2 млн раз так.

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

6 нових та корисних інструментів для дизайнерів та маркетологів: Glorify, Artyline, Vectormator + ще 3

6 книг які варто прочитати кожному дизайнеру: Тім Браун, Майк Монтейро, Аарон Уолтер + ще 3

Як нарешті почати малювати вектор: 5 гарних порад

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