USER INTERFACE (UI) PT 6

User Interface (UI)

Capaian Pembelajaran Pertemuan 6 Mahasiswa Mampu memahami dan menjelaskan tentang user Interface sesuai keinginan user

Pembahasan Materi Pertemuan 6 6.1. Definisi User Interface 6.2. Pentingnya User Interface 6.3. Penggunaan Elemen dalam UI 6.4. Komponen Pembentuk User Interface (UI) 6.5. Karakteristik User Interface yang Baik beserta Contohnya 6.6. Mockup 6.7. Perangkat Lunak Tools Mockup 6.8. Latihan Soal Mandiri Pertemuan 6

6.1. Definisi User Interface Menurut Nanang Sadikin (2022) User Interface merupakan sebuah tampilan visual sebuah produk yang menjembatani antara sistem dengan pengguna (user). Tampilan UI ini dapat berupa seperti bentuk, warna, dan tulisan yang didesain semenarik mungkin. Secara sederhananya, User Interface adalah bagaimana tampilan sebuah produk dilihat oleh pengguna. “User Interface yang baik adalah User Interface yang tidak memerlukan pelatihan dalam pengoperasiannya, efisien dan user friendly” https://www.dictio.id/uploads/db3342/original/3X/6 /9/6967c47abf791b14e6cb69d8cef39903a9a6517b. png

User Interface menyatukan konsep-konsep mulai dari desain interaksi, desain visual, dan arsitektur informasi. User Interface meliputi elemen seperti teks, link, tombol dan gambar. Tujuan akhir dari sebuah UI adalah untuk menjamin kemudahan penggunaan, aksesibilitas fitur, dan User Experience yang memuaskan. Dengan kata lain, UI yang efektif memudahkan pengguna menikmati semua fitur dan fungsi yang ditawarkan oleh sebuah produk digital. https://cryptoharian.com/wp-content/uploads/2020/02/UI-DESIGN-600x368.png

6.2. Pentingnya User Interface 1. Memudahkan Interaksi pengguna dengan produk UI merupakan elemen visual sistem produk. Hal itu termasuk desain layar, tombol, ikon, gambar, teks, dan semua elemen visual lainnya berperan sebagai jembatan produk dengan pengguna. Jika interaksi pengguna berjalan baik, kebutuhan dan tujuan pengguna menggunakan produk dapat terpenuhi. 2. Meningkatkan Penjualan dan Pertumbuhan Bisnis UI berfokus pada kepuasan dan kesenangan pengguna, maka UI berperan penting dalam kesuksesan bisnis Anda. UI yang baik juga akan membangun reputasi produk lebih baik

3. Meningkatkan Kualitas Branding a. Tampilan UI juga bisa menjadi ciri khas sebuah produk (branding) b. Desain UI secara langsung akan mencerminkan nilai dan kualitas produk Contoh: 1) website produk teknologi, fashion, kuliner dan lain-lain. 2) Sistem operasi Android dan iOS https://intermezzo.id/wp-content/uploads/2017/11/1-1.jpg

6.3. Penggunaan Elemen dalam UI 1. Kontrol input seperti tombol, Toggles , dan checkbox 2. Sistem navigasi misalnya slider, kolom search, ikon, dan lain- lain. 3. Sistem informasi seperti tooltips, notifikasi, kotak pesan, dan progress bar 4. Elemen Call to Action (CTA) instruksi yang di desain agar pengunjung melakukan aktifitas. Toggles slider (CTA) tooltips

6.4. Komponen Pembentuk User Interface (UI) Semua elemen dalam cakupan UI bisa dikategorikan dalam 4 komponen dasar meliputi: 1. Tata letak 2. Warna 3. Tipografi 4. Grafik https://digimind.id/wp-content/uploads/image1-1024x624.jpg https://digimind.id/pengertian-dan-fungsi-user-interface-ui-dalam-membangun-desain-yang-optimal/

