« Older Entries

CCS Web Group sectional distinction usability testing

CCS usability testing on a number of our products and enhancements have proven useful in improving and understanding user interactions. Even when our test are focused on a specific task we gain insight on what our visitors are finding problematic when navigating any site. We intend to share this info in hopes you will find it useful.

Usability testing results

While conducting over the shoulder usability testing on the universities sectional distinction feature, we observed the following.

* Testers had no issue navigating the interface of the site, but were slowed down and sometimes confused by content labelling and content organization.

CCS recommendations

  1. To deploy the architecture change of adding the section title to the top of the vertical menu
  2. Treat each sections with a consistent pattern, maintaining similarities to labelling as much as possible.
  3. Do not nest menu items visitors would expect to see on the top level of a section i.e. “Contact Us”
  4. Re-enforce page titles to be more specific for clearer navigation and better SEO

McGill.ca review by Educheckup.com

How did Nick DeNardis rate McGill University on our web experience? Website reviews don’t happen very often, but Nick, the Associate Director of Web Communications at Wayne State University has taken on the task of reviewing higher education web experiences since 2008. With marketing, communications, web standards, and development under his belt, he provides an interesting perspective of the McGill website slotted at episode #320.

Recently the McGill team took on the project to redesign our 13 year-old homepage. It was a long process, with surveys, mood boards, wireframes, usability testing, and focus groups. We spent months in meetings, working with various groups honing the message and re-inventing the look and feel. We were sure to gather further feedback from our visitors after the launch, which seemed to go over well with most.

Nick’s 20 minute review draws attention to our accomplishments and shares his ideas for improvements. The video review takes an unscripted approach which allows for his initial impressions to be presented informally. One of the first things he comments on is our search. He appreciates its prominence and feels other universities’ students and staff could benefit from this quick and handy tool.

 

McGill University Search

 

“I’ve been toying with this, and wonder why institutions don’t do this. Studies have shown current students and people that are familiar with the university know what they are looking for. – I like the search bar”

He also suggested we incorporate pre-emptive search, which is spot on, in my opinion.

The review continues on into our inside pages, which honestly need more attention due to design inconsistencies and noticeably our overwhelming, unorganized content.

“There is some inconsistencies that if they cleaned up could definitely be a 4 1/2 or 5 star site. Information is where they are going to get hit – on the old areas you couldn’t get to specific information very easily”

Although I’m happy with our overall score, it was unfortunate that he missed our tablet display in the responsive design portion of the review. To be fair, he mentions that responsive design is a new addition to his review, which he currently tests by pulling the browser window. This is a quick way of testing responsiveness but can ignore other strategies; our tablet version is device only. You’ll never see the adaptiveness by pulling the browser, but on an IPad it will have a tailored layout. Also, sites depending on user agents to handle responsiveness will not score well either. I would recommend using an emulator or getting a sponsorship deal with some free fancy merch’.

 

McGill University Mobile

 

I was happily surprised how many of Nick’s acknowledgments were in line with our design team’s initial strategies. He provided a lot of constructive criticism and brought solutions and new ideas to improve the experience for our visitors. The fact that Nick has spent over four years reviewing higher ed websites says a lot of his understanding of educational institutions’ motives. I think he did a good job of bringing attention to our larger challenges without spending much of time on minute details.

A good review can help improve the work.

Is this meta, writing a review on a review? Yes, I guess it is. But I did want to thank Nick for taking the time to review our recent efforts.

Final Scores

  • Visual 94;
  • Information 87;
  • Code 93;
  • Overall 91;

A-

Quick Tip: Insert break

In the vein of last week’s tip about posting plain text, here’s a shortcut for adding a <br /> (line break) in the WMS WYSIWYG. Pressing RETURN/ENTER causes the editor to start a new paragraph; this is usually what we want but when we are formatting an address, for example, we don’t want each line to be a new paragraph. If instead we click SHIFT+ENTER, a only a line break will be added. Like CTRL-SHIFT-V for pasting plain text, this shortcut also works in a lot of word processors.

That said, don’t abuse breaks. Two breaks may look similar to a new paragraph, but it’s bad for consistency between pages, makes the HTML more difficult to edit and compromises the semantic correctness of the page (paragraphs should be labeled as paragraphs, after all).

List and learn

Lists often come in handy: unordered lists are a great way to present short, snappy content in point form, and ordered lists are great for walking users through a step-by-step process. HTML has tags for both, so make use of them!

WYSIWYG

In the WYSIWYG, lists work pretty much as they would in a word processor. Click the button I’ve marked 1 to start or end a bulleted (unordered) list, or the button to its right (2) for a numbered (ordered) list. While you’re editing the list, you just need to hit RETURN/ENTER to start a new item. If we want a nested list (a sub-list inside a list), we can use the indent right button (4), to the right of the list buttons; to bring a nested item back, use the indent left button (3).

Here’s an example of an ordered list nested inside an unordered list:

Note the extra padding on the left-hand-side of the sub-list. This makes it clear that the content of this list is subordinate to or extends the information in the item it is under. Now, let’s look at the HTML that represents this.

HTML

<ul>
  <li>I am the very model of a modern Major-General, I've information
  <ol>
    <li>vegetable,</li>
    <li>animal and</li>
    <li>mineral.</li>
  </ol>
</ul>

In the HTML, we can see what’s actually happening when we create a list. The ‘ordered list’ (<ol>) is literally inside the ‘unordered list’ (<ul>). To get rid of the nesting, we could move the <ol> and its contents outside of the <ul>:

<ul>
  <li>I am the very model of a modern Major-General, I've information
</ul>
<ol>
  <li>vegetable,</li>
  <li>animal and</li>
  <li>mineral.</li>
</ol>

This would produce two separate lists aligned to the same ‘level’ of left-hand padding.

How not to do lists

An unfortunately common alternative to the methods described above is to simply begin each line with a hyphen or bullet character, and separate each item with a line break or (even worse), make each a separate paragraph. The equivalent for numbered lists is manually inputting the numbers (or letters, or Roman numerals) on each line.

I really have to stress: you shouldn’t do this. Using the WYSIWYG is faster, and using HTML is more flexible, and both result in a much prettier finished product.

Quick tip: Pasting plain text

When pasting text into a page from a Word document, email or other “rich text” source (including web pages!), it’s important to make sure it gets processed correctly. Usually, this means clicking the Paste from Word button and using the dialog that comes up. This will preserve the original formatting insofar as possible, without adding a bunch of garbage HTML that can muck up the works.

Usually this garbage HTML won’t make it through the WMS’s filter, but it can still cause unpredictable behaviour, not to mention making it much more difficult to make sense of the HTML when viewing it directly.

If you’re just interested in the text, though, there’s a neat shortcut available if you’re using Chrome or Firefox: rather than using CTRL+V to paste the text, press CTRL+SHIFT+V. The text will be pasted in unformatted! It’s a neat trick, and seems to work in just about any “rich text” field (that is, any box where you can format the text), but doesn’t seem to be available in Internet Explorer.

« Older Entries
Blog authors are solely responsible for the content of the blogs listed in the directory. Neither the content of these blogs, nor the links to other web sites, are screened, approved, reviewed or endorsed by McGill University. The text and other material on these blogs are the opinion of the specific author and are not statements of advice, opinion, or information of McGill.