Interface design

1. Interface design Multimedia and Web

2. Today’s Objectives • Design thoughts • Defined User Interface Design • Introduce User-Center Design • 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 5115USER INTERFACE DESIGN, IMPLEMENTATION AND EVALUATION, by Dr. Loren Terveen

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

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

8. Door number 1 - again. Door #1

9. Door number 2 - again. Door #2

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

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

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

13. Design interfaces • Instructions needed for simple things = Failure • Door operation is simple - should be kept simple. • The door design needs: • Visibility • Actions should be obvious • Design should gives clues about 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 Direct Manipulation? Reduces cognitive load Command prompt?

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

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

18. Digital buttons look like physical buttons so we more easily understand their purpose and function.

19. Digital buttons look like physical buttons so we more easily understand their purpose and function. • Physical design – raise • Action – press and release and something happens

20. Why not?

21. Why not like this? Digital version.

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

23. We know what to do – minimalist design.

24. About two years ago, when I searched CNN I got Web-wide results? But I wanted to search CNN.

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

26. People search CNN, got web results, “I don’t want to search the Web”, they tried again, same results, “Something is wrong”, went back to browsing or gave up. Don’t make me think!

27. Users spend 27 seconds on a Web page. • Users spend 1 minute 49 sec on a site. • Nielsen & Loranger, 2006 • I won’t read much. • I scan the pages. • If it’s hard I’m less likely to use it. Don’t make me think!

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

29. CNN News is now the default (08-18-10)

30. Krug’s Thoughts The truth about the right way to design Web sites…there is no RIGHT way to design sites. It’s a complicated process and the right answer to most of the questions people ask is “it depends” Steve Krug, 2006

31. Krug’s Thoughts Don’t make me think. If something is hard to use, we just don’t use it as much. A page should be self-evident People don’t read they scan pages We satisfice Use Conventions

32. Krug’s Thoughts When you look at a page, it should be self-evident, its purpose must be obvious. Users should know what it is and how to use it without thinking about it too much. Pages have to work at a glance.

33. When creating sites, our job is to try to eliminate as many questions as possible. Source: Steve Krug, 2006, p.12

34. When creating sites, our job is to try to eliminate as many questions as possible. Source: Steve Krug, 2006, p.13

35. Some things that make us think?

36. Great! I can post my resume by clicking “Get Started”. I wonder why it’s a link and not a button like Search Jobs Now. I saw Post Your Resume and Get Started

37. Wait? I clicked “Get Started” to post my Resume. I don’t want to create an account. I must be in the wrong place. This says nothing about uploading a resume.

38. I want to keep shopping so I’ll click CONTINUE SHOPPING. www.homedepot.com

39. The popup is informational. Right? When I click CONTINUE SHOPPING again nothing happens. www.homedepot.com

40. Krug’s Thoughts People don’t read they scan pages

41. We design for this...

43. We think people read like this...

45. But they probably see this…

46. Krug’s Thoughts We satisfice – people often don’t make logical or the best choices – they do what works for them.

47. Krug’s Thoughts Navigation isn’t just a feature of a web site, it is the web site, in the same way that the building, the shelves, and the cash registers are at Sears. Without it, there’s no there there. —Steve Krug

48. All web navigation must answer these questions: • Where am I? • What’s here? • Where have I been? • Where can I go next? • Where's the Home Page? • What’s most important?

49. Krug’s Thoughts Proximity to Pull-down suggests search functions in a similar manner Use expected conventions – deviating from them can be problematic. • Conventional: • Box • Label • Button Search or Go

50. Krug’s Thoughts Proximity to Pull-down suggests search functions in a similar manner http://www.iit.edu/arch/ • Usually: • Box • Label • Button Search of Go