Tanya Warga YUX
Skill ini mensimulasikan sesi usability walkthrough ala think-aloud protocol, tapi dengan Claude berperan sebagai beberapa persona pengguna sekaligus — supaya desainer bisa dapat "second opinion" cepat sebelum riset user yang sesungguhnya.
Penting: ini adalah simulasi berbasis penalaran Claude, bukan riset pengguna asli. Selalu ingatkan user di akhir output bahwa temuan ini adalah sinyal awal untuk membantu prioritisasi, bukan pengganti riset dengan pengguna nyata.
Alur Kerja
1. Pastikan ada desain yang dilampirkan
Skill ini butuh sesuatu untuk direview: screenshot/gambar UI, atau link Figma. Kalau user memanggil skill ini tanpa lampiran apa pun, minta mereka melampirkan dulu sebelum lanjut.
Jika berupa link Figma dan tool Figma MCP tersedia, gunakan untuk mengambil konteks desain (screenshot/struktur layer) — lihat skill figma-design-to-code atau tool get_design_context/get_screenshot untuk caranya. Jika berupa gambar yang sudah ada di context, cukup lihat langsung.
2. Tanyakan jumlah persona
Tanyakan ke user: berapa banyak persona yang ingin diuji? (Sarankan 2-4 sebagai default yang cukup untuk dapat keragaman perspektif tanpa kebanyakan noise.) Gunakan ask_user_input_v0 jika tersedia untuk mempermudah, dengan opsi seperti "2", "3", "4", atau "lainnya".
3. Kumpulkan kriteria tiap persona
Untuk setiap persona, tanyakan (boleh digabung dalam satu pertanyaan per persona, atau satu batch pertanyaan untuk semua persona sekaligus jika user lebih suka cepat):
- Usia & pekerjaan — mempengaruhi konteks hidup dan kosakata
- Tingkat melek teknologi — gaptek, biasa saja, atau mahir/power-user
- Tujuan/goal saat memakai UI ini — apa yang ingin mereka capai di layar ini
- Tingkat pendidikan — mempengaruhi cara mereka membaca istilah, singkatan, atau copy yang kompleks
Jika user hanya kasih deskripsi singkat (misal "ibu rumah tangga 40an, gaptek"), boleh dilengkapi sendiri dengan asumsi wajar dan konfirmasi singkat ke user sebelum lanjut — jangan menahan proses hanya karena satu field kosong.
Jangan gunakan atribut sensitif (etnis, agama, orientasi, kondisi kesehatan) kecuali user secara eksplisit menyebutkannya sebagai relevan untuk desainnya (misal aplikasi kesehatan tertentu).
4. Generate think-aloud per persona
Untuk tiap persona, tulis narasi think-aloud yang:
- Mengikuti alur visual dari atas ke bawah (atau sesuai flow yang terlihat di desain — header dulu, lalu konten utama, lalu CTA/footer), seolah persona itu benar-benar melihat layar untuk pertama kali dan bicara sambil mikir.
- Bahasa Indonesia sehari-hari yang khas untuk persona itu — bukan bahasa baku formal. Sesuaikan gaya bicara dengan usia, pendidikan, dan tingkat melek teknologi:
- Persona gaptek/usia lebih tua → istilah lebih sederhana, mungkin bingung dengan istilah teknis/Inggris, banyak pertanyaan retoris ("ini apa ya maksudnya?")
- Persona mahir/muda → lebih santai, mungkin pakai singkatan gaul, bereaksi cepat terhadap pola UI yang familiar/tidak familiar
- Jangan berlebihan sampai jadi karikatur atau stereotip yang merendahkan — tetap masuk akal dan hormat.
- Fokus ke reaksi jujur: apa yang menarik perhatian duluan, apa yang membingungkan, di mana mereka ragu-ragu atau khawatir (terutama penting untuk desain terkait uang/transaksi), istilah yang tidak dipahami, dan apakah tujuan mereka (dari kriteria di langkah 3) tercapai di layar ini.
- Sertakan momen spesifik yang jelas merujuk ke elemen UI yang ada di desain (tombol, label, harga, dsb), bukan komentar generik yang bisa berlaku untuk desain apa saja.
- Nalar affordance UI: karena input biasanya screenshot (statis dan kadang kepotong), persona juga perlu menebak/bereaksi terhadap kemungkinan interaksi di luar yang keliatan secara visual, bukan cuma mendeskripsikan apa yang ada di layar. Untuk tiap elemen yang relevan, pikirkan:
- Elemen yang kepotong di tepi layar (teks terpotong, kartu yang keliatan cuma separuh) → persona akan menduga "ini kayaknya bisa di-scroll" atau "kartu ini kepotong, mungkin bisa digeser ke samping"
- Baris kartu sejajar horizontal (misal dua kartu promo bersebelahan) → persona bisa menduga ini swipeable carousel, dan berekspektasi apa yang muncul kalau digeser
- Tombol/ikon yang ambigu fungsinya → persona menyebutkan ekspektasi mereka: "kalau saya tap ini, kayaknya bakal muncul ..." — lalu evaluasi apakah ekspektasi itu masuk akal dari desain yang ada, atau malah bikin bingung/ragu
- Jangan mengarang detail dari layar lain yang tidak diperlihatkan — cukup catat ekspektasi/dugaan persona, bukan memastikan seolah-olah sudah tau isi layar berikutnya.
5. Rangkuman lintas persona
Setelah semua persona selesai, tutup dengan bagian rangkuman yang:
- Mengelompokkan temuan yang muncul di lebih dari satu persona (paling penting untuk diprioritaskan)
- Mencatat temuan unik per persona yang tetap layak diperhatikan
- Kalau relevan, beri catatan singkat arah perbaikan — tapi ini bukan fokus utama skill (fokusnya adalah menangkap perspektif user, bukan mendikte solusi desain)
6. Simpan sebagai file markdown
Simpan seluruh output (think-aloud tiap persona + rangkuman) sebagai satu file .md di /mnt/user-data/outputs/, lalu present ke user dengan present_files. Struktur file:
# Tanya Warga YUX — [Nama Desain/Fitur]
## Persona yang Diuji
[ringkasan singkat tiap persona: nama samaran, usia & pekerjaan, tingkat melek teknologi, goal, pendidikan]
## [Nama Persona 1] — Think Aloud
[narasi think-aloud]
## [Nama Persona 2] — Think Aloud
[narasi think-aloud]
...
## Rangkuman Temuan
### Temuan yang muncul di beberapa persona
...
### Temuan unik per persona
...
---
*Catatan: Ini adalah simulasi berbasis AI untuk membantu validasi awal, bukan pengganti riset pengguna asli.*
Beri tiap persona nama samaran yang masuk akal (misal "Bu Sri, 45, guru SD") supaya rangkumannya lebih mudah diikuti, bukan cuma "Persona 1".
7. (Opsional) Versi interaktif side-by-side + audio
Setelah file markdown siap, tawarkan ke user apakah mereka mau versi interaktif juga — jangan generate otomatis tanpa ditanya, karena ini kerja tambahan. Kalau user mau, buat satu file HTML (baca frontend-design skill dulu untuk arahan visual sebelum membangunnya) dengan struktur:
- Layout dua kolom: desain (gambar, embed langsung sebagai base64 di HTML) di satu sisi, narasi think-aloud di sisi lain, dengan tab atau dropdown untuk pindah antar persona.
- Tombol play/pause per persona yang memakai Web Speech API bawaan browser (
window.speechSynthesis + SpeechSynthesisUtterance, lang = 'id-ID') untuk membacakan narasinya. Ini gratis dan jalan lokal di browser, tapi selalu beri tahu user bahwa kualitas suara tergantung perangkat/browser mereka — dukungan suara Bahasa Indonesia tidak selalu tersedia dan kadang terdengar kaku atau memakai logat Inggris. Ini pelengkap, bukan pengganti versi teks/markdown.
- Simpan sebagai artifact HTML terpisah dari file markdown (bukan gantiin), lalu present ke user.
Catatan Tambahan
- Kalau desain punya beberapa layar/flow (bukan cuma satu screen), tanyakan ke user apakah walkthrough-nya per-layar atau end-to-end satu flow penuh, karena ini mempengaruhi struktur narasi think-aloud.
- Kalau user cuma mau versi cepat tanpa tanya-jawab kriteria persona (misal langsung kasih "coba tanya 3 orang: ibu-ibu gaptek, anak kuliahan, dan bapak kantoran"), boleh langsung lanjut ke langkah 4 dengan asumsi wajar dari deskripsi singkat itu — tidak perlu memaksa isi keempat kriteria satu-satu kalau user jelas ingin cepat.
1---2name: tanya-warga-yux3description: Simulasikan feedback desain UI dari beberapa persona pengguna yang berbeda, dalam bentuk "think aloud" (bicara sambil mikir) saat mereka menjelajahi tampilan dari atas ke bawah, ditutup dengan rangkuman temuan lintas persona. Gunakan skill ini kapan pun user melampirkan desain UI (screenshot, gambar, atau link Figma) dan minta divalidasi, dicek, diminta pendapat, second opinion, atau feedback dari sudut pandang user/pengguna — bahkan jika mereka tidak secara eksplisit menyebut kata "persona" atau "usability testing". Trigger juga untuk frasa seperti "tanya warga", "coba tanya user", "gimana menurut user awam", atau "validasi desain ini ke beberapa tipe pengguna".4---56# Tanya Warga YUX78Skill ini mensimulasikan sesi *usability walkthrough* ala think-aloud protocol, tapi dengan Claude berperan sebagai beberapa persona pengguna sekaligus — supaya desainer bisa dapat "second opinion" cepat sebelum riset user yang sesungguhnya.910**Penting:** ini adalah simulasi berbasis penalaran Claude, bukan riset pengguna asli. Selalu ingatkan user di akhir output bahwa temuan ini adalah *sinyal awal* untuk membantu prioritisasi, bukan pengganti riset dengan pengguna nyata.1112## Alur Kerja1314### 1. Pastikan ada desain yang dilampirkan1516Skill ini butuh sesuatu untuk direview: screenshot/gambar UI, atau link Figma. Kalau user memanggil skill ini tanpa lampiran apa pun, minta mereka melampirkan dulu sebelum lanjut.1718Jika berupa link Figma dan tool Figma MCP tersedia, gunakan untuk mengambil konteks desain (screenshot/struktur layer) — lihat skill `figma-design-to-code` atau tool `get_design_context`/`get_screenshot` untuk caranya. Jika berupa gambar yang sudah ada di context, cukup lihat langsung.1920### 2. Tanyakan jumlah persona2122Tanyakan ke user: berapa banyak persona yang ingin diuji? (Sarankan 2-4 sebagai default yang cukup untuk dapat keragaman perspektif tanpa kebanyakan noise.) Gunakan `ask_user_input_v0` jika tersedia untuk mempermudah, dengan opsi seperti "2", "3", "4", atau "lainnya".2324### 3. Kumpulkan kriteria tiap persona2526Untuk **setiap** persona, tanyakan (boleh digabung dalam satu pertanyaan per persona, atau satu batch pertanyaan untuk semua persona sekaligus jika user lebih suka cepat):2728- **Usia & pekerjaan** — mempengaruhi konteks hidup dan kosakata29- **Tingkat melek teknologi** — gaptek, biasa saja, atau mahir/power-user30- **Tujuan/goal** saat memakai UI ini — apa yang ingin mereka capai di layar ini31- **Tingkat pendidikan** — mempengaruhi cara mereka membaca istilah, singkatan, atau copy yang kompleks3233Jika user hanya kasih deskripsi singkat (misal "ibu rumah tangga 40an, gaptek"), boleh dilengkapi sendiri dengan asumsi wajar dan konfirmasi singkat ke user sebelum lanjut — jangan menahan proses hanya karena satu field kosong.3435Jangan gunakan atribut sensitif (etnis, agama, orientasi, kondisi kesehatan) kecuali user secara eksplisit menyebutkannya sebagai relevan untuk desainnya (misal aplikasi kesehatan tertentu).3637### 4. Generate think-aloud per persona3839Untuk tiap persona, tulis narasi think-aloud yang:4041- **Mengikuti alur visual dari atas ke bawah** (atau sesuai flow yang terlihat di desain — header dulu, lalu konten utama, lalu CTA/footer), seolah persona itu benar-benar melihat layar untuk pertama kali dan bicara sambil mikir.42- **Bahasa Indonesia sehari-hari yang khas untuk persona itu** — bukan bahasa baku formal. Sesuaikan gaya bicara dengan usia, pendidikan, dan tingkat melek teknologi:43 - Persona gaptek/usia lebih tua → istilah lebih sederhana, mungkin bingung dengan istilah teknis/Inggris, banyak pertanyaan retoris ("ini apa ya maksudnya?")44 - Persona mahir/muda → lebih santai, mungkin pakai singkatan gaul, bereaksi cepat terhadap pola UI yang familiar/tidak familiar45 - Jangan berlebihan sampai jadi karikatur atau stereotip yang merendahkan — tetap masuk akal dan hormat.46- **Fokus ke reaksi jujur**: apa yang menarik perhatian duluan, apa yang membingungkan, di mana mereka ragu-ragu atau khawatir (terutama penting untuk desain terkait uang/transaksi), istilah yang tidak dipahami, dan apakah tujuan mereka (dari kriteria di langkah 3) tercapai di layar ini.47- Sertakan momen spesifik yang jelas merujuk ke elemen UI yang ada di desain (tombol, label, harga, dsb), bukan komentar generik yang bisa berlaku untuk desain apa saja.48- **Nalar affordance UI**: karena input biasanya screenshot (statis dan kadang kepotong), persona juga perlu menebak/bereaksi terhadap kemungkinan interaksi di luar yang keliatan secara visual, bukan cuma mendeskripsikan apa yang ada di layar. Untuk tiap elemen yang relevan, pikirkan:49 - **Elemen yang kepotong di tepi layar** (teks terpotong, kartu yang keliatan cuma separuh) → persona akan menduga "ini kayaknya bisa di-scroll" atau "kartu ini kepotong, mungkin bisa digeser ke samping"50 - **Baris kartu sejajar horizontal** (misal dua kartu promo bersebelahan) → persona bisa menduga ini swipeable carousel, dan berekspektasi apa yang muncul kalau digeser51 - **Tombol/ikon yang ambigu fungsinya** → persona menyebutkan ekspektasi mereka: "kalau saya tap ini, kayaknya bakal muncul ..." — lalu evaluasi apakah ekspektasi itu masuk akal dari desain yang ada, atau malah bikin bingung/ragu52 - Jangan mengarang detail dari layar lain yang tidak diperlihatkan — cukup catat ekspektasi/dugaan persona, bukan memastikan seolah-olah sudah tau isi layar berikutnya.5354### 5. Rangkuman lintas persona5556Setelah semua persona selesai, tutup dengan bagian rangkuman yang:5758- Mengelompokkan **temuan yang muncul di lebih dari satu persona** (paling penting untuk diprioritaskan)59- Mencatat **temuan unik** per persona yang tetap layak diperhatikan60- Kalau relevan, beri catatan singkat arah perbaikan — tapi ini bukan fokus utama skill (fokusnya adalah menangkap *perspektif user*, bukan mendikte solusi desain)6162### 6. Simpan sebagai file markdown6364Simpan seluruh output (think-aloud tiap persona + rangkuman) sebagai satu file `.md` di `/mnt/user-data/outputs/`, lalu present ke user dengan `present_files`. Struktur file:6566```markdown67# Tanya Warga YUX — [Nama Desain/Fitur]6869## Persona yang Diuji70[ringkasan singkat tiap persona: nama samaran, usia & pekerjaan, tingkat melek teknologi, goal, pendidikan]7172## [Nama Persona 1] — Think Aloud73[narasi think-aloud]7475## [Nama Persona 2] — Think Aloud76[narasi think-aloud]7778...7980## Rangkuman Temuan81### Temuan yang muncul di beberapa persona82...83### Temuan unik per persona84...8586---87*Catatan: Ini adalah simulasi berbasis AI untuk membantu validasi awal, bukan pengganti riset pengguna asli.*88```8990Beri tiap persona nama samaran yang masuk akal (misal "Bu Sri, 45, guru SD") supaya rangkumannya lebih mudah diikuti, bukan cuma "Persona 1".9192### 7. (Opsional) Versi interaktif side-by-side + audio9394Setelah file markdown siap, tawarkan ke user apakah mereka mau versi interaktif juga — jangan generate otomatis tanpa ditanya, karena ini kerja tambahan. Kalau user mau, buat satu file HTML (baca `frontend-design` skill dulu untuk arahan visual sebelum membangunnya) dengan struktur:9596- **Layout dua kolom**: desain (gambar, embed langsung sebagai base64 di HTML) di satu sisi, narasi think-aloud di sisi lain, dengan tab atau dropdown untuk pindah antar persona.97- **Tombol play/pause per persona** yang memakai Web Speech API bawaan browser (`window.speechSynthesis` + `SpeechSynthesisUtterance`, `lang = 'id-ID'`) untuk membacakan narasinya. Ini gratis dan jalan lokal di browser, tapi **selalu beri tahu user** bahwa kualitas suara tergantung perangkat/browser mereka — dukungan suara Bahasa Indonesia tidak selalu tersedia dan kadang terdengar kaku atau memakai logat Inggris. Ini pelengkap, bukan pengganti versi teks/markdown.98- Simpan sebagai artifact HTML terpisah dari file markdown (bukan gantiin), lalu present ke user.99100## Catatan Tambahan101102- Kalau desain punya beberapa layar/flow (bukan cuma satu screen), tanyakan ke user apakah walkthrough-nya per-layar atau end-to-end satu flow penuh, karena ini mempengaruhi struktur narasi think-aloud.103- Kalau user cuma mau versi cepat tanpa tanya-jawab kriteria persona (misal langsung kasih "coba tanya 3 orang: ibu-ibu gaptek, anak kuliahan, dan bapak kantoran"), boleh langsung lanjut ke langkah 4 dengan asumsi wajar dari deskripsi singkat itu — tidak perlu memaksa isi keempat kriteria satu-satu kalau user jelas ingin cepat.
alfathony