(Tutorial Visual Design - Part 2) User Interface and User Experience
1. INTRODUCTION
2. UI DEVELOPMENT PROCESS
Functional Requirement Gathering
Proses Identifikasi keinginan user. Yang paling bagus dalam sebuah proses identifikasi adalah 1 system untuk 1 fungsi utama, mempunyai main function yang jelas dan fokus fungsi tersebut pun jelas. Umumnya, user cukup sulit untuk mengetahui apa keinginannya, sehingga sebisa mungkin design diarahkan untuk memudahkan user.
User Analysis
Siapa target pasar ? berapa usianya ? Apakah user melek komputer atau justru kurang paham tentang teknologi ? Mengerti Persona / karakter dan cara kerja dari user. Misalnya, ada user yang senang sebuah form registrasi memanjang turun ke bawah dengan segala macam fungsinya, dan bukan model wizzard yang lebih banyak klik-nya. Dari sini selanjutnya, dipilihlah mana persona yang paling mewakili persona - persona yang lainnya.
Information Architecture
Mencari tahu bagaimana sebuah aplikasi akan dipakai oleh user. Misalnya apa bentuk aplikasi kesehatan yang cocok untuk olahragawan yang bisa diterapkan di hp ? Bisa dengan menggunakan aplikasi detak jantung dan lain sebagainya.
Prototype
Melakukan testing berbagai design persona, kemudian menentukan mana yang paling cocok untuk dipakai oleh semua orang. Best practice-nya bisa dengan menyusun set of task untuk dilengkapi oleh user. Sebuah referensi yang sangat berguna bisa diakses melalui : www.userium.com
Accesibility Testing dengan melakukan stress test.
3. 10 USABILITY HEURISTICS :
Jack Nielson menemukan dalam penelitiannya 10 best practice yang harus diperhatikan dan dilakukan dalam mendesain UI / UX dari segi Usability-nya :
Visibility of System Status
- UI : mengatur interaksi antara manusia dengan mesin / perangkat elektronik
- UX : cara pandang orang / user tentang hal ini yang berhubungan dengan flow yang baik yang memudahkan orang untuk dapat bekerja.
2. UI DEVELOPMENT PROCESS
Functional Requirement Gathering
Proses Identifikasi keinginan user. Yang paling bagus dalam sebuah proses identifikasi adalah 1 system untuk 1 fungsi utama, mempunyai main function yang jelas dan fokus fungsi tersebut pun jelas. Umumnya, user cukup sulit untuk mengetahui apa keinginannya, sehingga sebisa mungkin design diarahkan untuk memudahkan user.
User Analysis
Siapa target pasar ? berapa usianya ? Apakah user melek komputer atau justru kurang paham tentang teknologi ? Mengerti Persona / karakter dan cara kerja dari user. Misalnya, ada user yang senang sebuah form registrasi memanjang turun ke bawah dengan segala macam fungsinya, dan bukan model wizzard yang lebih banyak klik-nya. Dari sini selanjutnya, dipilihlah mana persona yang paling mewakili persona - persona yang lainnya.
Information Architecture
Mencari tahu bagaimana sebuah aplikasi akan dipakai oleh user. Misalnya apa bentuk aplikasi kesehatan yang cocok untuk olahragawan yang bisa diterapkan di hp ? Bisa dengan menggunakan aplikasi detak jantung dan lain sebagainya.
Prototype
- Throw Away Design : prototype yang setelah dibuat, tidak digunakan lagi. Ciri-cirinya adalah interaksi yang aktif dan jumlah iterasi lebih banyak.
- Incremental Design : satu prototype, dengan menerima feedback dan melanjutkannya dengan enhancement prototype yang sama.
- Evolutionary Design : Memanfaatkan kekuatan team design, dimana masing - masing designer akan fokus ke bagian - bagian tertentu.
- Usability Testing
Melakukan testing berbagai design persona, kemudian menentukan mana yang paling cocok untuk dipakai oleh semua orang. Best practice-nya bisa dengan menyusun set of task untuk dilengkapi oleh user. Sebuah referensi yang sangat berguna bisa diakses melalui : www.userium.com
Accesibility Testing dengan melakukan stress test.
3. 10 USABILITY HEURISTICS :
Jack Nielson menemukan dalam penelitiannya 10 best practice yang harus diperhatikan dan dilakukan dalam mendesain UI / UX dari segi Usability-nya :
Visibility of System Status
intinya adalah menyampaikan user bahwa ada sesuatu yang jalan meskipun proses yang bekerja adalah proses background, misalnya dengan menempatkan animasi tertentu. Hal lain yang cukup penting adalah penyampaian error message pada aplikasi, harus dibahasakan kembali supaya dimengerti oleh user.
Match Between System and The Real World
Contohnya Aplikasi Screen-morfism IOS6 yang menyamakan benda diluar dengan dikomputer , salah satunya dengan aplikasi microfonenya.
User Control and Freedom
Match Between System and The Real World
Contohnya Aplikasi Screen-morfism IOS6 yang menyamakan benda diluar dengan dikomputer , salah satunya dengan aplikasi microfonenya.
User Control and Freedom
Menekankan segi efisiensi, misalnya mempertimbangkan effort user click dengan design by user.
Consistency and Standards
Consistency and Standards
Contohnya error message button yang serupa di tiap form dengan seragam berwarna merah.
Error Prevention
Error Prevention
Sebisa mungkin membantu menghindarkan user dari error, seperti tidak meletakkan tombol save dan cancel berdekatan.
Recognition Rather Than Recall
Mencari kebiasaan user menggunakan aplikasi - aplikasi dan menerapkan model dan cara interaksi tersebut di aplikasi yang hendak dibuat.
Flexibility and Efficiency of User
Menyediakan fungsi cepat seperti F1, F12, serta menyediakan interface yang lebih sederhana.
Aesthetic and Minimalist Design
Membuat aplikasi yang jika dilihat oleh user dapat dimengerti dengan mudah.
Help Users Recognize, Diagnose, and Recover from Errors
Ketika memberikan informasi error, sebaiknya memberikan sedikit panduan untuk keluar dari permasalahan, misalnya menuliskan pesan tambahan "silahkan hubungi administrator anda " untuk kasus error user yang accoutnya terkunci.
Help and Documentation
Membuat dokumentasi yang mudah dipakai oleh user.
4. SCREEN INTERFACE PATTERNS :
7.1 CARGO Quest Case Study :
Pak Albert adalah seorang pemilik perusahaan ekspedisi alat – alat berat yang ingin membuat aplikasi web tracking dan inventory untuk perusahaannya, CargoQuest. System tersebut nantinya akan dipakai oleh admin untuk melihat status barang / komoditi yang telah dikirim, mengedit tipe barang yang dikirim, list kota, rute pengiriman, dan details lain pada master table yang totalnya ada 17 table.
Pak Albert secara spesifik meminta agar ketika admin login, interface yang tersedia bisa menampilkan semua pilihan master table agar mempermudah navigasi dan kinerja admin. Navigasi utama dari sistem ini mencakup Home, References (untuk master table), List blocking, User Management, dan Preference.
Di Home aplikasi tersebut, Pak Albert ingin menambahkan sedikit informasi dari perusahaan (news / announcement), fitur untukt tracking barang, dan fitur untuk mengecheck ongkos kirim.
Di Master Page Komoditi, content yang akan ditampilkan adalah suatu list yang berisi kode barang, Nama Barang, Tipe Barang, dan jenis satuan. Disana admin memerlukan fungsi add, edit, delete, dan search record.
Desainlah tampilan home dan master page komoditi di aplikasi tersebut. Model navigasi seperti apakah yang cocok dengan kasus seperti ini ? Tuangkan jawabannya dalam bentuk sketsa.
Recognition Rather Than Recall
Mencari kebiasaan user menggunakan aplikasi - aplikasi dan menerapkan model dan cara interaksi tersebut di aplikasi yang hendak dibuat.
Flexibility and Efficiency of User
Menyediakan fungsi cepat seperti F1, F12, serta menyediakan interface yang lebih sederhana.
Aesthetic and Minimalist Design
Membuat aplikasi yang jika dilihat oleh user dapat dimengerti dengan mudah.
Help Users Recognize, Diagnose, and Recover from Errors
Ketika memberikan informasi error, sebaiknya memberikan sedikit panduan untuk keluar dari permasalahan, misalnya menuliskan pesan tambahan "silahkan hubungi administrator anda " untuk kasus error user yang accoutnya terkunci.
Help and Documentation
Membuat dokumentasi yang mudah dipakai oleh user.
4. SCREEN INTERFACE PATTERNS :
- Master / Detail -> Control panel Windows
- Column Browse -> Microsoft Outlook
- Search / Result -> Tumblr
- Filter DataSet -> memiliki banyak setting, input di form kiri bisa menampilkan hasil di form sebelah kanan.
- Form -> menu form biasa.
- Dashboard -> charting, image , dll
- Spreadsheet -> berbentuk grid.
- Wizzard -> Membutuhkan langkah - langkah khusus.
- Interactive Models
- Top Horizontal Bar : navigasi memanjang ke kanan, biasanya berjumlah 5 - 12 item.
- Vertical / Size Bar : navigasi memanjang ke bawah, berguna untuk komputer resolusi lebih kecil.
- Fly Out & Drop Down Menu : sub navigasi top horizontal dan vertical.
- Footer Navigation : navigasi textlink yang diletakkan dibagian bawah, berfungsi sebagai complementer.
- BreadCrumb Navigation : navigasi yang mengarahkan dan memberitahukan user berada di halaman yang mana.
- Tags Navigation : berbentuk tags yang diletakkan di bagian tertentu halaman sehingga mudah ditemukan user.
- Clear Primary Actions : tindakan yang jelas dan mudah.
- Show Steps Left : Menunjukkan jumlah step by step dan berapa yang tersisa. Hal ini sangat digunakan untuk jenis Menu Wizzard.
- Forgiving Format : contohnya seperti google omnibox yang bisa memasukkan script, melakukan perhitungan, konversi mata uang dan ukuran dan lain - lain.
- Autofocus On Input : Mengarahkan user dengan autofocus ke textbox / control yang ada, misalnya dalam pengisian form registrasi.
- Verbs in Labels : Gunakan kata kerja yang cukup jelas. Contoh implementasi message box untuk Save bukan "Yes" dan "No" tetapi "Save" dan "Don't Save".
7.1 CARGO Quest Case Study :
Pak Albert adalah seorang pemilik perusahaan ekspedisi alat – alat berat yang ingin membuat aplikasi web tracking dan inventory untuk perusahaannya, CargoQuest. System tersebut nantinya akan dipakai oleh admin untuk melihat status barang / komoditi yang telah dikirim, mengedit tipe barang yang dikirim, list kota, rute pengiriman, dan details lain pada master table yang totalnya ada 17 table.
Pak Albert secara spesifik meminta agar ketika admin login, interface yang tersedia bisa menampilkan semua pilihan master table agar mempermudah navigasi dan kinerja admin. Navigasi utama dari sistem ini mencakup Home, References (untuk master table), List blocking, User Management, dan Preference.
Di Home aplikasi tersebut, Pak Albert ingin menambahkan sedikit informasi dari perusahaan (news / announcement), fitur untukt tracking barang, dan fitur untuk mengecheck ongkos kirim.
Di Master Page Komoditi, content yang akan ditampilkan adalah suatu list yang berisi kode barang, Nama Barang, Tipe Barang, dan jenis satuan. Disana admin memerlukan fungsi add, edit, delete, dan search record.
Desainlah tampilan home dan master page komoditi di aplikasi tersebut. Model navigasi seperti apakah yang cocok dengan kasus seperti ini ? Tuangkan jawabannya dalam bentuk sketsa.
Comments
Post a Comment