Creating functional beauty with UX

How the concept of functional aesthetic design helps to build great UX in designing our projects!

User Experience defines how much a user’s satisfaction with a product or at which level he would like to reuse this product again, either it is a digital or a physical one. Digitally, It’s all about how to make your website or app usable, accessible and memorable.

It also defines what the affection that the product leaves on users. We are usually wondering what emotions we want the targeted audiences to feel when using our products. These feelings could be, helpful, funny, confident, formal and many other emotions. It depends on the project type and its business goals.

Some UX designers work for aesthetics only, and some others work for just functionality. Designing for both functionality and aesthetics builds the complete user experience.

But it is not a seamless way to work for both considerations. We will try to put you in the picture of how to design for both Functionality and Aesthetics which is called Functional Beauty.

Functional Beauty

Socrates believed that "all things are good and beautiful in relation to those purposes for which they are well adapted [and] bad and ugly in relation to those for which they are ill adapted".

A great product not only has to be well made but also has to look good.

To understand “Functional Beauty” and to implement it into our designs, we usually concentrate on four main terms that would strongly affect the overall UX.

These four terms would be listed into “Utility, Usability, Desirability and Brand Experience”.

Utility

Utility means how useful the product is. Usefulness is one of the most important aspects of usability and UX design. Any successful product should have a reason to exist or to be used by users.

Usefulness can be determined by any product that enables users to accomplish a task. Usefulness can be determined by whether or not a product can meet user needs.

Usability

It refers to the ease of access and/or use of an app or a website. If people find it’s difficult to use a website or an app, they will leave it. If they got lost, they will also leave it. Usability means how easy a product is. Is it usable, do users need a manual to read before using a product? A product is usable when users can achieve their goals or do tasks easily.

Nielsen Norman Group defines Usability as a quality attribute that assesses how easy user interfaces are to use. The word "usability" also refers to methods for improving ease-of-use during the design process.

Usability is defined by 5 quality components:

1. Learnability

Is considered one of the most fundamental attributes of Usability since the first experience most people have with a system is learning how to use it.

Learnability defines how easy a system is to learn so users can rapidly get familiar with it to start getting work done. The system is learnable when it’s intuitive to use. Intuitive could refer to a single trial learning. In UX design, we - as designers - defines intuitive design as the interaction design that is clear, consistent and visible enough that we’ll be able to easily deduce what to do first, second, third, etc.

To gain Learnability in our UX designs, we always consider some checklist items:

Consistency

This means to maintain a consistent attitude when it comes to design a system. This happens by using similar elements, concepts, and routes. Certain elements should remain in the same place on every page. Like the navigation menu, logo, and main content area should all be easy to find. Consistency leads to familiarity and when a user finds the system familiar, it’s consequently Learnable. 

UI Responses and feedback

When users make any interaction with a system, they would need any evidence that their action was made successfully. Designing responses to users' actions are one of the most significant proofs from for inheriting usability in our UX design.

Those feedback elements would be for example Error messages, waiting times and completed actions.

Possible to do useful work before learning all of the system

It’s important to make users understand the system even from the first interaction with it and even before accomplishing their tasks.

2. Efficiency

Once users have learned the design, how quickly they can perform their tasks and achieve the goals of the system.

Efficiency defines the system performance. It affects on Experience as it would be defined in terms of the number of hours spent using the system. Efficiency can be measured by asking test users to use the system for a certain number of hours and how many seconds a user can take to do a specific task.

Efficiency can be described as the speed (with accuracy) in which users can complete the tasks for which they use the product. ISO 9241 defines efficiency as the total resources expended in a task. Efficiency metrics include the number of clicks or keystrokes required or the total ‘time on task’.

3. Memorability

When Users return to the using a system after a period of not using it, how easily can they reuse it? If we split users into 3 categories based on their visits to systems, it would be a novice, casual, and expert users.

Novice users are the ones who have never visited a system and they need to learn how to use it easily. The expert users, are those who have fairly frequent use and are usually using it. Whereas the casual users, they are the users that use the system intermittently. They may have visited the system before and for some reasons they didn’t use it for a while. They will not need to learn it from scratch, they will just need to remember how it works.

To have a system that is easy to remember is one of the most significant factors that would affect our system’s usability. We would test memorability on casual users to make them reuse the system and to calculate how many minutes or seconds they take to accomplish a task.

4. Errors

An error is an action that doesn’t enable the user to accomplish a specific task.

To gain good usability:

We - as designers - target to eliminate any actions that may result errors, in order to make users accomplish their task and to also make them go through our conversion funnel.

5. Satisfaction

Satisfaction defines how pleasant it is to use a system. Users feel good when using a system after seeing something satisfying. They consequently may be happy to share it among their family and friends. This element has similarities with the emotional aspects of the UX, and it can be related to things like visual design, trends, brand image, and feelings.

