Perbedaan UI dan UX

UI (User Interface) dan UX (User Experience) sering disalahpahami karena mereka saling berkaitan, tetapi sebenarnya berbeda.

• UI itu tampilan yang dilihat dan digunakan orang saat berinteraksi dengan sebuah produk, seperti website atau aplikasi. Jadi, UI lebih ke desain tampilan: warna, font, tombol, gambar, dan layout.
• UX lebih fokus ke pengalaman orang saat menggunakan produk tersebut. Ini tentang bagaimana perasaan pengguna saat berinteraksi, apakah mudah digunakan, apakah menyenangkan, atau malah bikin frustrasi.

Bayangkan kamu pergi ke sebuah restoran.

• UI: Ini seperti bagaimana dekorasi restoran itu, desain menu, tata letak meja, dan bagaimana makanannya disajikan. Apakah restoran itu enak dilihat dan menarik?
• UX: Ini seperti pengalamanmu saat makan di sana. Apakah pelayanannya cepat? Apakah kamu mudah menemukan meja? Apakah makanannya sesuai ekspektasi dan enak?

Jadi, UI adalah apa yang kamu lihat, sedangkan UX adalah bagaimana perasaanmu tentang keseluruhan pengalaman.

Misalnya, kamu menggunakan aplikasi e-commerce.Jika UI-nya bagus, tombolnya jelas, gambarnya menarik, dan font-nya enak dibaca, ini membuat kamu betah.
Tapi kalau UX-nya buruk, seperti proses checkout yang membingungkan, butuh waktu lama untuk menemukan produk, atau loading terlalu lama, kamu mungkin akan meninggalkan aplikasi itu meskipun tampilannya bagus.

Jadi UI dan UX harus bekerja sama agar produk itu enak dilihat dan digunakan.

PROTOTYPING

Prototyping 

Prototipe merupakan suatu metode dalam pengembangan sistem yang menggunakan pendekatan untuk membuat sesuatu program dengan cepat dan bertahap sehingga segera dapat dievaluasi oleh pemakai. Prototipe mewakili model produk yang akan dibangun atau mensimulasikan struktur, fungsionalitas dan operasi sistem. Dalam pembuatan prototipe kita dapat menerapkan UCD (User Centered Design) yang cocok untuk user awam IT (Technology Information).

Tujuan prototipe yaitu :  

• Evaluasi dan feedback pada rancangan interaktif.
• Stakeholder (dalam hal ini user) dapat melihat, menyentuh, berinteraksi dengan prototype. 
• Anggota tim dapat berkomunikasi secara efektif. 
• Para perancang dapat mengeluarkan ide-idenya. 
• Memunculkan ide-ide secara visual dan mengembangkannya. 
• Dapat menjawab pertanyaan membantu pemilihan di antara alternatif-alternatif. 
• Mendapatkan informasi dan pemahaman tentang pengalaman pengguna. 
• Estimasi dan validasi tentang kesulitan perancangan, keputusan dan keuntungan biaya. 
• Investigas, explorasi dan pembandingan solusi perancangan yang berbeda

Tahapan pembuatan prototype seperti pada gambar berikut : 

Keunggulan menggunakan prototipe yaitu :

• Adanya komunikasi yang baik antara pengembang dan pelanggan 
• Pengembang dapat bekerja lebih baik dalam menentukan kebutuhan pelanggan 
• Pelanggan berperan aktif dalam pengembangan sistem 
• Lebih menghemat waktu dalam pengembangan sistem 
• Penerapan menjadi lebih mudah karena pemakai mengetahui apa yang diharapkannya. 
• Mengurangi biaya pengembangan dan pemeliharaan 
• Dapat bereksperimen dengan perancangan alternatif 
• Meningkatkan kualitas, kecepatan spesifikasi dan perancangan sistem 
• Dapat dipadukan dengan metode terstruktur dan CASE tools 10. 
• Dapat digunakan pada berbagai level, detail termasuk konsep, kebutuhan, spesifikasi dan perancangan.

Kelemahan prototipe yaitu : 

• Pelanggan kadang tidak melihat atau menyadari bahwa perangkat lunak yang ada belum mencantumkan kualitas perangkat lunak secara keseluruhan dan juga belum memikirkan kemampuan pemeliharaan untuk jangka waktu lama 
• Pengembang biasanya ingin cepat menyelesaikan proyek. Sehingga menggunakan algoritma dan bahasa pemrograman yang sederhana untuk membuat prototyping lebih cepat selesai tanpa memikirkan lebih lanjut bahwa program tersebut hanya merupakan cetak biru sistem .
• Hubungan pelanggan dengan komputer yang disediakan mungkin tidak mencerminkan teknik perancangan yang baik 

