The ways in which your customers interact with your applications are constantly evolving. As infrastructure improves globally and new devices are introduced to the market every year, it’s important that your products and services keep up with rapidly changing customer expectations.
Responsive UI
A responsive UI seamlessly adjusts and scales your graphical user interface to fit all sorts of screen sizes.
Aspect Ratios
Modern-day devices provide a wide range of aspect ratios that include traditional computer screens (16:9), ultra widescreen displays (21:9), smartphones (19:9), and tables (4:3, 16:9, etc). Many devices like the Galaxy Fold boast folding screens that support aspect ratios from 5:4 to 24.5:9 on the same device.
Screen size has always been a moving target, with new devices constantly releasing with increasingly large screen resolutions. As devices evolve, your customer will expect your application to keep displaying information in an intuitive and pleasing way.
Navigation
The most concise applications still require some sort of navigation system, whether it is to guide a user through a wizard-like interface when adding a new widget, or allowing them to jump into their settings at any point in time.
Efficiency is Key
You can provide a path of least resistance by ensuring that navigation throughout your application requires as few clicks or taps as possible. These can be assisted through the use of:
Breadcrumbs, providing the customer with a visual representation of where they are and where they came from.
Gestures, allowing users to use traditional navigation gestures on smart devices such as swiping left or right to go forward or back in the flow.
Hamburger Menus, a consistent area where a customer can jump to other navigation flows in your application and help them get unstuck if they are lost.
Tabs, which allow a customer to more easily multitask by maintaining multiple states.
User Input
Traditional keyboard and mouse input is starting to trail behind alternative input methods such as touchscreens, so it is important that your application works as seamlessly as possible regardless of how the user interacts with it.
Account for all types of input
It’s important to consider interruptions to the user flow such as virtual keyboards or additional menus, which may appear when a customer is using a touchscreen or other type of input that would not normally be present with a keyboard or mouse. Your responsive UI should react in a way that ensures content is still easily visible in these states.
Less Traditional Input Types
Less traditional types of input can greatly improve your application’s user experience. For example:
- If your application calls for customers to provide pictures, allow them to use their device’s camera within the app and upload the pictures in one action, instead of requiring them to leave your application to use the camera, return to your application, and select the image from a photo library.
- Speech-to-text functionality can greatly assist customers when filling out forms.
Network Connectivity and Data Usage
Customers are accessing your applications from all over the world with widely varying degrees of network speed and stability. You cannot safely assume that every customer will have a fast and stable connection; some connections may be very slow or drop frequently. Ensuring your application functions in these conditions is key to providing a great customer experience.
Data Usage
You must also take into consideration that not all customers will have unlimited data connections, and minimize how much information is sent to, and received from, your application.
Network Connection Management
Robust network connection management can help you improve user experience by managing connection drops or slow network performance in the background, while allowing the customer to continue working with your application.
Asset Bundles
Bundling your downloadable assets together and letting your customer choose when/where to download them (on wifi for example) ensures your customer will not use up limited mobile data or bandwidth.
Secure Caching
Securely caching data on your customer’s device and releasing incremental content updates ensures customers only download what they need once. This improves performance and reduces data and network connectivity requirements.
Availability
If your application does not have a frontend, for example an API that provides a set of services, or is private / for internal use only, limited availability is usually acceptable.
Universally Available
With the increased usage of smartphones and tablets, your customer will expect your product frontend to be available across multiple types of device.
Whatever your product is, be it a mobile application or a website, it’s important to provide enough flexibility that your customers can access it wherever they are.
Customer Expectations
As devices and network infrastructure continue to improve, so will a customer’s expectations of an application’s ease-of-use and performance.
Interface Guidelines
Applications should follow interface guidelines provided by device manufacturers (i.e. Apple Human Interface Guidelines, Google Design) to ensure interactions with your product are familiar and intuitive to the customer.
Response Times
Response times are also key to keeping your customer engaged with your product. Sometimes your customer will have to wait if a request must be processed before they can proceed to the next step. In these cases, use a visual aid like a spinner to let the customer know that something is happening and the application is not frozen or unresponsive.
Accessibility
Not all of your customers will be using the methods described above when using your product. They may be using assistive technologies to interpret and navigate throughout your application.
Types of Assistive Aids
Some of these types of aids can include:
- Visual aids: High contrast or magnified viewing
- Tactile: Braille screen reader and input
- Audible: Content and navigation narration
Standards
Various sets of standards have been created to support assistive aid technology to ensure that all of your customers can utilize it in a manner that meets their needs. These standards include:
- ARIA – Accessible Rich Internet Applications
- Apple’s Human Interface Guidelines – Accessibility
- Google’s Material Design – Accessibility
Consistent Help
If a customer encounters an error or would like to get some help within your application, make it as easy as possible. Designating a consistent area such as a dedicated menu or button for help/support is a great idea.
Use What You Know
If your application encounters an error while your customer is in the middle of a flow, use a modal popup to allow the customer to report the error and send the state information (anonymized of course) regarding what the customer was doing, where they were coming from, and where they were going.
This lets the customer know that you should have all the information required (often, more than they could have supplied on their own) to troubleshoot and address the issue. Even better, you could supply them with a link to track progress on the issue.
Dynamic Help
Bundling basic (searchable) help documentation with your application is a must, and should assist the customer with any typical scenarios they may run across.
You can enhance this documentation by also providing a help system that evolves over time as customers use your application and identify new issues or areas of concern.
Live chat help is a great option depending on the nature of your product as well.
Looking Forward
UI evolution is not slowing down. Customer expectations will continue to increase as mobile device usage and global connectivity expands. Keeping on top of your UI and consistently revisiting your application’s UI flow will let you rise among the best.
For insights into how we at Binary Star build UX research and design into our Agile work process, check out this post by our product specialist, Stuart Braidwood.
Would you like to learn more about our services? Contact us to find out how our development expertise can benefit your business.