Komponen Pembentuk User Interface (UI) 1. Tata letak : penempatan atau pengaturan posisi semua elemen grafis. UI yang baik pada dasarnya bersifat sederhana, dalam arti elemen grafis – terutama untuk navigasi dan akses fitur – harus tertata dengan baik sehingga mudah dilihat dan digunakan. Pengguna bisa dengan cepat memahami pilihan fungsi yang ada. 2. Warna : pilihan warna memiliki pengaruh besar dalam desain antarmuka pengguna. Penggunaan warna yang berbeda untuk setiap tombol dan ikon memudahkan pengguna menemukan fitur yang dicari dan ingin digunakan. Secara umum, prinsip utama adalah menggunakan skema warna yang sesuai dengan jenis alat/aplikasi dan simbol atau logo perusahaan.

Komponen Pembentuk User Interface (UI) 3. Tipografi : penggunaan jenis huruf yang tepat juga sangat penting karena elemen ini berperan dalam menentukan tingkat keterbacaan. Huruf atau teks di situs online, aplikasi, game, atau alat digital tidak hanya harus mudah dibaca tapi juga enak dilihat dan unik. 4. Grafik : elemen visual terutama gambar dan ikon bisa menjadi poin utama. Sebuah logo perusahaan harus memberi fungsi representatif pada model bisnis atau industri yang digeluti perusahaan tersebut.

6.5. Karakteristik User Interface yang Baik beserta Contohnya 1. Jelas dan Ringkas 2. Desain Responsive 3. Informasi Terstruktur 4. Konsisten 5. Kontras Warna Yang Baik 6. Intuitif https://www.niagahoster.co.id/blog/user-interface/

Karakteristik User Interface 1. Jelas dan Ringkas: a. User interface website yang bagus haruslah jelas. b. Pengguna bisa menggunakan dan berinteraksi dengan sistem secara mudah. c. Sebisa mungkin, Buatlah penjelasan yang ringkas dan tidak terlalu panjang.

Coba perhatikan perbandingan tampilan website ini di bawah ini! Dari kedua tampilan tersebut, Anda tentu bisa langsung menebak tampilan mana yang lebih baik. Hal ini karena dari tampilan pertama dibuat secara ringkas, padat, dan jelas dalam menampilkan produk-produknya. Sementara itu, pada tampilan kedua, Anda melihat tampilan yang berantakan. Hal itu akan membuat pengguna bingung memilih produk.

Karakteristik User Interface 2. Desain Responsive Desain website yang responsif membuat pengunjung dapat mengakses website di berbagai perangkat seperti PC desktop dan mobile dengan baik. Sederhananya, jika pengunjung website membuka website Anda di layar ponselnya, tampilan website Anda akan menyesuaikan resolusi ponsel Anda. Desain yang tidak responsif ini akan menyusahkan pengunjung untuk melihat isi website Anda. Terlebih website Anda merupakan website toko online. Bisa-bisa pengunjung akan langsung meninggalkan website Anda. Jadi, pastikan desain Anda responsif, ya!

Karakteristik User Interface 3. Informasi Terstruktur Membuat tampilan UI dengan informasi yang terstruktur bisa dilakukan dengan: a. Memilih jenis dan warna font yang senada. b. Untuk beberapa informasi yang ditonjolkan, bisa menambah ukuran font. c. Tidak memasukkan banyak elemen yang tidak terlalu penting sehingga membuat tampilan berantakan/tumpang tindih.

Bisa dilihat bahwa desain gambar pertama menampilkan informasi yang tidak terstruktur dan tumpang tindih. Hal itu dapat membuat pengguna kesulitan dalam menangkap informasi.

Karakteristik User Interface 4. Konsisten Konsistensi desain berupa layout, warna, dan font yang digunakan, serta fungsi-fungsi tombol, icon, maupun tabs yang ada. Contoh: tampilan program Microsoft Office. Meskipun telah diperbarui beberapa kali, fungsi-fungsi ataupun tombol-tombol pada Microsoft Office tersebut tidak banyak berubah. Pengguna masih dapat mengetahui letak tombol print dan save dengan melihat iconnya.

Mari lihat desain dengan konsistensi yang baik seperti contoh gambar di bawah ini. Gambar tersebut memiliki konsistensi desain berupa layout, warna, dan font yang digunakan. Desain setiap halaman yang tidak terlalu berbeda akan memudahkan pengguna dalam mencerna informasi yang disampaikan.

