Conceptualising Basics Interaction with Product

Objective

The objectives of conceptualising basic interaction with a product are to lay the foundation for designing user interfaces and experiences that are intuitive, user-friendly, and effective in meeting user needs and expectations.

Learning Outcome

-Identify user needs to design intuitive interactions.

-Map out logical user flows for efficient product progression.

-Select appropriate input methods for physical and digital interactions.

-Implement effective feedback mechanisms for users.

-Design error handling for smooth user guidance.

-Prioritise usability for easy learning and usage.

-Create inclusive designs for diverse user needs.

-Utilise visual design to enhance user experience.

Content

Interaction Design

Principles of Interaction Design

Dimensions of Interaction Design

Best practices for Interaction Design

Process of Interaction Design

Interaction Design

Focuses on creating engaging web Interfaces with logical thoughts, behaviours, and actions. Interaction designers create a meaningful relationship between the user and the products & services they are using (Products, App or Websites).

The Interaction Design Association-defines, IxD as the structure and behaviour of interactive systems. Interaction designers strive to create meaningful relationships between people and the products and services that they use, from computers to mobile devices to appliances and beyond. Our practices are evolving with the world.

Examples of Digital Products

Interaction designers have carefully crafted the design of smartphone interfaces to create meaningful relationships between users and their devices, making them very important part of modern life.

like Touch Gestures, Intuitive Navigation, Responsive Feedback, Contextual Interactions, Accessibility, Multitasking, Gestural Navigation.

Examples of Physical Products

The Samsung SmartThings Washer is a smart washing machine that incorporates advanced technology and interaction design to provide a more convenient and efficient laundry experience for users. It is part of Samsung's SmartThings ecosystem, which allows users to control and monitor their appliances remotely through a mobile app.

like Mobile App Control, Smart Auto-Detection, Energy Efficiency, Smart Diagnosis, Voice Control Integration, Cycle Customisation, User-Friendly Display, Remote Monitoring.

The Samsung SmartThings Washer exemplifies how interaction design can transform a traditional home appliance into a smart and user-centric device, offering convenience, energy efficiency, and seamless integration with the smart home ecosystem. The Samsung SmartThings Washer

Principles and Laws of Interaction Design

Fitts’ Law - It illustrates the relation between the distance to the target, your speed, and the size of the target. It basically says that the bigger the object, the faster you can point to it. Whether you point with a cursor or a finger, you can calculate how big a button should be to decrease the time spent aiming for it and increase the accuracy of pointing.

How to apply it in practice?

Shorten the distance between action A and action B

Place common elements in like manner

Make interactive elements big enough so users can aim easily

Provide a lot of clickable space around a link (or just make it a button)

Fitts’ Law

Fitts' Law

The Key Takeaways

The target area should be large enough for users to both discern what it is and to accurately select them.

Buttons should have sufficient spacing between each other.

Placing similarly used functions or features together allows them to be easily acquired.

Jakob’s law- Users spend most of their time on other sites, and they prefer your site to work the same way as all the other sites they already know.

Jackobs Law

The Key Takeaways

Users expect that familiar products to another will appear similar.

Good user experiences are made possible when the designer’s mental model is aligned with the user’s mental model.

By leveraging existing mental models, we can create high-level user experiences in which the user can focus on their task rather than learning new models.

Hick’s Law-

The time it takes to make a decision increases with the number and complexity of choices available.

When users bombarded with choices they will take time to interpret and decide. Choices seem to be good but when response time is critical keep the choices to a minimum. It will speed up the decision making.

Note: Hick’s Law can apply when designing Control display, Dropdown menus, Contact pages, Sign up forms, Button selection, and Navigation menus. Hick’s Law does not apply to complex decision making. If decisions are requiring extensive reading, researching, or extended deliberation. Hick’s Law won’t be able to predict the time to make a decision.

Hick's Law

The Key Takeaways

Avoid providing too many choices, it will increase the cognitive load for users.

Break down the long or complex processes into screens with fewer options.

Use progressive onboarding to minimise cognitive load for new users.

Miller’s Law- The average person can only keep 7 (plus or minus 2) items in their working memory.

The human mind can remember ~7 bits of information when completing a task that requires cognitive effort. This is critical because humans are constantly performing tasks, and trying to juggle various stimuli in the mind when doing so.

Miller's Law

The Key Takeaways

Don’t use the “magical number seven” to justify unnecessary design limitations.

Organise content into smaller chunks to help users process, understand, and memorise easily.

Remember that the short-term memory capacity will vary per individual.

Tesler’s Law- Tesler’s Law, also known as The Law of Conservation of Complexity, states that for any system there is a certain amount of complexity which cannot be reduced

Every UX designer would like to simplify processes and make them faster, but we have to take into account that there are things that cannot be simplified to be more basic. In this case, we transferred it from one place to another. The result of this transfer is that complexity finds its way into the user interface.

Tesler's Law

Dimensions of Interaction Design

The concept of dimensions of interaction design defines what interaction design involves. Initially, the idea of four aspects of an interaction design language was introduced by Gillian Crampton Smith. These dimensions are the interaction between a user and the screen. The original four dimensions are words, visual representations, physical objects or space and time. More recently, IDEXX Laboratories senior interaction designer Kevin Silver added a fifth dimension, behaviour.

