1. Interface design Multimedia and Web

2. Today’s Objectives Layouts & CSS Positioning Introduce User-Center Design Design Activity

3. CSS Positioning

4. </div Positioning: Document flow

5. 1. BANNER 2. NAVIGATION 3. CONTENT 1.BANNER 2 3.CONTENT FLOAT LEFT L Normal Flow

6. 1. BANNER 2. NAVIGATION 3. CONTENT 1.BANNER 2 3.CONTENT FLOAT RIGHT R Normal Flow

7. Positioning CSS position property lets you control how and where a web browser displays elements. Four types of positioning:  Absolute  Relative  Fixed  Static

8. Absolute Positioning Absolute : determine element’s location by left, right, top, or bottom position in pixels, ems, or percentages. Move out of the normal flow of the page as determined by the HTML.

9. Detached from document flow. Elements fill-in the space left by an absolutely positioned element. Absolute Positioning

10. AP depends on positioning of other elements. AP elements placed relative to the boundaries of closest positioned ancestor.

11. Absolute Positioning Tag positioned relative to browser if it has absolute position and is not inside any other tag with absolute, relative, or fixed positioning. Tag positioned relative to edges of another element if it’s inside another tag with absolute, relative, or fixed positioning.

12. Relative positioning Relative. Element placed relative to its current position in the normal document flow. Other elements do NOT fill in the space left in the document flow.

13. Relative positioning A benefit of relative positioning is to set a new point of reference for absolutely positioned elements that are nested inside it. Relative positioning creates a positioning context for nested tags.

14. Fixed Positioning Element is locked into place on the screen. When scrolling, fixed elements remain onscreen. Useful for creating a fixed sidebar.

15. Static Positioning Normal positioning method – what an element appears in the normal document flow.

16. Setting Positioning Values Any of the valid CSS measurements— pixels, ems, percentages, etc. can be used. You can also use negative values for positioning.

17. Setting Positioning Values Position element from the top and left edges of window: #banner {position: absolute; left: 100px; top: 50px; width: 760px;}

18. Layouts

19. Fixed Width - regardless of browser window’s width, page content’s width remains the same. Liquid – layout adjusts to fit the browser’s width. Elastic. Fixed width with type size flexibility. Define page width using em. An em changes size when browser’s font size changes, page width based on the browser’s base font size.

20. Review | Defining ID

21. Attention scarcity Often designers of systems wrongly perceive a design problem as information scarcity instead of attention scarcity. …what is needed are systems that filter out unimportant information (Herbert Simon, 1996).

22. Need to filter out the unimportant Most Important?

23. Filter out the unimportant by: Size Shape Proximity Most Important?

24. Defining Interface Design Computer-mediated means to facilitate communication between human and an artifact. Communication Channel – something that mediates between the user and the computer.

25. Goal, tasks, etc. Make call, get money, create graphics, make purchase, etc… INTERFACE Interface Between the person and the tasks he/she needs to perform is an Interface – 2-way communication. Tasks Person

26. Defining ID  A good ID encourages an easy, natural, and engaging interaction between users and system… BUT  Must be concerned with whether an interface is good, bad, or poor, etc. in relation to usability.

30. Task orientation

31. Is it usable? Effective? Efficient? Enjoyable?

32. Definitions Six main qualities of a successful user interface: usefulness: are user’s needs satisfied by the interface functionality? learnability: how easy is it for the user to fulfill basic tasks when using the system for the first time? efficiency: after the user knows the interface, how fast is s/he able to accomplish the given tasks? ease of memorization: when the user returns to the interface after a while, how easily does s/he find the various functions again? reliability: is the interface conceived so user makes as few mistakes as possible? user-friendliness : do users like using the interface?

33. User Centered Design Model & approaches

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

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

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

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

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

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

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

41. UCD – major activities

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

43. 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)

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

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

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

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

48. 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?

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

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

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

53. I need to find information about grants and research, what electronic resources does the library have, etc.

54. User-Centered Design Seeks to answer questions What hardware and software do the users have? What relevant knowledge and skills do users already have? What functions do users need from this interface? How do they currently perform these tasks? Why do users currently perform 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?

55. Site development processes Examples

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

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

58. 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)

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

60. Step 2: Create charter/specifications document:  what you intend to do and why,  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)

61. 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)

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

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

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

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

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

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

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

69. Validator http://jigsaw.w3.org/css-validator/ http://validator.w3.org/