Website Development Process

1. Website Development Process

2. 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 Large-Scale Project

3. 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 Skills and Functions Needed for a Successful Small Project

4. 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 (HCI)

5. 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? Usability Components

6. 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. Web Usability

7. 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) Why it is Important?

8. from DON’T MAKE ME THINK Some facts about web pages

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

10. 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 .

11. 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. .

12. 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) Common web usability problems

13. 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 Content usability problems

14. 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 Link usability problems

15. 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 (1-4)

16. 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 (2-4)

17. 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 (3-4)

18. 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. Design for Usability (4-4)

19. 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? The Home page

20. “You are here” indicators Designing Navigation

21. . Tabs…

22. . Breadcrumbs…

23. We must remind the user where they are, and they should be able to get back home. Every page needs a name…

24. client-side validation • lighting up required elements left blank or filled out incorrectly • avoiding alert unless absolutely necessary Forms and usability

25. 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 Writing for the web

26. SO, WHAT IS THE DEVELOPMENT PROCESS?

27. The Development Process

28. 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 Web Development: Conceptualization

29. Consider the target audience of this site! Checkpoint 1

30. 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?) Analysis

31. 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 Competitive Analysis

32. Sample Survey

33. 1. We needs to keep track of the site structure and organization 2. Prototype the design •Determine a page layout design Design

34. 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 Site structure Shipping information Contact us

35. Hierarchical • Linear • Random Web Site Organization

36. A clearly defined home page • Navigation links to major site sections • Often used for commercial and corporate Web sites Hierarchical Organization

37. 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 Shallow

38. 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

39. Hierarchical Too Deep

40. A series of pages that provide a tutorial, tour, or presentation. • Sequential viewing Linear Organization

41. 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. Random Organization

42. 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

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

44. 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 Web Site Navigation Best Practices

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

46. 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. Use Sitemap for organization

47. A sketch of blueprint of a Web page Shows the structure of the basic page elements, including: •Logo •Navigation •Content •Footer Wireframe Wireframes do not include any reference to color, typography, or visual imagery

48. 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: Production

49. 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: Testing

50. 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: Types of Testing