UI/UX

Wireframe, Annotation and Prototyping

WIREFRAME & ANNOTATION

Apakah Wireframe?

Wireframe dan Annotation adalah cara untuk mengidentifikasi konten dan struktur yang diusulkan pada sebuah desain, serta perilaku fungsional dari tampilan halaman web atau aplikasi. Ketika dikombinasikan dengan Site Map dan Task Flow, dokumen-dokumen ini juga sangat berguna untuk mengidentifikasi skenario prototipe dan bukti konsep. Wireframes biasanya disajikan dalam skala abu-abu, tidak ada elemen grafis atau konten akhir. Pada dasarnya, Wireframe digunakan sebagai alat untuk mengkomunikasikan desain Anda.

Wireframe pada dasarnya adalah prototipe low fidelity dari halaman website atau layar aplikasi, yang digunakan untuk mengidentifikasi elemen-elemen yang akan ditampilkan pada halaman atau layar, seperti: navigasi, bagian konten, gambar dan media lain, elemen-elemen form dan call to action (CTA).

Wireframe biasanya dibuat dalam warna hitam dan putih atau abu-abu, menggunakan placeholder untuk gambar, dan tidak menggunakan font yang spesifik. Wireframe hadir dalam berbagai bentuk dan ukuran, dari yang paling dasar hingga yang sangat canggih sampai meniru desain fullscreen.

Wireframe tidak hanya diberikan kepada desainer dan developer sebagai gambaran garis besar tugas mereka. Wireframe sekarang digunakan untuk merepresentasikan website atau aplikasi kepada klien, desainer, developer, dan anggota tim lainnya yang memiliki kepentingan di dalamnya. Saat ini umum untuk menunjukkan rancangan kepada klien untuk mendapatkan validasi, sebelum melangkah ke fase desain dan implementasi dimulai. Seringkali orang yang membuat Wireframe bekerja bersama tim yang menciptakan business requirement.

Perlu dicatat bahwa beberapa Wireframe dan Annotation terbaik adalah hasil dari interaksi langsung dan kolaborasi di antara berbagai mitra kerja (mulai dari business analyst hingga developer dan desainer lainnya). Dalam banyak kasus, Wireframe ditunjukkan kepada user sehingga mereka dapat memvalidasi elemen halaman atau meminta modifikasi. Wireframe yang ditunjukkan kepada user biasanya memiliki nama yang berbeda: prototipe.

Untuk membantu Anda mengidentifikasi pendekatan yang paling cocok untuk Anda, kita akan membahas dasar-dasar membuat Wireframe dan menunjukkan beberapa contoh. Contoh-contoh ini hanya permulaan, maka jangan takut untuk mengeksplorasi dan berinovasi sendiri.

Apakah Annotation?

Annotation adalah penjelasan dan catatan tentang suatu elemen atau interaksi pada Wireframe. Annotation biasanya berisi informasi seperti: content identification or labeling, content sources, display rules, interaction rules, interaction destinations, process rules dan error content/messaging.

Annotation yang baik adalah Annotation yang dibuat dengan nada yang sangat langsung dengan penjabaran yang jelas. Jangan tinggalkan resiko atau kerancuan apapun dalam sebuah Annotation, misalnya: ada perbedaan yang sangat besar antara kata “seharusnya (should)” dengan “akan (shall)“.

Contoh Annotation:
Buruk: Menekan tombol ini seharusnya menghasilkan tampilan Homepage.
Baik: Menekan tombol ini akan menghasilkan tampilan Homepage.

Siapakah Yang Menggunakan Wireframe?

