This website requires JavaScript to deliver the best possible experience.
Mobile UI Best Practices

Mobile UI Best Practices

About

The user wants to discover information about the application quickly.

‘About Us’ page is a vital part of every App as it’s usually one of the first destinations visitors would visit when arriving at an app. It should provide people with Information like who and what app is. It also may contain social networks or testimonials.

Mobile UI Best Practices
Photo Credit: Pttrns

Activity feeds

Users want to be up to date with new actions other users do. These activities are relevant and interesting to users:

  • Provide an overview of recent activity that is relevant to the user.
  • Allow users to catch up on recent updates with little time and effort invested.
  • Activities should provide links to further it.

Photo Credit: Developer Apple

Activity feeds

  • Ask Permission

When users open a new app, viewing multiple popups distract users and resulting in user abandon. One of the most distracting popups those that are asking for access. Such as “App Would Like to Access Your Locations”. To avoid this issue you need to build engagement before asking for permissions. Here are some tips to avoid common pitfalls in your permission request.

  • Build a Strategy

When it comes to requesting permission, the worst thing an app can do is to bombard users with permission requests without any notice or explanation. For example, Inbox by Gmail asks for permissions even before its onboarding tour, with no additional information or context.

Permissions

In order to solve this issue, you should build a permission strategy. Permission strategy depends on the clarity and importance of the permission you are requesting. Critical permissions should be requested up-front, whereas secondary permissions may be requested in-context.

Permission strategy

  • When to ask the user

Choose the right time to show permission popup. Don’t ask the user for it until you are in need for it. You need to also ask requests in context. That means you should ask for a request that is relevant to a task the user is doing.

Permission popup
Photo credit: thinkwithgoogle

  • Request explanation

You should clearly explain why a request is needed and if possible what users will get in return for accepting the request.

Explaining permission in context is a well-done example . It helps gauge user interest and improve comprehension of the permission. Try to explain to a user the benefits they’ll receive by giving the app access.

Request explanation
Photo Credit: Google Maps

  • Priming during the request

You can do this by providing a background image that explains the permission request. Foursquare primes users by providing a background image that explains why the app needs that particular permission.

Request explanation
Photo Credit: babich.biz

Browser

Viewing content in a browser means that font sizes may not be consistent, images are not clear. Users have to double tap or pinch to zoom to be able to check and interact with content. That would ruin the user’s experience. Responsive design is the solution to this issue.

Browser

In responsive web design, a page is specified by meta viewport that matches the device width. The mobile browser doesn’t scale the page and the content is readable as shown in the image on the right.

We recommend using responsive web design because it:

  • Makes it easier for users to share and link to your content with a single URL.
  • Helps Google’s algorithms accurately assign indexing properties to the page rather than needing to signal the existence of corresponding desktop/mobile pages.
  • Requires less engineering time to maintain multiple pages for the same content.
  • Reduces the possibility of the common mistakes that affect mobile sites.
  • Requires no redirection for users to have a device-optimized view, which reduces load time. Also, user-agent-based redirection is error-prone and can degrade your site’s user experience (see "Pitfalls when detecting user agents" section for details).
  • Saves resources when Googlebot crawls your site. For responsive web design pages, a single Googlebot user agent only needs to crawl your page once, rather than crawling multiple times with different Googlebot user agents to retrieve all versions of the content. This improvement in crawling efficiency can indirectly help Google index more of your site’s content and keep it appropriately fresh.

Calculators

Calculators are widely being used from all ages. Users use them at school, in their finances and daily calculations.

Easy interface: user’s interface should be easy to use for younger and older people.

Hidden Operator States

One of the biggest problems with calculators is that they don’t show users what their operator state. All operator states look the same.

Hidden Operator States

To solve this issue, a string that describes the user’s current input should be displayed at the top of the screen while a user is entering data.

