Week 10

1
Week 10
Review IA Introduce Rollovers

• IA Information Architecture
• The practice of structuring information for a
  purpose.
• Information architecture is a part of user
  experience design
• According to the Information Architecture
  Institute ,IA is
• The art and science of organizing and labeling
  web sites, intranets, online communities and
  software to support usability and findability.
• Look at the Interface Design Process
• Introduce Rollovers
• ImageReady Rollovers
• Using CSS HTML

2
Definitions

• Information Architecture
• The structural and semantic design of information
  systems.
• Interaction Design
• Defining the form of products with respect to
  behavior and use.
• User Experience
• Design philosophy that encompasses all aspects of
  the end-user's interaction with a company, its
  services, and its products.
• Findability
• Refers to the quality of being locatable or
  navigable.
• You can't use what you can't find.

Sousrce http//findability.org/2004/topics/design
.php
3
Definitions

• Findability is a goal of IA, along with
  usability, desirability, credibility, and
  accessibility. Many people contribute to the
  findability of websites and intranets, including
  writers, designers, and developers.
• Top-down vs Bottom-up approach to design
• http//www.paulgraham.com/progbot.html
• http//wiki.cs.uiuc.edu/VisualWorks/top-downandb
  ottom-updesign

Source http//en.wikipedia.org/wiki/Findability
4
User Interface Design UI
Review from last week

• Form Function are the goals
• Organize content in an effective way that is
  functional and useable for human comprehension.
• Always design with the user in mind.
• Visualize the code before you start
• Be flexible. Several iterations may be necessary.
• Group related content.

5
User Interface Design UI
Review from last week

• Know your user
• Keep users oriented within the page
• Use familiar metaphors
• Be consistent in layout of subsequent pages on
  site
• Clarity about content of page to capture users
  attention
• Use a title for your page
• Important information place high on the page,
  above the fold line

6
Usability User-Centered Design
Review from last week

• Usability is the users experience and how they
  work within the UI design.
• Users input leads to improvements and
  modifications
• The primary notion of usability is that an object
  designed with the users' psychology and
  physiology in mind is, for example
• More efficient to useit takes less time to
  accomplish a particular task
• Easier to learnoperation can be learned by
  observing the object
• More satisfying to use
• http//en.wikipedia.org/wiki/Usability

7
Usability Inspection Method
Review from last week

• Jakob Nielsen, Ph.D. Usability Expert
• Heuristic Evaluation Method
• 10 general principles for user interface design
• http//www.useit.com/papers/heuristic/heuristic_l
  ist.html
• Don Norman, Ph.D. Author, Lecturer, Consultant
• To create a user friendly design
• Provide a good conceptual model mental model
• Make things visible how they work
• Use natural mapping relationship between input
  and output
• Provide feedback
• Both are members of the Nielsen Norman Group.
• They are user experience pioneers...they advocate
  user-centered design and usability.
  http//www.nngroup.com/

8
Wayfinding more than signage

• A problem-solving process by which people
  understand and make decisions about navigating
  architectural and urban spaces.
• Involves both "decision making" (formulating an
  action plan) and "decision executing"
  (implementing the plan).
• Concept to include signage and other graphic
  communication, clues inherent in the building's
  spatial grammar, logical space planning, audible
  communication, tactile elements, and provision
  for special-needs users.
• http//www.findability.org/archives/000145.php

• Source http//en.wikipedia.org/wiki/Wayfinding
• Source http//www.thewayfindingplace.com/2006/08/
  

9
Effective Graphic Communication
Wayfinding

• Standardize names and display them consistently
• Use easily understood "plain" language.
• Size messages and signs appropriately for
  readability
• Select letterforms and color combinations that
  comply with Americans with Disabilities Act (ADA)
  Accessibility Guidelines
• Furnish generous spacing between letters, words
  and message lines.
• Provide standardized "you are here" maps of the
  project
• Code areas by using color and memorable graphics.
  
• Use established pictographs with words to
  facilitate comprehension of written messages.

• http//www.signweb.com/index.php/channel/6/id/1433
  /

10
Bottom-Up vs Top-Down Design

• Bottom up design, as with its counterpart Top
  down design, are strategies of information
  processing.
• In the Bottom-up design approach, individual
  parts of a system are designed in detail and the
  design parts are then linked together to form
  larger components, which are then in turn linked
  until a complete system is formed. Often the
  bottom up approach assumes that all facts are
  known up front as the detailed parts are
  designed.
