Mendix on April 30, 2015
Apps are everywhere – and they’re not going away. So it’s important that businesses learn how to harness their potential to effectively engage customers and streamline internal processes.
To date, the conversation has mainly been focused on how a business can deliver the types of apps required to support business goals. But as exposure for new cloud platforms continues to rise, fewer and fewer question how to create their digital reality.
And that brings us into what I believe the discussion should be today – around what an application should look like. Now that business and IT teams understand the value that comes from rapid application development technology, it’s time to share some of the basics related to form and function – as these are the essentials to application design and will help secure user adoption and enable faster ROI once the project has launched.
Form and function make up the basis of the user interface (UI) and the user experience (UX). Often times, people confuse UI/UX work with beautification. While beautification is a component of design, the overarching goal must always be to deliver an experience that the users want and need.
To me, context is everything. If you start a design without context, it’s unlikely that you’ll end up with an application that’s useful. That may seem harsh; however, it’s true. You need to first understand what users need from the app and how they expect to interact with the app to achieve that goal.
From there, UI/UX is all about solving that problem in an efficient manner. Beautification comes at the end – and should never take away from the UI/UX design goals.
In Mendix’s rapid developer profile series, we hear a lot about community members who love to solve business problems. Inherently, creating the UI/UX is part of this process, although it often goes without saying. So to help those who may be new to our community, I’m going to list a few best practices to help non-designers ramp up and deliver amazing UI/UX within their Mendix apps.
I often get some of my best ideas by learning from my peers at other companies. I see what they’ve built, get inspired, and then incorporate new design elements into my own work.
You can find inspiration from basically any website or app. Consider how they attempt to serve their users’ needs. Why do you think they did a good job? What could they have done differently to make it better? Is it just beautiful or are you interacting with the design in a meaningful way? If it functions great and serves a purpose, then that’s where you start!
Everyone will have different sources for inspiration. Here are a few of my favorites to get you started:
More and more, I’ve seen that businesses need to engage their audiences across platforms and devices. For example, a person may initially look at your app on his or her mobile device, move to a PC, and then even look back at the app from a tablet at a later date.
With multiple use cases to consider, you need to plan for primary and secondary focuses and adjust layout based on where your users’ eyes will go first. Here are a few considerations you’ll need to incorporate into your design strategy, based on the device type.
I mention this briefly in my second best practice but think it deserves its own section. It’s important to consider how users will interact across your entire application and help them find the easiest path to locate the information that they need (or perform the action that they need).
Work with your project team to identify clear goals for every page within your application and then align content based on how they help achieve those goals. And remember, the goal of each page should help achieve the goals of the entire application (it’s all about context again!).
Once you have this information, create a navigation pane to help users quickly accomplish their intended goal. This concept is generally referred to as the hierarchy of the application. Ultimately, the most important user goals should be the easiest for the user to locate. You can also create groupings of similar elements to further aid users in their search.
Once you have the UI/UX determined, remember that beautification is still important. I’ve seen designs with clear UI/UX miss the mark due to misaligned beautification and then beautiful designs confuse users through messy UI/UX. Here are a few tips to keep your beautification efforts clean and effective.
To showcase the importance of UI/UX best practices, take a look at this example. I recently ordered a new pair of boots on Amazon.com. As I was selecting my size, I received the following prompt suggesting another size:
Why is this so great? It’s anticipating my needs before I know them and solving a problem before it even begins. Amazon knows I’m a size 7 because of past purchases. Other customers who historically purchased a size 7 selected a size 6.5 for this product, indicating that I may also need that size.
Having even one bad customer experience could be enough to prevent me from ever ordering from Amazon again. So, the company ensures a simple and helpful purchase process. This is great UX.
There are many additional intricacies to UI/UX work, but by focusing on form and function of your apps, any non-designer can deliver amazing apps that solve business problems and delight users. My tips are meant to help broaden how we look at the concept of design. From there, it’s easy to start styling in Mendix.
For more on this topic, watch our expert webinar session to see how you can create new themes, change elements, and work with CSS.
Receive Mendix platform tips, tricks, and other resources straight to your inbox every two weeks.