Raleigh
Menu
Gradient overlay

RECAP | Homegrown: 10 Ways to Improve Your Website’s User Experience

Written by
Amy Lyons
Published
October 11, 2013
Categories

This month, we finally got our good friend Shannon Mølhave (aka @leftydesigner) to share her knowledge with our Homegrown attendees. Shannon has been a longtime member and supporter of AIGA Raleigh and is a talented and experienced web designer. She is a senior web designer at LGFCU.

Shannon began by telling us that the success of a website is determined by its users, and an unusable site is as bad as not having a site at all. To illustrate this point, she likened how a users website experience could be measured on the universal pain scale.

User Experience (UX) can make or break your digital marketing. Bad UX can lose sales. We live in a world where people openly share everything, including bad UX.

UX planning should start at the beginning of the project. It should not be an afterthought. Ten things to consider to improve UX when planning a website project, whether a brand new site or a re-design, are:

1. Get rid of flash

Not only is it not necessary, it is a UX killer. There is no readable content inside flash, so its very bad for SEO. A flash site won’t come up in search results. Ninety-five percent of users search for local business online. That is up from 80% the previous year.

Flash content can’t be read on iOS devices, that means iPhones, iPads, iPods, etc.

Keeping people from viewing a site is one of a users biggest frustrations. It’s frustrating because users want to use a site on their own terms. They don’t want to have to download flash just to be able to view the site, nor do they want to sit through an animation before getting access to the content.

2. Identify user goals

The main focus of planning a website should be on what the users will do on the site. What are their goals? What are they trying to accomplish? The users goals will be very different from the business goals of the site. You need to keep that in mind and present what the users want upfront.

Create a list of user goals versus business goals. Some will overlap, many won’t. But there is room to address all goals, however, the users should take priority. If you are working on a re-design and have access to the site’s analytics, reviewing the pages visited most often and where visitors spend the most time can help to identify user goals.

3. Prioritize content

If everything is important then nothing is important. When there is so much going on the page, users don’t know where to start. Too many options results in choice paralysis which overwhelms the user and becomes an exit point.

Shannon compared the home pages for Xfinity and Apple to show the difference. On the Apple site, there is one point of focus and well thought-out navigation to help you find what you are looking for.

 

4. Differentiate from competitors

As with any marketing or branding effort it is smart to perform a SWOT analysis to evaluate how your client’s business compares with their competitors.

The analysis will help you discover how you can make your client sound unique, and how users will benefit by choosing your client. Play off points of interests too grab user attention. Within 4-5 seconds users need to know what the site is about.

5. Define a call to action (CTA)

Don’t assume the user knows what you want them to do on the site. Always have a call to action to prompt the user to continue. You can have more than one, but no more than three, especially on the home page. Shannon compared the IRS home page with the White House home page to compare how too many CTA’s are confusing, to what an effective CTA looks like.

Make the CTA button bigger and style it different than other elements on the page, even other CTA’s. The main CTA should grab more attention than lesser CTAs.

6. Be intuitive

To avoid frustrating users, be consistent throughout the site. Follow best practices and standard website conventions. You shouldn’t have to give users instructions on how to navigate the site. Use a horizontal navigation bar, place the logo in the header and have it link to the home page.

Make links blue and underlined. Don’t use the same link color for text that is not clickable, it sends mixed messages and causes frustration. Make it easy as possible to click the CTA.

Sites with multi-step processes should show progress through the steps, like the Amazon.com checkout. Don’t make it harder than it needs to be, and don’t leave room for user frustration which can lead to users giving up on the task.

 

“You are not your target audience.”  -Mackenzie Fogelson @mackfogelson

 

 7. No Jargon

When it comes to copywriting for the site, don’t use industry jargon. The reader won’t understand and will think the company is trying to sound smarter than it is, leading to distrust. Don’t use generic business jargon, it’s cliche and has no meaning. Besides it’s good SEO to not use jargon.

Make the content more meaningful and it will be easier to understand and more likely to make a sale. Have an outside person, who is not familiar with the client’s industry read the copy to be sure it is understandable. This should be in addition to proofreading the copy, of course.

Avoid use of generic stock photos. Images should be specific to the client’s business. The more genuine the imagery is the better. Users will relate more to a nice photo of the company CEO than an over-posed and cheesy stock photo. If the image isn’t adding value to the content it’s better to just leave it out. Remember good content equals good SEO and a better chance to be found.

8. Cut down text

