!
Mencerminkan% kemampuan,% kebutuhan,%dan%tugas% dari%penggunanya%
!
Secara%efektif% mengoptimalkan% kemampuan%s/w% pengontrolnya%
!
Dikembangkan%dalam% batasan%fisik%dengan% pertimbangan% hardware%tempat% ditayangkan%
!
Mencapai%tujuan%bisnis% sistem%yang% dikembangkan%
Step%3.%%
! Unclear%captions%and%badly%worded%questions%
! Improper%type%and%graphic%emphasis%
(Barnett,%1993)%
(Barnett,%1993)%
www.pnwx.com%
(Barnett,%1993)%
! Misleading%headings%
(Barnett,%1993)%
! Information%requests%perceived%to%be%
irrelevant%or%unnecessary%
(Barnett,%1993)%
!
Information%requests%that%require%one%to% backtrack%and%rethink%a%previous%answer,%or%look% ahead%to%determine%possible%context%
(Barnett,%1993)%
! Cluttered,%cramped%layout%
http://heaven.internetarchaeology.org/%
(Barnett,%1993)%
!
Poor quality of presentation, legibility, appearance, and arrangement%
(Howlett%1995)%
!
Visual%inconsistency%in%screen%detail%presentation% and%with%the%operating%system%
(Howlett%1995)%
!
Lack%of% restraint%in% the%use%of% design% features%and% elements% (Howlett%1995)%
http://www.bombshellmanual.com/%
!
Overuse%of%threeQdimensional%presentations%
(Howlett%1995)%
!
!
Poorly%designed%icons%
(Howlett%1995)%
Bad%typography%
www.%shopinparadise.com%
(Howlett%1995)%
!
Metaphors%that% are%either% overbearing%or% too%cute,%or%too% literal%thereby% restricting%design% options%
Cara/navigasi%yang%mudah%untuk% tahu%isi%sistem%&%bagaimana%cara% keluar% %
Bahasa%yang%mudah%
Penjelasan%aksi%yang% Apa%yang%telihat%mudah%dimengerti% mengubah%sistem% (fungsinya)% % %
%
Peletakan%informasi%yang%tepat%
Tampilan%yang%tersusun,%bersih%&%rapi%
Mengurangi) pekerjaan)):)
!
Ingatan%
%
Intelektual%
Visual%
Motor/ gerakan%
%
Meminimalkan/ menghilangkan% kekhawatiran%gaptek'
Semua%komponen%:% ! ! ! ! ! ! ! ! !
Kontrol %% Teks% Organisasi%layar% Penekanan% Warna% Grafik% Animasi% Pesan% Isian%timbal%balik%
!
HARUS% ! Bermakna%kepada%
pengguna% ! Memiliki%kegunaan/ tujuan%%
! Bagi%informasi%
menjadi%unit%yang% logis,%bermakna,% dan%masuk%akal%
Orgaanisasikan%sesuai%derajat%keterhubungan% data/informasi% https://github.com/peol/960gridder%
!
Sajikan%sesuai%prioritas% informasi% ! ! ! ! ! !
Konvensional% Urutan%penggunaan% Frekuensi%penggunaan% Fungsi/kategori% Kepentingan% Umum%ke%khusus%
Bentuk%kelompok%yang% mungkin% %
Pastikan%hanya%informasi%yang% berkaitan%dengan%kebutuhan% pengguna%yang%dimunculkan%di% layar%
Pastikan%informasi%yang%harus%dibandingkan% terlihat%pada%waktu%yang%sama% %
Standard icon set
Message text in Arial 14, left adjusted
Format of variable contents
? No
Standard icon set
Ok
Message text in Arial 14, left adjusted
No
Widget to widget spacing No window to widget spacing
Do you really want to delete the file myfile.doc from the folder junk ?
Ok
Fixed components
!
Apply
The file was destroyed
Cancel
Ok
Cannot move the file myfile.doc to the folder junk because the disc is full.
Ok
#
Two-level Hierarchy • indentation • contrast
"
Logic of organizational flow
Help mmmm mmm
? mmm mmm Okay
Warning mmm ! mmmm mmm Okay
"
Alignment connects visual elements in a sequence
Grouping by white space
Tip of the day: Monday, Mar 12
mmmm mmm mmm Dismiss
#
Mmmm:
Mmmm:
Mmmm:
Mmmm:
Mmmm:
Mmmm:
Mmmm:
Mmmm:
Mmmm:
Mmmm:
Mmmm: Mmmm:
Berlebihan dalam efek 3D Mmmm: Mmmm: Mmmm:
#
"
WebForms
Bagaimana membedakannya?
GIF Construction Set
Microsoft Access 2.0
Mullet & Sano
MMMM xxx: ____ xxx: ____ xxx: ____
xxx: ____
xxx: ____
xxx: ____
xxx: ____
xxx: ____
NNNN MMMM xxx: ____ xxx: ____ xxx: ____
NNNN xxx: ____ xxx: ____ xxx: ____
xxx: ____
"
# The importance of negative space and alignment
Mullet & Sano
! Mudah%diketahui%% Text set in Helvetica Text set in Times Roman
! Tabs)
%
"
TEXT SET IN CAPITOLS Text set in Braggadocio Text set in Courier #
!
Proper%use%of%typography%% ! 1Q2%typefaces%(3%max)% ! normal,%italics,%bold% ! 1Q3%sizes%max% %
Large
!
Large
Medium
Medium
Small
Small
Readable
Readable Design components to be inviting and attractive
Unreadable
Design components to be inviting and attractive
Design components to be inviting and attractive
Design components to be inviting and attractive
Design components to be inviting and attractive
"
typesetting% ! point%size% ! word%and%line%spacing% ! line%length%% ! Indentation% ! color%
Design components to be inviting and attractive
"
#
Wah, pilihannya apakah begitu penting???
Popkin Software s System Architect
Time & Chaos
Unreadable: Design components to be easy to interpret and understand. Design components to be inviting and attractive
#
Teks abu-abu sukar dibaca
Orientasi teks, sukar dibaca
Regional preferences in Windows 95
Microsoft Word
Signs,%icons,%symbols% ! Pilih%yang%tepat,%baik%abstrak%atau%nyata% ! Icon%design%% ! Selalu%beri%label,%kecuali%yang%sudah%cukup%terkenal% ! Posisi%Image%dan%Type%harus%memiliki%relasi% ! image% family % % ! Konsisten%dalam%penggunaan%image% ! Identifikasi%kebutuhan%% !
Partial icon family
Pilih tingkat abstraksi
#
Mullet & Sano
#
"
"
#
!
Menggunakan%komponen%GUI%yang%sudah%umum%
Window manipulation
Files
Standard typographic controls Toolbars and tooltips
Apa maksud gambar tersebut??
What you see is what you get displays
• Tidak ada tooltips • Salah satu dari tab inii menjelaskan semua makna gambar-gambar tersebut….yang mana???
Pulldown menus
Dialog box item
Novell GroupWise 5.1
Microsoft Powerpoint
Cascading menu
