Week 3 Website design and log files

1
Week 3 Website design and log files

• Website design
• Writing for the web
• Log files
• These slides are from Professor Charles Hofacker.
  For more eMarketing and eBusiness slides, please
  visit http//garnet.acns.fsu.edu/chofack/chain/as
  sign.html

2
Site Structure Survival of the Easiest

• Information space representation and navigation
• Visitor needs an intuition for your structure
• where am I?
• where have I been?
• how do I get where I want to go?
• Visitor tries to pick up scent
• Visitor may enter at any point
• Your Web space is not an org chart!
• Research helps

3
Design overview

• Information space structure
• Aspects of visual design
• Writing for online interaction
• An excellent reference, Jakob Nielsens
  www.useit.com

4
Information Space Structures

• Linear-Sequential
• Hierarchical
• Factorial or Faceted
• Network

5
Linear-Sequential Information

• Paper documents
• Story telling
• Logical presentation
• Procedures

Page 1
Page 2
Page 3
Page 4
6
Navigational with Linear-Serial Information
Structures
Movement tends to be left-right
Prev 1 2 3 4 5 Next
Note Feedback
7
URL Structure for Linear-Serial

• www.company.com/sequence_number_1.html
• www.company.com/sequence_number_2.html

Prev 1 2 3 4 5 Next
8
Hierarchical Information SpacesHave a Tree-Like
Structure

• Top Page
• Link I
• Link II

• Main Page I
• Link A
• Link B

• Main Page II
• Link C

• Sub Page A
• Link i
• Link ii

• Sub Page B
• Link iii
• Link iv

• Sub Page C
• Link v
• Link vi

Detail Page ii
9
URL Structure for Hierarchical Info Space

• www.company.com/Top/Main/Sub/detail.html

Top Main Sub Detail
Up Back Down
10
Cross-Classified or Factorial Information Space
B

• Grids
• Tables
• Rows
• Columns
• Tiers

A
11
Faceted Classification

• Facets are dimensions or characteristics of the
  classified entities
• Values realise a facet
• Not all value combinations are possible

Facets Variety
Origin
Values Chardonnay Pinot Gris California
France Italy
La Barre, Kathryn (2004), "The Use of Faceted
Analytico-Synthetic Theory as Revealed in the
Practice of Website Construction and Design,"
Unpublished Doctoral Dissertation, University of
Indiana. http//mypage.iu.edu/klabarre/facetstudy
.html
12
Network Information Space
Page A blah blah B blah E blah
Page D blah blah E blah G blah
Page F blah blah blah blah
Page B blah blah blah G blah
Page G blah blah F blah E blah
Page E blah blah G blah D blah
Page C blah blah B blah F blah
13
Network Info Space

• Link any two points
• Use semantic or natural connections
• Enhances exploration and learning
• Ideal for hedonistic surfers
• A natural model for hypertext

14
Network Semantic Structure Example
felice
aggetivo
liete gioioso contento
stato di felicitá, contentezza
Definition
Synonyms
adjective
happy, joyous, content, exuberant
English Translation
15
Network Semantic Structure Example
happy
adjective
joyous glad content
content joyous exuberant
emotional state of joy or contentment
Significato
Sinonimi
aggetivo
felice, gioioso, contento
Traduzione in Italiano
16
Match Information Structure to Consumer Thought
Processes

• Gardening Sequence
• prepare the ground
• plant seeds
• fertilize
• weed
• harvest

• Biking Segments
• road riding
• mountain biking
• triathlons
• track riding
• commuting
• touring
• competing

Some users are search-centric
17
Visual Design of a Site

• Focus on page and link design within the context
  of the entire site
• The importance of screen real estate
• Decide on fonts and colors
• Create professional design elements Buttons,
  icons, images

18
Screen Real Estate and Visual Appearance