Satisfaction can be measured by a questionnaire that is given to users to answer in order to measure how satisfied they are. User satisfaction is all about to delight users and to make them feel enjoyable while using our systems.

Here are some great examples - as UX movement listed - that you may use every day and it surely makes you happy:

1. When someone swipes to delete an item in iOS and that item instantly disappears. This immediate feedback does make users feel satisfied.

2. In Twitter when a user favorites a tweet by clicking a small, pink Valentine’s heart, it jumps briefly, then explodes into colorful confetti. This immediate feedback lets the user know that he successfully completed the action, and Twitter delivers it in a cute, visually pleasing manner.

3. Progress bars can also deliver that jolt of satisfaction when the action finally completes. This works even better when you add a little visual treat to celebrate the user’s success.

Mental and Emotional Models importance:

All of those 5 components for achieving usability can be easily done by getting along with users’ mental and emotional models. The key to successful usability and UX is to understand the user’s mental model.

As UX movement defines it, a mental model is a person’s intuitive understanding of how something functions based on his or her past encounters, exposure to information, and sound judgment.

By understanding the user’s mental model and their thoughts, a designer will develop a successful UX design:

In order to gain user’s satisfaction, we need to also derive an emotional effect on users while using a system. We may want them to feel different feelings of happiness,  love and so on.

Emotional design has the power to turn users into fans and to be the evangelist who will suggest the product or service to their friends. Don Norman defines it as making a product or service that delivers in a person the emotions that we (the company) cares about.

Rules of Usability

As David Travis put 6 rules of usability to consider:

1. The design is based upon an explicit understanding of users, tasks, and the environment. The word “explicit” means that it is stated clearly with no doubt or confusion. And this can be achieved by collecting real data from usability testing with actual users.  (User Involvement) is the secret sauce of a successful UX.

2. Users are involved throughout the design and development by carrying out studies to, understand user needs, showing users early design concepts and usability testing. When it comes to user testing, do Empirical Measurement which means putting real users in front of the system.

3. To produce a driven and refined design by user-centered evaluation, you have to measure usability not only at the end of development but also through the whole design and development process. That is the difference between waterfall and iterative design processes.

4. Follow the Iterative Design methodology which is a process of design, testing, redesign and retesting until you meet user needs.

5. The design addresses the whole User Experience. UX is not only about a usable system, but it’s also about the whole system experience while a user is using it that defines also the look and feel a user can get.

6. The design team should include multidisciplinary skills and perspectives. User researchers, interaction designers, content designers, and front-end developers.

Desirability

Desirability defines how fun and engaging a system is. Desirability should be how we can drive a user to take action through design. When achieving desirability, it would be the factor which separates market leaders from other competitors.

By using visuals, content and form elements, we can make a page more desirable to use. To demonstrate how content and visuals could make a desirable system, we would simplify it to:

• Graphic visuals help the design to deliver a context to users and to feel the whole unique experience for each system. Regarding the content, well written and derived content will drive users to take actual actions. And finally, the form elements like buttons and Signup forms will finalize a user’s action.
  
• The development of mobile device usage creates a whole new level of the Desirability need as users can touch and manipulate objects via microinstructions.
  
• By understanding user’s emotions and consequently developing an emotional model for our systems, we would then achieve Desirability among the visuals, forms, and content in order to drive users to take successful actions.
  

For achieving desirability, we have firstly, define the user’s context while doing tasks. So desirability is not just about aesthetic and nice looking designs. A desirable product should make users engage in relation to their context, environment and their intention to use the system.

You will also need to understand users’ emotional needs and hidden motivations. For example, as the UX Movement put it when designing enterprise software, what would excite users is probably less about visual presentation and more about executing their tasks efficiently. That’s the sort of insight you can gain through user research.

For achieving Desirability, we also always need to add value. Is the product, adding value and solve a need for users or not?

Brand Experience

All of those previous factors would shape a positive and unique brand experience. Brand Experience defines what the overall feelings about the brand are.

As Dirk Knemeyer defined it, the Brand experience is the strategic approach to compelling people to take productive action through the integrated, coordinated planning and execution of every possible interaction that they have with your company or products.

It is a user’s perception that he would make about the overall experience of a product, service or a company.

Brand Experiences answers the question “Does the user feel good about the product and the company/brand that makes it?”

In a nutshell

Aesthetics and appealing interfaces break the ice and tremendously increase a product's perceived value, however, visual attractiveness alone does not guarantee long-term commitment. Visually appealing interfaces can be surprisingly simple when they are built from a holistic perspective where the designer understands user needs in relation to the dominant activity pre-supposed during the interaction.

Is beauty more important than function? Is fit of a product more important than how it looks? Truth is function and aesthetics are of equal importance. A beautiful product will allow the user to trust the product initially and reduce distractions, while a functional product will keep the user engaged.

When they come together, the user-experience feels complete. The functional design ensures your utility and usability are met. The aesthetic design ensures the product is desirable and the user has a great brand experience.