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/marshillglobal.com

6. Design interfaces: Examples http://www.fedex.com/us/office/index.html (Mystery meat) http://www.fedex.com/us/office/index.html http://www.microsoft.com/germany/msdn/400differences/ http://www.etsy.com/color.php http://www.juliegarwood.com/ 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 KrugSteve Krug

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. Conventional : Box Label Button Search or Go Proximity to Pull-down suggests search functions in a similar manner

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

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

14. Clickable Logo Navigation ADs Search 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 Source: Norman, D. (2002). The Design of Everyday Things. P.24. Mapping

29. Titanic Exhibit ControlVideo Windows 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. Defining ID 1 2 34 5 67 8 9 Here is another way to present the problem Identify as many sets of any 3 numbers from 1 to 9 that sum to 15.

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

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 System Output User interface Underlying Hardware, Software, Interaction devices

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)

51. What is User-Centered Design? Four main principles: 1. Active involvement of users 2. Appropriate allocation of function between user and system 3. Iteration of design solution 4. Multidisciplinary design teams (BSI, 1998; Stone, Jarrett, Woodroffe, & Minocha, 2005)

52. What is User-Centered Design? Four main activities: 1. Understand/specify the context of use 2. Specify user and organization requirements 3. Create prototypes 4. Evaluate designs with users against requirements. (BSI, 1998; Stone, Jarrett, Woodroffe, & Minocha, 2005)

53. SOURCE: http://www.usability.gov/methods/process.html

54. Requirement Definition System & Software Design Implementation Unit Testing Integration & System Testing Operation & Maintenance Waterfall Life Cycle Model

55. Requirement Definition System & Software Design Implementation Unit Testing Integration & System Testing Operation & Maintenance Waterfall Life Cycle Model User involvement Sequential phases Each phase complete before the next

56. Iterative design process User Testing Design Prototyping e.g., Agile model

57. Iterative design process User Testing Design Prototyping Involve users throughout the process Process is highly iterative

58. Iterative design process Steps 1. Requirements-definition - client gives developers information about functionality and requirements. 2. Establish design for the project. 3. Develop prototypes that reflect the emerging design, using the programming language or development environment. 4. Submit prototypes to client for feedback and modifications. 5. Revise prototypes to reflect the client’s changes. 6. Repeat steps 3 and 5 for additional part of the system.

59. What is User-Centered Design? UCD seeks to answer questions about users and their tasks and goals such as: Who are the users of this 'thing'? What are the users’ tasks and goals? What are the users’ experience levels with this thing, and things like it? How can the design of this ‘thing’ facilitate users' cognitive processes?

60. What is User-Centered Design? What hardware, software, and browsers do the users have? What are the users’ preferred learning styles? How much training, if any, will the users receive? What relevant knowledge and skills do the users already possess? What functions do the users need from this interface? How do they currently perform these tasks? Why do the users currently perform these tasks the way they do? What information might the users need and in what form do they need it? What do users expect from this Web site? How do users expect this interface will work?