Interface design

1. Interface design Multimedia and Web

2. Today’s Objectives • Defined User Interface Design • Introduce User-Center Design • Guidelines • Project portfolio page - Check Web accounts

3. Is it easy to design interfaces?

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

5. Design interfaces: Examples Should be able to look at a home page and figure out what the site is about within a few seconds. http://www.marshill.org/ http://marshillglobal.com/

6. Design interfaces: Examples 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 Sears. Without it, there’s no there there. —Steve Krug http://www.fedex.com/us/office/index.html (Mystery meat) http://www.microsoft.com/germany/msdn/400differences/ http://www.etsy.com/color.php http://www.juliegarwood.com/

7. Design interfaces: Examples 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?

8. Design interfaces: Examples http://www.iit.edu/arch/

9. Proximity to Pull-down suggests search functions in a similar manner • Conventional: • Box • Label • Button Search or Go

10. Proximity to Pull-down suggests search functions in a similar manner Use expected conventions – deviating from them can be problematic. • Usually: • Box • Label • Button Search of Go

11. Design interfaces: Examples • http://NBA.com

14. Clickable Logo Search Navigation ADs Link to content

16. Breaks up flow

17. Defining ID Terms

18. Defining ID • “Whenever new technology is introduced into society, there must be a counterbalancing human response - high touch- or the technology is rejected.”—John Naisbit - Megatrends - 1982

19. Defining ID • The capacity for perception depends on the amount, the kind, and the availability of past experiences.... • We see familiar things more clearly than we see objects about which we have no stock of memories.— Aldous Huxley • http://www.webstyleguide.com/interface/index.html

20. Defining ID –Attention scarcity Often designers of information systems wrongly perceive a design problem as information scarcity instead of attention scarcity. They build systems that excel at supplying more and more information but what is needed are systems that filter out unimportant information. (Herbert Simon, 1996).

21. Defining ID –Attention scarcity Attention is an important way to measure the success of a message. Attention scarcity - a serious concern for organizations using the Web for information distribution.

22. Defining ID – Evolution of ID • With personal computers during the 80s and 90s, users’ tolerance for hard-to-use software began to decrease. • People had higher expectations of the software running on their computers than they had for software running on the corporate mainframe. • The need for improved interfaces…

23. Defining ID – Evolution of ID • From command prompts • What does the command line prompt afford?

24. What does Windows afford?

25. Defining ID – Evolution of ID • To more graphic user interactions • GUI – Graphical user interface • What does a menu afford?

26. Defining ID • An interface is a representation of a problem/task • Display/presentation • Operations • A well-designed interface can transform a task, making it much simpler

27. Defining ID Source: Norman, D. (2002). The Design of Everyday Things. P.24.

28. Defining ID Mapping Source: Norman, D. (2002). The Design of Everyday Things. P.24.

29. Titanic Exhibit Video Windows Control Direct Mapping

30. Defining ID • One approach to present a problem: Identify as many sets of any 3 numbers from 1 to 9 that sum to 15. • e.g., 1, 9, 5 is one set because 1+9+5 = 15

31. 4 3 8 1 9 5 2 7 6 Defining ID Identify as many sets of any 3 numbers from 1 to 9 that sum to 15. Here is another way to present the problem

32. Human computer interaction HCI Cognitive Psychology Algorithms and programming Systems engineering Usability Anthropology Graphic design Interface design Computer programming

33. Defining ID • HCI is the study of how humans interact with computer systems. • When users interact with a computer system they do so through an interface.

34. Defining ID • User interface (UI): computer-mediated means to facilitate communication between human and an artifact. • User Interface (UI) - means by which humans interact with a computer to fulfill a purpose. • The term user experience (UX) recognizes that users have experiences that have been orchestrated by designers.

35. User input Underlying Hardware, Software, Interaction devices User interface System Output

36. Defining ID • Communication Channel – something that mediates between the user and the computer • Controls input and output - translator • User says/does something • Interface translates it into computer language • Computer does something • Interface translates into user language

37. Users don’t just look at information, they interact with it in novel ways that have no precedents in paper document design; therefore, web designers must be versed in the art and science of interface design. Lynch & Horton http://www.webstyleguide.com/wsg3/4-interface-design/index.html

38. Graphic user interface (GUI) comprises: • interaction metaphors, images, and concepts used to convey function and meaning on the screen. • detailed visual characteristics of components of the interface, and • the functional sequence of interactions. • Lynch & Horton • http://www.webstyleguide.com/wsg3/4-interface-design/index.html

39. Some ID professional terms? • interaction designers - people involved in the design of all the interactive aspects of a product • usability engineers - people who focus on evaluating products, using usability methods and principles • web designers - people who develop and create the visual design of websites, such as layouts • information architects - people who come up with ideas of how to plan and structure interactive products • user experience designers - people who do all the above but who may also carry out field studies to inform the design of products

40. Defining ID What makes an interface good?

41. Defining ID • What is a good interface? • A good ID encourages an easy, natural, and engaging interaction between users and system. • BUT…

42. Defining ID • Easy, natural, good, bad, and engaging are subjective. • We need to be concerned with whether a user interface is good, bad, or poor, etc. in relation to usability. • Can our users use it effectively.

43. Defining ID • What’s usability? • … the extent to which a product can be used by specified users to achieve specified goals with effectiveness. (BSI, 1998; Stone, Jarrett, Woodroffe, & Minocha, 2005)

44. Some problems with bad UI design • User frustration • Reduced productivity • Increased costs • Lost sales • Lower efficiency • Jeopardized safety • Etc.

47. What should we do? • Understand human behavior and apply this information to the user interface design. • Employ consistency placements that have become the standards in website design. • Use expected conventions – deviating from them can be problematic.

48. User Centered Design Introduction

49. What is User-Centered Design? • Places the person (as opposed to the 'thing') at the center. • Focuses on cognitive factors (such as perception, memory, learning, problem-solving, etc.) as they impact interactions. • http://www.stcsig.org/usability/topics/articles/ucd%20_web_devel.html

50. What is User-Centered Design? • To improve a system’s usability, UCD strives to understand: • users of the system • tasks • environment (organizational, social, and physical)