Wytyczne dotyczące projektowania (Dialogflow)

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 lub dotykając interfejsu użytkownika. Rozmowa i interfejs powinny się uzupełniać i ułatwiać użytkownikom przejście przez akcję. W tej sekcji omówimy, jak zaprojektować rozmów i interfejs, by zwiększyć wygodę użytkowników.

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. Warto rozważyć użycie interaktywnego obszaru roboczego, jeśli:

  • Akcja przydałaby się na pełnym ekranie i byłaby atrakcyjne wizualnie. 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 dostosowanie nie wystarczą (np. jeśli chcesz wyjść poza dotychczasowe komponenty wizualne i dostosowanie Asystenta). Interaktywne obiekty canvas to świetne narzędzie do prezentowania unikalnych wizualnych atrybutów marki, elementów dynamicznych i animacji. Ponadto interaktywne obiekty Canvas mogą służyć do aktualizacji jednego interfejsu wizualnego w miarę postępów użytkownika w rozmowie.

Wymagania

Chociaż Interactive Canvas jest znanym środowiskiem projektowania stron internetowych, przed zaprojektowaniem akcji należy wziąć pod uwagę pewne wymagania.

U góry każdej aplikacji internetowej na płótnie znajduje się nagłówek z nazwą Twojej marki. Ten zarezerwowany obszar 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.

Ograniczenia

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

  • Brak lokalnego przechowywania danych. Nie pozwalamy Akcjom przechowywać plików cookie ani mieć dostępu do interfejsu Web Storage API. Ze względu na te ograniczenia zalecamy, aby akcja zarządzała stanem w webhooku i używała pola userStorage AppRequest 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 na stronie Pierwsze kroki w witrynie Conversation Design.

Wytyczne

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

  • Postępuj zgodnie z procesem projektowania rozmów i sprawdzonymi metodami opisanymi na stronie o projektowaniu 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 pojawia się w razie potrzeby). Więcej wskazówek dotyczących obsługi błędów znajdziesz na stronie projektowania rozmów.

Projektowanie na inteligentne ekrany

Mimo że powyższe wskazówki mają zastosowanie, podczas projektowania inteligentnych ekranów pamiętaj o innych kwestiach związanych z projektowaniem. Projektując inteligentne ekrany, warto traktować je jak tablety. Inteligentne ekrany są jednak zupełnie inną kategorią urządzeń z 2 powodów:

  • Inteligentne ekrany są dostępne za pomocą głosu, a Asystent Google to system operacyjny
  • Inteligentne ekrany są nieruchome. W domu, w przeciwieństwie do urządzeń mobilnych, często umieszcza się je w kuchni lub sypialni.

Z tego powodu użytkownicy czasami nie znajdują się fizycznie 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 korzystających z inteligentnych ekranów:

  • Projektuj z myślą o głosie. Projektowanie interaktywnego obszaru roboczego W przypadku inteligentnych ekranów ważniejsze jest kierowanie głosowe. 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. projektować treści 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. Na przykład gdy użytkownik zapyta: „Jak wygląda mój dzień?”, Asystent poda w odpowiedzi pogodę, kalendarz, trasę do pracy czy wiadomości. 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: