Dokumen ini menjelaskan tentang user interface (UI), peran dan pentingnya dalam menciptakan pengalaman pengguna yang baik di aplikasi dan website. UI terdiri dari berbagai elemen visual dan jenis yang berbeda, seperti form-based, menu-driven, dan touch UI, yang semuanya berfungsi untuk memudahkan interaksi pengguna dengan sistem. Memiliki desain UI yang baik dapat meningkatkan kepuasan pengguna dan memberikan keunggulan kompetitif bagi produk digital.

1. Mengenal
User Interface:
Definisi, Fungsi, dan
Contohnya
Desain Media Interaktif

2. Pendahuluan
MM SMKN1BJN
Pendahuluan
Pengertian
Jenis UI
Ringkasan
Credits
Persaingan media digital saat ini membuat berbagai perusahaan berlomba-lomba mengembangkan
tampilan dan fungsi aplikasi atau website bisnisnya semenarik mungkin.
Aspek tampilan visual aplikasi atau website itulah yang para web
developer dan desainer sebut sebagai user interface (UI).
User interface adalah bagian penting sekaligus strategi jitu dalam mempresentasikan bentuk web
atau aplikasi dengan cara terbaik sehingga user experience (UX) lebih optimal.
Ibaratnya user interface adalah kesan pertama yang akan user dapatkan dari hasil penggunaan
sistem.
Pada mapel Desain Media
Interaktif kali ini kita akan belajar
seputar UI mulai dari pengertian,
fungsi, karakteristik, dan contoh
penerapannya yang baik dan
benar.
Dengan begitu kita jadi bisa lebih
aware bahwa user interface adalah
bagian yang tak terpisahkan dari
web atau aplikasi yang user
friendly.
2
Urgensi UI
Karakteristik
Fungsi UI
Contoh Desain UI

3. Pengertian User Interface (UI)
Pengertian
Jenis UI
3
Pendahuluan
User interface adalah bagian dimana
user bisa melihat sekaligus berinteraksi
dengan komputer, website, atau aplikasi
dengan tujuan agar user experience
yang lebih mudah dan intuitif.
Visual Design Interaction design
bagian untuk menyampaikan
tampilan dan nuansa dari
produk software
Interaction Design
UI merupakan aspek integral dari user
experience, UI terdiri dari dua bagian
utama.
UI biasanya melibatkan elemen visual
seperti palet warna, animasi, tipografi,
layout dan komposisinya, gambar, ikon,
dan elemen UI design material lainnya.
Urgensi UI
Ringkasan
Credits
Visual Design
kumpulan elemen fungsional
dan logis dari produk software.
MM SMKN1BJN
Karakteristik
Fungsi UI
Contoh Desain UI

4. Jenis User Interface (UI)
Jenis UI
4.1
Pendahuluan
Pengertian
Form-based
Menu-driven
Graphical
Voice UI
Contoh UI yang berupa hardware adalah bentuk keyboard, mouse, microphone, camera,
monitor, speaker, printer, dan bentuk device lainnya.
Tapi bila di dalam prinsip software atau website, jenis user interface adalah meliputi:
tampilan antarmuka yang digunakan untuk
memasukkan data ke dalam program atau
aplikasi yang menawarkan pilihan terbatas.
merupakan perangkat input yang dapat
menghasilkan output berupa visual, contohnya
keyboard dan monitor.
UI yang menggunakan daftar pilihan agar bisa
menavigasi program atau web. Misalnya pada
ATM, perangkat tersebut menggunakan UI
menu-driven ini sehingga user (nasabah) dapat
menggunakannya dengan mudah.
perangkat yang menggunakan perintah auditori
atau suara agar terjadi interaksi antara manusia
dan mesin. Contohnya pada perangkat virtual
assistant, talk-to-text, GPS, dan lain sebagainya.
Karakteristik
Fungsi UI
Contoh Desain UI
MM SMKN1BJN
Urgensi UI
Ringkasan
Credits

5. Jenis User Interface (UI)
Jenis UI
4.2
Pendahuluan
Pengertian
Touch UI
Contoh UI yang berupa hardware adalah bentuk keyboard, mouse, microphone, camera,
monitor, speaker, printer, dan bentuk device lainnya.
Tapi bila di dalam prinsip software atau website, jenis user interface adalah meliputi:
antarmuka yang bisa dioperasikan dengan
sentuhan. Kamu bisa menemukan jenis UI ini
pada sebagian besar smartphone, tablet, dan
perangkat apapun yang menggunakan layar
sentuh dengan input haptic.
MM SMKN1BJN
Karakteristik
Fungsi UI
Contoh Desain UI
Urgensi UI
Ringkasan
Credits

