Site Development Process

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

Site Development Process