Mobile App Design Patterns to Help You Design Better Apps

The definition of mobile design patterns is simple; It is the solution in the interface of the problems that users often encounter or may encounter while designing mobile apps. This is where human interaction with the computer comes into play. User interaction with the mobile app is only possible with a good mobile UI design. Therefore, if you are not an expert, it is recommended that you continue your project with mobile app design services that specialize in mobile applications.

It is possible to categorize patterns according to their functions and actions in various apps. If we list pattern libraries and explain them;

Action patterns

Edit

It allows the user to modify the existing content and edit it against any errors. Since this interaction will take place in almost every app, it is possible to come across an edited mobile design pattern that performs the same function in many apps in different user interface designs.

Delete

It is the pattern that ensures that the user’s content in the app is no longer visible or included in the app. The delete pattern in the application sometimes deletes the content only for the user who shows the action, sometimes it deletes it completely from the app. This varies depending on the user interfaces on apps. But in any case, the delete pattern is used for this purpose.

Upload & Download

It is a component that will enable the user to take action in the mobile app. For example, the download pattern is used to download a PDF in a mobile app, which could be an invoice. Likewise, the uploaded pattern is required when there is a file that the user needs to upload to the mobile app — it could be a photo.

Move

You often find it in photos, notes, and files. The move pattern should be used when you want to change the location, position, or hierarchy of the elements in the mobile app.

Reorder

It takes the task of rearranging the contents with a certain system. This pattern is offered in most mobile apps that serve content or where most users can enter content. With the reorder pattern, users can sort their notes, photo album, songs, or blog posts -any content- as they wish.

Draw & Annotate

It is the user’s use of the mobile device screen as a kind of drawing tablet. As a common usage example; It is the pattern used to add drawings and signatures to notes.

Save

When users fill out a form in the mobile application or change existing settings, it is necessary to store the new information in the database. Therefore, existing information is updated with new information specified by the user. To achieve this, the save component is used.

Cancel

When the user cancels the last actions and changes made in the application, he cancels these actions. It works the opposite of the same pattern. Schedule: It is a pattern you can often see in calendar apps. Thanks to this pattern, the app sends a warning notification to the user at a specified time or at a certain time.

Like & Upvote

It is possible to see it widely on social media. It is the reaction and action of other users to the content offered/shared by the users within the app. In some applications, these values affect the application algorithm. Like/upvote interaction usually takes place with a button on the interface of mobile apps.

Follow & Subscribe

This pattern can also be seen in social media or platforms with a lot of content entry. It allows a user to be aware of the activities of other users within the application. According to the app feature, each user can be a follower and following. For example, Instagram has designed a two-way interaction so that users can be aware of each other’s activities. In another example, Revue is designed so that only the content creator’s newsletters can be subscribed to.

Flag & Report

When there is disturbing content that is not suitable for the app, editors or algorithms intervene. But for a quick solution, users can report content that is not suitable for the application. Thus, this request is evaluated by the editors. Users expect not to see this content again.

Ban & Block

In some mobile applications, the users themselves can provide interaction and content input. In this case, it is possible to experience uncomfortable situations in the interaction between users. For this reason, users should be allowed to not see the content/users that they are uncomfortable with within their feed. The Ban & Block pattern can also be applied by mobile app admins to users who violate the app rules.

Content patterns

Home screen

It is often the first screen that will appear to users after onboarding screens. Contents vary depending on the app. Usually, UI designers make the extra effort when designing the home screen.

Discover

In apps with plenty of content, it is the screen where users can explore the app or what the app has to offer.

Articles

It is one of the content types in apps. It is the written form of the information to be conveyed to the visitors on a screen.

Communication patterns

About

It is the screen where the app describes itself or its contents/vision/mission.

Acknowledgment & Success

In apps, it sometimes appears with an alert, and sometimes with the help of a modal. If the action taken is successful, the success pattern is displayed. To show that this action is successful, this pattern is included in the app.

Error

It is directly related to the success pattern. At this point, the user has taken an action. But the action taken was unsuccessful. The error pattern is used so that the user can learn about this failure and act accordingly. Custom designs can be created to provide the opportunity to try again until the process is successful.

Empty state

It is the situation that the user will see when the app fails in a technical sense — for example, this may be a problem of not being able to access the internet —.It is a pattern used to notify the user that there is a problem. If we explain with an example; when you search for something using the search bar in an e-commerce app; the app may not be finding that product. For this reason, instead of showing a blank screen to the user, it can show a page that presents an information box.

Loading

While the user’s request is being fulfilled in the app, the user is informed on the screen that this operation is still being attempted. This information is usually presented with the loading animation.

Settings & Preference

It is a feature you can see in almost every app. It’s about the way users use the app. It is recommended to offer a more useful and user-friendly app.

Help & Support

Apart from the application flow, visitors may sometimes need other support. Most apps have a section dedicated to customer support. According to the necessity and difficulty of the support, the support section may be more advanced.

Feedback

Applications need feedback on issues such as technical errors, and user experience improvements. It is often costly to obtain this information. But unwittingly, users do it for free. At this point, lead users can greatly contribute to the app.

Privacy Policy

The privacy page, which is also required by the app markets, is obliged to inform users about legal issues.

Terms & Conditions

It is similar to the privacy policy. It is the area where the rules in the application and the rights of both parties (application rights and user rights) are explained.

Data patterns

Chart

As a result of collecting and analyzing certain data, meaningful information is obtained. It is the visualization of information so that it can be a better understanding in the mind of the user.

