Information Visualization Course
Web Design
Prof. Anselm Spoerri
aspoerri@rutgers.edu
© Anselm Spoerri
Lecture 2 – Overview
Meaning
– Planning | Web User Behavior | Basic Web Design | Navigation
Mechanics
– Web Basics Recap
– Dreamweaver - Introduction
– Demo: Setting Stage | Page Properties (internal CSS), Tables
Meaning
– Site Evaluation: Questions to Ask  Exercise 1
– Site Development Process  Group Exercises
Mechanics
– FTP & Eden: Key Ideas
– Dreamweaver Site Management: Set up Local / Remote Site, Permissions
– Create 1st Website Using Dreamweaver CS6 – Chapter 2
– Creating your first web page
– Adding content | Adding and stylizing links | Positioning elements
© Anselm Spoerri
Narrative Structures
© Anselm Spoerri
Planning 1
Define Web Audience
– Who is your target audience?
– What do you want the site to accomplish?
Break Site into Categories
– Create Outline - Goal, Organization
– Create Simple Web Site Plan
– Hierarchy & hyperlinks
– Use sticky notes or Flowchart
© Anselm Spoerri
Planning 2
Collect & Organize Material
– Organizing files by folders
– Asset folder for images, sounds, videos, animations etc.
– Save source files
– File Name - lowercase, short, no spaces or special characters
– “myinterests” vs. “my_interests” vs. “my interests”
– Title web pages
Local Structure = Remote Structure
– Same folder and file structure on local & remote machines
– Home page = "index.html"
– “index.html” stored in folder “main”
– “http::/www.site.com/main/” will display “index”
– If home page has different name, then it needs to be named
© Anselm Spoerri
Web Guiding Principles
Diversity of Users & Rapid Change
– Diverse users, diverse computers, diverse skills, diverse …
– Rapid evolution of technology and expectations
– Short attention span
Common Sense
– No right way to design
Make it short
– More likely to be used and remembered
Don't make me think
– Get rid of question marks - each item has clear purpose
Make it work at a glance
– People have little time
Support intented task - manage expectations
© Anselm Spoerri
Web User Behavior
© Anselm Spoerri
Web User Behavior
(cont.)
© Anselm Spoerri
Web User Behavior
(cont.)
© Anselm Spoerri
Web User Behavior
(cont.)
© Anselm Spoerri
Web User Behavior
(cont.)
© Anselm Spoerri
Web User Behavior
Scan pages
(cont.)
- don't read them
Look for anything = Search Interest
Decide quickly
– Eye-tracking studies
Choose first “reasonable item”
Muddle through
– Don't figure out how things work
Resist forming models
Stick to what works
© Anselm Spoerri
Web Design - Basics
 Stay above the fold
