10 UI design patterns you need to know

In software Object Oriented Design (OOD), developers are encouraged to use and reuse software design patterns as solutions to recurring problems.  This ensures you keep your software reusable, maintainable and groomed.  But how does that really work when it comes to UI. Well, when it comes to UI, you may accept that.  However, always keep in mind that a user will be interacting with your software, so here are 10 UI design patterns you should use every time you can.

In this first post I’ll give a brief introduction of each and then in future posts I’ll describe them more deeply.

1. Lazy Registration

Make users register only if it’s really necessary and late in the process of introducing them to the system.

2. Progressive Disclosure

This pattern is used to show only the information relevant to the user’s current activity and to delay other information until it is requested

3. Forgiving Format

Let users use any criteria and format they want when it comes to search and make your application intelligent enough to deal with this fact.

4. Clear Primary Actions

Highlight primary actions on your web forms so the user knows exactly what will the final action will be.

5. Breadcrumbs

Breadcrumbs show the path from the front page of the site to the current location of the users in the website’s page hierarchy

6. Account Registration (that solves three related problems)

  • Certain content is accessible only to registered users,
  • Users need to re-enter their personal data often,
  • Users need to be able to access personalized content on a system.

7. Required Field Marker

Making the user interface obvious is essential. This applies just as much to Web forms. One of the best ways to make the interface of Web forms obvious is by marking required fields.

8. Steps Left

This pattern is widely implemented when users have to fill in data in multiple steps.

9. Subscription plans

This pattern is suitable if the website offers one product or service that comes in different plans and requires regular payments, usually monthly payments.

10. Hover Controls

When a user interface has many elements in which the user can perform actions, the page can become cluttered and hard to scan. A good way to handle this is to hide each element and reveal it when the user hovers over that area.

As you can see, many of these patterns may be already being used by you but you may not know they exist as patterns.

In the upcoming entries, I’ll go deep in these to explain further and give reasons why you should use them in your software development  every time you can.

Source:  Based on 10 UI Design Patterns You Should Be Paying Attention To

By Janko Jovanovic from Smashing Magazine

One comment

  1. Thanks Miguel for this brilliant article. I learned new things when it comes to designing a user-friendly interface in my project that I have right now.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Current day month ye@r *