Web Site Proposal | The University of Tampa www.julietdavis.com/clients/creativeloafing Proposal | PowerPoint | New Design Link

1

• Web Site Proposal The University of
  Tampawww.julietdavis.com/clients/creativeloafing
  Proposal PowerPoint New Design Link
• See notes on each design comp slide for
  explanation.

2
(No Transcript)
3
This Presentation

• 1) examines Creative Loafings current design
• 2) examines basic usability and info design
  principles including Poynter Institutes
  EyeTrack07 Findingsand Jakob Nielsens research
• 4) makes recommendations based on research
• 5) proposes an updated design

4
CL Highlights

• Format Alternative Publication for news,
  politics, arts, entertainment (Were edgy and
  were gonna stay that wayShelter from the
  mainstream)
• Cume Readers 333,400 (read one or more of the
  past 4 issues)73,000 online audience
• Target Audience 35-54 (average age 40)
  center-left, educated, comfortable with their
  sexuality, community based, like to drink
  (James).
• Traffic 10,000 uniques daily, 15,000 page views,
  3-4 pages per visit, average 1.5 minutes per
  visit
• Objectives (twofold) 1) The one-stop shop for
  events, political news, pop-culture, snark, sex
  love.2) The friendly, smart companion. You
  want to spend time with that particular voice
  (Dave).
• Online Benefit We want to train people that if
  they come back there will be an update
  (Stephen). Looking for anti-hierarchical info
  design.

5
Teams Objectives

• Increase usability (visitors ability to see and
  use the site)
• Increase traffic
• Increase average time on site and per page
• Decrease average clicks to destination (from 2.5
  to 1.5)
• Increase 18-25 year-old visitors

6
Critique of Current Site
7
YOUR CURRENT SITE This is what your viewers see
at 1024 x 768 (955 x 600 viewing area)
8
Currently, CLs advertisers are paying for ad
space that viewers cant see, unless they have
a superwide screen.
This image was supposed to be visible in the
upper-right-hand corner, but was cut off,even at
1124 x 768.
9
This is what your viewers see at 1024 x 768 (955
x 600 viewing area)
10
Creative Loafings Current Site at 800 x 600 (760
x 420 viewing area)The site needs to be
meaningfully viewable at this dimension as
welleven though the ads on the right will be cut
off.
11
This is what people see at 800 x 600 full screen
(768 x 420 within brower elements) Considering
the 50-30-20 rule (50 content, 30 navigation,
20 other at 800 x 600), we have 5 content
(most is not legible), 0 navigation, and 95
other.
12
Poynter Institutes EyeTrack07 Studyhttp//eyetra
ck.poynter.org/keys_01.html

• Whereas headlines and photos were the first
  visual stop for print readers, navigation was the
  first stop for online readers.
• Jakob Nielsens findings show that readers will
  not scroll for navigation. Therefore, usable
  navigation appears either across the top or upper
  left. (Note They will scroll to read a story
  that interests them, but Poynter shows that they
  seek first to navigate TO a desired story.)
• Jakob Nielsens findings show that Mega
  Drop-Down Navigation Menus Work Well
  http//www.useit.com/alertbox/mega-dropdown-menus.
  html
• The presence of headlines alone did not engage
  viewers as much as briefs with images (increased
  viewership by 34 above expected rate).
• Large photos and documentary photos drew more
  eyes than small photos or staged photos. (Need
  consistently engaging visuals for top stories)
• Voice of the reader elements in broadsheets
  drew 68 percent more attention than expected
  based on the number of those elements available
  to be seen.  (Option to run viewer comments down
  the front page).

13
A Focus on Local Content Makes a Publication
Valuable

• There are Only Two Ways to Stop the Newspaper
  Death Spiralhttp//www.poynter.org/column.asp?id
  45aid161150Calbuzz - Phil Trounstine and
  Jerry Roberts write Newspapers have to
  concentrate all of their force and fire power on
  their own communities, making themselves
  indispensable to local residents. Or, a
  business like Google or Yahoo can begin to pay
  reporters in communities to produce content -- to
  cover city councils and school boards, write
  about local development and utilities, local
  sports and arts, etc.Posted at 1015 AM on Apr.
  2, 2009

14
You have 3-5 seconds to establish trust with the
viewer by showing usable page characteristicsbefo
re viewers will turn away.How can Creative
Loafingestablish that trust?
15
New Site Design
16
New Design
17
Real Size
18
Drop-down Menu
19
Real Size
20
1024 x 786 Screen Size (955 x 600 viewing
area)Navigation, ads, and full content in view
21
800 x 600 Screen Size (760 x 420 viewable
area)Approx. 50 content, 30 navigation
(w/dropdowns open), 20 other (ads)
22
Tip For Banner Advertisers