Wireframe dapat digunakan oleh audiens yang beragam mulai dari satu orang hingga kombinasi dari beberapa kelompok.

  • Project Management
    Manajer proyek dapat menggunakan Wireframe sebagai bahan diskusi dalam tim untuk menyoroti strategi, kebutuhan teknologi, dan User Experience.
  • Business Analyst
    Business analyst dapat menggunakan Wireframe untuk memastikan bahwa requirement mereka terpenuhi dan untuk memvalidasi bahwa mereka tidak melewatkan requirement yang perlu dimasukkan.
  • Visual Designers
    Visual designer dapat menggunakan Wireframe sebagai blueprint untuk output kerja mereka. Wireframe memberi mereka penghitungan elemen halaman dan perilaku yang perlu dimasukkan.
  • Content Creator
    Copywriter, content strategist, editor dapat menggunakan Wireframe untuk memetakan ke matriks konten dan mengidentifikasi kebutuhan konten di seluruh proyek.
  • Search Engine Optimization (SEO) Specialist
    SEO specialist dapat menggunakan Wireframe untuk membantu mengidentifikasi skema penamaan yang tepat, kebutuhan copywriting, dan peningkatan untuk strategi SEO keseluruhan.
  • Developer
    Developer sering menggunakan Wireframe bersamaan dengan business requirement untuk memahami fungsi dan perilaku desain yang diharapkan. Dalam beberapa kasus, Wireframe dapat digunakan sebagai dasar untuk pembuktian konsep (proof of concept).
  • Quality Assurance
    Tim QA dapat menggunakan Wireframe sebagai dasar untuk pembuatan skrip pengujiannya. Begitu Wireframe telah disetujui oleh klien, variasinya harus minimal, dan ini memungkinkan tim QA untuk mulai mengerjakan tugas mereka lebih awal.
  • User
    User dapat melihat Wireframe dalam tahap yang sangat awal, kadang-kadang dalam bentuk “prototipe kertas,” sebagai mekanisme untuk menguji arah desain.
  • Client
    Client semakin lebih terlibat dalam peninjauan Wireframe untuk memvalidasi apakah business requirement, sasaran, dan tujuan dipenuhi dan untuk memberikan persetujuan untuk bergerak maju ke fase desain visual.

MEMBUAT WIREFRAME

Untuk membuat sebuah Wireframe, Anda memerlukan beberapa requirement. Requirement ini dapat berasal dari dokumen business requirement formal dari klien, ringkasan kreatif atau ringkasan proyek, catatan rapat, site map atau task flow yang dijabarkan dengan jelas, atau bahkan dari catatan arahan di selembar kertas. Prinsipnya, Anda memerlukan pemahaman tentang apa yang Anda coba ciptakan untuk user, termasuk pemahaman umum tentang keterbatasan dan harapan dari sisi teknologi.

Setelah Anda mengumpulkan informasi yang diperlukan, luangkan waktu untuk membaca dengan seksama semua requirement, ajukan pertanyaan dan pertimbangkan jawaban untuk memperoleh kejelasan tambahan.

Terkait tools yang digunakan untuk membuat wireframe, Anda dapat memilih aplikasi yang paling tepat dapat menggambarkan solusi yang Anda rancang. Anda dapat mulai membuat Wireframe dengan pensil dan kertas. Jadi Anda seharusnya tidak perlu merasa seolah-olah Anda harus segera memilih satu aplikasi, meskipun selanjutnya Anda perlu menerjemahkan sketsa ke bentuk digital.

Design the best solution, not the solution the tool can design.

Joel Marsh

Sangat jarang terjadi bahwa hasil kerja yang didesain diterima pada percobaan pertama. Oleh karena itu, mulailah dari yang kecil: ambil satu halaman atau sebagian kecil dari bagian proyek, review dulu dengan tim internal Anda, dan kemudian dengan klien Anda untuk memastikan bahwa pemahaman Anda sesuai jalur. Menjadikan desain Anda sejalan dengan cara klien dalam memikirkan tujuan bisnis mereka di depan akan menghemat banyak pekerjaan Anda ke depan. Pendekatan yang sama dapat diterapkan untuk merancang pengujian dengan user, gunakan Wireframe untuk melakukan validasi lebih awal.

Contoh Mendesain Sebuah Wireframe

Mengingat kembali Site Map dasar yang telah dibahas sebelumnya, dapat menujukkan struktur website yang sederhana

Gambar 1 Site map sebuah website sederhana dengan fitur blog

Pada Site Map di atas, terdapat tingkat hierarki navigasi. Setiap halaman X.0 yang teridentifikasi kemungkinan besar adalah halaman tingkat atas atau halaman primer. Anda dapat menggunakan ini sebagai titik awal untuk menentukan sebagian business requirement dan untuk Wireframe.

  • Home Page (bernomor 1.0) adalah tingkat navigasi teratas. Terms & Conditions (1.0.1) kemungkinan besar merupakan elemen footer yang umum, atau setidaknya tidak boleh dianggap sebagai bagian dari navigasi utama.
  • Elemen navigasi utama lainnya adalah About (3.0), Work (4.0), Contact (5.0), dan Blog (2.0–2.x) . Bagian Blog digambarkan sebagai sebuah pagestack, sehingga Anda dapat memastikan bahwa halaman ini dilihat sebagai beberapa halaman dinamis dan mungkin perlu memiliki navigasi “previous” dan “next”.

Elemen navigasi utama ini memberi Anda sedikit informasi untuk memulai kerja, tetapi itu tidak cukup lengkap untuk secara efektif diacu dalam membuat Home Page. Jadi, untuk membantu mengarahkan, klien memberikan beberapa informasi tambahan:

Perusahaan ini adalah firma User Experience Design yang telah memperoleh pendapatan karena kegiatan blogging-nya dan berbagai proyek yang telah dikerjakannya. Penting bagi pengunjung website perusahaan untuk dapat dengan cepat mempelajari tentang perusahaan dan website melalui teks yang terbatas dan citra yang kuat dan menggugah, bekerja sama dengan User Experience Design. Selain itu, penting bahwa navigasinya harus jelas (akan lebih baik jika header dan footer yang dapat digunakan kembali) dan bahwa ada call to action ke postingan blog terbaru sehingga pengunjung dapat dengan cepat membaca ringkasan blog terbaru tentang isu-isu seputar dunia User Experience. Lebih baik lagi jika dapat meng-highlight pekerjaan terbaru di Home Page, tetapi ini bisa menjadi prioritas pekerjaan kedua, karena sebagian besar pekerjaan sering berstatus sedang dalam pengembangan atau bersifat tertutup/rahasia.

Terdapat banyak cara untuk menerjemahkan requirement di atas, dan hasil Wireframe pertama dapat dipresentasikan seperti Gambar 2.

Gambar 2 Wireframe dengan Annotation untuk desain Home Page

Wireframe dengan Annotation merinci setiap elemen pada halaman Home Page, termasuk call to action dan tindakan yang diharapkan, misalnya loading ke halaman tertentu.

Gambar 3 di bawah ini adalah contoh desain live Home Page. Versi live ini tampak hanya memiliki sedikit perbedaan dari Wireframe pada Gambar 2 sebelumnya.

Gambar 3 Desain live Home Page www.userglue.com

Hasil akhir Anda akan sering memiliki berbagai perubahan kecil dan pembaruan dibandingkan dengan konten Wireframe Anda.

Pada Gambar 4 diberikan contoh Wireframe dengan Annotation, yang dibangun dengan aplikasi Axure.

Gambar 4 Wireframe dengan Annotation oleh Fred Beecher (Evantage Consulting)

Proses Sederhana Untuk Membuat Wireframe

Anda harus mulai membuat Wireframe dengan memiliki informasi sebanyak mungkin sehubungan dengan proyek Anda, berupa artefak seperti:

  • Business requirement
  • Design brief atau creative brief
  • Stakeholder interview
  • Research performed
  • Website analytics
  • Persona yang memiliki banyak informasi tentang user Anda
  • Site Map
  • User Flow atau Task Flow
  • Content strategy documentation
  • Statement of work
  • Dan artefak-artefak lain yang berhubungan dengan proyek.

Konsumsilah semua informasi di atas dengan baik. Selanjutnya Anda membutuhkan pensil dan kertas, kemudian membuat sketsa.