The user’s operation would populate from left to right and display both operands and operators. If the user turns on an operator, the operator symbol will inverse highlight with white font on a small black box clearly showing what operator state they’re in.

Hidden Operator States

Users can move the cursor to previous operators and operands and correct them.

  • Make number buttons bigger in order not to confuse users.
  • Show users what is happening while they are clicking on numbers.

Operator States

Cards

Users always want to overview content with little attention in less time. Cards are the best way to display content with relevant data. Cards are the best choices for online stores and e-commerce. This allows users to browse content in a manner similar to surveying a store shelf. Cards can display all types of content. They may contain text, images, videos, and graphics. Cards are presented in many ways including individually, in a timeline, gallery, next to each other, or making up a dashboard.

Cards
Photo Credit: Material Design

Tips For designing cards

Homogeneous content

For quickly scannable content, make cards homogeneous that is with few lines.

Homogeneous content
Photo Credit: UX Design

Decrease borders

Excessive borders and heavy shadows distract visual friction.

Decrease borders
Photo Credit: UX Design

One idea per card

Presenting multiple ideas in one card distracts users attention.

Photo Credit: UX Design

Visual hierarchy

To increase legibility, provide visual hierarchy. You may use a headline with bold font, a sub-headline with a different color and text with normal size and color as shown in the photo. This will also help users to quickly overview content.

Visual hierarchy
Photo Credit: UX Design

Charts

Charts are an effective way to present complex data by the easier way. Some apps need these charts to facilitate checking data to users. These apps may serve insurance companies, financial institutes or banks. Charts are a great way as they don’t take much space to view important information.

Be clear and concise

Charts should be as clear and seamless as possible to deliver data directly to users.

Charts

Checkout

With the growth of mobile usage, users head for accomplishing all tasks on mobile even when it comes to payment. As a result, a checkout page for online stores became a must have page, not an option. Here are some tips to best come up with a payment page:

Provide multiple payment options

There is nothing more frustrating for a user wants to purchase than not finding his payment method available. It leads to user abandon. So provide multiple payment methods in order to facilitate purchasing for users. Customers expect multiple payment options. They also expect a quick and secure checkout.

Should be quick and secure

Users need to accomplish purchasing and payment quickly and at the same time securely. Make users feel safe by informing them that data they enter is secure.

Send confirmation

Users need to know whether the buying process accomplished or not. As a result, send a confirmation mail or window shows that the process has successfully done.

Send confirmation

Coach marks

Coach marks or walkthroughs are tutorials that demonstrate to users how to use different features of an app. It’s usually displayed at the first time a user logged into the app.

Some apps, like Secret or YouTube, go the route of overlay instructions, highlighting important parts of the UI with “coach marks” to explain what they do. Alternatively, some apps like Carousel and Duolingo use the first launch to show a slideshow that walks users through the entire experience, effectively explaining what the user can accomplish with the app.

Coach marks

Attach your coach mark in the help center

To strengthen the user’s experience, add the walkthrough in the help center. Some users may need any missed tutorial of the app and will be in need for the walkthrough to view one more time.

Make it in a friendly manner

On the other hand, there are users who will be annoyed with walkthroughs. Making it friendly or funny will help them continue going through it without feeling bored.

Coach mark
Duolingo walkthrough Photo Credit: UX Planet

Confirmation

Feedback is the glue between user and interface. What you aim to get is positive feedback by their interacting with your app. One of the most significant windows you should design is the confirmation popup.

Users want to know the result after they have made an action.

Match between your confirmation popup and the real world

Speak users’ language rather than unclear system terms.

Confirmation popup

Be clear and concise

Use clear statements or questions with little explanation.

Don’t use “yes” and “No”

Use actual verbs related to your question.

Confirmation popup
Photo Credit: Material Design

Content screen

The importance of content lies in it establishes a connection between the app and the user. It helps users to accomplish their goals. All content aspects like typography, its layout and size affect user’s experience of reading or reviewing content. Users take a much longer time to read smaller text and images. This is especially true for mobile, where tiny type on a small, bright screen can be a real headache for users.