• Jakob Nielsons eye-tracking research shows that
  viewers never look at banner ads when they
  appear to be separate from content. However, they
  will look at banner ads that- contain the same
  color scheme as the rest of the content and
  appear to be part of the publication design
  itself and/or- contain faces or private body
  parts and/or- contain text that appears to be
  content

23
Option Slide show w/ top stories BTW Real
pages will be longer
24
Design Elements Can Vary Based on CL Preferences
25
Summary of New Design Strengths

• Proper dimensions are employed for 1024 x 768
  (955 x 600) and 800 x 600 (760 x 420)
• Proper screen real estate ratios are used for the
  800 x 600 (50 content, 30 navigation, 20
  other)
• Header Banner is used to unify the page so layout
  is no longer chaotic.
• Navigation Bar is most important element for
  viewers (according to Poynter).
• Drop-down menus will appear on rollover and
  contain the links that are currently featured on
  CL's home page for each category, if they still
  want to keep them as they are-see example). Key
  links that have been missing will be added (e.g.,
  movie reviews).
• Top story brief allows viewers to get engaged
  and click into the site (Poynter study)
• News briefs with images will engage viewers
  (Poynter study)
• News is accessible 5 different ways (editors
  choice, peoples choice, breaking news, drop-down
  menus, content area points of entry)
• Unique and trusted voice is present on the home
  page in blurbs local writers are signified by CL
  icon (Callbuz).
• Look and feel" are now consistent with Creative
  Loafing's branding
• Internal search at top right (instead of Google
  search), so viewers can access archives and
  search current articles of interest (very
  important for return viewership).

26
Remember, viewers are

• Impatient
• Evil
• Dumb (about navigation)
• Spoiled
• Lazy
• (Give them what they want and need) ?

27
Recommended Next Steps

• 1) Collect feedback from students looking at both
  designs (beta testing, focus groups, surveys).Or
  go directly to 2
• 2) After viability of the new design is
  established, test nuances of the redesign
  content development, information design,
  navigation (beta testing, focus groups, surveys)

28
Links

• Overview of Links www.julietdavis.com/clients/cr
  eativeloafing.
• Design Comp www.julietdavis.com/clients/creativelo
  afing/indexcomp3.html
• Dropdown Menu Sample www.julietdavis.com/clients
  /creativeloafing/indexcomp1-dropdown.html.
• PowerPoint Visual Critique (before/after)
  www.julietdavis.com/clients/creativeloafing/creati
  veloafing.ppt
• Creative Loafings Current Site
  http//www2.tampa.creativeloafing.com screen
  grab

Research

• Poynter EyetTrack07 Study http//eyetrack.poynter.
  org/keys_01.html
• There are Only Two Ways to Stop the Newspaper
  Death Spiralhttp//www.poynter.org/column.asp?id
  45aid161150
• Jakob Nielsens Banner Ad Study Banner
  Blindness Old and New Findings
  http//www.useit.com/alertbox/banner-blindness.htm
  l First 2 Words A Signal for the Scanning
  Eye http//www.useit.com/alertbox/nanocontent.h
  tml Mega Drop-Down Navigation Menus Work Well
  http//www.useit.com/alertbox/mega-dropdown-men
  us.html

29
END OF PRESENTATION Questions?
30
CL Sarasota has strong layout, navigation, and
branding.Just needs the link breadth that Tampa
has could go sideways as an option.
31
Example of site that is viewable and has
functional navigation
32
THEIR VIEWABLE 800 X 600 AREA 50-30-20
ratio50 Content 30 Navigation 20 Other Is
Ideal
33
Importance of Using Established Navigation
Principles

• TV AnalogyWe can get creative with your
  content . . . .not your remote control. ?

34
BTW MSNBC has famously excellent menu breadth
see next slide
35
Pop-up menus go sideways to accommodate extreme
breadth, while using navigation conventions
36
This is an 800 x 600 view within that.
Considering the 50-30-20 rule (50 content, 30
navigation, 20 other), we have 0 content
(because its not legible), 0 navigation, and
100 other.
37
1024 x 768 Screen
This is an 800 x 600 view (within box)
Considering the 50-30-20 rule (50 content, 30
navigation, 20 other), we have 0 content
(because its not legible), 0 navigation, and
100 other.