Learning Center
Plans & pricing Sign in
Sign Out
Your Federal Quarterly Tax Payments are due April 15th Get Help Now >>

Political Web Page Templates


Political Web Page Templates document sample

More Info
									  Redesign of the
Chico State Web Site
   An Enterprise-level Process
Why Have a Process?
 “Think before you act. Don't just put up a new site because you think you are behind the
 times. This is a common trap. Understand that there is more involved than simply designing
 a snazzier interface. Plan to plan. A logical workflow will help you cover all your bases.” -Goto
 & Cotler, Web ReDesign

 • The CSU Chico web site is the single most important
   communication tool the university has
       – It is our primary point of information contact for the campus
         community and the outside world
       – 1,080,123 page views in 2003 (home page only)
       – It communicates our image to our users
 • Web design has become a complex, multidisciplinary
       – Usability, user interaction design, graphic design, accessibility,
         information architecture, web technologies, etc.
       – Long gone are the days of the lone “webmaster”
 • A clear process defines goals and the means to
   achieve them
       – “No process, no success. Know process, know success.”

What’s Wrong with Just “Refreshing” the Look?
 “The main page serves as the most prominent and important navigation interface for users.
 Changes to this page can really hurt the mental model users have formed of the web site
 over time.” – Rosenfeld & Morville, Information Architecture for the World Wide Web

 •   Even “minor” changes in design can have large impacts on usability and user
      –   The home page is the single most important page in the site
      –   Yes, it should look nice, but is that reason enough to subject users to the pain of change?
 •   If we do this “refresh” now, we lose the opportunity to incorporate what we
     learn from Fred Condo’s class
      –   What‟s the rush??
 •   Without addressing the underlying structure of the site:
      –   We don‟t add any value to the user for putting them through change
      –   We‟ll just have to do this again, six months or a year from now
            •   When we address real issues with site structure and functionality, which we will have to do eventually
 •   If we decide to make real changes in structure later on:
      –   If we feel that we have to use the new design (and we will – it‟s new after all - and free), it will
          seriously limit our options in restructuring
            •   Form follows function; if form comes first, it limits function to fit the form
      –   We subject our users to the unfriendly process of multiple adjustments
      –   It decreases trust
      –   It costs more
 •   We don’t know the effect of these changes
      –   Everyone has opinions, but no one has any facts
      –   Will the new look attract more new students?
            •   We don‟t know
            •   The ability to find the information the prospective student is seeking in order to decide on a school is
                probably much more important than the look
Project Steps
   “Because design is something you can see, it‟s interesting to everyone. Everyone wants to
   jump to that first. Everybody has opinions about colors and fonts and layout… But they skip
   the functionality stage and start designing backwards.” – Indi Young in The Unusually Useful
   Web Book

     1.     Administrative buy-in
     2.     Define redesign goals
     3.     Assemble redesign team
     4.     Establish scope, timeline & budget
     5.     Establish standards
     6.     Analyze & test existing site
     7.     Profile site users
     8.     Develop & test information architecture(s)
     9.     Develop & test visual design(s)
     10.    Create & test “protosite”
     11.    Create & implement real site
     12.    Finish documentation
     13.    Go live
     14.    Maintenance
Good resources:
Administrative Buy-in
 “Web sites can be highly political projects. Everyone has their own ideas on what their
 company‟s site should do and how it should look. One of the biggest challenges for web
 producers is how to get your entire organization working toward a common goal.” – June
 Cohen, The Unusually Useful Web Book

  • Involve high administrators early in the
      – Nobody likes surprises
  • Get input from administration and
    department heads
      –   What they would like to see in the new site
      –   Remind them they aren‟t designing the site
      –   Don‟t give them control over terminology or labeling
      –   Remember: IR has the servers and the expert personnel
  • Get high-level sign off on redesign process
    and project control
      – Avoids meddling and micromanagement down the road

Define Redesign Goals
  “„What is the goal of this redesign?‟ „Why are we redesigning?‟ „What will the redesigned
  site accomplish that the present site doesn‟t?‟ You need answers to these questions.”
  [emphasis in original] - Goto & Cotler, Web ReDesign

  • What’s wrong with the current site?
       – What‟s right with the current site?
  •   What     issues must be addressed?
  •   What     issues do we want to address?
  •   What     standards must be met?
  •   What     are the limitations?
       – Technological
       – Political
       – Time & money
  • How will the new site be better than the old one?
  • How will the new site better address the university’s
    core objectives?

Example Redesign Goals
  “If you don't know where you are going, you will wind up somewhere else.” – Yogi Berra

  • Create new, fresher, more “hip” look
  • Implement strategic goals for university web
  • Improve navigation/site structure
  • Make site easier to use
  • Address accessibility issues
  • Attract more new students
  • Fulfill university core objectives
  • Improve site performance
  • Make site easier to maintain/change
  • Enhance university image/branding
  • Increase design consistency across entire site
  • Implement new technologies
      – e.g., content management system

 Assemble Redesign Team
     “We are continually amazed by the scale of business blunders caused by the false
     assumption that anybody can do this work.” - Rosenfeld & Morville, Information
     Architecture for the World Wide Web

     • Roles (one person may fill several roles)
          –   Producer/Project Lead
          –   Graphic/Visual Designer
          –   Information Architect
          –   Interaction/Usability Designer
          –   HTML Coder
          –   Programmer
          –   Accessibility Designer
          –   Content Manager
          –   Quality Assurance
     • Some campuses implement workgroups for
       each role

