Rancangan prototype user interface
Dalam merancang suatu sistem dalam memenuhi kebutuhan user maka dibutuhkan yang namanya desain UI(User Interface). Dalam melakukan perancangan UI tahapan perancangan UI dapat dibagi menjadi beberapa yaitu:
· Sketsa/coretan merupakan gambaran kasar dalam meracang tampilan suatu sistem maupun aplikasi. Sketsa merupakan rancangan paling sederhana yang bisa dilakukan oleh seorang designer. Bahkan user pun bisa membuat suatu sketsa mengenai rancangan desain interface atau tampilan yang mereka inginkan. Sketsa biasanya dilakukan hanya menggunakan pulpen dan kertas. Pada sketsa inilah dapat dituangkan semua ide-ide mengenai tampilan suatu sistem.
Sketsa ini berupa coretan mengenai desain UI. Sketsa yang sudah dibuat bisa diuji. Misalnya mengenai urutan dari tiap tampilan yang ada ketika user melakukan suatu aksi. Evaluasi dalam sketsa sangat mudah dan murah karena hanya mengandalkan pulpen dan kertas. Suatu sketsa dapat dievaluasi baik oleh suatu team maupun oleh user. User dapat berperan dalam memberikan evaluasi mengenai sketsa yang dibuat apakah sesuai dengan keinginan user atau tidak.
· Wireframe merupakan gambaran mengenai tampilan,struktur, maupun komponen dalam sebuah konten di suatu sistem. Pada wireframe ini desain bersifat static. Beberapa aplikasi yang dapat digunakan untuk membuat wireframe diantaranya adalah Balsamiq, Axure, Indesign dan lain sebagainya yang dapat membantu dalam membuat rancangan interface sistem. WireFrame biasanya hanya memiliki warna putih maupun hitam.
Wireframe dibuat mennggunakan suatu aplikasi maupun web sehingga disebut sebagai computer prototype. Pentingnya suatu wireframe dibuat adalah saat terjadi error maupun penggantian maka tidak perlu menggunakan effort yang besar seperti saat telah sampai kepada mockup. Error didapat melalui evaluasi wirefrazme apakah sesuai dengan kebutuhan user. Kelebihan dari wireframe ini adalah memnggambarkan layout umum dari suatu sistem maupun aplikasi, membangun kepercayaan user maupun stakeholder, menghemat waktu dan biaya.
· Mockup merupakan tahap selanjutnya dalam merancang interface suatu sistem. Mockup dibuat berdasarkan desain wirframe yang telah dibuat sebelumnya mencakup warna, gambar maupun font yang dipilih untuk melengkapi wireframe yang telah dibuat sebelumnya. Sama sepert wireframe mockup juga merupakan desain yang bersifat statis.
Pada mockup sudah berisi gambar, warna , maupun typography dari interface sistem yang akan dibangun. Yang perlu diperhatikan saat membuat mockup adalah buatlah desain interface dengan pilihan warna yang sesuai tidak terlalu mencolok dan engganggu user nantinya. Selain itu perlu diperhatikan mengenai gambar animasi maupun video yang dimasukkan ke dalam suatu sistem apakah sesuai atau tidak.
Prototipe merupakan tahapan akhir dalam merancang suatu interface dalam sebuah sistem dimana user dapat merasakan bagaimana sebenarnya suatu sistem itu digunakan. Prototipe merupakan langkah selanjutnya setelah mockup. Prototipe dapat diklik maupun digeser. Jadi prototype ini mensimulasikan bagaimana user berinteraksi dengan interface yang telah dirancang untuk memenuhi kebutuhan user.
Pada saat membuat prototipe dimana prototype ini meruppakan gambaran visual yang dinamis mengenai bagaimana user dapat berinnteraksi dengan interface yang dibangun. Pada saat membuat prototype perlu diperhatikan mengenai letak dan posisi dari ikon-ikon yang akan digunakan pada sistem. Ikon-ikon yang dibuat haruslah konsisten dan membantu user bukan sebaliknya menyusahkan user menggunakan interface yang telah dibangun. Pemilihan urutan tampilan halaman interface juga perlu untuk diperhatikan apakah sesuai atau tidak maka perlu dilakukan evaluasi mengenai prototype bersama dengan team dan juga terlebih dengan user.
Sumber:
http://melissakeizer.com/wp-content/uploads/2012/10/6UP.jpg
https://www.angon.co.id/news/android/cara-cara-membuat-mockup
https://www.aanwar.web.id/2017/04/aplikasi-prototipe-online-gratis.html
