UI / UX DESIGN - Fundamental [2]
Dini Hamidin
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?
The golden Rule of Design
● understand computers
– limitations, capacities, tools, platforms
● Understand people
– psychological, social aspects, human error.
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.
Proses Desain Interaksi [1]
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.
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
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
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.
Contoh Persona
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.
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.
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)
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
Screen Design and Layout [1]
Screen Design and Layout [2]
Screen Design and Layout [3]
Screen Design and Layout [4]
Ask & Questions

07 UI _ UX DESIGN - Fundamental [2].pptx

  • 1.
    UI / UXDESIGN - Fundamental [2] Dini Hamidin
  • 2.
    So What isDesign? 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 Ruleof Design ● understand computers – limitations, capacities, tools, platforms ● Understand people – psychological, social aspects, human error.
  • 4.
    Aktivitas Desain Interface ● mengetahuikeinginan dan kebutuhan; ● memberikan desain alternatif (desain konseptual dan fisik); ● mengembangkan versi interaktif dari formulir req (prototipe awal atau storyboard); ● menilai desain.
  • 5.
  • 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 Penggunaprimer 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 Whoare 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.
  • 11.
    Desain Konseptual Desain konseptualmengacu 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 FisikIni 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 sebuahmodel 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 tigabentuk 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.
  • 17.
  • 18.
  • 19.
  • 20.