Comparing Different Approaches to Develop Mobile UI for IoT Application

Any application or software relies on the user interface (UI) for effective communication between man and machine. From the earliest graphical user interface or GUI up to the latest widgets and apps, the success of an application or software hinges on the effectivity of the UI. A carefully programmed software will be useless if a human user cannot properly understand or grasp how to use it.

Computer or Software UIs have evolved through the years and IoT interface, in particular, has moved from a simple click and drag approach to more intuitive and sometimes radical designs.

By the end of this article, you will learn the importance of UI in the success of mobile app, especially those use for IoT services.

Why is UI important for IoT Apps

A functioning UI is an important part of a software as it provides a visual representation of the controls and features. Without UI, there would be no possible interaction between human and computers because of the vast difference in language - humans see, hear and speak, while computers only have 1’s and 0’s.

IoT UX or User Experience will be incomplete or lacking if the UI design is poorly made.

The job of a UI designer is to make things easier for the IoT app user, making the overall user experience as frictionless as possible. There are now three common mobile UI for IoT approaches in design, let’s discuss each and delve into the details.

3 different approaches to UI development

IoT apps are more than ever reliant on UI development, a good UI design will yield a usable app but a great UI design will make the app sell. Here are the approaches on how you can design the UI of your IoT user interface.

 

 

Design for aesthetic look

All things being equal, great looking IoT apps will be more attractive and have more perceived value due to its pleasing look and feel. This is for customers who seek products that are not just functional but “pretty” as well, with the latter sometimes being more important. This design usually focuses on what users want to see and feel when using the IoT App.

The use of images, videos and other design elements can be used components to tell the app’s story and value.

Features

• Good looking visuals, usually colorful, and eye-catching
• Icons, avatars, and fonts are exaggerated, loud or specially made to suit the “personality” of the brand or company
• Can influence and trigger positive emotions (e.g. using funny and playful avatars to trigger happiness)
• Effective at first impressions

Pros

• Pretty and beautiful apps are perceived as easier to use
• Perceived as having more value and feature-rich
• Can attract more customers
• Will appeal to a wider range of customers
• The design might shield or make customers tolerant of minor app problems

Cons

• Can add to the development timeline due to additional design effort
• Focusing on aesthetics instead of functionality might result in an inferior app
• Usually too costly or take too much time to include in the MVP
• If special fonts are needed, this would require additional design cost

Example

The Nest Lab App is a creation of Nest Labs, a technology company based in the USA and makers of IoT home-based products. Some of their popular products are the Nest Learning Thermostat, Nest Protect smoke and carbon monoxide detector, and the Nest Cam security cameras.

All their IoT products can be viewed and controlled using the Nest Lab App with each having its own dedicated sub-portal. Notifications from all the devices can also be configured through this single controller.

The app designer created different looks for each product portal and utilized majority of the screen to highlight the most important aspect or value - temperature level for the Nest Learning Thermostat, security video feed for the Nest Cam security cameras, and gauges to show smoke and carbon monoxide levels for Nest Protect.

Each product has large and colorful UIs and can also be viewed at larger screens of tablets or small screens of smartwatches. You can check out the IoT user interface designs of an app for the Android version and the IOS version.

Design for simplicity

This is the minimalist approach to UI designing which focus on simplicity and elegance to highlight the main points of the app. This design makes use of colors to convey emotions or actionable items (e.g. red for crucial buttons) but the developer keeps the use of these colors at a minimum.

There has been a noticeable shift towards the minimalist app design due in part to its focus on the most important (usually just one) value proposition, latching on users with short attention span.

Overall, similar shades of color are used to convey uniformity and images are kept at a minimum to lessen distraction. Designers also use fonts and typography also serves as a major visual component when designing for simplicity.

Features

• Flat design, use of simple 2D visuals on icons and buttons
• Simple images or simple color palettes as background
• Use of monochrome or light colors
• Only the most important items are highlighted
• Unnecessary elements such as flowery designs, buttons, and excess wording are omitted to avoid user distraction
• The design is useful when the app is doing only 1 function or interact with only 1 IoT device

Pros

