Panduan gaya UI untuk Add-on Editor

Add-on Editor mem-build antarmuka pengguna (menu, sidebar, dan dialog) menggunakan layanan HTML Apps Script. Karena dikembangkan dalam HTML dan CSS, antarmuka tersebut sangat mudah disesuaikan. Namun, saat mem-build antarmuka add-on, Anda harus mendesainnya untuk memberikan pengalaman pengguna yang baik.

Add-on terbaik memperluas setiap editor secara alami dengan menggunakan kontrol dan perilaku yang sudah dikenal. Saat mem-build add-on baru:

Teks

Nama add-on

Anda harus menetapkan nama add-on saat memublikasikannya. Nama muncul di banyak tempat, seperti toko add-on dan di dalam menu.

  • Gunakan kapitalisasi judul.
  • Hindari tanda baca, terutama tanda kurung, kecuali bagian dari merek Anda.
  • Durasi singkat—sebaiknya 30 karakter atau kurang. Nama panjang dapat terpotong secara otomatis.
  • Jangan sertakan nama produk Google yang digunakan add-on (atau gunakan kata Google).
  • Tinggalkan informasi versi.
  • Pastikan nama add-on yang dipublikasikan sama dengan nama file project skrip. Nama project akan muncul di dialog otorisasi.
Larangan Anjuran
Nama add-on salah Nama add-on yang baik

Gaya penulisan

Anda tidak perlu menulis terlalu banyak. Sebagian besar tindakan harus dijelaskan melalui ikonografi, tata letak, dan label singkat. Jika Anda menemukan bagian dari add-on memerlukan penjelasan yang lebih luas daripada yang dapat diberikan oleh label singkat, praktik terbaiknya adalah membuat halaman web terpisah yang menjelaskan add-on dan menautkannya.

Saat menulis teks UI:

  • Gunakan kapitalisasi kalimat (terutama untuk tombol, label, dan item menu).
  • Pilih teks singkat dan sederhana tanpa jargon atau akronim.
Larangan Anjuran

Tips pascapenginstalan

Tips pasca-penginstalan Anda akan muncul tepat setelah seseorang menginstal add-on, dan juga muncul di Bantuan. Anda memiliki beberapa kalimat untuk membantu pengguna memulai dengan cepat.

  • Mulai dengan kata tindakan.
  • Jelaskan langkah pertama untuk menggunakan add-on Anda.
  • Jika Anda memiliki UI utama, seperti sidebar, jelaskan cara membukanya.
  • Jangan promo add-on Anda di sini karena sudah diinstal.
Larangan Anjuran
Tips pascapenginstalan yang buruk Tips pasca-penginstalan yang baik

Tidak seperti project Apps Script reguler, add-on tidak muncul di editor skrip atau pengelola skrip; pengguna tidak dapat menjalankan skrip add-on secara langsung. Sebaliknya, setiap add-on mendapatkan tempat di menu add-on. Menu (dan mungkin dialog atau sidebar) memungkinkan pengguna berinteraksi dengan add-on.

  • Menu adalah bagian penting dari cara pengguna mengontrol add-on, jadi desain struktur dan kata-katanya dengan cermat.
  • Hindari item menu yang hanya mengulangi nama add-on. Sebagai gantinya, mulailah dengan kata tindakan.
  • Jika item menu utama Anda memulai alur kerja dan tidak ada satu kata kerja yang menjelaskan fungsinya, sebut saja "Mulai". Pola ini digunakan pada Panduan memulai add-on Dokumen.
  • Kecuali menu Anda memiliki lebih dari enam item, cobalah untuk tidak menggunakan sub-menu. Atribut ini dapat bermasalah dan sulit dipilih.
  • Jelaskan tugas, bukan komponen UI yang ditampilkan item menu.
Larangan Anjuran
Label item menu buruk Label item menu yang baik

Pesan error

Jika ada yang salah, sebaiknya gunakan bahasa biasa. Jelaskan masalah dari sudut pandang pengguna, dan sarankan cara memperbaikinya.

  • Jangan izinkan pengguna melihat pengecualian apa pun yang ditampilkan oleh kode Anda. Sebagai gantinya, gunakan pernyataan try...catch untuk menangkap pengecualian, lalu menampilkan pesan error goreng pengguna dengan teks inline yang ditata dalam class error dari paket CSS add-on atau dialog alert.
  • Sebelum dipublikasikan, pastikan add-on tidak mencatat informasi debug ke konsol JavaScript; gunakan logging Stackdriver.
Larangan Anjuran
Pesan kesalahan buruk Pesan error yang baik

