CS 160 Lecture 15 Professor John Canny Spring
- Slides: 33
CS 160: Lecture 15 Professor John Canny Spring 2003 9/3/2021 1
Outline 4 Review – design patterns 4 E-commerce patterns * Shopping cart * Inverse Pyramid style 4 Empirical usability results on commercial web sites 9/3/2021 2
Review 4 Design patterns allow us to? 4 Previously used in? 4 Home page web design pattern solution + + + make a positive first impression focus on a single item build your site brand make navigation easy lure visitors to return make it download fast 9/3/2021 3
Pattern Format 1. 2. 3. 4. 5. 6. 7. * Pattern Title Background Information Problem Statement Forces (trade-offs, goals+constraints, motivating factors/concerns, tells why the problem is difficult) Solution Sketch Other Patterns to Consider 9/3/2021 4
E-commerce patterns 4 Shopping cart 9/3/2021 5
Shopping Cart 4 Problem? * how to allow customers to purchase multiple items in one transaction 4 Solution * use shopping cart metaphor to keep track of items before customer finalizes the purchase + track name, quantity, availability, & price 9/3/2021 6
How to Apply Shopping Carts 4 Make available on each page and easy to add items from product pages * make it easy for people to buy! * seems obvious, but many sites don’t do it 9/3/2021 7
How to Apply Shopping Carts 4 Provide detailed info on each item in cart name w/ link to detail quantity w/ a way to change price availability short description 9/3/2021 a way to remove item 8
How to Apply Shopping Carts 4 Provide info about all items in cart * sub-totals * shipping, taxes, other charges (if known) 9/3/2021 9
How to Apply Shopping Carts 4 Provide a prominent link to CHECKOUT 9/3/2021 10
How to Apply Shopping Carts 4 Have a link to let people continue shopping 9/3/2021 11
How to Apply Shopping Carts 4 Don’t let unavailable things be added * hard to find a good example of this 9/3/2021 12
9/3/2021 13
Checkout 4 Shopping Cart => * Details, quantity, availability, subtotal 4 Sign-in => * New customers * Returning customers 4 Shipping => * Address, shipping method, gift wrap? , special instructions 4 Payment => * Method, billing address, gift certificate, coupons 4 Confirmation * Confirm button, confirmation page, email, order tracking into, Thank you 9/3/2021 14
Checkout 4 Make it easy to cancel or change order at any time before final confirmation 4 Don’t have customers type things twice 9/3/2021 15
E-commerce patterns 4 Inverse pyramid style 9/3/2021 16
INVERSE PYRAMID WRITING STYLE 4 Problem * 25% slower to read from a computer screen * web surfers want immediate gratification or they will leave – they want web pages that are + delivered quickly + easy to use + quick to skim 4 Solution (? ) * give the conclusions first * add detail later for those that want it 9/3/2021 17
INVERSE PYRAMID WRITING STYLE (D 7) Inverse Pyramid Writing Most important info This is the short blurb describing the article This is some nonsensical text To see how well this thing w This is some nonsensical text This is some nonsensical text Title Short Blurbs Summaries Overviews Teasers To see how well this thing works This is some nonsensical text Does this work at all? I don’t know. I am in love with XXX To see how well this thing works This is some nonsensical text This is some nonsensical text Does this work at all? I don’t know. This is some nonsensical text This is some the dog is barking nonsensical text This is some nonsensical text Does this work at all? I don’t know. What is love? What is the good life? What is, and is not? That which . exists, metaphysics law #1. This is some is, is. The world is all that exists. Nothing unreal the the nonsensical text This is some nonsensical text Does this work at all? I. don’t know. This is Is there a god? Are we a quantum accident? Will we ever know? Are. What is the nature of goodness? Why are there questions that should never be asked? we so mean to each other? How can we be so cruel to one another? Less important info This is some nonsensical text To see how well this thing works This is some nonsensical text This is some nonsensical text To see how well this thing works Background Information Supporting Details Long Quotes This is some nonsensical text This is some nonsensical text This is some nonsensical What is good in life, he asks? That is a question we may never have an answer to. is some nonsensical text This is some 9/3/2021 18
Journalists Use Inverted Pyramid from www. nytimes. com 9/3/2021 19
ZDNet Uses Inverted Pyramid 4 Start with a good concise title * reflect the content 4 Continue with most important points * use hypertext to split-up information * people often won’t scroll or read 4 Use less text * 50% less than you would offline 4 Use a simple writing style * simple sentences -- no hype or advertising 4 Use EMBEDDED LINKS to help visitors find more information 4 Use bullets and numbered lists 9/3/2021 * supports skimming 20
Using Bullets 9/3/2021 21
Non-intuitive Empirical Results 4 Studied usability of 9 major web sites * including C|Net, Disney, HP, Fidelity, etc. 4 Performed by consulting company * User Interface Engineering, Jared M. Spool * http: //www. uie. com 4 Data * “dozens” of hours of user observations * detailed analysis of site composition * task to find particular information from each site 9/3/2021 22
Empirical Results (cont. ) 4 None were very good 4 Bad ones * home pages offered little direction on content 4 “Readable” pages were less effective * people don’t read, they skim * nicely formed sentences hide key information 9/3/2021 23
Empirical Results (cont. ) 4 Download time wasn’t a big issue * no correlation between time and frustration 4 Graphic design had very little effect * take a look at Yahoo * may be important for brand, marketing, etc. 4 Navigation must be linked to content * if not, users found sites less usable * forget about designing separately (“shell” sites) + if can remove ½ of content without changing home page, then it is a shell site + generic links do not give users predictable results 9/3/2021 24
Empirical Results (cont. ) 4 Violating the “sales script” * standard human-human sales situations + browse and then give personal info when you buy ~ employees wear name tags * web-based situations that violate this fail + users driven away by giving personal info first + you must first build trust! 9/3/2021 25
Animation 4 Higher click-thru rates, but * annoyed users + scrolled, covered with hands. . . + animation makes it much harder to read/skim 4 Could be useful in conveying information * they found no examples of this 4 “Surfing” different from info. retrieval * may not be able to design a site for both 9/3/2021 26
Empirical Results (cont. ) 4 Frames * not so bad, but * make sure large frame changes are obvious as a result of clicks in small (TOC) frame * Make sure most important content fits in frame 9/3/2021 27
Frames 9/3/2021 28
Frames 9/3/2021 29
Links 4 Users had trouble with short links * “If you click on Disneyland, will you get a map of the park? Ticket Information, etc? ” 4 Longer links clearly set expectations * “How to Read the Pricing and Rating Listings” * “Pricing (How to Read Pricing & Rating Listings) 4 Links embedded in paragraphs are worse * hard to find information * can’t skim - must now read 4 Text links used before graphical links 9/3/2021 30
Links (cont. ) 4 Within-page links * sometimes confusing if user scrolls & has read material already * make shorter pages to avoid 4 Wrapped links caused confusion * tradeoff here. . . 9/3/2021 31
Good Links 9/3/2021 32
Summary 4 E-commerce patterns * Shopping cart * Inverse Pyramid style 4 Empirical usability results on commercial web sites * Frame tricks and tips * Good links 9/3/2021 33
- Qual tipo de filtro é o de canny?
- What is canny edge detection in image processing
- Filtre sobel python
- Targil
- Joe canny
- Canny
- Canny
- Canny sebastian
- Canny mask
- Promotion from associate professor to professor
- A college professor never finishes his lecture
- What is this
- 01:640:244 lecture notes - lecture 15: plat, idah, farad
- Spring, summer, fall, winter... and spring (2003)
- Summer winter autumn spring
- Professor john forsythe
- Professor john forsythe
- Professor john wood
- Sds holland food bv
- Feedback hattie effect size
- Professor john hughes
- Professor john stanley
- 150 nin 30 eksiği kaçtır
- Smt 160
- 12vac35-105-620
- Wac 296-800-160
- Anticorps anti-nucléaire positif moucheté
- Konica minolta bizhub 160
- Parafrasi il canto delle sirene dal verso 160
- Emc data domain 620
- 40 cfr 160
- Carolina windom 160
- 160 5th avenue
- A girl 160cm tall stands 360 cm