• Effective at conveying ease of use
• The flat design and low use of images will make the app light in file size, making it easier to download and run
• Simple buttons and images will not clutter the app, giving it more white space for future expansion or addition of features.
• The simple design will make the app more adaptive to different screen sizes

Cons

• Danger of oversimplifying and missing out on showing features or documentation (e.g. no or very limited FAQs)
• Placing a hard limit on the number of navigation options might limit functionality
• There can be a connotation that the app is not very useful due to its simplicity

Example

The Canary App is another mobile IoT interface for the home security market which used a simplistic approach for their UI. Typical of minimalist UI design, the Canary App uses simple base colors, Black and White, as major colorway.

The app also use just 3 feature icons per screen, thus allowing access only to the most basic and important features. You can also see that there is considerable blank or whitespace, which is a staple among simplistic UI designs.

The white space is a contrast to the dark lined icons and dark framed video feed, allowing the icons and video to stand out. This also gives a focused IOT user experience as the app centers on the video feed, which is the main service offered.

The small number of screen elements make it easier for the app to have a seamless display on smaller screens. You can check out the Canary App by downloading their Android version and IOS version.

Design for technical completeness

This approach for IoT UI designing focuses more on functionality and presenting the technical advantages of the app. This design also uses simple buttons, avatars, images, and text, but not for minimalist reasons. The use of small and simple screen elements allow the app UI designer to display as much information and features as possible.

This design would seem cluttered even if done properly since the main purpose is to present as much data and options as possible. This is especially useful for apps that present a lot of information which the proponent or app owner think is relevant to the user.

This is common for apps that show a lot of gauges, measurements, and figures like financial apps.

The development of these apps must take into consideration the end user’s level of understanding and expertise on the topic or niche being serviced by the app.

Users that are not as knowledgeable might have trouble learning how to use the app due to the steep learning curve compared to the first two design approaches.

Features

• The app will have multiple use case or functions
• Presence of multiple icons, avatars, buttons, and text on a single screen view
• Most of the time, users need to scroll up/down to view all the features and information
• Usually with a detailed FAQ or instruction page
• Use of different colors or frames to separate actionable or clickable items
• Some designers use drop-down menus or pop-ups to show more options on a single screen view

Pros

• Less chance of developers leaving out features or information
• The high level of expertise needed to effectively use the app will appeal to experts
• Effective for complicated products or services that have multiple use cases

Cons

• Even good designs may seem cluttered
• The amount of information and choices present can distract or confuse users
• A steep learning curve or not user-friendly
• New users can be prone to errors
• Even with an intuitive design, the number of elements present on one view will make the app look complicated
• Data processing can take time due to the complexity

Example

The IFTTT App (short for If This Then That) is a tool that you can use to chain together different apps or web services to create a process. Two or more apps or web services can be combined, the process will run once the initial app or web service triggers the next one in line. The triggers can be pre-set conditions, each condition triggering the next until the IFTTT process is complete.

The IFTTT app supports hundreds of apps including Facebook, Gmail, Instagram, Google Drive, and Twitter. The app can also be used in combination with IoT devices such as Google Home, Nest Lab suite of IoTs, and Amazon Alexa. Interacting the native apps of these IoT devices with IFTTT is also possible.

Using IFTTT, you can set hundreds of processes which can automate tasks such as turning on the air conditioning and lights when you are near your house. This process can be done by making your Google Home detect your location via Google Maps, If you are within the set distance, Google Home will then activate the air conditioner connected to an IoT controller.

It sounds a little complicated because it actually is and it will take time and practice before you can effortlessly use the app.

To have a full IoT user experience of an app, you can download the IFTTT Android version or the IOS version.

Final thoughts

The increasing use cases based on an IoT solution are spurring innovations in UI designing. A few years ago, most of these user interfaces can only be found in science fiction movies. But technology has caught up with story writers and fiction has become reality.

In this digital age, a better app is the one that is appealing, easy to use and effective at the same time. In other words, it should strike a perfect balance between aesthetics and usability.

Which design approach best aligns with your web development project needs?

 

If you need help in which UI design approach is best for your IOT app project, please contact us and let our IoT UX/UI design experts study your requirements. We can then offer you possible options and if you wish to engage us to develop your app, we promise to make it at the quickest and economically reasonable way possible.