Handout TIF210 INF108 Bab 2 Dasar Desain Interaksi v11 2016
2/18/2016
Prio Handoko, S. Kom., M.T.I.
Program Studi Teknik Informatika
Universitas Pembangunan Jaya
Jl. Cendrawasih – Sawah Baru
Tangerang Selatan – Banten 15211
BAB 2:
M ahasiswa mampu memahami hal-hal yang
perlu disiapkan terlebih dahulu sebagai dasar
sebuah desain interaktif yang perlu terus digali
untuk pemenuhan setiap interasi prototipe
antarmuka.
BAB 2:
•
•
•
•
•
•
•
Introduction
What is Design?
The Process of Design
User Focus
Navigation Design
Screen Desain and Layout
Iteration and Prototyping
1
2/18/2016
Definisi Desain
• IM K berfokus pada pemahaman
• Desain interaksi tidak terbatas hanya pada:
• perancangan sistem interaktif saja. Mengapa
• Design?
“achieving goals within constraints”
demikian?
• apa y ang dihasilkan, tetapi lebih kepada proses
“memahami dan memilih” (underst anding and
choosing).
t rade off
• Aturan utama “design”
1. m emahami komput er;
2. m emahami manusia
Definisi Desain
under st and t he
m at erials
Proses Desain
• Human error/operator error
human error/operator error
bad installation/bad design
an interface
8
2
2/18/2016
4
watch
them
3
talk to
them
probably
not like
you!
2
5
know
your
user
use your
imagination
?
1
who
are
they?
• Perhat ikan cerita berikut
• Langkah-langkah pent erjemahan:
1.
2.
3.
4.
• Alur cerita desain
• Rich st ories of int eractions
• Represent asi paling sederhana dari
sebuah desain
• Salah sat u met ode yang paling baik
dan power full
tuangkan dalam rich picture;
membuat skenario antarmuka;
rancang tampilan antarmuka;
evaluasi.
• Skenario dapat digunakan untuk beberapa
hal berikut:
1. berkomunikasi dengan perancang, klien atau
user;
2. melakukan v alidasi model lainnya;
3. t ampilan ant armuka (mock up).
3
2/18/2016
• Navigation within the application
prinsip dasar
DESIGN
• Environment
• Screens/Windows
think
• elemen dari GUI
• menampilkan informasi
sebuah aplikasi
• pengat uran dapat
diubah oleh pengguna
• inst ruksi t unggal
ASK
• Widget
4
2/18/2016
• Tools untuk tampilan
•
Grouping and structure
•
•
Decoration
Alignment
•
Order of groups and items
White space
A
B
C
D
( a)
spac e to se parate
E
F
( b)
spac e to struc ture
(c)
spac e to highlight
5
2/18/2016
• User action & control
• Ent ering informat ion
• Knowing what t o do
• Affor dances
• Appropriate appearance
•
•
•
•
Pr esent ing informat ion
Aest het ics & ut ilit y
Making a mess of it : color & 3D
Localizat ion/Int ernat ionalization
is it ok?
Design
Prototype
Done!
Evaluate
fix it?
re-D esign
Bagaimana caranya agar metode prototipe dapat
berjalan?
1. memahami kesalahan yang muncul dan memperbaikinya;
dan
2. mengawalinya dengan cara yang baik.
6
Prio Handoko, S. Kom., M.T.I.
Program Studi Teknik Informatika
Universitas Pembangunan Jaya
Jl. Cendrawasih – Sawah Baru
Tangerang Selatan – Banten 15211
BAB 2:
M ahasiswa mampu memahami hal-hal yang
perlu disiapkan terlebih dahulu sebagai dasar
sebuah desain interaktif yang perlu terus digali
untuk pemenuhan setiap interasi prototipe
antarmuka.
BAB 2:
•
•
•
•
•
•
•
Introduction
What is Design?
The Process of Design
User Focus
Navigation Design
Screen Desain and Layout
Iteration and Prototyping
1
2/18/2016
Definisi Desain
• IM K berfokus pada pemahaman
• Desain interaksi tidak terbatas hanya pada:
• perancangan sistem interaktif saja. Mengapa
• Design?
“achieving goals within constraints”
demikian?
• apa y ang dihasilkan, tetapi lebih kepada proses
“memahami dan memilih” (underst anding and
choosing).
t rade off
• Aturan utama “design”
1. m emahami komput er;
2. m emahami manusia
Definisi Desain
under st and t he
m at erials
Proses Desain
• Human error/operator error
human error/operator error
bad installation/bad design
an interface
8
2
2/18/2016
4
watch
them
3
talk to
them
probably
not like
you!
2
5
know
your
user
use your
imagination
?
1
who
are
they?
• Perhat ikan cerita berikut
• Langkah-langkah pent erjemahan:
1.
2.
3.
4.
• Alur cerita desain
• Rich st ories of int eractions
• Represent asi paling sederhana dari
sebuah desain
• Salah sat u met ode yang paling baik
dan power full
tuangkan dalam rich picture;
membuat skenario antarmuka;
rancang tampilan antarmuka;
evaluasi.
• Skenario dapat digunakan untuk beberapa
hal berikut:
1. berkomunikasi dengan perancang, klien atau
user;
2. melakukan v alidasi model lainnya;
3. t ampilan ant armuka (mock up).
3
2/18/2016
• Navigation within the application
prinsip dasar
DESIGN
• Environment
• Screens/Windows
think
• elemen dari GUI
• menampilkan informasi
sebuah aplikasi
• pengat uran dapat
diubah oleh pengguna
• inst ruksi t unggal
ASK
• Widget
4
2/18/2016
• Tools untuk tampilan
•
Grouping and structure
•
•
Decoration
Alignment
•
Order of groups and items
White space
A
B
C
D
( a)
spac e to se parate
E
F
( b)
spac e to struc ture
(c)
spac e to highlight
5
2/18/2016
• User action & control
• Ent ering informat ion
• Knowing what t o do
• Affor dances
• Appropriate appearance
•
•
•
•
Pr esent ing informat ion
Aest het ics & ut ilit y
Making a mess of it : color & 3D
Localizat ion/Int ernat ionalization
is it ok?
Design
Prototype
Done!
Evaluate
fix it?
re-D esign
Bagaimana caranya agar metode prototipe dapat
berjalan?
1. memahami kesalahan yang muncul dan memperbaikinya;
dan
2. mengawalinya dengan cara yang baik.
6