Balance typography with space

It is one of the most important factors that affect your design. Text should be bigger to be seamlessly checked and simultaneously, there must be enough white spaces between lines and images.

Balance typography with space
Photo Credit: UX Planet

Appreciate context

Ensure images are dynamic and relevant to the content. Use predictive visuals to substantially improve the user experience.

Provide visual hierarchy

Use headlines, subheadings, and paragraphs. This will help users to seamlessly check content.

Visual hierarchy
Photo Credit: Material Design

Empty States

A list that doesn’t contain any items or a search that doesn’t display any results are examples of empty states. Although these states aren’t typical, they should be designed to prevent user confusion.

Some situations a user can see empty states on your app:

  • The first-time usage when there is no data can be shown to a new user (ex.: empty timeline)
  • Clear state (ex.: empty inbox, a list with no items)
  • Errors (ex.: no internet connection)

For a good designer, each of these situations is an opportunity to avoid users frustration or confusion and help them get what they want.

Provide Images

Use image demonstrates that this state is empty.

Strengthen your brand

Use statement illustrates what happened that has a positive tone and is related to the brand.

Empty States
Photo Credit: Medium

Find and Invite Friends

Users usually in need for experiencing apps with their friends. Word of mouth is one of the most important marketing techniques that help improve ROI.

The Invite Friends feature is a mean that helps improve the word of mouth.

The user wants to experience the application with their friends so Make the invitation process simple and easy to complete. Venmo, for example: makes it really easy to invite others through social, mobile contacts, and email integrations.

  • Make it simple and easy to invite friends.
  • Provide many ways of invitation by different platforms.

Find and Invite Friends
Photo Credit: UXPin

Friend lists

The user wants to keep track of their friends and contacts within the app so Show all the user’s connections or friends in a list. SnapChat and Yelp are part of the growing number of apps that give you friend lists. Users become much familiar with the concept of communicating with their friends on any app they have. So it is a significant list you have to provide in app design.

Friend lists

List view and grid view

What makes mobile phones so convenient and portable is their small size. Compared with desktop and even laptop screens, phone screens display a lot less content. Users can only view a small amount of content at a time before they need to scroll to view more. To display content, you have two options. List view and Grid view.

List view and grid view
Photo Credit: Material Up

List view

Lists present multiple line items vertically as a single continuous element. Lists are best suited for similar data types. They made up of a continuous column of rows. Every row consists of heavy text and icons. List view items require less vertical space than an image would, allowing more list items to be displayed on the screen at a time.

List view also provides users with a format that follows user natural reading “F-shaped pattern”.

List view
List view .. Photo Credit: Material Design

List view prevents too much scrolling by making pages shorter. The exclusion of images (list view has only thumbs) allows you to fit more options per screen.

Grid view

Grid views are an alternative to standard list views. A grid list consists of a repeated pattern of cells arrayed in a vertical and horizontal layout. Grid lists are best used on similar data types.

A grid list is best suited to presenting homogenous data, typically images, and is optimized for visual comprehension and differentiating between similar data types.

 Photo Credit: Material Design

A general rule of thumb

What is the most efficient layout for viewing content? Should you use a list or grid view? The right answer is: it depends.

It depends on how much information a user needs in order to choose between items. Content is everything. You should choose the layout that suits the type of content you’re displaying.

Details in lists, pictures in grids

Products that require more information like rating, version and price to show should be designed in a listview. Whereas products with less information are mostly designed in a grid list.

Thumb

Launch screen

When a user enters an app for the first time, splash or launch screen is the first screen he sees. It is the intro of every app. It has no functional specifications. It basically consists of the app logo and it may contain an image that represents app functionality.

You have to add a killer splash screen if you want to ensure a good launch experience for your users. So, here are some tips for designing splash.

Use the right size