Karakteristik User Interface 5. Kontras Warna Yang Baik a. Gunakan kombinasi warna yang sesuai agar terlihat jelas informasi yang ingin disampaikan. b. Hindari penggunaan warna yang mirip antara background dan tulisan. Misalnya, Anda memilih warna putih sebagai background, pastikan Anda menggunakan font colour yang kontras dengan putih. Jika tidak, informasi pada tampilan Anda sulit dibaca oleh pengguna.

Karakteristik User Interface 6. Intuitif a. Tidak membuat user berpikir bagaimana menggunakannya. b. Meminimalisir waktu dalam mempelajari cara menggunakan. Dengan begitu pengguna bisa menggunakan produk Anda tanpa perlu bertanya tentang cara penggunaannya.

6.6. Mockup Mockup adalah rancangan yang menunjukkan contoh bagaimana penampilan dari input maupun output yang mengandung data sebenarnya. mockup menyampaikan aspek desain visual, termasuk gambar, warna, dan tipografi. Mockup memberikan gambaran secara detail sebelum produk dibuat.

Kelebihan mockup: yang dapat 1. Mengorganisir detail dari proyek 2. Menemukan error 3. Menterjemahkan ide ke dalam bahasa dimengerti stakeholders 4. Menyampaikan ide kepada anggota tim 5. Implementasi desain 6. Perspektif user

Mockup Hal-hal yang harus dilakukan dalam membuat Mockup: 1. Buat Mockup asli dari awal Dapat dilakukan dengan menggunakan kombinasi foto / gambar sendiri 2. Gunakan Smart Object untuk menerapkan desain ke template Smart Objects “mempertahankan konten dan sumber gambar sesuai dengan karakteristik aslinya sehingga memungkinkan melakukan pengeditan tanpa merusaknya”. 3. Gunakan Photoshop untuk mockup 3D.

Tools Mockup 1. MOCKPLUS Alat seret-dan-lepas sederhana untuk membuat prototipe interaktif aplikasi desktop, seluler, dan web dengan cara yang lebih cepat. Fitur utama: a. Prototipe interaktif b. Komponen pra-desain c. Menguji pada perangkat nyata d. Beberapa opsi ekspor

Tools Mockup 2. UI FLUIDA Fluid membantu Anda membuat prototipe web dan seluler, membuatnya mudah untuk berkomunikasi tampilan, rasa, interaktivitas, dan animasi. Fitur utama: a. Perpustakaan bawaan untuk Android, iOS, web, desktop. b. Tambahkan interaksi dan animasi c. Kolaborasi tim d. Proyek ekspor

6.7. Perangkat Lunak Tools Mockup 1. BALSAMIQ 2. MOCKINGBIRD 3. MOCKUP BUILDER 4. MAKET IPHONE (untuk aplikasi Iphone)

Contoh Mockup 1. PEMESANAN TIKET KERETA API

Contoh Mockup KONFIRMASI PEMESANAN TIKET KONFIRMASI PEMBAYARAN

6.8. Latihan Soal Mandiri Pertemuan 6 1. Tampilan visual sebuah produk yang menjembatani sistem dengan pengguna a. User Interface b. Unit Interface c. Mockup d. Desain Interface e. Uses Interface

2. Desain UI secara langsung akan mencerminkan nilai dan kualitas produk adalah pentingnya UI dalam hal: a. Branding b. Interaksi pengguna c. Nilai Penjualan d. Pertumbuhan Bisnis e. Kemudahan Akses

3. Rancangan yang menunjukkan contoh bagaimana penampilan dari input maupun output yang mengandung data sebenarnya… a. Disain Web b. Desain Form c. Disain Virtual d. Disain Grafis e. Mockup

4. Menterjemahkan ide ke dalam bahasa yang dapat dimengerti stakeholders a. Kelebihan Mockup b. User Interface c. Desain Visual d. Desain web e. Desain Form

5. Komponen Pembentuk UI adalah Elemen visual terutama gambar dan ikon bisa menjadi poin utama, yaitu: a. Tipografi b. Grafik c. Warna d. Tata Letak e. Kontras

Tugas Membuat Rancangan Antar Muka Buatlah rancangan berdasarkan User Experience dalam bentuk Mockup. Dikerjakan masing-masing. *Lakukan observasi kepada mahasiswa lain di kelas, apa keinginan mereka terkait aplikasi user interface yang sudah Anda buat. (Cantumkan hasil survei) Dipresentasikan di Pertemuan ke 14-15