Website Development Process

Skills and Functions Needed for a Successful Large-Scale Project

Project Manager Marketing Representative Copy Writer & Editor Content Manager Graphic Designer Database Administrator Network Administrator Information Architect Web Developer

Skills and Functions Needed for a Successful Small Project

The skills and functions are essentially the same as on a large project

Each person may wear many “hats” and juggle their job roles

•Example: The web developer may also be the graphic designer.

Some job roles may be outsourced •Most Common: •An external web site provider is used so there is

less (if any) need for a Network Administrator

Usability (HCI)

Aka: Usability Engineering, User Centered Design, User Experience Design, Information Design, Information Architecture, Interaction Design

Ease of USE!Usability generally describes two different

areas: ◦How easy a product is to use ◦The industry & discipline concerned with

measuring ease-of-use

Usability Components

Usability is defined by five quality components (Jakob Nielson): ◦Learnability: How easy is it for users to

accomplish basic tasks the first time they encounter the design?

◦Efficiency: Once users have learned the design, how quickly can they perform tasks?

◦Memorability: When users return to the design after a period of not using it, how easily can they reestablish proficiency?

◦Errors: How many errors do users make, how severe are these errors, and how easily can they recover from the errors?

◦Satisfaction: How pleasant is it to use the design?

Web Usability

Web usability is an approach to make web sites easy to use for an end-user, without requiring her (or him) to undergo any specialized training. The user should be able to intuitively relate the actions he needs to perform on the web page, with other interactions he sees in the general domain of life e.g. press of a button leads to some action.

Why it is Important?

Improve Your Visitor Retention RateDiscover Which Parts of Your Web Site Are

Failing and Why Improve the Brand Experience of Your

Customers Improve Your Understanding of Your

Customers Increase Sales and Profits

Every £1 invested in improving your website's usability returns £10 to £100 (source: IBM)

A web usability redesign can increase the sales/conversion rate by 100% (source: Jakob Nielson)

Some facts about web pages

fromDON’T MAKE ME THINK

1. We don't read pages, we scan them.

.

2. We don't make optimal choices, we sacrifice.

We're usually in a hurry There's not much penalty for guessing

incorrectly Weighing options may not improve our

chances Guessing is more fun

.

3. We don't figure out how things work, we muddle through.

Why bother? When we find something that works, we stick with it.

So….conventions are our friends.

Common web usability problems

cluttered or otherwise poor layoutrequires horizontal scrolling, or makes

assumptions about user's screen sizepoorly chosen colorsuses framesuses splash screen(s)poor or missing navigation controls (Back,

