Dokumen ini membahas prinsip dasar desain UI/UX, termasuk pemahaman tentang kebutuhan pengguna, material, dan batasan dalam proses desain. Proses desain meliputi penetapan kebutuhan, analisis, perancangan, serta evaluasi dan penerapan desain. Selain itu, dokumen ini menjelaskan pentingnya pengguna sebagai pemangku kepentingan dalam desain dan berbagai jenis prototipe yang digunakan untuk menguji konsep desain.

1. UI / UX DESIGN - Fundamental [2]
Dini Hamidin

2. So What is Design?
achieving goals within constraints
Goals: What is the purpose of the design we are intending to produce? Who is it
for? Why do they want it?
Constraints: What materials must we use? What standards must we adopt? How
much can it cost? How much time do we have to develop it? Are there health and
safety issues?

3. The golden Rule of Design
● understand computers
– limitations, capacities, tools, platforms
● Understand people
– psychological, social aspects, human error.

4. Aktivitas Desain
Interface
● mengetahui keinginan dan
kebutuhan;
● memberikan desain alternatif
(desain konseptual dan fisik);
● mengembangkan versi interaktif
dari formulir req (prototipe awal
atau storyboard);
● menilai desain.

5. Proses Desain Interaksi [1]

6. Proses Desain Interaksi [2]
Requirements – what is
wanted
● The first stage is
establishing what
exactly is needed.
● There are a
number of
techniques used
for this in HCI:
interviewing
people, videotaping
them, looking at
the documents and
objects that they
work with,
observing them
directly.
Analysis
● The results of observation
and interview need to be
ordered in some way to bring
out key issues and
communicate with later
stages of design.
● we will look at scenarios, rich
stories of interaction, which
can be used in conjunction
with a method like task
analysis or on their own to
record and make vivid actual
interaction.

7. Proses Desain Interaksi [3]
Design
● there is a central stage when
you move from what you
want, to how to do it. There
are numerous rules,
guidelines and design
principles that can be used to
help with this
Iteration and prototyping
Humans are complex and we cannot expect to get
designs right first time. We therefore need to evaluate a design to
see how well it is working and where there can be improvements.
Implementation and deployment
we need to create it and deploy it.
This will involve writing code,
perhaps making hardware, writing
documentation and manuals –
everything that goes into a real
system

8. Empat Kategori Pengguna/Stakeholders
Pengguna primer adalah individu yang
menggunakan produk tersebut secara
langsung.
Pengguna sekunder adalah individu
yang memberikan input atau menerima
output.
pengguna tersier adalah mereka yang
tidak terlibat secara langsung, tetapi
akan menerima dampak keberhasilan
atau kegagalan produk.
pengguna facilitating adalah mereka
yang terlibat dalam pembangunan atau
penyediaan produk
Contoh kasus penggunaan sistem
pemesanan akomodasi hotel oleh agen
perjalanan
Pengguna primer–staf biro perjalanan
dan bagian pemesanan staf hotel
Pengguna sekunder–pelanggan dan
pihak pengurusan hotel
Pengguna tersier - hotel pesaing,
pemegang saham hotel, sahabat atau
keluarga pelanggan yang akan turut
bersama
Pengguna facilitating - kumpulan
desain sistem, staf jabatan IT

9. User Focus
1 Who are they?
the first thing to find out is
who your users are. Are
they young or old,
experienced computer
users or novices?
2 Probably not like you!
When designing a system it
is easy to design it as if you
were the main user: you
assume your own interests
and abilities.
3 Talk to them
It is hard to get yourself inside someone else’s head, so the
best thing is usually to ask them. This can take many forms:
structured interviews about their job or life, open-ended
discussions, or bringing the potential users fully into the
design process.
4 Watch them
it is important to watch what people do as
well as hear what they say.
It can be done in an informal manner or
using developed methods such as
ethnography or contextual inquiry,
5 Use your imagination
One method that has been quite
successful in helping design teams
produce user-focussed designs is
the persona.
A persona is a rich picture of an
imaginary person who represents
your core user group.

10. Contoh Persona

11. Desain Konseptual
Desain konseptual mengacu pada mengubah kebutuhan dan keinginan konsumen
ke dalam model konseptual.
Contoh desain konseptual:
● Skenario yaitu cerita pendek yang menerangkan sesuatu hal atau produk,
● papan cerita (storyboard) yaitu sketsa yang menjelaskan fungsi tentang
suatu sistem atau produk,
● konstruksi prototipe atau Wizard of Oz adalah prototipe fidelity yang
merupakan model interaktivitas (mock-up). untuk melihat apakah pengguna
memahami desain tersebut selanjutnya mendapatkan masukan atau kritik.

12. Desain Fisik
Desain Fisik Ini merupakan desain yang lebih mendalam seperti desain layar,
penamaan menu, desain ikon, tata letak objek, dan sebagainya.
Ini harus dilakukan secara berulang bersama dengan desain konseptual. Ini
memastikan setiap keputusan baik secara konseptual atau fisik dapat dilakukan
secara paralel.
Contoh desain menu:
● jenis-jenis menu pop-up, pull down, drop down atau cascading;
● lokasi item menu, apakah di bagian atas layar atau di bawah layar;
● lokasi menu, apakah lokasi menu adalah tetap setiap layar atau sebaliknya;
● panjang menu, urutan dan aturan menu, dan sebagainya;
● desain ikon, penekanan harus diberikan kepada maksud ikon apakah mudah
dipahami, menyentuh sensitivitas agama, budaya, ras, dan sebagainya.

14. Prototipe [1]
Prototipe sebuah model untuk produk yang akan dibangun atau representasi dari
desain yang memungkinkan pengguna untuk berinteraksi dengannya dan
menghitung kesesuaiannya
● Prototipe dalam pengembangan perangkat lunak berarti model dasar bagi
produk atau sistem informasi yang selalu dibangun bagi tujuan demo atau
sebagai bagian dari proses pengembangan sistem.
● Prototipe dalam desain hardware adalah model fisik yang mewakili produk
nyata yang memungkinkan pengembang memvisualisasi dan menguji desain
tersebut
“Users can not tell you what they want, but when they see
something and use it, They soon know what they do not want
Preece (2002)

15. Prototipe [2]
Ada tiga bentuk working prototype, yaitu:
1. Vertical Prototype: kemampuan sistem hanya ditampilkan sebagian
2. Horizontal Prototype: semua interface ditampilkan tetapi kemampuannya
tidak ditampilkan
3. Scenario Prototype: hanya menampilkan sebagian fitur dan fungsi

16. Screen Design and Layout [1]

17. Screen Design and Layout [2]

18. Screen Design and Layout [3]

19. Screen Design and Layout [4]

20. Ask & Questions