NYX Ditech

Lets Talk!

Tag: mobile UI

Categories
Apple Brand & Identity Design Mobile Apps

Mobile UI Design: 7 Most Common Types of Screens

Mobile UI Design

There are over 2.7 billion smartphone users and 1.35 billion tablet users across the world. According to a study, on average, Americans check their phone every 12 minutes, and 90% of mobile time is spent on apps across the globe. Also, more than 6000 mobile apps are released every day. These figures are staggering and are sufficient enough to highlight the popularity of mobiles and their apps. The first thing a user notices while interacting with your app is its interface. So, it is crucial to have a pleasing mobile UI design to ensure that your user sticks around and enjoys browsing the app.

To build a useful mobile UI design, designers need to investigate its characteristics and learn their constituents and functionality thoroughly. Mobile applications indeed evolve with changing user needs. Thus, designers strive to add new functionalities every day to fulfill user needs. That said, there are still some screens that are default and are commonly used across a majority of apps. Here is a list of the top 7 most common types of mobile app screens.

1. Home & Menu Screen

The home screen is an essential part of any application. It’s the main screen from which users navigate to all the other sections and options of the application. Although home screens differ from one app to another, depending on the product and its purpose, still there are some common key elements of all home screens. Firstly, it has a search field so that users could easily search for what they are looking for. Secondly, it contains navigation elements providing access to the various content sections. There are two ways of presenting the menu in mobile applications – it can either be a part of the main screen or a separate screen. 

Note: It is advisable to keep the number of options in the menu under seven, featuring only the key sections. If the number goes beyond seven, use sub-categories to show them.

2. Log-in & Profile Screen

Creating personal accounts or profiles to sign into an app has become a standard norm these days. While this is a good way to ensure that your user gets a personalized experience, a lousy login screen could lead to people uninstalling your app. Designers must be able to understand how things work on login and profile screens. The key is to keep the login screen clear, uncluttered, and as minimalistic as it can be, to offer easy access to users. The amount of information has to be limited; otherwise, the profile screen may look too complicated. 

The UI must be intuitive, and at no point, users must be confused. The name and password sections, the confirmation button and a sign-up option must always be available on a login screen.

3. Product Screen

A product screen is most common in eCommerce apps. It displays the collection of products and when the user taps on the product they want, another screen displaying its specifications would pop up. 

The product screen shows the key information about the goods. It helps users to decide whether they want to buy the product or not. Designers usually place the product photograph at the center of the screen, with the description placed below it. The information is generally divided into small groups like size, material, weight, etc. so that users can get all the required info.

4. Catalog Screen

The primary objective of any e-commerce business is to sell products. For an e-commerce app, you would need a catalog screen to display all the products in one place. Visuals attract users and prompt them to make a purchase. So, designers must focus on designing a visually appealing catalog that will attract a user’s attention and encourage them to shop for a product. You can offer the user to scroll through the list, just like several other eCommerce websites and apps display it. The amount of merchandise/products in one row can be decided according to the width of the screen.

The product list in mobile apps can be similar to many e-commerce websites where the items are grouped and viewed via a vertical scroll. But, the products can also be displayed in a row with a horizontal scroll. To make the navigation intuitive, the last item in a horizontal row should be shown not in a full view to let the user see that this is the direction of scrolling. 

5. Check Out Screen

Nowadays, most of the shopping is done through smartphones. Therefore, it becomes crucial for companies to offer a smooth and convenient shopping experience to users. The checkout process is the final step during the buying journey of a user, and this has to be an easy task for them. 

The most fundamental aspect of a checkout screen is to have a form that captures all the personal data like name, address, contact number, card number, etc. Here, designers must ensure that their user data and sensitive information is secure. It can be callouts in a copy, icons of the famous brands who gave their approval or maybe even some certificate signs if there are such.

6. Splash Screen

The first impression may not be the last but is undoubtedly the most important impression. It influences the user’s opinion about a mobile application. When the user experience is pleasant from the very beginning of interactions with an app, there are more chances it’ll be more popular among users. That’s why splash screens should be given a lot of attention.

