A Singapore Web Designer’s Guide To Interactive Design

a-singapore-web-designers-guide-to-interactive-design-2

Interactive Design is another critical component of User experience (UX). Its origin is loosely intertwined with graphic and web design. But in entirety, interaction design has grown to curve its own path. It’s fast becoming a field of its own — and it’s just a matter of time before you start hearing job titles such as ‘interaction designer’.

Interested in learning about interaction design and the role it plays in UX design? Well, there’s no better place to start than here, by reading this post.

As the name suggests, interaction design strives to achieve one particular thing — and that is, to facilitate a smooth interaction between a user and a product through an interface. It’s a key component of user experience that allows the user to communicate with products directly via an interface.

The concept itself might be tough to grasp. But it’s nothing you can’t learn and implement.

You have a whole lot of different things to take into consideration while working on interaction design. So assuming this is your first attempt at trying it out, how are you supposed to hit the right notes and get everything right?

Well, no need to over-think it. If anything, we implore you to read on, so you can start creating products that online users will understand, love, and enjoy using.

Interaction Design in the Simplest of Terms

YouTube video

Interaction design (IxD) is a broad subject that aims to orchestrate how users interact with machines or products. The product or machine being referred here could be your website, app, or your coffee grinder. Its primary goal is to help designers come up with products that can best help users achieve their objectives.

It defines both the behaviour and structure of interactive systems. Its goal is to create a meaningful connection between consumers and the products they use, from mobile phones to computers and far beyond.

get low cost monthly seo packages

Is Interaction Design the Same thing as UX Design.

A bold NO. Same as Information Architecture, interaction design is one of the components that make up the umbrella concept of UX design. Both of these concepts are relatively new, so it’s a bit tricky to come across a definition that accurately describes them.

Take interaction design, for example — the concept was first heard in the mid-80s when two computer geeks, Bill Verplank, and Bill Moggridge came up with the term. And since then, people have been fleshing it up bit by bit to grow it into the concept we now know.

website design banner

UX design, on the other hand, is an all-encompassing term encapsulating a string of user-related concepts. It’s all of these components, including information architecture, lumped together.

So yes, look at UX design as the bigger picture, and interaction design as the component that only focuses on how users interact with online products via an interface.

As a UX designer, your job is to worry about the look and feel of buttons, user scenarios, and research — not forgetting the actual planning of your product. It’s more holistic, which when narrowed down to specifics, becomes something else.

As for interaction design, the goal should be to help the user do what they want as easily and quickly as possible — not an easy thing when you look at it.

The Five Dimensions of an Interaction Design Language

Gillian Crampton introduced the concept of 5 dimensions in Bill Moggridge’s book interview. These are the dimensions that together make up Interaction design, which can also be translated to mean that they make up the communication that occurs between a user and a product.

Initially, there were only four dimensions. But recently, a senior interaction designer that’s respected in the world of UX designing decided to add up a fifth dimension, behaviour — thus bringing the number to five.

The four original dimensions include words, physical object, visual representation, and space.

Words

Words are the most powerful way a system communicates with a user. Just make sure the user understands the system, and you’re guaranteed an interaction. The only limitation that words have is that they leave no room for guesswork. It’s either you know, or you don’t.

Your priority is on the users you serve. You want to make sure that every single one of them understands the language you use. So drop all the vocabularies and technical terminologies in favour of a more understandable language. The simpler you keep your language, the more likely that your users will be able to use your product.

Visual Representation

Visuals have an almost similar role in this as words. Visuals are even more commendable because they can be seen and interpreted in a split second. Users also tend to remember visuals for much longer compared to words.

ALSO READ
10 Things To Look Out For Before Starting A Home Renovation Project

In this case, visuals represent anything that communicates to the user other than words. It represents shapes, icons, images, background, and so forth.

Some of these visuals are even embedded in our long term memories, which makes them easy to remember. For instance, users don’t have to be reminded of the notification icon and what it does. By just looking at one, they should be able to decode the communicated message.

You want to use visuals because they’ll make your product easier to understand — it’s that simple.

Physical Object

Every tangible item that people use to manage your product belongs in this dimension. This includes anything in the lines of a mouse, keypad, mobile, computer, and monitors. Or let’s just say that any hardware component that a user may use to interact with your product belongs in the physical object dimension of interaction design.

Words, visuals, and physical objects are regarded as the building block of Interaction design. They’re the three most essential tools that a user needs to interact with your product — otherwise, no interaction will occur.

Time

This is the most frustrating dimension that designers struggle with all the time. Keep in mind that it’s not just about the amount of time a user takes to interact with your product. But any other effect that can be detected by a user.

It includes things such as vibrations, sounds, and animations — or any other communication detour you can take as a user communicates with your product.

It also includes every possible way a user may measure their progress while interacting with your product.

Behaviour

This is the latest addition in the dimensions. People tend to confuse it with the fourth dimension — which is understandable when you consider the fact that they have a few characteristics that overlap.

engaging the top social media agency in singapore

This dimension is so focused on the form at which an interaction design occurs. It can also be interpreted as the flow with which action results in a reaction.

It’s the emotions that users evoke while interacting with a system. Does your product create a happy feeling? Does it create calmness or peace?

Cognitive Psychology

Cognitive psychology has a direct role to play in Interaction design. In fact, the whole idea of interaction design stems from some of the key elements of cognitive psychology.