Metode Prototyping

Metode pembuatan prototipe dibedakan menjadi 2 yaitu :

1. Metode Non-Computer. Metode ini biasanya dikerjakan lebih awal dalam proses pembuatan. Jenis metode non-computer yaitu : Sketsa,Mock-Ups, Storyboarding, Skenario, 
2. Metode Computer-Based. Metode ini biasanya dikerjakan kemudian. Sifat metode computer-based yaitu: 

• Menirukan lebih banyak kemampuan sistem. 
• Pada umumnya hanya baru beberapa aspek atau fitur 
• Dapat berpusat pada lebih banyak detail 
• Para pemakai lebih segan untuk menyarankan perubahan sekali ketika mereka melihat prototype yang lebih realistis. 
• Prototipe cepat digambarkan sebagai suatu metode berbasis komputer yang dapat membantu untuk mengurangi iterasi siklus pengembangan 
• Prototipe interaktif dikembangkan agar dapat dengan cepat diganti atau diubah sejalan dengan umpan balik perancangan. 
• Umpan balik ini dapat diperoleh dari kolega atau dari pengalaman pengguna selama bekerja dengan prototipe untuk menyelesaikan tugasnya.

Terminologi Prototipe

1. Prototipe horizontal

• Mencakup seluruh antarmuka pengguna namun tanpa fungsi pokok, berupa simulasi dan belum dapat digunakan untuk melakukan pekerjaan yang sesungguhnya. 
• Misal, pengguna dapat mengeksekusi seluruh navigasi dan perintah pencarian tapi tanpa memanggil informasi secara nyata. 
• Mengurangi level fungsionalitas, tetapi semua fitur ada. 

2. Prototipe vertikal

• Lebih sedikit aspek atau fitur dari interface yang disimulasikan, tetapi dilaksanakan dengan rincian yang sangat baik. 
• Misal: dalam sistem informasi penerbangan, pengguna dapat mengakses suatu basisdata dengan data real dari penyedia informasi, tetapi tidak untuk keseluruhan data. 
• Mempunyai performance lebih rendah daripada sistem akhir.
• Tidak dalam jaringan  

3. Low-fidelity prototyping

(prototipe dengan tingkat ketepatan yang rendah) Fidelity mengacu pada tingkat kerincian dengan produk akhir. Low fidelity mempunyai karakteristik antara lain : 

• Gambaran cepat dari sistem akhir 
• Mempunyai fungsi atau interaksi yang terbatas 
• Lebih menggambarkan konsep, perancangan, alternatif dan layout layar dibanding model interaksi pengguna dengan sistem 
•  Mendemostrasikan secara umum ‘feel and look ‘ dari antarmuka pengguna. 
• Tidak untuk memperlihatkan secara rinci bagaimana operasi sistem aplikasi. - Digunakan pada awal siklus perancangan 
• Memperlihatkan konsep pendekatan secara umum tanpa harus membuang banyak tenaga, biaya dan waktu. 

Contoh Low Fidelity Prototyping

4. Mid-fidelity prototyping (prototipe dengan tingkat ketepatan sedang) 

• Form skematik. 
• Navigasi dan fungsi yang disimulasikan biasanya berbasis pada apa yang tampil pada layar atau simulasi layar. 
• Contoh tools yang digunakan: powerpoint, illustrator, Photoshop, dll

5. High-fidelity prototyping (prototipe dengan tingkat ketepatan yang tinggi)

• Mempunyai interaksi penuh 
• Pengguna dapat memasukkan data ke dalam medan masukan, menanggapi pesan, memilih ikon untuk membuka window, berinteraksi dengan UI 
• Mewakili fungsi-fungsi inti dari antarmuka pengguna produk 
• Dapat mensimulasikan sebagian besar fungsi sistem akhir. 
• Umumnya dibuat dengan 4GLs seperti Smalltalk atau bahasa pemrograman berbasis visual seperti Visual basic. 
• Trade off kecepatan dengan ketelitian 
• Tidak secepat dan semudah membuat prototipe low-fidelity 
• Mewakili antarmuka pengguna yang akan diimplementasikan dalam produk akhir 
• Mempunyai penampilan yang sangat mirip dengan produk aktual 

contoh High fidelity prototype dengan metode computer based menggunakan axure: https://93e5xo.axshare.com/#p=welcoming 

Nah, sekarang Anda sudah mengetahui metode dan klasifikasi prototype, coba beri ulasan singkat berdasarkan pemahaman anda perbedaan antara low fidelity prototype dengan high fidelity prototype pada kolom komentar dibawah.