Prinsip Komunikasi Material: Pengantar Penulisan UX

1. Sebelum memulai

Kenali panduan komunikasi Desain Material!

d226b95944e2d78.png

Penulisan yang jelas dan ringkas berperan penting dalam kualitas pengalaman pengguna. Kenali pedoman penulisan UX Desain Material dan mulai terapkan prinsip untuk teks UI yang akan membantu pengguna Anda mencapai tujuan mereka.

Tahukah Anda bahwa bagian komunikasi Material mencakup lebih banyak hal daripada penulisan UX? Lihat topik yang mencakup visualisasi data hingga pengaktifan hingga pola status kosong.

Berpikirlah seperti seorang penulis!

Baik Anda bekerja dengan penulis UX atau Ahli Strategi Konten, codelab ini memperkenalkan cara bagi siapa pun untuk membuat pilihan bahasa yang cocok untuk antarmuka. Anda akan mempelajari cara mengajukan beberapa pertanyaan yang mungkin menjadi fokus penulis untuk meningkatkan pengalaman produk, seperti kejelasan dan keringkasan dalam teks yang ditampilkan kepada pengguna seperti label dan notifikasi.

Yang akan Anda pelajari

  • Apa itu penulisan UX dan mengapa hal ini penting
  • Cara menentukan nada dan gaya bahasa yang tepat untuk konteks yang berbeda
  • Pertimbangan penulisan khusus komponen
  • Referensi untuk pembelajaran lebih lanjut

Yang Anda butuhkan

  • Mulai dokumen atau siapkan selembar kertas untuk mengikuti latihan codelab.

Prasyarat

Lab ini dibangun berdasarkan konsep dasar penulisan, tata bahasa, dan desain dalam Desain Material. Pemahaman umum tentang elemen interaktif dalam UI akan sangat membantu.

Berfokus pada bahasa Inggris, tetapi berguna secara luas

Lab ini membahas prinsip komunikasi untuk pengalaman pengguna yang lebih baik. Namun, contoh dan pilihan kata didasarkan pada konvensi bahasa Inggris Amerika.

Dengan kepekaan terhadap perubahan konteks dan budaya, panduan ini dapat diterapkan pada UI dalam bahasa apa pun. Anda akan menemukan informasi selengkapnya khusus untuk pertimbangan non-Inggris dalam referensi yang tercantum di Langkah 9.

2. Apa itu UX writing?

616b22e303cb0bee.png

Ringkasan

UX writing (UXW) juga disebut Strategi Konten atau Desain Konten. Disiplin ini berada di balik teks dalam antarmuka pengguna dan merupakan bidang tersendiri yang melihat bahasa sebagai sarana untuk meningkatkan pengalaman pengguna melalui narasi yang jelas, pilihan kata, hierarki informasi, dan lainnya.

Berpikir seperti penulis UX dapat meningkatkan penyelesaian tugas, kepuasan pengguna, dan kemudahan penggunaan secara keseluruhan.

Apa yang membuat penulisan UX berbeda?

Penulisan UX adalah menulis untuk orang sungguhan.

Menulis untuk pengalaman pengguna harus dimulai dengan asumsi bahwa tujuan utama teks UI adalah untuk mendukung perjalanan pengguna.

Pilihan kata, panjang, gaya, dan konstruksi teks apa pun dapat memengaruhi seberapa baik pengguna memahami tujuan dan manfaat fitur serta tugas.

Gaya

Pilihan gaya penulisan harus mengikuti kebutuhan audiens dan tujuan mereka. UXW menggabungkan aturan akademis penulisan formal (apa yang Anda baca di koran atau buku non-fiksi) dengan gaya yang kurang formal yang digunakan orang saat berkomunikasi secara online (email, teks, chat).

Penulisan untuk aplikasi dan antarmuka menggunakan gaya bahasa yang kurang formal karena dua alasan utama:

  • Komunikasi online kurang formal dibandingkan tulisan cetak atau akademis
  • Teks UI dibatasi oleh ruang layar; panjang karakter dibatasi

