Revision as of 21:03, 17 November 2011

SFU's common look and feel (CLF) standards for web design are found here http://www.sfu.ca/clf/web.html

CALL FOR INPUT
There are no plans officially to update the CLF, but we would like to gather up the issues and make some reccomendations to be carried forward to the CMS steering committee.
The information below is taken from (but not limited to) internal discussions and emails from sfu webmasters.  It is being recorded on this wiki to encourage discussion and contributions from all in the SFU community. Please feel free to add your issues, complaints, suggestions below, or make comments and ask questions on the discussion page.  Sept 28 2011.

CLF Modernization Committee

Committee members

Byron Henry (henry) (chair)

Andrew Drinkwater (agd)

Steve Hannah (shannah)

Eryn Holbrook (eryn)

Lindsey Kingston (lyndsey_kingston)

Jordan Raine (jordan_raine)

Steve Ray (seray)

Jeremy Rosenberg (jeremy_rosenberg)

Angela Runnals (runnals)

Nina Saklikar (nsaklika)

Jason Toal (jason_toal)

Gladys We (we)

This committee was formed in response to the concerns raised at a meeting of the CMS Steering Committee on 12 October, 2011.

Terms of reference are still to be clarified, but include:

1. Create a limited-term working committee to analyze website traffic and the university's goals/vision, to integrate user needs and university vision such as “student-centred, community engaged and research-driven.”

• Create actionable goals for the CLF, such as: convert visitors into customers, deliver consistent interaction experience, allow for ease of information and visitor flow, develop an annual review process for all CLF pages such as the site map and the A-Z directory.
• Survey other university websites for best practices and ideas. We're not the only ones struggling with multiple campuses and a thousand agendas from all the faculties and departments.
  
  

First meeting: 8 November, 2011.

Action items:

1. Provide web traffic stats to support possible changes (being organized by Gladys We).
2. Review other university websites for good examples.
   

Prior history of this group

Navigation

The navigational elements of a website are mostly concerned with the menu system, its organization and placement. Also, it may include problems with the SFU search, and key navigation or "landing" pages. (eg, A-Z)

Search

• Search improvements - USABILITY - How to deal with SFU search vs. sub domain search and search the web options.
• consider the search modification to the CLF top menu bar as used at www.cs.sfu.ca
• SFU search on top is confusing and competing with the CQ site search, there is really no reason to see 2 search boxes on the same page.
  
• Make the standard bar more useful including a better search box
  
• Include SFU search page in the CLF. Run new project to improve results and the searching experience in general (see Ongoing Support)
  

Layout

• Left hand menu for sub pages - Colors and typographic states could be re-thought. Indentation reduces menu width. Animated menus may be a solution.
  
• The global links lack context and relevance. Participants (Continuing Studies students) expected "Burnaby" to link to Burnaby-based Continuing Studies programs and courses, "Surrey" to link to Surrey-based Continuing Studies programs and courses, etc.
• The available SFU online services (accessible through "SFU Online") is mostly unavailable and not applicable to Continuing Studies students.
• The "A-Z link" page is out-of-date.
• The navigation menu, with the grey links against a grey background, does not stand out enough. Participants considered the menu extremely important but found it "dull" and "in the background."
• Whenever we deviate from web conventions, we run into usability problems. One example is the placement of the "Contact us" button. Participants commented that the "Contact us" link is typically found more towards the end of a navigation menu (more towards the bottom in a vertical navigation menu; more towards the right in a horizontal navigation menu). When it's not where one expects it to be, it becomes difficult to find.
  
• SFU logo link - Where should the SFU logo in the top left corner link to? (SFU HOME? Sub Domain home?)
• Redesign the landing page. I personally find the right-side navigation menus on landing/home pages a bit awkward to use, since I am so accustomed to menus being on the left. It is also inconsistent with all the other pages, which have the main menu on the left.
  

Campus-specific home pages

• Resolve usability issues with Burnaby, Surrey, and Vancouver "home" sites. Do campus home pages add more confusion? What do users think? How do we resolve Faculty and program sites that have services on multiple campuses.
  
• A-Z list  - should it be contextual to the sub domain you are on?
  
• Have one home page (kill campus specific ones – Burnaby/Vancouver get very little traffic)
  
• Create a better events @ SFU hub to replace these pages
  
• The biggest issue at this point for us is the links at the top bar, it is unclear to our users that those are sfu links rather than faculty links. When we did our user testing, our students kept getting tricked by the "Surrey" link at the top of the site, thinking it would take them to the Programs FOE offers at Surrey. Same goes for the A-Z, they expected that to be the A-Z for FOE (given the context).
  

SFU home page

• The A-Z list is an old 'stop-gap' solution from before there was a CLF.  Does it make any sense to promote it at such a high level? it is essentially the site map page, which is common on most websites, but usually not made such a big deal of (drop down menus etc.)
  
  • Related to navigation issues, a larger font size could improve a users sense of where they are
    
