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 artykuł został zarchiwizowany na blogu przez Wayback Machine (Poniżej znajdują się obrazy niewidoczne w wersji archiwalnej.) Oto najważniejsze punkty:
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 szczegółowe informacje, opublikowano przeciekłe rendery). Nowy wygląd Zegara Google (W weekend.) Jednak przykład „przed” poniżej 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.