Amanoba Logo
Back to Course

Integrasi UI dan UX copy

Day 16 of 30 · AI Generatif 2026: Bangun Aplikasi AI dan Agen

One-liner: Tempatkan AI di UI dengan penjelasan yang mudah dipahami.
Time: 20 hingga 30 menit
Deliverable: Checklist Integrasi UI dan UX Copy

Learning goal

You will be able to: Mengintegrasikan AI ke UI dan menulis UX copy yang jelas.

Success criteria (observable)

  • Ada area input dan output yang jelas.
  • UX copy menjelaskan ekspektasi dan batas.
  • Pesan error mudah dipahami.

Output you will produce

  • Deliverable: Checklist Integrasi UI dan UX Copy
  • Format: Checklist dan copy UI
  • Where saved: Di folder kursus dalam /generative-ai-2026-build-ai-apps-and-agents-id/

Who

Primary persona: Digital nomad yang membangun UI app AI Secondary persona(s): Pengguna pertama Stakeholders (optional): Mitra pembangunan

What

What it is

Struktur UI yang menunjukkan tempat input dan output. UX copy singkat yang menjelaskan cara kerja dan batas sistem.

What it is not

Bukan landing page pemasaran. Bukan UI dengan banyak elemen tanpa panduan.

2-minute theory

  • UI yang jelas mengurangi kesalahan pengguna.
  • UX copy mengatur ekspektasi dan menjaga kepercayaan.
  • Pesan error yang ramah meningkatkan pengalaman.

Key terms

  • UX copy: Teks singkat yang membimbing pengguna di UI.
  • Empty state: Teks awal sebelum pengguna memasukkan input.

Where

Applies in

  • Chat UI
  • Form based AI tools

Does not apply in

  • Sistem backend tanpa UI

Touchpoints

  • Input field
  • Output panel
  • Error messages

When

Use it when

  • Mulai menampilkan output kepada pengguna
  • Pengguna bingung tentang langkah berikut

Frequency

Setiap kali UI berubah

Late signals

  • Pengguna tidak tahu apa yang harus dimasukkan
  • Pesan error tidak jelas

Why it matters

Practical benefits

  • Mengurangi tiket support
  • UX lebih baik
  • Kepercayaan pengguna meningkat

Risks of ignoring

  • Pengguna frustrasi
  • Penggunaan turun

Expectations

  • Improves: kejelasan dan pengalaman
  • Does not guarantee: retensi tinggi

How

Step-by-step method

  1. Definisikan area input dan output.
  2. Tulis empty state yang membimbing.
  3. Tambahkan helper text tentang batasan.
  4. Tulis pesan error yang ramah.
  5. Uji dengan satu pengguna.

Do and don't

Do

  • Gunakan kata sederhana
  • Beri contoh input

Don't

  • Membuat UI tanpa petunjuk
  • Menyembunyikan batasan sistem

Common mistakes and fixes

  • Mistake: Tidak ada empty state. Fix: Tambahkan instruksi awal.
  • Mistake: Pesan error menyalahkan pengguna. Fix: Ubah menjadi pesan bantuan.

Done when

  • Input dan output jelas.
  • Empty state ada.
  • Pesan error ramah.

Guided exercise (10 to 15 min)

Inputs

  • Deskripsi fitur AI
  • Contoh input

Steps

  1. Buat sketsa UI sederhana.
  2. Tulis empty state dan helper text.
  3. Tulis pesan error.

Output format

Field Value
Input label
Empty state text
Helper text
Error message

Pro tip: Contoh input mempercepat pemahaman pengguna.

Independent exercise (5 to 10 min)

Task

Pangkas UX copy 20 persen tanpa mengurangi kejelasan.

Output

UX copy yang disederhanakan.

Self-check (yes/no)

  • Apakah pengguna tahu apa yang harus dimasukkan?
  • Apakah output mudah ditemukan?
  • Apakah pesan error ramah?
  • Apakah helper text menjelaskan batas?

Baseline metric (recommended)

  • Score: 3 dari 4 terpenuhi
  • Date: 2026-02-07
  • Tool used: Notes app

Bibliography (sources used)

  1. UX Writing for AI. Google. 2024-01-01. Read: https://material.io/design

  2. Nielsen Norman UX Writing. NNGroup. 2024-01-01. Read: https://www.nngroup.com/articles/ux-writing/

Read more (optional)

  1. Empty State Design Why: Panduan onboarding awal. Read: https://www.nngroup.com/articles/empty-states/