“A picture is worth a thousand words. An interface is worth a thousand pictures.” - Ben Shneiderman
The main goal of a business website is to attract new customers and to keep them involved in your business. In this busy and complex world, the last thing anyone wants is to have to figure out how to use your complicated website.
According to 10 User Interface Design Fundamentals, the happier a user interacts with your website, the more they will come back again and again. How?
- Know who you are first so you can know your target audience
- Learn from others to determine the patterns of interaction without reinventing the wheel
- Be consistent in your user interface so your audience can browse your website efficiently
- Guide your users to the most important part of your website through easy navigation
- Communicate with your audience to get feedback
- Be flexible enough to help your users when they make mistakes
- Let your audience know that you are listening by finding solutions to their common mistakes
- Use terms that your users will understand- No confusing jargon
- Simplify your business ideas and the user interface of your website
- Constantly improve and keep up with the latest web trends
Following these 10 Principles, I present to you a lists of user interfaces, how and when they apply for both Drupal and WordPress sites. These are separated into a series of posts with 2 - 4 different interfaces each time. Additionally, original jQuery scripts are given to know where these modules/plugins came from. Like most technologies, every user interface idea is constantly improving and that is under the Improvements section.
Tabs
Useful for:
Separate different types of data into categories where each category is the header. Can simplify the amount of information presented to the user to not overwhelm them. This lessens the clutter in navigating through the different sections of your site.
Drupal:
WordPress:
jQuery:
Improvements:
Examples:
- Goldlilys Media Portfolio - Categorize projects depending on the company.
- Women's Museum of California About Us - Differentiate sections of the site.
Accordions
Useful for:
Similar to the Tabs UI, accordions can separate and organize sections of a website, but instead of using horizontal headers, accordions use vertical extensions depending on the amount of information presented. Each category of an accordion stretches to the entire width of its content area that expands and contracts depending on which header is clicked or hovered on.
Drupal:
WordPress:
jQuery:
Improvements:
Examples:
- Goldlilys Media Services - Lessen the amount of information given to the user.
- UC San Diego VisArts Menu System For Mobile - Simplification of a complex menu hierarchy.
User interface is best when it has both design and functionality. Without design, the feature may not go well with the overall theme of your website. Without the functionality, you'll have a pretty design with no depth of information to notify new customers of what you do. You want the balance for both to have a Uniquely Creative and Simply Efficient website for your business.
What do you think about these user interfaces? Do you think these will help improve how your customers view your website? There are many ways to simplify the way people browse online. Many more user interfaces are coming in the next posts.