1D (Words) - Words should be simple to understand, and written in such a way that they communicate information quickly to the end user.

1D Words

Example-

Onboarding Process:

• Welcome Message- "Welcome to [Bank Name]! Let’s get started on managing your finances with ease."
  

• Instructional Text- "Please enter your email to sign up or log in if you already have an account."

Navigation Labels:

• Menu Items:- Clear and concise labels such as "Accounts," "Transfers," "Payments," "Settings," and "Help."
  

• Sub-menu Items- Detailed but brief labels like "View Statements," "Transfer History," "Scheduled Payments," etc.
  

2D (Visual representations) - Visual representations are all graphics or images, mostly everything that is not text. They should be used in moderation, not to overwhelm.

2D Visual Representation

Example-

On the e-commerce homepage-

• Layout- Organized using a grid system for consistency.

• Typography- Clear fonts, with headings bold and larger for hierarchy.

• Color Scheme- Brand colors for buttons, contrasting text for readability.

• Imagery & Icons- High-quality product images, intuitive icons for navigation.

• Navigation- Clear labels in a fixed navigation bar for easy browsing.

• Feedback- Subtle hover effects and loading indicators for user interaction.

• Product Display- Grid layout for products with uniform thumbnails and details.

• Consistency-
  

• All elements maintain a consistent style and layout.

3D (Physical objects or space)- Physical objects or space refers to the physical object a user interacts with, whether it’s a mobile device, mouse, and keyboard.

3D Physical Space

Example-

In virtual reality gaming:

• Physical Objects or Space- Users interact with physical objects like VR headsets, hand controllers, and sometimes motion-tracking sensors.

• Interaction Design- Within the virtual space, users engage with various elements such as weapons, tools, and environmental objects using their physical controllers. For instance, in a shooting game, users physically aim and shoot using their hand controllers, mimicking real-world actions.

• User Experience- This immersive interaction design blurs the line between physical and virtual worlds, offering players a heightened sense of presence and engagement in the game environment.

4D (Time)- Time is the length that the user spends interacting with the first three dimensions. It includes how the user might measure progress, as well as sound and animation.

4D Time

Example-

In a fitness tracking app-

• Time (4D)- Represents the duration of user interaction, including tracking exercise sessions, monitoring progress over time, and setting goals.

• Interaction Design- Users log workouts, view progress charts, and receive notifications for milestones achieved. Progress is measured through metrics like steps taken, calories burned, and workout duration.

• User Experience- As users engage with the app over time, they experience visual feedback through animated progress bars, achievement badges, and motivational messages, enhancing their sense of accomplishment and encouraging continued engagement.

5D (Behaviour)- It is the emotions and reactions that the user has when interacting with the system.

5D Behaviour

Example

In a meditation app-

• Behaviour (5D)- Reflects the user's emotional responses and reactions during interaction, such as feelings of calmness, relaxation, or frustration.

• Interaction Design- The app guides users through meditation exercises, providing calming visuals, soothing sounds, and mindfulness prompts. Users may feel more relaxed or focused as they engage with the app.

• User Experience- Positive user feedback and reviews often indicate that the app effectively elicits desired emotional states, leading to improved well-being and user satisfaction.

Best practices for Interaction Design

The best practices for Interaction Design are listed below:

Keep it simple- The design must be as attractive and straightforward such that if a person missed reading the instructional text can still navigate to that content effectively.

Concise Information- The content of your website can be condensed to avoid lengthy paragraph information. Breaking up long content and combining it with animation can help you get through a lot of information in a very digestible format.

Give a sense of progression- Design must include properly planned progress bar to track progress including when they are in the course and how much time more they need to complete their journey.

Provide proper instructions- Whether your design should be intuitive enough to follow without words. But sometimes, You need to use some guidelines, but always make sure they are clear, uncomplicated and straightforward.

Keep consistent- Consistency makes sense of intuitiveness into the course. Make sure your design should be consistent. For example: If you are using the green colour button for submitting on the screen then you shouldn’t use green colour button to indicate inactive button on the next screen.

Generate useful error messages- Design must have a generic and descriptive error message to show success and error or any other information in case of failure/ success and information.

Give feedback that feels good- Feedback should highlight both strengths and weaknesses. Feedback helps us see our inevitable blind spots, and optimise our performance.

Process of Interaction Design

You will use the IxD method to create highly intuitive, familiar interfaces that give users a smooth experience and demonstrate that your brand knows them, there contexts, and the goals they want to achieve.

The IxD mechanism is usually broken down into five stages:

Find the users' needs/wishes- It is easy to believe that you already know what users want/need. But this step involves actually getting to know what users want/need are.

Pay attention to the people around you.

People can be interviewed.

Examine current options while keeping in mind that it's difficult to predict potential demands, innovations, and so on.

Analyse your conclusions to sort and arrange them in a order. Consider each element from a strategic standpoint. This could be accomplished by using a:

A story or narrative of how someone uses a system.

Breaking down a user's steps/sub-steps

Follow all the design fundamentals and guidelines to create a potential solution. (e.g., giving appropriate feedback for users’ actions). Use the best techniques to match how users will interact with it in terms of, for example, navigation.

Start prototyping - Allow consumers to get a sense of what the product will look like and try it, and/or send it to experts who will use heuristics to assess its efficacy.

Implement and deploy what you have built.

Process of Interaction Design