Panduan gaya UI untuk Add-on Editor

Add-on Editor membangun antarmuka pengguna (menu, bilah sisi, dan dialog) menggunakan Layanan HTML. Karena antarmuka dikembangkan dalam HTML dan CSS, dan sangat mudah disesuaikan. Namun, ketika membangun antarmuka {i>add-on<i}, Anda harus mendesainnya agar memberikan pengguna yang hebat pengalaman yang lancar bagi developer.

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

  • Gunakan paket CSS add-on di Halaman layanan HTML.
  • Jika ragu tentang desain, temukan dialog atau {i>sidebar<i} yang serupa di editor dan mencocokkannya, atau merujuk ke panduan memulai add-on.
  • Ikuti panduan gaya ini untuk menciptakan pengalaman yang lancar.

Teks

Nama add-on

Anda harus menyetel nama add-on Anda saat memublikasikan anotasi. Nama ini muncul di banyak tempat, seperti toko add-on dan di dalam menu.

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

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

Tips pasca-penginstalan

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

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

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

  • Menu adalah bagian penting dari cara pengguna mengontrol {i>add-on<i} Anda, jadi struktur dan kata-kata dengan hati-hati.
  • Hindari item menu yang hanya mengulangi nama add-on Anda. Sebagai gantinya, mulailah dengan kata tindakan.
  • Jika item menu utama Anda memulai alur kerja dan tidak ada kata kerja tunggal yang menjelaskan apa fungsinya, sebut saja "{i>Start<i}". Pola ini digunakan di Panduan memulai add-on Dokumen.
  • Cobalah untuk tidak menggunakan sub-menu, kecuali jika menu Anda memiliki lebih dari enam item. Mereka dapat rewel dan sulit untuk 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 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 try...catch untuk mencegat pengecualian, lalu menampilkan pesan {i>error<i} yang mudah digunakan dengan gaya teks {i>inline<i} Class error dari add-on CSS paket atau dialog peringatan.
  • Sebelum mempublikasikan, periksa apakah add-on Anda tidak mencatat informasi debug untuk konsol JavaScript; penggunaan Logging Stackdriver sebagai gantinya.
Larangan Anjuran
Pesan error tidak bermanfaat Pesan kesalahan baik

Konten Bantuan

Setiap menu add-on menyertakan dialog Bantuan otomatis. Jika Anda memberikan URL bantuan saat Anda memublikasikannya, tombol "Pelajari lebih lanjut" tautan ke laman tersebut. Kecuali add-on mudah dipahami, berikan halaman yang menjelaskan cara menggunakannya.

  • 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 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 menu mereka, tetapi sebagian besar tampilkan sidebar atau dialog dengan saat ini.

  • Sidebar paling cocok untuk alat persisten yang sering digunakan banyak orang berulang kali sambil merujuk pada isi dokumen atau {i>spreadsheet<i} mereka.
  • Dialog paling cocok untuk alat sekali pakai, halaman setelan, dan pesan penting.

Teks UI

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

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

Dialog

Dialog sangat cocok untuk alat yang digunakan orang sekali, lalu lanjutkan. Misalnya, jika memungkinkan orang menyisipkan grafik, Anda dapat menampilkan dialog dengan pilihan apa yang harus disisipkan, lalu tutup dialog saat grafik dimasukkan. Dialog adalah juga berguna untuk menampilkan setelan add-on atau untuk mengomunikasikan untuk pesan penting.

  • Jangan buka dialog (termasuk pemberitahuan atau perintah) dari dialog lain—hanya ditampilkan satu per satu.
  • Untuk judul dialog, gunakan kata atau frasa pendek, yang diawali dengan kata yang penting.
  • Label tombol harus terkait dengan judul dialog.
  • Pilih dua tombol, biasanya tindakan utama dan "Cancel". Untuk kasus khusus yang memerlukan tombol ketiga, pertimbangkan sudut kanan bawah.
  • Meletakkan tombol di pojok kiri bawah dialog. Tombol utama berwarna biru harus berada di sebelah kiri, dengan tombol sekunder abu-abu di sebelah kanan.
Larangan Anjuran
Judul dialog buruk Judul dialog bagus

