UX Writing fundamental
UX Perbedaan UI & UX UI Singkatnya, user experience adalah bagaimana pengalaman pengguna dalam berinteraksi/menggunakan produk digital. Sedangkan UI adalah bagian dari UX yang berupa tampilan visual seperti icon, warna, font, dan hal-hal visual lainnya. Lo-fi design
PD UID Researcher Illustrator Writers Ideation, Wireflows, DPD Assist in research Plan Design QA Plan validation Ideation Create UI Review Review DPD Prototype Plan Design QA Plan validation Validation Synthesize Iterate Iterate Consulted Requirement Create asset Pixel perfect and handover Consulted Craft copy Validation Refinement and delivery Design workflow
UX Writing Apa pentingnya? Ini copy di Gojek sebelum ada UX Writer UX Writing itu penting karena tulisan-tulisan inilah yang berkomunikasi dan akan memandu pengguna dan untuk menggunakan aplikasi.
Ini copy setelah dikerjain UX sama UX Writer Writing Apa pentingnya? UX Writing itu penting karena tulisan-tulisan inilah yang berkomunikasi dan akan memandu pengguna dan untuk menggunakan aplikasi.
UX writing Perbedaan UX & Content writing Content writing UX Writing merupakan tulisan yang ditujukan untuk memandu pengguna dalam menggunakan aplikasi atau website. Content writing merupakan tulisan yang ditujukan untuk pemasaran produk. Tulisan bisa berupa artikel, landing page dan lainnya.
Kalau harus dijelaskan dengan sederhana… Gali konteks lewat riset FGD, Synthesizing, Workshops, Concept Testing, UT, dan lainnya. Kasih feedback saat proses wireframing Buat bantu bikin struktur dan cerita untuk alur design keseluruhan. Bikin draft dan ajuin ke PM atau designer Minta feedback dari kolaborator lain biar tulisan ga bias dan sudah tepat sesuai objektifnya. Mantau proses pembuatan interface Mastiin hirarki informasi, pesan utama dan komponen yang digunakan sudah tepat dan efektif. Kolaborasi bareng ilustrator Kasih tujuan dari pesannya dan bikin tiap screen jadi penuh makna lewat cerita dan kesan visual. UX writing workflow
8 The release notes might be a little bit long, it might be not that straightforward, it might be surprising and not normal for some people, we get it. But it works wonder for our target audience. You can open Twitter and search for screenshots of our release notes with keywords like Gojek update or Gojek description. Link to 3.0 notes.. Link to 4.0 notes. Release notes What we do It can help Gojek to become a globally powerful and lovable brand as well
9 In-app creative content What we do If you need any creative content to support your product/feature awareness, we’re also up for it! We’re collaborating closely with Graphic Designers and Illustrators on this. Banner and shuffle cards
10 In-app creative content What we do Kejog 2018 and 2019
11 What we do C2D sticker pack In-app creative content
Jelasin masalahnya dan user harus apa. Bahasanya kasual dan ga muter-muter. Good vs bad copy Jangan pernah bikin copy yang merendahkan pengguna, bersikap tidak adil atau tampil arogan. Yang ini PR yah, hehehee.
Microcopy & komponen UI
Informasi singkat pada sebuah website, aplikasi, ataupun produk digital lainnya. Apa sih artinya microcopy? Pengertian microcopy
Microcopy memegang peran penting dalam user experience (UX) untuk menerjemahkan sebuah bahasa teknis menjadi bahasa yang humanis dan terkesan dekat dengan user. Pesan yang ingin disampaikan dalam microcopy UX harus mudah dipahami dan tidak ambigu, meskipun dengan kalimat yang singkat. Apa pentingnya microcopy? Apa pentingnya?
18 Before After
Komponen UI Title Body copy Button Placeholder Label Toast
Empty message TikTok Gojek Tiket.com Instagram
21
22 Before After
23 Before
24 Before After
Alternatif UI untuk microcopy Gojek
26 Yang ini PR yah, hehehee.
Homework Context Buatlah empty message untuk sebuah aplikasi pemesanan tiket konser band & artis Korea.
Brand voice and tone
Brand voice itu unik dan berkarakter mengikuti komunikasi brandnya. Sederhananya seperti personalitas. Kalau kita dengar Tony Stark berbicara, kita bisa rasain bahwa personalitas si karaker peercaya diri, bahkan sedikit sombong. Tapi di dalamnya, dia memiliki hati yang lembut. Tapi kalo kita dengar Steven Rogers, kita bisa rasain kalau doi sedikit kaku dan berwibawa. Apa itu brand voice? Voice & tone > Intro Tone bisa berubah-ubah tergantung situasi yang sedang terjadi dan audiens yang lagi kita ajak bicara. Contohnya, saat Tony Stark ngomong sama Thanos, dan saat dia ngomong sama anaknya sangat berbeda. Kalo sama Thanos, dia lebih arogan. Sedangkan sama anaknya, dia lebih lembut dan lucu. Apa itu tone?
Four dimensions of Tone Voice & tone > 4 dimensions Funny to Serious Formal to Informal Respectful to Irreverent Enthusiastic to Dry or Matter-of-fact Tones bisa bermacam-macam. Solid 1 kategori atau bercampur di antaranya. Biasanya terbagi menjadi: Based on the research done by Nielsen Norman Group, there are 4 primary tone-of-voice dimensions, we adjust some keywords to make it easier to grasp.
One message, many possible tone Voice & tone > 4 dimensions An error messages that is formal and serious Let’s try a little more relaxed Let’s add a pinch of humor “We apologize, but we are experiencing a problem. Please try again later.” “We’re sorry, but we’re experiencing a problem on our end. Try again later.” “OMG. Server busy. Try again later, we’re already on it.” “Maaf, saat ini sedang ada kendala di sistem kami. Mohon coba beberapa saat lagi.” “Mohon maaf, saat ini lagi ada kendala di sistem kami. Coba lagi nanti, ya.” “Server kami lagi padat merayap. Coba lagi nanti, ya. Kami lagi memperbaikinya.” Buat melihat bagaimana 4 dimensi tones bisa bervariasi dan memberikan efek yang berbeda, coba kita lihat contoh ini:
32 Shortcut UNDERSTANDING PRODUCT PROBLEM + GOAL MORE PROBLEM PROCESS SOLUTION FURTHER SOLUTION Every shortcut is a clickable link and will take you to the corresponding page. View this document in full screen mode for the best experience.
33 Understanding Product What is your brand? Buat bisa tahu, Tone and Voice yang tepat seperti apa, kita harus kenal sama brand-nya. Misal: Industrinya apa? Jasa yang ditawarkan apa? Keunggulannya apa?
34 Understanding Product Paxel Value Setelah itu, penting juga untuk tahu value dari si brand itu. Apa sih nilai yang paling unggul dari si brand? Paxel Uniqueness Fast Affordable Same-day delivery between cities Selain keunggulan, kita juga harus identifikasi keunikan dari si brand itu. Ini contoh untuk Paxel ya.
35 Understanding Product Target User Contoh: Paxel Jangan lupa untuk jabarin target user dari brand ini “A socially-conscious and community-driven logistic brand” Sekalian dengan posisinya di sosial media atau masyarakat
36 Don’ts Be too friendly, overuse the humour, or be overly positive in the negative situation. Be too rigid, come off as rude, appear unauthoritative, or unreliable. Be a pleaser, disguise something to stay out of conflict, overpromise things, or be vague. Problem + Goal Problem Paxel addresses its users as ‘Kamu’ and ‘Anda’ interchangeably. They sometimes also go with ‘Sahabat’. Some screens in Indonesian settings use English with incorrect grammar. Don’t have character Don’t have consistent copy
37 HAVE HUMAN SOCIAL TRAITS Users project human social traits onto the computers and other communications devices with which they interact. (Naas & Reeves, 1996, as cited in Winogard, T, 1996). STAND OUT IN A COMPETITIVE MARKET According to Indonesia’s Digital Logistics Landscape Report (2022) there are at least 10 other big players that play in the same market as Paxel. More competition means that it’s more important than ever to stand out. To do so, the entire experience of interacting with a brand must deliver a consistently great user experience (Kaplan, K, 2016). BE TRUSTWORTHY Consistency creates an experience which users can rely upon every time. It goes beyond the look and feel of a site, and also reaches down into interaction and behavioral patterns and even deeper. (Soegard, M, 2021 on Interaction Design Foundation) Paxel App has character Paxel App has consistent copy Problem + Goal Goal
38 Defining the brand voice start by defining Paxel's relationship with its users. I tried to make Wordboard imagining if Paxel were someone I have a conversation with. Process Wordboard Who is: Trustworthy Understanding Open Honest Casual Who is: Proactive Responsive Dutiful Providing Polite
39 Don’ts Be too friendly, overuse the humour, or be overly positive in the negative situation. Be too rigid, come off as rude, appear unauthoritative, or unreliable. Be a pleaser, disguise something to stay out of conflict, overpromise things, or be vague. Mau kirim paket? Kalo butuh cepet? Pake yang instan aja. Mau kirim paket ke mana? Siapa yang bakalan nerima paketnya nanti? Mau dijemput di mana nih paketnya? Isi dulu dong informasi paketnya Waduh, barang yang mau kamu kirim ini kayaknya kegedean deh.. Mendingan pake service lain aja, jangan yang instan. Process - Wordboard Trusted Friend Who is: Trustworthy Understanding Open Honest Casual
40 Don’ts Be too friendly, overuse the humour, or be overly positive in the negative situation. Be too rigid, come off as rude, appear unauthoritative, or unreliable. Be a pleaser, disguise something to stay out of conflict, overpromise things, or be vague. Process - Wordboard Personal Assistant Permisi, mau kirim paket, ya? Kira-kira paket ini urgent gak ya? Paket kamu bisa sampai instan dalam 2 jam. Paketnya mau dikirim ke mana? Mohon maaf, belum bisa kirim paket instan ke daerah itu. Mungkin mau coba service lain? Who is: Proactive Responsive Dutiful Providing Polite
41 Don’ts Be too friendly, overuse the humour, or be overly positive in the negative situation. Be too rigid, come off as rude, appear unauthoritative, or unreliable. Be a pleaser, disguise something to stay out of conflict, overpromise things, or be vague. Kirim paket ke mana aja bisa kami bantu! Kali ini, mau kirim paket ke mana? Paxel bisa kirim paketmu secara instan. Ke mana tujuan pengirimannya? Apa isi paketnya? Kalau kirim makanan beku, pastikan makanannya tahan 4 jam di suhu ruangan ya, karena ada waktu tunggu sebelum masuk ke truk pendingin. Process - Wordboard Hero Who is: Confident Powerful Compassionate Uplifting Accommodating
42 Overusing humor or tapping into the hype dry jokes to stay relevant and being friendly, but ending up being ‘meh’. Being overly positive in the negative situation. WHAT WE MEAN WHAT WE DON’T MEAN We use informal daily conversation language to speak to our users. We often add an uplifting touch in the relevant context. Casual Don’t overuse hype words as an attempt to be friendly or stay relevant. It could be annoying. Use daily conversational language that is clear, positive, and uplifting. Voice Solution
43 Being too rigid or might coming off as rude. Appearing unauthoritative and unreliable. WHAT WE MEAN WHAT WE DON’T MEAN We treat all users with respect and consideration, maintaining a nice, warm, and polite demeanor while never compromising our position as a hero for our users. Respectful Don’t be so rigid, users may see this as rude. When things go wrong, inform what happens politely and respectfully. Solution Voice
44 Becoming a pleaser, overpromising things, and disguising something to stay out of conflict, ending up not helping and being vague. WHAT WE MEAN WHAT WE DON’T MEAN Paxel is like the first person in the speed dial. We will always be there to help because it is our nature. We try to understand our users, as a result we are always considerate about their situations and give practical solutions and easy instructions to follow. No fuss, no muss. Trust is built because we keep things transparent. Accommodating Don’t be vague and over promise something in negative situation, just so the users feel pleased. Be transparent about any condition and give clear instruction. Solution Voice Hujan deras di beberapa wilayah yang kami lewati Paketmu aman, tapi waktu tiba akan mundur. Lacak paket untuk lihat estimasi waktu tiba terupdate. Tutup Lacak paket Mohon maaf ya Karena hujan deras di beberapa wilayah, paketmu akan terkendala. Tapi kami akan berusaha maksimal! OK
45 Don’ts Be too friendly, overuse the humour, or be overly positive in the negative situation. Be too rigid, come off as rude, appear unauthoritative, or unreliable. Be a pleaser, disguise something to stay out of conflict, overpromise things, or be vague. Solution Brand Voice Chart Don’ts Be too friendly, overuse the humour, or be overly positive in the negative situation. Be too rigid, come off as rude, appear unauthoritative, or unreliable. Be a pleaser, disguise something to stay out of conflict, overpromise things, or be vague. Description We keep things conversational and talk in clear and positive way. Our users come from various background. We treat them respectfully and leave them good impression. We have a tender, considerate, and helpful nature. We will happily make small adjustments to match our users’ comfort. Dos Use informal language with uplifting touch. Be nice, warm, polite, inoffensive. ● Give practical and easy solutions to follow. ● Be honest, and keep things transparent. Voice Casual Respectful Accommodating
Which tone are they using? Voice & tone > 4 dimensions
47