6. Jenis UI
Karakteristik
5
Pendahuluan
Pengertian
Fungsi User Interface (UI)
Peran UI
Sejatinya peran UI tidak terlepas dari penerapan Graphic User Interface (GUI) pada
setiap program ataupun aplikasi smartphone.
Interface yang baik juga dapat mempengaruhi traffic website karena banyak pengguna akan mengakses situs lebih lama.
Berdasarkan
pengertiannya,
tujuan utama user interface adalah
untuk menampilkan bagian
antarmuka depan sebuah sistem
agar mudah digunakan, efisien, dan
bisa membuat pengguna merasa
senang selama berinteraksi dengan
sistem.
Lorem Ipsum
Fungsi UI
MM SMKN1BJN
Contoh Desain UI
Urgensi UI
Ringkasan
Credits

7. Jenis UI
6.1
Pendahuluan
Pengertian
Karakteristik UI yang Bagus
Fungsionalitas dan visual UI sangat penting dalam
membangun brand dan hubungan developer dengan
pengguna.
Akibatnya loyalitas pengguna akan meningkat dan lebih percaya kalau
produk kamu dapat membantu mereka dibandingkan produk lain.
Selain itu, peluang pengguna produk yang memiliki desain visual
terbaik untuk merasa puas akan lebih tinggi terlepas dari fungsi produk
itu sendiri.
Fungsi UI
Karakteristik
Karakteristik
Valuable Memuaskan Mudah Diakses
Contoh Desain UI
MM SMKN1BJN
Urgensi UI
Ringkasan
Credits

8. Jenis UI
6.2
Pendahuluan
Pengertian
Karakteristik UI yang Bagus
Fungsionalitas dan visual UI sangat penting dalam
membangun brand dan hubungan developer dengan
pengguna.
Akibatnya loyalitas pengguna akan meningkat dan lebih percaya kalau
produk kamu dapat membantu mereka dibandingkan produk lain.
Selain itu, peluang pengguna produk yang memiliki desain visual
terbaik untuk merasa puas akan lebih tinggi terlepas dari fungsi produk
itu sendiri.
Fungsi UI
Karakteristik
Karakteristik
Intuitif Jelas dan
Ringkas
Konsisten
MM SMKN1BJN
Contoh Desain UI
Urgensi UI
Ringkasan
Credits

9. Contoh Desain UI
7
Contoh Desain UI yang Kreatif
Notion: Product Onboarding
FlowMapp: Interface Rapi
Figma: Panduan Pengguna Pemula
Notion adalah aplikasi web dan software manajemen proyek yang
memudahkan proses monitoring produktivitas pekerjaan tim atau
perseorangan secara virtual dan remote.
web apps FlowMapp memiliki tampilan halaman proyek yang jelas, rapi, mudah
digunakan, dan sangat optimal untuk mendukung proses belajar pengguna
baru.
Ketika pengguna pertama kali membuat file baru di Figma, mereka akan
disajikan sebuah animasi tooltip yang berfungsi sebagai instruksi singkat dari
tiap fitur Figma.
Notion FlowMapp Figma
Pengertian
Jenis UI
Karakteristik
Fungsi UI
Pendahuluan
MM SMKN1BJN
Urgensi UI
Ringkasan
Credits

10. Urgensi UI
8
Urgensi UI
FlowMapp Figma
Notion
User Interface adalah Pintu Pertama Kepuasan Pengguna
Berbagai produk digital dengan UI yang baik memberi keunggulan
kompetitif di dunia yang terus berkembang dimana perusahaan
menjadi sadar akan pentingnya user experience yang baik.
Ringkasan
Credits
MM SMKN1BJN
Pengertian
Jenis UI
Karakteristik
Fungsi UI
Pendahuluan
Contoh Desain UI

11. Hasilnya, user interface adalah solusi terbaik dalam menghadirkan fungsionalitas
produk digital yang optimal di samping elegan.
9
Ringkasan
Credits
Ringkasan
Dan juga menjadi bagian yang penting karena itulah awal mula interaksi user
dengan produk sistem dalam mencapai kebutuhan dan tujuan mereka.
Dengan begitu website atau aplikasi kamu akan mendapatkan traffic penggunaan
yang tinggi dan menjadikan bisnis tumbuh dengan optimal.
MM SMKN1BJN
Pengertian
Jenis UI
Urgensi UI
Karakteristik
Fungsi UI
Contoh Desain UI
Pendahuluan

12. 10
Credits
Credits
Domainesia:
Mengenal User Interface: Definisi, Fungsi, dan Contohnya
Ratna Patria, 11 Januari 2023
Materi ini dikutip dari laman www.domainesia.com, ditulis oleh Ratna Patria pada 11 Januari 2023.
MM SMKN1BJN
Pengertian
Jenis UI
Ringkasan
Urgensi UI
Karakteristik
Fungsi UI
Contoh Desain UI
Pendahuluan

13. Thank You
Presented by. Yosss
@mulyoso7
dwimulyoso21@gmail.com
Multimedia – DKV
SMK Negeri 1 Bojonegoro
Desain Media Interaktif