INFSCI 1052

1
INFSCI 1052

• User Centered Design

2
Objectives

• Creating a web page at Pitt
• Basic Unix commands
• Resources
• HTML /XHTML Tutorials
• Safari Books Online
• Designing Interfaces by Jennifer Tidwell
• Layout Design Principles

3
Web Page at Pitt

• http//technology.pitt.edu/Documentation/html_inst
  .pdf
• Telnet on Vista needs to be enabled
• Go to Start-gt Control Panel -gt Programs and
  features-gtTurn Windows features on or off
• Check Telnet Client and click ok.
• Use telnet in Vista from Run command or Command
  prompt.
• Demo
• Start-gtRun-gtType Telnet
• At Telnet prompt type open unixs.cis.pitt.edu
• At login type username
• At password type your password
• You should be at the unix prompt -
• Refer to the above website and follow directions.

4
Web Page at Pitt

• Basic Unix commands
• http//technology.pitt.edu/Documentation/unix_comm
  ands.pdf
• Accessing your HTML file
• www.pitt.edu/username
• index.html file
• Security permissions
• FTP Explore and Explorer
• Editors
• Local
• Remote

5
Resources

• W3 Schools
• http//www.w3schools.com/
• HTML Code Tutorial
• http//www.htmlcodetutorial.com/
• Daves Code Tutorial
• http//www.davesite.com/webstation/html/
• Tizag
• http//www.tizag.com/htmlT/
• Safari Books Online
• Designing Interfaces by Jennifer Tidwell

6
Page Layout

• Designing Interfaces by Jennifer Tidwell
• Read Chapter four
• Visual Hierarchy
• Upper-left-corner preference
• Whitespace
• Contrasting fonts the bigger and bolder, the
  more important the information
• Contrasting foreground and background colors
  putting white text on a black background, for
  instance, makes a very strong statement on a
  white page
• Positioning, alignment, and indenting indented
  text is subordinate to whatever's above it
• Graphics such as lines, boxes, and colored bars
  things in a box or group go together

7
Page Layout

• Visual Flow
• Top-to-bottom and left-to-right is the default
  visual flow.
• Strong focal points will draw the eyes first,
  followed by weaker ones.
• The perceived meaning of the page content will
  change where the user chooses to look.

8
Page Layout

• Grouping and Alignment
• Proximity
• Put things close together, and viewers will
  associate them with one another. This is the
  basis for strong grouping of content and controls
  on a UI.
• Similarity
• If two things are the same shape, size, color, or
  orientation, then viewers will also associate
  them with each other.
• Continuity
• Our eyes want to see continuous lines and curves
  formed by the alignment of smaller elements.
• Closure
• We also want to see simple closed forms, like
  rectangles and blobs of whitespace, that aren't
  explicitly drawn for us. Groups of things often
  appear to be closed forms.

9
Page Layout

• Visual Framework
• A consistent design over multiple pages
• Important for branding and navigation
• Center Stage
• Most important part of UI is in the largest or
  most prominent section
• Titled Sections
• Define areas through specific titling
• Card Stacking/Closable Panels
• Using cards or tabs to separate sections
• Right/Left Alignment
• Diagonal Balance

10
Page Layout

• Using tables for layout
• Table Basics
• http//www.tizag.com/htmlT/tables.php
• Table Layout
• http//www.tizag.com/htmlT/htmllayout.php
• Example of Table Layout
• http//www.sis.pitt.edu/perkoski/is1052/table.htm
  l