If Everything is Important, then Nothing is Important
The T&P Team reviews the USCIS site.
Here at Theory and Principle, we’ve decided to use law-related applications and sites to highlight some common UX/UI principles. Our goal isn’t to criticize designers — you never know what constraints a designer is dealing with. Rather, we want to look at a range of products, from the very bad to the very good, and use them as instructive lessons on design. We’ll even choose some sites to completely reimagine.
So, let’s get started. Our first nominated site comes from our friend Chase Hertel at the ABA Center for Innovation, and it is [drum rollllllll]…. www.uscis.gov. That’s right, we’re starting small. There’s a lot here, so we’re just going to focus on the low-hanging fruit for now.
A few things strike us immediately: 1) Buttons, 2) Colors, and 3) Hierarchy/Consistency. We’ll tackle each one.
Buttons
My, there are so many things that are clickable here…
Buttons are important because they facilitate the actions and activities that the user cares about, and therefore we should care about them. Size is one of the more important button styling considerations because it gives the users cues about what’s most important. Other important considerations are color and shape. Here, I think the intent was to make the “File online” Button the primary call to action, but it’s not clear since the buttons with the strange white border are more prominent with all caps writing. It makes the eye do work to figure out what the main action here is, when color could be used to draw your eye to that main CTA.
There are just SO MANY THINGS that can be clicked in a very small area of the landing page that it becomes very overwhelming. Really, the buttons with the white border around them shouldn’t be buttons — the page they lead to offers no new information and that component just creates confusion. More consistency across button components would go a long way here to create a more predictable experience for users.
Colors
Blues on blues on blues on blues. You may have noticed that the color palette consists of shades of blue. And while the blue in use is an okay and sufficiently accessible color, there are hardly any accent or complementary colors to give the user a break from the sea of links. Accent colors can be used to highlight important information as well as make primary calls to action stand out. Without any additional colors the USCIS website looks flat. If everything is important (as seems to be the case with this site) then nothing is important.
The USCIS site leverages a wide number of blues. The following colors are used here:
The palette in and of itself isn’t necessarily the problem — it’s in the use of them. If we consider midnight blue and teal to be the primary and secondary colors, respectively, you can still successfully use light and dark versions of those colors, along with strategic use of the shades, to draw the eye to core functions.
There is some very modest use on the USCIS site of a maroon/brown color. This can be used more effectively as a secondary accent color as well:
Hierarchy and Consistency
Hierarchy and consistency are generally big issues across this site. This ranges from language consistency issues to header types. We’ll cover a few here.
It’s important for the application to speak the language of the target user base. The website starts to do this with one block that is titled “I want to…”. However, the other blocks use simply the category name such as “green card” or “citizenship” which makes it confusing for the user who is choosing an option.
Content and navigation should be organized not only by content type but also by audience type. With this site, we assume the primary user would be people either wanting to become citizens or permanent residents. There are four blocks of content on the homepage:
Why is Data and Correspondence displayed next these other three options? The 2nd, 3rd and 4th blocks are all related to actions for helping people immigrate or become citizens. Data and Correspondence (despite having the primary setting as the first item on the left, where users tend to scan first) is less actionable content and feels like it’s directed at different audience.
Headers
Headers are important because of the way users interact with a web page. Research has found that people scan rather that carefully read websites — especially when visiting a web page for the first time.
Headers should stand out from paragraph text and should encompass a range of sizes depending on whether it’s a page header or section header. Though different sizes should be used, they should have some form of consistency so that the user scanning can easily discover what a section is about.
Let’s look at the USCIS headers:
Again, this range of headers highlight the need for hierarchy and consistency. The hodgepodge of header options used here creates further disorientation for the user, and is quite easily solvable.
Modern design principles dictate that we make sure that everything presented on the website is useful and necessary. Users can get lost in the clutter and not see important information when too much stuff is displayed. While the USCIS website has A LOT of information to present to the user, a simplified design would help direct people to the necessary information. A clearer hierarchy could go a long way towards meeting that goal.
Many thanks to T&P designer Rose Devlin for her contributions to this piece!
Got ideas for other sites you want us to review or reimagine? Send them over to us! info@theoryandprinciple.com
