Multimedia & Interface Design

1. Multimedia &Interface Design JMA 308/545 TTH 4:30 – 5:45 College Hall 205

2. JMA 308/545 - Instructor • Dr. Bill Gibbs • Associate Professor in Journalism & Multimedia Arts. • Ph.D. in Instructional Systems from The Pennsylvania State University. • Office 341 College Hall • Office hours – Mon. and Wed. 11:00–1:30, Tues. and Thurs. 12:30-1:30 and by appointment • Phone – 412 - 396-1310 • E-mail – gibbsw@duq.edu

3. JMA 308/545 - Topics • Introduction to Interface Design (ID) • Interface design for the Web • User-centered design • Usability

4. JMA 308/545 – Course goals • Review current terms and concepts related to ID. • Discuss general ID guidelines and principles. • Demonstrate principles underlying effective screen design, navigation control, work flow design.

5. JMA 308/545 – Course goals • Demonstrate prototyping workflow design knowledge and skills. • AE (EX1) (EX2)

6. Understanding tasks/workflow

12. Kristen Feole, Jonathan Gunnell, Rebecca Hosier, Vanessa Scheeler

13. Kristen Feole, Jonathan Gunnell, Rebecca Hosier, Vanessa Scheeler

14. JMA 308/545 – Course goals • Design, development, and evaluate Web sites based on ID and usability principles. • Examples: • http://www.realbusiness.com • http://www.tamborradesign.com/index.htm • (Are these site good?)

15. JMA 308/545 – Course goals • Demonstrate knowledge and skill in usability. • (Noldus Observer) • (AE) • (Old PG-Find top news stories) • (PG- Find customer service) • (PG- Find real estate) • (PG- Discuss layout) • (Highmark) • (Gumberg) • (EX5-EyeTrack) • (Ex8-EyeTrack)

16. JMA 308/545 – Applications & Tools • Course focuses on Web • interface design • tasks/workflow analysis • and usability.

17. Some concepts

18. What is this device and how do you used it? Does the device tell you anything about how to use it? Why do you already know how to use it?

19. Attaches to something? For gripping? For pushing? Device gives clues about how to use it. Also, conventions – we’re use to using pens. For writing?

20. What is this device and how do you used it?

21. What is this device and how do you used it? For holding items? For gripping? Devices gives clues about how to use it Also, conventions

22. What clues are here?

23. What clues are here?

24. Where am I? | Orientation Most important? Links What’s here? Tells me about what’s below Additional stuff?

26. Location/orientation Main content area Additional stuff? Clues: Size, Positioning, Grouping What’s here & how to get around

27. What clues are here?

28. Important item Important & Related items Secondary importance, smaller type

29. Important item Important & Related items Clues: Size, Positioning, Grouping Secondary importance , smaller type

31. Shifting the position of headline will confuse users. We get clues by position and proximity.

32. Where am I? What’s here? Current offerings? Additional stuff?

33. We get clues by the size and position of content sections.

35. What’s important here? How do you know?

36. We get clues by visual hierarchy.

37. We get clues by visual hierarchy.

38. What does this visual hierarchy suggest? Computer Books Books Music Sports Hobbies MP3 Players Web page

39. What does this visual hierarchy suggest? Computer Books Books Music Sports Hobbies MP3 Players All these sections are part of the Computer Books section.

40. A better visual hierarchy • Books • Technical • - Programming • - Hardware • - Software • Novels • Biographies Technical Books Programming A specific book….Using Perl by Jane Smith, 2009…

41. Visual hierarchy can direct user attention.

43. Where did you look first? Then next?

44. We get clues by structure and layout.

45. We get clues by structure and layout. Structured layouts easier to perceive - GRIDs

48. Conventions • Conventions also help us figure out a lot about a site: • http://english.sina.com/index.html • even if we can't understand the language • http://www.sina.com.cn/ • http://www.msn.com • New icons but unsure about their meaning