Wskazówki dotyczące wyglądu

Istnieją 2 główne aspekty projektowania obszaru interaktywnego:

  • Projektowanie rozmowy
  • Projektowanie interfejsu

Twoi użytkownicy mogą wchodzić w interakcję z aplikacją, która korzysta z interaktywnego obszaru roboczego, mówiąc do Asystenta Google lub dotykając interfejsu. Zadbaj o to, aby rozmowy i interfejs użytkownika wzajemnie się uzupełniały i ułatwiły użytkownikom poruszanie się po akcji. Z kolejnych sekcji dowiesz się, jak zaprojektować rozmowę i interfejs tak, aby zapewnić użytkownikom jak najlepsze wrażenia.

Czy obszar interaktywny jest odpowiednim rozwiązaniem dla mojej akcji?

Zanim zaczniesz projekt, zastanów się, czy akcja sprawdzi się w przypadku obszaru roboczego. Rozważ użycie interaktywnego obszaru roboczego, jeśli Twoje działanie spełnia następujące kryteria:

  • Akcja daje dużo korzyści z wyświetleń na pełnym ekranie i w atrakcyjnej formie. Ta funkcja sprawdza się najlepiej w przypadku pełnego ekranu, który zapewnia wiele funkcji wizualnych, np. gier z obsługą głosu.
  • Akcja ma intuicyjny przebieg rozmowy. Ścieżka krytyczna w akcji powinna być łatwa w nawigacji. Akcja, która wymaga precyzji przestrzennej, np. aplikacja do rysowania, może sprawiać trudności przy projektowaniu intuicyjnego procesu konwersacji.
  • Istniejące komponenty i personalizacja nie wystarczą. Chcesz na przykład wyjść poza dotychczasowe komponenty wizualne i dostosować je do Asystenta. Interaktywne reklamy Canvas świetnie nadają się do prezentowania unikalnych wizualnych atrybutów marki, elementów dynamicznych i animacji. Dodatkowo w miarę postępów użytkownika w rozmowie może być używany interfejs Canvas.

Wymagania

Chociaż Interactive Canvas korzysta ze znanych środowisk programistycznych, podczas projektowania akcji trzeba wziąć pod uwagę pewne wymagania.

Nagłówek lub toast

Domyślnie każda interaktywna aplikacja internetowa Canvas zawiera nagłówek z nazwą Twojej marki u góry ekranu. Zarezerwowany obszar dla nagłówka ma wysokość 56 dp w przypadku urządzeń mobilnych, 96 dp w przypadku Home Hub i 120 dp w przypadku inteligentnego ekranu. Pamiętaj o tym, aby spełniać te wymagania:

  • Sprawdź, czy ważne informacje i elementy interaktywne nie są ukryte za nagłówkiem. Metoda getHeaderHeightPx() określa wysokość nagłówka.
Ilustracja 1. Przykłady wyświetlania nagłówka w różnych działaniach.

Opcjonalnie zastąp nagłówek komunikatem wyświetlanym na ekranie wczytywania zawierającym wyświetlaną nazwę działania, nazwę dewelopera i instrukcje zamknięcia działania. Aby go zastąpić komunikatem i włączyć tryb pełnoekranowy, zapoznaj się z sekcją Włączanie trybu pełnoekranowego.

Ograniczenia

Zanim zaprojektujesz działanie za pomocą interaktywnego obszaru roboczego, weź pod uwagę te ograniczenia:

  • Brak pamięci lokalnej. Uniemożliwiamy mu przechowywanie plików cookie i dostęp do interfejsu Web Storage API. Ze względu na te ograniczenia zalecamy zarządzanie stanem działania w webhooku i zapisywanie danych użytkowników za pomocą miejsca na dane użytkownika.
  • Brak wyskakujących okienek i modalnych opcji. Zapobiegamy wyświetlaniu wyskakujących okienek lub modalnych wyskakujących okienek. Zdecydowanie odradzamy używanie innych standardowych elementów interfejsu, które zwykle pojawiają się w aplikacjach internetowych, takich jak klawiatury czy podział na strony.

Projektowanie rozmowy

Najpierw musisz zaprojektować rozmowę akcji. Interaktywne treści nadal są przekazywane głosowo, dlatego ważne jest, aby rozmawiać z użytkownikami po akcji. Wyobraź sobie, że akcja wykorzystuje interaktywny obszar roboczy jako rozmowę z przydatnymi treściami wizualnymi. Więcej informacji o projektowaniu wątków znajdziesz w wytycznych Google dotyczących projektowania rozmów.

Wytyczne

Aby zadbać o jak najlepsze wrażenia użytkowników:

  • Stosuj proces projektowania rozmów i sprawdzone metody. Sprawdzone metody projektowania rozmów opisują sprawdzone metody, które warto zastosować. Oznacza to między innymi, że:

    • Zadbaj o to, aby kampania działała prawidłowo.
    • Tworzenie profilu marki
    • Obsługa błędów w rozmowie
    • Wypróbuj funkcję głosu i zobacz, jak będzie wyglądała na ekranie

  • Staraj się udostępniać te same funkcje za pomocą dotyku i głosu. Upewnij się, że możesz wykonać wszystkie czynności, dotykając ekranu również głosem.

  • Upewnij się, że najważniejsza ścieżka w ramach akcji jest możliwa za pomocą głosu. Użytkownicy powinni mieć możliwość poruszania się po głównych ścieżkach akcji tylko przy użyciu głosu.

  • Upewnij się, że użytkownik może korzystać z akcji bez dźwięku. Na urządzeniach mobilnych użytkownik może nie mieć włączonego dźwięku. Z tego względu warto dodać do skryptu transkrypcje, które pokierują użytkownika.

  • Weź pod uwagę obciążenie poznawcze. Unikaj zbyt długich odpowiedzi głosowych, aby zmniejszyć obciążenie poznawcze.

