Przewodnik po stylach interfejsu dla dodatków do Edytora

Dodatki do edytora pozwalają tworzyć interfejsy użytkownika (menu, paski boczne i okna), korzystając z usługi HTML Apps Script. Ponieważ interfejsy są opracowywane w językach HTML i CSS, można je bardzo łatwo dostosowywać. Jednak tworząc interfejs dodatków, zadbaj o to, by był wygodny dla użytkowników.

Najlepsze dodatki rozszerzają każdy edytor w naturalny sposób, korzystając ze znajomych elementów sterujących i funkcji. Podczas tworzenia nowego dodatku:

Tekst

Nazwa dodatku

Nazwę dodatku musisz określić podczas publikowania. Nazwa będzie widoczna w wielu miejscach, np. w sklepie z dodatkami czy w menu.

  • Stosuj wielkość liter jak w nazwach własnych.
  • Unikaj znaków interpunkcyjnych, zwłaszcza nawiasów, chyba że stanowią część Twojej marki.
  • Niech będzie krótki – najlepiej nie więcej niż 30 znaków. Długie nazwy mogą być automatycznie obcinane.
  • Nie podawaj nazwy usługi Google, do której on służy, ani nie używaj słowa „Google”.
  • Pomiń informacje o wersji.
  • Upewnij się, że nazwa opublikowanego dodatku jest taka sama jak nazwa pliku projektu skryptu. Nazwa projektu pojawi się w oknie autoryzacji.
Nie należy Należy
Nieprawidłowe nazwy dodatków Dobre nazwy dodatków

Styl pisania

Nie musisz dużo pisać. Większość działań powinna być wyraźnie widoczna za pomocą ikon, układu i krótkich etykiet. Jeśli uważasz, że część dodatku wymaga bardziej szczegółowego wyjaśnienia niż krótkie etykiety, najlepiej utworzyć osobną stronę internetową z opisem dodatku i umieścić do niego link.

Podczas pisania tekstu interfejsu:

  • Stosuj wielkość liter jak w zdaniu (zwłaszcza w przypadku przycisków, etykiet i elementów menu).
  • Wybieraj krótki, prosty tekst bez żargonu i akronimów.
Nie należy Należy

Wskazówka po instalacji

Twoja wskazówka po instalacji wyświetli się zaraz po zainstalowaniu dodatku przez użytkownika i pojawi się też w Pomocy. Możesz skorzystać z kilku zdań, aby ułatwić użytkownikom szybkie rozpoczęcie pracy.

  • Zacznij od słowa zachęcającego do działania.
  • Opisz pierwszy krok korzystania z dodatku.
  • Jeśli masz główny interfejs użytkownika, na przykład pasek boczny, wyjaśnij, jak go otworzyć.
  • Nie promuj tutaj swojego dodatku – jest on już zainstalowany.
Nie należy Należy
Niewłaściwa wskazówka po instalacji Dobra wskazówka po instalacji

W przeciwieństwie do zwykłych projektów Apps Script dodatki nie pojawiają się w edytorze ani w menedżerze skryptów. Użytkownicy nie mogą bezpośrednio uruchamiać takich skryptów. Zamiast tego każdy dodatek ma swoje miejsce w menu dodatków. Menu (oraz okno dialogowe lub pasek boczny) umożliwia użytkownikom korzystanie z dodatku.

  • Menu to kluczowy element kontroli dodatku, dlatego zaprojektuj starannie jego strukturę i sformułowanie.
  • Unikaj pozycji menu, które zawierają tylko powtarzającą nazwę dodatku. Zamiast tego zacznij od słowa „działanie”.
  • Jeśli pozycja menu głównego rozpoczyna przepływ pracy i nie ma jednego czasownika opisującego jej działanie, nazwij ją „Start”. Ten wzorzec jest używany w krótkim wprowadzeniu do dodatku do Dokumentów.
  • Jeśli menu zawiera więcej niż sześć pozycji, staraj się nie używać podmenu. Mogą być trudne do wyboru.
  • Opisz zadanie, a nie element interfejsu wyświetlany przez element menu.
Nie należy Należy
Nieprawidłowe etykiety elementu menu Prawidłowe etykiety pozycji menu

Komunikaty o błędach

Gdy coś pójdzie nie tak, używaj prostego języka. Przedstaw problem z punktu widzenia użytkownika i podpowiedz, jak go rozwiązać.

  • Nie zezwalaj użytkownikowi na wyświetlanie wyjątków zgłaszanych przez Twój kod. Zamiast tego użyj instrukcji try...catch do przechwytywania wyjątków, a następnie wyświetl smażony przez użytkownika komunikat o błędzie z tekstem w tekście przypisanym do klasy error z pakietu CSS dodatków lub okna alertu.
  • Przed opublikowaniem sprawdź, czy dodatek nie rejestruje danych debugowania w konsoli JavaScript. Zamiast tego użyj funkcji Stackdriver Logging.
