Common Look & Feel (CLF) - WEB

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.

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
  

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

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. 

BRANDING

• 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
  

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
  

Search improvements - BRANDING -

Better integration with social media sites or at least let all use the same icons
- even better would be an iconography library

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?