LECTURE NOTES

ISYS6509
User Experience

Week 8

Wireframes and Annotation

ISYS6509 – User Experience

 LEARNING OUTCOMES

LO3. Apply design principles of User Experience

Learning Objective

a. Menjelaskan elemen WIREFRAME yang harus ada pada halaman situs atau aplikasi

b. Menjelaskan KOMPONEN penjelasan dan mengapa hal ini penting untuk desain
wireframes

c. Menjelaskan langkah-langkah untuk menyusun wireframe

Outline Materi:

1. Wireframes and Annotations

2. Annotations for Wireframes

3. Tips for wireframing

ISYS6509 – User Experience

 ISI MATERI

Wireframes

Wireframes adalah diagram yang mewakili kerangka website atau aplikasi antara arsitektur
informasi dan produk jadi. Sehingga dapat digunakan untuk menjelajahi konten, navigasi, dan
interaksi secara terpisah dari elemen desain visual seperti warna dan font.

Sebuah Wireframes digunakan untuk mengidentifikasi elemen-elemen yang akan ditampilkan

pada halaman atau layar, seperti:

1. Navigasi,

2. Bagian Konten,

3. Citra Dan / Atau Media

4. Elemen Form

5. Menu bantuan

Biasanya dibuat dalam nuansa hitam dan putih atau abu-abu, menggunakan placeholder untuk
gambar, dan tidak masuk ke spesifik font. Digunakan untuk mewakili situs atau aplikasi untuk
klien, desainer, pengembang, dan setiap anggota tim lainnya (stakeholder).

Wireframes terbaik menjelaskan hasil dari interaksi langsung dan kolaborasi antara berbagai
pekerjaan mitra dari analis bisnis untuk pengembang dan desainer lainnya.

Annotations adalah penjelasan dan catatan tentang elemen atau interaksi pada
rangka gambar. Biasanya berisi informasi seperti:

1. Konten Identifikasi Atau Label

2. Konten Sumber

3. Aturan Display

4. Aturan Interaksi

5. Tujuan Interaksi

ISYS6509 – User Experience

 6. Proses Aturan

7. Konten Error / Pesan

Mengumpulkan Informasi

Sebelum memulai wireframing, perlu dilakukan pegumpulan beberapa informasi dimulai

dengan:

1. Sebuah gambaran yang jelas dari pengguna produk Anda dan tujuan mereka.
Model tugas, riwayat pengguna, peta pengalaman pelanggan, dan personas.

2. Sebuah pemahaman yang jelas tentang tujuan bisnis untuk proyek. Wawancara
pemangku kepentingan, dan user requirement

3. Arsitektur informasi. Anda benar-benar membutuhkan IA sebelum Anda dapat mulai

wireframing karena memiliki korelasi langsung ke system navigasi sebuah website.

4. Ide-ide desain, baik yang dihasilkan dalam lokakarya ideation atau mungkin selama
sesi sketsa

Analisa
Tentukan tujuan masukan dan keluaran, layar tertentu yang sedang dikerjakan, pikirkan
tentang entry dan exit point:

1. Apakah pengguna mengunjungi situs ini?

2. Di mana mereka berada sebelumnya, dan apa selanjutnya?

3. Apa yang pengguna ingin lakukan pada layar ini?

4. Kemana pengguna ingin pergi berikutnya?

5. Pertimbangkan apakah terdapat tujuan bisnis pada proyek dan pada layar tertentu.

6. Dalam arti yang sangat luas, akan dirancang isi dan tata letak untuk memenuhi
kebutuhan pengguna, dan panggilan bantuan atau menu help untuk memenuhi
kebutuhan bisnis.

7. Siapa pengguna Wireframe?

ISYS6509 – User Experience

Pengguna Wireframes

Siapa yang menerima wireframes dan apa yang mereka butuhkan? Berpikir sedikit tentang hal
ini diawal project akan membantu wireframes menjadi lebih bermanfaat. Mungkin manajer
produk membutuhkannya untuk mendapatkan signoff untuk proyek mereka. Mereka mungkin
tidak ingin terlalu banyak detail.

Atau, bahwa wireframes adalah satu-satunya spesifikasi proyek ini, dan perlu memastikan
bahwa pengembang tahu persis bagaimana setiap interaksi bekerja.

