Web Design Principles: The User Interface
Where do users click?
During the economic downturn, I’ve found that many small businesses are looking at it as an opportunity to review and update their web presence. We’ve had a high-level overview of the web design process earlier, but I wanted to delve a little deeper into the user interface itself. I was very excited that my business partner and friend over at Bluetux, Sam Howat, agreed to write about his experiences in user interface design for this week’s blog. His company offers excellent quality custom web development and design to their customers, and he is excellent in building user interfaces that convey ideas effectively enough to help users go where they need to be on a site. Enjoy!
—-
The user interface (UI) is the visual structure and interactive elements or “aggregate of means” that make up your website. The UI of your website is the immediate digital portal of your company and its products or services to the customer.
One of the most difficult parts of building a website for your business is taking your “vision” of the website and translating it into a working version. Sketches, compiled notes, data, marketing and branding quickly become overwhelming and can cause you to lose your focus.
Having a basic understanding for the process, procedures and some technical aspects of the development of a website will help you better convey your vision for the website to your design team and allow you to focus your attention to the important, high level aspects of the project.
What You Should Understand — The Basics!
Regardless of the type of project there are several concepts and rules that are invaluable to the success of every web design project.
Use Eye Tracking Studies – Eye-tracking studies provide useful information regarding eye movement of people viewing web sites. There are numerous tools (Crazy Egg, Google Analytics) that give you an grid template to overlay on your web site that can help you to decide where to put the most important information, so that it will be seen more readily by your visitors. Jakob Nielsen, a well known web-usability guru has published much regarding this process including, F-Shaped Pattern For Reading Web Content.
Putting It Into Practice: Based on a basic understanding of the “F Shaped Pattern” data, you should be able to prioritize the navigation, highlights and branding of your site to make sure they are in the best possible location for your customers.
Know Your C.R.A.P. – One of the basic design philosophies commonly taught to designers includes this ruleset. The concept was pioneered by Robin Williams in his book The Non-Designer’s Design Book: Design and Typographic Principles for the Visual Novice. C.R.A.P. stands for Contrast, Repetition, Alignment & Proximity; four basic rules that stand as the foundation of good web design and interface development.
- Contrast – You can use images or words to create contrast which is useful for breaking rhythm or flow of a design. This “disharmony” catches the human eye and causes them to focus on an element. A good designer can use contrasting colors, shapes, or images to highlight different parts of your design to make it “pop”. Often youʼll spot this rule being used to highlight quotes in text.
- Repetition – We use repetition to unify the design and bring a sense of symmetry to its organization. The human eye is attracted to lines, and patterns. It also can be used to draw a visitorʼs eye to a particular part of a page. For example, you might use arrows or repeating lines to tempt the userʼs eye to flow to a particular feature in your design.
- Alignment – If you need to connect different elements in a design, you use the rule of alignment to link the elements together. People are attracted to asymmetrical lines and alignment, we unconsciously group and align objects when scanning them. This helps us create cohesive, scannable document.
- Proximity – Using spacing to spread elements out allowing the user to easily scan and digest information is a very important part of the design process. Proper use of white space, padding and even negative margins allow the end user to quickly scan over your page, without feeling overloaded with information. It also allows the designer to link different bits of information together without other having to deploy additional graphical elements to create the illusion of connection.
Know Your Customer – One of the basic parts of building a website is to analyze your web-site’s traffic. If you use a powerful tracking tool like Google Analytics you are able to collect data like: resolution, location, browser, operating system, & visit duration. These details may not seem like much, but in truth they are important tells that give you valuable insight into your customers habits and will help you plan your new website out properly so that it targets your customers needs as closely as possible.
Arguably this data might not be readily available for new web sites using an online tool like Google Analytics. Some understanding of your existing customer base and web audience will help, however. If you are re-designing your website or doing a focused realignment, finding and having this information from an online analytical tool will be invaluable to creating a well designed experience.
Putting it into practice: Have your web designer study the statistics logs whenever possible to make sure that he is taking resolution, operating system and browser type data into account when heʼs developing the site.
Putting It All Together
You may not be a web design expert after reading this article, but you’re now armed with the basics that you need in order to develop an intelligent design that speaks more to your visitors and tacitly communicates how to effectively use your site to get the information they need.
By having a clear understanding of these principles of design, you should be able to better communicate with your design team which will in turn result in a much better website for you and your customers.
About the Author
Sam Howat is the creative director and managing partner of BLUETUX a design and development firm located near Seattle. Heʼs active on Twitter and often blogs on his own site.
Loading ...If you enjoyed this post, please consider leaving a comment or subscribing to the feed and get future articles delivered to your feed reader.
Thanks for the chance to write something for your blog Mariano. You’re becoming a great resource for small business owners!