web site proposal | the university of tampa proposal | powerpoint | new design link
TRANSCRIPT
![Page 1: Web Site Proposal | The University of Tampa Proposal | PowerPoint | New Design Link](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649e5f5503460f94b59f16/html5/thumbnails/1.jpg)
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.
![Page 2: Web Site Proposal | The University of Tampa Proposal | PowerPoint | New Design Link](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649e5f5503460f94b59f16/html5/thumbnails/2.jpg)
![Page 3: Web Site Proposal | The University of Tampa Proposal | PowerPoint | New Design Link](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649e5f5503460f94b59f16/html5/thumbnails/3.jpg)
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
![Page 4: Web Site Proposal | The University of Tampa Proposal | PowerPoint | New Design Link](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649e5f5503460f94b59f16/html5/thumbnails/4.jpg)
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.
![Page 5: Web Site Proposal | The University of Tampa Proposal | PowerPoint | New Design Link](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649e5f5503460f94b59f16/html5/thumbnails/5.jpg)
• 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
![Page 6: Web Site Proposal | The University of Tampa Proposal | PowerPoint | New Design Link](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649e5f5503460f94b59f16/html5/thumbnails/6.jpg)
![Page 7: Web Site Proposal | The University of Tampa Proposal | PowerPoint | New Design Link](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649e5f5503460f94b59f16/html5/thumbnails/7.jpg)
YOUR CURRENT SITE: This is what your viewers see at 1024 x 768 (955 x 600 viewing area)
![Page 8: Web Site Proposal | The University of Tampa Proposal | PowerPoint | New Design Link](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649e5f5503460f94b59f16/html5/thumbnails/8.jpg)
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.
![Page 9: Web Site Proposal | The University of Tampa Proposal | PowerPoint | New Design Link](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649e5f5503460f94b59f16/html5/thumbnails/9.jpg)
This is what your viewers see at 1024 x 768 (955 x 600 viewing area)
![Page 10: Web Site Proposal | The University of Tampa Proposal | PowerPoint | New Design Link](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649e5f5503460f94b59f16/html5/thumbnails/10.jpg)
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.
![Page 11: Web Site Proposal | The University of Tampa Proposal | PowerPoint | New Design Link](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649e5f5503460f94b59f16/html5/thumbnails/11.jpg)
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.
![Page 12: Web Site Proposal | The University of Tampa Proposal | PowerPoint | New Design Link](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649e5f5503460f94b59f16/html5/thumbnails/12.jpg)
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).
![Page 13: Web Site Proposal | The University of Tampa Proposal | PowerPoint | New Design Link](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649e5f5503460f94b59f16/html5/thumbnails/13.jpg)
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
![Page 14: Web Site Proposal | The University of Tampa Proposal | PowerPoint | New Design Link](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649e5f5503460f94b59f16/html5/thumbnails/14.jpg)
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?
![Page 15: Web Site Proposal | The University of Tampa Proposal | PowerPoint | New Design Link](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649e5f5503460f94b59f16/html5/thumbnails/15.jpg)
![Page 16: Web Site Proposal | The University of Tampa Proposal | PowerPoint | New Design Link](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649e5f5503460f94b59f16/html5/thumbnails/16.jpg)
New
Des
ign
![Page 17: Web Site Proposal | The University of Tampa Proposal | PowerPoint | New Design Link](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649e5f5503460f94b59f16/html5/thumbnails/17.jpg)
Real
Siz
e
![Page 18: Web Site Proposal | The University of Tampa Proposal | PowerPoint | New Design Link](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649e5f5503460f94b59f16/html5/thumbnails/18.jpg)
Dro
p-do
wn
Men
u
![Page 19: Web Site Proposal | The University of Tampa Proposal | PowerPoint | New Design Link](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649e5f5503460f94b59f16/html5/thumbnails/19.jpg)
Real
Siz
e
![Page 20: Web Site Proposal | The University of Tampa Proposal | PowerPoint | New Design Link](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649e5f5503460f94b59f16/html5/thumbnails/20.jpg)
1024 x 786 Screen Size (955 x 600 viewing area)Navigation, ads, and full content in view
![Page 21: Web Site Proposal | The University of Tampa Proposal | PowerPoint | New Design Link](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649e5f5503460f94b59f16/html5/thumbnails/21.jpg)
800 x 600 Screen Size (760 x 420 viewable area)Approx. 50% content, 30% navigation (w/dropdowns open), 20% “other” (ads)
![Page 22: Web Site Proposal | The University of Tampa Proposal | PowerPoint | New Design Link](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649e5f5503460f94b59f16/html5/thumbnails/22.jpg)
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
![Page 23: Web Site Proposal | The University of Tampa Proposal | PowerPoint | New Design Link](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649e5f5503460f94b59f16/html5/thumbnails/23.jpg)
Option: Slide show w/ top stories | BTW: Real pages will be longer
![Page 24: Web Site Proposal | The University of Tampa Proposal | PowerPoint | New Design Link](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649e5f5503460f94b59f16/html5/thumbnails/24.jpg)
Des
ign
Elem
ents
Can
Var
y Ba
sed
on C
L Pr
efer
ence
s
![Page 25: Web Site Proposal | The University of Tampa Proposal | PowerPoint | New Design Link](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649e5f5503460f94b59f16/html5/thumbnails/25.jpg)
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).
![Page 26: Web Site Proposal | The University of Tampa Proposal | PowerPoint | New Design Link](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649e5f5503460f94b59f16/html5/thumbnails/26.jpg)
Remember, viewers are:
• Impatient• Evil• Dumb
(about navigation)• Spoiled• Lazy• (Give them what they
want and need)
![Page 27: Web Site Proposal | The University of Tampa Proposal | PowerPoint | New Design Link](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649e5f5503460f94b59f16/html5/thumbnails/27.jpg)
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)
![Page 28: Web Site Proposal | The University of Tampa Proposal | PowerPoint | New Design Link](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649e5f5503460f94b59f16/html5/thumbnails/28.jpg)
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
![Page 29: Web Site Proposal | The University of Tampa Proposal | PowerPoint | New Design Link](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649e5f5503460f94b59f16/html5/thumbnails/29.jpg)
END OF PRESENTATION |Questions?
![Page 30: Web Site Proposal | The University of Tampa Proposal | PowerPoint | New Design Link](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649e5f5503460f94b59f16/html5/thumbnails/30.jpg)
CL Sarasota has strong layout, navigation, and branding.Just needs the link breadth that Tampa has – could go sideways as an option.
![Page 31: Web Site Proposal | The University of Tampa Proposal | PowerPoint | New Design Link](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649e5f5503460f94b59f16/html5/thumbnails/31.jpg)
Example of site that is viewable and has functional navigation
![Page 32: Web Site Proposal | The University of Tampa Proposal | PowerPoint | New Design Link](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649e5f5503460f94b59f16/html5/thumbnails/32.jpg)
THEIR VIEWABLE 800 X 600 AREA | 50-30-20 ratio50% Content 30% Navigation 20 % Other Is Ideal
![Page 33: Web Site Proposal | The University of Tampa Proposal | PowerPoint | New Design Link](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649e5f5503460f94b59f16/html5/thumbnails/33.jpg)
Importance of Using Established Navigation Principles
• TV Analogy:We can get creative
with your content . . . .
not your remote control.
![Page 34: Web Site Proposal | The University of Tampa Proposal | PowerPoint | New Design Link](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649e5f5503460f94b59f16/html5/thumbnails/34.jpg)
BTW: MSNBC has famously excellent menu breadth – see next slide
![Page 35: Web Site Proposal | The University of Tampa Proposal | PowerPoint | New Design Link](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649e5f5503460f94b59f16/html5/thumbnails/35.jpg)
Pop-up menus go sideways to accommodate extreme breadth, while using navigation conventions
![Page 36: Web Site Proposal | The University of Tampa Proposal | PowerPoint | New Design Link](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649e5f5503460f94b59f16/html5/thumbnails/36.jpg)
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.
![Page 37: Web Site Proposal | The University of Tampa Proposal | PowerPoint | New Design Link](https://reader036.vdocuments.net/reader036/viewer/2022062421/56649e5f5503460f94b59f16/html5/thumbnails/37.jpg)
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.