CSS Positioning for Web Interfaces

1. Interface design Multimedia and Web

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

3. CSS Positioning

4. <div id=“wrapper”> <div id=“banner”> </div <div id=“nav”> </div> <div id=”mainContent”> </div> <div id=“siteInfo”> </div> </div> Positioning: Document flow

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

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

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. Absolute Positioning Detached from document flow. Elements fill-in the space left by an absolutely positioned element.

10. Absolute Positioning • AP depends on positioning of other elements. • AP elements placed relative to the boundariesof 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. Layouts 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. Interface Person Tasks Goal, tasks, etc. Make call, get money, create graphics, make purchase, etc… INTERFACE Between the person and the tasks he/she needs to perform is an Interface – 2-way communication.

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. Task orientation 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 conceivedso 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. Waterfall Life Cycle Model Requirement Definition System & Software Design Implementation Unit Testing Integration & System Testing Operation & Maintenance

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

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

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

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

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

41. UCD – major activities

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

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

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

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

46. User-Centered Design • Major Steps • Requirements-definition - client gives developers information about functionality and requirements. • Establish design for the project. • Develop prototypes that reflect the emerging design, using the programming language or development environment.

47. User-Centered Design • Major Steps • Submit prototypes to client for feedback and modifications. • Revise prototypes to reflect the client’s changes. • 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.