Site Development Process

Learning Web Design: Chapter 20

Don’t Make Me Think: By Steve Krug

Lesson Overview There are standard steps that can be

followed in the web design process: Conceptualization and research Content and organization Art direction Prototype building Testing Site Launch Maintenance

Conceptualization and Research

Every web site begins with an idea The idea must then be expanded

through: Brainstorming Comparing what the competition is doing Making lists and sketches Whiteboard drawings Trying to understand client needs

Research Questions to Have Answered

Before beginning to code these questions must be answered by the client: Strategy – Why create the site?

What purpose will the site provide the client? General Site Description – What kind of site will it be? Who is the target audience? Who will generate content, update and maintain it? What budget and other resources are available? What will be the graphic “ and feel” of the site?

Create and Organize Content

The most important part of a web site it the content – “Content is King!”

The content attracts the customer and keeps them coming back

Roles involving content must be established: Who is responsible for creating, updating and

maintaining the content? Ideally the client is responsible for creating their

own content, but they may need help with copy writing and other hand-holding

Information Design Once content has been

identified … it must be organized Decisions about what page will hold what

content must be made The goal is to make finding your valuable

content intuitive for the user Storyboarding is a visualization technique

used to plan where content will be placed on the site

The site map is the final result of design

Site Map – Planned Viewing

Information Architecture

Many web sites are dynamically “data-driven” in that their content is stored in a database

A specialist responsible for the information design of large web sites is called an information architect

Security and privacy of customer and client information designed ahead of time

Develop the “ and Feel”

The “look and feel” refers to the overall graphic design and visual appearance of the web site

This includes the color palette, typography choices, navigational elements and image style

A graphical mockup is used created to convey the visual design to the client

Often more than one mockup is used to give the client a choice

Final UVU Banner Mockups

Producing Working Prototype The art department creates all

graphical content for the site The production team creates

markup, style sheets and templates A multimedia team may create

videos, flash content or sound assets These pieces are brought together

into a preliminary working site

UVU Prototype with Sample Content

Testing All web sites must be tested before they

are made available on a production server to the public

An alpha release of the web site is available in-house within the organization for testing purposes

After initial changes are made a beta release may be made available to the client or sample end users for additional testing

Basic Quality Check Some minimal requirements before

publishing to the web are: Is all the content there? Have all typos and grammatical errors

been removed? Do all the links work? Do all images display? Are all scripts and applications working? Are pages validated?

Browser Environment Testing

Your site will be viewed in more than one browser, so thoroughly test for most browsers: Is the layout consistent in different browsers? Does the site navigation work in most browsers? What happens to the layout when the window is

resized… very small … and very large? Is the site usable in a text-only browser? Is the site usable with graphics, CSS or

JavaScript turned off? How does the site load with a slow connection?

Usability Testing Usability testing involves

observing possible users of the web site using the web site

The earlier in the development process usability testing is begun the better

There are two types of user testing: Observing behavior as user explores Giving specific tasks of varying difficulty

and seeing how users fare

Usability 101 Every user of your web site

has a reservoir of goodwill The reservoir can full or empty

or somewhere in between, depending on the user’s experience

Be careful because the reservoir is limited If you treat users badly enough, and

exhaust their goodwill, there is a chance they will leave your website

Goodwill Down the Drain

Things that will extinguish goodwill: Hiding info users want Punishing users for not doing things your

way Asking for information you don't really need Putting sizzle in my way, like a long Flash

intro Making a web site that looks amateurish

Keeping it Real Today's web users are very

sophisticated and detest marketeze Overblown or unsubstantiated statements

used to sell a product or site Play down marketeze, and organization

jargon or acronyms in your content "Call a spade a spade,

not a digging implement" (Krug, 2006)

Tools of the trade needed to create ultra-usable navigation: Make use of breadcrumbs to overcome

being lost in "hyperspace” Provide a Search tool and an A-Z

listings for anywhere navigation Provide users a Sitemap to find a page

by name Page names - Must be prominent, and

consistent with hypertext of links

Plan for Accessible Content Some fear that it is more expensive and

time-consuming to create accessible web sites. This fear is largely untrue.

The benefits of providing access to a larger population almost always outweigh the time required to implement that accessibility.

If the leadership of an organization does not express commitment to web accessibility, chances are low that the organization's web content will be accessible.

Disabled and special needs users have a lot of spending power

Baby boomers are retiring and growing older, meet their needs!

If your competition do not have accessible sites, here is your chance to gain strategic advantage

Positive PR affect for your organization by being listed in accessible website directories

Technologies for making your site accessible will also help it appear higher in the search rankings

It’s also the Law

If you live in the United States, applicable laws include ADA, IDEA, and the Rehabilitation Act of 1973 (Sections 504 and Section 508) If your organization has government

contracts, or takes any government grants, loans, or other monies you must comply

Many international laws also address accessibility

Accessibility 101

Easy accessibility must-dos: Use alt text to convey meaning of graphics Avoid blinking text or images- may trigger

seizures Avoid client-side image maps Do not use color alone to convey meaning Use relative font sizes so they can be modified

by the user in the web browser Do not put important images in the background Use CSS for page layout instead of tables

Create Readable Content Reading on the web can be hard work for

anyone, not just the aged Eye strain runs rampant in the online crowd Numerous studies have shown that reading

performance drops dramatically on the web Giving users control over text size can

greatly improve readability for some Anything you can do to make your web site

more readable will be valuable

Go Towards the Light

You could compare the process of adding readability to a web site to turning on a light in a store

A well-lit store makes everything in the store seem more appealing and enticing

Customers don't have to squint and pour over things to understand what they want

 A web site that is readable is a pleasure to visit and is effortless to use

Readability 101 Some techniques to increase readability are:

Text is easiest to read when the font text color and the background color are in high contrast

Chunk up your content with headings, lists and short paragraphs

Omit needless words – simplify, simplify, simplify

Remember the F scan studies, users scan pages quickly in an F pattern

Ultimate Usability Many web designers worry about

usability, accessibility and readability as separate steps or checks of their work

But you could consider accessibility and readability to be subsets of usability

By making a website more accessible and more readable, you contribute to the overall usability of the site

"A rose by any other name would smell as sweet. "- William Shakespeare -

Launching a Web Site After testing and verifying

the site, it is ready to go live Upload the site pages and

resources to a web server A final round of testing should be

done once the site is transferred: Check for broken links and images

not displaying Test other behaviors and scripting

Maintaining a Site

The work of web site development is never done

The ability to make updates and keep content current is a main advantage of the web medium over print

Decisions as to who will maintain the site should be made at the beginning of the project

Usually a full site redesign is needed after a few years to keep up with the competition

Lesson Summary Following a web development process

can ensure creation of successful sites A process can be used by a team of

developers and designers or by an individual

Most time and effort should be spent on conceptualization and research

Usability testing, and creating accessible and readable content will help your site stand above the competition