UI/UX Testing

Pengenalan

Dalam era digital ini, kualitas antarmuka pengguna dan pengalaman pengguna menjadi faktor krusial dalam kesuksesan sebuah aplikasi atau website. UI/UX Testing adalah proses sistematis untuk mengevaluasi bagaimana pengguna berinteraksi dengan produk digital, memastikan bahwa tidak hanya antarmukanya terlihat baik, tetapi juga intuitif dan mudah digunakan.

---

Definisi UI & UX Testing

Perbedaan Mendasar

Aspek	UI Testing	UX Testing
Fokus	Antarmuka visual & elemen desain	Pengalaman pengguna secara keseluruhan
Tujuan	Memastikan konsistensi visual & fungsionalitas	Memastikan kemudahan & kepuasan penggunaan
Scope	Button, ikon, warna, layout, responsivitas	Alur kerja, kegunaan, aksesibilitas, emosi
Metode	Testing manual, automated testing	Usability testing, user interviews, surveys
Outcome	Bug visual, masalah responsivitas	User pain points, kesulitan navigasi

Definisi Singkat

UI Testing (User Interface Testing) adalah proses pengujian untuk memverifikasi bahwa semua elemen visual dan interaktif dari sebuah aplikasi berfungsi dengan baik, konsisten, dan responsif di berbagai perangkat.

UX Testing (User Experience Testing) adalah proses pengujian untuk mengevaluasi seberapa baik pengguna dapat mencapai tujuan mereka dengan aplikasi, seberapa mudah untuk digunakan, dan seberapa menyenangkan pengalaman mereka.

---

Fokus UI Testing

Poin-Poin Utama UI Testing

1. Konsistensi Visual 👁️

Konsistensi visual memastikan bahwa desain terlihat profesional dan kohesif di seluruh aplikasi.

Aspek yang Diuji:

• Konsistensi warna, font, dan ukuran
• Alignment dan spacing yang teratur
• Konsistensi style button, input field, dan komponen lainnya
• Brand consistency

Contoh Testing Konsistensi Visual:

Test Case: Verifikasi Konsistensi Warna
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ID: UI-001
Tujuan: Memastikan semua button primary menggunakan warna yang sama
Langkah:
  1. Buka halaman Dashboard
  2. Catat warna button "Submit" pada form login
  3. Navigasi ke halaman Settings
  4. Verifikasi warna button "Save Changes"
  5. Navigasi ke halaman Profile
  6. Verifikasi warna button "Update Profile"
  
