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.
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.
9. Make link text more meaningful
This accomplishes three things:
- Shortens the length of buttons
- Is SEO friendly
- 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.
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: