Add-on Google Workspace harus konsisten dengan gaya dan tata letak aplikasi host yang diperluas. UI harus diperluas secara alami dengan menggunakan kontrol dan perilaku yang sudah dikenal. Panduan yang disajikan di sini menjelaskan cara menangani teks, gambar, kontrol, dan branding yang mempromosikan pengalaman pengguna berkualitas tinggi.
Jika add-on Anda membuka halaman web terpisah yang merupakan bagian integral dari operasi add-on (seperti halaman setelan untuk add-on), pastikan halaman web tersebut juga mengikuti panduan gaya ini.
Teks dan gambar
Bagian ini memberi tahu Anda cara menggunakan teks dan gambar dengan benar di add-on.
Nama add-on
Anda harus menetapkan nama add-on di manifes project-nya dan saat mengonfigurasi add-on untuk publikasi. Nama tersebut muncul di banyak tempat, seperti listingan Google Workspace Marketplace dan dalam menu. Saat memilih nama:
- Gunakan kapitalisasi judul.
- Hindari tanda baca, terutama tanda kurung, kecuali jika merupakan bagian dari merek Anda.
- Buat singkat—15 karakter atau kurang adalah yang terbaik. Nama panjang dapat dipotong secara otomatis di listingan Google Workspace Marketplace dan di tempat lain.
- Jangan sertakan kata "Google", "Gmail", atau nama produk Google lainnya dalam nama add-on Anda.
- Jangan sertakan kata "add-on" dalam nama add-on Anda.
- Hapus informasi versi.
Gaya penulisan
Anda tidak perlu menulis banyak. Sebagian besar tindakan harus dibuat jelas melalui ikonografi, tata letak, dan label singkat. Jika Anda mendapati bahwa sebagian add-on Anda memerlukan penjelasan yang lebih luas daripada yang dapat diberikan oleh label singkat, sebaiknya buat halaman web terpisah yang menjelaskan add-on Anda dan link ke halaman tersebut.
Saat menulis teks UI:
- Gunakan huruf besar dan kecil (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, tindakan tersebut akan muncul sebagai item menu di kartu yang Anda tentukan. Anda dapat memilih teks yang digunakan di menu ini untuk tindakan tersebut. Saat memilih teks yang akan digunakan:
- Hindari teks menu yang hanya mengulangi nama add-on Anda.
- Mulai setiap item menu dengan kata tindakan seperti "Jalankan", "Konfigurasi", atau "Buat".
- Jelaskan tugas, bukan komponen UI yang ditampilkan tindakan.
- Jika tindakan Anda memulai alur kerja dan tidak ada satu kata kerja yang menjelaskan tindakannya, beri nama "Mulai".
- Pastikan jumlah item menu tetap kecil agar pengguna tidak perlu men-scroll daftar yang panjang. Jika Anda memiliki lebih banyak tindakan untuk diterapkan, sebaiknya gunakan beberapa kartu dengan tindakan yang berbeda di setiap kartu.
Pesan error
Jika terjadi masalah, penting untuk menggunakan bahasa yang sederhana. Jelaskan masalah dari sudut pandang pengguna, dan sarankan cara memperbaikinya.
- Jangan izinkan pengguna melihat pengecualian yang ditampilkan kode Anda. Sebagai gantinya,
gunakan pernyataan
try...catchuntuk menangkap pengecualian, lalu tampilkan pesan error yang mudah dipahami pengguna. - Sebelum memublikasikan, pastikan add-on Anda tidak menampilkan informasi debug di UI.
Konten Bantuan
Anda dapat mendesain kartu yang menampilkan informasi bantuan atau menjelaskan operasi add-on kepada pengguna. Jika Anda membuat konten bantuan untuk add-on, jangan lupa untuk:
- Jika memungkinkan, tampilkan petunjuk dalam daftar berbutir atau bernomor. Arahkan pengguna ke hasil akhir, dengan referensi yang jelas ke elemen UI yang diberi nama.
- Pastikan petunjuk Anda menjelaskan persyaratan apa pun dengan jelas, seperti menyiapkan spreadsheet dengan cara tertentu.
- Jangan ragu untuk menautkan ke konten bantuan eksternal, seperti halaman web pendukung.
Gambar
Gambar yang digunakan dalam add-on Anda adalah salah satu dari jenis ikon bawaan atau gambar yang dihosting secara publik yang ditentukan oleh URL. Saat menggunakan gambar yang dihosting, pastikan gambar tersebut 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, bukan widget lainnya.
- Sebagian besar label tombol teks harus diawali dengan kata kerja.
- Dalam sebagian besar kasus, baris tombol harus dibatasi hingga tiga tombol atau kurang.
DecoratedText
Widget DecoratedText memungkinkan Anda menampilkan konten teks dengan ikon, tombol, atau tombol akses.
- Gunakan kapitalisasi kalimat untuk konten teks.
- Teks widget DecoratedText terpotong jika tidak dapat muat dalam ruang yang tersedia. Oleh karena itu, selalu usahakan untuk membuat konten teks sesederhana mungkin.
Input pilihan
Anda dapat menggunakan berbagai widget input pilihan di add-on: kotak pilihan drop-down, kotak centang, dan tombol pilihan.
- Gunakan kotak centang jika pengguna dapat memilih beberapa opsi, atau tidak ada opsi sama sekali. Gunakan tombol pilihan (atau menu pilih) jika hanya satu opsi yang harus dipilih. Gunakan dropdown saat memberikan daftar singkat alternatif sekaligus mencoba menghemat ruang di UI.
- Gunakan kapitalisasi kalimat untuk teks yang ditetapkan ke setiap opsi.
- Hindari menggunakan perubahan pilihan untuk memicu tindakan besar yang sulit dibalik, karena orang sering melakukan kesalahan saat membuat pilihan. Sebagai gantinya, pertimbangkan untuk menambahkan tombol yang membaca nilai pilihan saat ini, lalu memicu tindakan.
- Untuk dropdown, urutkan opsi menurut abjad atau menurut skema logis yang dapat dipahami semua pengguna (seperti menampilkan hari dalam seminggu secara berurutan, mulai dari Minggu atau Senin).
- Batasi jumlah opsi dalam widget input pilihan tertentu ke jumlah yang wajar. Jika ada terlalu banyak opsi, pengguna mungkin kesulitan menggunakan widget. Dalam kasus tersebut, pertimbangkan untuk membagi opsi menjadi 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 dari kumpulan kemungkinan entri tertentu. Sebagai gantinya, gunakan pilihan dropdown.
- Gunakan petunjuk dan saran untuk membantu pengguna memasukkan teks dengan format dan konten yang benar.
- Gunakan input teks multibaris jika teks yang akan dimasukkan lebih dari beberapa kata.
Branding
Bagian ini memberikan panduan pengalaman pengguna untuk menambahkan elemen branding ke antarmuka add-on Anda.
Di add-on Anda
Jika Anda ingin menyertakan branding di UI add-on, buatlah singkat dan ringan. Hal ini membantu pengguna berfokus pada fungsi add-on Anda.
- Semua aspek add-on Anda harus mengikuti panduan branding.
- Jangan sertakan kata “Google”, "Gmail", atau nama produk Google lainnya.
- Jangan sertakan ikon produk Google, meskipun telah diubah.
- Jangan sertakan kata "add-on" dalam teks branding Anda.
- Teks branding tidak boleh lebih dari beberapa kata.
Di Google Workspace Marketplace
Saat mengonfigurasi add-on untuk publikasi, Anda akan memberikan sejumlah aset grafis dan teks untuk membuat listingan Google Workspace Marketplace.
Semua aspek listingan Play Store dan aset ini harus mengikuti panduan branding.