{i>Sidebar<i} memungkinkan orang-orang merujuk kembali ke dokumen, {i>spreadsheet<i}, presentasi, atau bentuk saat membuat pilihan. Add-on juga memungkinkan orang menggunakan add-on berulang kali. Setiap kali sidebar baru dibuka, sidebar sebelumnya akan ditutup secara otomatis. Pilihan ini cocok untuk mode sementara yang digunakan pengguna untuk keluar setelah selesai.

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

Kontrol

UI add-on yang bagus memberikan ruang tersendiri untuk kontrolnya. {i>Margin<i} yang memadai dan {i>padding<i} sangat membantu, sedangkan kontrol yang padat bisa tampak luar biasa. Saat di ragu, meminjam {i>layout<i} dari editor itu sendiri. Misalnya, tinjau yang ada dialog di Google Dokumen, seperti File > Penyiapan halaman, saat membuat halaman 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 Anda, bukan tindakan biasa tautan atau elemen lainnya.

  • Hindari menampilkan lebih dari satu tombol biru, merah, atau hijau sekaligus. Abu-abu mungkin muncul berulang kali.
  • Sebagian besar label tombol harus dalam kapitalisasi kalimat dan dimulai dengan kata kerja. Merah biasanya untuk {i>create action<i}, harus ditulis dalam huruf besar semua.
Larangan Anjuran

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 pilihan) jika hanya satu opsi yang harus dipilih.

  • Jangan ubah kotak centang untuk meniru tombol pilihan.
  • Jangan langsung melakukan apa pun saat diperiksa. Orang-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.

  • Mengurutkan opsi menurut abjad atau skema logis yang dapat dilakukan semua pengguna pahami (misalnya hari, mulai dari hari Minggu).
  • Jika daftar menjadi terlalu panjang, pertimbangkan untuk menggunakan kontrol lain. Misalnya, Anda mungkin menampilkan daftar yang dapat di-scroll untuk memberi lebih banyak ruang dan membuatnya lebih mudah dinavigasi.

Area teks

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

  • Buat area teks minimal dua baris sehingga lebih mudah digunakan dan tidak terlihat seperti kolom teks.
  • Tempatkan label di atas.

Kolom teks

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

  • Lebar kolom teks harus menunjukkan apa yang Anda harapkan dari pengguna untuk mengetiknya.
  • Hindari menggunakan teks placeholder sebagai label, karena teks tersebut akan menghilang saat fokus. Teks placeholder berguna untuk memberikan contoh atau detail tambahan.
  • Tempatkan label di bagian atas, tetapi jangan ragu untuk menata kolom teks pendek secara berdampingan.

Branding

Di add-on Anda

Jika Anda ingin menyertakan branding, buatlah secara singkat dan terang. 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 pedoman branding.
  • Jangan sertakan kata “Google” atau menggunakan ikon produk Google.
  • Teks tidak boleh lebih dari beberapa kata dan diberi gaya dalam Class gray dari CSS add-on paket.
  • Gambar harus menggunakan latar belakang putih dan tidak lebih dari 200 x 60 px.
  • Untuk dialog, branding harus berada di pojok kanan bawah.
  • Untuk sidebar, branding dapat berada di bagian atas atau bawah.

Di toko

Untuk memublikasikan Add-on Editor, Anda memerlukan jumlah 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 harus Anda berikan, lihat panduan gambar.

Aksesibilitas

Semua orang harus dapat menikmati add-on Anda, baik melihat warna maupun tidak secara berbeda, menggunakan pembaca layar, atau memiliki kebutuhan lain. Aksesibilitas adalah jalur yang luas topik yang tidak dapat dibahas sepenuhnya dalam panduan gaya ini. Satu referensi yang bermanfaat adalah situs Google Aksesibilitas. Namun, di sini adalah beberapa tips untuk memulai:

  • Pastikan Anda bisa membuka semua kontrol UI dengan keyboard. Tambah tabindex=0 ke kontrol kustom (seperti yang dibuat dengan <div>) sehingga orang dapat tab ke mereka. Pertimbangkan apakah tombol lain juga harus didukung, seperti panah untuk daftar.
  • Beberapa orang mungkin menggunakan pembaca layar dengan add-on Anda. Dengan demikian, gambar harus punya Atribut alt, dan kontrol kustom harus memiliki Atribut ARIA untuk mendeskripsikan penggunaannya.
  • Jangan hanya mengandalkan warna dalam mengomunikasikan status. Gunakan juga ikon dan teks.

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