26cdd98cb56e8ee0.png

Penulisan yang berfokus pada pengguna, alias "membuatnya berfungsi"

Penulisan UX memprioritaskan gaya yang berorientasi pada tujuan, bukan kepatuhan pada tata bahasa. Bukan berarti tata bahasa tidak penting untuk kejelasan dan konsistensi, tetapi sebaiknya pertimbangkan kebutuhan pengguna terlebih dahulu dan biarkan keputusan tata bahasa mengikuti.

Dalam hal pilihan kata dan gaya, prinsip panduan untuk keputusan gaya mungkin cukup membuatnya berfungsi. Pilihan yang terbaik untuk antarmuka tidak selalu sama dengan aturan untuk penulisan formal.

Menulis sesuai cara orang membaca

UXW harus mencerminkan cara pembaca dalam banyak bahasa memindai halaman dalam pola berbentuk F, bukan membaca seluruh paragraf. Dengan mengantisipasi perilaku pembaca, Anda dapat menulis sesuai dengan cara teks tersebut benar-benar dialami.

Untuk konten web, hal ini sering kali diterjemahkan menjadi paragraf pendek, judul deskriptif yang mudah dipindai, dan pemformatan strategis.

7476a332db7c2adc.png

Contoh pelacakan mata dari studi pola membaca online. Gambar dan riset dari nngroup.com (2006; 2017).

Pengujian

Memenuhi kebutuhan berbagai budaya atau kelompok usia dengan teks yang sama bisa jadi sulit. Menemukan kata-kata yang tepat untuk menyampaikan pesan Anda mungkin terdengar sederhana, tetapi bahasa dan pemahaman sangatlah subjektif.

Untuk memastikan bahwa tulisan Anda memiliki makna yang Anda maksudkan, pengujian adalah langkah penting untuk mengevaluasi kejelasan, makna, dan efikasi di dunia nyata.

Pendekatan

Mudah dan tidak mahal

  • Baca pesan yang sudah Anda tulis dengan lantang. Apakah terdengar seperti sesuatu yang akan Anda katakan kepada orang sungguhan? Jika tidak, coba tulis ulang.
  • Minta orang lain untuk membaca dan menjelaskan kembali kepada Anda apa yang menurut mereka maksud dari kata-kata Anda
  • Survei beberapa orang dengan contoh tulisan Anda dalam konteks UI
  • Gunakan Google Trends atau Google Books Ngram Viewer untuk mengetahui apakah kata atau frasa tertentu lebih umum daripada yang lain

Pengujian konten ekstensif menggunakan heuristik, seperti:

  • Pemahaman dan keterbacaan
  • Penyelesaian tugas dan waktu yang dihabiskan untuk tugas
  • Evaluasi nada bahasa dan persepsi

3. Prinsip

968920a2b1c680f8.png

Ringkasan

Prinsip-prinsip dalam panduan penulisan Material dirancang untuk membangun kepercayaan dan meningkatkan kejelasan melalui bahasa yang akurat dan ringkas. Anda dapat menambahkan atau mengurangi prinsip Material untuk memenuhi kebutuhan Anda sendiri.

Pedoman memungkinkan beberapa orang membuat keputusan yang lebih konsisten sebagai grup.

Ringkas, tetapi tidak kaku

Tulis segmen teks singkat yang mudah dipindai dan berfokus pada sejumlah kecil ide.

e97ed7c661869cc0.png

Tulis secara simpel dan langsung

Gunakan bahasa yang sederhana dan langsung yang membuat teks mudah dipahami. Setiap kali Anda menulis sesuatu, tanyakan pada diri Anda apakah ada cara yang lebih mudah untuk menyampaikan ide tersebut.

dd7091938a1f6486.png

Sapa pengguna dengan jelas

Dalam bahasa Inggris, orang kedua (Anda atau milik Anda) sering kali lebih langsung dan jelas. Orang pertama (saya, aku, atau milikku) dapat digunakan saat kepemilikan harus ditekankan.

