As you’ve probably noticed, interaction design is slowly becoming the most popular design concept. Therefore, every designer should consider it, even before planning a new design project.
How could you maximize the benefits of interaction design? Better yet, how can you be sure you’ve created something users can interact with? Good interaction design is an ever – changing process which needs to adapt to new technology and trends. The common rule which never changes is the need to balance between pleasant appearances and flawless functionality.
Image source: Valentin Salmon
HCI/ergonomics real life movement, able to estimate the shortest time lapse available to move towards the target, is actually a function of the size and the distance of that target. Let us simplify this designer jargon: Selecting a target is easiest and fastest when the target is large; and placed close to us.
Interaction design is all about human behavior – it has to be consistent; and to provide entertainment and accessibility. None of these can be evaluated with pixels or clicks.
Therefore, this design branch relies on size and distance, as well as different placement which could affect every aspect of the UX.
Let’s define interaction design
A decade ago, interaction design was almost completely underestimated. It is in recent years that it caught the attention of the design community, and it turned out to be the core of the virtual industry.
While trying to enhance usability, academia and the ICT industries discovered that they could employ psychology and ergonomics for the purpose, and they started working on human factors and the construction of a more stable relationship with users.
Image source: Ben Mingo
Generally speaking, interaction design is supposed to replicate real world in the digital environment. It is supposed to insert ‘life’ within screen-based actions and make them look just as real as they do within physical environments.
As a result, people feel encouraged to interact with their devices and digital products, all the way from their personal computers to the apps on their smart phone. Thinking deeper, interaction design is incredible: it combines all known design functions into a single concept.
The basics of good interaction design
Image source: Awesomed
Let’s take a look at the basic concepts and questions which ought to be answered by interaction designers:
- Defining the exact flow of the interaction;
- Informing users on the expected behavior before an action actually happens;
- Predicting and eliminating errors;
- Thinking about systematic feedback and the time necessary for a response;
- Developing a strategy for each element of the design;
- Simplifying legibility.
Keep physical efforts minimal
Image source: Mani
When designing for a screen as small as 3.5”, remember the following recommendations.
The most important functions should be placed in the left or right corner on the bottom (ideally in a vertical position). Imagine a user holding a phone (most of the users are right-handed), and you will understand why this is the most accessible placement. The upper left corner is the most difficult one to access, so we recommend you to put the least important and risky targets.
Edges are also an excellent place for horizontally positioned key functions. In the case of horizontal apps, these are the easiest places to reach with your thumbs; while the upper/lower parts are the most problematic ones.
Small screens are, as we saw, designers’ biggest struggle. As the screens enlarge, the muscle effort decreases and devices become easier to manipulate. For instance, on 7” devices (especially when vertically orientated), top functions should remain in the upper area, as this is where users hold their devices.
Visual appearance
Image source: Brian Hoff
Human brain has the strange habit of associating beauty with usability. Think about it: How many times did you go for an item just because it looked beautiful enough to convince you to interact with it?
This is exactly why appearances matter – we choose mobile devices based on their shape, weight, color, or size. The color can sometimes even help us relate a particular device to devices that perform similar functions (video recorders, for instance).
In fact, the so-called affordances originate from concepts like appearance and texture.
Let’s explain: Affordances are specific object properties which indicate the basic features of that object; and the way in which a user could interact with it. For instance, chairs have the affordance of sitting because of how they look.
Same goes for pushing buttons or filling empty cups with liquid. Basically, affordances are contextual in nature; and they are tightly related to our culture and experiences. The reason why you know how to push a button is because you’ve done it before; but a guy who’s never seen one might be quite puzzled when deciding how to use it.
Image source: Dan Baker
Therefore, appearance is not just a visual concept – it also has an emotional purpose. Is an item practical or simply entertaining? Is it made for single use or is it really reliable? Appearance can certainly attach important attributes to an item: It is not rare for us to estimate the price, purpose, of usage complexity just by looking at the object!
There are many appearance variables that should be considered:
- Proportions;
- Shape;
- Size;
- Weight;
- Color values and shading;
- Decorative characteristics which can make an object attractive and unique, even if there is a restricted command line when it comes to it.
Provide lots of space for clicking
Which are the two general truths that interaction designers should learn from this rule?
Increasing the buttons that lead to top-priority actions
It is up to designers to decide whether they’ll make these buttons slightly larger than the other ones; or they will create a striking difference that will express significance and will draw attention. Whatever they do, they need to ensure people will not neglect these buttons; and that they will have no troubles to use them.
Let the clickable area of the button be its largest part
Image source: Armand Chakhalyan
Preferably, convert the entire button (rather than the text on it) into a clickable area.
These rules are crucial for ‘call to action’ commands, which are a high priority for every business. Still, apply size adjustment as careful as you can, because exaggerating can seem pushy and too hard-handed.
Here are some of the reasons why you should not overdo your sizing efforts:
- You are occupying too much of the screen’s real estate;
- You’re risking to destroy the balance between elements;
- You’re creating mess and clutter; and you’re confusing users;
- You’re taking for granted that the striking size of your buttons will lead to increased usability.
How to improve usability then?
Image source: Tsuriel
It is a good idea to make a small button larger, but the effect will not be as meaningful if you enlarge an already large button. The result will most probably be a grumpy button that takes too much space, but fails to inspire action.
The specific relationship between people’s usage and interaction design
Image source: astract
What is people’s use? It is the effect of interaction design; and the proper interpretation of items’ digital purpose. Since earliest time, people interact in accordance with their environment’s settings; and the motivations coming from their surroundings.
Initially, it referred to their workplace’s settings, but with the development of digital technology it spread to their consumers habits, as well as interaction with items designed for joy and entertainment. Internet communication performed the final task of almost deleting differences between the real and the virtual world.
Principles which guide the connection between users and interaction design
The first one is motion. Motion somehow ‘activates’ interaction, as people have an already developed mental image of swiping and tapping to trigger different elements of web design.
The second one is spacing: The user needs to recognize the environment where he’s interacting. Is it a two-dimensional or three-dimensional environment? Does it trigger action in a particular part of the screen; or even such that spills over the physical world?
The third one is timing: You need to comply with users’ expectations on the time they’re going to spend for that interaction. The rule is average duration, achieved by balancing between too short and too long interactions. However, don’t let expectations affect the accomplishment of your purpose – complex interactions will need more time and the user needs to sacrifice in order to respond.
The forth one is sound: Unlike the other aspects, sound is optional. We recommend you to analyze the habits of your audience and to see whether they’d like it or not.
Video source: UI Sound Kit
The fifth one is appearance: Appearance refers to every element you’ve employed. You need to have a clear vision on how items should look, and create a visual appearance that matches their purpose and the message they’re trying to convey. Luckily, you have a large set of tools to achieve this: shapes, spacing, colors, and readability. Each of them could improve the quality of your interaction design.
However, don’t forget that your hands are not completely untied: you need to adapt appearance to the importance of your functions.
Let’s compare between important and less important functions. A ‘Play’ button in a game, for example — it makes sense to make it large, because it is the most important function for that type of interaction. Titles are certainly the most important parts on a website or app, so make sure they’re large and well-positioned.
Ratings stars are mostly optional and less important, so they are smaller and placed in a further corner. A searching filter — this is the school example of average importance: search buttons have medium proximity, and your only obligation is to include them, rather than making them too big. The best placement is the upper right corner, since this is a UI pattern which will be familiar to your users.
For account settings you could apply the same rules as in the case of a search filters.
Ending thoughts
Image source: Mark Wilson
Let’s be honest: even you underestimated the importance of distance here and there. Its true-short distances on tiny screens may not be your primary concern, but they can become really painful when used to trigger important and repeated actions.
The secret of successful interaction relies on the identification of those ‘micro-distances’, which could improve speed and decrease the time for triggering an action even before users notice it. It is important for the designer to know how to manipulate features, so that he can lead users to trust the website/app; and to use his products.
If not able to make the right decisions, think of yourself as a user: which are your individual expectations from digital experience? Which are the ethic/communal considerations you expect to be respected when interacting in the virtual world? Do those apply for other people you know?
However, with the ‘never-resting’ development of technology, it is hard to predict expectations, and even harder to generalize them.
In conclusion, interaction design can be perceived as a method for adjusting digital experience to real life use. It is a science of its own, which requires a lot of knowledge and compliance with other similar disciplines.
Whatever your expertise is, don’t underestimate interaction design. One of the reasons is that the branch is becoming very popular; and it will soon find a place in every digital aspect. Another one is that users’ expectations are rising; and they will always ask you to do more for them than simply providing content.
Obviously, the beginning will not be easy. You’ll need a lot of planning and adjusting, and you’ll have to test your work multiple times. However – be brave! Great breakthroughs were made by people who were not afraid to experiment! If you need help, go for it! An experienced developer in your team is never a bad idea.
Source: http://ift.tt/1Ydc1hC
No comments:
Post a Comment