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.
Users want to be up to date with new actions other users do. These activities are relevant and interesting to users:
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.
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.
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.
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.
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.
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.
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.
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:
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.
One of the biggest problems with calculators is that they don’t show users what their operator state. All operator states look the same.
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.
Users can move the cursor to previous operators and operands and correct them.
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.
For quickly scannable content, make cards homogeneous that is with few lines.
Excessive borders and heavy shadows distract visual friction.
Presenting multiple ideas in one card distracts users attention.
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.
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.
Charts should be as clear and seamless as possible to deliver data directly to users.
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:
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.
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.
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.
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.
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.
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.
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.
Speak users’ language rather than unclear system terms.
Use clear statements or questions with little explanation.
Use actual verbs related to your question.
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.
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.
Ensure images are dynamic and relevant to the content. Use predictive visuals to substantially improve the user experience.
Use headlines, subheadings, and paragraphs. This will help users to seamlessly check content.
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:
For a good designer, each of these situations is an opportunity to avoid users frustration or confusion and help them get what they want.
Use image demonstrates that this state is empty.
Use statement illustrates what happened that has a positive tone and is related to the brand.
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.
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.
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.
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 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 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.
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.
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.
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.
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.
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.
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.
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:
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.
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”.
Call to action is where you can get feedback from users. Place it in a clear spot with an action verbs.
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.
Maintain your identity through colors, fonts, sizes, and images used
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.
The user must know whether the loading is included or not and must put an icon to help him know it.
Maps are significant for many applications. It is the easiest way to determine places instead of entering data manually.
Even if users are looking for a place you have already set, make it possible for them to search every region they want.
A user utilizes the map for those signs. so,make them clear with a different color to be easily noticed.
Make it easy for users to know more about places they want by providing a description, rating, prices or whatever data they may need.
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.
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.
Users need a simple design as they just want the functional features of messaging. Make the design simple and clear as much as possible.
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.
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.
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.
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
Users should always be in control of notifications. Allow users to disable or change notifications in your app’s settings.
Don’t send sensitive data through notifications. For example, a bank account number or password should never be sent in a notification.
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.
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.
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:
Users should be able to quickly swipe through an items images horizontally, and not have to scroll down to view a series of images.
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:
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.
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 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.
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.
A popover should be closed when clicking outside of its bounds or selects an item in the popover.
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.
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.
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.
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.
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.
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.
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.
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.
Progress and activity indicators are visual indications of app loading content.
Helps the user to see which phase is connected and what is left.
Place numbers that help the user to see which number is in and what is there.
Help the user to cancel or exit the process and not force it to complete.
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.
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.
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.
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.
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.
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.
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.
Choose labels that are brief and meaningful. In order to have a great labeling follow these guidelines based on material design:
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.
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.
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.
You also have to use different verbs like “signup and login” or “sign in and register” in order not to confuse users.
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.
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.
Another simple way to help users enter their password correctly is to warn them if their Caps Lock button is on.
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.
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:
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.
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.
A checkbox should be a small square that has a checkmark or an X when selected.
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.
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.
A user can scan his personal publications or edit them if he makes a mistake.
Make it possible to comment or comment on someone's comment and interact with their responses.
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.
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.
It is easy to use and to control.
The user can add or change it without opening the lock of the mobile.
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.