1. Interface design Multimedia and Web

2. Today’s Objectives Review: Defining Interface Design HTML Introduce User Research User-Center Design Design Activity Project portfolio page

9. Review: Defining Interface Design

10. Defining ID: What is an interface? An interface is a representation of a problem/task A well-designed interface can transform a complex task, making it much simpler

11. Defining ID: What is an interface? Communication Channel – something that mediates between the user and the computer. Interface mediates the conversation a person has with a digital product.

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

13. 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.

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

15. Defining ID: What is an interface? Interface design doesn’t start with pictures. It starts with understanding of people. (Tidwell, J. 2011, p.2)

16. Defining ID: What is an interface? Step 1 of ID: Figure out what users are really trying to accomplish. Art of interface design lies in solving the right problem.

17. Solving the right problem. Communication channel Mediates between user and computer. Representation of problem/task When we think of ID in these terms Defining ID: What is an interface? …versus product, we must think of & begin with users. Product

18. The 8 golden rules of interface design 1. Strive for consistency 2. Cater to universal usability Cater to universal usability 3. Offer informative feedback Offer informative feedback 4. Design dialogs to yield closure Design dialogs to yield closure 5. Prevent errors 6. Permit easy reversal of actions Permit easy reversal of actions 7. Support internal locus of control (Sort) Support internal locus of control (Sort) 8. Reduce short term memory load Reduce short term memory load

19. HTML Quick introduction

20. HTML Allows you to structure documents and assign meaning to content. Used for describing meaning of content.

21. In the summer of 2009, I developed Mapping Temporal Relations of Discussions Software (MTRDS) as a tool to analyze the temporal aspects of online course discussions. “This Web-based prototype imports discussion files from a course management system and diagrams the temporal aspects of conversations.” From the diagrams, one can observe the general time and date of discussion activity and individual patterns of interactivity. I am seeking funds to assist me in further developing an intelligent online tool that provides semantic as well as temporal analyses of online educational conversations. Introduction Educational Conversations

22. Visual vs. Structural Use HTML to:  Structure document  Meaningful markup Use CSS for styling

23. HTML 5 Emphasizes semantics. Removes some presentational elements. Introduces new elements such as header, footer, article, sections, nav. Use elements that best describe your content. Styling is done with CSS

24. HTML 5 | Why it’s important. Improved accessibility Improved interoperability – content being available on assistive technologies and on mobile and tablet devices Improves SEO Efficient coding & improved maintenance.

25. HTML 5 Doc Type Ensure browsers render properly and let’s HTML validators know you are using HTML 5 syntax. HTML validators

26. HTML: Document structure HTML HEAD – information about the Web page. BODY – the actual contents of the Web page

27. HTML: Document structure

28. HTML 5: Document structure Hello World, it's our first page! Hello, world!

29. HTML 5 | News content elements Section Article Nav Header Aside Footer

30. Header | Hgroup | Example Interface design Interface patterns

31. By the Sea> This is the title… Categories Archives

32. By the Sea> This is the title… Categories Archives

33. Progressive enhancements Provide universal access – start with clear content and well-structured semantic HTML markup. Strict separation of layout and presentation. Layer advanced behavior and styling but always ensure accessible/universal access. (Arker, T., Toland, P. Jehl, S., & Wachs, M. 2010, p. 8)

35. Offer informative feedback

37. Cater to universal usability

38. Design dialogs to yield closure

39. Permit users to be in control of interface. Support internal locus of control

40. Easily remove item from cart. Permit easy reversal of actions

41. User Research Read: Chapter 2, Designing interfaces in Blackboard.

42. User Research It’s challenging to understand the real issues that trigger users’ interactions with a website.

43. Think of a travel site… If these people are users, how will that impact your design?

44. User Research Empirical discovery - the only really good way to obtain information about users. Characterize kinds of people who will be using your design. Go out and meet them.

45. User Research Each user is unique - one person finds something difficult, the next one won’t. Figure out what’s generally true about your users. What are common behavior patterns.

46. User Research - Find out: Users’ goals in using the site Tasks they undertake to achieve goals Language and words they use Skill using software similar to what you’re designing Attitudes toward the kind of thing you’re designing

47. User Research Describe audience in terms of how and why they might use your site. Without valid description of user, design will likely not proceed well.

48. User Research - methods Direct observation Case studies Surveys Personas - This is a design technique that “models” the target audiences.

49. Thinking about your interface. Think of your interface design as a conversation. You modify your conversation based on the person with whom you are speaking:  specific vocabulary you use  level of knowledge  body language, etc.  Video Video

