Przed długo oczekiwaną zapowiedzią w tym miesiącu Google przypadkowo opublikowało wpis na blogu, w którym szczegółowo opisał koncepcje i badania stojące za Material 3 Expressive Design, najnowszym kierunkiem projektowania firmy.
Pełny wpis na blogu został zapisany za pomocą Wayback Machine (z obrazami niewidocznymi w zapisanej wersji, wyświetlanej poniżej). Główne punkty są następujące:
Material 3 Expressive reprezentuje to, co Google nazywa „śmiałym, nowym kierunkiem projektowania” i jest „najbardziej przebadaną aktualizacją systemu projektowania Google w historii”. Google dąży do tego, aby aplikacje wykraczały poza „czyste” i „nudne” projekty, tworząc interfejsy, które łączą użytkowników na poziomie emocjonalnym. Oprócz pełnej nazwy, jest on również określany jako „M3 Expressive” lub po prostu „ekspresyjny design”.
Rozwiązanie Material 3 Expressive narodziło się w wyniku badań – nie w stylu serialu 41 Shades of Blue, gdzie decyzje projektowe opierano na danych, lecz w wyniku wspólnego dochodzenia obejmującego badania, projektowanie i inżynierię.
W 2022 roku zespół Material Design zaczął się zastanawiać: „Dlaczego wszystkie te aplikacje wyglądają tak podobnie? Są takie nudne? Czy nie było miejsca na więcej emocji?”
W ciągu ostatnich trzech lat zgłębialiśmy implikacje tego dialogu, przeprowadzając dziesiątki cykli projektowania i badań, aby znaleźć kolejną ewolucję Material Design. Dzięki 46 niezależnym badaniom, obejmującym setki projektów i ponad 18 000 uczestników z całego świata, dopracowaliśmy piękny, niezwykle użyteczny system. Zasady Material 3 Expressive opierają się na solidnych badaniach i sprawdzonych, najlepszych praktykach w zakresie użyteczności, dzięki czemu projektanci mogą śmiało korzystać z tych nowych komponentów i zasad, wiedząc, że tworzą coś, co jest łatwe w użyciu i z czym ludzie mogą się utożsamiać.
Badania te obejmowały:
- Śledzenie ruchu gałek ocznych: Analiza tego, na czym użytkownicy skupiają swoją uwagę. Śledzenie ruchu gałek ocznych to potężne narzędzie do zrozumienia zachowań użytkowników i identyfikacji obszarów wymagających poprawy w projekcie.
- Ankiety i grupy fokusowe: Pomiar reakcji emocjonalnych na różne projekty. Metody te pomagają zrozumieć, jak użytkownicy postrzegają projekty na poziomie emocjonalnym.
- Eksperymenty: Gromadzenie odczuć i preferencji. Eksperymenty są niezbędne do identyfikacji projektów preferowanych przez użytkowników i oceny wpływu różnych elementów na doświadczenie użytkownika.
- Łatwość użycia: Zrozumienie, jak szybko uczestnicy rozumieją i korzystają z interfejsu. Użyteczność jest kluczowym miernikiem sukcesu każdego projektu, określającym, jak łatwo i sprawnie użytkownicy mogą osiągnąć swoje cele.
Google twierdzi, że „podstawowymi elementami ekspresyjnego designu są użycie koloru, kształtu, objętości, ruchu i ograniczenia”. Ponadto „Material 3 Expressive charakteryzuje się odważnym wykorzystaniem kształtów i kolorów, tworząc zachwycające wrażenia użytkownika”. Użycie odważnych kolorów i kształtów stanowi kluczowy element Material Design 3 Expressive, którego celem jest tworzenie angażujących i zapadających w pamięć wrażeń użytkownika.
Te aspekty projektowe są również kluczowe dla zwiększenia przyjazności produktu dla użytkownika poprzez zwrócenie uwagi na ważne elementy interfejsu, takie jak wyróżnienie kluczowych akcji i grupowanie podobnych elementów. To poprawia komfort użytkowania, czyniąc go płynniejszym i bardziej wydajnym.
Pływający pasek narzędzi to komponent wynikający z Material 3 Expressive. W projektach koncepcyjnych widzimy dolny pasek w kształcie pigułki, który nie rozciąga się na całą szerokość ekranu. W rezultacie widzimy niewielki fragment tła, a projekt od krawędzi do krawędzi staje się bardziej widoczny. Jest to podobne do tego, co jest dostępne obecnie w Google Chat.
Badania Google pokazują, że „wyraziste projekty są łatwiejsze w użyciu” i pomagają użytkownikom „szybko odkrywać najważniejsze czynności na każdym ekranie i sprawniej poruszać się po witrynie”.
… Uczestnicy byli w stanie zidentyfikować kluczowe elementy interfejsu użytkownika nawet 4 razy szybciej, co dowodzi, że te projekty kierują uwagę użytkownika na najważniejszą część ekranu. Widzieliśmy, że wiele aplikacji osiągało ten poziom poprawy, a to wykraczało poza czas fiksacji wzroku. Zaobserwowaliśmy również, że czas potrzebny na kliknięcie klawiszy skrócił się o kilka sekund w różnych testowanych przez nas projektach.
Należy ponownie podkreślić, że są to jedynie projekty koncepcyjne i nie odzwierciedlają rzeczywistych produktów. (Aby uzyskać bardziej konkretne informacje, w weekend wyciekł nowy wygląd zegarka Google Watch ). Jednak poniższy przykład „przed” wyraźnie przedstawia obecny interfejs użytkownika Gmaila.
Przyglądając się konkretnym projektom, takim jak zrzuty ekranu z poniższego studium przypadku aplikacji e-mail, możemy bezpośrednio dostrzec korzyści płynące z ekspresyjnych zasad projektowania. Na przykład przycisk „Wyślij” w nowym projekcie jest większy, umieszczony bezpośrednio nad klawiaturą i wykorzystuje dodatkowy kolor, aby przyciągnąć uwagę. Można to porównać z projektem bez ekspresyjnych elementów, w którym mały przycisk „Wyślij” znajduje się na pasku narzędzi u góry ekranu, obok innych elementów sterujących, takich jak załączanie pliku. Gdy uczestnicy zostali poproszeni o „wysłanie wiadomości e-mail” w aplikacji, ich oczy dostrzegły przycisk cztery razy szybciej w projekcie ekspresyjnym. Odzwierciedla to znaczenie ekspresyjnego projektowania w poprawie doświadczenia użytkownika.
Inne projekty koncepcyjne obejmują aplikację zegarka, wprowadzanie głosowe, edytor zdjęć, płatności i portfel:
Sukces lub porażka wdrożenia nowego interfejsu użytkownika zależy od łatwości jego wdrożenia i płynności aktualizacji M3. Jetpack Compose wydaje się być obecnie w znacznie lepszej sytuacji, więc podchodzę do tego z ostrożnym optymizmem.
Tymczasem badania i testy użytkowników wykazały, że „ludzie w każdym wieku zdecydowanie wolą dobrze wdrożony, ekspresyjny projekt od projektu nieekspresywnego, który jest zgodny z wytycznymi interfejsu użytkownika systemu iOS”.
Google odkryło, że „wyraziste projekty są świetne”, zwłaszcza jeśli chodzi o atrakcyjność marki: „Nasze badania wykazały, że wykorzystanie wyrazistego projektu M3 zwiększyło poczucie „fajności” produktu w oczach ludzi”.
- …Odnotowaliśmy 32% wzrost percepcji subkultury, co sugeruje, że wyrazisty design sprawia, że marka wydaje się bardziej istotna i „wtajemniczona”.
- …34% wzrost świeżości, dzięki czemu marka wydaje się świeża i innowacyjna.
- …30-procentowy wzrost buntu, co wskazuje, że wyrazisty design pozycjonuje markę jako odważnego, innowacyjnego lidera, gotowego wyłamać się z norm.
Możliwość dodawania komentarzy nie jest dostępna.