Projektowanie interfejsu

Po zaprojektowaniu wątku możesz zaprojektować jego interfejs jako uzupełnienie. Podczas projektowania warto zastanowić się, jak naturalne dialogi mogą wpłynąć na interfejs wizualny prezentowany użytkownikowi. Jeśli projektujesz inteligentne ekrany, przeczytaj artykuł Projektowanie inteligentnych ekranów.

Wytyczne

Aby zadbać o jak najlepsze wrażenia użytkowników:

  • Projektuj elastyczne projekty. Projektuj strony zarówno w orientacji poziomej, jak i pionowej, by wyświetlać małe i duże ekrany na większych ekranach. Użytkownicy powinni mieć możliwość łatwego odczytania interfejsu każdego typu interfejsu.
  • Weź pod uwagę obciążenie poznawcze. Aby nie przytłaczać użytkowników, zadbaj o to, aby informacje na ekranie były dobrze widoczne, przejrzyste i zwięzłe.
  • Dostosowanie działania mowy do ekranu Wykaż się wyobraźnią i wykorzystaj treści wizualne, aby uzupełnić dźwięk. Nie pisz tego, co mówisz. Gdy ekran jest dostępny, możemy mówić w bardziej zwięzły sposób niż w przypadku innych.
  • Unikaj umieszczania istotnych informacji lub komponentów na dole ekranu. Na urządzeniach mobilnych transkrypcja użytkownika pojawia się nad tablicą mikrofonu i może rozwinąć się do kilku wierszy. Transkrypcja jest przejściowa, ale staraj się, aby nie tworzyła ważnych treści u dołu ekranu. Przyciski podobne do elementów z sugestią działają u dołu ekranu, ponieważ użytkownicy mogą w ten sposób wprowadzić inne rozwiązania.
  • by wizualnie widzieć błędy w rozmowie, Błędy mogą wystąpić, gdy użytkownik nie odpowie, nie zrozumie ich lub nie dostarczy odpowiedzi w odpowiedzi. Sprawdź, w którym miejscu interfejsu się pojawią. Może to być miejsce, w którym umieścisz komunikaty displayowe (np. w tytule) lub będzie to coś innego (np. specjalny obszar treści, który będzie Ci się podobał). Więcej wskazówek na temat obsługi błędów znajdziesz w sekcji Błędy we wskazówkach na temat projektowania rozmów.

Projektowanie inteligentnych ekranów

Chociaż powyższe wskazówki mają nadal zastosowanie, pamiętaj o innych kwestiach związanych z projektowaniem inteligentnych ekranów. Potraktowanie inteligentnych ekranów, np. tabletów, jest bardzo kuszące. Jednak z 2 powodów inteligentne ekrany to zupełnie nowa kategoria urządzeń.

  • Inteligentne ekrany są wyposażone w głos, a systemem operacyjnym jest Asystent Google
  • Inteligentne ekrany są w trybie nieruchomym i w przeciwieństwie do urządzeń mobilnych często są umieszczane w kuchni lub sypialni, gdy używasz ich w domu.

Ze względu na te cechy użytkownicy czasami nie znajdują się w pobliżu urządzenia i wchodzą w interakcje z inteligentnymi ekranami tylko za pomocą głosu. Użytkownicy mogą też wykonywać inne zadania na inteligentnych ekranach. Warto o nich pamiętać, tworząc inteligentne ekrany.

Wytyczne

Aby zapewnić użytkownikom najlepsze wrażenia na inteligentnych ekranach:

  • Skup się na kwestiach głosowych. Zaprojektowanie interaktywnego obszaru roboczego to większe znaczenie dla inteligentnych ekranów. W przeciwieństwie do urządzenia mobilnego użytkownik może siedzieć w pomieszczeniu i komunikować się tylko za pomocą inteligentnego ekranu. Dlatego nie zawsze możesz polegać na tym, że użytkownik dotknie Twojego urządzenia, i musi upewnić się, że może kontynuować swoje działanie za pomocą głosu.
  • Projektuj z myślą o konkretnej odległości. Projektuj treści na inteligentnym ekranie, aby wyświetlać je z daleka. W zależności od wielkości pomieszczenia typowa odległość w przypadku inteligentnych ekranów wynosi od 3 do 3 metrów.
    • Używaj czcionki o minimalnym rozmiarze 32 punktów w przypadku tekstu głównego, np. tytułów. Dodatkowy tekst, np. opisy czy akapity tekstu, musi zawierać co najmniej 24 pkt.
  • Skup się w danym momencie na punkcie kontaktu Wyświetlaj jeden typ podstawowych informacji lub zadań jednocześnie, aby zmniejszyć obciążenie poznawcze i zadbać o czytelność treści wyświetlanych z daleka. Na przykład gdy użytkownik zadaje pytanie „Jaki jest mój dzień?”, Asystent Google odpowiada na pytania o pogodę, kalendarz, dojazdy i wiadomości. Każdy rodzaj treści zajmuje pełny ekran i jest wyświetlany po kolei, a nie na ekranie.

Zasoby

Więcej informacji o projektowaniu działania korzystającego z interaktywnego obszaru roboczego znajdziesz w tych materiałach: