Matakuliah : T0732 / Sistem Multimedia

Tahun : 2007

Multimedia Design Principles

Pertemuan 9
 Learning Outcomes
Pada akhir pertemuan ini, diharapkan mahasiswa akan
mampu :
• memilih desain yang baik untuk informasi, interface dan
navigasi aplikasi multimedia

Bina Nusantara
 Outline Materi
• Information Design
• Navigation
• Interface Design
• Metaphor

Bina Nusantara
 Why Design?
“People need to get into your software in about
20 seconds and get immediate possitive
feedback and reward; then they are smiling and
having a good time and they want to go further.”
– Trip Hawkins, Electronic Arts Chairman.

Bina Nusantara
 Information Architecture
• Linear / Sequential  telling a story

• Hierarchical  organized information

• Network / Web  exploring

Bina Nusantara
 Structural Issues
• Depth

• Breadth

Bina Nusantara
 Navigation
• Key Questions
– Where am I?
– Where have I been?
– Where can I go to?
• Navigation Techniques
– Browsing
– Searching
– Site Maps
– Indexes
Bina Nusantara
 Navigation
• Providing indicators - ‘you are here’
– Cascading menus
– Thumbnail maps
– Color coding
• Providing ‘Search facilities’
– Sitemaps
– Explicit ‘Home’ button

Bina Nusantara
 Usability Attributes
• Match between system and the real world
• User control and freedom  support undo and redo
• Consistency and standards  “exit” or “quit” ?
• Error prevention
• Flexibility and efficiency of use  expert/basic mode
• Aesthetic and minimalist design
• Help users recognize, diagnose, and recover from
errors  understandable error message

From Jacob Nielsen’s “Ten Usability Heuristics”

Bina Nusantara
 Interface Design Issues
• Hyperlinks, icons, and buttons
• Alignment
• Text
• Color
• Screen size and resolutions
• And so on .…

Bina Nusantara
 Hyperlinks, Icons, and Buttons
• Use common colour to indicate the state of hyperlinks
(selected, rollover, or clicked)
• Provide icons/buttons that make sense

• Do not force user to learn many new/special icons

• How the buttons is activated/selected  highlight or
shape change
Bina Nusantara
 Alignment
• Both ‘horizontal’ and ‘vertical’ elements on the page.
• Good alignment contributes to cleaner communication
• Centered text is visually unsophisticated and increases
reading time
• Uniformity of alignment of elements throughout the
website

Bina Nusantara
 Text
• Takes longer to read off a screen than from a book
• Consider hierarchy of information
• Present key information first
• Writing - direct, concise, short paragraphs and bulleted
lists
• Limit use of typefaces - maximum 2
• Sans-serif faces are more readable

Bina Nusantara
 Color
• Use simple combinations  color theory
• Warm colors look larger than cool colors

• Bright colors larger than dark ones.

• Intense, saturated color can cause eye strain when used

in quantity so don’t use it as background

Bina Nusantara
 Which one is better?

Bina Nusantara
 Screen Resolutions
2006 Statistic 2001 Statistic
640x480 : 5.3 % 640x480 : 5.7 %
800x600 : 13.2 % 800x600 : 52.5 %
1024x768 : 44.4 % 1024x768 : 32.7 %
1152x864 : 5.2 % 1152x864 : 2.3 %
1280x1024 : 31.9 % 1280x1024 : 2.9 %
From Screen-Resolution.com From statmarket.com

• Resolution is increasing
• Design for lowest and most used resolution for
ensured success
Bina Nusantara
 Interface Design Pointers
• Define a control area and a stage area

• Choose muted background images and appropriate

button graphics
• Use visual depth to indicate importance
• KISS
Bina Nusantara
 Metaphor
• A complex application can be understood more easily if
the user interface is depicted in a way that resembles
some commonplace system
• Appropriate metaphor allow user to learn/remember
minimal rules or procedures of the application

Bina Nusantara
 Metaphor Example – ReadPlease 2000

Bina Nusantara http://homepage.mac.com/bradster/iarchitect/readplease.htm

 Metaphor Example – PowerDVD = Tape Deck

Bina Nusantara
 Metaphor Issues
• Used for an application not one button
• Several metaphors in one application
• Metaphor isn’t always necessary
• Stick to metaphors that will be understood by most
users
• Some metaphors don't cross cultural boundaries

Bina Nusantara
http://www.keyosk.co.uk/pr_letter-boxes-us-style-mailbox-891.shtml http://commons.wikimedia.org/wiki/Image:Japan_Mailbox_Red.jpg
 Q&A

Bina Nusantara