Wskazówki dotyczące wyglądu

Projektowanie interaktywnych odbitek na płótnie ma 2 główne aspekty:

  • Projektowanie rozmowy
  • Projektowanie interfejsu

Użytkownicy mogą wchodzić w interakcję z akcją korzystającą z interaktywnego obszaru roboczego, rozmawiając z Asystentem Google lub dotykając interfejsu użytkownika. Rozmowa i interfejs powinny się uzupełniać i ułatwiać użytkownikom przejście przez akcję. W kolejnych sekcjach opisujemy, jak zaprojektować konwersację i interfejs użytkownika tak, by korzystanie z niego było jak najbardziej komfortowe.

Czy Interactive Canvas jest odpowiednia dla mojej akcji?

Zanim zaczniesz projektować, zastanów się, czy akcja będzie dobrze współgrać z interaktywnym obszarem roboczym. Zastanów się nad użyciem interaktywnego obszaru roboczego, jeśli Twoja akcja spełnia te kryteria:

  • Akcja może korzystać z multimedialnych treści wizualnych na pełnym ekranie. Interaktywne obiekty Canvas doskonale nadają się do wyświetlania na pełnym ekranie i z bogatą grafiką, np. wciągających gier głosowych.
  • Akcja ma intuicyjny przebieg rozmowy. Ścieżka krytyczna w Akcji powinna prowadzić tylko za pomocą głosu. Akcja wymagająca precyzji przestrzennej, jak aplikacja do rysowania, może być trudna do zaprojektowania intuicyjnego przebiegu rozmowy.
  • Istniejące komponenty i możliwości dostosowania nie wystarczą. Załóżmy na przykład, że chcesz wyjść poza dotychczasowe komponenty wizualne Asystenta i opcje dostosowywania. Interaktywna aplikacja Canvas to doskonały sposób na prezentowanie unikalnych wizualnych atrybutów marki, dynamicznych elementów i animacji. Ponadto interaktywne obiekty Canvas mogą służyć do aktualizowania jednego interfejsu wizualnego w miarę przechodzenia przez użytkownika przez rozmowę.

Wymagania

Chociaż Interactive Canvas wykorzystuje znane środowiska programistyczne, przed zaprojektowaniem akcji należy wziąć pod uwagę pewne wymagania.

Nagłówek lub komunikat

Domyślnie każda aplikacja internetowa Interactive Canvas zawiera u góry ekranu nagłówek z nazwą Twojej marki. Zarezerwowany obszar 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, aby spełniać te wymagania dotyczące nagłówka:

  • Upewnij się, że za nagłówkiem nie są ukryte żadne ważne informacje ani elementy interaktywne. Metoda getHeaderHeightPx() określa wysokość nagłówka.
Rysunek 1. Przykłady wyglądu nagłówka w różnych działaniach.

Opcjonalnie możesz zastąpić nagłówek komunikatem wyświetlanym na ekranie wczytywania, zawierającym wyświetlaną nazwę akcji, nazwę dewelopera i instrukcje jej zamykania. Aby zastąpić nagłówek wyświetlanym komunikatem i włączyć tryb pełnoekranowy dla użytkownika, przeczytaj sekcję Włączanie trybu pełnoekranowego.

Ograniczenia

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

  • Brak lokalnego przechowywania danych. Nie pozwalamy na zapisywanie plików cookie ani dostęp do interfejsu Web Storage API. Ze względu na te ograniczenia zalecamy, aby akcja zarządzała stanem w webhooku i używała pamięci użytkownika do zapisywania danych użytkownika.
  • Brak wyskakujących okienek i okien modalnych. Zapobiegamy wyświetlaniu w Akcji jakichkolwiek wyskakujących okien i okna modalnego. Zdecydowanie odradzamy też używanie innych standardowych elementów interfejsu użytkownika, które zwykle pojawiają się w aplikacjach internetowych, takich jak klawiatury czy podział na strony.

Projektowanie rozmowy

Najpierw musisz zaprojektować rozmowę w akcji. Funkcje interaktywnego obszaru Canvas nadal są przekazywane za pomocą głosu, dlatego ważne jest, aby rozmowa skutecznie pokierowała użytkownika przez akcję. Działanie, które wykorzystuje interaktywną przestrzeń roboczą, przypomina rozmowę z przydatnymi treściami wizualnymi. Więcej informacji o projektowaniu rozmów znajdziesz we wskazówkach Google na temat projektowania rozmów.

Wytyczne

Aby zadbać o wygodę użytkowników:

  • Postępuj zgodnie z procesem projektowania rozmów i sprawdzonymi metodami. Zalecane metody postępowania są opisane w wytycznych Google dotyczących projektowania rozmów. Oznacza to, że musisz między innymi:

    • Upewnij się, że akcja działa dobrze w przypadku rozmowy
    • Tworzenie wizerunku marki
    • Postępowanie w przypadku błędów w rozmowie
    • Wypróbuj tryb głosowy, zanim sprawdzisz, jak będzie wyglądać na ekranie.

  • Spróbuj zapewnić te same funkcje, używając dotyku i głosu. Jeśli to możliwe, upewnij się, że wszystkie czynności, które możesz wykonać, dotykając ekranu, możesz też wykonywać głosowo.

  • Upewnij się, że ścieżka krytyczna w ramach akcji jest możliwa za pomocą głosu. Użytkownicy powinni mieć możliwość poruszania się po głównych ścieżkach akcji, używając wyłącznie głosu.

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

  • Weź pod uwagę obciążenie poznawcze. Unikaj zbyt długich reagów głosowych, aby zmniejszyć opłaty poznawcze użytkownika.

