Panduan gaya UI untuk add-on Editor

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

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 tersebut muncul di banyak tempat, seperti toko add-on dan dalam menu.

  • Gunakan kapitalisasi judul.
  • Hindari tanda baca, terutama tanda kurung, kecuali jika merupakan bagian dari merek Anda.
  • Buat singkat—30 karakter atau kurang adalah yang terbaik. Nama yang panjang dapat dipotong secara otomatis.
  • Jangan sertakan nama produk Google yang menjadi tujuan add-on (atau gunakan kata Google).
  • Hapus informasi versi.
  • Pastikan nama yang dipublikasikan add-on sama dengan nama file project skrip. Nama project akan muncul di dialog otorisasi.
Larangan Anjuran
Nama add-on yang buruk Nama add-on yang baik

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 item menu).
  • Pilih teks singkat dan sederhana tanpa jargon atau akronim.
Larangan Anjuran

Tips pasca-penginstalan

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

  • Mulai dengan kata kerja.
  • Jelaskan langkah pertama untuk menggunakan add-on Anda.
  • Jika Anda memiliki UI utama, seperti sidebar, jelaskan cara membukanya.
  • Jangan promosikan add-on Anda di sini—add-on sudah diinstal.
Larangan Anjuran
Tips pasca-penginstalan yang buruk Tips pascapenginstalan 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. Sebagai gantinya, 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 Anda, jadi desain struktur dan kata-katanya dengan cermat.
  • Hindari item menu yang hanya mengulangi nama add-on Anda. Sebagai gantinya, mulai dengan kata kerja.
  • Jika item menu utama Anda memulai alur kerja dan tidak ada satu kata kerja yang menjelaskan fungsinya, beri nama "Mulai". Pola ini digunakan dalam panduan memulai add-on Dokumen.
  • Kecuali jika menu Anda memiliki lebih dari enam item, sebaiknya jangan gunakan submenu. Model tersebut dapat menjadi rumit dan sulit dipilih.
  • Deskripsikan tugas, bukan komponen UI yang ditampilkan item menu.
Larangan Anjuran
Label item menu yang buruk Label item menu yang baik

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...catch untuk menangkap pengecualian, lalu tampilkan pesan error yang mudah digunakan dengan gaya teks inline di class error dari paket CSS add-on atau dialog peringatan.
  • Sebelum memublikasikan, pastikan add-on Anda tidak mencatat informasi debug ke konsol JavaScript; gunakan logging Stackdriver sebagai gantinya.
Larangan Anjuran
Pesan error yang 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 jika add-on Anda sudah jelas, harap berikan halaman yang menjelaskan cara menggunakannya.

  • 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 Anda dari antarmuka pengguna utama juga. 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 oleh 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 ke konten dokumen atau spreadsheet mereka.
  • Dialog paling cocok untuk alat sekali pakai, halaman setelan, dan pesan penting.

Teks UI

Dalam dialog atau sidebar apa pun, asumsikan bahwa orang hanya membaca judul dan label tombol. Apakah mereka masih dapat mengetahui fungsi antarmuka Anda dan membuat pilihan yang baik?

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

Dialog

Dialog sangat cocok untuk alat yang digunakan orang sekali, lalu beralih. Misalnya, jika add-on memungkinkan pengguna menyisipkan gambar, Anda dapat menampilkan dialog dengan pilihan apa yang akan disisipkan, lalu menutup dialog saat gambar disisipkan. Dialog juga berguna untuk menampilkan setelan add-on, atau untuk menyampaikan 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 yang paling penting.
  • Label tombol harus berkaitan dengan judul dialog.
  • Pilih dua tombol, biasanya tindakan utama dan "Batal". Untuk kasus khusus yang memerlukan tombol ketiga, pertimbangkan pojok kanan bawah.
  • Letakkan 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 yang buruk Judul dialog yang baik

Sidebar memungkinkan pengguna melihat kembali dokumen, spreadsheet, presentasi, atau formulir mereka saat membuat pilihan. Add-on juga memungkinkan pengguna menggunakan add-on Anda berulang kali. Setiap kali sidebar baru dibuka, sidebar sebelumnya akan otomatis ditutup. Mode ini paling cocok untuk mode sementara yang akan keluar dari pengguna saat selesai.

  • Pengguna mungkin memiliki add-on lain dengan sidebar mereka sendiri. Jika dua add-on mencoba membuka sidebar secara bersamaan, hanya satu yang akan ditampilkan.
  • Jangan tampilkan 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 tindakan ini akan meminta pengguna untuk memberikan otorisasi penuh.

Kontrol

UI add-on yang bagus memberikan ruang untuk kontrolnya. Margin dan padding yang memadai akan sangat membantu, sedangkan kontrol yang padat dapat tampak berlebihan. Jika ragu, pinjam tata letak dari editor itu sendiri. Misalnya, tinjau dialog yang ada di Google Dokumen, seperti File > Page setup, saat membuat dialog Anda sendiri.

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

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 sekaligus. Tombol abu-abu mungkin muncul berulang kali.
  • Sebagian besar label tombol harus dalam bentuk kalimat dan diawali dengan kata kerja. Tombol merah, biasanya untuk tindakan membuat, harus menggunakan huruf besar semua.
Larangan Anjuran

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.

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

Pilih menu

Pilihan adalah cara yang bagus untuk menawarkan daftar singkat alternatif.

  • Urutkan opsi menurut abjad atau menurut skema logis yang dapat dipahami semua pengguna (seperti hari dalam seminggu, mulai dari Minggu).
  • Jika daftar menjadi terlalu panjang, pertimbangkan untuk menggunakan kontrol lain. Misalnya, Anda dapat menampilkan daftar yang dapat di-scroll untuk memberi menu lebih banyak ruang dan membuatnya lebih mudah dinavigasi.

Area teks

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

  • Buat area teks setidaknya dua baris agar lebih mudah digunakan dan tidak terlihat seperti kolom teks.
  • Tempatkan label di bagian atas.

Kolom teks

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

  • Lebar kolom teks harus menunjukkan apa yang Anda harapkan orang ketik di dalamnya.
  • Hindari penggunaan teks placeholder sebagai label, karena teks tersebut akan menghilang saat difokuskan. Teks placeholder berguna untuk memberikan contoh atau detail tambahan.
  • Tempatkan label di bagian atas, tetapi jangan ragu untuk menata letak kolom teks singkat secara berdampingan.

Branding

Di add-on Anda

Jika Anda ingin menyertakan branding, buatlah singkat dan ringan. Hal ini membantu pengguna berfokus pada UI Anda, dan membuat add-on Anda terasa seperti bagian dari editor.

  • Semua aspek add-on Anda harus mengikuti panduan branding.
  • Jangan sertakan kata “Google” atau gunakan ikon produk Google.
  • Teks tidak boleh lebih dari beberapa kata dan diberi gaya dalam class gray dari paket CSS add-on.
  • Grafik harus memiliki latar belakang putih dan tidak lebih dari 200 piksel × 60 piksel.
  • 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 panduan branding.
  • Untuk mengetahui detail selengkapnya tentang gambar yang perlu Anda berikan, lihat panduan gambar.

Aksesibilitas

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

  • Pastikan Anda dapat membuka semua kontrol UI dengan keyboard. Tambahkan tabindex=0 ke kontrol kustom (seperti yang dibuat dengan <div>) sehingga pengguna dapat menggunakan tombol tab untuk membukanya. Pertimbangkan apakah tombol 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 menjelaskan penggunaannya.
  • Jangan hanya mengandalkan warna untuk menyampaikan status. Gunakan ikon dan teks juga.

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