1 / 82

Website Development Process

Website Development Process. 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.

elden
Download Presentation

Website Development Process

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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

More Related