Hasil yang Diharapkan: 
  Semua button primary harus menggunakan hex color yang sama (misalnya #007BFF)

✅ PASS: Semua button konsisten
❌ FAIL: Button pada Profile page menggunakan warna berbeda (#0056B3)

Alat yang Digunakan:

• Browser Developer Tools untuk inspect elemen
• Screenshot comparison tools
• Design system documentation

---

2. Responsivitas 📱

Responsivitas memastikan aplikasi dapat beradaptasi dengan berbagai ukuran layar dan perangkat.

Aspek yang Diuji:

• Layout pada mobile (320px - 480px)
• Tablet (481px - 768px)
• Desktop (769px - 1200px)
• Large screens (>1200px)
• Breakpoint transitions
• Element visibility & overflow handling

Contoh Testing Responsivitas:

Test Case: Responsivitas Landing Page
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ID: UI-002
Tujuan: Memastikan landing page responsive di semua device

Skenario 1: Mobile Device (iPhone 12 - 390x844px)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Langkah:
  1. Set viewport ke 390x844px
  2. Verifikasi navigation menu berubah ke hamburger menu
  3. Verifikasi images menyesuaikan ukuran layar
  4. Verifikasi text readable tanpa zoom
  5. Scroll halaman dan verifikasi semua elemen visible

Hasil yang Diharapkan:
  ✅ Menu responsive menjadi hamburger
  ✅ Images scale properly
  ✅ Text readable pada ukuran asli
  ✅ Tidak ada horizontal scrolling


Skenario 2: Tablet Device (iPad - 768x1024px)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Langkah: [Similar process]
Hasil yang Diharapkan:
  ✅ 2-column layout terlihat dengan baik
  ✅ Touch elements (buttons) cukup besar (min 44x44px)
  ✅ Image gallery berfungsi dengan baik


Skenario 3: Desktop (1920x1080px)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Langkah: [Similar process]
Hasil yang Diharapkan:
  ✅ 3-column layout optimal
  ✅ Content width tidak melebihi 1200px
  ✅ Whitespace sesuai dengan design guidelines

Tools & Browser yang Digunakan:

• Chrome DevTools Responsive Mode
• Firefox Developer Edition
• Safari Developer Tools
• BrowserStack untuk testing multi-device

---

3. Kompatibilitas 🔄

Kompatibilitas memastikan aplikasi berfungsi dengan baik di berbagai browser dan operating system.

Aspek yang Diuji:

• Cross-browser compatibility (Chrome, Firefox, Safari, Edge)
• Cross-OS compatibility (Windows, macOS, Linux, iOS, Android)
• CSS rendering consistency
• JavaScript compatibility
• Responsive image handling

Contoh Testing Kompatibilitas:

Test Case: Cross-Browser Compatibility
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ID: UI-003
Tujuan: Memastikan aplikasi kompatibel di major browsers

Browser Testing Matrix:
┌─────────────┬──────────┬──────────┬──────────┬──────────┐
│ Feature     │ Chrome   │ Firefox  │ Safari   │ Edge     │
│             │ v119     │ v120     │ v17      │ v119     │
├─────────────┼──────────┼──────────┼──────────┼──────────┤
│ Buttons     │    ✅    │    ✅    │    ✅    │    ✅    │
│ Form Input  │    ✅    │    ✅    │    ✅    │    ✅    │
│ Dropdown    │    ✅    │    ⚠️    │    ✅    │    ✅    │
│ Modal       │    ✅    │    ✅    │    ❌    │    ✅    │
│ Animation   │    ✅    │    ✅    │    ⚠️    │    ✅    │
│ Gradient BG │    ✅    │    ✅    │    ✅    │    ✅    │
└─────────────┴──────────┴──────────┴──────────┴──────────┘

Catatan: 
⚠️ Firefox - Dropdown muncul tapi animasi kurang smooth
❌ Safari - Modal shadow effect tidak terlihat

Rekomendasi:
  1. Gunakan fallback CSS untuk Firefox dropdown
  2. Fix box-shadow property untuk Safari compatibility

Tools yang Digunakan:

• BrowserStack
• CrossBrowserTesting
• Lambda Test
• Sauce Labs

---

Fokus UX Testing

Poin-Poin Utama UX Testing

1. Alur Kerja (User Flow) 🔀

Alur kerja menggambarkan perjalanan pengguna dalam menyelesaikan tugas tertentu.

Aspek yang Diuji:

• Keterlogisan tahapan proses
• Jumlah klik/tap yang diperlukan (minimize)
• Clear call-to-action (CTA)
• Intuitive navigation paths
• Error prevention & recovery

Contoh Testing Alur Kerja:

Test Case: User Flow Checkout
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ID: UX-001
Tujuan: Mengevaluasi alur checkout dari start hingga success
Pengguna Target: New user (first time checkout)

Alur yang Diharapkan:
┌────────────────────────────────────────┐
│ 1. Product Page                         │
│    - View product details              │
│    - Click "Add to Cart"                │
└────────────────────┬────────────────────┘
                     │ ✅ Clear button
┌────────────────────▼────────────────────┐
│ 2. Cart Review                          │
│    - Review items                      │
│    - Edit quantities                   │
│    - Click "Proceed to Checkout"       │
└────────────────────┬────────────────────┘
                     │ ✅ Visible cart summary
┌────────────────────▼────────────────────┐
│ 3. Shipping Info                        │
│    - Enter/select address              │
│    - Select shipping method            │
│    - Click "Continue"                  │
└────────────────────┬────────────────────┘
                     │ ✅ Form validation
┌────────────────────▼────────────────────┐
│ 4. Payment Info                         │
│    - Enter card details                │
│    - Click "Pay Now"                   │
└────────────────────┬────────────────────┘
                     │ ✅ Secure payment form
┌────────────────────▼────────────────────┐
│ 5. Order Confirmation                  │
│    - Show success message              │
│    - Display order number              │
│    - Provide receipt option            │
└────────────────────────────────────────┘

Test Results:
✅ Alur logis dan mudah diikuti
✅ Hanya 5 steps (optimal)
⚠️ Shipping form terlalu banyak required fields
❌ Payment form tidak menampilkan security badges

Rekomendasi:
  1. Simplify shipping form dengan auto-fill
  2. Add trust badges pada payment form
  3. Show progress indicator di setiap step

---

2. Kegunaan (Usability) 💡

Kegunaan mengukur seberapa mudah pengguna dapat menggunakan aplikasi untuk mencapai tujuan mereka.

Aspek yang Diuji:

• Learnability (kemudahan belajar)
• Efficiency (kecepatan penyelesaian tugas)
• Error rates (tingkat kesalahan pengguna)
• Memorability (mudah diingat)
• Satisfaction (kepuasan pengguna)

Contoh Testing Kegunaan:

Test Case: Usability Testing - Search Feature
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ID: UX-002
Metode: Moderated Usability Testing (5 participants)
Durasi: 30 menit per participant

Skenario Tugas:
  "Carilah laptop dengan spesifikasi Intel i7 dan budget 
   maksimal 15 juta rupiah"

Metrik yang Diukur:
┌─────────────────────┬──────────┬──────────┬──────────┐
│ Metrik              │ P1       │ P2       │ Target   │
├─────────────────────┼──────────┼──────────┼──────────┤
│ Task Completion     │ ✅ (2:15)│ ✅ (3:45)│ 100%     │
│ Clicks               │ 8        │ 12       │ <10      │
│ Errors              │ 0        │ 1        │ <2       │
│ Confusion Points    │ None     │ Filter   │ None     │
│ SUS Score           │ 85       │ 78       │ >75      │
└─────────────────────┴──────────┴──────────┴──────────┘

Findings:
✅ Search filter mudah ditemukan
✅ Filter results intuitif
⚠️ Price range label tidak jelas (P2 confused)
❌ No "Clear filters" button visible

Rekomendasi:
  1. Ubah label "Price Range" menjadi "Budget (Rp)"
  2. Add "Clear All Filters" button
  3. Show applied filters dengan visual badges

Tools yang Digunakan:

• Maze
• UserTesting
• Respondent
• Validately

---

3. Aksesibilitas (Accessibility) ♿

Aksesibilitas memastikan aplikasi dapat digunakan oleh semua orang, termasuk mereka dengan disabilitas.

Aspek yang Diuji:

• WCAG 2.1 compliance
• Keyboard navigation
• Screen reader compatibility
• Color contrast
• Alt text untuk images
• Form accessibility
• Video captions & transcripts

Contoh Testing Aksesibilitas:

Test Case: Accessibility Audit
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ID: UX-003
Tujuan: Ensure WCAG 2.1 AA compliance
Tools: WAVE, Axe DevTools, NVDA Screen Reader

Keyboard Navigation Test
━━━━━━━━━━━━━━━━━━━━━━━
Skenario: Navigate entire page using only Tab key
┌──────────────────────────────────────────┐
│ Step 1: Home page opened                 │
│ → Press Tab repeatedly                   │
│ ✅ Focus indicator visible on all elements
│ ✅ Tab order logical (left-to-right, top-to-bottom)
│ ✅ Can access menu via Tab key
│ ✅ No keyboard trap detected
│ ❌ Skip to main content link not present
└──────────────────────────────────────────┘

Screen Reader Test (NVDA)
━━━━━━━━━━━━━━━━━━━━━━━
┌──────────────────────────────────────────┐
│ ✅ Page title announced correctly
│ ✅ Form labels associated with inputs
│ ✅ Button purposes clear
│ ✅ Images have alt text
│ ❌ Icons dalam buttons tidak punya aria-label
│ ❌ Modal dialog role tidak diterapkan
└──────────────────────────────────────────┘

Color Contrast Test
━━━━━━━━━━━━━━━━━━
┌──────────────────────────────────────────┐
│ Element              │ Ratio  │ Standard │ Result
├──────────────────────┼────────┼──────────┤
│ Heading text         │ 12:1   │ >4.5:1   │ ✅ PASS
│ Body text            │ 5.2:1  │ >4.5:1   │ ✅ PASS
│ Button text          │ 3.5:1  │ >4.5:1   │ ❌ FAIL
│ Link text            │ 4.8:1  │ >4.5:1   │ ✅ PASS
└──────────────────────┴────────┴──────────┴──────────┘

Rekomendasi:
  1. Tambahkan "Skip to main content" link
  2. Tambahkan aria-label untuk icon buttons
  3. Add proper ARIA roles untuk modal
  4. Increase button text contrast ratio

Tools yang Digunakan:

• WAVE (WebAIM)
• Axe DevTools
• NVDA Screen Reader
• JAWS
• Lighthouse (Chrome DevTools)

---

Metode & Tools

1. Manual Testing 👤

Manual testing melibatkan tester yang secara langsung menjalankan test cases tanpa otomasi.

Kelebihan:

• Fleksibel untuk exploratory testing
• Dapat mendeteksi UX issues yang tidak terduga
• Lebih baik untuk mengevaluasi user experience
• Tidak memerlukan technical knowledge yang tinggi

Kekurangan:

• Time-consuming
• Prone to human error
• Tidak scalable untuk large projects
• Repeatability terbatas

Best Practices:

1. Buat detailed test cases
2. Dokumentasikan semua steps
3. Screenshot/record bug reproduction
4. Gunakan checklist untuk consistency
5. Test di berbagai kondisi & scenarios

---

2. A/B Testing 📊

A/B Testing membandingkan dua versi dari elemen UI untuk menentukan mana yang lebih baik.

Konsep:

┌─────────────────────────────────────┐
│ Original Version (Control)          │
│ - Current design                    │
│ - Shown to 50% users                │
│ Metric: 5% conversion rate          │
└─────────────────────────────────────┘
                    VS
┌─────────────────────────────────────┐
│ Test Version (Variant)              │
│ - New design                        │
│ - Shown to 50% users                │
│ Metric: 7% conversion rate          │
└─────────────────────────────────────┘
                    ↓
            Variant lebih baik (40% increase)

Contoh A/B Test:

Test Name: CTA Button Color Optimization
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Periode: 2 minggu
Sample Size: 10,000 users (5,000 per variant)

Variant A (Control):
- Button color: #007BFF (Blue)
- Button text: "Subscribe"
- CTA rate: 8.5%

Variant B (Test):
- Button color: #FF6B6B (Red)
- Button text: "Get Started"
- CTA rate: 12.3%

Hasil:
- Variant B lebih baik 44.7%
- Confidence level: 99.9%
- Recommendation: Implement Variant B

Insights:
✅ Red button more attention-grabbing
✅ "Get Started" CTA lebih compelling
⚠️ Consider untuk A/B test button size next

Tools yang Digunakan:

• Google Optimize
• Optimizely
• Convert
• VWO (Visual Website Optimizer)

---

3. Heatmaps & Session Recording 🔥

Heatmaps menunjukkan area mana yang paling banyak diklik/dilihat pengguna.

Jenis Heatmaps:

1. Click Heatmap
   ├─ Menunjukkan mana yang paling sering diklik
   ├─ Membantu identify misplaced elements
   └─ Useful untuk optimize CTA placement

2. Scroll Heatmap
   ├─ Menunjukkan seberapa jauh users scroll
   ├─ Identify content yang tidak dilihat
   └─ Optimize page length & content placement

3. Move Heatmap
   ├─ Track mouse movement
   ├─ Identify attention areas
   └─ Understand eye tracking patterns

4. Attention Heatmap
   ├─ Combine dari semua heatmaps
   ├─ Show overall user attention
   └─ Prioritize element positioning

Session Recording Insights:

Contoh: E-commerce Product Page
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Session Recording menunjukkan:
✅ Users scroll untuk melihat product images (90%)
✅ Users hover product description sebelum add to cart
❌ Users click share button (hanya 2%)
❌ Users tidak perhatikan customer reviews section

Action Items:
1. Move customer reviews higher on page
2. Add social proof badges near CTA
3. Remove share button / hide until hover
4. Increase image carousel usability

Tools yang Digunakan:

• Hotjar
• Clarity (Microsoft)
• Session Cam
• FullStory
• Contentsquare

---

Heuristic Evaluation: 10 Prinsip Usability Nielsen

Jakob Nielsen adalah salah satu ahli UX terkemuka yang mengembangkan 10 Prinsip Usability (Heuristics). Prinsip-prinsip ini menjadi foundational untuk evaluasi UI/UX.

10 Heuristics Nielsen

1. Visibility of System Status 👁️

Sistem harus selalu membuat pengguna tetap informed tentang apa yang sedang terjadi.

Prinsip:

• Feedback real-time
• Status updates yang jelas
• Loading indicators
• Progress bars

Contoh BAIK:

✅ Loading spinner dengan text "Processing your payment..."
✅ Email sending status "3 of 10 emails sent"
✅ File upload progress "85% complete"
✅ Real-time validation feedback pada form

Contoh BURUK:

❌ Tidak ada loading indicator saat proses berlangsung
❌ User tidak tahu apakah action diterima
❌ Form submit tanpa feedback
❌ Silent failures tanpa error messages

Implementation:

<!-- GOOD: Clear feedback -->
<div class="payment-status">
  <div class="spinner"></div>
  <p>Processing your payment...</p>
</div>

<!-- GOOD: Progress bar -->
<div class="progress">
  <div class="progress-bar" style="width: 65%">
    Uploading: 65% Complete
  </div>
</div>

<!-- BAD: No feedback -->
<button onclick="submitForm()">Submit</button>
<!-- User clicks but nothing happens visibly -->

---

2. Match Between System and Real World 🌍

Sistem harus berbicara dalam bahasa pengguna, menggunakan words, phrases, dan konsep yang familiar.

Prinsip:

• User’s mental model alignment
• Familiar terminology
• Real-world conventions
• Avoid technical jargon

Contoh BAIK:

✅ "Add to Cart" bukan "Insert item to commerce basket"
✅ "Delete" dengan icon trash dapat
✅ "Save" untuk menyimpan file
✅ Folder structure mirip dengan file explorer

Contoh BURUK:

❌ "Commit transaction" instead of "Pay now"
❌ "Persist data" instead of "Save"
❌ Technical error messages: "CORS policy violation"
❌ Unfamiliar icons tanpa labels

Implementation:

GOOD: Shopping Cart
├─ "Add to Cart" (familiar e-commerce term)
├─ "View Cart" (standard terminology)
├─ "Checkout" (common term)
└─ "Order Confirmation" (clear outcome)

BAD: Shopping Cart
├─ "Insert item to basket" (awkward)
├─ "See basket" (ambiguous)
├─ "Begin transaction" (technical)
└─ "Transaction confirmed" (formal, impersonal)

---

3. User Control and Freedom 🎮

Pengguna sering melakukan actions secara tidak sengaja dan memerlukan “emergency exits” yang jelas.

Prinsip:

• Undo/Redo functionality
• Back buttons
• Cancel options
• Exit dialogs
• Keyboard shortcuts (Ctrl+Z, Ctrl+Y)

Contoh BAIK:

✅ "Delete account" dengan confirmation dialog
✅ Undo button setelah delete email
✅ Cancel button pada modal forms
✅ Back button di browser
✅ ESC key untuk close modals

Contoh BURUK:

❌ Delete permanently tanpa confirmation
❌ Tidak ada undo functionality
❌ Modal tanpa close button
❌ No back button pada wizard
❌ Trapping users in flow

Implementation:

<!-- GOOD: User can easily exit -->
<div class="modal">
  <button class="close-btn" onclick="closeModal()">×</button>
  <form>
    <button type="submit">Save</button>
    <button type="button" onclick="closeModal()">Cancel</button>
  </form>
</div>

<!-- BAD: No easy exit -->
<div class="modal">
  <!-- No close button -->
  <form>
    <button type="submit">Save</button>
    <!-- No cancel button -->
  </form>
</div>

---

4. System and Standards Consistency 🔄

Pengguna tidak boleh bertanya-tanya apakah words, situations, atau actions yang berbeda berarti hal yang sama.

Prinsip:

• Konsistensi terminologi
• Konsistensi visual
• Konsistensi pola interaksi
• Follow platform conventions

Contoh BAIK:

✅ Semua buttons primary berwarna sama
✅ Semua modals memiliki close button di posisi sama
✅ Icons konsisten menggunakan design system
✅ Navigation menu di posisi yang sama di semua pages

Contoh BURUK:

❌ Primary buttons dengan warna berbeda per page
❌ Submit button di posisi berbeda
❌ Icons tidak konsisten style
❌ Navigation di header di page 1, sidebar di page 2

Design System Benefits:

Dengan design system:
✅ Buttons always look same
✅ Modals follow same pattern
✅ Icons have consistent style
✅ Colors same across app
✅ Spacing & alignment consistent
✅ Reduces cognitive load
✅ Faster learning curve

---

5. Error Prevention 🛑

Bahkan lebih baik daripada good error messages adalah desain yang cermat yang mencegah problems dari terjadi pertama kalinya.

Prinsip:

• Prevent problems before they occur
• Confirmations sebelum actions
• Constraints pada input
• Validation real-time

Contoh BAIK:

✅ Email field dengan type="email" (browser validates)
✅ Phone field dengan format placeholder
✅ Date picker daripada text input
✅ Confirmation sebelum delete permanent data
✅ Max length pada text inputs

Contoh BURUK:

❌ Tidak ada input validation
❌ Allow submit dengan incomplete form
❌ Delete tanpa confirmation
❌ No format guidance
❌ Unexpected data rejection

Implementation:

<!-- GOOD: Error prevention -->
<form>
  <input 
    type="email" 
    placeholder="Enter email address"
    required
  >
  <input 
    type="tel" 
    placeholder="(123) 456-7890"
    pattern="[0-9\-\+\s\(\)]+"
  >
  <input 
    type="number" 
    min="1" 
    max="100"
  >
</form>

<!-- Also good: Real-time validation -->
<input 
  type="email" 
  onchange="validateEmail(this)"
>
<span class="error-message" id="emailError"></span>

---

6. Error Recognition and Recovery ⚠️

Pesan error harus diekspresikan dalam bahasa plain text (tidak ada codes), menunjukkan masalahnya secara tepat, dan secara konstruktif menyarankan solusi.

Prinsip:

• Plain language error messages
• Specific problem identification
• Constructive solutions
• Polite tone (tidak blame user)
• Visible error messages

Contoh BAIK:

✅ "Password must contain at least 8 characters, 
    1 uppercase, 1 number, and 1 special character"
✅ "Email already registered. Try login or reset password"
✅ "Server temporarily unavailable. Please try again in 5 minutes"
✅ Error message di dekat field yang error

Contoh BURUK:

❌ "Error code: 4042"
❌ "Invalid input"
❌ "Something went wrong"
❌ "You made a mistake"
❌ "No solution provided"

Implementation:

<!-- GOOD: Clear error messages -->
<div class="form-group">
  <input 
    type="password" 
    id="password"
    aria-describedby="passwordError"
  >
  <div id="passwordError" class="error-message">
    <strong>Password must include:</strong>
    <ul>
      <li>At least 8 characters</li>
      <li>At least 1 uppercase letter (A-Z)</li>
      <li>At least 1 number (0-9)</li>
      <li>At least 1 special character (!@#$%)</li>
    </ul>
    <a href="/help/password-requirements">Learn more</a>
  </div>
</div>

<!-- BAD: Vague error -->
<input type="password">
<span class="error">Invalid password</span>

---

7. Flexibility and Efficiency of Use ⚡

Accelerators yang tidak terlihat oleh novice users sering dapat mempercepat interaksi expert users sedemikian rupa sehingga sistem dapat melayani kedua kategori pengguna.

Prinsip:

• Keyboard shortcuts
• Advanced search
• Custom settings/preferences
• Batch operations
• Drag-and-drop
• Autofill/remembered preferences

Contoh BAIK:

✅ Ctrl+K untuk command palette
✅ Ctrl+D untuk bookmark halaman
✅ Advanced search dengan filters
✅ Remember last preferences
✅ Drag-and-drop file upload
✅ Browser autofill untuk forms

Contoh BURUK:

❌ Hanya mouse navigation
❌ No keyboard shortcuts
❌ Basic search tanpa filters
❌ Force reset preferences setiap login
❌ Hanya click-based interactions

Implementation:

<!-- GOOD: Multiple ways to do same thing -->
1. Mouse click: <button onclick="save()">Save</button>
2. Keyboard shortcut: Ctrl+S
3. Menu: File → Save
4. Drag & drop: Save button

<!-- Good: Advanced features for power users -->
<div class="search-bar">
  <input placeholder="Search... (Ctrl+K)">
  <a href="/advanced-search">Advanced Search</a>
</div>

<!-- Good: Remember preferences -->
<input type="checkbox" id="rememberPassword">
<label for="rememberPassword">Remember me</label>

---

8. Aesthetic and Minimalist Design 🎨

Interfaces tidak boleh mengandung informasi yang tidak relevan atau jarang digunakan. Setiap unit informasi additional berkompetisi dengan units of information yang relevan dan mengurangi relative visibility dari yang terakhir.

Prinsip:

• Remove unnecessary elements
• Focus on important content
• White space (breathing room)
• Visual hierarchy
• Clean layout
• Avoid clutter

Contoh BAIK:

✅ Show only essential information
✅ Hide advanced options in dropdown/expandable
✅ Use progressive disclosure
✅ Clean layout dengan adequate white space
✅ Visual hierarchy yang jelas
✅ Minimal animations (non-distracting)

Contoh BURUK:

❌ Information overload pada satu halaman
❌ Cluttered interface
❌ No white space
❌ All options visible at once
❌ Excessive animations/decorations
❌ Unclear hierarchy

Progressive Disclosure Example:

Halaman Product: 
- Minimal: Title, image, price, "Add to Cart"
- Click "More Details": specification table
- Click "Read Reviews": customer reviews
- Click "Help": FAQ dan documentation

Benefits:
✅ Less overwhelming untuk casual browsers
✅ Detailed info available untuk serious buyers
✅ Faster page load
✅ Better user focus

---

9. Help and Documentation 📖

Meskipun lebih baik jika sistem dapat digunakan tanpa dokumentasi, tetap perlu untuk menyediakan help dan documentation tasks.

Prinsip:

• Easy to search help
• Task-focused help topics
• Step-by-step instructions
• Contextual help
• FAQs
• Tooltips and guided tours

Contoh BAIK:

✅ Inline tooltips untuk fitur kompleks
✅ Help icon dengan contextual information
✅ Search di help documentation
✅ Step-by-step tutorials
✅ FAQ section
✅ Video tutorials
✅ Chatbot support

Contoh BURUK:

❌ No help atau documentation
❌ Help tersembunyi atau sulit ditemukan
❌ Generic help tanpa specific solutions
❌ Outdated documentation
❌ No examples atau screenshots

Implementation:

<!-- GOOD: Contextual help -->
<div class="form-group">
  <label for="discount">
    Discount Code
    <span class="help-icon" 
          data-tooltip="Enter promo code to get discount">
      ?
    </span>
  </label>
  <input type="text" id="discount">
</div>

<!-- Good: Help section -->
<div class="help-section">
  <h3>How to apply discount</h3>
  <ol>
    <li>Copy your promo code</li>
    <li>Enter in "Discount Code" field</li>
    <li>Click "Apply"</li>
    <li>See updated total</li>
  </ol>
  <p><a href="/faqs">More FAQs →</a></p>
</div>

---

10. Help and Error Recovery 🆘

Setiap halaman atau fitur harus memiliki clear path untuk pengguna mendapatkan help atau mengatasi masalah.

Prinsip:

• Error recovery instructions
• Undo/Redo mechanisms
• Alternative paths
• Support contact options
• Status pages
• Escalation paths

Contoh BAIK:

✅ Error message dengan solusi jelas
✅ "Forgot password?" link yang mudah ditemukan
✅ Live chat support availability
✅ Contact form untuk bug reports
✅ Status page untuk downtime
✅ Undo function setelah destructive action

Contoh BURUK:

❌ Error tanpa solusi
❌ No support contact info
❌ Permatan consequence tanpa recovery
❌ Hidden help resources
❌ No escalation path

Recovery Path Examples:

Scenario 1: Forgot Password
━━━━━━━━━━━━━━━━━━━━━━━
✅ "Forgot password?" link pada login page
✅ Email reset link yang clear
✅ Step-by-step reset instructions
✅ Support contact jika email tidak diterima

Scenario 2: Payment Failed
━━━━━━━━━━━━━━━━━━━━━━━
✅ Clear error message mengapa payment gagal
✅ Suggested solutions
✅ Retry button
✅ Alternative payment methods
✅ Contact support link

Scenario 3: Lost Work
━━━━━━━━━━━━━━━━━━━━
✅ Auto-save functionality
✅ Undo button tersedia
✅ Draft recovery
✅ Contact support untuk assist

---

Best Practices untuk UI/UX Testing

1. Testing Strategy

Phase 1: Baseline (Week 1-2)
├─ Define objectives & success metrics
├─ Identify test audience
├─ Prepare testing environment
└─ Create test plan

Phase 2: Execution (Week 3-6)
├─ Conduct usability tests
├─ Gather quantitative data
├─ Record sessions
└─ Collect feedback

Phase 3: Analysis (Week 7-8)
├─ Analyze findings
├─ Identify patterns
├─ Prioritize issues
└─ Recommend improvements

Phase 4: Implementation (Week 9-10)
├─ Implement fixes
├─ Re-test critical areas
├─ Get stakeholder approval
└─ Deploy changes

2. Metrics yang Penting

Quantitative Metrics:
├─ Task Completion Rate (%)
├─ Time on Task (seconds)
├─ Error Rate (%)
├─ Pages Visited per Session
├─ Bounce Rate (%)
└─ Conversion Rate (%)

Qualitative Metrics:
├─ System Usability Scale (SUS)
├─ User Satisfaction (NPS)
├─ Perceived Usefulness
├─ Perceived Ease of Use
├─ Overall Satisfaction
└─ Net Promoter Score (NPS)

3. Tools Recommendation

Tool	Purpose	Best For
Chrome DevTools	Browser inspection	Quick UI checking
Figma	Design collaboration	Design handoff
Maze	Prototype testing	Moderated testing
Hotjar	Heatmaps & recordings	Behavioral analysis
Google Analytics	User behavior	Traffic patterns
UserTesting	Usability testing	Remote testing
Axe DevTools	Accessibility	WCAG compliance
BrowserStack	Cross-browser	Multi-device testing

4. Documentation

Setiap test harus didokumentasikan dengan:

• Test case ID
• Objective yang jelas
• Steps yang detail
• Expected results
• Actual results
• Screenshots/videos
• Issues ditemukan
• Recommendations

---

Kesimpulan

UI/UX Testing adalah proses integral dalam menciptakan produk digital yang sukses. Dengan memahami perbedaan antara UI Testing (fokus pada visual & responsivitas) dan UX Testing (fokus pada pengalaman pengguna), serta menerapkan 10 Prinsip Usability Nielsen, tim dapat membangun aplikasi yang tidak hanya terlihat baik tetapi juga intuitif dan mudah digunakan.

Key Takeaways:

1. UI Testing memastikan konsistensi visual, responsivitas, dan kompatibilitas
2. UX Testing memastikan alur kerja yang logis, kegunaan yang optimal, dan aksesibilitas
3. Heuristic Evaluation memberikan framework untuk mengevaluasi design quality
4. Tools dan Metrics membantu mengukur dan mengoptimalkan pengalaman pengguna
5. Continuous Testing adalah kunci untuk improvement berkelanjutan

---

Resources & References

• Jakob Nielsen’s 10 Usability Heuristics
• WCAG 2.1 Guidelines
• Nielsen Norman Group
• Interaction Design Foundation
• Google Material Design
• Apple Human Interface Guidelines

---