Mobile devices differ from one to others. So screen resolution also varies. Given that your splash screen is the first image users will see, you definitely don't want it to look distorted.

You should create as many splash screens as there are screen resolutions. If you are creating an iPhone app, it's easier since there are few devices. But, if you build an Android app, there are lots of manufacturers, a lot of devices with a lot of screen resolutions.

As a result, you need to create 3 splash screens.  A small, a medium and high res, and pull the one that is the closest to the screen resolution of the phone that opens the app.

Launch screen
Photo Credit: SkillShare

Keep it simple

It is a loading page until the app opens, so users will not have time to read or review any content in it. So don’t overwhelm users with no needed content. Keep it simple.

You may use your name and your logo, your motto, or whatever describes you and your app the best. Make a clear composition using those elements, and create one single image, in portrait mode.

Launch screen

Photo Credit: Pttrns

Tell your users it's loading

The worst feeling a user may have is waiting with no clue what is going on. All they can do is waiting for the app to finish but this may lead to their abandon and exit. So you have to mention in your splash that this app is loading.

Launch screen
Photo Credit: Pttrns

Library

The library is one of the mobile screens that carry a lot of information and therefore it must be properly organized. Here are some tips for doing that:

Split content to categories

Users need to easily access text, images and review them. They also want to find what they are looking for in as less time as possible. Categorizing content into sections is your best way to display huge content. Do your user research, find what sections they may need and give naming to those categories as they used to know them.

Split content to categories
Photo Credit: Pttrns

Personalization is significant

Users like the feel of being personalized, that this thing is just made for them. As a result, think of categories that are special to users like “my latest books, my favorite books or recently added songs”. A great example is music apple app where categories have well-done personalized as it has a name of “ For You”.

Personalization

Compelling CTA

Call to action is where you can get feedback from users. Place it in a clear spot with an action verbs.

Compelling CTA
Photo Credit: Pttrns

Loading

Loading is an important page for every app designers may neglect. For many reasons, loading page appears as users hate waiting for an unknown reason.

Keep your Brand obvious and create a good user experience

Maintain your identity through colors, fonts, sizes, and images used

Talk with your user

Leave a fingerprint or impression when using the application through an app definition statement that explains what the app is doing now if the download is for more than one important piece of note that should be known or a welcome phrase.

Place a loading icon

The user must know whether the loading is included or not and must put an icon to help him know it.

Loading

Maps

Maps are significant for many applications. It is the easiest way to determine places instead of entering data manually.

Leave a place to search

Even if users are looking for a place you have already set, make it possible for them to search every region they want.

Make the marks on the road clear

A user utilizes the map for those signs. so,make them clear with a different color to be easily noticed.

Add a destination description

Make it easy for users to know more about places they want by providing a description, rating, prices or whatever data they may need.

Maps

Message

Show that someone is typing

Some apps may contain the messaging feature. It’s important to be well designed as users used to use it in many apps in the same manner. For showing quick feedback, You want the users to feel that other people have seen their message or typing a new message.

Message

Quick access to share pictures or videos

Users love sharing their stuff on chats. This includes images, viral videos, and even GIFs. Make it easy for users to access share images with their friends whether by uploading it from an album or by taking a photo with a camera.

Quick access to share
Photo Credit:idownloadblog

Provide a simple design

Users need a simple design as they just want the functional features of messaging. Make the design simple and clear as much as possible.

Simple design
Twitter Inbox by Pttrns

Notification

Notifications provide short, timely and relevant information about your app when it’s not in use. Notifications help users know important events in your app. They have two types. A well-timed users tasks and notifications from other users.

Follow the KISS principle

It means (keep it simple, stupid) so keep the message clear and understandable. No matter what the content of the notification is, make sure it speaks the same language as your users. 

Summarize notifications

Sending multiple notifications for the same type of event will annoy users. This may make users turn off notifications from your app. If multiple notifications of the same type are available, combine them into a single summary notification. A summary shows how many notifications of a particular kind are pending.