Spesialis konten mungkin perlu arah yang kuat, atau mungkin lebih suka untuk menghasilkan
panduan konten. Praktisi UX lain mungkin ingin menjalankan tes pengguna atau mengedit
wireframes dalam proyek. Manajer pemasaran mungkin ingin tahu inovasi baru sehingga
mereka dapat merencanakan kampanye iklan. Tim hukum mungkin perlu meninjau dan
berinteraksi langsung untuk memastikan mereka mematuhi aturan setempat. Pada dasarnya,
setiap proyek berbeda, tetapi pahami siapa pengguna wireframe sebelum proyek dimulai.

Penggunaan Kontek Produk

Asumsikan anda sedang merancang sebuah situs web untuk digunakan pada desktop dengan
monitor ukuran minim. Sebelum memulai wireframing, anda harus berpikir tentang ukuran
layar agar desain tersebut optimal. Hal ini bisa menjadi agak berbeda, bila ukuran layar lebih
bervariasi dari TV ke layar bioskop, ke monitor desktop, tablet dan ponsel (orientasi potret
atau lanskap).

Jadi, jika sedang mendesain website, wireframes sangat mungkin mengatasi beberapa ukuran
layar. Bagaimana hal ini dapat dicapai? Ada sejumlah pendekatan, wireframing setiap
halaman dengan ukuran yang berbeda, wireframing untuk layar desktop diprioritaskan oleh
para pengembang kemudian menerjemahkan ke layar yang lebih kecil atau wireframing
langsung ke HTML.

Pada pengujian pengguna pada komputer desktop, mungkin pendekatan biaya yang paling
efektif adalah dengan gambar rangka untuk ukuran layar desktop. Jika perlu menguji pada

ISYS6509 – User Experience

ukuran ponsel, harus menggambar rangka untuk ukuran itu juga. Atau gunakan template
seperti gambar 1.

Gambar 1. Adaptive Path’s six-up template

Prioritaskan Konten

Mulailah dengan membuat daftar isi pada layar rancangan. Merujuk kembali ke arsitektur
informasi, tujuan pengguna, tujuan bisnis, serta poin masuk dan keluar. Pastikan ada navigasi
dan konten dalam daftar tersebut untuk mendukung tujuan. Setelah memiliki daftar isi, perlu
memprioritaskan tinjauan setiap item pada daftar konten terhadap tujuan layar dalam urutan
prioritas.

ISYS6509 – User Experience

 Gambar 2. a site map for a basic website blog functionality

Mulai Menggambar

Setelah mengetahui apa yang dan mengapa hal itu perlu dilakukan, saatnya untuk membuat
beberapa tanda, apakah dengan membuat sketsa di atas kertas atau dengan membuka
diagram. Ketika mulai menggambar, mungkin merasa ada yang tidak perlu masuk ke daftar isi
prioritas. Beberapa item dalam daftar mungkin perlu dikelompokkan secara logis dan ini akan
mengganggu tatanan disain.

Bila membuat rangka gambar, cobalah untuk menjawab sejumlah pertanyaan berikut ini:

a. Bagaimana arsitektur informasi diterjemahkan ke dalam struktur navigasi?

b. Bagaimana desain halaman dapat mendukung informasi untuk pengguna melalui situs?

c. Apakah dibutuhkan menu panggilan tindakan atau menu help (contact) dan bagaimana
hal itu dapat dibuat menonjol dan lebih terlihat?

d. Apa yang harus di tampilkan di bagian atas halaman?

e. Apakah akan ada lebih dari satu kolom?

ISYS6509 – User Experience

Setiap item pada prioritas daftar konten, dibuat blok pada rangka gambar yang berfungsi
sebagai:

1. Mewakili gambar dengan persegi panjang abu-abu

2. Mewakili item navigasi dengan teks yang akurat

3. Gunakan judul yang mewaikili

4. Gunakan teks nyata atau dummy untuk konten

5. Mock up bentuk tombol dengan persegi panjang dan bentuk lainnya

Pedoman Penggunaan Dummy:

a. Gunakan konten nyata yang tersedia.

b. gunakan copy sebenarnya untuk item navigasi.

c. gunakan copy aktual atau indikasi untuk judul dan sub-judul.

d. Ketika isi yang sebenarnya tidak tersedia, gunakan teks dummy, tapi mulai
dengan pengenalan jenis konten yang diperlukan. Tambahkan konten nyata jika
telah tersedia.

e. gunakan contoh konten nyata untuk tabel data dan harus yakin bahwa tata letak
dapat diatasi dengan format data asli.