Good resource:
Establish Scope, Timeline and Budget
  “Scope creep is the slow, inevitable migration of a website from a straightforward,
  comprehensible project to an out-of-control nightmare.” - Goto & Cotler, Web ReDesign

  • What will and will not be done
  • Personnel
      – What percentage of timebase?
      – What parts of the process are they involved in?
  • Establish milestones
      – Set firm dates and stick with them
  • Plan for content lag
      – Involve content providers early in the process
  • Write a detailed production plan/creative brief
      – Outlines major goals, strategy & timeline
      – Get everybody (team members and their managers) on the
        same page
      – Who will be needed when and what they will do

Establish Standards
  “Most sites are built to work exclusively in web browsers – this year‟s web browsers. And
  that‟s short-sighted. At some point (perhaps sooner than you think) you‟re going to want
  your information to appear in other display systems, like handheld computers.” – June
  Cohen, The Unusually Useful Web Book

  •   Coding (XHTML, CSS, file naming, etc.)
  •   Accessibility
  •   Security
  •   Graphic design
  •   Communications
       – Branding, brand usage
  • Labeling
  • Content (writing guidelines, etc.)
  • Etc.

Analyze & Test Existing Site
  "Believe in usability testing. Redesign with your user in mind. Perform usability testing on
  both current and redesigned sites during the development process. Nothing gives you
  more honest feedback than watching someone go through your site." - Goto & Cotler,
  Web ReDesign

  • Examine log files for usage and patterns
       – Page view logs
       – Search logs
  • Do a page structure analysis
  • Create a visual site map to better understand the
    site’s existing structure
  • Conduct usability testing
       – More effective than surveys
       – Use volunteer students, staff & faculty
       – Doesn‟t have to cost much or take a lot of time
            • Any testing is better than no testing
  • Audit existing content
       – Understand what is in the site
       – Determine what can be reused

Profile Site Users
 “Everyone has an opinion about design. If your debate is based only on opinions, the person
 with the most power always wins. The team that has rational support for its conclusion can
 trump power and opinion. User research can give you concrete proof that one direction is
 better than another.” – Indi Young,

  • Who uses the site?
      – Categorize users
           • Currents students, faculty staff, alumni, etc.
  • What are their characteristics?
      –   Demographics
      –   Browser versions used
      –   Internet access (broadband/modem)
      –   Primary tasks on the web site
  • Develop personas for testing/designing purposes
      – 6-8 should be sufficient
  • Why personas?
      – They personalize the users you are designing for
           • Helps you visualize how each persona might approach the site
      – Used in testing scenarios
           • E.g., “How would Davin the art student use this feature?”
Example User Profile
  “Personas are fictionalized characters, based on the user profiles you‟ve developed for each
  segment of your audience. Though slightly, well, cheesy, personas can be quite helpful for
  creating awareness and understanding throughout your organization. They help tell the
  story of your site.” – June Cohen, The Unusually Useful Web Book

                      Name: Heather
                      Age: 21
                      Major: Anthropology
                      Familiarity with internet: Basic
                      Internet access: Roommate‟s computer, campus labs
                      Most commonly used applications: Email, Word, IM

  Heather is a casual internet user. Because she doesn‟t own her own computer
  and has only a modem connection, at home she mostly uses the internet to
  check email and chat with friends via IM. She does occasionally shop on the
  internet. At school, she uses the internet primarily to search for information on
  her classes and assignments, access course info via WebCT, and to sign up for
  classes. She typically uses the internet several times a week for class purposes.
  She knows nothing about the technology of the internet and cares even less.

User-Centered Design
 “The number one misconception that clients have is that they are the target audience for
 the site. But they are not, and their wife is not, and their kids are not. So the biggest
 misconception is that their opinion matters. We‟re designing the site for your users, not for
 you.” – Lance McDaniel in The Unusually Useful Web Book

  • Two best tools to insure user-centered design:
       – Usability testing
       – User profile scenarios
  • Focus on users and user goals
       – Make things explicit for new users
       – Provide shortcuts for expert users
  • Campus politics must be eliminated from the design
       – User-centered design must have buy-in from top levels
       – Site design process must be “hands-off” for administrators
  • Test, test, test!

Develop & Test Information Architecture(s)
 “Using the web is all about seeking information and finding it quickly and easily. It‟s about
 connecting your users to your content. Whatever the task, users need to be clearly and
 simply directed to the information sought.” - Goto & Cotler, Web ReDesign

  • Examine what other universities have done
  • Develop taxonomies
            • Hierarchical groupings of similar items
            • Labeling is vital (e.g., “Academics” vs. “Colleges & Departments”)
  • Do card sorting tests
            • Give users cards labeled with items and see how they group and interpret them
  • Conduct task analysis for common tasks that have poor
    task modeling on current site
            • Try to simplify click path
  • Develop site maps
            • Hierarchical structure and organization of content
            • Model of navigation schemes
  • Develop and test wireframes
            • Paper mockups of pages (navigation and content areas)
            • See how users interact with the organization you have developed
  • Conduct user scenarios to keep IA on track