"Anda" dan "milik Anda" adalah cara yang lebih langsung untuk menyapa pengguna.

"Saya" atau "milik saya" dapat membingungkan karena menggabungkan posisi atau suara pengguna dengan suara aplikasi. "Saya" atau "milik saya" dapat digunakan untuk menekankan kepemilikan konten atau tindakan yang jelas.

d849a5f73510661f.png

Hindari penggabungan orang pertama dan kedua

Untuk menghindari kebingungan, "saya"/"milik saya" dan "Anda"/"milik Anda" tidak boleh berada dalam frasa yang sama.

462745d0da4c1c68.png

Sampaikan detail penting

Hanya sampaikan detail penting untuk konteks tertentu agar pengguna dapat berfokus pada tugas yang sedang dikerjakan, bukan menafsirkan banyak opsi. Dalam dialog atau notifikasi apa pun, pertimbangkan informasi yang diperlukan untuk menjelaskan operasi dan konsekuensi penting apa pun.

691f2e5233fc0a60.png

4. Suara & nada

Ringkasan

Sulit untuk mencapai konsistensi dan kejelasan tanpa mempertimbangkan nada dan gaya bahasa yang ingin Anda ciptakan untuk suatu pengalaman.

Bayangkan Anda membaca lima kalimat secara bersamaan, tetapi setiap kalimat ditulis oleh orang yang berbeda yang belum melihat empat kalimat lainnya. Terkadang, navigasi UI terasa tidak terhubung karena setiap orang menulis dengan gaya dan nada suara mereka sendiri.

Jika beberapa orang berkontribusi dalam memberikan teks untuk suatu produk, pedoman untuk gaya bahasa dan suara dapat membantu memastikan bahwa kata-kata dipilih dengan rasa makna dan tujuan yang sama.

765203f936d1b440.png

Contoh kampanye Android sebelumnya yang menggunakan gaya bahasa yang jelas dan inklusif dengan nada langsung.

Apa itu gaya tulisan dan nada bahasa?

Suara harus konsisten di seluruh pengalaman, sementara nada bersifat kontekstual dan dapat bervariasi.

Suara

Suara mengacu pada suasana hati, sikap, atau pandangan yang dikomunikasikan di seluruh pengalaman. Ini adalah salah satu aspek "kepribadian" merek dan dapat memungkinkan seseorang memahami "suara" produk.

Prinsip suara memandu pilihan kata dan berfungsi paling baik jika disertai dengan contoh untuk menggambarkan suara dalam tindakan. Tanpa contoh, prinsip sering kali terlalu abstrak untuk memandu keputusan gaya kelompok.

Berikut beberapa contoh umum prinsip suara:

  • Membantu: Tulis seperti manusia, bukan mesin. Menjelaskan error dan menyarankan solusi.
  • Dapat diakses: Buat teks mudah dipahami oleh pengguna baru. Pastikan istilah teknis atau lanjutan dijelaskan atau diganti.
  • Inspiratif: Menekankan manfaat dan pencapaian di seluruh pengalaman. Nyatakan tujuan dan hasil dengan kalimat aktif yang positif.

Nada

Nada tulisan Anda menyampaikan suasana hati dan emosi, terlepas dari apakah Anda bermaksud demikian atau tidak.

Misalnya, jika suara didefinisikan sebagai "membantu" dan "alami", maka nada yang memperkuat tujuan tersebut mungkin mendukung dan santai, bukan menuntut dan singkat.

Pada akhirnya, apa yang dianggap "mendukung dan kasual" oleh setiap orang juga akan bervariasi, itulah sebabnya daftar kata dan matriks konten membantu membuat suara dan gaya bahasa dapat ditindaklanjuti. Hal ini dibahas lebih lanjut di bagian 6-8.

Alasan mengapa ini penting

Gaya bahasa yang tepat dapat membangun kepercayaan dan keyakinan pengguna. Misalnya, jika pesan error berbentuk lelucon, bukan dukungan, nada santai mungkin gagal menunjukkan kepada pengguna bahwa rasa frustrasi mereka wajar dan dapat diselesaikan.

