Week 11

1
Week 11
JavaScript and UI Design

• A little JavaScript
• User Interface Design Process

2
Week 11
JavaScript

• Netscape invented JavaScript in 1996, originally
  called LiveScript, whos official name is
  ECMAScript.
• JavaScript was created to add interactivity to
  web pages. It is case sensitive.
• JavaScript is known as the scripting language of
  the Web. Its used to add functionality, validate
  forms, detect browsers, and add pizzazz to web
  pages.
• Its not Java which is a full-featured
  programming language developed by Sun
  Microsystems. Its a descendant of C and C
  programming languages.
• JavaScripts are included in the html pages.
  Either in the head section, header script or
  between body tags, body scripts. Its enclosed in
  a ltscriptgt tag.
• Single line comments start with //.
• Multi line comments start with / and end with
  /.

3
Week 11
Browsers that do not support JavaScript, will
display JavaScript as page content. To prevent
this use the comment tag to hide the
JavaScript. The two forward slashes at the end of
comment line (//) is the JavaScript comment
symbol. This prevents JavaScript from executing
the --gt tag.
JavaScript

• lthtmlgt
• ltbodygt
• ltscript type"text/javascript"gt
• lt!--
• document.write("Hello World!")
• document.write("lth1gtWelcome to my JavaScript
  page.lt/h1gt")
• //--gt
• lt/scriptgt
• lt/bodygt
• lt/htmlgt
• The ltscript type"text/javascript"gt and lt/scriptgt
  tells where the JavaScript starts and ends
• The document.write command is a standard
  JavaScript command for writing output to a page.
• By entering the document.write command between
  the ltscriptgt and lt/scriptgt tags, the browser will
  recognize it as a JavaScript command and execute
  the code line. In this case the browser will
  write Hello World! to the page
• Try it!

4
Week 11
JavaScript

• lthtmlgt
• ltheadgt
• ltscript type"text/javascript"gt
• function message()
• alert(Welcome to my JavaScript page.")
• lt/scriptgt
• lt/headgt
• ltbody onload"message()"gt
• lt/bodygt
• lt/htmlgt
• If you place a script in the head section, you
  will ensure that the script is loaded before
  anyone uses it.

5
Week 11
JavaScript

• lthtmlgt
• ltheadgt
• lt/headgt
• ltbodygt
• ltscript type"text/javascript"gt
• document.write("This message is written by
  JavaScript")
• lt/scriptgt
• lt/bodygt
• lt/htmlgt
• If you place a script in the body section, it
  generates the content of a page.

6
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
7
Phase 1Gather 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
8
Action Plan Phase 1Gather and analyze user
information

• User Research
• Create user profiles / Personas
• Group ideas by card sorting

9
User Research

• One-on-one interviews
• Questionnaires
• On-line surveys
• Ethnographic Research
• Focus groups
• Behavioral patterns
• Logbooks

10
Create user profiles / Personas

• Profiles provide an in-depth portrait of the
  individual participants in the study.
• They provide strong understanding of the
  activities, environments, interactions, objects
  and users who are or would be served by the
  clients business.
• Consider the age of users
• Environment the user works in
• Expectations of the user
• Motivation of user
• Knowledge and experience level of user
• Tool preferences
• Cultural influences - language, vocabulary, use
  of color

11
Example User Profile
12
Example User Profile
13
Example User Profile
14
Card Sorting

• Create one task on a card and let the user
• name the category

15
Phase 2 Design the user interface

• Define product usability goals and objectives
• Usefulness
• Effectiveness
• Learnability
• Attitude
• Explore ideas before you invest in them
• Technical exploration

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

• Low fidelity prototype - paper, pencil, sticky
  notes, etc.
• User testing with mockup
• Task analysis / Flowcharts / Scenarios
• User/Task matrices
• Define interface objects and actions
• Determine object icons, views, and visual
  representations

17
Task Analysis

• Task analysis is the study of your user
  constituents work, what they do, what goals
  theyre trying to accomplish and what tasks they
  perform now in order to better define what tasks
  your system will allow them to perform.

18
User/Task Matrix
19
Sample Tasks to Action
Donald Norman Seven Stage Cycle
20
Summary

• User Analysis
• Tells you WHO your users are by looking at their
  differences, similarities and motivations.
• Task analysis and task lists
• Tells you WHAT the user will accomplish not HOW.
  It informs you on what your system will enable
  users to do.
• The HOW is the design problem.
• The goal of design is to figure out the best way
  to create a system that enables users to
  effectively and efficiently execute tasks to
  reach their goals.

21
3 Golden Rules

• Place users in control
• Reduce users memory load
• Make the interface consistent

22
http//www.gotomedia.com/gotoreport/november2004/n
ews_1104_content2.html
23
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/

24
Resources

• Web developers virtual library
• http//www.wdvl.com/
• A cool 'How-to' site
• http//dynamicdrive.com/dynamicindex15/index.html

25
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

26
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/
  

27
In-Class Assignment

• Zen Garden Critique
• Create several Rollovers using the different
  methods introduced in class

28
HOMEWORK Project 3 Proposal, User Analysis and
Mock-up

• Phase 1Gather and analyze user information
• Select one User Research method
• Create user profiles / Personas
• Describe your target Users environment
• List and define things about your users
  environment that will influence your interface
  design.
• Answer the question, What do you need to find
  out about you users, tasks and environment in
  order to design a successful system?
• Ex Goals, tasks, behaviors, stage of use and
  environmental affects
• Phase 2 Design the user interface
• Low fidelity prototype - paper, pencil, sticky
  notes,
• User testing with mockup
• Develop case scenarios
• Task analysis