Helping you drive digital innovation
Subscribe
RSS Feed of the Mendix Blog
Thanks for Subscribing

Keep an eye out for Mendix resources coming straight to your inbox.

Form and Function: 4 Essentials to App Design

on April 30, 2015

Share:

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.

Understanding the essentials

post-ux-best-practiceForm 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.

Best practices for delivering amazing design

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.

  1. Look to others for inspiration

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:

  1. Consider where people will use your app

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.

  • For desktop, think about the number of screens your users will see before getting to their intended goal. Obviously the fewer screens, the better. You can enable your users through site architecture and clear navigation.
  • For mobile, think about how touch may change the experience. You don’t want users to constantly tap through to find information. Instead, consider what secondary information you can hide. This becomes an exercise of hierarchy and content prioritization (whereas on a desktop, you have more real estate for secondary content).
  • For both desktop and mobile, remember that simple is always best. It’s okay to pare down across both sites if it means a consistent experience across all channels and devices.
  1. Outline your user paths for navigation

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.

  1. Don’t forget beautification at the end

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.

  • Don’t underestimate the inherent value of colors. Make sure to have a basic level of color theory understanding. This may include color schemes, complementary colors, the emotion or the psychology of colors.
  • Make sure that your typography has hierarchy, especially appropriate headlines and body copy.
  • Remember that white space is a good thing. You don’t want to crowd a page with too much information. It will distract the user and take away from the goal of that page.
  • Test everything. How users interact with your application will help you determine what works, what’s missing, and potentially what you did wrong. Don’t make the mistake of thinking that you are an end user. It’s important to get unbiased insight regarding how people see your app – and then adjust from there.

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.

Get styling in Mendix!

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.

Mendix-styling-basics

Subscribe to Our Blog

Receive Mendix platform tips, tricks, and other resources straight to your inbox every two weeks.

RSS Feed of the Mendix Blog
Mendix

About Mendix

Mendix drives digital transformation by empowering customers to bring new digital products to market and developing applications at the speed of ideas.

| Twitter
  • KenethTwesigye

    Wow! Madam Gwen, this so great and beautiful. I used to find a lot of issues with art and design yet I believe am creative. But I guess this is second step to think about my art. Thank you

  • gwennasaurus

    Thanks, Keneth! Happy to have helped! 🙂