Matakuliah
Tahun
: O0414 - Computer / Multimedia
: Feb - 2010
Multimedia Design Principles
Pertemuan 17&18
Learning Outcomes
Pada akhir pertemuan ini, diharapkan mahasiswa akan
mampu :
• Membuat desain rancangan interface dan navigasi untuk
aplikasi multimedia sederhana
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 positive 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 Design
Is also called :
• Information Architecture
• Communication Design
Bina Nusantara
Draws on :
• Typography
• Graphic design
• Linguistics
• Psychology
• Ergonomics
• Computing
• and other fields
What is
Information Design?
Bina Nusantara
Basic Principles
•Proximity
•Alignment
•Repetition
•Contrast
Bina Nusantara
Proximity
• To Organize - Group related items together
Color
• Red
• Green
• Orange
• Pink
• Blue
• Violet
• Purple
Bina Nusantara
Color
• Red
• Green
• Orange
• Pink
• Blue
• Violet
• Purple
Bina Nusantara
Bina Nusantara
Proximity
• White Space – to rest the eyes
Bina Nusantara
Alignment
• Every items should have a connection, invisible or not
• 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
Type of Alignment
• Left aligned
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh.
Nunc varius facilisis eros. Sed erat. In in velit quis arcu ornare laoreet.
Curabitur adipiscing luctus massa. Integer ut purus ac augue commodo
commodo. Nunc nec mi eu justo tempor consectetuer. Etiam vitae nisl.
In dignissim lacus ut ante.
• Right aligned
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh.
Nunc varius facilisis eros. Sed erat. In in velit quis arcu ornare laoreet.
Curabitur adipiscing luctus massa. Integer ut purus ac augue commodo
commodo. Nunc nec mi eu justo tempor consectetuer. Etiam vitae nisl.
In dignissim lacus ut ante.
Bina Nusantara
Type of Alignment
• Centered
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh.
Nunc varius facilisis eros. Sed erat. In in velit quis arcu ornare laoreet.
Curabitur adipiscing luctus massa. Integer ut purus ac augue commodo
commodo. Nunc nec mi eu justo tempor consectetuer. Etiam vitae nisl.
In dignissim lacus ut ante.
• Justified
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh.
Nunc varius facilisis eros. Sed erat. In in velit quis arcu ornare laoreet.
Curabitur adipiscing luctus massa. Integer ut purus ac augue commodo
commodo. Nunc nec mi eu justo tempor consectetuer. Etiam vitae nisl.
In dignissim lacus ut ante.
Bina Nusantara
Bina Nusantara
Bina Nusantara
Repetition
• Repeat some aspect of the design
• Consistency
• To unify all parts of a design
Bina Nusantara
Bina Nusantara
Contrast
• To create interest
• To draw our eyes
• Must be VERY different
Bina Nusantara
Bina Nusantara
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
–
–
–
–
Bina Nusantara
Browsing
Searching
Site Maps
Indexes
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
Bina Nusantara
Bina Nusantara
Pic taken from : http://www.flickr.com/photos/danrubin/1365504132/
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
640x480
800x600
1024x768
1152x864
1280x1024
: 5.3 %
: 13.2 %
: 44.4 %
: 5.2 %
: 31.9 %
From Screen-Resolution.com
Bina Nusantara
2001 Statistic
640x480
800x600
1024x768
1152x864
1280x1024
From statmarket.com
: 5.7 %
: 52.5 %
: 32.7 %
: 2.3 %
: 2.9 %
Screen Resolutions
Bina Nusantara
Screen Resolutions
• 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
• Keep it simple
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
Exercise
Bina Nusantara