Develop & Test Visual Design(s)
 “Whether you know it or not, - whether they know it or not – your site‟s appearance will
 resonate with visitors on an emotional level, creating and impression that affects the way
 they think about you and act on your site.” – June Cohen, The Unusually Useful Web Book

  • Develop design concepts
  • Refine into designs
  • Insure that designs stick to the architecture
      – Use approved labeling
      – Use correct navigation schemes
      – Follow wireframes
  • Get feedback
      – Focus groups
            • This is the one place in site design where focus groups can provide valuable
      – Management
  • Get approval
      – Powers that be must sign off on the design
      – No surprises – and no complaining later on

Create & Test “protosite”
 “Confirming assumptions before significant dollars are invested in design and production is
 always valuable. Testing should be part of every workflow at as many stages as possible.” -
 Goto & Cotler, Web ReDesign

  • Create skeleton site
      – Using proposed visual design, navigation & site structure
  • Multiple alternate designs can be tested
  • Conduct basic usability testing
  • Refine design and structure based on results

Create & Implement Real Site
 “If this were pie baking instead of web design, consider your fruit sliced, your ingredients
 measured, your oven preheated, and your crust shaped. After one more check of your
 recipe, you are ready to bake.” - Goto & Cotler, Web ReDesign

  • Reassess project status
       – Has the scope or other factors changed?
       – How are the budget, personnel, schedule?
  • Check content status
       – All content should be in and ready
  • Publish final page templates
       – Including CSS files and JavaScripts
  • Populate pages with content
       – Including invisible content
            • ALT tags, TITLE tags, etc.
  • Conduct internal QA testing
  • Fix bugs/problems

Finish Documentation
 “The more detailed the Style Guide is, the better insured the site is against the almost
 certain eventuality of design breakdown during maintenance.” - Goto & Cotler, Web

  • Documentation should have started at step
    4 (“Establish Standards”)
  • Create a Style Guide for the site
       – Fonts, colors, page dimensions, banners, etc.
  • Create a Production Standards guide
       – File naming conventions, code standards, CSS, etc.
  • Create page templates
       – Home page, secondary, tertiary, specialty pages, etc.

Go Live
 “All testing has been completed on the staging server, fixes have been made, production is
 frozen, and the announcement is in place. All systems are go.” - Goto & Cotler, Web

  • Freeze all design and content
  • Complete QA testing
  • Plan announcement strategy
      – Prepare long before the site goes live
           • E.g., if the site is scheduled to go live August 1st, let users know what to
             expect in the fall before they leave for the summer
      – Place announcement prominently on old home page
  • Consider phased, or soft, launch
      – Sections are phased in over time
  • Have a “What’s Changed” page
      – Explain what‟s changed and why
      – Familiarize users with the new site
  • Transfer to live server
  • Submit site to major search engines
  • Party!

 “Maintenance doesn‟t just happen. There needs to be a plan for immediate, post-launch
 fixes and ongoing, long-term regular updating. A 12- to 24-month maintenance plan is a
 good timeline to undertake.” - Goto & Cotler, Web ReDesign

 • Get post-launch feedback from users
      – Fix bugs, serious problems
 • Determine who is responsible for
   maintaining what
      – Which parts of the site are maintained by departments
      – Develop maintenance plan that spells out responsibilities
        & update schedules
 • Train departmental editors
      – So that they are familiar with standards, and with
        maintaining site integrity

Why all the Research and Testing?
 "Fearing the perils of analysis paralysis, managers tend to be very action oriented. 'Let's skip the research
 and get started with the real work' is a common sentiment. However, without this careful investigation and
 experimentation aimed at the discovery of facts, you'll find yourself basing your strategy on the unstable
 foundation of biased opinion and faulty assumption." - Rosenfeld & Morville, Information Architecture for the
 World Wide Web

  • Opinions and assumptions do not use your site: users
  • The only way to know if something actually works is
    to have real users use it
  • The more you know about your users, the better able
    you are to meet their needs
  • The earlier you test, the earlier you can detect and
    correct problems
             • Avoids very costly fixes down the line
  • But research & testing are too expensive and time-

 Fire, then aim   Strategy               Design                           Implementation

 Aim, then fire   Research      Strategy           Design             Implementation

                  From: Information Architecture for the World Wide Web, Rosenfeld & Morville

  The following books and websites were used in developing
  the structure of web committees for CSU Chico
    •   Web ReDesign: Workflow That Works
             •   Goto & Cotler
    •   Information Architecture
             •   Rosenfeld & Morville
    •   Adobe Master Class: Web Site Redesigns
             •   Marcy DiNucci
    •   Macromedia
             •   Website Production Management Techniques
    •   Web Style Guide
    •   Human Factors International


To top