web design iti - lecture 2

© Anselm Spoerri

Web Design

Information Visualization Course

Prof. Anselm [email protected]

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

Scan pages - 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 fold800 X 600 good

© 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 levelReturn 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

• Make obvious what is clickable

Muddle through Don't figure out how things work Resist forming models

• Don't make users think Get rid of question marks Each item = clear purpose

Stick to what works • Repetition & Consistency 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 ViewsDesign 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

Cell Format overwrites

Column / Row Format overwrites

Table Format

BUTTable Width / Height constrains

Column or Row or Cell Width / Height

If Table “Width” unspecified, then column widths unconstrained!

Formatting Precedence – “Table Rules”

© Anselm Spoerri

Demo: Specify Default Text Format & Visual GuidesSpecify Default Text Format

– Modify > Page Properties – Use Sans Serif Typeface

– Creates Internal CSS style sheetVisual 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 TableSelect “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

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

Demo: Table Management

© 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 ProcessSource: 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 ResearchLarge 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?

(Promotional? Info-gathering? Publication? Point of sale?)

• 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?

© 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 ItBasic 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 TestingUse 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 – 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 AnalysisTeam 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) Execute(Yes)

Others - Read(Yes) Write(No) 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