• Touch friendly navigation on the home page
  
• Make the standard bar more useful including a better search box
  
• The biggest issue at this point for us is the links at the top bar, it is unclear to our users that those are sfu links rather than faculty links. When we did our user testing, our students kept getting tricked by the "Surrey" link at the top of the site, thinking it would take them to the Programs FOE offers at Surrey. Same goes for the A-Z, they expected that to be the A-Z for FOE (given the context).
• SFU search on top is confusing and competing with the CQ site search, there is really no reason to see 2 search boxes on the same page.
  
• Include a "previous item" button below the big picture, in addition to the existing "next item" button.

General strategies

• Mobile web strategy be it responsive design or mobile specific sites
  
• Redesign the landing page. I personally find the right-side navigation menus on landing/home pages a bit awkward to use, since I am so accustomed to menus being on the left. It is also inconsistent with all the other pages, which have the main menu on the left.
  
• Evolve into HTML5. HTML5 supersedes XHTML 1.0 Strict, and has/will become the long-term HTML standard. Evolving the CLF code to HTML5 will future-proof SFU websites, and also opens the door to new features, such as <video> and <canvas> tags.
• Use CSS to implement hover-over menus. Currently, the "SFU Online" and "A-Z Links" hover-over menus are driven by JavaScript, which actually in turn modifies the CSS "display" property to show/hide the menu. This process can be simplified by using the CSS ":hover" pseudo-class; no JavaScript needed.
  

Look and Feel

Design

Can further be broken down into; Graphics, Photography, Branding, Page layout, etc. 

General concerns

Compared to most other local university and college websites, our CLF looks out-of-date. The graphic interface lacks the more contemporary look and feel and fluidity that the other schools' websites have transitioned to. In the past 5 years, there have been massive advancements in web design and technologies, browser capabilities, SEO techniques and social media, and we need a framework that takes advantage of these advancements and incorporates them more seamlessly.

The CLF can be a useful guideline when it comes to colour choices, typography, use and placement of logo, and even page layouts. We wholeheartedly support having a common look and feel because it allows us to leverage the SFU brand. At the same, the way we think our content and navigation should be structured based on the audience we're trying to reach and the goals we're trying to accomplish may not make sense to other units/departments (and vice versa). The CLF should be flexible enough to accommodate such a difference.

Branding/consistency

• Can the search results page LOOK like an SFU page? (ie, include CLF)
  
• Labelling for department name in top banner. 
• SFU LOGO - does it even look like a link?
• Clean-up the SFU logo. If you look closely at the words "SIMON FRASER UNIVERSITY", you'll notice that they have a red tint (instead of just being white text). Also, if you zoom in enough, you'll also notice a few semi-transparent white dots around the right and bottom edges of the red SFU logo block. Here's an example: http://www.sfu.ca/hp/clf/images/Logo_Main.gif
  
• Better integration with social media sites or at least let's all use the same icons
  - even better would be an iconography library
  

Typography

• Related to navigation issues, a larger font size could improve a users sense of where they are
  
• Better standard typography across sites with web fonts
  
• Clean-up the SFU logo. If you look closely at the words "SIMON FRASER UNIVERSITY", you'll notice that they have a red tint (instead of just being white text). Also, if you zoom in enough, you'll also notice a few semi-transparent white dots around the right and bottom edges of the red SFU logo block. Here's an example: http://www.sfu.ca/hp/clf/images/Logo_Main.gif
  
• Standard widgets (Rotating images on home page, recent news, etc. )
  - Yahoo! Design Pattern library is a good reference
  

Layout

• Right column width needs to be larger (for why?)
• A clear grid system
  

Technical implementation

The stuff you don't see. The technologies used to build the banner and its navigation system. The CLF project will have the most impact on the CQ5 content management system and its templates.

• Search improvements - RESULTS - How is search implemented: can a new infrastructure make it as good as an actual google search?
  
• Fix 404 error on searches made from search page
  
• 
  

Information/ Content

• We need a campus-wide recommended house style guide for website content. (This relates to the "F" part of "CLF.") Design and navigation are important but so is consistent use of terms and tone.
• Need a federated news system, so news stories can be created at one level. but included in rotations at another level.  eg a news story is created by a school and can be easily inlcuded in the faculty news rotation and the unversity news rotation.  and vice-versa.  A feature for CQ?
  

Recommendations for ongoing support

• SFU should assign responsibility and adequate resources. That means someone having responsibility for the CLF in their job description, reviewing issues as they arise, and modifying the CLF when needed.  And yes, I suppose someone should be the CLF police as the university's brand and perceived professionalism are important.
  
• Testing for usability should be done at intervals, done in a statistically meaningful way, and redone when new devices raise issues (as with mobiles in the last couple of years).
• Review page stats, identify most common pages and user paths - where are users going? what are they looking for?
  

Other possible activities