• How much monitor space?
• 1600 1200 1024 768
• 1280 1024 800 600
• 1152 864 640 480
• And what of Web TV, PDAs and Cell Phones?
• Separate Content and Navigation

19
Screen Real Estate Is Valuable!
Title Bar
Menu Bar
Tool Bar
Address Bar
Other Tool Bars
Useable Space
Borders
20
Useable Space Must Separate
Actual Content
Navigation
21
Create a Layout Grids for Main and Sub Pages
Logo
History Stack
Nav Bar
Product Display Area
Special Sale Items
Source www.hotwired.com/webmonkey/98/28/index4a_p
age2.html
22
Aesthetic Principle of Balance
23
Nav Bar and Main Page Layout
Variations Nav Bar on right, top or bottom
Home Link A Link B Link C Link D Contact Us
Stuff that changes on each page goes here
24
Sites Frequently Put a Logo in a Corner
Click Here to Return to the Home Page
25
Banner and Menu Layout
Company Name
Example with a Hierarchical Information Space

• Link A
• Link B
• Link C
• Link D

• Link E
• Link F
• Link G
• Link H

26
Wasted Real Estate!
Company Name

• Link A
• Link B
• Link C
• Link D
• Link E
• Link F

27
Optimal Place to Put Stuff on the Screen?
28
Visual Look and Feel Do not

• Use a Splash Page
• Make Everything Move
• Overload the Page with Images
• Modify Default Link Colors (How do the they know
  it's clickable? Remember Hansel Gretel)
• Use Frames

29
Visual Look and Feel Do

• Achieve a Perceptual Whole colors,
  typeface,images, writing style, theme
• Use Background Colors Instead of Images
• Achieve Motion with Art Elements
• Note the Shape of the White Space

30
A Final Rule

• Design rules are meant to be broken, but you have
  to know a rule well before you can break it

31
Writing for the Web

• Two critical rules
• The Internet is not a mass medium like TV
• The computer screen is not paper
• It may make sense to create a style guide

32
TV The Web

• Get the attention of the viewer trying to watch a
  show
• Cut through the background noise
• Intrude on the viewers activity

• The visitor is in charge and come to you
• Copy is more factual, more cognitive
• No hard sell, or talking down to the visitor

33
Print The Web

• High resolution
• Easy to read
• Easy to comprehend
• Storage is expensive

• Low resolution
• Reading is slower
• Comprehension is lower
• Storage costs are lower

34
Writing for the Web

• Avoid hard sell, hype
• Emphasise quality content
• Web is more cognitive than affective
• Be concise (Elements of Style)
• Avoid passive voice
• Facilitate skimming highlighting, captions,
  color changes, bold text, larger font, bulleted
  lists

35
Visitors Skim Text Online

• Highlight key phrases, so visitors can scan the
  page, and quickly grasp important communications
  point.
• A dense page of text is painful to read, so being
  concise makes sense. If things get too long,
  modularise.

36
Benefits of Modularisation

• Puts the reader in charge
• Nesting matches hierarchical information space
  structures
• Unlocks the power of free disk storage
• Avoids forcing users to scroll

37
Inverse Pyramid Writing Style

• Start with conclusions
• Next expand each of the main supporting points
• Then, add background information and details
• Think newspaper stories

38
The Web Is Not a Book

• User can enter the site at any sub-page
• Each module must be self contained
• link to preliminary fundamental material
• hook to the overall navigation scheme
• a page with only incoming links is a dead end
• Yet if many visitors will print a page, have a
  print and web version

39
Provide Information Scent at each Level

• Convey overall site structure so that visitors
  can easily understand how each page fits the info
  space, and they can develop an intuition about
  pages they have not seen.
• Construct individual pages so that the visitor
  can easily understand what they are about by
  skimming or scanning.
• Word links so visitors have a sense of where it
  will take them.

40
The Importance of Testing

• Links, pages, functions
• Staff acceptance testing
• Usability
• Give typical users a task
• Watch them, have them think out loud
• Record errors, success and the time required

41
Maintenance Is Not As Glamorous As Design But

• Watch for crashes
• Product, price changes
• Pruning dead links
• Monitor and adapt to log patterns
• Customer feedback
• Benchmark vs. the competition

42
Info on Cookies

• Text string placed on hard drive
• Transient (session) vs. persistent vs. third
  party cookies
• Do not capture data per se
• Firefox -gt Options -gt Privacy -gt Cookies

43
Log File Measurement Issues

• Measure behaviour not attitudes
• Page views are more useful than hits
• Robots, spiders
• Cache
• Computers are easier to count than visitors
• Proxy Servers

44
A Typical Visit

• 172.167.141.115 - - 15/Feb/2003071722 -0500
  "GET /2Wheels.html HTTP/1.1" 20
• 0 1389 "-" "Mozilla/4.0 (compatible MSIE 5.0
  Windows 98 Compaq DigExt)"
