Mobile Screen Archetypes
In mobile application development, mobile apps tend to adhere to a set of standard screen "archetypes" that appear again and again. There are over a dozen screen archetypes but there are six core archetypes that appear in nearly every app:
In addition to these six, there's other "extended" archetypes often encountered including:
- Splash Pages - Displayed while app is loading (and generally discouraged)
- Onboarding - First-time user visual tutorial for how the app works
- Map View - Often visualizing location-based information
- Messaging - Real-time chat and group conversations
- Calendar - Visualize dates or events into calendar form
- Media Players - Allowing the control of media playback
A large part of building mobile apps is about understanding how to build the UI and data back-end to power these common screen types above. Therefore when learning about Android development, you must ensure you have built at least all six of these core types when working on early projects.
The six archetypes are provided in more detail below.
This archetype is focused on the "signed out" view. This is where the user signs in or registers for a new account. This can usually take the form of username / password although commonly includes third-party authentication such as facebook or twitter connect for easy access.
Login screens usually require the following components:
- Accepting varying types of form input from user for basic login / signup
- See: text fields, input fields
- Validation of form inputs for invalid data (i.e bad emails, duplicate emails)
- Sending requests to server to authenticate or create new user accounts
- See: sending requests
- Integrating third-party connection SDKs (i.e Facebook SDK)
- See: parse sdk
- Loading states during authentication or creation
- See: progress bars
Examples:
First, sign in pages:
And of course, signup:
Check out more examples of login screens on mobile app patterns.
This archetype is focused on the primary content or data that a user consumes within the application. This is typically time-based displaying activities from other users that might be of interest. This is usually a list of discrete items which contain different data properties. The primary data is usually text or media content while secondary data includes the timestamp and the author.
Streams usually require the following components:
- Sending network requests to retrieve lists of content data to display
- See: sending requests
- Creating a list of items based on that source data including displaying text and media
- See: listview
- Endless scrolling which paginates as user consumes content
- See: endless scrolling
- Handling cases where the user wants to view more information on a piece of content
- See: events
- Allowing the user to take primary actions on this content such as deleting or editing
- Optimizing the display of items such that scrolling the stream is smooth
- See: viewholder
Examples:
Check out more examples of streams on mobile app patterns.
This archetype is focused on displaying all relevant information about a single discrete item within the application. This usually is a view that is reached when a user is consuming content in a stream that they would like to view in more detail or interact with. Typically this view contains additional data not displayed on the stream as well as actions a user can perform such as editing their items, liking or commenting on other user's content.
Detail views usually require the following components:
- Sending network request to retrieve additional details or media for the data item
- See: sending requests
- Action buttons that allow user to interact with the item
- See: events
- Option for user to share the content out to other apps
- See: sharing
- Scrollable text or media content to read about the item
- See: scrollview
Examples:
Check out more examples of detail screens on mobile app patterns.
This archetype is focused on allowing the user to create a new item by filling in all the properties for the item using a creation flow. This typically involves presenting the user with a series of input fields and allowing them to attach media such as a photo from the camera or metadata such as their location. Usually this is broken up into discrete steps and/or a great deal of fields are optional.
Creation screens usually require the following tasks:
- Input fields of various types to collect information
- See: input fields
- Ability to validate fields for correctness before creation
- Sending network request to create new valid content item
- See: sending requests
- Option to capture a photo or select from photo gallery
- See: camera and media
- Option to capture current location of device
- See: location
- Option to share or include friends related to the item
- See: parse sdk
Examples:
Check out more examples of creation screens on mobile app patterns.
This archetype is focused on allowing the user to view information about their own account, view their own content, and provide them account related action items. Typically, the profile contains important statistics about the user (i.e number of followers), displays recent content, and provides access to actions such as editing their profile, changing their picture, logging out, etc.
Profile screens usually require the following components:
- Grid or list of recent content items for user
- See: listview
- Images associated with the user's identity
- See: picasso
- List of related users (followers, following)
- Action items when on another user's account
- See: events
Examples:
Check out more examples of profile screens on mobile app patterns.
This archetype is focused on giving the user the ability to tune preferences associated with their account and/or the behavior of the app. The settings available range from notification and privacy settings, to profile settings such as username or email and to preferences affecting the behavior of the app.
Settings screens usually require the following components:
- Persisting settings after they are saved
- See: preferences
- Input fields and labels for modifying settings
- See: input fields
- Validating new input from the user
- Connecting with third-party accounts
- Affecting behavior of push notifications
- See: push messaging, notifications
Examples:
Check out more examples of settings screens on mobile app patterns.