Technology

UI / UX Design

Web Apps

Creating High-End Applications by Blending Functionality and Emotion

January 21, 2020

Application design should focus on creating an experience that users remember.

The key question to ask is why they will remember it. Is it emotion that invests your users? Or does functionality play a significant role as well?

Functionality should always be placed front and center: It ensures that your application works. But that’s not to say that emotional effect isn’t important. That’s why we recommend creating a blend of functionality and emotion in high-end applications. This formula provides the special sauce that makes your application stand above the competition.

Here are some of the key areas to focus on:

#1 Home Screen/Dashboard

Jacob Nielsen refers to the homepage of a website as “The most valuable real estate in the world.” The same wisdom holds true for applications. The home screen or dashboard of an application should introduce users to what the application is (purpose), what it does (functionality), and why users should care (how it solves a problem).

First-time visitors form a positive or negative impression of a digital experience in less than five seconds. And since your home screen or dashboard is the gateway to all content, it should communicate its relevance to users within those few seconds.

Successful Implementation:

  • The home screen clearly communicates what the application is and what it does.
  • The application has high-end branding.
  • In just a few seconds, users understand key functionality, leading to further exploration.
  • First impressions are overwhelmingly positive

#2 Design Aesthetic

Aesthetics play a large role in determining usability. Buttons and screens that are consistent, clean, and attractive will be better received by your customers. Professional visual design communicates both simplicity and sophistication, without unneeded complexity.

Successful Implementation: 

  • The interface of the application is attractive and draws a high level of interest.
  • Key focal points are communicated with clarity.
  • The design is accessible for users with a variety of different needs.
  • A well-designed style guide is used to ensure consistency, simplicity, and sophistication.

#3 Interactivity

Steve Jobs once stated, “It’s not just about what design looks and feels like. Design is how it works.” While “how it works” boils down to much more than interactivity, this aspect can make an application more usable – and in many cases, more delightful. We recommend viewing interactivity as a tool that allows you to improve both form and function – how an application looks and feels, in addition to how well it works.

Successful Implementation:

  • Interactivity is used throughout the application in a way that enhances usability.
  • Motion draws attention and interest from users.
  • The application communicates with the user meaningfully and provides feedback with micro-interactions, contextual transitions, and animated layouts.

#4 Support/On-boarding

90% of all downloaded apps are used only once and then eventually deleted by users. People often abandon apps because of poorly-designed interface or negative overall experience. Instead of having problems solved, people are confused by menus, screens, and buttons.

Does your on-boarding or support center need to be as robust as that of Salesforce? Only if the workflow is similarly complex. The good news is that support and on-boarding can be integrated with tooltips, wizards, and inline learning. When included, support and on-boarding should supplement the application, not distract users away from it.

Successful Implementation:

  • On-boarding is integrated in an engaging way and replaces the need for training.
  • In-line learning, tool tips, and text on the interface are included and well executed.
  • The on-boarding experience feels congruent with the user experience, creating a sense of immersion.

#5 Guidance

In regard to web design, user experience pioneer Steve Krug writes “Since a large part of what people are doing on the web is looking for the next thing to click, it’s important to make it obvious what’s clickable and what’s not.”

It’s important to balance convention and innovation when designing an application. This eliminates unnecessary cognitive load. While thinking outside the box can be effective, ease of use should always be prioritized. This comes from guiding users through the experience with notifications, and other visual clues.

 Successful Implementation:

  • Common tasks are exceptionally easy to complete.
  • Complicated tasks provide clear and easy access to instructions and help (FAQ, support, live chat).
  • Design elements – buttons, links, modals – are clearly differentiated.
  • The application accommodates language/accessibility guidelines.

#6 Search

For applications heavy with content and functionality, a search feature is important. In applications – as with websites – new users often see search as a universal starting point. For returning users, search functionality provides a helpful shortcut to the content or workflow they need to access.

Search functionality can be as simple as a search bar, with basic aids such as autofill

suggestions and/or spell check. More advanced search functionality includes accommodation of natural search language or robust settings.

Successful Implementation:

  • Search is included, but the application caters to a variety of workflows.
  • Search is intuitively located (top right or centered) and is properly labeled.
  • Search adheres to natural language, automatically checks spelling, and suggested items are included.

#7 Workflow Efficiency