Dalam pembuatan sketsa, Anda perlu mengingat hal-hal berikut:

  • Membuat sketsa bukan tentang menggambar, sebaliknya adalah tentang desain. Sketsa adalah alat penting yang dapat membantu desainer untuk mengekspresikan, mengembangkan dan mengkomunikasikan ide desain.
  • Adanya sketsa (sebelum ke desain digital), memungkinkan Anda untuk dengan cepat mengeksplorasi berbagai ide, memperluas ide-ide yang tampaknya bekerja paling baik untuk proyek Anda, dan kemudian membuang yang tidak berfungsi.
  • Membuat sketsa juga memungkinkan Anda untuk terus meningkatkan detail yang Anda rancang (bisa melalui pitching dan kritik dari berbagai audiens di tim internal, klien, stakeholder, user). Setelah Anda merasa nyaman dengan sketsa Anda, Anda dapat membuka aplikasi di komputer dan mulai membuat penyempurnaan desain.
  • Saat membuat sketsa, Anda tidak perlu menjadi seniman dan tidak harus pandai menggambar. Jika Anda bisa menggambar lingkaran, bujur sangkar, persegi panjang, garis lurus dan segitiga, artinya Anda mampu membuat sketsa.

Gambar 6 menunjukkan bahwa Anda tidak perlu pintar menggambar untuk dapat membuat sketsa kasar.

Gambar 6 Contoh Sketsa dengan gambar tangan

Hasil sketsa kemudian didesain ke bentuk digital, dapat menggunakan berbagai pilihan aplikasi, sesuai dengan kebutuhan Anda. Contohnya dapat dilihat pada Gambar 7, wireframe yang didesain dengan aplikasi Balsamiq.

Gambar 7 Hasil sketsa yang telah didesain menjadi Wireframe

Aplikasi digital memungkinkan Anda bisa bekerja pada detail yang spesifik, spacing yang lebih baik, alignment dan menambahkan lebih banyak kejelasan dari sketsa Anda.

Wireframe selanjutnya dapat diubah menjadi obyek yang memiliki visual design, seperti Gambar 8.

Gambar 8 Wireframe dengan sentuhan desain visual

Wireframe vs Prototype

Ketika akan memilih antara membuat Wireframe atau Prototype, Anda tidak perlu berdebat, tetapi pilihkan pendekatan mana yang baik dengan mempertimbangkan hal berikut:

  • Mana yang membuat Anda nyaman ketika menggunakannya dan dibagian mana Anda punya pengetahuan yang baik?
  • Apa yang nyaman digunakan klien Anda untuk di-review?
  • Mana yang tersedia sesuai dengan waktu, sumber daya dan budget?

Maka pendekatan mana pun yang Anda gunakan, prinsipnya adalah pakailah yang mana yang berjalan sesuai dengan baik pada situasi sekarang. Terlepas dari pendekatan mana yang Anda pilih, Anda harus mengawalinya dengan membuat sketsa terlebih dahulu.

PROTOTYPING

Prototyping adalah cara yang efektif untuk menguji dan memvalidasi fungsi dan desain yang diusulkan sebelum berinvestasi dalam development/ implementasi. Prototyping juga merupakan cara yang baik untuk bereksperimen dan membuat ide dengan tim Anda dan / atau klien Anda, terutama ketika berhadapan dengan flow halaman website atau interaksi yang kompleks. Anda dapat menggunakan sejumlah tool dan pendekatan untuk membuat prototipe. Metode Anda sebagian besar akan ditentukan oleh tiga faktor:

  • Tujuan atau maksud dari prototipe Anda. Apa yang ingin Anda capai melalui pembuatan prototipe? Siapa audiens yang dituju?
  • Sumber daya (alat, bahan, dan keterampilan) yang Anda miliki untuk Anda gunakan dalam pengembangan prototipe.
  • Timeline Anda. Anda harus menyelesaikan tepat waktu.

Dalam konteks User Experience Design (UX Design), Prototyping adalah tindakan atau seni membuat, meniru, atau menguji semua atau sebagian fungsi aplikasi atau website dengan user.