Konten Bantuan

Setiap menu add-on menyertakan dialog Bantuan otomatis. Jika Anda memberikan URL bantuan saat memublikasikan, tombol "Pelajari lebih lanjut" akan ditautkan ke halaman tersebut. Kecuali add-on Anda cukup jelas, berikan halaman yang menjelaskan cara menggunakannya.

  • Jika memungkinkan, tampilkan petunjuk dalam daftar berbutir atau bernomor. Pandu pengguna hingga hasil akhir, dengan referensi yang jelas ke elemen UI yang telah diberi nama.
  • Pastikan petunjuk Anda menjelaskan persyaratan apa pun dengan jelas, seperti menyiapkan spreadsheet dengan cara tertentu.
  • Jangan ragu untuk menautkan juga konten bantuan Anda dari antarmuka pengguna utama. Jika add-on membuat dokumen baru, Anda juga dapat menampilkan petunjuk di isi dokumen.

Antarmuka pengguna kustom

Beberapa Add-on Editor sederhana dapat dikontrol sepenuhnya dengan menunya, tetapi sebagian besar menampilkan sidebar atau dialog dengan konten kustom.

  • Sidebar paling cocok untuk alat persisten yang cenderung digunakan orang berulang kali saat merujuk pada konten dokumen atau spreadsheet mereka.
  • Dialog sangat cocok untuk alat sekali pakai, halaman setelan, dan pesan penting.

Teks UI

Di dialog atau sidebar, asumsikan orang hanya membaca judul dan label tombol. Apakah mereka masih dapat mengetahui fungsi antarmuka Anda dan membuat pilihan yang tepat?

  • Menggunakan label judul dan tombol yang berdiri sendiri.
  • Hindari blok teks deskriptif yang panjang.

Dialog

Dialog sangat bagus untuk alat yang digunakan orang sekali, lalu beralih ke solusi lain. Misalnya, jika add-on memungkinkan orang menyisipkan grafik, Anda mungkin menampilkan dialog dengan pilihan apa yang akan disisipkan ̧ lalu menutup dialog saat grafis disisipkan. Dialog juga berguna untuk menampilkan setelan add-on, atau untuk mengomunikasikan pesan penting.

  • Jangan membuka dialog (termasuk notifikasi atau perintah) dari dialog lain—hanya tampilkan satu per satu.
  • Untuk judul dialog, gunakan kata atau frasa singkat, yang diawali dengan kata paling penting.
  • Label tombol harus terkait dengan judul dialog.
  • Pilih dua tombol, biasanya tindakan utama dan "Batal". Untuk kasus khusus yang memerlukan tombol ketiga, pertimbangkan sudut kanan bawah.
  • Menempatkan tombol di sudut kiri bawah dialog. Tombol utama berwarna biru harus berada di sebelah kiri, dengan tombol sekunder berwarna abu-abu di sebelah kanan.
Larangan Anjuran
Judul dialog buruk Judul dialog yang baik

Sidebar memungkinkan orang melihat kembali dokumen, spreadsheet, presentasi, atau formulir mereka saat memilih. Keduanya juga memungkinkan orang menggunakan add-on berulang kali. Setiap kali sidebar baru dibuka, sidebar sebelumnya akan otomatis ditutup. Pendekatan ini paling cocok untuk mode sementara yang digunakan pengguna untuk keluar saat selesai.

  • Pengguna mungkin memiliki add-on lain dengan sidebar mereka sendiri. Jika dua add-on mencoba membuka sidebar secara bersamaan, hanya satu add-on yang akan ditampilkan.
  • Jangan menampilkan sidebar atau dialog saat dokumen pertama kali dibuka.
  • Hanya add-on yang beroperasi di AuthMode.FULL yang dapat membuka sidebar atau dialog. Anda dapat menggunakan item menu untuk membuka sidebar karena menu ini meminta pengguna untuk memberikan otorisasi penuh.

Kontrol

UI add-on yang hebat memberikan kontrol pada ruang pernapasan. Margin dan padding yang cukup akan berguna, sementara kontrol yang padat mungkin terasa berlebihan. Jika ragu, meminjam tata letak dari editor itu sendiri. Misalnya, tinjau dialog yang ada di Google Dokumen, seperti File > Penyiapan halaman, saat membuat dialog Anda sendiri.

Dokumentasi untuk paket CSS add-on menyediakan markup contoh untuk setiap jenis kontrol di bawah ini.

Tombol

