Category: Web design

Redesigning the Digital Commons Page

Recently, our team has been assisting with a new initiative to make sure documents sent in to our institutional repository (IR) are accessible. I won’t go into much detail, but since this new initiative was being launched, it was proposed to have the digital commons (our IR) page redesigned for the launch.

Old Page

The old page was really just a lot of text, and too much of it. I’m also not sure how long it had been since anyone had revised it. The biggest problem was that it was difficult to find what you wanted, especially how or where to submit a document.

Old Digital Commons Page
Old Digital Commons Page

Mockups

So the first mockup was actually given to me by the group working on the IR project. While a vast improvement over the original page, I was not a fan of the quadrant look. I’m probably biased because it was overused at my last work place, but regardless, I thought I could do better.

Mockup #1
Mockup #1

One thing that didn’t make sense to me was why you would have a link to a search page instead of just building in a search on the page (same with the news). While a search box was thought of, I’m not sure how it would’ve worked into the square design. I was actually working on the Articles redesign around the same time, so I ended up using some of the ideas I had floating around in my head already.

Mockup #2
Mockup #2

The colours I used were based on the first mockup, which were in turn based on the IR site’s colours.

Redesigned Page

The redesigned page came out pretty much exactly as the mockup. However, the project members called me the day after to tell me that the green shows as a very ugly yellow if the screen or projector is not properly calibrated. So, I ended up changing the colours to our library’s colours.

Current New Digital Commons Page
Current New Digital Commons Page

Most of the text that was on the original page is now on the About page linked from this landing page. I think it’s a huge improvement, so hopefully it helps to encourage more of our users to submit things to our IR.

Revised Articles Section & New Landing Page: Using a Card Sort to Clean Up

As part of the ongoing effort to improve the website, I have been redesigning the website one section at a time. Earlier in the term, I did the Research Help section. In the last couple of weeks (that’s right, only about 2-3 weeks!), I worked on getting the ‘Articles’ section cleaned up with a new landing page.

old articles page
Old Articles Landing Page

Card Sort to Clean Up

old articles menuI knew that I wouldn’t have time to do a proper card sort study, but I decided to do a card sort with the web committee. We have enough people that I divided the committee up into two groups and gave them sticky notes with the names of the existing pages.

The sticky notes consistent all the local navigation links from the left side of the existing page and the second level links you see in the expanded part of the ‘More’ menu here (right). Then, I gave the usual instructions for a silent open card sort (no talking, group as you see fit).

While the purpose of a card sort is not to help clean up a section, it really got staff to see what fit in the Articles section and what didn’t. A lot of the pages were also deemed no longer relevant.

As a group, we made decisions on what to remove, and what to move and where. Quite a lot of the content was moved to either our subject research guides or our FAQ system.

There were one or two pages that we couldn’t decide what to do with, so for the time being they’ve been left where they are for now (e.g. RefWorks page is still in the ‘Articles’ menu though not linked on the landing page).

Mockups

With the pages that were left, I created a few mockups.

The web committee met again to discuss the mockups. I already had my heart set on either #2 or #3, because the whole idea is that it’s simple and clear. Having only one search bar with just a few links give users focus on what they’re looking for. Different people had different preferences on mockups, but with some discussion, the group settled on mockup #3 with a few revisions.

Staff Feedback

As with the research help page, I posted the revised Articles mockup in the staff room to give everyone a chance to provide feedback. This time, I didn’t get any feedback that resulted in any changes, so the final page is the same as the revised version.

New Page

Even though I’m on vacation, I wanted to get the new page up before the next term, so the new ‘Articles’ landing page went up this week.

new articles page

Steve Krug: You’re NOT Doing Usability Testing? Are You Nuts?

The University of Toronto iSchool was lucky enough to get Steve Krug of Don’t Make Me Think fame. If you haven’t read it and you’re at all interested in usability, I would definitely recommend it. Anyway, here are my notes from today’s talk.

Goal

Convince you that usability testing is the most valuable thing you can do to ensure that what you’re building works.

12 Years Ago – The Debate

Realized seeing the same story over and over again. He first started by turning it into a comic. Basically the same debates happened over and over, frequently without decisions being made. It’s difficult to find a middle ground, because each person comes with their own perspective. Partly, there’s no hard and fast answer, because it depends on the context.

Usability testing eliminated most debates. Seeing users use what they designed changed their perspective and start talking from the user perspective rather than personal biases.

Keeping It Simple

Traditionally, usability is done in a lab with the minimum 8 users in a day by an outsider, ending in an expensive report which may not be convincing to the team.

Rocket Surgery Made Easy written more for people intending to actually do usability testing.

Just do it with:

  • 3 users per round
  • set up a monitor in another room to watch
  • record screencast
  • no stats, no faux validity, but produces meaningful insight
  • no big report, just debrief over lunch, report in 1-2 page email

Live Demo

Use script, which can be downloaded from Krug’s website. Instead of a website, he did a live demo on the Clear mobile app. Interestingly, the participant could not complete the task, which was interesting since the app is highly praised.

RSME: The 22-minute version

6 Maxims

  • A morning a month is all we ask.
  • Start earlier than you think makes sense. – Can start before you start by testing a competitor’s or old version, or even a sketch on a napkin.
  • Recruit loosely and grade on a curve. – Take just about anyone, and judge whether everyone would have that problem or if it’s just because not from target audience.
  • Make it a spectator sport.
  • Focus ruthlessly on the few, most serious problems. – Right away write down the top 3 problems to take into debrief.
  • When fixing problems, always do the least you can do. – The smallest change might do to solve or help mitigate the problem. Tweak, don’t redesign.

Q&A

  • James Chudley CX Partners wrote on the approach to doing mobile app testing that needs context.
  • Tools for Remote Testing – Goto Meeting, WebEx and need high quality audio
  • Analytics good to help know what to test
  • Do usability more frequently rather than testing a lot of people, because you quickly hit diminishing returns
  • Task specification – allow user to have the choices of content

MozFest 2012: Notes from Responsive Design Session

Techniques & Tips

  • flexible grids
  • media queries that aren’t pixel dependent
  • media queries to selectively adapt the page
  • responsive images (max-width: 100%, can hide small (767px)/medium(1296px)/large (1440px))
  • can use modernizr to detect if touch device
  • Foundation has flex classes for embeds to resize YouTube videos, etc.
  • For iframes, can use padding: % of ratio of iframe/embed
  • Responsive iframes by NPR will do it for you as well
  • Source code order (for screen readers especially)

Download Foundation (basic responsive, reset files) – uses 12 columns

Thoughts

Coding on the fly is great if the space is setup to be a hack session type thing, but the way the room was set was very much just presentation style. I just feel like I’m not really learning much when someone is coding in front of me. Demo is totally fine, but just watching them enter text seems like a bit of a waste of time.

I know mozfest is open for everyone, but somehow I expected it to be more advanced. I don’t think this covered anything I didn’t already know, and I wasn’t a huge fan of the fact that it was based on an existing package.

Definitely a great session to have for those who don’t know anything about responsive design though.