Notification
Summarize notifications. Image credits: Material Design

Navigate to the right place

Provide an expanded view that enables the user to view more information when expanding it without navigating away from it. When the user touches a notification, enable the user to take immediate action. This may open a detail view, such as a message, or a summary view for multiple notifications

Make notifications optional

Users should always be in control of notifications. Allow users to disable or change notifications in your app’s settings.

Notification
Game Center app notifications in iOS

Don’t send confidential information through notifications

Don’t send sensitive data through notifications. For example, a bank account number or password should never be sent in a notification.

Confidential information

Photos

Images are one of the most important factors that help strengthen your app. Users usually want to overview content. Images will help them realize it seamlessly. Especially when having a products app.

Use hero image 

A good hero image does all the hard work for you. The main product image should be above the fold. Don’t make users scroll in order to see the hero image for a product.

Photos
Hero image in Airbnb app for iOS

Provide an image gallery

Images are used to get a feel for the product in a way that a product description never can. Thus, the more product images you have within your product screen layout the better:

  • It’s important to show all sides of the product.
  • Users often rely on the product image to assess features. You should provide images that show detail and features. For example, if you’re selling an audio receiver show the input and output ports at the back to help the user understand it’s’ features.
  • To optimize usage of the gallery photos, use images associated with the product details highlighted in the product description.

Horizontal swipe for product images

Users should be able to quickly swipe through an items images horizontally, and not have to scroll down to view a series of images.

Horizontal swipe
Image credit: Dribbble

Only high-quality assets

You should provide only high-quality product images, videos, and other assets in order to capture the attention of app users. Make sure your images are appropriately sized for displays and across platforms:

High-quality assets

Image can be easily zoomed into

Users should be able to easily zoom into a product image to inspect it in more detail, by double-clicking or selecting a zoom button. This is especially important for clothing stores where consumers are more concerned with detail. The zoomed-in images also need to maintain high quality.

High-quality assets

Left: zoomed-in view forces the user to look at a specific part. Right: Put users in control by allowing them to zoom in as they prefer (both depth and area of zoom is controlled by the user).

Popovers

Popovers inform users about a specific task and may contain critical information, require decisions, or involve multiple tasks. Popovers may contain text, buttons or other UI elements. They remain focused on the screen until a specific action is taken.

Popovers position

To show a popover, it should be relevant to what a user is doing at the moment. The most annoying element that would ruin user’s experience is irrelevant popovers. Place it in a proper position to users and without covering the essence content users may need to see.

Popovers position
Photo Credit: Material design

A close button is significant

A popover should be closed when clicking outside of its bounds or selects an item in the popover.

Close button
Photo Credit: Pttrns

Only one popover at a time

Displaying multiple popovers clutters the user interface and causes confusion. Show only one popover at a time in order not to ruin the user’s experience.

Popovers clutters

Avoid too big popovers

A popover shouldn’t take the whole screen. Make it big enough to suit content but not too much in order to the behind content be properly seen.

Product

The product page is your hero page. It is where you increase your ROI. Everyone knows that successful product pages are important to a successful e-commerce website. It is the page where you provide data about products and raise users’ motivation to buy.

Product page

Call-to-action button

CTA is your way to make users purchase. Users should find buttons without looking for them. CTAs must be as compelling as possible. User’s eyes should be drawn to it. A primary CTA should use action verbs like “Book now” or “Add to Cart”. Secondary CTAs (e.g. “Share It”, “Add to Wish List”) should be in close proximity to the primary CTA.

Call-to-action button

Squint test for a primary CTA

Use the squint test to see how prominent the button is. Simply squint and blur the page. Does the button stand out more than any other element? If the answer is no, then make it stand out by giving it a unique color not used anywhere else on the page or make it larger and the text bolder.

Squint test for a primary CTA

Squint test example

Make the primary CTA sticky