Membuat peta nuansa

Peta gaya bahasa membantu merencanakan dan mendokumentasikan strategi untuk menyesuaikan suara dan gaya bahasa Anda.

Mulailah dengan mempertimbangkan poin-poin penting di sepanjang perjalanan pengguna. Baik Anda membuat game, alat keuangan, atau aplikasi belanja, gaya bahasa Anda harus bervariasi sebagai respons terhadap poin-poin di sepanjang perjalanan pengguna, seperti orientasi, konfirmasi, dan error.

Misalnya, notifikasi menyenangkan untuk konfirmasi rutinitas awalnya tampak bagus, tetapi setelah diterima untuk kelima kalinya, kesenangan dapat dengan cepat berubah menjadi kejengkelan.

Status error adalah contoh lain di mana pemetaan nada dapat membantu menginformasikan perubahan nada dari kasual dan percakapan menjadi mendukung dan mendetail.

1. Pertama, pilih dua dimensi atau spektrum yang dapat merepresentasikan rentang dalam nuansa yang Anda inginkan.

Berikut beberapa ide untuk sumbu penting dalam penulisan UX:

  • Ceria vs. serius
  • Singkat vs. mendetail
  • Emotif vs. netral
  • Santai vs. ketat

2. Buat petak dengan dua garis yang berpotongan dan identifikasi setiap sumbu dengan satu dimensi nada yang ingin Anda susun strateginya.

Pada contoh di bawah, Anda dapat melihat menyenangkan vs. serius dan singkat vs. mendetail adalah dimensi peta.

37ee5409f8d0ca13.png

3. Selanjutnya, cantumkan jenis atau pola pesan yang biasa Anda gunakan. Jenis pesan yang dapat Anda petakan meliputi:

  • Orientasi
  • Konfirmasi & pengakuan
  • Bantuan & masukan
  • Error
  • Notifikasi
  • Label
  • Status kosong

4. Tempatkan setiap jenis pesan di peta Anda berdasarkan kedua sumbu.

Beberapa pertimbangan mencakup:

  • Berapa banyak ruang layar yang akan tersedia untuk pesan tertentu?
  • Seberapa penting atau krusial pemahaman untuk jenis pesan? Apakah ada tindakan merusak yang dipertaruhkan?
  • Apa yang ingin Anda sampaikan atau rasakan oleh pengguna terkait maksud jenis pesan? Misalnya, orientasi sering kali disertai dengan niat yang ringan, tetapi praktis.

5. Contoh selesai

Berikut adalah contoh jenis pesan yang diplot sesuai dengan pengalaman aplikasi umum.

Jika aplikasi Anda menangani pembayaran atau masalah hukum, Anda dapat menyesuaikan gaya bahasa menjadi lebih serius dan mendetail jika pemahaman sangat penting. Sebaliknya, jika privasi atau keuangan tidak terancam dan pusat bantuan juga tersedia untuk mendapatkan informasi selengkapnya, Anda dapat memilih untuk lebih ringkas.

ba35da42583637a8.png

5. Struktur konten

968920a2b1c680f8.png

Ringkasan

Struktur pernyataan dapat meningkatkan pemahaman dan membantu pengguna fokus pada tugas yang sedang dikerjakan. Saat menyandingkan gambar dengan teks, tujuan lain dari struktur informasi adalah untuk meningkatkan aksesibilitas.

Mulai dengan tujuan

Mulai kalimat dengan sasaran pengguna. Karena penulisan UX berorientasi pada tugas, pola umum untuk frasa adalah menekankan tujuan yang menetapkan kerangka motivasi untuk suatu tugas, lalu kalimat menguraikan tindakan yang diperlukan untuk menyelesaikan tugas.

6a3d1b6c30188235.png

Menampilkan detail sesuai kebutuhan

Tampilkan informasi secara kontekstual dan sesuai kebutuhan. Pendekatan ini sering disebut sebagai pengungkapan progresif. Tampilkan detail tentang fitur saat pengguna menjelajahinya dan memerlukan informasi lebih lanjut.

