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.

This Presentation• 1) examines Creative Loafing’s current design• 2) examines basic usability and info design principles

including Poynter Institute’s EyeTrack07 Findingsand Jakob Nielsen’s research

• 4) makes recommendations based on research• 5) proposes an updated design

Format: Alternative Publication for news, politics, arts, entertainment (“We’re edgy and we’re gonna stay that way””Shelter 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.

• 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

YOUR CURRENT SITE: This is what your viewers see at 1024 x 768 (955 x 600 viewing area)

Currently, CL’s advertisers are paying for ad space that viewers can’t 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.

This is what your viewers see at 1024 x 768 (955 x 600 viewing area)

Creative Loafing’s Current Site at 800 x 600 (760 x 420 viewing area)The site needs to be meaningfully viewable at this dimension as well

even though the ads on the right will be cut off.

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.

Poynter Institute’s EyeTrack07 Studyhttp://eyetrack.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 Nielsen’s 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 Nielsen’s 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).

A Focus on Local Content Makes a Publication Valuable

• “There are Only Two Ways to Stop the Newspaper Death Spiral”http://www.poynter.org/column.asp?id=45&aid=161150

Calbuzz - 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 10:15 AM on Apr. 2, 2009

You have 3-5 seconds to establish trust with the viewer by showing usable page characteristics

before viewers will turn away.How can Creative Loafing

establish that trust?

New

Des

ign

Real

Siz

e

Dro

p-do

wn

Men

u

Real

Siz

e

1024 x 786 Screen Size (955 x 600 viewing area)Navigation, ads, and full content in view

800 x 600 Screen Size (760 x 420 viewable area)Approx. 50% content, 30% navigation (w/dropdowns open), 20% “other” (ads)

Tip For Banner Advertisers

• Jakob Nielson’s 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

Option: Slide show w/ top stories | BTW: Real pages will be longer

Des

ign

Elem

ents

Can

Var

y Ba

sed

on C

L Pr

efer

ence

s

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 (editor’s choice, people’s 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).

Remember, viewers are:

• Impatient• Evil• Dumb

(about navigation)• Spoiled• Lazy• (Give them what they

want and need)

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)

Links• Overview of Links: www.julietdavis.com/clients/creativeloafing. • Design Comp www.julietdavis.com/clients/creativeloafing/indexcomp3.html • Dropdown Menu Sample:

www.julietdavis.com/clients/creativeloafing/indexcomp1-dropdown.html.• PowerPoint Visual Critique (before/after):

www.julietdavis.com/clients/creativeloafing/creativeloafing.ppt • Creative Loafing’s 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 Spiral”

http://www.poynter.org/column.asp?id=45&aid=161150

• Jakob Nielsen’s Banner Ad Study: “Banner Blindness: Old and New Findings” http://www.useit.com/alertbox/banner-blindness.html “First 2 Words: A Signal for the Scanning Eye” http://www.useit.com/alertbox/nanocontent.html “Mega Drop-Down Navigation Menus Work Well “ http://www.useit.com/alertbox/mega-dropdown-menus.html

END OF PRESENTATION |Questions?

CL Sarasota has strong layout, navigation, and branding.Just needs the link breadth that Tampa has – could go sideways as an option.

Example of site that is viewable and has functional navigation

THEIR VIEWABLE 800 X 600 AREA | 50-30-20 ratio50% Content 30% Navigation 20 % Other Is Ideal

Importance of Using Established Navigation Principles

• TV Analogy:We can get creative

with your content . . . .

not your remote control.

BTW: MSNBC has famously excellent menu breadth – see next slide

Pop-up menus go sideways to accommodate extreme breadth, while using navigation conventions

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 IT’S NOT LEGIBLE), 0% NAVIGATION, AND 100% OTHER.

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 it’s not legible), 0% navigation, and 100% other.