SlideSet #7: Web Site Design Your Comments from Reading 1 - - PDF document

▶
slideset 7 web site design
SMART_READER_LITE
LIVE PREVIEW

SlideSet #7: Web Site Design Your Comments from Reading 1 - - PDF document

Dec 26, 2022 308 likes •440 views

IT350 Web and Internet Programming SlideSet #7: Web Site Design Your Comments from Reading 1 Principles: Web sites should be How do you know if your site is good? User Testing and Evaluation A huge part of the HCI field.

slide-1
SLIDE 1

1

IT350 Web and Internet Programming SlideSet #7: Web Site Design

Your Comments from Reading

slide-2
SLIDE 2

2

Principles: Web sites should be… How do you know if your site is “good”?

  • User Testing and Evaluation

– A huge part of the HCI field.

  • Website metrics
slide-3
SLIDE 3

3

Netflix and HCI: a love story

  • Goal: signup new

users before they leave the front page

  • Front page: family
  • n a couch
  • Question: who

holds the remote control? The Remote Control Winner!!

  • Visit www.netflix.com to see!
slide-4
SLIDE 4

4

More on Netflix

  • What about movie viewing?
  • Facts (sort of)

– $1.00 per movie sent by mail – $0.05 per movie streamed online

  • Can Netflix encourage streaming movies instead
  • f sending by mail … just using HCI?
slide-5
SLIDE 5

5

Pictures and Presidential Politicking

  • Obama’s 2008 political campaign
  • Goal: get people to submit their email addresses
slide-6
SLIDE 6

6

Pictures and Presidential Politicking

  • The winning variation had an 11.6% opt-in rate,

compared to 8.26% for the original page. That’s a 40.6% improvement!

2,880,000 more emails 288,000 more volunteers $21 avg donation $60 million more

Examples http://www.google.com http://www.yahoo.com

slide-7
SLIDE 7

7

Examples http://www.usna.edu http://www.usna.edu/cs Files on the Web Plain text HTML JavaScript/Flash PDF Word/PPT

slide-8
SLIDE 8

8

Examples http://www.edwardtufte.com/ http://www.usna.edu/users/cs/adina/teaching/it350/fall2 013/ Bells and Whistles http://www.wired.com http://www.amazon.com http://www.farecast.com/

slide-9
SLIDE 9

9

Other Examples

  • http://www.sixtiespress.co.uk/
  • http://www.supervideo.com/
  • http://www.pandminc.com/

HTML Quality Tips

  • Picking link text

To download W3C's editor/browser Amaya, click here. To download Amaya, go to the Amaya Website and get the necessary software. Get Amaya!

  • If You Pick One Color, Pick Them All

More at http://www.w3.org/QA/Tips/

slide-10
SLIDE 10

10

Etc.

  • Sometimes most emphasized things get ignored
  • Put dates on your pages
  • Don’t let the interface dominate the content
  • Tables – minimize heavy borders
  • Background images – use with great caution

Other things users need

  • Consistency
  • Navigation
  • How to provide without HTML duplication?

– Frames – SSI

slide-11
SLIDE 11

11

SSI Example SSI Example Part 1

<div style="position:absolute; top: 5em; left: 1em; width: 10em"> <p> <a href = "link.shtml" > <img src = "buttons/links.jpg" width = "65" height = "50" alt = "Links Page" /> </a><br /> <a href = "list.shtml" > <img src = "buttons/list.jpg" width = "65" height = "50" alt = "List Example Page" /> </a><br /> <a href = "contact.shtml" > <img src = "buttons/contact.jpg" width = "65" height = "50" alt = "Contact Page" /> </a><br /> … </p> </div> navssi.html

slide-12
SLIDE 12

12

SSI Example Part 2

<!DOCTYPE html> <html> <head> <meta charset = "utf-8"/> <title>Internet and WWW How to Program - Main</title> </head> <body> <!--#include file="navssi.html" --> <div style = "position: absolute; top: 2em; left: 11em"> <h1>Welcome to Our Web Site!</h1> <p>We have designed this site to teach about the wonders

  • f <strong><em>HTML5</em></strong>. </p>

</div> </body> </html>

main.shtml