Zaprojektuj interfejs użytkownika

Gdy już zaprojektujesz rozmowę, możesz dostosować do niej interfejs. Podczas projektowania weź pod uwagę, jak naturalny przebieg dialogów może wpłynąć na wygląd interfejsu. Jeśli projektujesz inteligentne ekrany, przeczytaj konkretne uwagi w artykule Projektowanie na inteligentne ekrany.

Wytyczne

Aby zadbać o wygodę użytkowników:

  • Twórz elastyczne projekty. Upewnij się, że Twoje projekty sprawdzą się zarówno w trybie poziomym, jak i pionowym, i realizują obrazy na małych telefonach i większych ekranach. Użytkownicy powinni być w stanie z łatwością odczytać interfejs na każdym typie platformy.
  • Weź pod uwagę obciążenie poznawcze. Aby nie przytłoczyć użytkowników, zadbaj o to, aby informacje i treści wyświetlane na ekranie były uporządkowane, przejrzyste i zwięzłe.
  • Dostosuj sygnał głosowy do ekranu. Kreatywnie wykorzystuj elementy wizualne do uzupełniania dźwięku – nie ograniczaj się tylko do pisania na głos. Jeśli jest dostępny ekran, komunikaty głosowe mogą być bardziej zwięzłe niż wtedy, gdy nie jest.
  • Nie umieszczaj żadnych istotnych informacji ani komponentów u dołu ekranu. Na urządzeniach mobilnych transkrypcja użytkownika wyświetla się nad płytą mikrofonu i może mieć długość kilku linijek. Chociaż ta transkrypcja jest przejściowa, nie zapisuj ważnych treści u dołu ekranu. Przyciski podobne do elementów sugestii można umieścić u dołu ekranu, ponieważ dane wpisywane przez użytkownika stanowią alternatywę dla elementów sugestii.
  • Wizualna obsługa błędów w rozmowie. Błędy mogą się pojawić, gdy użytkownik nie odpowie, nie rozumiesz jego wypowiedzi lub nie spełnisz jego oczekiwań. Sprawdź, gdzie w interfejsie użytkownika znajdziesz te komunikaty. Może to być miejsce, w którym umieszczasz wyświetlane prompty (np. w tytule) lub coś innego (np. specjalny obszar treści, który jest wyświetlany w razie potrzeby). Więcej wskazówek na temat obsługi błędów znajdziesz w sekcji Błędy we wskazówkach dotyczących projektowania rozmów.

Projektowanie na inteligentne ekrany

Mimo że powyższe wskazówki mają zastosowanie, podczas projektowania inteligentnych ekranów musisz pamiętać o innych kwestiach związanych z projektowaniem. Projektując inteligentne ekrany, np. tablety, kuszące może być. Inteligentne ekrany są jednak zupełnie inną kategorią urządzeń z 2 powodów:

  • Inteligentne ekrany obsługują głos, a Asystentem Google jest systemem operacyjnym
  • Inteligentne ekrany są stacjonarne, a w domu, w przeciwieństwie do urządzeń mobilnych, często umieszcza się je w kuchni lub sypialni.

Z tego powodu użytkownicy nie zawsze znajdują się w pobliżu urządzenia i wchodzą w interakcję z inteligentnymi ekranami, używając jedynie głosu. Użytkownicy inteligentnych ekranów mogą też wykonywać wiele zadań jednocześnie. Projektując inteligentne ekrany, musisz pamiętać o tych zastosowaniach.

Wytyczne

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

  • Projektuj z myślą o głosie. Projektowanie interaktywnego obszaru roboczego W przypadku inteligentnych ekranów szczególnie ważne jest sterowanie głosem. W przeciwieństwie do urządzeń mobilnych użytkownik może stać w pomieszczeniu i komunikować się ze swoim inteligentnym ekranem tylko za pomocą głosu. Z tego względu nie zawsze możesz polegać na tym, że użytkownik dotknie urządzenia, aby kontynuować akcję, i musisz upewnić się, że użytkownicy będą mogli wykonać akcję za pomocą głosu.
  • Projektuj z myślą o konkretnej odległości oglądania. Treści projektuj na inteligentnym ekranie, aby można je było oglądać z daleka. W zależności od wielkości pomieszczenia typowa odległość oglądania na inteligentnych ekranach wynosi od 3 do 3 metrów.
    • W przypadku tekstu głównego, np. tytułów, użyj czcionki o minimalnym rozmiarze 32 punkty. Tekst dodatkowy, taki jak opisy lub akapity tekstu, powinien mieć co najmniej 24 punkty.
  • Skup się na jednym punkcie styczności z klientem. Wyświetlaj tylko 1 rodzaj informacji podstawowych lub 1 zadania naraz, aby zmniejszyć obciążenie poznawcze i czytelne treści z pewnej odległości. Jeśli na przykład użytkownik zapyta: „Jak wygląda mój dzień?”, W odpowiedzi Asystent Google informuje o pogodzie, kalendarzu, drodze do pracy i wiadomościach. Wszystkie treści zajmują cały ekran i są wyświetlane po kolei, a nie razem.

Zasoby

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