52. Do users expect a tightly focused exchange about something very specific?

53. Or do they prefer a conversation that’s more of a free-ranging exploration?

54. Thinking about your interface. How much openness is there in the interface? Too little, and your users feel trapped Too much, and they stand there paralyzed, not knowing what to do next

55. How much effort are your users willing to spend to learn your interface? A lot  Photoshop  Dreamweaver A little  Website

56. User Centered Design Model & approaches

57. 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. Looks at user actions/activity. http://www.stcsig.org/usability/topics/articles/ucd%20_web_devel.html

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

59. 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

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

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

62. Source: Lynch & Horton, http://webstyleguide.com/wsg3/1-process/7-development-process.html The Site Development Process Model Lynch & Horton

63. Source: Lynch & Horton, http://webstyleguide.com/wsg3/1-process/7-development-process.html The Site Development Process Lynch & Horton Broad input & participation in beginning. Narrow focused team at the end. Necessary, to finish your site on time and on budget.

64. UCD – major activities

65. What is involved in the process 1.Identifying needs, establishing requirements for the user experience (understand the problem and your users) 2.Developing alternative designs to meet needs 3.Building interactive prototypes that can be communicated and assessed 4.Evaluating what is being built throughout the process and the user experience it offers

66. User-Centered Design Major activities: 1. Understand/specify the context of use 2. Specify user and organization requirements 3. Create prototypes 4. Evaluate designs with users against requirements. (British Standards Institution 1998; Stone, Jarrett, Woodroffe, & Minocha, 2005)

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

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

69. User-Centered Design Major 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.

70. User-Centered Design  Major Steps 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.

71. User-Centered Design 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?

73. What are the classes like, do they have what I want in my major, what activities are there, etc.

74. Costs, will she be safe, will she be able to get a job, how good are the professors, etc.

75. Do you think Lauren’s picture is on the site, how good is this school, she’s in the theater department, etc.

76. I need to find information about grants and research, what electronic resources are available, etc.

77. User-Centered Design Seeks to answer questions What hardware, software, and browsers do the users have? 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? What do users expect from this Web site? How do users expect this interface will work?

78. Site development processes

79. Site Development Process (Lynch & Horton) Site definition and planning Information architecture Site design Site construction Site marketing Tracking, evaluation, and maintenance Source: Lynch & Horton, http://webstyleguide.com/wsg3/1-process/index.html

80. Source: Lynch & Horton, http://webstyleguide.com/wsg3/1-process/7-development-process.html The Site Development Process Lynch & Horton

81. The first step to design web site is to define your goals. Careful planning and a clear purpose are the keys to success in building web sites, particularly when working with a development team. Source: Lynch & Horton, http://webstyleguide.com/wsg3/1-process/index.html Site Development Process (Lynch & Horton)

82. Step 1: Gather development team, analyze needs/goals, and work through development process to refine plans. Source: Lynch & Horton, http://webstyleguide.com/wsg3/1-process/index.html Site Development Process (Lynch & Horton)

83. Step 2: Create charter/specifications document:  what you intend to do and why, for whom,  what technology and content,  how long will process take,  how much you will spend, and  how will you assess the results of your efforts. Source: Lynch & Horton, http://webstyleguide.com/wsg3/1-process/index.html Site Development Process (Lynch & Horton)

84. Charter document is crucial to creating a successful site: Charter document is blueprint and will help keep project focused on the agreed- on goals and deliverables. Site Development Process (Lynch & Horton)

85. Development process Teague (2009): 1. Plan site 2. Build site 3. Deploy site 4. Iterate the process

86. Plan site 1. Know the problem and users – critical!!! 2. Make sketches 3. Define site structure – 4. Decide page flow  Fixed width/fluid height  Etc. Source: Robbins, J.N. (2007), Learning Web Design. O’Reilly. Information Architecture

87. Plan site 3. Make wireframes  Help in planning structure of pages  Serve as blueprints for development  Should include placement and measurement of elements in pixels  Wireframe Example Wireframe Example

88. Plan site Visual compositions (comps) Convey the visual design It is often useful to make alternative designs Photoshop/Illustrator, etc.

89. Build Cutting Chrome  Use background images  Transparent png (Example)Example  CSS sprites  Photoshop/Illustrator, etc.

90. Build Prototype | show interactivity  Define markup structure  Create CSS | program Organize CSS Programming

91. Deploy Alpha – site not released Beta – site made available to public – not promoted. Iterations