Difference between revisions of "Common Look & Feel (CLF) - WEB"

From SFU_Public
Jump to: navigation, search
Line 170: Line 170:
  
 
== <br>Other possible activities  ==
 
== <br>Other possible activities  ==
 +
 +
*Usability Studies - An ongoing dialogue with all users of the site is essential to identitfying problems eary, as well as providing the core audience with the features and/or content that is most important to them.&nbsp; There have been some studies in this area, some links below. <br>
  
 +
<br>
 +
 +
'''Jakob Nielsen's Alertbox, December 15, 2010&nbsp; '''[http://www.useit.com/alertbox/students.html '''College Students on the Web''']<br>
 +
 +
An interesting result from this study dispels some common myths about college students using their institutions websites. There is a full report available for download. <br>
 +
<blockquote>
 +
''Myth 1: Students Are Technology Wizards<br>Myth 2: Students Crave Multimedia and Fancy Design<br>Myth 3: Students Are Enraptured by Social Networking''<br>
 +
</blockquote>
 +
'''Smashing Magazine September 24th, 2009 '''[http://uxdesign.smashingmagazine.com/2009/09/24/10-useful-usability-findings-and-guidelines/ '''10 Useful Usability Findings and Guidelines''']<br>
 +
 +
Some general UE tips that can be considered for all users on all websites. Of particular note to the SFU website may be points 3, 6 and 8. The quality of design is directly related to a websites usability. The design must be current and engaging. If SFU CLF is reducing the nuber of links in the main red bar, perhaps this will allow more room for users to type natural searches. Finall USER TESTING DOES NOT NEED TO BE EXTENSIVE. This indicates that all user testing is beneficial, and does not need to be a huge cost in time or energy.<br>
 +
<blockquote>
 +
''1. Form Labels Work Best Above The Field<br>2. Users Focus On Faces<br>'''3. Quality Of Design Is An Indicator Of Credibility'''<br>4. Most Users Do Scroll<br>5. Blue Is The Best Color For Links<br>'''6. The Ideal Search Box Is 27-Characters Wide'''<br>7. White Space Improves Comprehension<br>'''8. Effective User Testing Doesn’t Have To Be Extensive'''<br>9. Informative Product Pages Help You Stand Out<br>10. Most Users Are Blind To Advertising<br>''
 +
</blockquote>
 +
<br>
 +
 +
'''Bob Johnson's Blog on Higher Education Marketing December 1, 2008 '''[http://www.bobjohnsonblog.com/2008/12/revisiting-jakob-nielsens-top-ten-mistakes-in-web-design.html '''Revisiting Jakob Nielsen's "Top Ten Mistakes in Web Design"''']<br>
 +
 +
There are some basic rules or "heuristics" which apply to all websites that are always worthwhile to double check...<br>
 +
<blockquote>
 +
''1. Bad search<br> 2. PDF files for online reading<br> 3. Not changing the color of visited links<br> 4. Non-scannable text<br> 5. Fixed font size<br> 6. Page titles with low search engine visibility<br> 7. Anything that looks like an advertisement<br> 8. Violating design conventions<br> 9. Opening new browser windows<br> 10. Not answering users' questions''<br>
 +
</blockquote>
 
<br>
 
<br>

Revision as of 19:43, 24 January 2012

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.

Present: Byron Henry; Eryn Holbrook; Steve Hannah; Jason Toal; Gladys We; Jeremy Rosenberg; Jordan Raine; Andrew Gray Drinkwater; Lyndsey Kingston; Angela Runnals
Regrets: Nina Saklikar; Steve Ray

Agreed:
1. We support having a common look and feel. At a minimum, we need:
- a common header/banner (the current banner could do with a redesign and we need to rethink the links to the Burnaby, Surrey and Vancouver versions of the home page).
- a consistent approach to navigation (navigation is currently supported by the left-hand menu but there are technical problems related to long menus and long titles). Discussion: having menus in different places on different pages is not a good idea.
- a powerful search function. (Search has been broken. IT Services is implementing a fix, but there is still a need to look at (a) making search function better, (b) adding contextual search, and (c) styling search and search results to conform to the CLF.)

2. We need an ongoing process for updating/improving the CLF, and how should it be managed? How would/should changes be made? Where/how should this be recorded? Updated?

3. Any solution should be platform-independent.

4. We should recommend a redesign. This group could come up with required parameters for the redesign, encompassing issues such as
- what works and needs to stay
- what doesn't work and needs to go
- how to manage a one university homepage, three campuses model
- need to make sites mobile-friendly
- need to do extensive testing with various target groups.

Action items:
- Review university websites, particularly universities that have multiple campuses, and come up with examples that work well. Describe the features that work well. (All). Note or enter examples on wiki.
- Compile web traffic stats to shed some light on how people find their way around currently. (Gladys to take the lead)

Prior history of this group: concerns raised

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

  • Usability Studies - An ongoing dialogue with all users of the site is essential to identitfying problems eary, as well as providing the core audience with the features and/or content that is most important to them.  There have been some studies in this area, some links below.


Jakob Nielsen's Alertbox, December 15, 2010  College Students on the Web

An interesting result from this study dispels some common myths about college students using their institutions websites. There is a full report available for download.

Myth 1: Students Are Technology Wizards
Myth 2: Students Crave Multimedia and Fancy Design
Myth 3: Students Are Enraptured by Social Networking

Smashing Magazine September 24th, 2009 10 Useful Usability Findings and Guidelines

Some general UE tips that can be considered for all users on all websites. Of particular note to the SFU website may be points 3, 6 and 8. The quality of design is directly related to a websites usability. The design must be current and engaging. If SFU CLF is reducing the nuber of links in the main red bar, perhaps this will allow more room for users to type natural searches. Finall USER TESTING DOES NOT NEED TO BE EXTENSIVE. This indicates that all user testing is beneficial, and does not need to be a huge cost in time or energy.

1. Form Labels Work Best Above The Field
2. Users Focus On Faces
3. Quality Of Design Is An Indicator Of Credibility
4. Most Users Do Scroll
5. Blue Is The Best Color For Links
6. The Ideal Search Box Is 27-Characters Wide
7. White Space Improves Comprehension
8. Effective User Testing Doesn’t Have To Be Extensive
9. Informative Product Pages Help You Stand Out
10. Most Users Are Blind To Advertising


Bob Johnson's Blog on Higher Education Marketing December 1, 2008 Revisiting Jakob Nielsen's "Top Ten Mistakes in Web Design"

There are some basic rules or "heuristics" which apply to all websites that are always worthwhile to double check...

1. Bad search
2. PDF files for online reading
3. Not changing the color of visited links
4. Non-scannable text
5. Fixed font size
6. Page titles with low search engine visibility
7. Anything that looks like an advertisement
8. Violating design conventions
9. Opening new browser windows
10. Not answering users' questions


Retrieved from "https://wiki.its.sfu.ca/public/index.php?title=Common_Look_%26_Feel_(CLF)_-_WEB&oldid=1904"