Google переосмислює дизайн. Що нового у Material 3 Expressive

Google випадково опублікував допис у блозі, в якому детально описано концепцію та дослідження, що стоять за Material 3 Expressive – нещодавно анонсованого компанією нового напрямку в дизайні. 9to5 Google опублікував найцікавіше з цього посту.

Що таке Material 3 Expressive

  • Material 3 Expressive — це, за словами Google, «сміливий новий напрям у дизайні», який є «найбільш дослідженим оновленням дизайн-системи Google за всю її історію». Його також називають «експресивним дизайном».
  • Google прагне, щоб застосунки «вийшли за межі «чистого» і «нудного» дизайну та створювали інтерфейси, які викликають емоційний зв’язок із користувачами».
  • Компанія зазначає, що «основні елементи експресивного дизайну — це колір, форма, розмір, рух і обрамлення».
Зображення в цьому матеріалі: 9to5 Google
  • Одним із компонентів, що з’явилися завдяки Material 3 Expressive, стала «плаваюча панель інструментів». У концепт-дизайнах можна побачити нижню панель у формі пігулки, яка не займає всю ширину екрана. Це схоже на те, що сьогодні використовується в Google Chat.
  • За даними Google, фокус-група, з допомогою якої тестували новий дизайн, помічала ключові елементи інтерфейсу до 4 разів швидше, що доводить ефективність у привертанні уваги до найважливіших частин екрана. Час до натискання на ключові дії також зменшився на кілька секунд у різних протестованих варіантах дизайну.
  • На конкретних макетах, наприклад застосунку для електронної пошти, кнопка «Надіслати» у новому дизайні більша, розташована прямо над клавіатурою та використовує другорядний колір, щоб привернути увагу. У неекспресивному дизайні ця кнопка менша і розташована у верхній панелі інструментів разом із іншими елементами, як-от прикріплення файлів. Коли учасників попросили «надіслати лист» у застосунку, їхній погляд знаходив кнопку в експресивному дизайні в 4 рази швидше.

Дослідження, які стоять за оновленням

За останні три роки команда провела 46 окремих досліджень із сотнями дизайнів та понад 18 000 учасників з усього світу. Результатом став Material 3 Expressive.

До досліджень входили:

  • Відстеження погляду: аналіз того, куди спрямована увага користувача
  • Опитування та фокус-групи: оцінка емоційної реакції на різні дизайни
  • Експерименти: збір відгуків і вподобань
  • Юзабіліті-тестування: наскільки швидко учасники розуміють і використовують інтерфейс

Ці аспекти дизайну важливі для підвищення зручності використання продукту. Google виявив, що «експресивні дизайни — це круто», зокрема з погляду сприйняття бренду:

…ми зафіксували 32% зростання сприйняття субкультури, що свідчить про те, що експресивний дизайн робить бренд більш актуальним і «в темі».
…34% зростання відчуття сучасності, роблячи бренд свіжим і прогресивним
…30% зростання «бунтарства», що свідчить про позиціювання бренду як сміливого та інноваційного лідера, який не боїться йти проти правил.

Помітили помилку? Виділіть його мишею та натисніть Shift+Enter.

Google переосмислює дизайн. Що нового у Material 3 Expressive

Google випадково опублікував допис у блозі, в якому детально описано концепцію та дослідження, що стоять за Material 3 Expressive – нещодавно анонсованого компанією нового напрямку в дизайні. 9to5 Google опублікував найцікавіше з цього посту.

Що таке Material 3 Expressive

  • Material 3 Expressive — це, за словами Google, «сміливий новий напрям у дизайні», який є «найбільш дослідженим оновленням дизайн-системи Google за всю її історію». Його також називають «експресивним дизайном».
  • Google прагне, щоб застосунки «вийшли за межі «чистого» і «нудного» дизайну та створювали інтерфейси, які викликають емоційний зв’язок із користувачами».
  • Компанія зазначає, що «основні елементи експресивного дизайну — це колір, форма, розмір, рух і обрамлення».
Зображення в цьому матеріалі: 9to5 Google
  • Одним із компонентів, що з’явилися завдяки Material 3 Expressive, стала «плаваюча панель інструментів». У концепт-дизайнах можна побачити нижню панель у формі пігулки, яка не займає всю ширину екрана. Це схоже на те, що сьогодні використовується в Google Chat.
  • За даними Google, фокус-група, з допомогою якої тестували новий дизайн, помічала ключові елементи інтерфейсу до 4 разів швидше, що доводить ефективність у привертанні уваги до найважливіших частин екрана. Час до натискання на ключові дії також зменшився на кілька секунд у різних протестованих варіантах дизайну.
  • На конкретних макетах, наприклад застосунку для електронної пошти, кнопка «Надіслати» у новому дизайні більша, розташована прямо над клавіатурою та використовує другорядний колір, щоб привернути увагу. У неекспресивному дизайні ця кнопка менша і розташована у верхній панелі інструментів разом із іншими елементами, як-от прикріплення файлів. Коли учасників попросили «надіслати лист» у застосунку, їхній погляд знаходив кнопку в експресивному дизайні в 4 рази швидше.

Дослідження, які стоять за оновленням

За останні три роки команда провела 46 окремих досліджень із сотнями дизайнів та понад 18 000 учасників з усього світу. Результатом став Material 3 Expressive.

До досліджень входили:

  • Відстеження погляду: аналіз того, куди спрямована увага користувача
  • Опитування та фокус-групи: оцінка емоційної реакції на різні дизайни
  • Експерименти: збір відгуків і вподобань
  • Юзабіліті-тестування: наскільки швидко учасники розуміють і використовують інтерфейс

Ці аспекти дизайну важливі для підвищення зручності використання продукту. Google виявив, що «експресивні дизайни — це круто», зокрема з погляду сприйняття бренду:

…ми зафіксували 32% зростання сприйняття субкультури, що свідчить про те, що експресивний дизайн робить бренд більш актуальним і «в темі».
…34% зростання відчуття сучасності, роблячи бренд свіжим і прогресивним
…30% зростання «бунтарства», що свідчить про позиціювання бренду як сміливого та інноваційного лідера, який не боїться йти проти правил.

Помітили помилку? Виділіть його мишею та натисніть Shift+Enter.
Читати на тему