800 X 600 good
© Anselm Spoerri
Web Design – Basics
(cont.)
© Anselm Spoerri
Web Design – Basics
(cont.)
© Anselm Spoerri
Web Design – Basics
(cont.)
© Anselm Spoerri
Web Design – Basics
(cont.)
© Anselm Spoerri
Web Design – Basics
(cont.)
Design for scanning, not reading
– Visual Hierarchy
– Visual contrast - size, bold, color
– Important things = Visually prominent
– Related things = Spatially close, Nested
– Avoid “noise"
– Leverage Conventions
– Clear what's clickable
– Use underline and/or color coding
Less is more
– Cut ½ of words, then cut ½.
© Anselm Spoerri
Web Design – Basics Design Principles
Alignment
– Don't Mix Alignment Styles – Simplicity and Left-Aligned
– Create Sufficient Left Margin
– Constrain Total Width of Page
Proximity
– Related Things Close Together
– Spatial Separation = Conceptual Separation
Repetition & Consistency
– Grid Layout, Navigation, Graphics Color Coding, Typeface
– Creates Ease of Use
Contrast
– Bigger, Bolder, Color, Spatial Distance
– Guide the Eye and Create Visual Hierarchy
© Anselm Spoerri
Home Page Design
Home Page
– Identity & Mission, Hierarchy, Search, Timely Content,
Short-cuts, Registration.
– Everybody wants a piece
Answers Easily
– What can I do here?
– Why should be here?
– Where do I start?
Tagline is Important
– Clear, informative, concise
– Differentiated, clear benefits
– Personable, lively, sometimes clever
Problems with Pull-downs
– Hard to scan, Twitchy
– Have to seek them out
© Anselm Spoerri
Web Design – Lack of Control
Experience not the same
Limited Control over Web Display
Visual Appearance depends on
–
–
–
–
–
–
Type of computer - Windows vs. Mac
Monitor color resolution
Speed of Internet connection
Browser: Microsoft vs. Firefox vs. Safari - don't support same features
Default font may be different
Styles may differ
© Anselm Spoerri
Web Design – Search & Testing
Search Options
– Confuse and increase chances for failure
– Seldom worth the additional cognitive cost
– Amazon has no options at first - first experience is successful.
Typical Problems
– Users are unclear on the concept
– Words users are looking for aren't there
– There is too much going on
Great Site requires Testing
© Anselm Spoerri
Web Site Navigation 1
"Back" clicked 30-40%
Easy to figure out
“You are here”
Things at current level
Return to higher-levels and home page
Easy search and indexes
Easy feedback
Persistent navigation creates comfort
– “Home” and “forms” pages can be exemption
© Anselm Spoerri
Web Site Navigation 2
Top-level Navigation
–
–
–
–
Top Row or Left Column
Icons, textual, pull-down
Highlight or color currently selected
To frame or not to frame?
Second-level Navigation
– Below Top Line or Left Column
Breadcrumbs
– SCI > Information Library Studies > Courses > Graduate
Novel Navigation Metaphors
– Star Tree for FlashKit by Inxight Software
© Anselm Spoerri
User Behavior – Summary
Scan pages - don't read them
Look for anything = Search Interest
Decide quickly
Choose first “reasonable item”
Muddle through
Don't figure out how things work
Resist forming models
Stick to what works
© Anselm Spoerri
Design Implications
Scan pages - don't read them
• Design for Scanning
Make text short - cut words
• Make page work at a glance
Sufficient left margin,
640x480 = main message
• Create Visual Hierarchy
Look for anything = Search Interest
Decide quickly
Choose first “reasonable item”
• Make obvious what you can do on a page
Muddle through
Don't figure out how things work
Resist forming models
• Don't make users think
Stick to what works
• Repetition & Consistency
• Make obvious what is clickable
Get rid of question marks
Each item = clear purpose
Grid Layout, Easy Navigation, Graphics,
Color Coding, Typography
© Anselm Spoerri
Mechanics – Web Basics - Recap
URL - uniform resource locator
– "http://www.abc.com/aaa/bbb/ccc.html"
– "http://" - ???
– "www.abc.com/" - ???
– "/aaa/bbb/ccc.html" - ???
– Absolute URL | Relative URL
– index.html
XHTML
– Made up of elements that are denoted by tags
– Three major elements needed for an HTML page
– Machine readable code (metadata) goes where?
– User readable content goes where?
– Block-level elements vs. Inline elements
– Needs to be correct order, must close, lowercase, one root
© Anselm Spoerri
Dreamweaver - Introduction
Three Views
Design View | Code View | Design & Code View
Create Page Content & Layout
– Enter and Insert Content
– Text, Images, Flash etc.
– Specify CSS (external and internal)
– Page Properties
– Table Mode: Standard Mode (and Expanded Mode)
– Edit & Modify Tables
– AP Elements
Interaction & Behaviors
– Rollovers, Imagemaps, Navigation Bars
– Linking images and behaviors
Site Management
– "Local site" mirrors "Remote site"
© Anselm Spoerri
Dreamweaver – Create Visual Hierarchy
You can use in View > Table Mode > Standard Mode
1
Standard Table
 Regular Columns and Rows
2
AP Elements
 “Irregular” Columns and Rows
