Multimedia and the World Wide Web HCI 201 Lecture Notes #6A

What will we learn today? Design Usability Web design usability HCI 201 Notes #6A 2

A “made-up” CTA story … HCI 201 Notes #6A 3

A “made-up” CTA story … Once upon a time, there was a button on the train … HCI 201 Notes #6A 4

Good designs vs. bad designs Good designs - are “invisible”. - are easy to understand and easy to use. - let the form follow the functions. - ... Bad designs - always need extra instructions. - might look fancy but are hard to use. - violate the metaphor or conventions. - … HCI 201 Notes #6A 5

Page design and layout Gestalt Theory - All things are considered within context - Elements together are different than the sum of their parts - Utilizes humans perceptual tendencies - We don’t see things in isolation, but as parts of some larger whole HCI 201 Notes #6A 6

Page design and layout Gestalt Theory - Proximity - Similarity - Symmetry - Continuity - Closure HCI 201 Notes #6A 7

Gestalt Theory Proximity Examples: do you understand this ? - Describes the process of using distance or location to create groups. - Things that are closer together will be seen as belonging together. Examples: do you understand this ? d o y o u u n d e r s t a n d e r t h i s ? HCI 201 Notes #6A 8

Gestalt Theory - Proximity HCI 201 Notes #6A 9

Gestalt Theory Similarity Examples: - Grouping by likeness. - Things that share visual characteristics such as shape, size, color, texture, value or orientation will be seen as belonging together. - Repetition of forms in a visual composition is pleasing in much the same way rhythm is pleasing in music. Examples: HCI 201 Notes #6A 10

Gestalt Theory - Similarity HCI 201 Notes #6A 11

 Gestalt Theory Symmetry Examples: The whole of a figure is perceived rather than the parts that make it up. Examples:  HCI 201 Notes #6A 12

Gestalt Theory Continuity Examples: - Predicts the preference for continuous figures. - Groupings are created by the flow of lines or by alignment. Examples: List 1 Item 1 in list 1 Item 2 in list 1 … List 2 Item 1 in list 2 Item 2 in list 2 HCI 201 Notes #6A 13

Gestalt Theory - Continuity HCI 201 Notes #6A 14

Gestalt Theory Closure Examples: - The process by which we perceive shapes that, in a certain sense, aren’t really there. - We mentally complete the shape. - It is a way that our minds impose order and meaning on an incomplete set of data. Examples: I cxn rxplxce xvexy txirx lextex of x sextexce xitx an x, anx yox stxll xan xanxge xo rxad xt. HCI 201 Notes #6A 15

Gestalt Theory Figure-Ground Segregation Examples: For a figure to be perceived, it must stand apart from its background. Examples: HCI 201 Notes #6A 16

Usability Usability Web usability International Standards Organization defines usability as: “The effectiveness, efficiency and satisfaction with which specified users achieve specified goals in a particular environment." Web usability - The extent to which a site can be used by a specified group of users to achieve specified goals with effectiveness, efficiency, and satisfaction in a specified context of use. - Usability and user satisfaction are directly related. HCI 201 Notes #6A 17

Common User Characteristics Vision HCI 201 Notes #6A 18

Common User Characteristics Response and Reaction Time 0.1 Sec Nearly instantaneous to the user 1.0 Sec No major potential for interruption 10 Sec Limit for keeping user’s attention >10 Sec Will have to give them constant feedback about progress and desire must be high HCI 201 Notes #6A 19

Nielson’s Usability Heuristics Visibility of system status The system should always keep users informed about what is going on, through appropriate feedback within reasonable time. Match between system and the real world The system should speak the users' language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order. HCI 201 Notes #6A 20

Nielson’s Usability Heuristics User control and freedom Users often choose system function by mistake and will need a clearly marked “emergency exit” to leave the unwanted state without having to go through an extended dialogue. Support undo and redo. Consistency and standards Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions. Error prevention Even better than good error messages is a carefully design which prevents a problem from occurring in the first place. HCI 201 Notes #6A 21

Nielson’s Usability Heuristics Recognition rather than recall Make objects, actions and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate. Flexibility and efficiency of use Accelerators – unseen by the novice user – may often speed up the interaction for the expert user to such an extent that the system can carter to both inexperienced and experienced users. Allow users to tailor frequent actions. HCI 201 Notes #6A 22

Nielson’s Usability Heuristics Aesthetic and efficiency of use Dialogues should not contain information that is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility. Help user recognize, diagnose, and recover from errors Error messages should be expressed in plain language (no code), precisely indicate the problem, and constructively suggest a solution. HCI 201 Notes #6A 23

Nielson’s Usability Heuristics Help and documentation Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user’s task, list concrete steps to be carried out, and not to be too large. HCI 201 Notes #6A 24

Page Design Guidelines The name of the site or sponsor name/logo should appear consistently on every page. Avoid busy or distracting backgrounds. Prioritize your content. Call attention to your most exciting content with size, color, and/or screen position. Minimize less important content. Organize information into clearly distinguishable areas. Chunk related elements into visual groups through the use of space, graphics, or similarities in color, lightness, texture, or orientation. 50-80% of space on a page should be used for content of interest to the user, not navigation or advertising. White space is not useless. It can guide the eye and help users understand the grouping of information. HCI 201 Notes #6A 25

Page Design Guidelines Keep pages simple. Review all of your design elements and remove them one at time. If the design works just as well without an element, kill it. Use consistent fonts, graphical elements, color palette, navigation options, and placement of elements on the page. In general, use more short pages instead of fewer long pages. However, content pages should contain one conceptual unit of content. In general, people prefer to scroll to continue a single unit of content, rather than click from page to page. Never make the user scroll to locate important navigation options or the focal point of the page, such as "Buy Now“. Always Use highly visible page titles to provide location feedback and help users remain oriented. HCI 201 Notes #6A 26

About midterm… HCI 201 Notes #6A 27