5 Tips to Maximize Usability

Usability is undoubtedly one of today’s top buzzwords. And for good reason. Nielsen Norman Group (NNG), one of the premier authorities of usability (headed up by the “usability guru” Jakob Nielsen), defines usability as:

[a] quality attribute that assesses how easy user interfaces are to use.

As stated by NNG, there are 5 components to create high levels of usability:

  • Learnability: How easy it is for first-time users to navigate?
  • Efficiency: How quickly users can perform tasks?
  • Memorability: How easy is it for users to become familiar with the design on a later visit?
  • Errors: What are the errors, how bad were they, and can the users recover?
  • Satisfaction: Is the website engaging and pleasant to use?

There are many more components, but that’s a working knowledge of usability. The link above goes to a great article by NNG on the subject. (Including the 5Ws and an H.) When working with a website, whether the designer or the project manager, it’s crucial to remember that the user comes first. What could be a great design aesthetic could potentially harm the usability of the website, which may just lead to you ending up on this site. (Always a fun but exasperating read.)

Here are 5 tips to maximize usability. Some are easy to accomplish, while others can take some work. Design, like many things in life, is a work in progress. Every designer changes, gains better skills, and thinks their earlier work is horrible (been there!). As long as you maintain small changes over time, you’ll be in good shape!

1. Don’t change a great idea for the sake of creativity.

Follow the old cliche adage, “if it ain’t broke, don’t fix it”. Another NNG article instructs readers to “build on existing mental models”. Essentially, users build their knowledge on past experience. If you forego any principles of design, you’ll lose visitors because your site is clunky and hard to use.

For example, navigation bars. Nearly every website has their main navigation bar across the top of their screen. There’s a reason for this. When you go to a website for the first time, and you want to look to read about the company, where do you look? I would hope you’d say somewhere in the navigation bar, although some also place it in the footer. (If you didn’t, lets chat. I want to know what you do and I seemingly don’t. 😉 )

NNG's header and navigation areas - pretty standard, right? Standard is the goal for this particular area of a web page.

NNG’s header and navigation areas – pretty standard, right? Standard is the goal for this particular area of a web page.

Cedarville's navigation bar, plus an additional, less noticeable, one for students, faculty, and other groups. The website is targeted to visitors, not students, so the primary navigation bar is dedicated to giving information about the school.

Cedarville’s navigation bar, plus an additional, less noticeable, one for students, faculty, and other groups. The website is targeted to visitors, not students, so the primary navigation bar is dedicated to giving information about the school.

And, lastly, Twitter's. Like Facebook, there are sidebar menus, but the most important links are in the navigation bar at the top.

And, lastly, Twitter’s. Like Facebook, there are sidebar menus, but the most important links are in the navigation bar at the top.

2. Go the way of the buffalo minimalist.

Granted, this is written by a minimalist, so you may beg to differ. However, another part of the same NNG article as above vetoed the idea of clutter. It’s perfectly fine to have typography, images, and more to make the website visually appealing and interesting, but make sure it doesn’t become too cluttered.

Always keep the user in mind. Is it easy to find the necessary information? Is finding the search bar a quick process? Answering these questions can help you maintain a visually appealing yet usable website.

3. Test, then re-test.

Try to periodically look at your website with fresh eyes. Invite coworkers or friends/family to engage with the website and see what, if any, design flaws they encounter. Are they having trouble finding the search bar, or are they unable to work the image gallery? By recognizing the problems a site may have, you can begin the process of fixing it.

4. What the f…shaped pattern?

The F-shaped pattern is a term from eye-tracking studies. When a person looks at a website, their eyes move in an F-shaped pattern. They take in the header/navigation bar, the feature area of the page, and the left side of the feature content, and continues to look less and less at the right side of the page. Some websites may not have as a defined shape as others, but this is a good guideline to remember as you’re working to design or modify a website.

5. Less time, money, and work may not be worth it.

Sometimes, less time and less work won’t pay off. Sure, you’re probably paying less, but putting the effort into making a mobile-friendly site can pay off. It all depends on your targeted audience, which is another topic for another day, but if you can swing it, work to incorporate a separate mobile HTML that appears through device detection. (More on this here.)

Usability changes on a mobile device, especially with the swiping motion that accompanies it. This doesn’t have to be an overnight change. Some businesses can’t make it work financially or otherwise, but it’s something to work towards.

 

Do you have other ways to maximize usability? I want to hear! I’m always looking for new tips and tricks. 🙂 – Hannah

The Redesign Begins

Dundundun dun………

When looking at options for my website redesign project, I wanted something that would challenge me, but also wouldn’t be nearly impossible to fix. 1927 Events’ website is that mix of a good challenge while remaining realistic.

The premise of this project was to essentially take a website with a bad design and fix it. Easy right?

Not so much.

Even though the website is, let’s just say, not a designer’s dream, there are still elements that should be kept in order to maintain the branding and image the company has worked to create.

What to Keep

Logo – A company’s logo is crucial to their image and company branding. Their’s is a relatively simple logo, but it is still the face of their company and is prominent in the site’s design.

1927events-logo

Photography – I love the photography they feature on their site. I definitely want to keep the photography, but simply utilize it in a different way.

1927events-gallery

Fonts – The overall idea of the fonts used should be kept, but the size in some parts should change. For example, the Contact page’s font size could increase slightly. It’s readable, but that’s with my uber strong contacts in and slowing down my reading pace.

Impromptu eye exam, anyone?

Impromptu eye exam, anyone?

Social Media – There are Facebook and Twitter buttons at the footer. 1927 Events has a decent presence on Yelp, which could be another button to add, as well as making these more prominent.

1927events-footer

What to Change

This website is essentially one page. Changing this will help ease confusion amongst visitors and help it adhere to standard website design. There are a few elements that should be kept but made into their own pages:

Contact (with map)

1927events-contact

1927events-map

Options (with floor plan)

1927events-floorplan

Elements to Change

As mentioned above, the largest change that needs to be made is the division of content into pages. By making it more than one page users won’t have to continually scroll down, they will be able to navigate directly to the pages they want to see.

The “navigation bar” (although that’s saying a lot) on the right hand side is not very user-friendly. By placing the navigation bar at the top featuring the new pages, the ease of use will increase. This is an example of “if it ain’t broke don’t fix it” design. Some elements, like the navigation bar, should be left in the standard place to minimize user’s irritation with your design and jump rate.

1927events-navbar

Now that I’ve talked about how I’m planning on changing this website for the better, here are my wireframes for the new home page design. Though there are definitely elements that should be kept, the overall design should change. They “broke the rules” regarding design, but it didn’t help them. I’ll work to keep the overall feel the same but to make it more user-friendly.

Idea #1:

1927events_wf03

 

Idea #2:

1927events_wf02

 

Idea #3:

1927events_wf01

 

(“Contact” will be spelled correctly in the final design. Promise.)

Stay tuned for updates!