It is better to design a compelling primary CTA and to be visible even when users scroll down. Make your CTA sticky so a user can act to it any time.

Sticky CTA

CTAs must be BIG enough

Make your CTAs tappable. Mobile devices are now with touchscreen. As a result, buttons must be big enough to be easily clicked.

Android recommends controls have a touch target size of 48dp for on-screen elements such as buttons, icons, tabs with icons, etc.

IOS recommends tappable controls have a hit target of about 44 x 44 points.

Big CTAs

Provide visual feedback after a primary action

When users add an item to the cart, lack of feedback can cause them to question whether the action has been processed. Provide feedback to make users sure their action has been successfully performed.

Visual feedback
Visual feedback

Progress

Progress and activity indicators are visual indications of app loading content.

1. Place a clear icon

Helps the user to see which phase is connected and what is left.

2. Operations number

Place numbers that help the user to see which number is in and what is there.

3. Place the exit button

Help the user to cancel or exit the process and not force it to complete.

Progress and activity indicators

Record

1. Motion is important

There are many movements that indicate that there is a sound recorded, including the sound waves that rise above the degree of sound or circle, which comes out of larger circles, all of which help to understand that there is a voice recorder.

2. How much time has passed

If I want to record one minute and there is no time indicating the time that has passed I will begin to bored that I have exceeded the minute and therefore the time that has been important for those who record the voice.

Record

Search

Make searching easy to use

Search is one of the most important function an app may include and users will be in need for. It’s important to place the search box in a place that is easy to be found. Search facilitates many tasks to users so placing it in an invisible position will make them abandon and exit your app.

Search

Use a sensible labeling system in search box design

Imagine a user misses the search box and clicks just outside of it, i.e. in the search button. The text won’t disappear. Instead, they’ll begin searching for something irrelevant and more often than not, it won’t produce any search hits.

Additionally, if you add too much placeholder text, you run the risk of placing a burden on the user’s short-term memory. The placeholder disappears as soon as the user clicks or begins to type within the search box, so they’ll have to delete their entry to view the text again. And often, users won’t even figure out how to get the placeholder back.

On the other hand, sensible use of labels can help the user out. Enter tooltips. Tooltips that hover over, next to or above the search box can be viewed any time and don’t affect entered text. To prototype a tooltip, you’ll need rectangle and text UI widgets and an interaction that will allow you to keep the widgets hidden until the user hovers over them with the mouse.

Labeling system

Predictive queries

Once a user enters a query, the search suggestions turn to auto completion. As a user types, the suggestions are filtered. It helps users search faster by subtly guiding them towards results rather than typing in incorrect text.

Predictive queries

Settings

Application settings let users indicate their preferences for how an app should behave. It helps users when having a problem. All of an app’s settings should be founded in the settings section. Users used to this name so don’t use any synonyms like options or preferences.

Grouping

For huge lists, split this large list into multiple shorter lists. Arrange them based on their type and categorization. Grouping helps people find their way to the desired configuration.

Settings
Photo Credit: Material Design

Labeling

Choose labels that are brief and meaningful. In order to have a great labeling follow these guidelines based on material design:

  • Capitalize the first word of each label.
  • Put the most important text of your label first.
  • Rephrase negative words like "Don't" or "Never" into neutral terms such as "Block."
  • Use impersonal labels like "Notifications" instead of "Notify me." Exception: If referring to the user is necessary for understanding the setting, use the second person ("you") rather than the first person ("I").

Labeling

Signups

Clearly stating the rules

Be clear and Inform users with rules before signing up. It’s better to tell them rules than leaving it when validating. Speak users language and demonstrates the rules for user’s safety.

Signups

Show password

Have the option of making the password visible. This helps users logging in and signing up. Don’t ask for confirmation, use the password field toggle to help users make sure they get it right the first time. You can use an icon, a small label or a checkbox for the show/hide functionality.

Show password
Examples from Amazon