Prototipe dapat dibuat dibuat dalam bentuk analog (seperti dengan whiteboard atau pensil dan kertas) atau dalam bentuk digital (dengan PowerPoint atau Keynote, Microsoft Visio, Omnigraffle, Axure, HTML, atau aplikasi lainnya).

Prototipe harus menjadi proses iteratif karena prototipe umumnya diciptakan untuk mengidentifikasi masalah atau memvalidasi masalah yang berkaitan dengan User Experience. Setelah Anda mengumpulkan feedback, Anda dapat membuat modifikasi pada prototipe untuk pengujian tambahan.

Harus diingat bahwa prototyping adalah suatu proses, bukan artefak. Hasil dari proses prototyping adalah feedback internal atau eksternal pada konsep untuk menambah dan meningkatkan hasil desain Anda.

Berapa Banyakkah Prototipe yang Diperlukan?

Prototyping tidak harus dilakukan untuk seluruh halaman website atau aplikasi. Prototyping bisa sangat efektif ketika menggunakan sampling yang representatif dari
sebuah sistem; dengan kata lain, Anda tidak perlu membuat simulasi dari keseluruhan sistem. Anda hanya perlu mensimulasikan bagian-bagian penting dan / atau interaksi yang penting. Dalam kebanyakan kasus, Anda ingin menguji beberapa konsep dan prototipe Anda cukup hanya mencakup konsep-konsep itu saja.

Metode pembuatan prototipe yang Anda pilih akan sangat tergantung pada waktu dan bahan yang tersedia untuk Anda, serta audiens target Anda dan tingkat adaptasinya terhadap teknologi. Ada beberapa metode populer yang tersedia untuk memenuhi kebutuhan Anda, yaitu: paper prototyping dan digital prototyping. Anda dapat membaca penjelasan tentang paper prototyping dan digital prototyping pada artikel ini.

Contoh Prototipe

Anda dapat membandingkan Paper Prototype pada Gambar 9 dengan hasil akhir design website pada Gambar 10.

Gambar 9 Paper Prototype yang digunakan untuk menjelaskan konsep navigasi kepada development team
Gambar 10 Design website berdasarkan paper prototype

Apakah yang Terjadi Setelah Prototyping?

Setelah Anda menyelesaikan proses pembuatan prototipe, Anda perlu mensinkronisasi hasilnya dan mengubahnya menjadi sesuatu yang dapat ditindaklanjuti. Jika Anda membuat Paper Prototype, Anda mungkin perlu mulai membuat Wireframe digital berdasarkan feedback yang Anda terima. Jika Anda sudah berada dalam mode Wireframe digital, Anda mungkin perlu memperbarui Wireframe Anda dan melanjutkan proses proyek Anda. Atau, Anda mungkin perlu menerima feedback dan memperbarui prototipe Anda untuk iterasi berikutnya.

Prototipe adalah cara untuk mencapai satu atau lebih dari tujuan berikut:

  • Bekerja melalui desain
  • Membuat platform komunikasi umum
  • Menjual ide-ide desain Anda secara internal, misalnya kepada atasan Anda, desainer lain, dll
  • Melakukan uji kelayakan teknis
  • Melakukan uji konsep desain dengan end user atau customer

Prototyping berfungsi sebagai mekanisme feedback. Melalui pembuatan prototipe, Anda dapat menentukan apakah akan melanjutkan dengan arah desain tertentu atau harus melakukan eksplorasi yang berbeda, sebelum melanjutkan ke fase berikutnya dari proyek Anda.

Prototyping hanyalah bagian dari proses, dan seperti bagian lainnya, Anda perlu menyadari kapan Anda telah mencapai titik efektivitas maksimum dan siap untuk pindah ke tahap selanjutnya dari proses User Experience.

REFERENSI

  • Unger, R, Chandler, C, 2012. A Project Guide to UX Design: For User Experience Designers in the Field or in the Making (2nd Edition). Berkeley: New Riders.
  • Feature Image: Photo by UX Store on Unsplash

Hits: 2842

Similar Posts