1 / 37

This Pr esentat ion

Web Site Proposal | The University of Tampa www.julietdavis.com/clients/creativeloafing Proposal | PowerPoint | New Design Link See notes on each design comp slide for explanation. This Pr esentat ion. 1) examines Creative Loafing’s current design

milt
Download Presentation

This Pr esentat ion

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. 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

  3. CL Highlights • 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.

  4. Team’s 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

  5. Critique of Current Site

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

  7. 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.

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

  9. 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 welleven though the ads on the right will be cut off.

  10. 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.

  11. 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).

  12. 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=161150Calbuzz - 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

  13. You have 3-5 seconds to establish trust with the viewer by showing usable page characteristicsbefore viewers will turn away.How can Creative Loafingestablish that trust?

  14. New Site Design

  15. New Design

  16. Real Size

  17. Drop-down Menu

  18. Real Size

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

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

  21. 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

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

  23. Design Elements Can Vary Based on CL Preferences

  24. 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).

  25. Remember, viewers are: • Impatient • Evil • Dumb (about navigation) • Spoiled • Lazy • (Give them what they want and need)

  26. 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)

  27. 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

  28. END OF PRESENTATION |Questions?

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

  30. Example of site that is viewable and has functional navigation

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

  32. Importance of Using Established Navigation Principles • TV Analogy:We can get creative with your content . . . .not your remote control. 

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

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

  35. 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.

  36. 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.

More Related