• 172.167.141.115 - - 15/Feb/2003071722 -0500
  "GET /banner.gif HTTP/1.1" 200
• 16451 "http//www.bigring.com/2Wheels.html"
  "Mozilla/4.0 (compatible MSIE 5.0
• Windows 98 Compaq DigExt)"
• 172.167.141.115 - - 15/Feb/2003071751 -0500
  "GET /Trail/trail.html HTTP/1.1
• " 200 1087 "http//www.bigring.com/2Wheels.html"
  "Mozilla/4.0 (compatible MSIE
• 5.0 Windows 98 Compaq DigExt)"
• 172.167.141.115 - - 15/Feb/2003071752 -0500
  "GET /Trail/green.gif HTTP/1.1"
• 200 33298 "http//www.bigring.com/Trail/trail.htm
  l" "Mozilla/4.0 (compatible M
• SIE 5.0 Windows 98 Compaq DigExt)"

45
Two Ways to Leverage Web Log Data

• Passive Observation
• Active Experimentation

46
Observation

• Entry page for visitors?
• Most popular pages?
• Last page most visitors see?
• Conversion efficiency?
• Mistakes do people make?
• Where do visitors come from?
• Search terms used?
• Common navigation sequences?
• How many pages do they see?
• How much time do they spend site?
• What products they abandon in the cart?

47
Site Depth for a Hospitality Site
48
Distribution of Time On Site Online Service Site
49
Hospitality Site Accesses by Hour
Weekdays
Weekends
50
Hourly Accesses for a Content Site
Weekdays
Weekends
51
The Probability of Bookmarking Content Site
52
Active Web Experimentation

• To test page version A vs. page version B
• Randomly shows A or B to each visitor
• Figure out what people did when they saw A, and
  what they did when they saw B

53
Levels of Investigation

• Link or Banner Design
• Copy, Size, Color, Movement, Art, Text vs Image
• Page Design
• Number and Type of Links, Physical Formatting
  Issues, Positioning of Design Elements, Use of
  Images, Click Cannibalization, Loading Speed
• Site Design
• Menu Breadth vs. Depth, Modularization, Nav
  Bars, Useability

54
Examining Link Sequence
Our Company

• Our Great Products
• How to Contact Us
• Where to Find Stores

55
Latin Square Designs in Web Research
Header
Header
Header

• Link C
• Link A
• Link B

• Link A
• Link B
• Link C

• Link B
• Link C
• Link A

56
Link Location for a 6 Item MenuHospitality Site
1 2 3 4 5
6
57
Link Location Effects in a 4 by 2 Menu
Left Column
Right Column
1 2 3 4
58
Link or Banner Studies Copy
59
Banner Copy Results Click Throughs Are Not
Everything

• Message A Click Here
• Message B Done with bars and time wasting
  classifieds? Serious about finding your
  soulmate?
• Click Site Page
• N Through Request
• Message A 2498 .1137 .0246
• Message B 2361 .0779 .2134