Mengungkapkan informasi secara strategis sering kali memerlukan pertimbangan yang cermat terhadap kebutuhan informasi untuk setiap titik dalam perjalanan pengguna. Tujuannya bukan untuk menyembunyikan atau menghilangkan apa pun, terutama konsekuensi untuk tindakan yang tidak dapat diurungkan, tetapi perlu diingat bahwa Anda akan membantu pengguna dengan mempersempit fokus langsung pada tugas yang sedang dikerjakan.

84109125e1570bab.png

Desain konten yang dapat diakses

Penulisan yang efektif mencakup pertimbangan pemasangan gambar dan teks untuk pengguna dengan gangguan penglihatan atau siapa pun yang menggunakan pembaca layar. Bagian penulisan aksesibilitas Material mencakup panduan untuk menyandingkan gambar dan teks sehingga desain konten halaman berfungsi untuk semua pengguna.

Teks yang terlihat dan tidak terlihat

Teks aksesibilitas mencakup:

  • Teks yang terlihat: label untuk elemen UI, teks pada tombol, link, dan formulir
  • Teks yang tidak terlihat: deskripsi yang tidak muncul di layar (seperti teks alternatif untuk gambar)

Jika teks yang terlihat dan tidak terlihat deskriptif dan bermakna, hal ini akan membantu pengguna menavigasi menggunakan heading atau link di layar. Pembaca layar dapat membantu Anda menguji teks aksesibilitas dan mengidentifikasi tempat yang dapat Anda tambahkan.

Teks alternatif (teks alt)

Teks alternatif membantu menerjemahkan UI visual menjadi UI berbasis teks. Teks alternatif adalah label singkat (hingga 125 karakter) dalam kode yang mendeskripsikan gambar bagi pengguna yang tidak dapat melihatnya.

Dalam contoh di bawah, pembaca layar memberikan konteks untuk teks di sekitarnya dengan menawarkan deskripsi gambar yang paling penting.

a327ec11a8a08a4d.png

Karena teks alternatif hanya untuk gambar, tidak perlu menambahkan "gambar" atau "foto" ke teks alternatif. Pembaca layar akan membacakan teks alternatif dengan keras sebagai pengganti gambar.

8690cba70c572908.png

6. Pilihan kata

Ringkasan

Saat ruang layar terbatas, Anda harus memilih kata yang tepat untuk menyampaikan pesan dan nada bicara Anda. Menggunakan kata-kata yang sama secara konsisten membantu pengguna menjadi terbiasa dengan suatu pengalaman.

Tulis untuk semua tingkat kemampuan baca

Gunakan kata-kata umum yang jelas dan mudah dipahami di semua tingkat bacaan.

7938ae9f12f98a8.png

Tidak ada jargon

Hindari terminologi khusus industri atau nama yang dibuat untuk fitur UI jika frasa yang lebih sederhana dapat menyampaikan ide yang sama dengan cara yang serupa.

a3ea0ee65129dac8.png

Menggunakan kata-kata yang konsisten

Gunakan kata-kata secara konsisten di seluruh fitur UI Anda.

ba6c4e76345c54e5.png

Menulis dalam present tense

Gunakan bentuk waktu sekarang untuk mendeskripsikan perilaku produk. Hindari penggunaan bentuk future tense untuk mendeskripsikan cara produk selalu berfungsi.

Saat Anda perlu menulis dalam bentuk lampau atau bentuk masa depan, gunakan bentuk kata kerja sederhana.

3125e74655e15f6a.png

Merujuk elemen dan kontrol UI berdasarkan label

Label mengidentifikasi fungsi kontrol atau elemen. Label ini muncul di atau di dekat kontrol itu sendiri, seperti teks pada tombol atau tombol geser. Untuk merujuk ke kontrol atau elemen UI, sebutkan menggunakan teks labelnya. (jangan menyatakan jenis elemen atau kontrol).

5d752db3ba472c6f.png

Sampaikan detail yang penting