Splash Screen is the page in an app that demonstrates the main idea and features of the app. It must be minimalistic, displaying the logo, tagline, and name of a product. The fundamental elements must be kept in the middle of the screen for added visibility and a simplistic mobile UI design. The screen shouldn’t be shown for any more than 3-8 seconds. Users tend to get irritated after that. Also, it may be useful to show loading progress so that impatient users could know when the app will be launched.

7. Feed Screen

People typically use various social networking apps for communication and to remain updated with the news. You can take ideas from Facebook, wherein the feed is regularly refreshed, displaying the latest news and data related to the pages followed by the user. The mobile UI design should be simple and clear without a lot of fancy visual details. The stories can be presented one by one via a scroll. To make the navigation more intuitive, the next piece of news should be partially displayed.

We hope that these 7 most common UI screen designs will help you to get some clarity on how to get started with your app design. If you still have some doubts, talk to our experts NOW!!

Categories
Brand & Identity Design UX Web Design

CX vs UX: What’s the Difference?

CX vs UX

CX vs UX: User experience or UX is a well-known term. Designers, even non-designers, are well versed with the meaning of UX. But, have you heard of the term CX? It’s not as commonly used as its counterpart – UX, but is soon growing in popularity. CX or customer experience is often mistaken to be the same as UX. However, the truth of the matter is that both these terms are fundamentally different and need to be treated as two separate entities. 

It all starts with how we address and define our clientele. Our users are our customers and vice versa. That’s where we start believing that user experience is similar to customer experience. So let’s clear this confusion once and for all. Let’s understand CX vs UX.

User Experience

The concept of user experience is specifically connected to your product; be it the app, software, or website. The experience of users while interacting with that product is user experience.

The design, interface, usability, navigation, visual hierarchy, information architecture, etc. are all contributors to the user experience. It can either be positive or negative for the product’s users. 

Similarly, UX design is the process of designing products that are intuitive, easy, enjoyable to use, and solve problems. The aim is to develop something that solves user problems in the simplest and most user-friendly manner possible. Success rate, error rate, task time, click to completion and abandonment rate are some of the metrics used to measure UX.

Read about UX trends of 2019

Customer Experience

Customer experience, on the other hand, is a much broader concept. It encompasses all the interactions a user has with your brand and not just your product or service. CX interactions occur across multiple touchpoints, like your advertising, marketing materials, social media channels, pricing, sales process, customer service, and your actual product. 

Customer experience is concerned with customers’ perceptions of the organization and its services as a whole, not just the usability and functionality of its products. Overall satisfaction, Net Promoter Score (NPS) and loyalty are some of the metrics that define CX.

CX vs UX

CX vs UX: The above image clearly explains that UX is a subset of CX. User experience is the experience your customers have with your product, whereas customer experience is the experience those users have with your brand as a whole.

Importance of UX and CX

Both UX and CX are equally important in today’s world. Overall customer satisfaction is no longer dependent only on the quality of the product or service; it goes far beyond that. The experience and process of buying must be a satisfying one. Not just that, even the after-sales service and support plays a crucial role in setting the brand image.

Studies reveal that more than one-third of consumers walk away from a brand they love after one bad experience, and more than half of the consumers do the same after two bad experiences. Consumers are willing to pay more for a better experience, and this fact needs to get its due importance.

The good UX design is important because users will decide within just a few seconds whether your app, software or website is worth their time or not. On the other hand, good CX is important because it goes beyond the usability and functionality of your product, and serves as a key differentiator in a competitive market. 

Both CX and UX are independent, and therefore there can be scenarios where either one of them is good. For example – Good UX and bad CX, or, bad UX and good CX. Let’s understand this with two scenarios:

1. Good UX and bad CX

Tom wants to buy a music system. He goes onto an e-commerce portal. The online store has a fantastic UI and UX. The search engine is accurate and helps Tom to reach to his desired models within no time. He compares a few models and selects the best-suited one for him. The checkout process is also seamless. Within a few clicks, Tom selected a payment method and made the payment. Great!! His new music system is on its way.