Forward, Home)text is not scannable (can't be read quickly)

Content usability problems

most important content isn't on the first pagenondescript headingstoo many ads (or things that appear to be ads)important site content is contained in PDF

documentsisn't designed to be easily indexed by a search

engine(HTML title, meta tags, page text, link text, etc.)

tiny thumbnails of detailed large photos

Link usability problems

links that don't say where they gobadly chosen link text (such as "Click here

for more info")links that forcibly open a new browser

windowlinks opened by complex Javascript

needlesslyvisited links don't appear in a different

color

Design for Usability (1-4)

place your name and logo on every page and make the logo a link to the home page

provide searchwrite straightforward and simple headlines

and page titles that clearly explain what the page is about

structure the page to facilitate scanning and help users ignore large chunks of the page in a single glance

Design for Usability (2-4)

instead of cramming everything about a product or topic into a single, infinite page, use hypertext to structure the content space into a starting page that provides an overview and several secondary pages that each focus on a specific topic (Information Architecture)

use link titles to provide users with a preview of where each link will take them, before they have clicked on it

Design for Usability (3-4)

Use relevance-enhanced image reduction when preparing small photos and images.

Ensure that all important pages are accessible for users with disabilities, especially blind users

Do the same as everybody else: if most big websites do something in a certain way, then follow along since users will expect things to work the same on your site (Conventions)

Design for Usability (4-4)

Jakob's Law of the Web User Experience: users spend most of their time on other sites, so that's where they form their expectations for how the Web works

Test your design with real users as a reality check. People do things in odd and unexpected ways, so even the most carefully planned project will learn from usability testing.

The Home page

As quickly as possible the Home page must answer these four questions:◦ What is this?◦ What do they have here?◦ What can I do here?◦ Why am I here—and not somewhere else?

Designing Navigation

“You are here” indicators

Tabs…

.

Breadcrumbs…

.

Every page needs a name…

We must remind the user where they are, and they should be able to get back home.

Forms and usability

client-side validationlighting up required elements left blank or

filled out incorrectlyavoiding alert unless absolutely necessary

Writing for the web

People read web page text differently than they read books, etc.

Writing for the web includes: ◦subheads◦bulleted lists ◦highlighted keywords ◦short paragraphs ◦ the "inverted pyramid"

(put the most newsworthy information at the top, and then the remaining information follows in order of importance, with the least important at the bottom)

◦a simple writing style

SO, WHAT IS THE DEVELOPMENT PROCESS?

The Development Process

Web Development: Conceptualization

Determine the intended/target audience Determine the goals or mission of the web site •Short-term goals •Long-term goals Main Job Roles Involved: •Client, Project Manager, Information

Architect, Marketing Representative, Senior Web Developer

Web Development: Conceptualization

Checkpoint 1

Consider the target audience of this site!

Analysis

Determine the following: •information topics •functionality requirements (high-level) Determine “what” a site will do – not “how” it will

do it •environmental requirements •content requirements Review competitor’s sites (Competitive Analysis -

what are the others doing?)

Competitive Analysis

A high level analysis of major competitors is vital to a website’s success. It is better to know the competition’s strengths and weaknesses before you finalize your website strategy.

Basic Steps: 1. Identify the competition 2. Decide what to analyze 3. Develop a competition survey 4. Answer survey for each competitor 5. Analyze survey data 6. Write a report of the findings and recommendations

Sample Survey

Design

1. We needs to keep track of the site structure and organization

2. Prototype the design •Determine a page layout design

Site structure

It is important to consider the structure of your site:

•What pages do you have and/or need? •How are pages related to each other?

Home Page

About us

Shipping information

Contact us

Web Site Organization

Hierarchical Linear Random

Hierarchical Organization

A clearly defined home page Navigation links to major site sections Often used for commercial and corporate

Web sites

Hierarchical Too Shallow

Be careful that the organization is not too shallow.

•Too many choices a confusing and less usable web site

•Information Chunking •“seven plus or minus two” principle •Many web designers try not to place more

than nine major navigation links on a page or in a well-defined page area.

Hierarchical Too Deep

Be careful that the organization is not too deep. •This results in many “clicks” needed to drill

down to the needed page. •User Interface “Three Click Rule” •A web page visitor should be able to get from

any page on your site to any other page on your site with a maximum of three hyperlinks.

Hierarchical Too Deep

Linear Organization

A series of pages that provide a tutorial, tour, or presentation.

Sequential viewing

Random Organization

Sometimes called “Web” Organization. Usually there is no clear path through the

site. May be used with artistic or concept sites. Not typically used for commercial sites.

Navigation

People don’t always work from the home page – they get to a page from a link or from a search

Every page of a site should let you know: •Where am I •What’s here •Where can I go now

Navigation

Major types of navigation: •Global (across the website) •Local (for a subsection of the website)

Web Site Navigation Best Practices

Make your site easy to navigate •Provide clearly labeled navigation in

the same location on each page •Most common – across top or down left

side •Provide “breadcrumb” navigation

WHAT TOOLS TO USE TO BUILD THE SITE STRUCTURE AND PAGES’ LAYOUT?

Use Sitemap for organization

A sitemap shows the hierarchy of the site. It lets a writer, designer, or developer see the relationship among all the pages of the site at a glance.

Wireframe

A sketch of blueprint of a Web page Shows the structure of the basic page

elements, including: •Logo •Navigation •Content •Footer

Wireframes do not include any reference to color, typography, or visual imagery

Web Development: Production

Choose a web authoring tool Organize your site files Develop and individually test components Add content Main Job Roles Involved: •Project Manager, Senior Web Developer,

Web Developer, Graphic Designer, Database Administrator, Content Manager

Web Development: Testing

Test on different web browsers and browser versions Test with different screen resolutions Test using different bandwidths Test from another location Test, Test, Test Main Job Roles Involved: •Project Manager, Web Developer, Tester

(sometimes web developer, sometimes Quality Assurance person), Client, Content Manager

Web Development: Types of Testing

Automated Testing Tools and Validation • Automated Testing (Link checkers, etc.) •W3C XHTML and CSS validation tests Usability Testing •Testing how actual web page visitors use a web site •Can be done at almost any stage of development Early –- use paper and sketches of pages Design – use prototype Production & Testing – use actual pages

Web Development: Approval & Launch

User or Client Testing •Client will test site before giving official

approval for site launch Approval & Launch •Obtain sign-off form or email from client •Upload files to web server •Create backup copies of files •MAKE SURE YOU TEST THE WEB SITE AGAIN!

Web Development: Maintenance

Maintenance – the never -ending task… •Enhancements to site •Fixes to site •New areas added to site A new opportunity or issue is identified

and another loop through the development process begins.

Web Development: Evaluation

Re-visit the goals, objectives, and mission of the web site

Determine how closely they are being met Develop a plan to better meet the goals,

objectives and mission

Conclusion

Web Accessibility # Web Usability◦ Webster defines accessibility as "capable of being

reached," and it defines usability as "capable of being used."

◦ Usability: Designing web pages to be more effective, efficient, satisfying for all

◦ Accessibility: focuses on improving access to content for individuals with disabilities .

Try it Out (Self Study)

•What site is this?– Logo in top-left corner

denotes the site– Another logo at top-right to

reinforce

•What site is this?–Logo in top-left corner

denotes the site–Another logo at top-right to

reinforce

• What kind of site isthis?

–Shopping cart icon–Tab row content–Categories on left–Prices in content area

•What kind of site is this?

–Shopping cart icon–Tab row content–Categories on left–Prices in content area

60

•What can I do here?–Welcomefor new visitors –Tab row / Search on top–“Categories”–Prices–All links are clear

•What can I do here?–Welcome for new visitors–Tab row / Search on top–“Categories”–Prices–All links are clear

61

•Above the Fold– Most important info visible

without scrolling

•Above the Fold–Most important info visible

without scrolling

62

63

•What site am I in?– Logo in upper-left reinforces

brand, can click to go tohome

– Same font, layout, colorscheme also reinforces

•What site am I in?–Logo in upper-left reinforces

brand, can click to go to home

–Same font, layout, color scheme also reinforces

64

• Where am I in thesite?

–“ Home > Music” are locationbreadcrumbs

–Tab row says “Music”– Album cover, “Product

Highlights”, and CD cover

•Where am I in the site?

–“Home > Music” are location breadcrumbs

–Tab row says “Music”–Album cover, “Product

Highlights”, and CD cover

65

•What can I do?– See more info about this

album–“Buy!” “Buy!” “Buy”!– See more info about specific

CDs

•What can I do?–See more info about this

album–“Buy!” “Buy!” “Buy”!–See more info about specific

CDs

66

• Can I trust thesesellers ?

–Who am I buying from?–Are they reputable?–What about shipping?

•Can I trust these sellers ?

–Who am I buying from?–Are they reputable?–What about shipping?

67

•The Fold–what’s below here?

•The Fold–what’s below here?

68

69

•What site am I in ?–Logo in upper-left–Colors, layout, font

•What site am I in ?–Logo in upper-left–Colors, layout, font

70

• Where am I in thesite?

–Last link clicked was “Buy”!–“ Shopping Cart” and

”Proceed to Checkout“ reinforce that this is “the

right page”

•Where am I in the site?

–Last link clicked was “Buy”!–“Shopping Cart” and

“Proceed to Checkout” reinforce that this is “the

right page”

71

• What am I going tobuy?

–Easy to remove–Easy to move to wishlist

• How much will itcost?

– Shipping costs there, nonasty surprises

•What am I going to buy?

–Easy to remove–Easy to move to wishlist

•How much will it cost?

–Shipping costs there, no nasty surprises

72

•What can I do?–“ ”Proceed to Checkout

action button–Visually distinct–3D, looks clickable– Repeated above and

below the fold

•What can I do?–“Proceed to Checkout”

action button–Visually distinct–3D, looks clickable–Repeated above and

below the fold

73

74

• What if I don’t havea User ID?

• What if I forgot mypassword?

•What if I don’t have a User ID?

•What if I forgot my password?

75

•Error message–Small, hard to see– Too far away from where

people will be looking– Page looks too similar to last

page (did anything happen?)

•Error message–Small, hard to see–Too far away from where

people will be looking–Page looks too similar to last

page (did anything happen?)

76

77

•What site?–Logo, layout, color, fonts

•Where in site?–Checkout, step 1 of 3–“Choose shipping address”

•What site?–Logo, layout, color, fonts

•Where in site?–Checkout, step 1 of 3–“Choose shipping address”

78

• Note what’sdifferent

–No tab rows– Only navigation on page

takes you to next step

• This is a ProcessFunnel

– Extraneous info and linksremoved to focus users

•Note what’s different

–No tab rows–Only navigation on page

takes you to next step

•This is a Process Funnel

–Extraneous info and links removed to focus users

79

Quick-Flow Checkouts

80

Quick-Flow Checkouts

•Last step of process–Step 3, “Place Order”–“Place my order” button

•Two buttons for fold

•Last step of process–Step 3, “Place Order”–“Place my order” button

•Two buttons for fold

81

Quick-Flow Checkouts•No nasty surprises

–Can see order– Total price is same as

shopping cart

•No nasty surprises–Can see order–Total price is same as

shopping cart

82

Quick-Flow Checkouts• Easy to change

shipping and billing• Easy to save this

info– Easier to setup info in

context of specific taskinstead of setup first

– Clearer to users why this infois needed in former

•Easy to change shipping and billing

•Easy to save this info

–Easier to setup info in context of specific task

instead of setup first–Clearer to users why this info

is needed in former