Hanya sampaikan detail yang perlu difokuskan pengguna untuk menyelesaikan tugas.

cf1825fb95e0cbcb.png

Poin-poin penting

  • Tulis untuk semua tingkat kemampuan baca
  • Gunakan kata secara konsisten, bukan untuk hal baru
  • Present tense (bentuk sekarang)
  • Menggunakan angka

7. Menulis untuk komponen

f0434663c3f3ed39.png

Ringkasan

Komponen Material memiliki maksud dalam UI, dan menulis untuk komponen tertentu dapat memperkuat maksud tersebut.

Komponen ini memiliki panduan penulisan di Material.io:

Dialog

Dialog digunakan untuk:

  • Error yang memblokir operasi normal aplikasi
  • Informasi penting yang memerlukan tugas, keputusan, atau konfirmasi pengguna tertentu

Komponen

Prioritas

Tindakan pengguna

Snackbar

Prioritas rendah

Snackbar menghilang secara otomatis

Banner

Menonjol, prioritas sedang

Banner akan tetap muncul hingga ditutup oleh pengguna, atau jika status yang menyebabkan banner muncul telah diselesaikan

Dialog

Prioritas tertinggi

Dialog memblokir penggunaan aplikasi hingga pengguna melakukan tindakan dialog atau keluar dari dialog (jika tersedia)

Judul

Tujuan dialog harus disampaikan oleh judul dan teks tombolnya.

Judul harus berisi pernyataan atau pertanyaan yang singkat dan jelas.

6081893091a2e0d3.png

Snackbar

Snackbar berisi label teks yang terkait langsung dengan proses yang sedang dilakukan. Di perangkat seluler, label dapat berisi hingga dua baris teks.

5152d51fe7a77698.png

Snackbar dapat menampilkan satu tombol teks yang memungkinkan pengguna mengambil tindakan pada proses yang dilakukan oleh aplikasi.

fbb75c8e3393cd6.png

8. Gabungkan semuanya dalam matriks konten

Ringkasan

Matriks konten adalah tabel untuk melacak kata-kata dan pilihan yang akan Anda gunakan dan gunakan kembali dalam tulisan Anda. Matriks konten adalah sumber utama untuk menulis dan melacak frasa secara konsisten, dan berfungsi sebagai referensi bagi penulis di masa mendatang.

Ini adalah nama keren untuk spreadsheet (ya...ini melanggar panduan pilihan kata untuk "tanpa jargon".)

Menyiapkan matriks konten

Buat spreadsheet atau tabel tempat Anda dapat melacak penulisan dan pilihan kata yang berfungsi dengan baik dan dapat diulang.

Tujuan matriks konten adalah membantu Anda mengidentifikasi dan mendokumentasikan bagaimana pesan terhubung dengan hal berikut:

  • Tujuan dan konteks pengguna
  • Kebutuhan informasi, yang dinyatakan dengan jelas, yang mendukung sasaran tertentu
  • Draf dan teks UI akhir yang menyatakan kembali kebutuhan informasi dalam bahasa yang singkat dan bebas jargon

Keputusan teks UI dalam matriks konten juga harus mencerminkan:

  • Prinsip gaya bahasa dan suara
  • Tipe komponen

Terakhir, matriks konten dapat menyertakan daftar kata:

  • Buat daftar kata dan istilah yang harus digunakan untuk mendeskripsikan fitur, tindakan, dan sasaran Anda
  • Mencantumkan kata-kata yang harus dihindari sebagai sinonim atau frasa yang tidak membantu

Jangan lupa:

  • Mengganti atau mendefinisikan istilah teknis
  • Gunakan pilihan kata yang paling umum untuk tindakan atau kata benda

9. Topik & referensi lanjutan (opsional)

Ringkasan

Codelab ini membahas praktik terbaik dan metode untuk mulai menggunakan penulisan UX. Ini hanyalah sebagian kecilnya.

Resource

10. Selamat!

Bagus! Anda sudah dalam perjalanan untuk menulis teks UI yang jelas dan berdampak!

46fad4a7c10dd9f7.png