Site Development Process Learning Web Design: Chapter 20 Don’t Make Me Think: By Steve Krug
Dec 29, 2015
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
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
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
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