But, when he received the package, he was unpleasantly surprised. The packaging was awful, and he received the wrong product. The model which he selected and the one that was delivered were completely different. He rang the customer support and was pushed from pillar to post before he could reach the correct department. The team was not able to track his order and told him that he would receive a call back within 12 hours. No phone call for two days. He got a call on the third day and was advised to send back the music system at his own expense, then only the replacement could be initiated. The entire process took three weeks.

Tom’s experience after placing his order was nothing short of disastrous. He poured out his grievances on the company’s social media handles, product page, and many other places. No matter how good the UX was, he has no reason to remember it now.

2. Bad UX and good CX

Now let’s see the flipside. Haunted by his previous experience, Tom decided to try some other e-stores to buy a professional camera. He browses a new portal that has a poor UX. The search engine wasn’t accurate; there was no option to compare products, and lacked details on the product pages. It took him a lot of time to buy the product, but he did it finally.

However, history repeats itself, and Tom again gets the wrong product. He called customer support and was delighted with their response. The team apologized for his inconvenience and quickly arranged a pickup of the product. In the meantime, they initiated the replacement process. Within two days, Tom received the camera that he ordered. Moreover, the company gave him a 30 percent discount voucher to make him feel valued. John is unlikely to remember the lacking user experience and is highly unlikely to leave negative feedback in the comments section of the site.

UX is one of the strongest influences on the whole CX, but both CX and UX play a crucial role in the ultimate success of a business. Lacking in any of the two areas can lead to a bad overall impression of the brand. Therefore, companies must optimize both of them to stay ahead in this competitive market. Have more questions? Talk to our experts.

Categories
Design Mobile Apps UX

5 Key Uses of Animation in Mobile App UI

Mobile App UI

The advancement of technology has led to several new improvements and trends in web and mobile designing. Animation was once a visual luxury but has now become a functional requirement. Users expect to face animations at some stage while browsing a website or an app. Animation infuses life into interfaces and makes them more rousing and visually appealing.  The proper use of animations accentuates the responsiveness of an app. In this article, we will discuss five critical applications of animation within a mobile app UI design.

Animation infuses life into interfaces and makes them more rousing and visually appealing.  The proper use of animations accentuates the responsiveness of an app. In this article, we will discuss five critical applications of animation within a mobile UI design.

1. System Status

There are plenty of tasks and processes like downloading and uploading data, calculations etc. that continuously run in the backdrop while the app is running. While these processes run in the background, users often feel that the app is frozen, as there is no activity at the front end. You must always indicate the status of all the ongoing processes through visual signs of progress. It provides a sense of control over the app to the users.

Page loading time is unavoidable, however, it is a very stressful time for users. Using animations can’t shorten the loading time, but can provide comfort to the users while they wait. Creative progress indicators can reduce a user’s perception of time. If users can watch something visually pleasing, while they wait, they are more likely to divert their mind on the animation, rather than the wait time.

Similarly, “pull down to refresh” is also a well-known system status indicator that reloads the page. Pull-to-refresh animations should match the design outline of the app. Movement and visually pleasing items naturally draw attention and create interest. Animating your notifications is a pleasant way to notify users about things, without hampering their experience.

2. Visual Feedback in Mobile App UI

Visual feedback is critically important for any user interface. It helps users to know and understand their current context in the system at any given time. User interface elements like buttons and controls should appear to be tangible, as they interact with them in the real world.

But, bridging the gap between the physical world and on the web is challenging. Visual and motion cues must immediately recognize the input and animate in ways that appear to be direct guidance. Animations enhance various points of interaction and reinforce the actions taken by a user.

3. Structuring Information

Animation allows proper structuring of information across the app. An animation draws users and shows what content to look for and where can it be found. The menu bar is one of the most common places where this can be implemented. 

There are many elements on the main screen of the app. When we activate one of them, the app should change the picture and display a whole new app section based on the selection. Animation helps users to know that it is the same element but with different form and scale.

4. Navigation & Transitions in Mobile App UI

Usually, users take the help of menu bar to navigate inside an app. A lot of apps have a complicated structure to show the list of app sections or features, which is confusing for users. Animation works as a visual navigator. 

A user should notice a changing picture on the screen while selecting or changing app sections. This lets them know that they are navigating to a different section or using a feature. Animation is a great way to transport users reasonably between navigational contexts. 

