There is no doubt we all want our websites to be attractive – captivating users and providing visual interest. However, it is important that the visual interest created on a site work with and enhance the usability of the site, rather than detract from it. Often we think of the aesthetics of a site as separate from the usability elements, but they have to work together to create a site that both captures and enhances your brand, attracts and interests users and allows them to easily complete the task at hand on the site. In order to identify the best practices for developing a look and feel that enhances the user experience, we will take a look at the guidelines which make up aesthetic integrity:

1. Uses a clear visual hierarchy with graphic elements and visual cues to help users
   • This guideline should influence all aspects of the design of your site, beginning with the home page. Icons, images, color and text (font, size, etc.) should all come together, not only to present a visually appealing home page, but one that is easily scanned and understood. Users should be able to comprehend who you are as a company and what is most important to you from how you use the visual elements on the home page to introduce yourself and your value proposition.
   • These elements should also be used throughout the site for the same purposes – highlighting key content, making pages easy to scan and understand and demonstrating to users the key navigational features and their position within the site.
2. Site is scalable for multiple resolutions
   • It is vital to understand how a user is going to view your site – will they be able to see and experience all of the work you put into creating a visually interesting design based on the first guideline? Or will they have to scroll both up and down and sideways to view the whole page?
     • In order to address this most effectively, you need to understand the screen resolutions of those coming to your site. Many of us who are online all day looking at a wide screen monitor built in the past few years sometimes forget that there are people who still have their screen resolution set to 600×800 or 1024×768. This may or may not be a factor for you and your target audience, but it could be which is why you need to understand how your targets are accessing your site.
     • Based on what you know about your target base you can decide which screen resolutions you need to accommodate, but blindly assuming you only need to design for higher resolutions without knowing who is coming to your site can be a costly mistake.
   • Understanding these traffic patterns is even more important with the increase in mobile and tablet traffic. Understanding what portion of your traffic is currently coming from these devices as well as what the growth pattern for your target might be over the next few years can inform your strategy for mobile site / app development and the need for site compatibility with devices like the iPad or Kindle Fire.
   • 
3. Photos are relevant to the value proposition and content and are accompanied by text that is readable and relevant
   • Incorporating images into your site is important, but doing it correctly can be difficult. Images should draw a user in and help set the tone of the site, but they should not impede a user’s ability to access information or complete a task. Often in testing, we see that by not selecting the right image or placing it poorly within the page design, photographs and images can sidetrack a user or have unintended consequences. So a few things to consider when selecting and adding images to your site design:
     • The image should be clear and easy to understand. You do not want users staring at an image trying to interpret what is going on in the image or what it has to do with your company or its value proposition. These should be immediately clear. Where necessary, images should be labeled or include explanatory text in an easy to see and read font.
     • Images, especially photographs, when they include people should be diverse in terms of age, gender, race, etc. and show a wide cross-section of your target. We have seen far too often users react to a home page image, saying “Oh, this site doesn’t look like it’s meant for me. All I see are older women.”
     • Images should not overwhelm a page. The sizing and placement of images is key to either inviting users to explore a page or creating a roadblock to access. Images should not push key content below the fold of the page, making it unclear if there is information below the image that is worth scrolling for. Indeed, images can be used to help users know there is more on the page, but showing some, but not all of the image above the fold, you can invite users to scroll to see more.
     • Images can also be used to break up and provide interest to text heavy pages. Users tend to scan rather than read most web pages. Images can help guide them to content of interest and provide visual breaks that allow the eye to more readily move through a page.
   • Again, it is also important to make the images relevant and not just a visual element on the page – make them have meaning to a consumer. Following are 2 examples one site that does not do this and another that uses images in an innovative way:
   • 
   • 
4. Limits animation; if offered, allow the option to control it
   • I’m sure most of us can remember a time when Flash splash pages were all the rage on the web. While designers got to show off on these pages, for the most part, they were a usability mistake. Users were forced to watch an animation that might not be of interest to them, some with sound (and no sound controls) and then had to click just to begin the exploration of a site they had already requested. It’s easy to see why this is not the web standard today. Still, while animation can be an effective tool to help a site come to life, demonstrate a complicated concept or simply put more information in front of a user, too often it remains a misused tool with the most common issue being lack of user control of the element. So how do you implement animated elements correctly on your site?
     • Use animation with a purpose, not for the sake of doing something cool.
     • Allow the user to control the animation, with stopping or pausing capabilities and sound controls, including a very clear and easy to access “Mute” option
     • If you are providing different content, say in a Flash animation on your home page, provide users a way to navigate back to a story or element of interest to them without them having to either wait for it to come around again or to guess which of the 4 stories it is.
     • Make it clear how long an animation or video element will run. This will allow users to decide how they want to interact with it.
     • 
5. Content and promotions are not mistaken for ads; are relevant and compelling
   • When testing websites, we often see site designers place attractive images highlighting important content or promotions on the right side of a page. Then, when users do not find the content, many site owners are surprised as it is often exactly what they are looking for and it is presented in an attractive and visually appealing manner. So what went wrong? Users often mistake images on the right of a web page for advertising or promotional content and have trained themselves not to pay much attention to any item in that area that appears to be an ad. So what can you do to overcome this bias?
     • First, if your site does include advertising, clearly label it as such. Make sure users know when they are seeing ads.
     • Secondly, make the content look like content, not like a tile ad. Do not have the promotion or content take the same shape as the advertising you see elsewhere.
     • Next, ensure that the content or promotion is visually integrated into the page using colors, fonts, and imagery that is consistent with the look and feel of your page so it appears to be a continuation rather than a standalone component, separate from the site itself.
     • Finally, do not place unimportant content in the same area as key promotions or content. You do not want to clutter areas users may naturally overlook or train them that this area of your site will not contain content of interest to them and have them overlook important features.

Thanks for reading our guidelines on Aesthetic Integrity. For more information on improving your site, please see our previous stories on best practices according to usability guidelines: Communications and Relevance, User Control, Simplicity and Scannability and Navigation and Feedback. Also, stay tuned to our blog for more information on web best practices.