Mengidentifikasi Rancangan User Interface PART 2

 User Interface (UI) dan User Experience (UX)

    UI adalah desain antarmuka yang lebih memfokuskan pada keindahan dari sebuah tampilan, pemilihan warna yang baik dan pas dan hal-hal lainnya yang membuat tampilan web ecommerce yang kita miliki lebih enak dipandang mata dan membuat pengujung betah berlama-lama.

    UX merupakan desain yang digunakan untuk meningkatkan kepuasan dari pengguna website melalui kesenangan dan kegunaan yang diberikan dalam interaksi antara pengguna internet atau pengunjung dan produk. UX inilah yang berfungsi untuk membuat website ecommerce anda menajdi lebih mudah dan tidak membingungkan pengguna.

UI vs UX Design

❖  UI lebih mementingkan tampilan permukaan dan keseluruhan nuansa desain.

❖  UX lebih mencakup kepada seluruh spektrum pengalaman pengguna

    Jika kita ingin agar pengguna menyukai perangkat lunak kita, kita harus mendesainnya agar berperilaku seperti yang disukai orang: penuh respek, murah hati, dan bermanfaat”. (Alan Cooper, software designer and programmer)

Referensi:

-       interaction-design.org

User Interface (UI)

    Gambar diatas memperlihatkan ranah utama dari user interface yang terdiri dari interface design, grafis, icon, dan visual design. User interface designer akan mampu memproduksi 4 hal diatas dengan sangat baik. Tujuan utama dari UI adalah menampilkan interface yang memiliki keseragaman yang baik dari segi warna, font, gambar dll.

User Experience (UX)

UX Design adalah proses untuk membuat product yang telah kita buat menjadi mudah untuk digunakan dan tidak membingungkan ketika digunakan oleh user.

User experience memiliki ranah yang lebih luas dari UI, karena ranah UX ini dimulai dengan research pasar sampai kemudian diimplementasi kedalam sebuah interface.

Perbedaan UI dan UX

Beda UI dan UX adalah dari fungsinya, jika UI lebih berfungsi untuk membuat desain web ecommerce menjadi lebih indah. UX merupakan desain yang digunakan untuk meningkatkan kepuasan dari pengguna website melalui kesenangan dan kegunaan yang diberikan dalam interaksi antara pengguna internet atau pengunjung dan produk.

Prinsip Utama Desain UI

❖  User compatibility

❖  Product compatibility

❖  Task compatibility

❖  Work flow compatibility

❖  Consistency

❖  Familiarity

❖  Simplicity

User compatibility: Antarmuka merupakan cara masuk ke sebuah sistem.

Product compatibility: Aplikasi yang sesuai dengan sistemnya pada interface berbeda dengan sistem yang manual yang menghasilkan hasil yang lainnya.

Task compatibility: Aplikasi yang membantu para pemakai dalam menyelesaikan pekerjaannya.

Work flow compatibility: Sistem manual yang terdapat langkah kerjanya dalam hal penyelesaian tugas.

Consistency: Sistem yang konsisten dengan sistem yang ada sesuai barangnya yang di dasarkan kepada setiap sifat dari semua orang yang berbeda.

Familiarity: Memberikan tampilan yang terkesan kepada pemakai.

Simplicity: Memberikan sistem sederhana yang tidak membuat si pemakai kebingungan.

Contoh Familiarity

❖  Memberikan tampilan yang familiar terhadap user.

❖  Tampilan awal twitter.com sangatlah familiar di mata user dan tidak membingungkan.

Contoh Simplicity

❖  Kesederhanaan perlu diperhatikan pada saat membangun antarmuka.

❖  Tidak selamanya antarmuka yang memiliki menu banyak adalah antarmuka yang baik.

❖  Kesederhanaan di sini lebih berarti sebagai hal yang ringkas dan tidak terlalu berbelit.

User akan merasa jengah dan bosan jika pernyataan, pertanyaan dan menu bahkan informasi yang dihasilkan terlalu panjang dan berbelit.

User lebih menyukai hal-hal yang bersifat sederhana tetapi mempunyai kekuatan/ bobot.

Bagaimana dengan User Interface ini?

Wireframing

Apa itu Wireframing?

❖  Wireframe adalah kerangka dasar/blueprint dari halaman web yang akan kita bangun.

❖  Secara garis besar di dalam wireframe ini kita menempatkan elemen-elemen penting dari halaman web tersebut pada posisinya masing-masing seperti banner, body content, menu link, kolom, footer maupun fitur-fitur lainnya yang ada dalam web nantinya.

Pertimbangan Pemanfaatan Wireframe

❖  Membuat wireframe kita membantu client untuk fokus pada kerangka utama dari membangun halaman web tersebut.

❖  Dengan wireframe yang hanya berupa kotak hitam-putih akan lebih mudah bagi kita untuk mendeteksi apa yang tidak bekerja dari sisi usability dan fungsionalitas.

❖  Minimalisasi revisi

    Dengan wireframe kita bisa menggiring client untuk fokus pada fitur, elemen dan posisinya dalam web tanpa terganggu perhatiannya oleh warna, typografi atau elemen desain lainnya.

Ibarat rumah wireframe menyajikan layout rumah dalam bentuk draftnya dimana posisi kamar tamu, kamar tidur, kamar mandi, teras, dapur. Sehingga akan mudah bagi client untuk melihat sisi fungsionalitas dan usabilitynya.

Contoh Wireframe

Tugas pertama web designer itu adalah membuat rancangan layout website, misalnya sekedar membuat wireframe dengan coret-coret di kertas atau dengan tools atau mungkin langsung membuat di photoshop. Ini adalah contoh saat saya membuat wireframing di balsamiq mockups.

Contrast

❖  Memberikan petunjuk kepada informasi inti

❖  Membantu mata menuju ke hal yang penting

❖  Membantu skimming

Urutan Komponen Dialog

❖  Komponen Dialog: urutan di mana informasi ditampilkan ke pengguna dan diperoleh dari pengguna.

❖  Pedoman utama desain dalam dialog adalah konsistensi dalam urutan tindakan, penekanan tombol, dan terminology.

❖  3 langkah proses:

⮚      Rancanglah urutan dialog

⮚      Mendesain prototype / mock-up

⮚      Evaluasi kegunaannya

Merancang Urutan Komponen Dialog

❖  Tentukan urutannya

❖  Miliki pemahaman yang jelas tentang karakteristik pengguna, tugas, teknologi, dan lingkungan,

❖  Membuat diagram dialog:

1. Metode formal untuk merancang dan merepresentasikan dialog manusia-komputer: menggunakan kotak dan garis
2. Terdiri dari kotak dengan 3 bagian:

▪      Atas

▪      Tengah

▪      Bawah

 

Contoh Rancangan Urutan Komponen Dialog 1

Diagram urutan komponen dialog yang menggambarkan sequence (urutan), selection (pilihan), dan iteration (perulangan).

Contoh Rancangan Urutan Komponen Dialog 2

Contoh diagram urutan untuk sistem informasi pelanggan

Contoh Mock-up Desain UI

Beberapa Perangkat Lunak untuk Implementasi UI

❖  Adobe Dreamweaver (Commercial)

❖  Adobe Xd (Online)

❖  Pingendo (Freemium)

❖  Silex.me (Open Source)

❖  Google Web Designer (Free)

❖  Dan lain-lain

Contoh Mock Up dengan Adobe Xd

Contoh Mock Up Personal Website :

Done 😄

Kembali ke Part 1 => 

https://rakyatrepublik.blogspot.com/2020/10/mengidentifikasi-rancangan-user-interface-part-1.html

Baca Juga Tentang artikel di bawah ini :

• How do you handle stress and pressure ?
  
• Cara Membuat Aplikasi Android dengan Memanfaatkan SQLite Sebagai Media Penyimpanan
• Perulangan If else if dan switch case
  
  
• Perintah Dasar Git
  
  
• Mengidentifikasi Rancangan User Interface PART 1
  
  
• Mengidentifikasi Rancangan User Interface PART 2
  
  
• Soal Ujian Akhir Semester (UAS) Semester Genap Metodologi Penelitian
  
  
• SOAL UJIAN TEORI MOBILE PROGRAMMING 
  
  
• PENGANTAR ALGORITMA DAN FLOWCHART
  
  
• Cara membuat Update dan Delete Database pada PHP dan MySQL 
  
  
• Cara Membuat Input dan output data (CRUD) dengan PHP dan MySQL
  
  
• Installasi Alat Bantu dan Pengantar Algoritma PART1
  
  
• Installasi Alat Bantu dan Pengantar Algoritma PART2
  
  
• Praktikum Pemrograman Mobile Android Studio 3
  
  
• Membuat Multiple Activites di Androdi Studio
  
  
• cara mendapatkan uang umkm online dari Facebook diperpanjang hingga 02 November 2020

 

Republic People

Saya adalah seorang yang suka membuat konten dengan disiplin belajar baik itu mengenai Informasi teknologi (IT), wawasan umum, berita terkini, soal - soal ujian maupun psikotes dan membagikan tips dan trik yang bermanfaat bagi diri saya khususnya maupun masyarakat luas.

Share this post