Part of the reason digital space devoured our day-to-day life in less than 50 years is that humanity was capable of making that transition smooth. How? The answer is excellent user experience. As Donald A. Norman puts it, "Good design is actually a lot harder to notice than poor design, in part because good designers fit our needs so well that the design is invisible." This quote alone explains the reason we are so connected with our phones. Such a small device has the ability to keep people engaged for hours without taking a break. We nailed the design so well that a product became a part of our personal, social, and professional lives without us actually noticing it. According to Simform, people of age 65+ spent on average 51.4 hours per month using mobile apps while younger generations at the age of 18-24 use them more than twice as much - 112.6 hours. The number of app usage grows as well. iOS and Google Play app downloads have increased by 156% throughout the last six years (2015-2021). What's also interesting is that 80% of all enterprise mobile apps get abandoned after the first use. Why? The answer is bad user experience.
Less is more. However, don't take this phrase too far because you still need to define boundaries in terms of the app's intended purpose. When you create a mobile app for people, you introduce something new to their lives. People love new experiences, but they are very critical when it comes to the assessment part. The reality indicates that people don't like two things - sudden changes and being manipulated. In order to retain the user's interest, you have to make the app intuitive and give the end-user freedom of choice when using the app.
Often, commercial apps overdue the task of delivering the message to people by packing the screens with tons of text, pictures, or features. If a particular element is proven to be effective, it doesn't mean you have to use it everywhere. Let's look at some of the examples.
Here we have an app that allows you to schedule events and organize your tasks using a variety of parameters. The first UX/UI design problem that can be seen here is the amount of content displayed on one page. The size of the tasks on a calendar is so small that I need to squeeze my eyes to see what is scheduled on a particular day. If I have multiple tasks in a day and intend to see the details of one of them, the chances that I press the wrong one are incredibly high. The same applies to the bottom part of the screen that lets the user configure the time period for which the tasks are scheduled.
Another critical moment is the image behind the calendar, which disturbs the attention on the tasks. The number of different and highly saturated vibrating colors create the impression of movement. It irritates the eyes, making an example of a bad user experience. Another color problem that the image brings is the correspondence by color to the labels of the tasks (blue label on blue water), increasing the chances of overlooking the task.
Simplicity in design doesn't mean there must be content gaps in your mobile app. Whenever the end-user navigates the app, it is crucial to provide the information the person is looking for. Every application has its purpose, and your goal is to lead the user from the start until the end through the cycle of interactions. Let's say you're in the trucking industry and build a mobile app with a load board. Since you're making a product for drivers, brokers, and shippers, ask yourself questions from the position of each of the roles - "what are the tasks that are an essential part of my job?", "What are some of the problematic areas of my job that should be improved?"
Making Things Imperceptible
We already discussed that leaving room for customers to explore is a good thing; however, if you implement a sophisticated feature that the user cannot intuitively understand, you end up wasting your time and effort. Let's take the iOS 12 update, for instance. Apple has added a feature that enables users to move the text cursor by pressing and holding the space button. This would be considered a non-mobile app-related case, but it explains the concept.
When Krissy Brierre-Davis, a blogger from Atlanta, mentioned the feature, the comments section exploded with fascination because most people didn't know about it. The feature is great, yet many iOS users remain unaware of its existence. Making hints inside the app could be the solution. For instance, after the update, Apple could introduce a "what's new" button near the changed or added elements. Another way to handle the problem is to do better marketing by, for example, using social media channels to spread awareness about the new functionality. For instance, TwitterSpaces uses social media as one of the channels to communicate the newly added features to its audience.
Lack of Space
Mind your margins, paddings, white space, element sizes, and typography. If you are looking for balance, the best way to approach it is to use the good old spacing rules. These are different for all of the app's elements - icons, images, texts, sliders, labels, notification windows (alerts, updates), bars (navigation bars, search bars, sidebars, status bars, tab bars, toolbars), sliders, popovers, and others. Each of these components uses specific rules when it comes to positioning on the screen.
For instance, Material Design suggests that touch targets such as icons or buttons should be at least 48 x 48 dp with at least 8db of space between them. When it comes to text, make sure you select the proper tracking (horizontal spacing between the characters), leading (vertical spacing between two baselines of type), and weight (thickness of font).
The image on the right has nailed the weight hierarchy, but both the leading and weight are too small. The first image nailed all of them.
Many resources can help you understand the standards and keep your UX/UI app polished and neat. If you are building an iOS app, refer to Human Interface Guidelines by Apple. For general UX/UI and design guidelines, Material Design would be a good spot.
Neglecting The End-User
One of the biggest mistakes you can make during mobile app development is to ignore the people you're building the app for. It may sound dull, but it's what happens with most of the apps that fail. Before designing the app, you need to do thorough research in terms of the likes and dislikes of your target audience. For example, the logic and features behind a project management app for internal use by your employees would be a totally different product than the project management app intended for the customers. Although you can force your employees to use the app with bad UX in the first case, it will convert into more extended adaptation periods, decreased efficiency, and eventually monetary losses due to operational performance issues.
There are various ways to narrow down the preferences of your target audience. These tools include user groups, user personas, online surveys, interviews, usability testing, and A/B testing. The latter two would be used to improve the existing product; however, the first four can help you prove your hypotheses. First, identify your end-user. If it's your employees, invite people who will be using the app. Discuss questions relevant to your future product, ask them about the problems they experience in their workflow, and record the responses. Once you have enough data, you can cover the most common issues with the app. Test the app on your audience again and see how they react. You will make a valuable and effective custom product to the end-user through deep research, analytics, trials, and errors.
Before you say that performance is a non-UX/UI-related subject, let me, first of all, agree with you and propose that UX/UI can be a part of the solution for performance-related problems. User perception is a critical component of the overall experience with the app. There are certain tricks and tools we can use to get around some of the optimization issues.
Let's say we have a mobile e-commerce application with product catalogs. Whenever a user taps a section in the catalog menu, a window with 50 products pop-ups. Since each item's image needs to be downloaded and cached before it appears on the screen, someone with a slow internet connection speed may see chunks of text separated by large empty spaces due to the absence of images that are still loading. Here, the user understands that there's a problem since nothing else is happening on the screen. However, the app can use UX/UI tricks and make the transition between the pages longer, therefore, saving time for the app to download the images while the transition is happening.
Real speed remains the same in this case because the transitional UI elements do not improve the loading speed; however, the perceived speed is faster because the transitional elements occupy the user's mind. The first images load successfully before the user sees the screen, and then, the rest of the images begin to load before the user scrolls the page. A good rule of thumb is to make the transition no longer than 3 seconds. A study made by Google shows that around 53% of users abandon the app if it takes more than 3 seconds to load.
Optimizing Performance in Flutter Mobile App Development
Optimizing performance and efficiency is crucial in Flutter mobile app development. Key approaches and recommendations include:
Hot Reload: Speeds up development and bug fixing by instantly applying code changes without restarting the app.
Asynchronous Programming and Network Optimization: Using async programming and packages like dio for efficient network operations to speed up responses and prevent UI blocking.
Widget Optimization: Minimizing the use of unnecessary widgets and employing keys to avoid random widget rerendering, reducing the number and complexity of widgets for better display and performance.
Animation Optimization: Utilizing tools like Lottie or Rive for animations while avoiding excessive animations that impact performance.
Image Optimization and Caching: Employing compressed and optimized images and caching to reduce download size and network resource usage.
Project Structure Optimization: Modularizing the app and managing project structure effectively to improve build time and reduce the code load.
Profiling and Performance Optimization: Using profiling tools like Dart DevTools to identify and fix performance bottlenecks, enhancing app speed and responsiveness.
Applying these strategies helps developers ensure that their Flutter apps perform efficiently and reliably across various platforms.
Design consistency is a dynamic subject. People constantly change their behavior. A UX/UI expert or agency will always listen to this behavior using all the available tools and resources. Wezom designers are no exception. We are always listening and adapting our practices to what is relevant and practical. With each new client, we gain valuable insights and data that we transfer onto the next project.