These elements include:

Mental Models

These are the images that run into the user’s mind every time they interact with your system. They’re meant to inform their expectations.

By understanding how mental models operate, it automatically becomes more comfortable for you to design a more intuitive system.

Interface Metaphors

This element uses actions that users are already familiar with to introduce them to new activities. Examples include the recycle bin on computers, which in actuality resembles a trash can.

So when a user sees the icon, they automatically figure out the expected action by connecting its role with that of a another item they’re familiar with.

Affordances

This sums up a list of all the things that may appear to be involved in the functioning of a product but are not. They’re designed to make an appearance of doing something.

A classic example is a shopping cart that appears like it can be pushed. This element works in interaction design because it makes it easier for users to connect the dots and figure out its role.

Principles of Interaction Design

These principles form the basis of which Interaction Design is founded. They’re classical in the sense that they’re based on how humans act and understand things. As a designer, you’re simply trying to get man and machines to work together in a manner that they can best understand each other.

i. Discoverability

Discoverability targets new users that have never interacted with your product before. How easily can they find some of the features it offers?

Where this principle is factored into the designing bit of a product, the result is good usability. Meaning users will have no problem locating the features on your product.

get google ranking ad

Discoverability works banks on first impressions by minimising the amount of time a new user is likely to take in figuring out your product.

Poor information architecture and a complicated interface will most likely create confusion to a new user that has just stumbled across your website. That goes at length to also increase the likelihood that that particular user will abandon your product without completing an action.

ALSO READ
Google Cookie Deprecation: Preparing Your Business For A Cookie-less Future

Improving discoverability can prove to be a more significant challenge than you’ve ever imagined. And there’s a simple reason for that. As a designer, no one understands your product, in all of its glory, better than you.

Now imagine being exposed to the same product for the first time. You don’t know how that products works and the only thing you can trust to guide you around is your intuition. How long will it take you to crack it up?

You want to make sure that you’re creating a product that speaks the same language as the user. So start by making the navigation routes so logical and easy to understand.

Use buttons that a user can easily click on and be directed to the features they’re interested in.

Any button you suspect a user might want to use must be placed within their reach, where they can easily see it and click through to be directed to a page that they’re most interested in.

ii. Consistency

The brain is always resistant to change. Meaning you have to find a way to make sure your product creates steady and uniform experiences. All icons must follow the same pattern of design and behaviour.

Your product interface must also maintain the same structure and colour pattern across all features. In brief, you’re working towards creating familiarity by making sure everything stays uniform.

Users will come up with assumptions about your product and everything else involved. It’s upon you to ensure these assumptions are in no way misleading. So get into the head of your users and visualise everything like them. That’s exactly how you should structure your interface and everything else.

You’re simply working towards making your product and all its features discoverable. And one way to achieve this is by adopting uniformity.

You don’t have to use identical icons all through. This is where you let your creativity serve you. What’s important is for you to keep in mind that you’re threading on a delicate line, and the last thing you want to do is confuse your users.

iii. Learnability

Learnability operates in an almost similar fashion as discoverability. The only difference is that learnability gives your users time to learn about your product and its full potential instead of letting them figure it out on the spot.

But together, these two principles are more concerned about how fast users get to learn and understand your product.

How steep is the learning curve? And what measure do you have in place to ensure a new user will be able to learn about your product in the shortest time possible.

You have to analyse the amount of effort your users are expected to put in understanding your product. Remember to attach a time-frame to it.

After this, you can go ahead an analyse all the factors that influence the amount of effort a user will be willing to invest in understanding your product. This includes the investment that a user has already directed towards your project or how badly they need it. Another thing could be how they’re planning to use it.

iv. Readability

This principle focuses on your content. Can it be read easily?

You have to start by ensuring your content is well organised. Make sure everything is at its place and that users will have an easy time scanning through the content to read it.

Take everything into consideration — including the number of lines each paragraph will have. Take advantage of negative spaces and ensure the content itself has proper line spacing.

Can a user scan through the content and be able to understand what’s in it without actually reading it?

 It turns out, a larger section of the human population only reads about 20 percent to 28 percent of a piece of content.

The Final Thought

Interaction design in itself is a concept that’s rapidly evolving. This post touches on the key elements and some of the modern principles governing it, but there’s more to it than we can cover in one article.

Remember, for the most part; interaction design is about getting humans to have a meaningful interaction with the machines (or the products) you’ve invested so much time and resources creating.

That said, we invite you to talk to us about Interaction Design (or your project in general) and let’s see how much value we can bring to the table.

About the Author

tom koh seo expert singapore

Tom Koh

Tom is the CEO and Principal Consultant of MediaOne, a leading digital marketing agency. He has consulted for MNCs like Canon, Maybank, Capitaland, SingTel, ST Engineering, WWF, Cambridge University, as well as Government organisations like Enterprise Singapore, Ministry of Law, National Galleries, NTUC, e2i, SingHealth. His articles are published and referenced in CNA, Straits Times, MoneyFM, Financial Times, Yahoo! Finance, Hubspot, Zendesk, CIO Advisor.

Share:

Search Engine Optimisation (SEO)

Search Engine Marketing (SEM)

Social Media

Technology

Branding

Business

Most viewed Articles

Other Similar Articles