website development process
DESCRIPTION
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. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Website Development Process](https://reader036.vdocument.in/reader036/viewer/2022062302/5681638a550346895dd47ac0/html5/thumbnails/1.jpg)
Website Development Process
![Page 2: Website Development Process](https://reader036.vdocument.in/reader036/viewer/2022062302/5681638a550346895dd47ac0/html5/thumbnails/2.jpg)
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
![Page 3: Website Development Process](https://reader036.vdocument.in/reader036/viewer/2022062302/5681638a550346895dd47ac0/html5/thumbnails/3.jpg)
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
![Page 4: Website Development Process](https://reader036.vdocument.in/reader036/viewer/2022062302/5681638a550346895dd47ac0/html5/thumbnails/4.jpg)
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
![Page 5: Website Development Process](https://reader036.vdocument.in/reader036/viewer/2022062302/5681638a550346895dd47ac0/html5/thumbnails/5.jpg)
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?
![Page 6: Website Development Process](https://reader036.vdocument.in/reader036/viewer/2022062302/5681638a550346895dd47ac0/html5/thumbnails/6.jpg)
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.
![Page 7: Website Development Process](https://reader036.vdocument.in/reader036/viewer/2022062302/5681638a550346895dd47ac0/html5/thumbnails/7.jpg)
Why it is Important?
Improve Your Visitor Retention RateDiscover 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)
![Page 8: Website Development Process](https://reader036.vdocument.in/reader036/viewer/2022062302/5681638a550346895dd47ac0/html5/thumbnails/8.jpg)
Some facts about web pages
fromDON’T MAKE ME THINK
![Page 9: Website Development Process](https://reader036.vdocument.in/reader036/viewer/2022062302/5681638a550346895dd47ac0/html5/thumbnails/9.jpg)
1. We don't read pages, we scan them.
![Page 10: Website Development Process](https://reader036.vdocument.in/reader036/viewer/2022062302/5681638a550346895dd47ac0/html5/thumbnails/10.jpg)
.
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
![Page 11: Website Development Process](https://reader036.vdocument.in/reader036/viewer/2022062302/5681638a550346895dd47ac0/html5/thumbnails/11.jpg)
.
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.
![Page 12: Website Development Process](https://reader036.vdocument.in/reader036/viewer/2022062302/5681638a550346895dd47ac0/html5/thumbnails/12.jpg)
Common web usability problems
cluttered or otherwise poor layoutrequires horizontal scrolling, or makes
assumptions about user's screen sizepoorly chosen colorsuses framesuses splash screen(s)poor or missing navigation controls (Back,
Forward, Home)text is not scannable (can't be read quickly)
![Page 13: Website Development Process](https://reader036.vdocument.in/reader036/viewer/2022062302/5681638a550346895dd47ac0/html5/thumbnails/13.jpg)
Content usability problems
most important content isn't on the first pagenondescript headingstoo many ads (or things that appear to be ads)important site content is contained in PDF
documentsisn'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
![Page 14: Website Development Process](https://reader036.vdocument.in/reader036/viewer/2022062302/5681638a550346895dd47ac0/html5/thumbnails/14.jpg)
Link usability problems
links that don't say where they gobadly chosen link text (such as "Click here
for more info")links that forcibly open a new browser
windowlinks opened by complex Javascript
needlesslyvisited links don't appear in a different
color
![Page 15: Website Development Process](https://reader036.vdocument.in/reader036/viewer/2022062302/5681638a550346895dd47ac0/html5/thumbnails/15.jpg)
Design for Usability (1-4)
place your name and logo on every page and make the logo a link to the home page
provide searchwrite 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
![Page 16: Website Development Process](https://reader036.vdocument.in/reader036/viewer/2022062302/5681638a550346895dd47ac0/html5/thumbnails/16.jpg)
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
![Page 17: Website Development Process](https://reader036.vdocument.in/reader036/viewer/2022062302/5681638a550346895dd47ac0/html5/thumbnails/17.jpg)
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)
![Page 18: Website Development Process](https://reader036.vdocument.in/reader036/viewer/2022062302/5681638a550346895dd47ac0/html5/thumbnails/18.jpg)
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.
![Page 19: Website Development Process](https://reader036.vdocument.in/reader036/viewer/2022062302/5681638a550346895dd47ac0/html5/thumbnails/19.jpg)
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?
![Page 20: Website Development Process](https://reader036.vdocument.in/reader036/viewer/2022062302/5681638a550346895dd47ac0/html5/thumbnails/20.jpg)
Designing Navigation
“You are here” indicators
![Page 21: Website Development Process](https://reader036.vdocument.in/reader036/viewer/2022062302/5681638a550346895dd47ac0/html5/thumbnails/21.jpg)
Tabs…
.
![Page 22: Website Development Process](https://reader036.vdocument.in/reader036/viewer/2022062302/5681638a550346895dd47ac0/html5/thumbnails/22.jpg)
Breadcrumbs…
.
![Page 23: Website Development Process](https://reader036.vdocument.in/reader036/viewer/2022062302/5681638a550346895dd47ac0/html5/thumbnails/23.jpg)
Every page needs a name…
We must remind the user where they are, and they should be able to get back home.
![Page 24: Website Development Process](https://reader036.vdocument.in/reader036/viewer/2022062302/5681638a550346895dd47ac0/html5/thumbnails/24.jpg)
Forms and usability
client-side validationlighting up required elements left blank or
filled out incorrectlyavoiding alert unless absolutely necessary
![Page 25: Website Development Process](https://reader036.vdocument.in/reader036/viewer/2022062302/5681638a550346895dd47ac0/html5/thumbnails/25.jpg)
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
![Page 26: Website Development Process](https://reader036.vdocument.in/reader036/viewer/2022062302/5681638a550346895dd47ac0/html5/thumbnails/26.jpg)
SO, WHAT IS THE DEVELOPMENT PROCESS?
![Page 27: Website Development Process](https://reader036.vdocument.in/reader036/viewer/2022062302/5681638a550346895dd47ac0/html5/thumbnails/27.jpg)
The Development Process
![Page 28: Website Development Process](https://reader036.vdocument.in/reader036/viewer/2022062302/5681638a550346895dd47ac0/html5/thumbnails/28.jpg)
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
![Page 29: Website Development Process](https://reader036.vdocument.in/reader036/viewer/2022062302/5681638a550346895dd47ac0/html5/thumbnails/29.jpg)
Checkpoint 1
Consider the target audience of this site!
![Page 30: Website Development Process](https://reader036.vdocument.in/reader036/viewer/2022062302/5681638a550346895dd47ac0/html5/thumbnails/30.jpg)
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?)
![Page 31: Website Development Process](https://reader036.vdocument.in/reader036/viewer/2022062302/5681638a550346895dd47ac0/html5/thumbnails/31.jpg)
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
![Page 32: Website Development Process](https://reader036.vdocument.in/reader036/viewer/2022062302/5681638a550346895dd47ac0/html5/thumbnails/32.jpg)
Sample Survey
![Page 33: Website Development Process](https://reader036.vdocument.in/reader036/viewer/2022062302/5681638a550346895dd47ac0/html5/thumbnails/33.jpg)
Design
1. We needs to keep track of the site structure and organization
2. Prototype the design •Determine a page layout design
![Page 34: Website Development Process](https://reader036.vdocument.in/reader036/viewer/2022062302/5681638a550346895dd47ac0/html5/thumbnails/34.jpg)
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
![Page 35: Website Development Process](https://reader036.vdocument.in/reader036/viewer/2022062302/5681638a550346895dd47ac0/html5/thumbnails/35.jpg)
Web Site Organization
Hierarchical Linear Random
![Page 36: Website Development Process](https://reader036.vdocument.in/reader036/viewer/2022062302/5681638a550346895dd47ac0/html5/thumbnails/36.jpg)
Hierarchical Organization
A clearly defined home page Navigation links to major site sections Often used for commercial and corporate
Web sites
![Page 37: Website Development Process](https://reader036.vdocument.in/reader036/viewer/2022062302/5681638a550346895dd47ac0/html5/thumbnails/37.jpg)
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.
![Page 38: Website Development Process](https://reader036.vdocument.in/reader036/viewer/2022062302/5681638a550346895dd47ac0/html5/thumbnails/38.jpg)
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.
![Page 39: Website Development Process](https://reader036.vdocument.in/reader036/viewer/2022062302/5681638a550346895dd47ac0/html5/thumbnails/39.jpg)
Hierarchical Too Deep
![Page 40: Website Development Process](https://reader036.vdocument.in/reader036/viewer/2022062302/5681638a550346895dd47ac0/html5/thumbnails/40.jpg)
Linear Organization
A series of pages that provide a tutorial, tour, or presentation.
Sequential viewing
![Page 41: Website Development Process](https://reader036.vdocument.in/reader036/viewer/2022062302/5681638a550346895dd47ac0/html5/thumbnails/41.jpg)
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.
![Page 42: Website Development Process](https://reader036.vdocument.in/reader036/viewer/2022062302/5681638a550346895dd47ac0/html5/thumbnails/42.jpg)
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
![Page 43: Website Development Process](https://reader036.vdocument.in/reader036/viewer/2022062302/5681638a550346895dd47ac0/html5/thumbnails/43.jpg)
Navigation
Major types of navigation: •Global (across the website) •Local (for a subsection of the website)
![Page 44: Website Development Process](https://reader036.vdocument.in/reader036/viewer/2022062302/5681638a550346895dd47ac0/html5/thumbnails/44.jpg)
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
![Page 45: Website Development Process](https://reader036.vdocument.in/reader036/viewer/2022062302/5681638a550346895dd47ac0/html5/thumbnails/45.jpg)
WHAT TOOLS TO USE TO BUILD THE SITE STRUCTURE AND PAGES’ LAYOUT?
![Page 46: Website Development Process](https://reader036.vdocument.in/reader036/viewer/2022062302/5681638a550346895dd47ac0/html5/thumbnails/46.jpg)
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.
![Page 47: Website Development Process](https://reader036.vdocument.in/reader036/viewer/2022062302/5681638a550346895dd47ac0/html5/thumbnails/47.jpg)
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
![Page 48: Website Development Process](https://reader036.vdocument.in/reader036/viewer/2022062302/5681638a550346895dd47ac0/html5/thumbnails/48.jpg)
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
![Page 49: Website Development Process](https://reader036.vdocument.in/reader036/viewer/2022062302/5681638a550346895dd47ac0/html5/thumbnails/49.jpg)
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
![Page 50: Website Development Process](https://reader036.vdocument.in/reader036/viewer/2022062302/5681638a550346895dd47ac0/html5/thumbnails/50.jpg)
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
![Page 51: Website Development Process](https://reader036.vdocument.in/reader036/viewer/2022062302/5681638a550346895dd47ac0/html5/thumbnails/51.jpg)
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 email from client •Upload files to web server •Create backup copies of files •MAKE SURE YOU TEST THE WEB SITE AGAIN!
![Page 52: Website Development Process](https://reader036.vdocument.in/reader036/viewer/2022062302/5681638a550346895dd47ac0/html5/thumbnails/52.jpg)
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.
![Page 53: Website Development Process](https://reader036.vdocument.in/reader036/viewer/2022062302/5681638a550346895dd47ac0/html5/thumbnails/53.jpg)
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
![Page 54: Website Development Process](https://reader036.vdocument.in/reader036/viewer/2022062302/5681638a550346895dd47ac0/html5/thumbnails/54.jpg)
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 .
![Page 55: Website Development Process](https://reader036.vdocument.in/reader036/viewer/2022062302/5681638a550346895dd47ac0/html5/thumbnails/55.jpg)
Try it Out (Self Study)
![Page 56: Website Development Process](https://reader036.vdocument.in/reader036/viewer/2022062302/5681638a550346895dd47ac0/html5/thumbnails/56.jpg)
![Page 57: Website Development Process](https://reader036.vdocument.in/reader036/viewer/2022062302/5681638a550346895dd47ac0/html5/thumbnails/57.jpg)
•What site is this?–Logo in top-left corner
denotes the site–Another logo at top-right to
reinforce
![Page 58: Website Development Process](https://reader036.vdocument.in/reader036/viewer/2022062302/5681638a550346895dd47ac0/html5/thumbnails/58.jpg)
•What kind of site is this?
–Shopping cart icon–Tab row content–Categories on left–Prices in content area
![Page 59: Website Development Process](https://reader036.vdocument.in/reader036/viewer/2022062302/5681638a550346895dd47ac0/html5/thumbnails/59.jpg)
![Page 60: Website Development Process](https://reader036.vdocument.in/reader036/viewer/2022062302/5681638a550346895dd47ac0/html5/thumbnails/60.jpg)
60
•What can I do here?–Welcome for new visitors–Tab row / Search on top–“Categories”–Prices–All links are clear
![Page 61: Website Development Process](https://reader036.vdocument.in/reader036/viewer/2022062302/5681638a550346895dd47ac0/html5/thumbnails/61.jpg)
61
•Above the Fold–Most important info visible
without scrolling
![Page 62: Website Development Process](https://reader036.vdocument.in/reader036/viewer/2022062302/5681638a550346895dd47ac0/html5/thumbnails/62.jpg)
62
![Page 63: Website Development Process](https://reader036.vdocument.in/reader036/viewer/2022062302/5681638a550346895dd47ac0/html5/thumbnails/63.jpg)
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
![Page 64: Website Development Process](https://reader036.vdocument.in/reader036/viewer/2022062302/5681638a550346895dd47ac0/html5/thumbnails/64.jpg)
64
•Where am I in the site?
–“Home > Music” are location breadcrumbs
–Tab row says “Music”–Album cover, “Product
Highlights”, and CD cover
![Page 65: Website Development Process](https://reader036.vdocument.in/reader036/viewer/2022062302/5681638a550346895dd47ac0/html5/thumbnails/65.jpg)
65
•What can I do?–See more info about this
album–“Buy!” “Buy!” “Buy”!–See more info about specific
CDs
![Page 66: Website Development Process](https://reader036.vdocument.in/reader036/viewer/2022062302/5681638a550346895dd47ac0/html5/thumbnails/66.jpg)
66
•Can I trust these sellers ?
–Who am I buying from?–Are they reputable?–What about shipping?
![Page 67: Website Development Process](https://reader036.vdocument.in/reader036/viewer/2022062302/5681638a550346895dd47ac0/html5/thumbnails/67.jpg)
67
•The Fold–what’s below here?
![Page 68: Website Development Process](https://reader036.vdocument.in/reader036/viewer/2022062302/5681638a550346895dd47ac0/html5/thumbnails/68.jpg)
68
![Page 69: Website Development Process](https://reader036.vdocument.in/reader036/viewer/2022062302/5681638a550346895dd47ac0/html5/thumbnails/69.jpg)
69
•What site am I in ?–Logo in upper-left–Colors, layout, font
![Page 70: Website Development Process](https://reader036.vdocument.in/reader036/viewer/2022062302/5681638a550346895dd47ac0/html5/thumbnails/70.jpg)
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”
![Page 71: Website Development Process](https://reader036.vdocument.in/reader036/viewer/2022062302/5681638a550346895dd47ac0/html5/thumbnails/71.jpg)
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
![Page 72: Website Development Process](https://reader036.vdocument.in/reader036/viewer/2022062302/5681638a550346895dd47ac0/html5/thumbnails/72.jpg)
72
•What can I do?–“Proceed to Checkout”
action button–Visually distinct–3D, looks clickable–Repeated above and
below the fold
![Page 73: Website Development Process](https://reader036.vdocument.in/reader036/viewer/2022062302/5681638a550346895dd47ac0/html5/thumbnails/73.jpg)
73
![Page 74: Website Development Process](https://reader036.vdocument.in/reader036/viewer/2022062302/5681638a550346895dd47ac0/html5/thumbnails/74.jpg)
74
•What if I don’t have a User ID?
•What if I forgot my password?
![Page 75: Website Development Process](https://reader036.vdocument.in/reader036/viewer/2022062302/5681638a550346895dd47ac0/html5/thumbnails/75.jpg)
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?)
![Page 76: Website Development Process](https://reader036.vdocument.in/reader036/viewer/2022062302/5681638a550346895dd47ac0/html5/thumbnails/76.jpg)
76
![Page 77: Website Development Process](https://reader036.vdocument.in/reader036/viewer/2022062302/5681638a550346895dd47ac0/html5/thumbnails/77.jpg)
77
•What site?–Logo, layout, color, fonts
•Where in site?–Checkout, step 1 of 3–“Choose shipping address”
![Page 78: Website Development Process](https://reader036.vdocument.in/reader036/viewer/2022062302/5681638a550346895dd47ac0/html5/thumbnails/78.jpg)
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
![Page 79: Website Development Process](https://reader036.vdocument.in/reader036/viewer/2022062302/5681638a550346895dd47ac0/html5/thumbnails/79.jpg)
79
Quick-Flow Checkouts
![Page 80: Website Development Process](https://reader036.vdocument.in/reader036/viewer/2022062302/5681638a550346895dd47ac0/html5/thumbnails/80.jpg)
80
Quick-Flow Checkouts
•Last step of process–Step 3, “Place Order”–“Place my order” button
•Two buttons for fold
![Page 81: Website Development Process](https://reader036.vdocument.in/reader036/viewer/2022062302/5681638a550346895dd47ac0/html5/thumbnails/81.jpg)
81
Quick-Flow Checkouts•No nasty surprises
–Can see order–Total price is same as
shopping cart
![Page 82: Website Development Process](https://reader036.vdocument.in/reader036/viewer/2022062302/5681638a550346895dd47ac0/html5/thumbnails/82.jpg)
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