PERTEMUAN 6 - UI

PERTEMUAN 6 I. Pendahuluan A. Deskripsi singkat, manfaat dan relevan Pernahkah Anda menemukan website atau aplikasi dengan tampilan yang buruk? Menyebalkan sekali, bukan? Anda pasti jadi bingung dan sulit menggunakannya. Itulah mengapa sebuah website atau aplikasi perlu memperhatikan tampilan user interface (UI). Namun, tahukah Anda apa itu user interface? Tenang saja, di artikel ini, Anda akan temukan jawaban lengkapnya. Anda juga dapat mengetahui bagaimana karakteristik user interface yang baik. Langsung saja, mari simak penjelasannya berikut ini. B. Rumusan capaian pembelajaran matakuliah Mahasiswa Mampu memahami dan menjelaskan tentang Definisi User Interface, Komponen Pembentuk UI, Karakteristik UI, Mockup dan Perangkat Lunak Tool Mockup C. Urutan bahasan dan kaitan materi 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 D. Pentunjuk belajar Mari kita membaca petunjuk belajar terlebih dahulu untuk mempermudah materi pertemuan 6 mengenai User Interface (UI) : 1. Berdoalah sebelum memulai pembelajaran 2. Bacalah kemampuan akhir tiap tahapan belajar (sub-cpmk), indikator, kriteria dan teknik, bentuk pembelajaran, metode pembelajaran, penugasan mahasiswa dan materi pembelajaran dengan cermat.

3. Baca dan pelajari setiap materi yang ada, bila perlu di garis bawahi hal-hal yang menurut anda penting. 4. Mahasiswa dapat belajar secara mandiri ataupun berkelompok, saat pertemuan kuliah yang dilakukan secara daring dengan memanfaatkan fasilitas ecampus Sekolah Tinggi Teknologi Informasi NIIT 5. Jika belum memahami segera tanyakan kepada Bapak / Ibu dosen pengampu matakuliah. II. Penyajian Penyajian materi berisi uraian materi pelajaran, contoh, ilustrasi, tugas/latihan, tes formatif, rangkuman 6.1. Definisi User Interface 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”. Gambar 6.1. User Interface 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. Gambar 6.2. Contoh Konsep User Interface 6.2. Pentingnya User Interface 1. Memudahkan Interaksi pengguna dengan produk atau aplikasi 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

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. 6.4. Komponen Pembentuk User Interface (UI) Semua elemen dalam cakupan UI bisa dikategorikan dalam 4 komponen dasar meliputi: 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. Gambar 6.3. tata letak 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. Gambar 6.4. Warna 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. Gambar 6.5. typography

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. Gambar 6.6. Grafik 6.5. Karakteristik User Interface yang Baik beserta Contohnya 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!

Gambar 6.7. Contoh Tampilan Website yang baik Gambar 6.8. Contoh Tampilan Website yang Buruk 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. 2. Desain Responsive Desain website yang responsif membuat pengunjung dapat mengakses website di berbagai perangkat seperti PC desktop dan mobile dengan baik.

Gambar 6.9. Desain Website Responsive 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! 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.

Gambar 6.10. Informasi Terstruktur

Gambar 6.11. Informasi Terstruktur

Bisa dilihat bahwa desain gambar pertama menampilkan informasi yang tidak terstruktur dan tumpang tindih. Hal itu dapat membuat pengguna kesulitan dalam menangkap informasi. 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 6.12. konsistensi

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. 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. Gambar 6.13. Penggunaan Warna yang baik 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. 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: 1. Mengorganisir detail dari proyek 2. Menemukan error 3. Menterjemahkan ide ke dalam bahasa yang dapat dimengerti stakeholders 4. Menyampaikan ide kepada anggota tim 5. Implementasi desain 6. Perspektif user 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. 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

Gambar 6.14. Mockup Plus 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

Gambar 6.15. UI Fluida 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 Gambar 6.16. Contoh Mockup Menu Utama

2. Konfirmasi Pemesanan Tiket Gambar 6.17. Contoh Mockup 3. Konfirmasi Pembayaran

Gambar 6.17. Contoh Mockup 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 Rangkuman User interface sangat penting bagi produk digital Anda, baik aplikasi, website, maupun blog. Anda perlu memperhatikan tampilan UI produk untuk menyukseskan tujuan produk Anda.Jika Anda memiliki website, Anda perlu memperhatikan tampilan website Anda. terlebih Anda memiliki website toko online. Tampilan UI yang baik digadang-gadang sebagai salah satu langkah untuk meningkatkan penjualan dan pertumbuhan bisnis Anda. Selain itu, tampilan UI yang baik bisa menjadi branding toko online Anda. Dengan mempertimbangkan karakteristik user interface yang baik, website menarik impian Anda akan terwujud.

III. Penutup Dari penyajian materi di atas dapat ditarik kesimpulan bahwa : a. User interface sangat penting bagi produk digital yang akan anda buat sebelum d publikasikan kepada user. b. Komponen pembentuk user interface (UI) terdiri dari 4 komponen diantaranya: tata letak, warna, typography, grafik. c. Mengetahui karakteristik dari user interface beserta contoh-contohnya d. Membuat rancangan bagaimana penampilan dari input dan output dengan menggunakan perangkat lunak tools mockup