Nie należy Należy
Zły komunikat o błędzie Dobry komunikat o błędzie

Materiały edukacyjne

Menu każdego dodatku zawiera automatyczne okno Pomoc. Jeśli podczas publikowania podasz URL pomocy, prowadzi do niej link „Więcej informacji”. O ile nie musisz wyjaśniać swojego dodatku, podaj stronę z objaśnieniem, jak z niego korzystać.

  • Jeśli to możliwe, wyświetlaj instrukcje w formie listy punktowanej lub numerowanej. Pokaż użytkownikom efekt końcowy, używając wyraźnych odwołań do nazwanych elementów interfejsu.
  • Upewnij się, że instrukcje jasno wyjaśniają wszelkie wymagania, takie jak konfiguracja arkusza kalkulacyjnego w określony sposób.
  • Możesz także dodać linki do materiałów pomocy w głównym interfejsie użytkownika. Jeśli dodatek utworzy nowy dokument, możesz też wyświetlić instrukcje w treści dokumentu.

Niestandardowe interfejsy użytkownika

Niektórymi prostymi dodatkami do Edytora można zarządzać w pełni z poziomu menu, ale większość z nich wyświetla pasek boczny lub okno z niestandardową zawartością.

  • Paski boczne najlepiej sprawdzają się w przypadku trwałych narzędzi, których użytkownicy prawdopodobnie będą używać wielokrotnie, odwołując się do treści dokumentu lub arkusza kalkulacyjnego.
  • Okna najlepiej sprawdzają się w przypadku narzędzi jednorazowych, stron ustawień i ważnych komunikatów.

Tekst interfejsu

W każdym oknie lub na pasku bocznym załóżmy, że użytkownicy czytają tylko etykietę tytułu i przycisku. Czy mimo to użytkownicy wiedzą, do czego służy Twój interfejs, i mogą dokonać właściwego wyboru?

  • Użyj samodzielnych etykiet tytułu i przycisków.
  • Unikaj długich bloków tekstu opisowego.

Okna

Okna świetnie sprawdzają się w przypadku narzędzi, których używa się raz, a potem przejdź dalej. Jeśli na przykład dodatek umożliwia użytkownikom wstawienie grafiki, po wstawieniu grafiki możesz wyświetlić okno z opcją wyboru, co ma zostać wstawione. Okna są też pomocne przy wyświetlaniu ustawień dodatku lub do przekazywania ważnych komunikatów.

  • Nie otwieraj okna (w tym alertów lub promptów) z innego okna – wyświetlaj je tylko pojedynczo.
  • W tytule okna dialogowego użyj słowa lub krótkiego wyrażenia poprzedzonego najważniejszym słowem.
  • Etykiety przycisków powinny być powiązane z tytułem okna.
  • Wolę 2 przyciski, zwykle główne działanie i przycisk Anuluj. W szczególnych przypadkach, które wymagają trzeciego przycisku, weź pod uwagę prawy dolny róg.
  • Umieść przyciski w lewym dolnym rogu okna dialogowego. Niebieski przycisk główny powinien znajdować się po lewej stronie, a po prawej – szare przyciski dodatkowe.
Nie należy Należy
Zły tytuł okna dialogowego Dobry tytuł okna dialogowego

Dzięki paskom bocznym użytkownik może wrócić do dokumentu, arkusza kalkulacyjnego, prezentacji lub formularza podczas dokonywania wyborów. Pozwalają też użytkownikom wielokrotnie korzystać z dodatku. Po otwarciu nowego paska bocznego wszystkie wcześniejsze są automatycznie zamykane. Najlepiej sprawdza się on w trybach tymczasowych, które użytkownik wyłącza, gdy jest gotowy.

  • Użytkownicy mogą mieć też inne dodatki z własnymi paskami bocznymi. Jeśli dwa dodatki będą próbowały otworzyć paski boczny jednocześnie, wyświetli się tylko jeden.
  • Nie wyświetlaj paska bocznego ani okna po pierwszym otwarciu dokumentu.
  • Tylko dodatki działające w AuthMode.FULL mogą otwierać paski boczne lub okna. Do otwarcia paska bocznego możesz użyć pozycji menu, ponieważ w ten sposób użytkownik prosi o pełną autoryzację.

Opcje

Świetne dodatkowe interfejsy użytkownika nie ograniczają jednak możliwości kontroli. Odpowiednie marginesy i dopełnienie są bardzo przydatne, a złożone elementy sterujące mogą wydawać się przytłaczające. W razie wątpliwości korzystaj z układu z samego edytora. Podczas tworzenia własnych okien możesz na przykład przejrzeć istniejące okna Dokumentów Google, takie jak Plik > Ustawienia strony.

Dokumentacja pakietu CSS dodatków zawiera przykładowe znaczniki dla każdego z podanych niżej rodzajów ustawień.

Przyciski