• In the Top-down design approach to modeling an
  overview of the system is made, without going
  into detail and each part of the system is then
  refined by designing it in more detail. Each new
  part may then be refined again until the entire
  specification is detailed enough. Often the top
  down approach is used when not all facts or
  constraints are known about a design.

Source http//www.skyscrapr.net/archipedia/defaul
t.aspx/Archipedia/BottomUp.html
11
Design more than just Look and Feel
12
Design Principles

• Know the user
• Minimize memorization
• Optimize operations
• Engineer for errors

http//www.usability.gov/design/
13
Golden Rules of User Interface Design

• Place Users in control
• Display descriptive messages and text
• Provide meaningful paths and exits
• Reduce Users Memory Load
• Provide visual cues
• Use real-world metaphors
• Promote visual clarity (organize)
• Make the interface consistent
• Maintain consistency within the interface
• Keep interaction results the same
• Provide aesthetic appeal and integrity
• Encourage exploration

14
Four-Phase Interface Design Process

• Phase 1 Gather and analyze user information
• Phase 2 Design the user interface
• Phase 3 Construct the user interface.
• Phase 4 Validate the user interface.

Source The Elements of User Interface Design by
Theo Mandel, 1997
15
Phase 1 Gather and analyze user information

• Determine user profiles
• Perform user task analysis
• Gather user requirements
• Analyze user environments.
• Match requirements to user tasks

Source The Elements of User Interface Design by
Theo Mandel, 1997
16
Phase 2 Design the user interface

• Define product usability goals and objectives
• Usefulness
• Effectiveness
• Learnability
• Attitude
• Develop user scenarios and tasks
• Define interface objects and actions
• Determine object icons, views, and visual
  representations

Source The Elements of User Interface Design by
Theo Mandel, 1997
17
Phase 3 Construct the user interface

• Prototype first
• Prototype different design alternative
• Be prepared to throw away prototype code.

Source The Elements of User Interface Design by
Theo Mandel, 1997
18
Phase 4 Validate the user interface

• The goal of usability testing should be to
  measure user behavior, performance and
  satisfaction.
• Testing should be done early and often.
• User-validated design drives code development

Source The Elements of User Interface Design by
Theo Mandel, 1997
19
Rollovers

• JavaScript
• http//www.w3.org/MarkUp/Guide/Advanced.html
• ImageReady
• http//www.adobe.com/education/webtech/unit_graphi
  cs2/cre_create.htm
• Using CSS
• Order matters LoVe-Hate
• Link, visited, hover, active
• http//www.findmotive.com/2006/10/31/simple-css-im
  age-rollover/

20
Resources

• Rollovers
• http//meyerweb.com/eric/css/edge/index.html
• http//meyerweb.com/eric/css/edge/raggedfloat/demo
  .html
• http//www.heathrowe.com/tuts/animenus.asp
• http//www.heathrowe.com/tuts/multiani.asp
• http//www.yorku.ca/facs2930/w07/imagereadyrollove
  r.html
• http//www.adobe.com/education/webtech/unit_graphi
  cs2/cre_create.htm

21
Resources

• CSS Links
• http//www.mezzoblue.com/css/cribsheet
• http//www.w3.org/TR/CSS1
• http//csszengarden.com/
• http//www.cssplay.co.uk/
• http//thenoodleincident.com/tutorials/css/
• http//www.meyerweb.com/eric/talks/2003/commug/com
  mug.html
• http//www.bluerobot.com/web/layouts/
• http//www.brainjar.com/css/positioning/default.as
  p
• http//glish.com/css/
• http//www.saila.com/usage/layouts/
• http//archivist.incutio.com/viewlist/css-discuss/
  

22
In-Class Assignment

• Lab time for your Zen Garden design.
• Introduce Project 3 Creative Portfolio
• Visit the rollover demo websites presented in
  class.

23
HOMEWORK

• 1. AIM Assignment 7 - Create a design using the
  CSS Zen Garden template.
• Due Next Class - Week 11
• http//www.csszengarden.com/
• http//www.csszengarden.com/zengarden-sample.html
  
• http//iam.colum.edu/phuber/week9/zengarden-sampl
  e.css.txt
• 2. Visit the rollover links presented in class