Add-on Google Workspace harus konsisten dengan gaya dan tata letak aplikasi host mereka memanjang. Mereka harus memperluas UI secara alami dengan menggunakan kontrol dan perilaku yang familier. Pedoman yang disajikan di sini menjelaskan cara menangani teks, gambar, kontrol, dan branding yang mempromosikan {i>user experience<i} berkualitas tinggi.
Jika add-on Anda membuka halaman web terpisah yang merupakan bagian integral dari (seperti halaman setelan untuk add-on), pastikan halaman web tersebut ikuti juga pedoman gaya berikut.
Teks dan gambar
Bagian ini memberi tahu Anda cara menggunakan teks dan gambar dengan benar dalam add-on.
Nama add-on
Anda harus menetapkan nama add-on dalam project-nya mewujudkan dan membuat Anda konfigurasi add-on untuk publikasi. Nama ini muncul di banyak tempat, seperti Google Workspace Marketplace daftar dan dalam menu. Saat memilih nama:
- Gunakan kapitalisasi judul.
- Hindari tanda baca, terutama tanda kurung, kecuali merupakan bagian dari merek Anda.
- Buat singkat—15 karakter atau kurang adalah yang terbaik. Nama panjang dapat otomatis terpotong di listingan Google Workspace Marketplace dan di tempat lain.
- Jangan sertakan kata "Google", "Gmail", atau nama produk Google lainnya di nama add-on Anda.
- Jangan sertakan kata "add-on" di nama add-on Anda.
- Tinggalkan informasi versi.
Gaya penulisan
Anda tidak perlu menulis banyak. Sebagian besar tindakan harus dijelaskan melalui ikonografi, tata letak, dan label singkat. Jika Anda menemukan bagian dari add-on memerlukan penjelasan yang lebih lengkap daripada yang dapat diberikan oleh label singkat, untuk membuat laman web terpisah yang menjelaskan {i>add-on<i} Anda dan menautkannya.
Saat menulis teks UI:
- Gunakan kapitalisasi kalimat (terutama untuk tombol, label, dan tindakan kartu).
- Pilih teks singkat dan sederhana tanpa jargon atau akronim.
Tindakan universal dan kartu
Jika Anda menggunakan tindakan universal atau tindakan kartu di add-on, add-on ini akan muncul sebagai item menu di kartu yang Anda tentukan. Anda dapat memilih teks yang digunakan di menu ini untuk tindakan. Saat memilih teks yang akan digunakan:
- Hindari teks menu yang hanya mengulangi nama add-on Anda.
- Memulai setiap item menu dengan kata tindakan seperti "Run", "Configure", atau "Buat".
- Jelaskan tugas, bukan komponen UI yang ditampilkan tindakan.
- Jika tindakan Anda memulai alur kerja dan tidak ada kata kerja tunggal yang menjelaskan apa fungsinya, sebut saja "{i>Start<i}".
- Pertahankan jumlah item menu agar tidak memaksa pengguna untuk men-scroll melalui daftar yang besar. Jika Anda memiliki lebih banyak tindakan untuk diimplementasikan, pertimbangkan untuk menggunakan beberapa kartu dengan tindakan yang berbeda di masing-masing kartu.
Pesan error
Jika ada yang salah, sebaiknya Anda menggunakan bahasa yang sederhana. Jelaskan masalah dari sudut pandang pengguna, dan menyarankan cara untuk memperbaikinya.
- Jangan izinkan pengguna melihat pengecualian apa pun yang dilempar oleh kode Anda. Sebagai gantinya,
gunakan pernyataan
try...catchuntuk mencegat pengecualian, lalu menampilkan pesan {i>error <i}yang mudah digunakan. - Sebelum memublikasikannya, pastikan add-on Anda tidak menampilkan informasi debug di UI.
Konten Bantuan
Anda mungkin ingin mendesain kartu yang menampilkan informasi bantuan atau menjelaskan operasi add-on ini kepada pengguna. Jika Anda membuat konten bantuan untuk {i>add-on<i}, ingatlah untuk:
- Jika memungkinkan, tampilkan petunjuk dalam daftar berbutir atau bernomor. Pengguna berjalan kaki sampai ke hasil akhir, dengan referensi yang jelas ke elemen UI yang dinamai.
- Pastikan instruksi Anda menjelaskan semua persyaratan dengan jelas, seperti {i>spreadsheet<i} dengan cara tertentu.
- Jangan ragu untuk menautkan ke konten bantuan eksternal, seperti halaman web pendukung.
Gambar
Gambar yang digunakan di add-on Anda adalah salah satu jenis ikon bawaan atau gambar yang dihosting secara publik yang ditentukan oleh URL. Saat menggunakan {i> host image<i}, pastikan bahwa add-on ini dapat diakses oleh semua orang yang mungkin menggunakan add-on Anda.
Kontrol
Bagian ini memberikan panduan pengalaman pengguna untuk widget interaktif.
Tombol
Gunakan tombol untuk mengontrol tindakan utama antarmuka pengguna Anda widget lainnya.
- Sebagian besar label tombol teks harus dimulai dengan kata kerja.
- Baris tombol harus dibatasi hingga tiga tombol atau kurang dalam sebagian besar kasus.
DecoratedText
Widget DecoratedText memungkinkan Anda menyajikan konten teks dengan ikon, tombol, atau {i>switch<i}.
- Gunakan kapitalisasi kalimat untuk konten teks.
- Teks widget DecoratedText terpotong jika tidak muat dengan atau ukuran ruang yang tersedia. Untuk alasan ini, selalu upayakan untuk menyimpan konten teks sebagai sesingkat mungkin.
Input pilihan
Anda dapat menggunakan berbagai widget input pemilihan di add-on: kotak pilihan drop-down, kotak centang, dan tombol pilihan.
- Gunakan kotak centang jika orang dapat memilih beberapa opsi, atau tidak memilih opsi sama sekali. Gunakan tombol pilihan (atau menu pilih) jika hanya satu opsi yang harus dipilih. Gunakan menu {i>dropdown<i} saat memberikan daftar singkat alternatif ketika mencoba menghemat ruang di UI.
- Gunakan kapitalisasi kalimat untuk teks yang ditetapkan ke setiap opsi.
- Hindari penggunaan perubahan pilihan untuk memicu tindakan besar yang sulit untuk dibalik, karena orang sering membuat kesalahan saat membuat pilihan. Sebagai gantinya, pertimbangkan menambahkan tombol yang membaca nilai pilihan saat ini dan kemudian memicu tindakan tersebut.
- Untuk dropdown, urutkan opsi menurut abjad atau skema logis yang dapat dipahami semua pengguna (seperti menampilkan hari dalam seminggu secara berurutan, mulai dari hari Minggu atau Senin).
- Membatasi jumlah opsi dalam input pilihan tertentu ke jumlah yang wajar. Jika ada terlalu banyak pilihan, pengguna mungkin akan sulit untuk menggunakan widget tersebut. Dalam kasus tersebut, pertimbangkan untuk membatalkan opsi ke dalam berbagai kategori dan beberapa widget.
Input teks
Input teks menyediakan tempat bagi pengguna untuk memasukkan data string.
- Jangan gunakan input teks untuk membuat pengguna mengetik salah satu rangkaian entri yang memungkinkan. Gunakan opsi drop-down sebagai gantinya.
- Gunakan petunjuk dan saran untuk membantu pengguna memasukkan teks dengan format dan konten.
- Gunakan input teks multibaris jika teks yang akan dimasukkan lebih dari beberapa kata.
Branding
Bagian ini memberikan pedoman pengalaman pengguna untuk menambahkan unsur merek ke antarmuka add-on Anda.
Di add-on Anda
Jika Anda ingin menyertakan branding dalam UI add-on, buat singkat dan ringan. Hal ini membantu orang berfokus pada fungsi add-on Anda.
- Semua aspek add-on Anda harus mengikuti pedoman branding.
- Jangan sertakan kata "Google", "Gmail", atau nama produk Google lainnya.
- Jangan menyertakan ikon produk Google, meskipun telah diubah.
- Jangan sertakan kata "add-on" dalam teks branding.
- Teks branding tidak boleh lebih dari beberapa kata.
Di Google Workspace Marketplace
Saat mengonfigurasi add-on untuk publikasi, Anda menyediakan sejumlah aset grafis dan teks untuk membuat Listingan Google Workspace Marketplace.
Semua aspek listingan Play Store Anda dan aset ini harus mengikuti pedoman branding.