Read more about Mobile App Navigation

5. In-app Guide

Some apps have a more complex structure compared to others. If you don’t want to scare-off or irritate your app subscribers, you should clearly explain to them how an app works at the very beginning. Animation comes in handy here. A user gets brief instructions about the app in very less time via animations. Usually, an animated guide opens up when the app runs. However, users should have access to the guide whenever they need.

Animations are really pretty, but as mentioned earlier there role is no longer confined to adding beauty to an app. So make animations with purpose and use it in the app UI design to simplify user interaction with the user interface.

Let us know if you are looking for designing your new or existing mobile app. Our UI and UX team will be happy to assist. Contact Us today

Categories
UX

5 Mobile UX Fails Hampering Your Ecommerce Store

Ecommerce Store
Ecommerce Store

Optimizing your ecommerce store for mobile isn’t a choice anymore instead it is a requisite now. If you have not done it yet, then do it now. A recent study by the search engine giant, Google reveals that users are likely to turn into customers if they are treated with a good mobile user interface. And the reverse effect is also on the cards if a glitchy UX is at their disposal.
This is a serious issue to address for the business owner like you who surely don’t want to lose the potential buyers because of a faulty user experience. Or can you afford it?
Here, I throw another statement depicting the growth and the use of mobile-optimized websites that’ll make you do efforts in restoring the hampered performance of your mobile ecommerce store- 78% of the total searches done on mobile for local business convert into purchases.
Convinced? Surely you are.
While you optimize your ecommerce store for mobile, there is a high probability of you ending up with these UX fails. Gain insights and try to avoid them.

1. Confusing Layout

The things in mobile don’t work the same way as they do in the case of a website. Presenting the information to the users on a small mobile screen isn’t easy. Ecommerce websites may have hundreds of pages, which ask for a well-thought navigation and search. Knowing what users want is very important. For an ecommerce store, it goes like this,
Find a product > Details > Shipping information > Buy now > Checkout
If you could provide these details in a clean format to your mobile device users then it is job done. Else, be prepared for quick abandoning. It is advisable to keep things as simple as possible with mobile-friendly navigation options and smart search bar.

2. Bad Placements

You can’t just carry forward the feel of a desktop version of a website to its mobile counterpart. Both of them have their own characteristics and trying to mix them up can mess it up completely. The elements as placed on desktop version can’t go directly to a mobile optimized website. There is a difference between a mouse click and a finger tap.
The size and space around the tap targets should follow the standards because fingers aren’t as precise as mouse pointers. It is quite annoying when you end up tapping something that’s unintended on multiple occasions- leading to frustration that can drive your users away.

3. Replicating The Desktop Forms To Mobile

It’s understandable that you need user as well as shipping information, but filling those long forms that work on desktops is such a pain when we talk about mobile device users. You can’t just replicate the desktop forms for mobile device users. They need to be modified with only the necessary fields.
You could also include an option of social login for quick information gathering and registration. This can play in your favour as you get the desired set of information while the users don’t have to go through the typing phase for filling up the entire form.

4. Checkout Optimization Failure

For customers to be happy you need to take care of mobile checkout. With a limited display, you need to play it smartly. Display the information on the checkout page that really matters. Delivery and shipping information should be pronounced and if you ship internationally then your checkout should detect the right locale and show the currency in the right format.
Without too much fuss, the checkout should be distraction-free, no ads and no related products. It should just review the items bagged by the user, cost to be paid and payment options. Additionally, guest checkout option can help you steal the show.

5. Cluttered UI

The price paid for a good mobile interface won’t go in vain instead it will only help in providing an excellent experience to the users. However, it doesn’t help every time but it certainly matters. You need to look out for typography, font size, color combination, white space, headings and more when you design the mobile UI. Plus, the placements of elements like buttons, links, product images and other graphics should be thoughtful ensuring that they don’t muddle up the entire UI.

To Conclude

Mobile has its own feel, which can’t be compared to that of a website. Think about offering a seamless experience to the users and not getting hung up with the less important aesthetic appeal. A good UX helps users trust your website that eventually results in a purchase. In the end, that’s what is desired. Reach out to our experts today and get all your mobile UX requirements addressed.