1. Interface design Multimedia and Web

2. Today’s Objectives Defined User Interface Design Introduce User-Center Design Design guidelines Check Web accounts FTPing

3. IS IT EASY TO DESIGN INTERFACES?

4. What do you think happens here?

5. Is it easy to design interfaces? Let’s see a simple interface  A door  A couple simple functions, open and close Materials by CS 5115 USER INTERFACE DESIGN, IMPLEMENTATION AND EVALUATION, by Dr. Loren Terveen

6. How does this door open? Door number 1. Materials by CS 5115 USER INTERFACE DESIGN, IMPLEMENTATION AND EVALUATION, by Dr. Loren Terveen

7. How does this door open? Door number 2. Materials by CS 5115 USER INTERFACE DESIGN, IMPLEMENTATION AND EVALUATION, by Dr. Loren Terveen

8. Door #1 Door number 1 - again.

9. Door number 2 - again. Door #2

10. How does this door open? Door number 3.

11. No instructions needed. Door number 3. The door affords the act of pushing. We know to push outward by looking at it. Affordance!

12. The design of the control tells us how to use it Door number 3. The door affords the act of pushing. We know to push outward by looking at it. Affordance! Clues about functionality

13. Design interfaces Instructions needed = Failure Door operation is simple and should be kept simple. The door design needs:  Visibility  Actions should be obvious  Design gives clues about it functionality

14. Interfaces We often use things with which people are familiar to help them understand how controls can be used in the digital world.

15. Interfaces Command prompt? Direct Manipulation? Reduces cognitive load

16. OPEN Which of the following two items most looks like a button? Why?

18. Buttons look like physical buttons to make them easier to understand their purpose and function.

19. We make buttons look like physical buttons so they are easier to understand?

20. Physical design – raise Action – press and release and something happens

21. Why not?

22. Why not like this? Digital version.

23. Design interfaces Think about interfaces that implement web search. Evaluate from the perspective of knowing where and how to enter a search query.

24. We know what to do – minimalist design.

27. Don’t make me think! When I search CNN I get Web-wide results? But I want to search CNN.

28. Don’t make me think! So what’s the big deal?

29. Don’t make me think! Users spend 27 seconds on a Web page. Users spend 1 minute 49 sec on a site. Nielsen & Loranger, 2006

30. Limited amount of time to convey message. Don’t waste time by making people think about the design.

31. CNN News is now the default (08-21-09)

32. Website examples Let’s look at a few websites.

33. Design interfaces: Examples http://www.sonicdrivein.com/home.jsp#/home http://www.staples.com (text size) http://www.staples.com

34. Design interfaces: Examples http://www.zincbistroaz.com/

35. Design interfaces: Examples http://www.bicsportsurfboards.com/

36. Design interfaces: Examples http://nfl.com/

37. Design interfaces: Examples http://www.webpagesthatsuck.tv/images/marshill.html

38. Design interfaces: Examples Should be able to look at a home page and figure out what the site is about within four seconds. http://www.webpagesthatsuck.tv/images/marshill.html http://www.marshill.org/ http://marshillglobal.com/marshillglobal.com

39. Design interfaces: Examples http:// www.3cgraphics.com / http:// www.3cgraphics.com /  What is it about?  What’s good/bad?