INTERAKSI MANUSIA

DAN KOMPUTER
RINI MALFIANY, S.PD., S.KOM., M.KOM., MOS
Materi
1 UI vs Interaction vs UX

2 Perbedaan UI dan UX

3 Workflow UI dan UX

4 Penerapan UI dan UX
 Apa itu
Desain UI, Ix dan
UX ????
 Pengertian Desain User Interface (UI)
Desain UI adalah desain antarmuka untuk perangkat,
dan difokuskan pada aspek pembuatan grafis.

User Selain berfungsi sebagai penghubung, UI juga berfungsi

untuk memperindah tampilan sehingga dapat mening
Interface katkan kepuasan pengguna, UI juga harus mudah digu
nakan.
Beberapa komponen UI diantaranya adalah komponen
tombol, ikon tipografi, tema, layout, animasi yang tampil
pada produk, dan visual interaktif lainnya.
 Pengertian Desain User Interaksi (IxD)
Desain Interaksi : IxD adalah "praktik mendesain pr
oduk digital interaktif, lingkungan, sistem, dan layanan"
(Cooper, Reimann, Kaye, 2007).
User Ini berfokus pada merancang aliran di mana pengguna
Interaksi dapat menemukan informasi dengan mudah sambil me
mungkinkan pencapaian tujuan informasinya dalam seti
ap interaksi.
Gagasan kegunaan dalam produk digital sering dikait
kan dengan desain interaksi yang baik.
 Pengertian Desain User Experience (UE)
Desain UX adalah konsep tingkat tinggi yang menca
kup berbagai aspek desain bersamaan dengan perjalan
an pengguna pada sistem, platform, perangkat lunak,
User atau aplikasi.

Experience UX termasuk desain UI, desain Ix, desain komunikasi,

desain aplikasi, arsitektur informasi dan banyak lagi.
Tujuan dari desain UX adalah untuk memfasilitasi pera
saan terbaik yang diterima pengguna saat beroperasi
pada perangkat.
Apa Perbedaan
UI dan UX ????
USER INTERFACE (UI) dan USER EXPERIENCE (UX)
Perbedaan
 Bagaimana
Workflow UI dan
UX ????
 DESAIN UI DAN UX
Workflow

Riset UX
• Riset dilakukan untuk memahami apa yang dibutuhkan pengguna.
Misalnya, untuk membuat website toko online, kita harus mencari
tahu bagaimana kebiasaan orang berbelanja, proses pembayaran
yang paling disenangi pengguna dan lain-lain.
• Seorang UX Researcher bisa melakukan riset UX melalui beberapa
cara, baik melalui user interview atau online survey. Data yang
dikumpulkan juga bisa melalui data kualitatif dan kuantitatif.

Membuat Information Architecture

• Information Architecture ini merupakan proses menyusun struktur
bagian-bagian pada website dan aplikasi
• Hasil riset UX didapatkan melalui metode card sorting, yaitu
metode memilah dan menentukan buyers persona.
 DESAIN UI DAN UX
Workflow

Membuat Wireframe
• Wireframe merupakan sketsa visual dari sebuah
produk
• Proses wireframing meliputi pembuatan sketsa
produk yang akan dikembangkan menjadi sebuah
produk. Wireframe ini juga akan membantu tim
desainer, content dan developer untuk
memvisualisasikan bagaimana tampilan produk.
• Sketsa desain dibuat dengan Low Fidelity Wireframe
(LFW) baru kemudian dibuat versi High Fidelity
Wireframe (HFW).
• tools yang bisa dipakai dalam proses wireframing,
seperti Figma, Adobe XD, dan lain sebagainya.
 DESAIN UI DAN UX
Workflow
Mengatur UX flows
• Flow dibuat dengan pendekatan UX
• Flow ini kemudian didokumentasikan agar para developer mudah
dalam mengembangkan produk.
Membuat Prototype Desain UX
• Membuat prototipe Desain sesuai dengan desain wireframe dan flow
yang telah dibuat.
• Aplikasi seperti Invision, MockPlus, Adobe XD, dan lain-lain
Membuat Design System
• Design system dibuat untuk menyimpan segala komponen-
komponen desain, terutama komponen desain UI, seperti icon, font,
colour palette, dan lain-lain dalam sebuah library.
• Di tahap ini, dibutuhkan kolaborasi antara desainer UI dan developer.
Desainer UI mulai membuat elemen desain, sementara developer
membuat komponen library menggunakan HTML, CSS, Javascript,
dan lain-lain.
 DESAIN UI DAN UX
Workflow

Mendesain User Interface

• Di tahap ini, seorang UI Designer mulai bertugas mendesain
tampilan produk yang menarik. Tahapan ini juga merupakan
implementasi dari wireframe yang telah dibuat sebelumnya.
• Desainer bisa menggunakan Adobe Illustrator, Adobe Photoshop,
Sketch App dan aplikasi desain lainnya.
Proses Pengembangan produk oleh Developer
• Di tahap ini, desain yang telah lolos uji coba dan didesain oleh
desainer UI mulai didevelop oleh para developer.
Design Usability Test
• Melakukan proses uji coba dilakukan dengan memberikan skor pada
setiap fitur desain.
 Menghasilkan Produk yang Dibutuhkan
Pengguna

Penting nya Meningkatkan Kepuasan Pengguna Terhadap

UI dan UX Produk

Meningkatkan Penjualan dan Bisnis

UI dan UX yang BAIK
Bagaimana
UI dan UX yang BAIK
Bagaimana
UI dan UX yang BAIK
Bagaimana
UI dan UX yang BAIK
Bagaimana
 Sebutkan
Contoh
Penerapan UI dan
UX ????
 Contoh

Aplikasi
Penerapan Gojek
UI UX
Google
 APLIKASI GOJEK
User Interface
• Desain Animasi yang Menarik
 APLIKASI GOJEK
User Interface
• Penggunaan Ikon
 APLIKASI GOJEK
User Interface
• Konsistensi Desain
 APLIKASI GOJEK
User Experience
• Fitur yang Tersedia sangat Usefull
• Alur Penggunaan Mudah
 APLIKASI GOOGLE
User Interface
• Konsep Minimal Interface
APLIKASI GOOGLE
User Interface
 APLIKASI GOOGLE
User Interface
• Konsisten Warna dan layout
 APLIKASI GOOGLE
User Interface
• Responsive Ilustrasi dan Ikon
 APLIKASI GOOGLE
User Experience
• Discoverability (Mudah Digunakan)
• Desain Adaptif
APLIKASI GOOGLE
User Experience
 APLIKASI GOOGLE
User Experience
• Fast and No Errors
 Desain UI vs Desain UX vs Desain Interaksi berbeda tetapi
saling terkait. Desain UI adalah bagian dari Desain Interaksi
sementara Desain Interaksi adalah bagian dari Desain UX
Jika desain UX suatu produk sangat baik tetapi desain UI-
Kesimpulan nya tidak bagus, first impression pengguna juga akan tidak
bagus. Sama halnya, jika desain UI suatu produk bagus, teta
pi desain UX-nya tidak bagus, pengguna tidak akan suka me
nggunakan produk tersebut.
 TUGAS
IMK

Buat penerapan UI, Ix, dan UX pada sebuah aplikasi apa saja bebas.

Tugas dalam bentuk Microsoft word dan power point.

Word dikumpulkan dalam email rini@dosen.rosma.ac.id dan power

point Presentasikan minggu depan !!!
SEKIAN…