Gunakan tombol untuk mengontrol tindakan utama antarmuka pengguna, bukan link biasa atau elemen lainnya.

  • Hindari menampilkan lebih dari satu tombol biru, merah, atau hijau dalam satu waktu. Tombol abu-abu dapat muncul berulang kali.
  • Sebagian besar label tombol harus ditulis dalam kapitalisasi kalimat dan dimulai dengan kata kerja. Tombol merah, biasanya untuk membuat tindakan, harus menggunakan huruf besar semua.
Larangan Anjuran

Kotak centang dan tombol pilihan

Gunakan kotak centang jika orang dapat memilih beberapa opsi, atau tidak ada opsi sama sekali. Gunakan tombol pilihan (atau menu pilih) saat hanya satu opsi yang harus dipilih.

  • Jangan ubah perilaku kotak centang untuk meniru tombol pilihan.
  • Jangan melakukan apa pun saat diperiksa. Orang membuat kesalahan. Tunggu hingga pengguna mengklik tombol untuk mengonfirmasi pilihan mereka.

Pilih menu

Pilihan adalah cara yang bagus untuk menawarkan daftar alternatif alternatif.

  • Urutkan opsi menurut abjad atau skema logis yang dapat dipahami oleh semua pengguna (seperti hari dalam seminggu, mulai dari hari Minggu).
  • Jika daftar bertambah terlalu panjang, pertimbangkan untuk menggunakan kontrol yang berbeda. Misalnya, Anda dapat menampilkan daftar yang dapat di-scroll untuk memberikan lebih banyak ruang pada menu dan mempermudah navigasi.

Area teks

Jika orang perlu mengetik lebih dari beberapa kata, gunakan area teks.

  • Buat area teks dengan tinggi minimal dua baris agar lebih mudah digunakan dan tidak terlihat seperti kolom teks.
  • Letakkan label di atas.

Kolom teks

Gunakan kolom teks jika orang hanya perlu mengetik satu atau dua kata.

  • Lebar kolom teks akan menyarankan apa yang Anda harapkan dari orang-orang untuk mengetiknya.
  • Hindari penggunaan teks placeholder sebagai label karena dapat menghilangkan fokus. Teks placeholder berguna untuk memberikan contoh atau detail tambahan.
  • Letakkan label di atas, tetapi jangan ragu untuk meletakkan kolom teks singkat secara berdampingan.

Branding

Di add-on

Jika Anda ingin menyertakan branding, berikan gambaran yang singkat dan jelas. Hal ini membantu orang berfokus pada UI dan membuat add-on terasa seperti bagian dari editor.

  • Semua aspek add-on harus mengikuti pedoman branding.
  • Jangan sertakan kata “Google” atau gunakan ikon produk Google.
  • Teks tidak boleh lebih dari beberapa kata dan diberi gaya di class gray dari paket CSS add-on.
  • Grafik harus diletakkan di latar belakang putih dan tidak lebih dari 200px × 60px.
  • Untuk dialog, branding harus berada di sudut kanan bawah.
  • Untuk sidebar, branding dapat berada di bagian atas atau bawah.

Di toko

Untuk memublikasikan Add-on Editor, Anda memerlukan sejumlah aset gambar. Aset ini digunakan untuk membuat listingan Play Store add-on.

  • Semua aspek listingan Play Store Anda harus mengikuti pedoman branding.
  • Untuk detail selengkapnya tentang gambar yang perlu Anda berikan, lihat panduan gambar.

Aksesibilitas

Semua orang harus dapat menikmati add-on, baik melihat warna secara berbeda, menggunakan pembaca layar, atau memiliki kebutuhan lainnya. Aksesibilitas adalah topik yang luas dan tidak dapat dibahas sepenuhnya dalam panduan gaya ini. Salah satu referensi yang bermanfaat adalah situs Aksesibilitas Google. Namun, berikut adalah beberapa tips untuk memulai:

  • Pastikan Anda dapat membuka semua kontrol UI dengan keyboard. Menambahkan tabindex=0 ke kontrol kustom (seperti yang dibuat dengan <div>) sehingga orang dapat menambahnya. Pertimbangkan apakah kunci lain juga harus didukung, seperti panah untuk daftar.
  • Beberapa orang mungkin menggunakan pembaca layar dengan add-on Anda. Oleh karena itu, gambar harus memiliki atribut alt, dan kontrol kustom harus memiliki atribut ARIA untuk mendeskripsikan penggunaannya.
  • Jangan hanya mengandalkan warna untuk menyampaikan status. Gunakan juga ikon dan teks.

Jika Anda menggunakan kontrol web standar, seperti yang dijelaskan sebelumnya dalam panduan ini, membuat add-on dapat diakses dengan lebih mudah.