Multimedia Design PrinciplesPertemuan 17&18

Matakuliah : O0414 - Computer / Multimedia

Tahun : Feb - 2010

Bina Nusantara

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

“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

Information DesignIs also called :

• Information Architecture• Communication Design

Draws on :

• Typography• Graphic design• Linguistics• Psychology• Ergonomics• Computing• and other fields

Bina Nusantara

What is

Information Design?

Bina Nusantara

Basic Principles

Bina Nusantara

•Proximity•Alignment•Repetition•Contrast

•Proximity•Alignment•Repetition•Contrast

Proximity

• To Organize - Group related items together

Bina Nusantara

Color • Red• Green• Orange• Pink • Blue• Violet• Purple

Color • Red• Green• Orange• Pink • Blue• Violet• Purple

Color • Red• Green• Orange• Pink

• Blue• Violet• Purple

Color • Red• Green• Orange• Pink

• Blue• Violet• Purple

Bina Nusantara

Bina Nusantara

• White Space – to rest the eyes

Bina Nusantara

Proximity

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 alignedLorem 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 alignedLorem 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

• CenteredLorem 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.

• JustifiedLorem 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

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

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

Bina Nusantara Pic taken from : http://www.flickr.com/photos/danrubin/1365504132/

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 Statistic640x480 : 5.3 %

800x600 : 13.2 %

1024x768 : 44.4 %

1152x864 : 5.2 %

1280x1024 : 31.9 %From Screen-Resolution.com

640x480 : 5.7 %

800x600 : 52.5 %

1024x768 : 32.7 %

1152x864 : 2.3 %

1280x1024 : 2.9 %From statmarket.com

Bina Nusantara

Screen Resolutions

Bina Nusantara

Screen Resolutions

• Resolution is increasing

• Design for lowest and most used resolution for ensured success

• 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

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

Bina Nusantara

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

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