Tahapan Dalam Pembuatan User Interface


Gambar Computerhope

User Interface adalah sebuah tampilan yang digunakan pengguna untuk berinteraksi dengan komputer, tablet, smartphone maupun perangkat elektronik lainnya melalui tampilan yang dapat dimengerti oleh pengguna.

   Gambar UI Garage

Sebelum produk Anda masuk ke dalam tahap pembuatan user interface, ada beberapa hal yang harus Anda persiapkan terlebih dahulu, yaitu:

  1. Menentukan masalah yang ingin Anda selesaikan
  2. Mengenali pengguna produk Anda
  3. Melihat apa yang telah dilakukan pesaing di bidang produk Anda
  4. Mengumpulkan persyaratan produk secara keseluruhan

Setelah Anda selesai melakukan persiapan, langkah berikutnya adalah membuat Wireframe, Mockup, dan Prototype.

Wireframe

Gambar Mockplus

Wireframe merupakan sebuah sketsa kasar tampilan aplikasi atau website. Biasanya digunakan untuk menyusun tata letak awal dalam suatu desain. Wireframe ini bisa dicoret-coret tangan atau menggunakan tools atau aplikasi khusus bikin wireframe. Biasanya wireframe dibuat dengan warna hitam putih yang lebih menekankan isi dari kontennya.

Mockup

Gambar Github

Mockup memberikan gambaran secara detail sebelum produk dibuat dengan menyampaikan aspek desain visual, termasuk gambar, warna, dan tipografi. Mockup dapat mengorganisir detail dari proyek, menerjemahkan ide ke dalam bahasa yang dapat dimengerti stakeholders, menyampaikan ide kepada anggota tim, implementasi desain, dan melihat perspektif user. Mockup bersifat statis dan tidak bisa dioperasikan.

Prototype

 

Gambar Medium

Prototype adalah sebuah simulasi interaksi antara pengguna dan tampilan (interface) dimana user atau pengguna dapat melihat dan berinteraksi dengan user interface secara langsung. Mungkin tidak tampak persis seperti produk akhir, tetapi mendekati desain produk real-nya. Dengan ini harapannya kita mendapat masukan dari pengguna, bagian mana yang mudah dimengerti dan bagian mana yang susah mengerti atau bahkan bingung.

Wireframe, mockup, dan prototype memiliki ciri khasnya masing-masing. Penggunaannya dapat disesuaikan dengan kebutuhan. Satu hal yang penting untuk diingat yaitu: buatlah wireframe, mockup, atau prototype dengan memikirkan user experience.

 

Referensi

Grace. 2017. Basic UI/UX Design Concept Difference Between Wireframe, Prototype, and Mockup. [Online] Available at :https://www.mockplus.com/blog/post/basic-uiux-design-concept-difference-between-wireframe-prototype [Accessed June 7, 2018]

Tanudjaja, Christy. 2018. Perbedaan Wireframe, Mockup Dan Prototype. [Online] Available at :https://sis.binus.ac.id/2018/01/19/perbedaan-wireframe-mockup-dan-prototype/ [Accessed June 7, 2018]

Treder, Marcin. 2016. Wireframing, Prototyping, Mockuping – What’s the Difference?. [Online] Available at :https://designmodo.com/wireframing-prototyping-mockuping/ [Accessed June 7, 2018]

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.