UX/UI design has a lot to do with psychology. For example, professional designers actively use different patterns that allow displaying information in a way that is convenient for a user to access.

In this post, you will learn about popular patterns for websites and how they can be applied in practice. You will also familiarize yourself with templates for main pages, landing pages, and mobile applications.

Patterns for main pages and landing pages

Now we are going to talk about some ideas that can help improve your user experience. Do not take them as rules. They are more like recommendations that may work. You can find out the effectiveness of a particular pattern using A/B testing.

1. One column. When placing textual information or other content on a page, try not to split it into several columns with information. Instead, center everything in one column. This can be especially useful when creating landing pages. The advantages are obvious. The user does not have to scatter attention, “jumping” between several columns.
2. Do not split one UI element into several pieces. Take, for example, the “Contact Us” or “Contacts” block. Sometimes designers split it into additional ones – “call us now”, “contact the manager”, “our mail”, and “our mobile phone”. Professional interactive design agencies know that it scares users off and causes a feeling of pressure. You should not do this.
3. Duplicate the CTA buttons. By placing a call to action, you can try to do it not only at the beginning of the block with content but also at the end. So the interested user will not have to return, and he will be able to save time.
4. The mechanism of recommendations. Personalized recommendations for the user can help him make a choice. If you create a separate block “We recommend product 1” and justify the advice, it will increase the chances that the user will choose the option you need.
5. Do not ask for confirmation. If a visitor clicked on a button, offer him to cancel the action instead of asking for confirmation. The latest UX pattern often annoys visitors, causing them to feel like they are being held by people with low intelligence.
6. Use contrast. Creating a call to action, design it in the form of a button, not text. This will immediately attract the user’s attention.

Mobile App Patterns

In mobile applications, several other patterns are used due to the limited screen space. For example, hamburger menus are used less often on websites purely because they are too small, and the visitor may not notice them on the big screen.

UI/UX patterns for mobile devices:

1. Graphic tips and pointers. Their goal is to explain to the user how a particularly useful function works. As graphic elements, you can use graphic sections and pointers, a slide show that will be played through the UI, and other elements. Using this pattern will also help speed up the user registration process.
2. Navigation is inextricably linked to content. When creating navigation, try to make a smooth transition between states. As an example of the implementation of this pattern, you can cite Tinder – by finding the user profile, in the application, you can switch between 2 modes: browsing, when only a large picture and the main information are shown, and a more detailed view, which indicates additional information and shows a reduced version of the picture.
3. Sliders. Using this UI element allows you to quickly switch between different types of services. You can create a slider that you can scroll with your finger. Thus, you do not have to create additional screens to transmit the necessary information, and the use of the interface will be greatly simplified.
4. Side menus. The main task of the designer of a mobile application is to place the maximum amount of information on a limited screen without confusing the user. Side navigation menus are well suited for this. You can place the main buttons in it, the search field, additional content, for example, a button to switch to camera mode.

Final thoughts

Layout patterns are important for creating a positive user experience. The use of patterns for web pages and mobile applications will vary. In web design, there is more negative space while mobile UI/UX design will not have space for it. If you are aware of pattern differences, you will be able to create better interfaces for both platforms. When creating patterns, think about the comfort and convenience of the user.