Nie używaj zwykłych linków ani innych elementów, używając przycisków do sterowania głównymi działaniami w interfejsie.

  • Unikaj wyświetlania więcej niż jednego niebieskiego, czerwonego lub zielonego przycisku jednocześnie. Szare przyciski mogą się wielokrotnie wyświetlać.
  • Większość etykiet przycisków powinna mieć wielkość liter jak w zdaniu i rozpoczynać się od czasownika. W przypadku czerwonych przycisków, zwykle służących do tworzenia działań, należy używać wielkich liter.
Nie należy Należy

Pola wyboru i przyciski opcji

Używaj pól wyboru, jeśli użytkownicy mogą zaznaczyć kilka opcji lub nie mogą ich wybrać wcale. Używaj opcji (lub menu wyboru), gdy trzeba wybrać tylko jedną opcję.

  • Nie zmieniaj działania pól wyboru w taki sposób, aby przypominały przyciski opcji.
  • Nie rób niczego od razu po sprawdzeniu. Ludzie popełniają błędy. Poczekaj, aż użytkownicy klikną przycisk potwierdzający wybór.

Wybierz menu

Wybór to świetny sposób na zaproponowanie krótkiej listy alternatywnych rozwiązań.

  • Posortuj opcje alfabetycznie lub według logicznego schematu, który każdy użytkownik może zrozumieć (np. dni tygodnia, zaczynając od niedzieli).
  • Jeśli lista rośnie zbyt długo, rozważ użycie innego elementu sterującego. Możesz na przykład wyświetlić przewijaną listę, aby zrobić w menu więcej miejsca i ułatwić poruszanie się po nim.

Obszary tekstowe

Jeśli użytkownicy muszą wpisać więcej niż kilka słów, użyj obszaru tekstowego.

  • Zadbaj o to, aby obszary tekstowe miały co najmniej 2 wiersze wysokości, aby były łatwiejsze w użyciu i nie wyglądały jak pola tekstowe.
  • Umieść etykiety na górze.

Pola tekstowe

Używaj pól tekstowych, jeśli użytkownicy muszą wpisać tylko jedno lub dwa słowa.

  • Szerokość pola tekstowego powinna wskazywać, czego oczekujesz od użytkowników.
  • Unikaj używania tekstu zastępczego jako etykiety, ponieważ zniknie on po zaznaczeniu. Tekst zastępczy przydaje się, gdy można podać przykłady lub podać dodatkowe szczegóły.
  • Umieść etykiety na górze. Krótkie pola tekstowe możesz też rozmieszczać obok siebie.

Marka

W Twoim dodatku

Jeśli chcesz zaprezentować markę, postaraj się, aby był zwięzły i zwięzły. Dzięki temu użytkownicy mogą skupić się na interfejsie użytkownika, a dodatek staje się częścią edytora.

  • Wszystkie aspekty dodatku muszą być zgodne ze wskazówkami dotyczącymi marki.
  • Nie używaj słowa „Google” ani ikon usług Google.
  • Tekst nie powinien być dłuższy niż kilka słów i mieć styl ustawiony w klasie gray z pakietu CSS dodatków.
  • Grafika powinna być na białym tle i nie większe niż 200 × 60 pikseli.
  • W przypadku okien marka powinna znajdować się w prawym dolnym rogu.
  • Na pasku bocznym oznaczenia marki mogą się znajdować u góry lub u dołu.

W sklepie

Aby opublikować dodatek do edytora, musisz mieć szereg komponentów z obrazem. Te zasoby służą do utworzenia informacji o dodatku do aplikacji.

Ułatwienia dostępu

Każdy powinien móc korzystać z Twojego dodatku, bez względu na to, czy widzi inne kolory, korzysta z czytnika ekranu, czy ma inne potrzeby. Ułatwienia dostępu to obszerny temat, który nie może być w pełni omówiony w tym przewodniku stylistycznym. Przykładem może być strona Ułatwienia dostępu Google. Oto kilka wskazówek, które pomogą Ci zacząć:

  • Upewnij się, że możesz przejść do wszystkich elementów interfejsu za pomocą klawiatury. Dodaj element tabindex=0 do niestandardowych elementów sterujących (np. utworzonych za pomocą <div>), aby użytkownicy mogli otwierać je za pomocą klawisza Tab. Zastanów się, czy nie powinny być obsługiwane także inne klucze, np. strzałki w przypadku listy.
  • Niektóre osoby mogą używać czytnika ekranu w połączeniu z dodatkiem. Obrazy powinny mieć atrybut alt, a niestandardowe elementy sterujące powinny mieć atrybuty ARIA pozwalające opisać sposób ich użycia.
  • Nie polegaj wyłącznie na kolorze w odniesieniu do stanu. Używaj też ikon i tekstu.

Jeśli korzystasz ze standardowych ustawień internetowych, takich jak opisane wcześniej w tym przewodniku, ułatwisz sobie dostęp do swojego dodatku.