Ada dua aspek utama desain untuk Kanvas Interaktif:
- Mendesain percakapan
- Mendesain antarmuka pengguna (UI)
Pengguna Anda dapat berinteraksi dengan Action Anda yang menggunakan Kanvas Interaktif dengan berbicara ke Asisten Google atau menyentuh UI. Anda harus memastikan bahwa percakapan yang diucapkan dan UI saling melengkapi dan memudahkan pengguna untuk melanjutkan penggunaan Action. Bagian berikut membahas cara mendesain percakapan dan UI untuk pengalaman pengguna terbaik.
Apakah Canvas Interaktif sesuai untuk Action saya?
Sebelum mulai mendesain, pikirkan apakah Action Anda akan berfungsi baik dengan Interactive Canvas. Sebaiknya gunakan Interactive Canvas jika Action Anda memenuhi kriteria berikut:
- Action Anda mendapatkan manfaat dari pengalaman layar penuh yang beragam secara visual. Kanvas Interaktif ideal untuk pengalaman layar penuh yang memanfaatkan visual yang kaya, seperti game berbasis suara yang imersif.
- Action Anda memiliki alur percakapan yang intuitif. Jalur penting melalui Action Anda harus dapat dinavigasi melalui suara saja. Action yang memerlukan presisi spasial, seperti aplikasi menggambar, dapat memberikan pengalaman sulit bagi Anda untuk mendesain alur percakapan yang intuitif.
- Komponen dan penyesuaian yang ada tidaklah cukup. Misalnya, Anda ingin melakukan lebih dari sekadar komponen visual dan penyesuaian Asisten. Interactive Kanvas sangat bagus untuk menampilkan atribut merek visual, elemen dinamis, dan animasi yang unik. Selain itu, Interactive Canvas dapat digunakan untuk memberikan update pada satu antarmuka visual saat pengguna melanjutkan percakapan.
Persyaratan
Meskipun Interactive Canvas menggunakan lingkungan pengembangan web yang sudah dikenal, ada beberapa persyaratan yang perlu dipertimbangkan sebelum mendesain Action Anda.
Header atau pesan toast
Secara default, setiap aplikasi web Kanvas Interaktif menyertakan header di bagian atas layar dengan nama brand Anda. Area yang dicadangkan untuk header memiliki tinggi 56 dp untuk perangkat seluler, 96 dp untuk Home Hub, dan 120 dp untuk layar smart. Pastikan untuk mengikuti persyaratan header ini:
- Pastikan bahwa tidak ada informasi penting atau elemen interaktif yang tersembunyi di belakang header. Metode
getHeaderHeightPx()menentukan tinggi header.
Anda dapat mengganti header secara opsional dengan pesan toast yang muncul di layar pemuatan dan menyertakan nama tampilan Action, nama developer, dan petunjuk untuk keluar dari Action. Untuk mengganti header dengan pesan toast dan mengaktifkan mode layar penuh bagi pengguna, lihat Mengaktifkan mode layar penuh.
Batasan
Pertimbangkan batasan berikut sebelum mendesain Action dengan Canvas Interaktif:
- Tidak ada penyimpanan data lokal. Kami mencegah Action menyimpan cookie dan mengakses Web Storage API. Dengan batasan ini, sebaiknya Action Anda mengelola status di webhook dan menggunakan penyimpanan pengguna untuk menyimpan data pengguna.
- Tanpa pop-up atau modal. Kami mencegah Action menampilkan jendela atau modal pop-up. Kami juga sangat tidak menyarankan penggunaan elemen UI navigasi standar lainnya yang biasanya Anda lihat di aplikasi web, seperti keyboard dan penomoran halaman.
Mendesain percakapan
Anda harus mendesain percakapan Action terlebih dahulu. Pengalaman Canvas interaktif masih mengutamakan suara, jadi penting bagi percakapan Anda untuk memandu pengguna melalui Action. Anda dapat menganggap Action yang menggunakan Interactive Canvas sebagai percakapan dengan visual yang membantu. Untuk informasi selengkapnya tentang mendesain percakapan, lihat panduan desain percakapan Google.
Panduan
Untuk pengalaman pengguna terbaik, Anda harus:
Ikuti proses desain percakapan dan praktik terbaik. Panduan desain percakapan Google menjelaskan praktik terbaik yang kami rekomendasikan. Artinya, antara lain, Anda harus:
- Memastikan pengalaman Action Anda berfungsi dengan baik untuk percakapan
- Buat persona merek
- Menangani error dalam percakapan Anda
- Mencoba pengalaman suara saja sebelum mencari tahu tampilannya dengan layar
Coba berikan kemampuan yang sama melalui sentuhan dan suara. Jika memungkinkan, pastikan semua yang dapat Anda lakukan dengan menyentuh layar juga dapat dilakukan dengan suara Anda.
Pastikan jalur penting melalui Action Anda memungkinkan menggunakan suara. Pengguna Anda harus dapat membuka jalur utama Action Anda hanya dengan suara.
Pastikan pengguna dapat menggunakan Action tanpa audio. Di perangkat seluler, pengguna mungkin tidak mengaktifkan audio. Oleh karena itu, pertimbangkan untuk menambahkan transkrip ke Action Anda untuk memandu pengguna.
Pertimbangkan beban kognitif. Hindari respons suara yang terlalu panjang untuk mengurangi beban kognitif pengguna.
Mendesain UI
Setelah merancang percakapan, Anda dapat mendesain UI untuk melengkapi percakapan tersebut. Saat mendesain, pertimbangkan bagaimana dialog natural yang dapat mendorong antarmuka visual yang Anda tampilkan kepada pengguna. Jika Anda mendesain untuk layar smart, lihat pertimbangan spesifik di Mendesain untuk layar smart.
Panduan
Untuk pengalaman pengguna terbaik, Anda harus:
- Buat desain yang responsif. Pastikan desain Anda berfungsi untuk mode lanskap dan potret serta tahan dari ponsel kecil ke layar yang lebih besar. Pengguna Anda harus dapat membaca UI dengan mudah untuk setiap jenis platform.
- Pertimbangkan beban kognitif. Agar pengguna tidak bingung, buat informasi dan konten yang ada di layar tetap teratur, rapi, dan ringkas.
- Sesuaikan output suara untuk layar. Kreatiflah dalam cara Anda menggunakan visual untuk melengkapi audio — jangan hanya menulis apa yang dikatakan dengan keras. Saat layar tersedia, output suara kita mungkin akan lebih ringkas daripada jika tidak ada.
- Jangan menempatkan informasi atau komponen penting apa pun di bagian bawah layar. Di perangkat seluler, transkrip pengguna muncul di atas pelat mikrofon dan dapat bertambah menjadi beberapa baris. Meskipun transkrip ini bersifat sementara, hindari menulis konten penting di bagian bawah layar. Tombol yang mirip dengan chip saran dapat dilihat di bagian bawah layar, karena input pengguna adalah alternatif untuk menggunakan chip saran.
- Menangani error dalam percakapan Anda secara visual. Error dapat terjadi saat pengguna tidak merespons, jika Anda tidak memahaminya, atau tidak memberikan respons atas apa yang mereka katakan. Cari tahu tempat perintah error ini muncul di UI Anda. Hal ini bisa dilakukan di mana pun Anda meletakkan perintah tampilan (seperti di judul) atau bisa berupa sesuatu yang berbeda (seperti area konten khusus yang muncul sesuai kebutuhan). Lihat Error dalam panduan desain percakapan untuk tips lainnya tentang penanganan error.
Desain untuk layar smart
Meskipun panduan di atas masih berlaku, Anda harus mempertimbangkan desain lainnya saat mendesain untuk layar smart. Anda mungkin tergoda untuk memperlakukan layar smart seperti tablet saat mendesain untuk tablet. Namun, layar smart adalah kategori perangkat yang benar-benar berbeda dan baru karena dua alasan:
- Layar smart diaktifkan dengan suara dan Asisten Google adalah sistem operasinya
- Layar smart tidak bergerak dan, tidak seperti perangkat seluler, sering ditempatkan di dapur atau kamar tidur saat digunakan di rumah
Karena karakteristik ini, pengguna terkadang tidak berada di dekat perangkat dan berinteraksi dengan layar smart hanya dengan suaranya. Pengguna mungkin juga melakukan multitasking saat menggunakan layar smart. Penting untuk selalu mengingat penggunaan ini saat mendesain untuk layar smart.
Panduan
Untuk pengalaman pengguna terbaik dengan layar smart, Anda harus:
- Desain dengan memprioritaskan suara. Mendesain Interactive Canvas Action Anda untuk dijadikan voice-forward bahkan lebih penting untuk layar smart. Berbeda dengan perangkat seluler, pengguna mungkin berdiri di seberang ruangan dan hanya berkomunikasi dengan layar smart melalui suara. Karena alasan ini, Anda tidak selalu dapat mengandalkan pengguna yang menyentuh perangkat untuk melanjutkan tindakan Anda, dan perlu memastikan pengguna dapat melanjutkan Action Anda menggunakan suara.
- Desain dengan mempertimbangkan jarak pandang tertentu. Rancang konten di
layar smart agar dapat dilihat dari jarak jauh. Bergantung pada ukuran ruangan, jarak pandang standar untuk layar smart berkisar antara 3 hingga 10 kaki.
- Gunakan ukuran font minimal 32 pt untuk teks utama, seperti judul. Gunakan minimal 24 pt untuk teks sekunder, seperti deskripsi atau paragraf teks.
- Fokuskan pada satu poin kontak pada satu waktu. Menampilkan satu jenis informasi atau tugas utama dalam satu waktu untuk mengurangi beban kerja kognitif dan menjaga konten tetap mudah dibaca dari jarak jauh. Misalnya, saat pengguna bertanya "Ada apa hari ini?", Asisten Google merespons dengan konten cuaca, kalender, perjalanan, dan berita. Setiap jenis konten memenuhi layar penuh dan ditampilkan secara berurutan, bukan muncul semua sekaligus di layar.
Resource
Untuk informasi selengkapnya tentang mendesain Action yang menggunakan Canvas Interaktif, lihat referensi berikut:
- Panduan desain untuk percakapan
- Pedoman desain multimodal
- Download template Sketch kami untuk membantu Anda merancang UI.