to create
Layout
and
Visual Hierarchy
© Anselm Spoerri
Formatting Precedence – “Table Rules”
Cell Format
overwrites
Column / Row Format
overwrites
Table Format
BUT
Table Width / Height
Column
or
Row
or
constrains
Cell Width / Height
If Table “Width” unspecified, then column widths unconstrained!
© Anselm Spoerri
Demo: Specify Default Text Format & Visual Guides
Specify Default Text Format
– Modify > Page Properties
– Use Sans Serif Typeface
– Creates Internal CSS style sheet
Visual Guides
– Ruler
– View > Ruler
– Visual Grid
– View > Grid > select “Show Grid” and “Snap-to-grid”
– View > Grid > Edit Grid (to edit grid)
© Anselm Spoerri
Demo: Create and Edit Standard Table
Select “Standard Mode”
– View > Table Mode > select “Standard Mode”
or Select “Layout” in Insert bar and click “Standard” icon
Insert Table
– Insert > Table: in dialog box specify number of columns and rows
Format Columns / Rows / Cells
– Select columns / rows / cells using dragging
– Edit entries in Property Inspector for selected items
Table: CellPad, CellSpace, Align, Border (which will apply for all cells)
Merge Cells
– Select cells to be merged
– Modify > Table > Merge Cells
Insert Row / Column
–
Modify > Table > “Insert Row” or “Insert Column” or “Insert Row or Column”
(latter gives you most control)
© Anselm Spoerri
Demo: Format Standard Table
W and H fields
– Specify width & height of table as pixels or % of browser window
– If “Width” unspecified, then column widths are unconstrained!
– Usually don't need to set table height
CellPad
– Amount of space between content of a cell and cell boundary
CellSpace
– Amount of space between each layout cell
Align
– Default = “Left”
Border
– Specify in pixels thickness of border
© Anselm Spoerri
Demo: Table Management
Tag Bar
(bottom border of selected file)
Use it to select specific layout elements
Clicking on <table> selects table
Clicking on <tr> selects row
Clicking on <td> selects cell
Expanded Mode
Temporarily adds cell padding and spacing to tables
and increases the tables’ borders to make editing easier.
Select View > Table Mode > Expanded Tables Mode
or
In Layout category of the Insert bar, click Expanded Tables button
© Anselm Spoerri
Evaluation Overview
Sources
– Krug, S. - "Don't Make Me Think!"
– Head, A. - "Design Wise."
– Williams, R. & Tollett, J. - "The Non-Designer's Web Book."
Questions
–
–
–
–
Audience
Task
Navigation
Functionality
 Detailed Questions in Handout and Narrated Lecture
