One of the side effects of responsive design has meant that a lot of sites look similar and we are seeing repetition of UI Patterns. Responsive design isn’t solely to blame however. The huge rise of WordPress sites and the booming WordPress the me market has also contributed to it.
Having a similar look and layout isn’t necessarily a bad thing. That’s because we’ve changed the way we consume the web, which has resulted in a lot of common UI design patterns. Design patterns have matured and as such, there’s little in the way of innovation when it comes to UI patterns.
In other words, certain things, such as a checkout or login should function and be displayed as such. There’s no need to re-think these common user interfaces. Using common UI patterns means end users will have a smoother, easier experience.
A few UI Patterns you may be familiar with;
Long Scroll
Placing all your important content / calls to action above the fold is now a well-known myth. Most people are used to long scrolls thanks to mobile screens. This technique works really well for sites that take a user through a journey. Long scroll can mimic a multipage site by splitting a page into well-defined sections.
Account registration:
You’ll see this pattern whenever you register for a site. There will usually be a form to fill or a button which allows you to sign-up / sign-in with your social media account. Form wizards or multi step forms are a good idea as they encourage visitors to sign up, not bombarding them with one massive form in one go.
Card Layouts
Pioneered by Pinterest, card layouts are very popular. Card layouts show content in small chunks which are easy to scan through. Each card shows a specific topic. Cards are ideal for responsive design as their dimensions make them easy to rearrange for different device dimensions.
Hero Images
Hero images are a great way to grab a user’s attention. Hero images generally stay above the scroll as a full-screen high resolution image.
The Hamburger menu
This is very recognisable to users as a pop-out menu and is extremely common in responsive designs when viewed on mobile screens.
For information on how to use UI Patterns to your advantage, visit; https://ui-patterns.com/
If you think we have missed any common UI patterns, please share your links or thoughts that you think are essential for web designers and developers to know about.
