Web-enabling the world of business

It has been brought up recently in our staff meetings that many of our clients aren’t aware of, or haven’t been informed that CGIpro isn’t just about writing code, that we actually can offer a broad range of design, usability or SEO solutions. My hope with this post is to provide you, as perspective and current clients a better understanding of what we can do to help you make better decisions in regards to your long-term goals in working with CGIpro.

As the primary graphics person here at CGIpro, it’s my job to provide not only the design support for new and existing projects (print, marketing, web and motion), but work closely with the programmers in developing the architecture and specification(s) of applications, the HTML/Template generation (from provided designs) and provide feedback when examining site usability and standards adherence (which is discussed in greater detail in this post).

To give you a short history of our SOP, we’ve adopted a standard procedure for design work in that we provide three or more designs based on initial discussions that we have with the client, myself and other employees. We try to define specifics like what works/doesn’t with past iterations, your competitors, color schemes, page weight(s), dynamic part interaction, etc., just to name a few. The next step is to discuss the designs internally before being sent to the client where we try to cover all the issues and items brought up in the initial meeting(s) and make edits to those designs so they represent our company holistically. We then share the designs with the client and being a dialog about each comp covering the likes and dislikes and where changes, edits and improvements could and should occur. A quick turn-around for this process can happen when decisions are made with emphasis put into the aesthetics and the usability equally and not just personal opinion. We take the usability and functionality just as seriously as we do the form, function and design aesthetic of each project we work on. Whether it’s a design we created, or one provided by the client, a successful and positive end-user experience is what governs the success or failure of a site, application or design.

The following list address common usability issues when design aesthetic takes priority over usability. When this occurs, end-users can become dissatisfied with their experience and either leave and not return or not trust the information being presented.

#1. Flash on home pages. The large flash display of images and text to drive traffic to specific areas is not the best approach to presenting content. Effective information displays can be done with a combination of AJAX/DHTML/PHP with better SEO results than flash while presenting the same information as done in flash. Yes the DHTML methods are slightly less “flashy” in motion, but that has little impact on SEO or usability which is more important to the success of a site. I’m less impressed with than how an image transitions in a flash movie (blinking, wiping, trotting into the visible frame, etc.) than treating text in a visually appealing method. This approach in turn will add more value to the users click. If they (users) are given more information up front, they can make a better value judgment on where and how to spend their time on a site.

#2. Differentiation in text links color and presentation. It’s a well documented fact for any site to have successful usability, that consistency and standardization are key. Specifically in page to page navigation (top, side or bottom), content to content and dynamic style navigation. This applies equally for every level and type of user. I have found that on some large-scale commercial websites, home pages alone can have five or more ways of displaying text links. This is too many variations on the same concept for users to get a clear understanding on what and or where to click on for text links. Yes some of it’s obvious to users, but when you change the color, underline in one spot but not another as well as size and bold/unbold, it’s confusing to just about everyone and creates unnecessary page clutter. Since link colors can be any color or shade of the same color (depending on location and purpose), we recommend that for first tier navigation (navgiation bar) and all secondary navigation text colors be the same color or only vary once. These types of navigation include but are not limited too: sub page breadcrumbs, top right login/bookmark/faq, footer links/text, right/left column sidebars. We also recommend that all either be underlined or not initially or when variations exist with each navigation type or consistency is lost.

Links within content areas should be consistent as well in following the same ideas with navigation. Color of text links (which used to be standardized as blue, red, dark purple) can and often does vary on sites depending on their color palette, but variation doesn’t grant designers carte-blanche when it comes to usability.

#3 Header consistency. There is something to be said about page weight and information hierarchy on home pages and sub pages. The size, color and location of the page headings are not only important to leading the user to information gracefully, but giving them as users a sense of flow and ease of use on a site (helping them attain their goal, whatever it is). If page headings are not consistent across a site (page to page), then confusion arises and visual clutter happens. Designers and coders should consider making a consistent size or size variation (larger to smaller) and be consistent about supportive visual elements (horizontal rules, curved lines/borders, background colors/gradients, etc.).
#4 Form Buttons. It’s become common practice for form buttons to be stylized as graphics (search or login boxes, save buttons, etc.) and not just defaulted to how the browser displays it. By using CSS formating with background images or types=”image”, designers have gone hog-wild in their designing of this key part to interactivity. Consistency across a site in the presentation of form buttons is important for not only allowing the site user to know what they are clicking on, but helps them in picking up visual cues to site architecture quickly and easily. Picking clean colors (not pink or lime green), reversing text (light color on top of dark) and shading with border colors, buttons can be clean and element.

#5 Site architecture. This is a difficult topic to pinpoint from a visual standpoint, but it’s important to take the “50,000 foot” approach at least once when designing, coding and examining the usability of a site. If you don’t have the goals of your site usability available in written format (in your boss or clients head is not a good place for them if you’re doing coding, testing and design), then this discussion will go nowhere fast. You truly must have things such as your page definitions, site architecture (flow charts) and use cases defined somewhat (even if briefly) to get a clear picture of what and why you are building or designing a site.

If you are trying to sell a product or service, your overall goal is to drive traffic to the “sales” portion of your site. This can be done through promotional or categorically listing all products (or a brief list thereof). If you’re providing information or data as a service, then searching, browsing and ease of acquisition are goals through easily defined areas to help the user drill down to their objectives. Granted there are countless iterations of each of these which encompass every type of site on the Internet, but you as clients, designers and coders should be able to figure out without much difficulty, where your project or site lands in this range. The point being, the quality and quantity of information presented up front to users (home, splash or flash pages) is the most important part to gaining the trust of end-users. If you have too much visual clutter (first time users will spend on average 15 seconds on a site before clicking off or back button or search for something else) then you will loose the user. If you have a good balance of visual cues, “design prettiness” and valuable content, users will spend time on your site and your goals will be reached.

If you have suggestions, ideas or thoughts to share with CGIpro, please post a comment or email us. If you want to use the information above in any way, please site the source or link to it.