Progress

There are processes within the application that directly or indirectly affect the user. In these processes, the user may get bored while waiting. In terms of UX, it is necessary to prevent the user from getting bored. progress; It is a pattern that visually presents the user how far they have progressed.

Dashboard & Stats

All collected data can sometimes be independent of each other. The data must be available somewhere. Dashboard solves this need. It can pass data to users in a meaningful sequence.

eCoomerce patterns & Finance patterns

Subscription & Premium

Paid app services create plans where users can be more flexible and have more features. Users also pay a certain amount of fee for the service. This fee, which is repeated at certain time intervals, is called a subscription, and the membership type of the user is called the premium.

Carts & Bags

It can be thought of in real life: It is the area that collects the products that the user thinks to buy in eCommerce apps.

Checkout & Order Review

Users may not want to buy all the products in the Cart & Bags section. Or they may give up on purchasing even if they collect all the products together.

Payment method

A purchase takes place in exchange for a product or service. Within the app, there are payment methods determined by the app’s terms. There are payment methods such as card payment, payment with 3rd party organizations, and payment with crypto assets. There are many different payment methods available.

Order history

Apps save some data about users. For example, in an eCommerce app; card information, name, and delivery address can be stored within the app -in line with the permissions-. Your orders can be stored similarly. In this way, if you have any problems, you can follow the details of your order from the app.

Pricing

It is the amount that the user must pay for the purchase according to the payment methods determined for each of the products offered for sale in the app. Wallet & Balance: It is a method of keeping money ready to use within the app for quick shopping.

Transfer / Send money

It is a pattern you will see in financial apps. Money can be transferred between banks/accounts. This process usually consists of several steps. Just as you greet the user with onboarding screens when he/she enters the app for the first time; money transfer also requires a flow. At the end of the flow, the main purpose is to transfer money; this happens with the transfer pattern.

Promotions & Rewards

It is a marketing mechanism designed to reward and retain users.

Suggestions & Similar Items

It is also a pattern to increase marketing and sales. Especially in eCommerce apps, users may be inclined to buy more than one product. In this case, products similar to the ones they added to the cart may be recommended to users. Navigation patterns

Navigation patterns

Tab bar

It is the component that guides the user to access the most important screens in the app.

Search bar

It allows users to quickly access what they are looking for within the app. The importance and detail of the search bar are directly proportional to how content-heavy your app is.

Drawer

Drawer is a pattern that we can see mostly on android mobile devices. The drawer pattern is one of the Android mobile patterns. Although it is similar to the tab bar, it has different aspects. If there are too many important screens, using the tab bar can sometimes be insufficient. Therefore, the drawer can be preferred. However, the drawer should not be used with the tab bar to avoid confusing users.

Pagination

It is a pattern used to sort content. In apps such as blogs and eCommerce, users encounter a certain amount of content. To see the rest of the content, they need to interact with pagination and view the next page.

Infinite scroll

It is similar to the pagination pattern. The only difference is hidden in technical detail. Users are presented with some content, but when the user reaches the end of the content, they do not need to interact with pagination. The next content is automatically loaded into the app.

Navigation bars

Mobile apps don’t consist of pages like the web — even if it looks like it — mobile screens are a little different. For example, when you click on a link on the home screen, you are still on the home screen. You can think of it as a kind of categorization. A navigation bar is also needed to navigate through different links on the same screen.

Dropdown

It’s a pattern you’re familiar with on the web. It also appears from time to time in mobile apps. With dropdown, we can hide and show a list. Thus, we do not present all the information on the screen at once.

Modal

It fills the screen, so the user must interact with the screen when the modal pattern is displayed. That’s why it’s important to use the modal only when a very important action is needed.

Table

It’s great for sorting, grouping, and presenting a specific list. Table element also has actionable properties. It works in navigation logic.

Pull to refresh

Also known as refresh content controls in iOS apps. It is a gesture-based pattern. It helps to refresh the screen, especially in applications that are constantly fed with up-to-date content.

Social pattern

Activity/Notifications

The method of listing some of the activities of the users within the app publicly or under certain privacy conditions is called activity.

Add & Invite Friend

It is a good scaling strategy for apps. For some apps, new users can come by invitation only. Or, users who already exist in applications that have reached a certain scale can invite their circle to use the app.

Comments

We mentioned that users can create content on social media. Other users can also interact with these contents. One of these interactions is commenting on content. Other users need the comment pattern to express their opinions about the content.

Social feeds

Social feeds are what make social media the most influential and indispensable thing. Users can view their content on their social feeds by following the users they want to see. A social feed is a page that presents user content together.

Following/followers

It is a structure that measures the interaction rate in social media, that is, on platforms where users interact closely with each other. It is a structure that shows which users interact with other users within the app.

Leaderboard

In applications, sometimes goals are set for users. These goals are marketing strategies prepared to spend more time in practice. Based on the interaction in the application, a leaderboard is created by looking at the ranking of the collected points.

Profile & Account

Profile features in social media; is the page where users can view their content or the content of other users collectively.

Review/rating

It enables obtaining data by scoring the app, comment, product, or similar content.

Group & Community

There may be messaging, video meetings, and voice message features within the application. To give an example; In messaging applications, many people must access a message, and it needs to proceed synchronously. For this reason, it is ensured that many people read the messages of the sender. This is accomplished by forming a group or community.

The most familiar common mobile app UI design patterns are listed above. If you come across it, you can see that the naming is different in different sources.