Multimedia and the World Wide Web

Multimedia and the World Wide Web

HCI 201 Lecture Notes #6A

HCI 201 Notes #6A 2

What will we learn today?

Design Usability Web design usability

HCI 201 Notes #6A 3

A “made-up” CTA story …

HCI 201 Notes #6A 4

A “made-up” CTA story …Once upon a time, there was a button on the train …

HCI 201 Notes #6A 5

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 6

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 7

Page design and layout

Gestalt Theory - Proximity - Similarity - Symmetry- Continuity- Closure

HCI 201 Notes #6A 8

Gestalt Theory Proximity

- 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 9

Gestalt Theory - Proximity

HCI 201 Notes #6A 10

Gestalt Theory Similarity

- 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:


Gestalt Theory - Similarity


Gestalt Theory Symmetry

The whole of a figure is perceived rather than the parts that make it up.

Examples:


Gestalt Theory Continuity

- 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 …


Gestalt Theory - Continuity


Gestalt Theory Closure

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


Gestalt Theory Figure-Ground Segregation

For a figure to be perceived, it must stand apart from its background.

Examples:


Usability

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


Common User Characteristics

Vision


Common User Characteristics

Response and Reaction Time0.1 Sec

Nearly instantaneous to the user

1.0 Sec

No major potential for interruption

10 SecLimit for keeping user’s attention

>10 Sec

Will have to give them constant feedback about progress and desire must be high


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.


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.



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.



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.



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.


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.


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.


About midterm…

Multimedia and the World Wide Web

Documents

Transcript of Multimedia and the World Wide Web