Differentiate login from registration

On an increasing number of websites, the login input fields (email and password) are very similar, if not exactly the same as the registration input fields (email and password). It’s important therefore to clearly differentiate the two and to minimize the chance of users accidentally attempting to login in via the registration form. Certainly, don’t do what AxShare does by showing the two side by side. Many a time I’ve accidentally attempted to log in to the site via the registration form.

Log in and sign up

You also have to use different verbs like “signup and login” or “sign in and register” in order not to confuse users.

Signup and login

Allow users to log in with an external account (e.g. Facebook)

Why force users to have to remember another set of login details when it’s now so easy to let them log in via an external account, such as a Facebook, Google or LinkedIn account? Of course, not everyone is likely to be happy doing this, but it’s a great way to let users easily log in to your website or app with an account that they use day in, day out. Very sensibly Ocado lets its users log in using either their Facebook or PayPal accounts.

Login details

Use an email address or mobile, rather than username

Since usernames have to be unique, invariably a preferred username has been taken, so users end up registering with a new username that they are never going to remember. If your site or app does use usernames then like Twitter, at least allow users the option to log in with their email address or phone number.

Username

Tell users if caps lock is on

Another simple way to help users enter their password correctly is to warn them if their Caps Lock button is on.

Caps lock

Keep users logged in

We all enter an app mostly more than 1 time a day especially those social apps like Facebook, twitter, and YouTube. It’s frustrating to users when they have to encounter login fields every time. So to keep users logged in is your best way to retain users and avoid annoying them.

Keep logged in

Checkbox and toggle in forms

When designing forms, there are many text fields that a user should choose one choice or more than one in order to accomplish entering data. To facilitate this field to users:

  • Designers use some UI elements that will help users finishing forms seamlessly without having to write inputs manually.
  • These elements called option selection. It can be represented by checkboxes, toggles, radio buttons, and drop-downs controls. Each of them can be great when used correctly.

Checkboxes

Checkboxes are used when there is a list of options and the user may select any number of choices, including zero, one, or several. In other words, each checkbox is independent of all other checkboxes in the list, and checking one box doesn’t uncheck the others.

Checkboxes

Toggles

The toggle switch represents a physical switch that allows users to turn things on or off. It also facilitates user interaction and therefore enhances the user’s experience.

Toggles

Use standard visual representations

A checkbox should be a small square that has a checkmark or an X when selected.

Checkmark

Checkbox control in selected and unselected states. Image credit: Material Design

A toggle should look like an on/off switch:
Toggle

You should provide clear visual feedback for user interaction with control. Subtle animation makes the experience feel crafted — it’s especially important for mobile apps which UI controls should appear tangible, even though they are behind a layer of glass.

Visual feedback
IOS7/8 Toggle button. Source: Dribble

Timeline

1. Make the user control

Timeline Is the page that others see about the user and therefore make him the possibility to embrace what will appear to others and what they see to share with a certain person and what he wants to keep for himself without others.

2. Possibility of modification

A user can scan his personal publications or edit them if he makes a mistake.

3. Place for interaction

Make it possible to comment or comment on someone's comment and interact with their responses.

Timeline

Widgets

Widgets display quick views of an app’s most important data and functionality. Home screen widgets display the most important and interesting content on the mobile home. Users can resize and control it.

Expect planning

Changing the needs of the user to the other, some of them want the clock only and some of them want the weather and some of them want to Monday, expect all the possible features that can be done by the user.

Simple to use

It is easy to use and to control.

Maintain confidentiality

The user can add or change it without opening the lock of the mobile.

Widgets

As Statista claimed the number of smartphone users across the globe will reach over 5 billion by 2019. As a reason we have to concern more about apps and mobile first websites. And in conclusion when it comes to designing a mobile app or designing for small screens, you have to think more about microinteractions, gestures and the context in which a user may use the app. It helps provide a delightful and as a consequence a successful experience.

More
Books