f. Pastikan melibatkan tim konten dalam proses wireframing. Pastikan hal itu untuk
menghasilkan copy sesuai pengguna dan kebutuhan bisnis, bukan hanya untuk
menyesuaikan template gambar.

ISYS6509 – User Experience

 Gambar 3. Wireframe with annotations submitted from home page design

Annotations untuk Wireframes

Ada banyak jenis catatan yang dapat ditambahkan ke wireframes. Yang terbaik untuk proyek
umumnya akan tergantung pada siapa dan mengapa menggunakan wireframes. Pastikan nama
dan detail kontak berada di suatu tempat pada wireframes sehingga orang dapat menghubungi
jika mereka membutuhkannya.

Berikut adalah beberapa penjelasan untuk mempertimbangkan wireframes:

1. Tujuan layar pengguna

2. Tujuan layar bisnis

ISYS6509 – User Experience

 3. Entry dan exit point

4. Deskripsi fungsional dari interaksi atau spesifikasi teknis rinci

5. Storyboard sebagai kunci interaksi atau riwayat pengguna

6. Alasan untuk keputusan desain

7. Arahan copy

8. Arahan gambar

9. Arahan media lain (seperti video, klip suara, atau panorama)

Share, Test, Iterate, Dan Perbaikan

Bila memiliki wireframes dan saatnya untuk diuji, bagikan dengan rekan atau klien.

 Apakah mereka mengerti fungsi masing-masing layar tersebut?

 Dapatkah mereka memahami alur produk seperti penjelasan Anda?

 apakah visualisas menyampaikan pesan yang tepat?

Lihat wireframes bersama-sama. Pada setiap tahap, apa yang user lakukan dan pikirkan.

 Apa yang mereka tahu?

 Apa yang mereka perlu tahu?

 Bagaimana tanggapan mereka?

 Apakah desain tersebut memenuhi kebutuhan mereka?

Anggota tim: desainer visual, pengembang, konten dan tim penyalin, SEO ahli, ahli analisis,
spesialis aksesibilitas, dan spesialis produk.

ISYS6509 – User Experience

Menyajikan Wireframe

Libatkan pengguna dalam menggambar draft. Jelaskan bahwa mereka berkontribusi terhadap
proses wireframing dan bahwa hasil akhirnya akan terlihat seperti gambar 4.

Gambar 4. Live home page design

Cari metafora yang kuat untuk menyampaikan perbedaan antara wireframes dan desain akhir
proyek. Beritahu peserta bahwa wireframes bukan representasi akhir grafis dari situs.
Libatkan desainer-visual jika ada waktu dan anggaran-untuk memberikan mock-up desain
untuk menunjukkan perbedaan antara wireframes dan desain akhir.

ISYS6509 – User Experience

Practical Guide

Sketsa di atas kertas, karena itu adalah cara cepat membuat sketsa. Setelah memiliki sketsa
di atas kertas, saatnya untuk membuka alat gambar. Memilih alat untuk menciptakan
wireframes. Berikut beberapa tool yang dapat digunakan:

a. Untuk pengguna Windows, Visio populer, Power Point, Photoshop.

b. Balsamiq tersedia pada Mac, Windows, Linux, dan online.

c. Axure tersedia untuk kedua Mac dan PC, alat diagram profesional

Tips wireframing

Berikut adalah beberapa tips praktis untuk memulai wireframe

1. Set up Template, untuk memastikan rangka gambar konsisten dan jelaskan kepada
orang lain.

2. Housekeeping, pemanfaatan halaman dan judul halaman mungkin menjadi hal terakhir
yang perlu diperhatikan

3. Stensil, Perpustakaan, dan Pola. Ada beberapa sumber wireframing besar yang
tersedia di Internet. Mengeksplorasi dan menemukan orang-orang yang terbaik.

ISYS6509 – User Experience

 KESIMPULAN

1. Wireframe merupakan pra-prototipe dapat dikerjakan diatas kertas dengan

memprioritaskan pada kontent dan konteks dari webpage atau aplikasi yang sedang
dikembangkan

2. Sebelum menjadi sebuah produk webpage atau aplikasi dekstop, Wireframe perlu
diuji bersama antara team pengembang dan para pengguna.

ISYS6509 – User Experience

 DAFTAR PUSTAKA

Textbooks
Russ Unger, Carolyn Chandler (2012). A Project Guide to UX Design: For
User Experience Designers in the Field or in the Making. New
Riders Publishing Thousand Oaks, ISBN-13: 978-0321607379. Chapter 12, 13

ISYS6509 – User Experience