Google переосмислює дизайн. Що нового у Material 3 Expressive
Google випадково опублікував допис у блозі, в якому детально описано концепцію та дослідження, що стоять за Material 3 Expressive – нещодавно анонсованого компанією нового напрямку в дизайні. 9to5 Google опублікував найцікавіше з цього посту.
Що таке Material 3 Expressive
- Material 3 Expressive — це, за словами Google, «сміливий новий напрям у дизайні», який є «найбільш дослідженим оновленням дизайн-системи Google за всю її історію». Його також називають «експресивним дизайном».
- Google прагне, щоб застосунки «вийшли за межі «чистого» і «нудного» дизайну та створювали інтерфейси, які викликають емоційний зв’язок із користувачами».
- Компанія зазначає, що «основні елементи експресивного дизайну — це колір, форма, розмір, рух і обрамлення».

- Одним із компонентів, що з’явилися завдяки Material 3 Expressive, стала «плаваюча панель інструментів». У концепт-дизайнах можна побачити нижню панель у формі пігулки, яка не займає всю ширину екрана. Це схоже на те, що сьогодні використовується в Google Chat.


- За даними Google, фокус-група, з допомогою якої тестували новий дизайн, помічала ключові елементи інтерфейсу до 4 разів швидше, що доводить ефективність у привертанні уваги до найважливіших частин екрана. Час до натискання на ключові дії також зменшився на кілька секунд у різних протестованих варіантах дизайну.

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


Дослідження, які стоять за оновленням
За останні три роки команда провела 46 окремих досліджень із сотнями дизайнів та понад 18 000 учасників з усього світу. Результатом став Material 3 Expressive.
До досліджень входили:
- Відстеження погляду: аналіз того, куди спрямована увага користувача
- Опитування та фокус-групи: оцінка емоційної реакції на різні дизайни
- Експерименти: збір відгуків і вподобань
- Юзабіліті-тестування: наскільки швидко учасники розуміють і використовують інтерфейс
Ці аспекти дизайну важливі для підвищення зручності використання продукту. Google виявив, що «експресивні дизайни — це круто», зокрема з погляду сприйняття бренду:
…ми зафіксували 32% зростання сприйняття субкультури, що свідчить про те, що експресивний дизайн робить бренд більш актуальним і «в темі».
…34% зростання відчуття сучасності, роблячи бренд свіжим і прогресивним
…30% зростання «бунтарства», що свідчить про позиціювання бренду як сміливого та інноваційного лідера, який не боїться йти проти правил.
Google переосмислює дизайн. Що нового у Material 3 Expressive
Google випадково опублікував допис у блозі, в якому детально описано концепцію та дослідження, що стоять за Material 3 Expressive – нещодавно анонсованого компанією нового напрямку в дизайні. 9to5 Google опублікував найцікавіше з цього посту.
Що таке Material 3 Expressive
- Material 3 Expressive — це, за словами Google, «сміливий новий напрям у дизайні», який є «найбільш дослідженим оновленням дизайн-системи Google за всю її історію». Його також називають «експресивним дизайном».
- Google прагне, щоб застосунки «вийшли за межі «чистого» і «нудного» дизайну та створювали інтерфейси, які викликають емоційний зв’язок із користувачами».
- Компанія зазначає, що «основні елементи експресивного дизайну — це колір, форма, розмір, рух і обрамлення».

- Одним із компонентів, що з’явилися завдяки Material 3 Expressive, стала «плаваюча панель інструментів». У концепт-дизайнах можна побачити нижню панель у формі пігулки, яка не займає всю ширину екрана. Це схоже на те, що сьогодні використовується в Google Chat.


- За даними Google, фокус-група, з допомогою якої тестували новий дизайн, помічала ключові елементи інтерфейсу до 4 разів швидше, що доводить ефективність у привертанні уваги до найважливіших частин екрана. Час до натискання на ключові дії також зменшився на кілька секунд у різних протестованих варіантах дизайну.

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


Дослідження, які стоять за оновленням
За останні три роки команда провела 46 окремих досліджень із сотнями дизайнів та понад 18 000 учасників з усього світу. Результатом став Material 3 Expressive.
До досліджень входили:
- Відстеження погляду: аналіз того, куди спрямована увага користувача
- Опитування та фокус-групи: оцінка емоційної реакції на різні дизайни
- Експерименти: збір відгуків і вподобань
- Юзабіліті-тестування: наскільки швидко учасники розуміють і використовують інтерфейс
Ці аспекти дизайну важливі для підвищення зручності використання продукту. Google виявив, що «експресивні дизайни — це круто», зокрема з погляду сприйняття бренду:
…ми зафіксували 32% зростання сприйняття субкультури, що свідчить про те, що експресивний дизайн робить бренд більш актуальним і «в темі».
…34% зростання відчуття сучасності, роблячи бренд свіжим і прогресивним
…30% зростання «бунтарства», що свідчить про позиціювання бренду як сміливого та інноваційного лідера, який не боїться йти проти правил.