9 - Prinsip Desain Multimedia

Matakuliah Tahun

: T0732 / Sistem Multimedia : 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 – – – – 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

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

2001 Statistic 640x480 800x600 1024x768 1152x864 1280x1024

: 5.7 % : 52.5 % : 32.7 % : 2.3 % : 2.9 %

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