Multimedia Design Principles Pertemuan 17&18

1. Matakuliah : O0414 - Computer / Multimedia Tahun : Feb - 2010 Multimedia Design PrinciplesPertemuan 17&18

2. Learning Outcomes Pada akhir pertemuan ini, diharapkan mahasiswa akan mampu : • Membuat desain rancangan interface dan navigasi untuk aplikasi multimedia sederhana

3. Outline Materi • Information Design • Navigation • Interface Design • Metaphor

4. 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

5. Information Design Is also called : Draws on : Typography Graphic design Linguistics Psychology Ergonomics Computing and other fields • Information Architecture • Communication Design

6. What is Information Design?

7. Basic Principles • Proximity • Alignment • Repetition • Contrast

8. Proximity • To Organize - Group related items together • Color • Red • Green • Orange • Pink • Blue • Violet • Purple • Color • Red • Green • Orange • Pink • Blue • Violet • Purple

11. Proximity • White Space – to rest the eyes

12. 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

13. 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.

14. 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.

17. Repetition • Repeat some aspect of the design • Consistency • To unify all parts of a design

19. Contrast • To create interest • To draw our eyes • Must be VERY different

22. Information Architecture • Linear / Sequential  telling a story • Hierarchical  organized information • Network / Web  exploring

23. Structural Issues • Depth • Breadth

24. Navigation • Key Questions • Where am I? • Where have I been? • Where can I go to? • Navigation Techniques • Browsing • Searching • Site Maps • Indexes

25. Navigation • Providing indicators - ‘you are here’ • Cascading menus • Thumbnail maps • Color coding • Providing ‘Search facilities’ • Sitemaps • Explicit ‘Home’ button

26. 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”

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

28. 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

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

31. 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

32. 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

33. 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

34. Which one is better?

35. Screen Resolutions

36. Screen Resolutions

37. Screen Resolutions • • Resolution is increasing • • Design for lowest and most used resolution for ensured success

38. 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

39. 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

40. Metaphor Example – ReadPlease 2000 http://homepage.mac.com/bradster/iarchitect/readplease.htm

41. Metaphor Example – PowerDVD = Tape Deck

42. 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

43. Exercise