City of Seattle: Usability Review
City of Seattle
Website Usability Study Overview
Website: www.seattle.gov
Purpose and Scope:
The purpose of this site is to provide information to members of the Seattle community as well as visitors and or any other user seeking information about the city, its services, and its elected officials.
Criteria:
- Does the site have a clear navigation? Is it clear where the user should start?
- Is the site identity and mission clear from the homepage?
- Is it obvious where you are in the website? Does the site use breadcrumbs and other “you are here” markers effectively?
- Does the site effectively use typography to create a clear visual hierarchy?
- Is the site purposeful in page layout, strategically using color, photography, and texture?
Criteria #1
Does the site have a clear navigation? Is it clear where the user should start?
Instead of a more common top navigation with the menu choices laid out, the site employs an accordion menu, commonly found in mobile, but even here on the desktop version. However, I think the site could benefit from these options being very visible on the homepage rather than only being visible with a click.
Navbar with the accordion menu at the top right.
The majority of the time that users are coming to this site, they have a purpose in mind and are looking for something specific. Though the accordion menu may look cleaner, I think users would benefit more from the menu choices spelled out at the top of the page so they know exactly where to look.
POSSIBLE IMPROVEMENTS:
- Menu options spelled out across the main navigation bar at the top of the page
- Possibly even indicating what might be the most pertinent information (such as “Find a City Job”) that a user is seeking and highlight that button to stand out in the menu bar.
Criteria #2
Is the site identity and mission clear from the homepage?
The site ID and City of Seattle logo is in the top left corner of the main navigation where a typical user would look for it, and I like that they also have the mayor’s name where you might find a site tagline.
However, the homepage feels overwhelming to me. It seems like there is probably a really great photo of a Seattle skyline but its covered up by this grid of boxes of what they’ve deemed important links. I don’t really think the grid is an effective tool because its hard for your eye to know where to look first.
They have this great tool a little farther down the page called “Top Requests.” I think this would be more effective higher up the page. Though I would love to see a great large slider of Seattle imagery, I think there is more important information to feature.
At first, it seems distracting, but I do like the yellow bar at the top under the menu displaying urgent notifications and I think it builds into the site identity and mission, because after all its a city site and it is important to help keep the city informed, up-to-date, and safe.
Urgent notification bar that gets your attention, but isn't overwhelmingly distracting from the homepage design. If it gets annoying, you also have the ability to exit out of it.
POSSIBLE IMPROVEMENTS:
- If they were going to go with the grid, I think either no photo behind and just a white background or possibly a photo that is very low opacity as all of it together is too much and too distracting
- Instead of just a blue menu bar, perhaps use a larger photo of the city that goes behind the menu so you can still have a photo but save a little space for more mission-focused information by allowing it to creep up into the menu.
- Find somewhere “above the fold” to showcase the mission of the site, and I believe it should probably have to do with those top 5 user requests.
Criteria #3
Is it obvious where you are located in the website? Does the site effectively use breadcrumbs?
Yes and no. There are some instances when pages offer a breadcrumb trail at the top of the page that makes it very easy to navigate.
Pretty clear breadcrumb trail back to the homepage, though bolding the page you are on instead of a lighter weight font and everything else bold is more clear.
But not all of the pages have that. And some links take you to possibly external sites, though it's not clear that they aren’t related but still unclear of where you are in the site. Typically, had to use the back button to get back to where I started.
And some pages in the breadcrumbs trail have both the ‘home’ symbol as well as the actual word ‘Home’. It took me a minute to figure out why that was and eventually after much browsing I understood that the ‘home’ symbol meant the main Seattle.gov home page, and the actual word ‘Home’ meant the homepage for that specific section. Confusing.
Home or Home???
Also, the sections of the site aren’t really spelled out very clearly, so it was even harder to figure out why there were two homes, as there isn’t a menu for the “Office of the City Clerk” to use the example above.
POSSIBLE IMPROVEMENTS:
- Bold the last item of the breadcrumbs trail list instead of everything else
- Instead of using the home symbol and the word ‘Home,’ use the actual name of the section and then ‘home.’ So “Office of the City Clerk” or “Office of the City Clerk Home.’ Yes, it’s a little longer, but I think its much more clear for the user.
- The overall site navigation is still a little confusing visually. I think a better design would help make it more clear what sections there are to the site. Will discuss this later on.
Criteria #4
Does the site effectively use typography to create a clear visual heirarchy?
Sort of. Throughout most of the pages there is a pretty clear hierarchy created through the size, thickness, and color of the type.
Here are some good examples:
Clear that "Recent Videos" is the section header. Titles and explanatory paragraphs for each video clip are also obvious.
Thought the size difference is slight, it is obvious because of the use of color.
However, where the site doesn’t use this effectively, and I might argue where it needed to use it the most, is on the homepage above the fold where they have the grid. When I first view the page, my eye does not know where to look first, it isn’t clear. At all.
Where do I look first??
The upper left slider section is slightly larger, but not enough of a difference really that it catches my eye and says without a doubt, “Look at me first!!”
POSSIBLE IMPROVEMENTS:
- Maintain a consistent use of typography throughout the entire site, possibly finding an H1 that is much larger or a different color than the rest so that it can be used for things that really need to stand out like page title.
Criteria #5
Is the site purposeful in page layout, strategically using color, photography, and texture?
Sometimes. I’ve already discussed my issues with the homepage grid, but another issue I have is that besides the small site ID, it really doesn’t say ‘Seattle’ anywhere very prominently.
The image of the homepage behind the grid is visually overwhelming and distracting.
A better example of the site’s more effective page layout is on the ‘Services’ homepage.
Nice!
It’s obvious from the large page title where you are, a nice picture that isn’t crowded and makes it also obvious that you are on a website about Seattle. The grid works here for the services by topic because of the white space. The blue font that the services are making them stand out and they have a hover effect so it’s also clear that they are clickable and will show you more information about that topic.
Topic title changes colors slightly and underlines when you hover over it to show its a clickable link.
POSSIBLE IMPROVEMENTS:
- Remove homepage background photo and utilize white space to add focus to what is important in the grid
- Remove the grid entirely and do a different layout, capitalizing on the space that is being used up by the background photo.
New homepage mockup
New mockup idea for Seattle.gov homepage. Click to enlarge.