When designing an application, remember to ask yourself if the design workflows solve your user’s problem. We argue that when building an application, it’s important to focus on building the right product before building the product right.

One key component of doing this effectively is observing and documenting process workflows. By understanding and observing users, you can craft accurate user stories, build features that solve problems, eliminate steps, and ideally, make the existing workflow simpler.

Successful Implementation:

  • Only the information for a given task is provided, limiting extraneous information.
  • Interactions are built in layers, rather than providing all of the functionality upfront.
  • Common tasks are exceptionally quick to complete.
  • A typical first-time user will be able to figure out how to use the application easily
  • Returning users will remember how to use the application.

#8 Data Input/Forms

Well-designed forms and data entry workflows are challenging to create. That’s why many applications suffer in this category. If your application’s workflow requires users to enter data, streamlining the process is key. Given that data entry can be frustrating, taking as much heavy lifting out of the process as possible is important.

Successful Implementation:

  • The app prioritizes automation & error prevention.
  • Form fields and text entry are easy.
  • Manual text entry is used sparingly.
  • Alternatives such as drop-downs and radio buttons are provided.
  • Related sections are logically grouped.
  • Instructional copy is clear and written in simple language.

#9 Information Architecture & Navigation

One key consideration is providing the user with a conventional approach to navigation through access cues. This can be as simple as building an intuitive menu, allowing users to create settings or preferences, or including clearly labeled buttons and links. Oftentimes, conventional navigation is preferable to innovation.

Successful Implementation:

  • Navigation actions are organized with user tasks and workflows at top of mind.
  • The application includes persistent navigation with breadcrumbs and headers.
  • The major sections of the application are available from every page, with no dead ends.
  • Links are jargon-free.
  • Application structure is simple overall.

#10 Layout

A clean, legible layout will allow you to match visuals and interactivity with a design that allows users to accomplish their goals. Remember that user attention spans are short – typically less than eight seconds – and ensure that your layout surfaces the most important information and captures attention quickly.

When designing your wireframes and mockups, keep whitespace in mind too – it makes content easier to read and scan. This eases message comprehension and directs the user experience. Also keep the concepts of horizontal and vertical real estate in mind. Modern experiences span large screens, and you can expand your experience to fit them by providing more space and more focus.

Successful Implementation:

  • The application has a strong balance between information density and use of white space.
  • Content pages are clean, avoiding information overload.
  • There is a consistent, recognizable layout across pages.
  • The applications recognizable look and feel engages users and draws them in.

Wrap Up

These 10 ingredients help create an application that is, first and foremost, practical. The best foundation for a high-end application is to helps users accomplish their goals easily while minimizing frustration. Once an application works without fail, it creates space to start thinking about the emotional affect an application has on users through great design, excellent messaging, and clear purpose.

Download our free white paper: 10 Ingredients for High-End Applications to learn how you can create the most appealing and high-functioning applications.

Fresh Consulting's white paper, 10 Ingredients for High-End Applications

 

Founder and CEO of Fresh Consulting, student of all things creative, innovative, and fresh, professional snowboard instructor trainer, father.

Whitepaper

Resources

10 Ingredients for High-End Applications

Download

Designing Scientifically Fresh Experiences

Download

web application process timeline graphic

Web App Development Process Timeline

Download

You might also like...

22

Sep.

Discussing UX Design: 11 Fundamental Terms You Should Know

UX research and design is about understanding people and designing experiences. Getting to the finished product is a journey with research, analytics, testing informing, and validating the design work. But to effectively communicate with colleagues and clients about your work, it is critical to understand the surrounding vocabulary. There are many different methods, theories, tools, … Continued

...continue reading

14

Sep.

Meet the Demand for 24/7 Customer Service with Chatbots

As our digital world grows increasingly complex, high-quality user support has become critical. Research shows that 51% of consumers say a business needs to be available 24/7. With growing consumer bases, businesses must be able to address user needs quickly and accurately.   Responding to all your customers’ concerns and inquiries can feel like a … Continued

...continue reading

6

Aug.

Utilizing UX Research to Measure Design Success

Before the COVID-19 outbreak, I got a chance to join a UX research session held by Agoda, Asia Pacific’s most influential global online reservation provider for hotels, vacation rentals, and flights. They also happen to be one of our clients, who we do WordPress development for. One of our operating team values at Fresh is … Continued

...continue reading