While designing a mobile app, there are a number of different screens that a user is presented with. Understanding the importance and the difference between these screens is crucial to the design process. It is also an important part of the user experience. In this article, we’re going to take a look at seven different types of screens that a user will encounter while using an average mobile application. This should help you better understand and plan a highly functional and intuitive mobile app.

Kodework is a global leader in web and app development, based in Norway with offshore development studios in India. Our designers use these guides on a regular basis to deliver stunning apps that are intuitive, engaging, and functional. If you find this article informative, then check out our Comprehensive Guide To Mobile App Design.

1. Splash Screen

The Splash Screen is the first screen that a user sees when they open an app on their mobile. This is a very important screen because it serves as the first impression for the app. A slick and well-designed splash screen sets the tone for the user experience. It is important that the splash screen be minimal, and for that reason, these are the three most important elements:

• The app name
• The app logo
• The app slogan

If the app is particularly heavy, then you can even add a progress bar so that impatient users have a sense of how long it will take before the app is completely loaded. Remember to place all the elements in the middle of the screen. Ideally, a splash screen should be present for no more than 8 seconds.

2. Home Screen

This is the main screen around which your entire app revolves. The home screen is the place where the user keeps coming back to, so having a screen that is intuitive and easy to navigate is of the utmost importance. There is no set template the follow here, which means the home screen will differ based on the purpose of the app. A good app designer will remember to add key navigational elements such as menus and a search bar to make it easy for the user to navigate through the app in an intuitive way.

3. Onboarding (or tutorial) Screen

This screen is usually optional but is great to have in the event that your app has a navigational system that is different from other apps. This particular screen also comes in handy if you are releasing a new version of the app which is completely different from the previous version. On the onboarding screen, users will usually see an overlay that points to the various features of the app. In other instances, the onboarding screen can even be a series of swipe throughs that highlight key features and where they can be found. Regardless of the presentation, one common factor is the option to ‘skip’ the tutorial. In order to build a more personal bond with the user, the designer may use the company mascot as a guide while conducting the tutorial.

4. Login Screen

This screen is pretty straightforward. This is where the user has an opportunity to create a personal profile on the app. This information is used for various purposes, key among them is so that the user can store their information, and retrieve it in the event that they uninstall and reinstall the app. The login screen is very minimal, asking for mainly a username, password, and email address. Designers can also use the Google or Facebook API to make this process easier and familiar. First-time users need to be presented with a ‘Sign Up’ option, and it’s important to have a link to the company’s user data and privacy policy.

5. Stats Screen

This screen applies mainly to apps that present users with some form of engagement such as contests or competitions. If there is a large amount of data, this screen could become rather complicated, which is why it is imperative that the design be clean, and with clear typography. Adequate app testing will allow the designer to compress the data so as to not make the screen look too cluttered.  

6. Ecommerce App Screens

If the app is used for the purpose of online shopping, then the e-commerce app screen usually replaces the home screen as the main interaction area for the user. This ‘catalogue screen’ needs to grab the users attention, by focusing on the products that are intended to be sold, and subsequently encouraging the user to hit the ‘buy’ button. Here are a few key features of an e-commerce app screen:

• A vertical scroll
• Scalable width (to accommodate products as per the screen size)
• High-quality images
• Relevant information such as product description, colours, size etc
• A call to action button such as ‘buy’ or ‘add to cart’

As part of the e-commerce screen, a good design will also have a ‘product card’ screen that allows users to know what they are buying. The card screen displays important information about the product, thus helping the user to make a decision. The product image is placed at the centre, under which, the product description is mentioned.

A checkout screen consists of payment options allowing the user to purchase the products selected, and it is imperative at this stage to let users know that their banking or payment information is secure. The checkout process also gathers shipping and billing information. Once the checkout is completed, the user is presented with a confirmation screen that displays all the information that was gathered during the checkout process.

7. Feed Screen

This type of screen is seen mainly in social applications. The ‘feed screen’ is a dynamic and constantly updating list of relevant news links or ‘cards’ that is followed by users. The user usually scans through the list quickly by scrolling upwards or downwards, preferring to open only those links which they want to read. It is important not to make this type of screen too content-heavy, instead, presenting the user with bite-sized pieces of information at a time.

By understanding the importance and difference between these different screen types, you will be well on your way to designing slick and intuitive mobile applications in no time! To know more about mobile app development, check out our Comprehensive Guide To Mobile App Design. On the other hand, if you’re looking to develop an app, then get in touch with the team at Kodework.