© Anselm Spoerri
Evaluation – Audience
Who is the site for?
Who are the intended users?
What do users want to accomplish?
What are the needed skills?
Good fit with skills of intended users?
What tasks are users trying to accomplish?
© Anselm Spoerri
Evaluation – Task
Support tasks users need to accomplish?
Support both experienced and
inexperienced users?
User expectations meet?
© Anselm Spoerri
Evaluation – Navigation
What site is this?
(Site ID)
What page am I on?
(Page name)
What are the major sections of this site?
– Sections - tabs
What are my options at this level?
– Local navigation
Where I am?
– "You are here" indicators or breadcrumbs
– Easily find your way? back home? other sections?
How can I search?
© Anselm Spoerri
Evaluation – Navigation – “Trunk Test”
© Anselm Spoerri
Evaluation – Functionality 1
Instantly understand what site is about?
Understand what you can do?
"Look & feel" enticing? Want to explore?
Main functions easily accessible?
Easy to use?
Links clear where they will take you?
© Anselm Spoerri
Evaluation – Functionality 2
Instant Visual Hierarchy?
– Or visually too busy?
Text easy to read?
Graphics easy to understand?
Large site - site map, index or search?
Help available and useful?
Download times reasonable?
© Anselm Spoerri
Evaluation – Example & Exercise 1
Amazon
– Evaluation
(of earlier version of site, but analysis still applies)
Exercise 1
– Evaluate website of your choice.
Choose a site that could serve as a model
and/or contain relevant information for your project.
– Be concise and insightful in your evaluations
– External CSS file controls page layout and text
appearance.
© Anselm Spoerri
Site Development Process
Source: Jennifer Niederst Robbins – Learning Web Design, 3rd Edition
1. Conceptualization and Research
2. Content organization and Creation
3. Art Direction
4. Prototype Building
5. Testing
6. Site Launch
7. Maintenance
© Anselm Spoerri
1. Conceptualization and Research
Large design firms: more time spent on research and identifying clients' needs than other stages of
production. For large sites, includes case studies, interviews, market research.
Strategy
•
Why are you creating this web site? What do you expect to accomplish?
•
What are you offering your audience?
•
What do you want users to do on your web site? After they've left?
•
What brings your visitors back?
General Site Description
•
What kind of site is it?
•
What features will it have?
•
What are your most important messages?
•
Who are your competitors? What are they doing right?
•
What could be improved upon?
(Promotional? Info-gathering? Publication? Point of sale?)
© Anselm Spoerri
1. Conceptualization and Research
(cont.)
Target Audience
•
Who is your primary audience?
•
How Internet-savvy are they? How technically savvy?
•
Average user's connection speed? Platform? Monitor size? Browser use?
•
How often do you expect them to visit your site?
How long will they stay during an average visit?
Content
•
Who is responsible for generating original content?
•
How will content be submitted (process and format)?
•
How often will the information be updated (daily, weekly, monthly)?
© Anselm Spoerri
1. Conceptualization and Research
(cont.)
Resources
•
What resources have you dedicated to site (budget, staff, time)?
•
Does site require a full content management system?
•
Can maintenance be handled by the client's staff?
•
Do you have server for your site?
•
Have you registered domain name for your site?
Graphic Look & Feel
•
Are you envisioning certain look and feel for site?
•
Do you have existing standards, such as logos and colors to be incorporated?
•
Part of larger site or group of sites with design standards to be matched?
•
What are some other web sites you like?
What do you like about them? What sites do you not like?
© Anselm Spoerri
2. Create and Organize Content
Content Creation
• Who creates the content?
When creating a site for a client, you need to immediately establish who will be responsible for
generating the content that goes on the site.
Some clients arrive full of ideas but empty-handed, assuming that you will create the site and all
of the content in it. Ideally, the client is responsible for generating its own content and will
allocate the appropriate resources to do so.
• Good Copy Writing is Important.
Often overlooked component of a successful site.
Information Design
• Organize content into Key Categories
Easily and intuitively accessible to your audience.
For large sites, the information design may be handled by a specialist in information architecture.
• Make lists. Draw diagrams.
© Anselm Spoerri
3. Develop "Look and Feel"
Sketch it
•
Use pads of paper and markers.
•
Create layouts using Fireworks or Photoshop.
•
Show interactivity (such as a "rollover" button effect).
Art Direction Process
•
Client receives two or three sketches showing its home page in
various visual styles.
•
Primary and secondary page designs to show how the design
plays out through several levels.
© Anselm Spoerri
4. Produce Working Prototype
Art Department
•
Uses graphics tools to create needed graphics.
Production Department
•
Marks up content with (X)HTML.
•
Formats text with style sheets.
•
Create final pages or templates to be filled with content on the fly.
Programmers
•
Write scripts and server-side applications necessary to make the site
function as intended.
•
Produce multimedia elements such as videos or Flash movies.
All the pieces are brought together into a working site
•
Ongoing process.
© Anselm Spoerri
4. Produce Working Prototype
1.
Sketch out structure of Home, Primary and Secondary pages.
Simple sketch on paper
Develop page structure and its look in Fireworks / Photoshop.
2.
Create (X)HTML documents, CSS, Scripts and Images.
3.
Put pieces together and Look at Pages in Browser.
There are some styles and behaviors that can be tested only in the browser.
4.
Refine (X)HTML, images, styles, and scripts.
5.
Save your Changes and Reload different browsers.
6.
Repeat steps 4 and 5 until pages are finished.
7.
Upload to Server and Test Again.
© Anselm Spoerri
5. Test It
Basic Quality Check
• Is all the content there?
• Are there typos or grammar errors?
• Do all the links work?
• Are all the images showing?
• Are all the scripts work properly?
© Anselm Spoerri
5. Test It
(cont.)
Browsing Environment Testing
Use Different operating systems and browser versions for testing purposes.
• How does site look in different browsers?
On different platforms / operating systems?
Browsers are notoriously uneven in their support of Cascading Style Sheets.
browsercam.com – view my page in many browser versions without needing to
run them on my own machines.
• How does site work in different browsers?
On different platforms / operating systems?
There are browser differences in script support
(unfortunately, Browsercam won't test functionality.)
• What happens when the browser window is resized?
Very large? Very small? What happens if the text is zoomed very large or very
small? Can your site withstand a certain amount window and text resizing? Does
content fall off the screen? Does the page fall apart?
© Anselm Spoerri
5. Test It
(cont.)
Browsing Environment Testing (cont.)
• Is the site usable on a text-only browser?
What will it look like on a mobile phone or PDA?
Worthwhile to look at your site under minimal conditions to see if you can make
any tweaks to improve the experience.
• Is the site usable with the graphics turned off?
Some browsers display the alternative text for each image element, but others
don't. Have you accommodated those users?
• What happens if multimedia can’t be viewed?
Do you provide help getting the plug-ins they need?
Are there alternative versions of your content for those unable to view the media?
• Site experience using a dial-up modem connection?
Is there anything you can do to make your pages load more quickly?
© Anselm Spoerri
5. Test It
(cont.)
User Testing
•
Observe users how easily they can find information & complete tasks.
•
Conduct early and throughout in development process
Questions to answer:
Can users tell at a glance what the site is about?
Can they quickly find critical information?
Obstacles in the way of accomplishing goals?
• Do the test subjects seem to enjoy using the site?
• Specific tasks or site features that pose difficulties for
multiple users?
© Anselm Spoerri
whereRU
http://whereru.rutgers.edu
Target audience?
– Prospective Student
– Rutgers Community : bring it together
– Alumni
What do you want the site to accomplish?
– Rich Visual Experience
– Experience Rutgers Virtually
– Put Rutgers on the Map
Break Site into Categories
–
–
–
–
Location: University | Camden | Newark | New Brunswick
Media Types: Gigapan | Photosynth | Video | Virtual Tours
Display Types: Showcase | Map | Browse | Individual Item
Categories: Architecture & History | Arts & Culture | Athletics |
Events | Libraries | Research | Student Life
Sites to Emulate? Learn from?
© Anselm Spoerri
whereRU – Home Page
Home Page
– Identity & Mission
– Timely Content  How best to do it?
– Search
Answers Easily
– What can I do here?
Typical problem: Users are unclear on the concept
 How best to explain whereRU concept in concise way?
– Why should be here?
– Where do I start?
© Anselm Spoerri
Group Assignment – Competitive Site Analysis (outline)
Competitive Site Analysis
Team of Three
add to Wiki group members
Group Analyzes whereRU content and site
– Use framework of questions presented in class to identify issues and offer
brief solutions.
– What should be the primary and secondary navigation categories? Why?
Each team member selects a different site to analyze
– Select site to emulate / learn from for these three types of pages:
– Home Page | Browse Page | Individual Item Page
– Identify Layout elements, Content items and Interactions supported
– Create schematic wireframe of pages and annotate elements to
describe their purposes and interactions supported
– Explain why to you think the layout, content items and/or interactions
are well designed and should be emulated by whereRU
Group Recommendation
– Which site(s) should whereRU emulate for home, browse and item pages
– Provide wireframe sketches for how whereRU can emulate the site(s)
© Anselm Spoerri
FTP & Eden – Key Ideas
Want to Transfer File to Server – FTP
Need to know
• Server Address
• Username & Password
‒ Where are public web pages physically stored on server?
‒ public_html
‒ What is the URL so that you can access it via Browser?
‒ http://serveraddress/~username
‒ Why is public_html not part of URL?
© Anselm Spoerri
Directory and File Permissions
Types of Permissions
– Read : for being able to read the file/directory
– Write : for being able to write in the file/directory
– Execute : for being able to access the file/directory
Who are Permissions set for?
– Owner : you
– Group : group you belong to (e.g., LIS department, etc)
– Others : the rest of the world
© Anselm Spoerri
Directory and File Permissions
(cont.)
Want people to Access and View your files
(such as your web page which will be stored in directory
“public_html”) you should have the following set up
Owner
- Read(Yes) Write(Yes) Execute(Yes)
Group
- Read(Yes) Write(No)
Others
- Read(Yes)
Write(No)
Execute(Yes)
Execute(Yes)
755
© Anselm Spoerri
Tips
Save Early, Save Often, just Save!
Reload Browser to see changes
File naming
–No spaces in filenames
– Punctuation matters
–Use lowercase filenames
© Anselm Spoerri
Demo: Dreamweaver Site Management
Create folder “webdesign” (or “320”)
Open “webdesign” folder (or “320”)
Create folders “assign1” and “ex1”
Launch Dreamweaver
© Anselm Spoerri
Demo: Dreamweaver Site Management
(cont.)
– Site > New Site
– Select “Site”
– Site > Site Name = “webdesign” (or “320”) for this demo
– Site > Local Site Folder = “webdesign” in “My Documents”
– Select “Servers" Category in New Site Dialog
– Click on + (Add new server)
– Specify Server Name
– Select “SFTP" in pull-down “Connect using” menu
– SFTP Host =“eden.rutgers.edu”
– Login = “yourusername”
– Password = “yourpassword”
– Root Directory = “public_html”
Test and if successful Save
– Connect to Server
– Select "Connect to Remote" icon
– Transfer files to server
– Manually
– File : drop onto file
OR drop into folder that contains file you want to up/download
– Folders: drop into folder that contains folder you want to up/download
– Set permissions: select file on server side, right click & select Permissions
© Anselm Spoerri
Demo – LyndaCampus: 1st Site using DW CS6
Adding Content
–
–
–
–
Sakai > Resources > Lec2: index_begin02.html
Pasting in content
Structuring it using HTML tags (create hierarchy … h1, h2)
Create unordered list
Styling tags using Modify > Page Properties
Adding and Stylizing Links
Lec2: index_begin03.html
– Create link: copy & paste URL | Target: _blank | mailto:
– How to customize link appearance: Modify > Page Properties
– Preview local page in browser | Live view
Positioning Elements
Lec2: index_begin04.html
– Look at structure of page layout sketch
– Insert > Layout Panel: Draw AP div for logo
– Draw AP div for navigation | enter navigation categories, right-aligned
– Drawing more AP divs and adding text and leaving height unspecified
– Changing z-index of AP divs: make sure on top: high z-index
© Anselm Spoerri