Reduce the amount of text and format the copy to make it more digestible. People skim text online. Be short and to the point. Break up dense amounts of text with headers and bullet points. This makes it easier to skim and gleam the main points.

While you should decrease the amount of text, you should increase the text size. Use a minimum of 14-16 point size. For audiences that are older and may have trouble reading small text, use even larger point sizes.

 

“If you’re using anything under 14 pixel font, you’re bad and you should feel bad” -Jacob Taylor @Aranjedeath

 

9. Make link text more meaningful

This accomplishes three things:

  1. Shortens the length of buttons
  2. Is SEO friendly
  3. Gives the user more info, like knowing what will happen when they click on the link.

 

10. Consider your mobile and touchscreen users

Don’t forget about mobile devices. Ninety-one percent of Americans own a cell phone and 55% of those are smartphones.  If there is no time or budget to make a responsive site, there are things you can do to make your site more mobile-friendly:

  • Allow for “fat finger factor”: Give links breathing room, use vertical lists in your sub-navigation, to avoid accident clicking.
  • Don’t use flash
  • Don’t hide content behind hovers or roll overs, these features don’t work on mobile devices.

 

The key to good UX is to empathize with the audience.

 

So there you have it, ten ways to increase your websites user experience. After her presentation, Shannon took some questions from the audience. In response to a question about how to gently approach resistance to applying UX principles, Shannon advises to advocate for the users needs on the site and making the point that if the site is easier to use than there is a better chance on conversion.

How do you approach a project when it is a new design versus a re-design?
Shannon’s approach is generally the same in both cases: define main goals, prioritize, sketch wireframes. She uses responsive wireframes to do quick prototypes, showing how the content will rearrange. She also uses style tiles to show the visual look without bringing in the actual layout. This allows the client to judge the look of the site without getting distracted by the layout.

Responsive vs. separate mobile site when re-designing a site?
Design for mobile first, it helps prioritize content. Elements have to be stacked so you need to identify what’s most important. When designing a site, build for the simplest view, than build up.

Building responsive takes longer, but makes the site future proof. It will respond no matter what sizes may become the norm in the future.

Separate mobile sites are bad for SEO, Responsive Web Design (RWD) is better for SEO. With a separate mobile site, you have to make updates to both sites. This is time consuming, and allows for errors and inconsistency.

RWD vs. Adaptive Web Design (ADW)
RWD uses a fluid grid based on percentages. Adaptive uses fixed width points. Once a screen exceeds a certain size, a larger layout is displayed. The advantage  to AWD is that it is faster to build and uses static widths, so you know exactly how it will look at all sizes it is built for. The disadvantage is that it is not future proof, it won’t accommodate any new size standards that may exist in the future.

Fluid grids are future proof, even though it is longer and harder. You just have to let go of the concern that you won’t know how it will look at all sizes. It’s a feeling of less control, but ultimately you do know that content will be usable at all sizes.

When designing with fluid grids, you want the content to determine the break points in the fluid grid. Size up till it looks weird, add a break point, and repeat.

For more information on web design, Shannon shared some of her favorite blogs. If you are not already, you should also follow her on Twitter (@leftydesigner), she is always sharing useful information and resources. She’s even been kind enough to share her slides from her presentation. You can find them here. Thanks Shannon!

Blogs to follow:

A List Apart

Smashing Magazine

Webdesigner Depot

Boagworld

Net Magazine

Brad Frost Web Blog

CSS-Tricks

Impressive Webs

 

 

 

 

News image
August 3, 2017
News image
Four fearless leaders from Raleigh—Co-Presidents Hannah Hoffman & Joseph Schlosser, Vice President Lenny Terenzi and Director of Designability Lydia Kuekes,—attended the 2017 AIGA Leadership Retreat in Dallas last month.
July 12, 2017
News image
Our June community meeting was all about celebration. Members of our community led the meeting with Pecha Kucha lightning talks–20 slides, for 20 seconds each, focused on their passion projects. If you missed out on the fun, read our recap below.
June 15, 2017
Comments
AIGA encourages thoughtful, responsible discourse. Please add comments judiciously, and refrain from maligning any individual, institution or body of work. Read our policy on commenting.
  • Megan Kearney

    This luncheon was very informative and helpful! Shannon is a great presenter and made the entire presentation engaging. Over all, I was very impressed with everything!

    • Shannon Mølhave

      Thank you so much Megan, I hope it was helpful! 🙂

  • Guest

    Thank you so much @Megan, I hope it was helpful! 🙂

LOADING...