There is a delicate line between an useable interaction and one that is not. Interaction design concepts aid in bridging the gap.
Interaction design plays a significant part in the execution of outstanding UX and is undeniably one of the cornerstones of UX design concepts.
It is essential to recognise that no matter how visually appealing a product may be, if the interaction design is not up to par, the user experience will be inadequate. Even if the aesthetics are not optimal, if the interaction design is done correctly, the user experience will be considerably more successful, resulting in a beneficial impact on the profits.
The Interaction Design Association (IxDA) defines Interaction Design (IxD) as the practice of designing meaningful connections between people and the products and services they use, from computers to mobile devices to appliances and other digital products. Interaction Designers strive to create an experience that enables users to interact with the digital products in an efficient, intuitive and enjoyable manner. By understanding user needs and behaviours, IxD practitioners are able to create an effective experience that creates an emotional bond between the user and the product.
Having a positive experience is essential for creating a lasting impression, as highlighted by Don Norman, author of The Design of Everyday Things. According to Norman, people tend to remember their interactions fondly when they have a meaningful experience.
Great interaction design, which in turn improves the experience, is greatly facilitated by adhering to the principles of interaction design.
An effective interaction design would remain relevant even in the event of a total technological overhaul, due to its foundational principles that remain constant regardless of the technology used. These principles are rooted in human behaviour and how people interact with and process information. Thus, the fundamentals of interaction design remain unchanged regardless of the technology in use.
Imagining a world in which each door handle had a unique design is a daunting prospect. The current assumption that there is a single way to open a door, by pulling the handle, would have to be discarded. This would create a chaotic situation, as the user would have to remember to pull up, up and up, or up and up and down, depending on the type of door handle. This lack of uniformity would create an obstacle for those unfamiliar with the different handle designs, leading to confusion and potential safety issues. Consequently, there is a strong case to be made for maintaining the current assumption of uniformity when it comes to door handles.
No one likes to be told that there is only one way to do something, however, effective interaction design is based upon a set of rules, guidelines, and heuristics. These are not vague concepts, but rather the foundation of interaction design and allow for users to interact with the interface with few issues. Interface standards should not be seen as a limitation on innovation, as they are not rigid rules, but rather guides to help designers create a design that is both easy to use and familiar.
Basics of User Interface Design
Human-Computer Interaction (HCI) is an interdisciplinary field of research focusing on the design of computer technology, with a particular emphasis on the interaction between users and computers. Interaction Design is a subfield of HCI that investigates the ways in which people interact with technology.
-in accordance with the IxDA’s definition.
Achieving “pure user joy” is the ultimate goal of any user interface design. This is accomplished by combining the core principles of UI design with interaction design that is focused on achieving specific objectives. By merging these two elements, an interface can be created that not only looks good, but also provides a positive user experience that meets the needs of the user.
- Interaction designs that are effective use straightforward objectives, a compelling reason for being, and an easy-to-navigate user interface.
- When designing for ease of use, goal-driven interaction only presents users with the information they need to successfully perform a job.
Here are a few (certainly not all) of the most fundamental guidelines:
Discoverability
If users cannot immediately access the information they are looking for, then it might as well not exist. This is why it is highly recommended to label icons in user interfaces, so that users are able to understand their options in less than a millisecond. Without description labels, it is like adding a roadblock for drivers, causing them to slow down and try to decipher the meaning of the icons. This interrupts the natural “flow” of the user experience. It is important to remember that users do not take the time to try to understand a confusing user interface.
Signifiers
The use of signifiers is essential for effective communication of affordances in user interfaces. Signifiers act as signals or signposts, guiding users to interact with the UI. For example, signifiers may be lit up in green when the user can interact with them, indicating that they can be tapped, clicked, or swiped. On the other hand, when an affordance in the user interface is missing a signifier, it is rendered as effectively invisible. In such cases, gestural interactions may be hidden, making them only apparent when the user makes a random left or right swipe (e.g. to delete something).
Don Norman (2013) emphasises the importance of signifiers to designers, arguing that they are of greater significance than affordances. Affordances are properties of objects or environments which indicate what actions are possible, whereas signifiers are signals which enable people to detect these possibilities. Signifiers may take the form of icons, symbols, or words, and they can be used to guide users in how to interact with a product or system. By utilising signifiers, designers can increase the discoverability of actions, which can aid in creating a more intuitive user experience.
Feedback
Once the user has been presented with the necessary indicators, providing feedback is of the utmost importance. This feedback should inform the user of how their action has been received, and the system must remain in a state where this information is visible at all times. It is essential that the system is configured to:
- The status of the situation is communicated to the users.
- There is always up-to-date data on how their efforts are paying off and what the product’s current status is (system).
- A user is never in the dark about what stage the product is now in (whether it’s being processed, loaded, searched, uploaded,
etc.). - The new condition may be easily identified once a certain action has been carried out.
Mental Models and Conceptual Models
Interaction design that is well-conceived can help users to develop a comprehensive understanding of the system, allowing them to make informed decisions and feel empowered. A conceptual model can be utilised to boost the discoverability of the system and ensure the accuracy of the evaluations it produces.
Users develop expectations and understanding of how things work in reality based on their mental models, which are also referred to as cognitive maps. These cognitive maps are essentially internal representations of our physical environment, with a particular focus on the spatial links between components of that environment. Interaction designers can make their systems appear intuitive to users by leveraging the mental models they already possess.
The designer develops an intellectual model, referred to as the design model, to illustrate how the gadget or program is expected to operate. This concept can only be conveyed to end users through a user interface. Users may then explore the conceptual model to develop their own understanding of the phenomenon being studied.
Instead of providing instructions to consumers on how to use an application, designers should ensure that the user interface is clear and simple, so that everyone can understand and utilise it. If the user interface is not designed correctly, it can lead to users forming incorrect mental models of the app, resulting in them trying to use it in a way which was not intended by the creator. This can cause a range of problems.
Mappings
Controls-to-outcomes mapping is an area of study focused on understanding the connections between different controls and their outcomes. This concept is closely related to the idea of feedback, as they both contribute to the integration of a system. The relationship between the control and its ultimate purpose is an essential factor in the design of any artefact, and this is true across most contexts.
By utilising existing information and established customs, we can develop a “natural map” that allows for immediate comprehension. One of the strategies employed in user interface design is the use of spatial analogies.
- To raise a number using a slider control, drag it to the right.
- Slide your finger to the left to lessen it.
One example of a natural mapping is the universal standard wherein a rising level denotes an increase and a decreasing level denotes a decrease.
Constraints
Design constraints are an effective method of defining the boundaries in which a user can interact with a product or service. By imposing certain constraints, interaction design facilitates a more efficient user experience by guiding them along predetermined paths. This helps to ensure that users are able to achieve their desired goals in a timely and efficient manner.
In order to guide the user’s actions, designers incorporate constraints to make sure that only certain components are displayed or even enabled. The hierarchy and persuasion of the user are taken into consideration, including size, scale, proportion, emphasis, and state. The proper implementation of constraints further reduces the likelihood of user errors.
When users are presented with the full spectrum of possibilities, they are faced with an abundance of potential courses of action. This is the essence of free will, providing individuals with the autonomy to make their own decisions. However, a surfeit of options can lead to difficulty in making a choice, as the sheer magnitude of possibilities can create a sense of feeling overwhelmed.
The most effective interaction design is centred around the needs of the user, ensuring that they are able to access the features they require in a timely manner, rather than attempting to overload the interface with an excessive number of features. By focusing on the user’s needs, the interface becomes more intuitive and user-friendly.
Continuity, Benchmarks, and Guideposts
It is essential to adhere to a consistent interaction paradigm in order to minimise the probability of user error and to make the program easy to learn and use. User Experience (UX), Usability (UX), and the speed of operation of digital products can all be improved with a unified design approach. Furthermore, all of these concepts are closely related to the topics that will be discussed in the following sections.
A consistent interface is one that adheres to norms, such as consistently using the same method to accomplish the same goal.
Over the years, conventions, standards, best practices, and usability heuristics have been established in order to aid the creation of products that are highly usable. These rules of thumb provide general guidance, rather than specific usability guidelines.
It is important for a page’s layout to adhere to established conventions in order to ensure compliance. Studies have shown that the left side of a web page is the most viewed, making up 69% of the time, while the right side is viewed for only 30%. Utilising a traditional layout can significantly increase the likelihood of financial success for a site.
Implementing a global navigation menu at the top of the page, or a breadcrumb trail, could be beneficial in providing users with an easily detectable orientation and navigation device. Such a standard could be modelled after the one implemented on the BCC website.
The capacity to see patterns and learn from them
As a novice, how quickly and easily can one learn to use the interface? It is understandable that people may be hesitant to embrace change unless it yields a significant improvement over existing conditions, yet there is no denying that we are regularly exposed to new and unconventional forms of communication.
When acquiring any new knowledge, it is often helpful to identify familiar patterns or structures that can expedite the process. This is applicable to even the most mundane activities, such as using a spoon, riding a bicycle, or skateboarding. As this concept extends to user interface (UI) components, it is useful to understand that buttons, text fields, dropdown menus, checkboxes, radio buttons, spinners, sliders, icons, accordions, search bars, and other similar UI elements all share a similar structure.
Rather than trying to invent something entirely original, the most successful interaction designs draw upon existing paradigms to develop something entirely innovative. By leveraging existing patterns, designers are able to create something that is both familiar and fresh.
In addition to helping to improve memorization, patterns can provide a sense of continuity by reinforcing concepts that have already been introduced, as well as by allowing the design to meet the user’s expectations.
Placement of visual emphasis and hierarchy
When navigating a website or mobile application, users are looking for the most pertinent data in relation to their query. Hierarchy in design is the system used to arrange visual elements in order to communicate the relative worth of each element. The human visual system is organised based on a hierarchy of visual indicators. Contrast between items in a visual field creates an order of importance, suggesting that not all elements are of equal value. Size, proximity, colour, transparency, and tonal contrast are all effective ways to draw attention to certain elements.
The significance of an organised visual hierarchy is immense and cannot be overlooked. This method has been utilised extensively with great success in many design disciplines, including architecture, industrial design, and graphic design. To illustrate this, one need only look at the impressive output of poster art. When applied correctly in interface design, the relevant components appear at the right times and in a manner that is conducive to the user experience.
Skilled interaction designers may create “lean and mean” interfaces that perform like magic by strategically placing their attention.
The Principle of Fitts
It is interesting to note that the Fitts’s Law, which states that the time required to acquire a target is a function of target distance and target size, was originally developed for the study of human muscle movement and targeting in the context of telegraph operator and production line job performance. Since then, this law has been applied to Human-Computer Interaction (HCI).
In general, the speed and ease of user interaction with a target on a user interface (UI) is largely determined by the target’s distance and size in relation to other elements on the UI, as well as its proximity to other objectives. To ensure a quick and seamless experience for users, it is important to group activities that are related together in the same area of the UI, as this eliminates the need for users to navigate across the UI frequently.
By employing Fitts’ law, precise estimates of the amount of time required for travel and decision-making can be generated. This law can be applied in a variety of contexts, such as when the target is a button, a drop-down menu, or any other form of user input. However, if the target is too far away, too small, or the clickable components are too close together, the effectiveness and usability of the target will be significantly reduced.
Schematic Representations, the Gutenberg Diagram, and the Z- and F-Pattern Designs
Audiences in the Western world tend to be particularly drawn to certain formats, yet they are not confined to any one context. When visiting a webpage with lots of content that is similar in nature, such as a blog or news site, readers will follow an eye-pattern that is described by the Gutenberg diagram. This diagram suggests that readers are less likely to pay attention to the weaker and barren areas of the page that are away from the main focus of the reading route.
The Z-pattern is a design layout in which two barren sections of content are separated by two sections of more important information. This design is sometimes referred to as a Zig-Zag pattern, which differs from the Gutenberg diagram in that it assumes the audience will move between the two barren sections. Regardless of whether or not the audience does so, the Z-pattern always begins and ends at the same places, with the most essential elements located in the centre part of the pattern.
It has been observed that people generally consume information quickly and this has been evidenced by an eye-tracking research conducted by NNGroup. This study tracked the behaviour of more than two hundred individuals as they read online information, resulting in the popularisation of the ‘F-pattern’. Furthermore, it was found that people’s scanning behaviour was consistent across a wide range of website types.
What’s the big deal here? To facilitate scanning on an online store, for instance, key information may be laid up in an F-pattern.
Rather than remembering, one recognises
Acknowledging something as being familiar is what we refer to as recognition. Recalling it, however, requires a greater cognitive effort as it requires the individual to retrieve the necessary information from their memory. Therefore, it is more beneficial to the user to display known objects rather than forcing them to attempt to remember unfamiliar ones.
It is evident that icons used in a user interface (UI) are highly effective due to their ability to be quickly identified and recognised by users. Studies have shown that the human brain is capable of recognising symbols up to one thousand times faster than being able to read text. This means that when warning symbols are included in dialogs, users can easily be made aware of the potential risks associated with their next action. However, if icons are not designed in an intuitive yet easily recognisable manner, such as using a hand held up instead of the standard warning indicator, then the usability and effectiveness of the UI can be significantly reduced.
Elegant Minimalism
If you want to pare down a product to its bare essentials, you need a firm grasp of what makes it tick. – Jonathan Ive.
The complexity of this notion renders it one of the most arduous to implement. Designers and product managers usually offer all possible options, enabling the user to pick the ideal one for them. This approach is straightforward but typically culminates in extraneous content in the finished product.
In order to create a visually attractive user interface, designers must ensure that the content is the primary focus for the user as they move from page to page. The user’s objectives and tasks should be the main focus and all other elements should be removed. To achieve this, designers must use visual hierarchy and the art of emphasis to display only the essential information needed for the user to complete their job. This allows the user to concentrate on the information that is most pertinent to them, providing an effective and efficient experience.
In reference to his art, Michelangelo once remarked, “I saw the angel in the marble and chiselled till I set him free.”
The designer must have a comprehensive understanding of the context in which the product is being used in order to create a minimalist, visually appealing, and intuitive user experience. This often requires conducting extensive user research and testing to gain an understanding of the product’s target audience and how they will interact with it. By removing any unnecessary elements, it is possible to create an experience that is efficient and effective.
Reduced Opportunities for Mistakes
Users are typically prone to distraction while carrying out tasks, making it essential to utilise visual cues, guidelines and well-defined boundaries to stop them from making unintended errors. Poka-Yoke, otherwise known as mistake-proofing, is the process of including protective measures into a system to remove the likelihood of human error.
Constructing a more precise psychological representation is one of the best approaches to minimising errors. When the designer’s interpretation and outlook on how the system should work does not line up with the user’s psychological model, it can unfortunately lead to numerous mistakes being made by the user.
Adhering to standard design conventions is highly advantageous, as it allows consumers to easily identify the available options. As users have likely interacted with numerous other websites and apps, they have established expectations of how the standard interactive features should appear and behave. If your product does not meet these expectations, it can result in erroneous outcomes.
It is essential to provide appropriate warnings before mistakes are made and to verify any potentially dangerous actions before they are taken. Although error messages that are simple to comprehend and follow are beneficial, the perfect solution is to design systems which do not require them in the first place. Consequently, it is important to be vigilant for potential sources of error and take steps to eliminate them.
How We’ll Be Using Interaction Design in the Future
As technology continues to develop, our ability to interact with our environment is expanding. Video game controllers are being outfitted with a variety of features such as input controls and haptic feedback to enhance the user experience. We are also seeing a shift from traditional touchscreens to more immersive 3D interfaces, such as hand gestures in virtual reality settings, gaming consoles, and internet-of-things (IoT) devices. These new ways to interact allow for a much more dynamic and engaging experience than the 2D and 3D motions found on modern iOS and Android smartphones.
It appears that the future of controlling electronic devices is rapidly evolving, as initiatives like Google’s Project Soli strive to make it possible to manage gadgets with hand and finger gestures instead of a mouse, trackpad, or joystick. In addition, possibilities such as conversational user interfaces (UIs) are further demonstrating how typing may soon become a thing of the past. Nonetheless, the concept of instant and ongoing input in some form (vocal, tactile, visual) will remain a critical component for user experience.
As a UX/UI designer, it is essential to remain mindful of the fundamental interaction design principles that will always be integral to the design of future systems. While these guidelines are not rigid, following them will create more engaging and effective end products. Just as established forms of storytelling have been used to craft successful films, there are also established principles of interface design that should be taken into consideration. By adhering to these conventions, designers can create user-friendly products that are likely to be more successful in terms of sales.
