Part I: How to Improve Your Website’s User Interface?

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?

1. Know who you are first so you can know your target audience
2. Learn from others to determine the patterns of interaction without reinventing the wheel
3. Be consistent in your user interface so your audience can browse your website efficiently
4. Guide your users to the most important part of your website through easy navigation
5. Communicate with your audience to get feedback
6. Be flexible enough to help your users when they make mistakes
7. Let your audience know that you are listening by finding solutions to their common mistakes
8. Use terms that your users will understand- No confusing jargon
9. Simplify your business ideas and the user interface of your website
10. 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:

• Quicktabs
• Field jQuery Tabs

WordPress:

• WP UI – Tabs, Accordions, Sliders
• Squelch Tabs, Accordions Shortcodes

jQuery:

• jQuery UI Tabs
• Easy Tabs
• 11 Useful jQuery Tab Navigation Solutions

Improvements:

• Tabs to Accordion for Responsive Design

Examples:

• Goldlilys Media Portfolio – Categorize projects depending on the company.

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:

• Views Accordion
• Accordions
• Accordion Blocks
• Views Universal Accordion

WordPress:

• Nextend Accordion Menu
• Squelch Tabs, Accordions Shortcodes
• WP UI – Tabs, Accordions, Sliders

jQuery:

• jQuery Accordion
• 30 jQuery Accordion Menus, Tutorials And Best Examples

Improvements:

• Tympanus Codrops Accordion
• Zozoui Accordion

Examples:

• Goldlilys Media Services – Lessen the amount of information given to the user.

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.