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 Rate  Discover 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 from DON’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 layout requires horizontal scrolling, or makes assumptions about user's screen size poorly chosen colors uses frames uses 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 page nondescript headings too many ads (or things that appear to be ads) important site content is contained in PDF documents isn'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 go badly chosen link text (such as "Click here for more info") links that forcibly open a new browser window links opened by complex Javascript needlessly visited 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 search write 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 validation lighting up required elements left blank or filled out incorrectly avoiding 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 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 is this? –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? –Welcome for 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 to home –Same font, layout, color scheme 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 the site? –“Home > Music” are location breadcrumbs –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 these sellers? –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 the site? –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 to buy? –Easy to remove –Easy to move to wishlist How much will it cost? –Shipping costs there, no nasty 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 have a User ID? What if I forgot my password? 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’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 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 task instead of setup first –Clearer to users why this info is 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