Interactivity helps make user interfaces expressive and easy to use. Despite its great potential, interactivity is perhaps the least understood of all design disciplines. This may be because interactivity is one of the newer members of the user interface family. Visual and interaction design date back to early GUIs, but interaction design had to wait for more modern hardware to render animations smoothly. Layering UI interactivity on top of traditional animation adds its share of misunderstandings. A lifetime can be spent mastering Disney's 12 Core Principles, does that mean UI interactivity is also hard? People often tell me that designing for interactivity is difficult or that choosing the right values is ambiguous. I argue that in the areas most important to the user interface, interaction design can and should be kept simple.
Where to begin?
The main goal of interaction design is to help users navigate the application by illustrating the relationship between user interface elements. Interactive Design also has the ability to add a character to the app with animated icons, logos, and illustrations; however, usability should take precedence over elements of expressiveness. Before demonstrating character animation skills, let's start by creating some basic interactivity, focusing on navigation transitions.Transition patterns
When designing a navigational transition, simplicity and consistency are key. To do this, we will choose two types of movements:- Container-Based Transitions
- Transitions without a container.
Container-Based Transitions
Elements like text, icons and images are grouped inside containers
If the composition includes a container, such as a button, card, or list, then the transition design is based on the animation of the container. Containers are usually easy to spot based on their visible borders, but remember that they can also be invisible before the navigation starts, like a list item with no delimiters. This template is broken down into three steps:
* Animation slowed down to illustrate the appearance and disappearance of elements
Applying this pattern to all container transitions establishes a consistent style. It also makes clear the connection between the start and end compositions, as they are connected by an animated container. To demonstrate the flexibility of this pattern, here are five different compositions:
* Animation slowed down to illustrate how the start and end compositions are bound by the container
Some containers just pop out of the screen with standard easing. The direction of its movement is determined by the location of the component with which it is associated. For example, clicking the navigation menu icon in the top left corner will move the container to the left.
If the container is out of screen, it fades in and zooms in. Instead of animating from 0%, it starts the animation at 95% to avoid overemphasizing the transition. Scale animation uses ease easing, which means it starts at maximum speed and slows down gently. To fade out, the container simply fades out without scaling. The end of the animation should be less pronounced than the start to focus the user's attention on the new content.
* Animation slowed down to illustrate how containers can be created by fading an element (zooming in and out)
Transitions without a container
Some compositions don't have a container on which the transition is based, such as clicking an icon in the bottom navigation that takes the user to a new destination. In these cases, a two-stage pattern is used:- The composition begins with a smooth fade, ends with a smooth appearance.
- As the final composition fades out, it is also subtly scaled up using the element softening reduction. Again, the scaling is only applied at the moment the composition appears, to emphasize the new content over the old.
* Animation slowed down to illustrate how transitions happen without a container using scaling, fading in and out of elements
If the beginning and end of the composition have a clear spatial or phased connection, then joint movement can be used to enhance it. For example, when navigating a step component, the beginning and end of the composition scrolls vertically as they fade in or out. This enhances their vertical layout. When you press the next button to view further material, the composition scrolls horizontally. Moving from left to right enhances understanding of the next event. Joint motion uses elements of standard easing.
* Animation slowed down to illustrate vertical and horizontal movement
Best practics
The simpler the better
Given their high frequency and close ties to usability, navigation transitions should generally support functionality in style. This doesn't mean they should never be styled, just make sure the style choice is justified by the brand. Eye movement is usually best captured on elements such as small icons, logos, loaders, or free state. The simple example below may not get as much attention on Dribbble, but it will make the app more user-friendly.
* Animation slowed down to illustrate different styles of movement
Choose the right duration and easing
Navigation transitions should use durations that prioritize functionality while being fast, but not so fast that they become confusing. The duration is selected depending on what percentage of the screen the animation occupies. Because navigation transitions typically take up most of the screen, 300ms duration is a proven method. In contrast, small components like switches use a short duration of 100ms. If the transition is too fast or slow, adjust its duration in 25ms increments until it reaches the right balance.Easing describes the speed at which an animation speeds up and slows down. Most nav transitions use standard element easing, which is an asymmetric easing type. This means that the elements speed up quickly and then slow down gently to focus on the end of the transition. This type of easing gives the animation a natural quality, since objects in the real world cannot suddenly start and stop moving. If the transition seems hard or robotic, it's likely that symmetrical or linear easing was chosen in error.
* Animation slowed down to illustrate different types of easing
The patterns and best practices outlined in this article are designed to create a practical and unobtrusive movement style. This is suitable for most applications, however some brands may require more intense styling expressions. To learn more about motion styling, check out our customization guide.
Once the navigation transitions are implemented, the task of adding a character to your application begins. It is here that simple patterns do not work, and here you can fully realize your animation skills ...
Personal animation can add ease to a serious mistake
If you are interested in learning more about the possibility of movement, be sure to read our
What is the use of your site or application? Is it just to collect information with it? Or buy in one click, and receive goods delivery tomorrow? Or is it more important to quickly find answers to the right questions?
Think about the people who developed this site or app. What was their goal?
They tried to make a web resource that would have everything for which they would love it. An easy-to-use site that quickly gives you the information you're looking for and helps you make informed decisions.
UX, or user experience, encompasses the perceptions and emotions that a software product or service evokes. UX is characterized by ease of use, accessibility and convenience. UX is often spoken about in the context of electronic devices, smartphones, computers, software, or websites. But such a concept is not new; it is something that is changing rapidly driven by technological advances, new interactions and consumer trends.
Users are looking for lightning-fast ways to solve problems, so UX is extremely important. Make sure that the site is clear and easy for users to understand.
If customers do not find the resource useful and easy to use, they will quickly unsubscribe. Most users decide within a minute whether to close the site.
In this article, we talk more about the emerging UX industry, what kind of designers businesses are hiring, and why thoughtful design benefits every business.
What is UX Design?
UX design, or user experience design, is what determines how satisfied the user will be with a software product or service; this process involves improving functionality, usability and convenience. UX design is the creation of software products with a thoughtful and relevant user experience. The field of UX design covers a lot of subsections that are worth considering.
1. Interactive design
Interaction design, or IxD, is a subsection of UX design that defines the interaction between the user and the product; the purpose of these interactions is a good user experience.
2. Visual design
Visual design uses illustrations, photography, typography, and color schemes to enhance the end user experience. In visual design, it is important to follow the principles of artistic design. Among these are balance, space, contrast… Color, shape, size and other elements also influence the design.
3. User research
This is the last of the UX design building blocks that companies use to figure out the expectations of their customers. A successful web project serves a specific purpose and solves specific problems, so an important step is to find out what the consumer needs. Without this, the design is based on only guesses and assumptions.
4. Information architecture
Designers use information architecture to structure and label content in a specific way to make it easier for users to find the information they need. Information architecture is applied in web development, development of smartphones, applications, and is viewed in many physical objects. Ease of use and accessibility are two main aspects of information architecture.
To illustrate, consider a map of the New York subway. By the way, this is a good example of information architecture that helps people get from the conditional point "A" to point "B". And, as the postulate of the Institute of Information Architecture sounds, "if you do something for others, you apply information architecture."
The Component Processes of UX Design
There are three stages of UX design:
1. search for the target audience
2. understanding the goals of the company - how such goals affect the user
3. out of the box thinking
Typically, UX design takes a user-centered approach – creating the right end product in three steps.
Simply put, the needs of those for whom the design is being developed should be taken into account. A lot of solutions are applied to eliminate all sorts of complexities and roughnesses; prototypes are created and tested on users.
Based on the results of the work, the best of the developed options is selected. If you look at things from the user's point of view and design according to their preferences, everyone will like the result.
UX Design Principles
The UX design industry is changing rapidly, but the fundamental principles remain the same. Designers need to understand what they need in terms of visual balance. Brevity and clarity are important nuances; here the principle applies - the less, the better. Strive for the design to be intuitive, and more importantly, take into account the interests and needs of users.
The scope of UX is usually limited to new technologies, but at the heart of it all are old-as-the-world principles that help designers solve all sorts of problems through a consistent and subject methodology.
Consider context: The user must know where he is at the current moment. There should not be a feeling of information overload, or that he is lost. Your task is to prompt and point the right direction.
Be human: Nobody likes the feeling of interacting with a machine. You are more likely to build trust if you show the human side of your company.
Availability: Nobody wants to waste their time. Successful UX design improves navigation.
Ease: Consistency and simplicity of design is always good. You build relationships with users through convenient UX.
Simplicity: No miscalculations or unnecessary descriptions. Go straight to the main point.
Outcome UX
When the UX project is complete, the designer and team show the client and their team a list of what has been done. It is necessary to show the process of work, a list of implemented ideas.
This is an important part of the overall process. This makes it easier for UX designers to find what they are looking for, demonstrate their vision, and explain certain recommendations for improvement.
1. User research
The needs, trends and motivations of users are all revealed through various user studies. This can be quantitative and qualitative data obtained during tests, for example, with the participation of focus groups; a detailed description of the registration process, onboarding and requests to the customer service. The goal is to get a detailed analysis of what is on the site and what else can be improved - all ideas are tested on real users.
Researchers create consumer portraits based on actual data about people, which helps to accurately determine who will interact with a website or application.
Through user research, designers find and define their user.
2. Assessment of competitors
Assessing the strengths and weaknesses of competitors is a way to expand your own UX strategy. It is best to act with the help of analytical reports that highlight competing developments. In fact, this is a detailed analysis of the interactive design of competitors, a list of weaknesses, miscalculations and omissions, in general, what can become a competitive advantage.
3. Interactive design
Description of user interactions can be in the form of a prototype - this way it is easier to understand how users will perform key tasks, find information, and, in general, use the product. The process of searching for information is described, and how convenient the development is. The prototype should be as simplified as possible and close to the final version.
4. Information architecture
IA is the process of taking information and turning it into a digestible form, which is especially important for large sites. It is important to understand the context in which people will use the design. The end result could be a site map with hints, or a sample user flow that shows how visitors navigate the site.
What is User Interface Design?
When Apple introduced the Click Wheel navigation component for the iPod, the thing was intuitive and highly functional - not to mention visual. This is a good example of a successful user interface, or UI. UI is the way you interact with computers, machines, websites, apps, wearables, etc. UI design is what makes all of these things as simple and efficient as possible.
UI vs. UX
UX, user experience, refers to the user's movement on a website or app. UX designers work on the form and function of a product or technology. UI, or user interface, focuses on how the outer shell of a product looks and functions. The scope of UI designers is the tangible and visible components of this process.
General UI elements
UX and UI have a lot in common, but it is important to note the key differences between the two subjects. Again, UI is focused on the outside of the product, while UX is more about how people interact with the site or app. Here are the most common UI elements you need to know about in order to better understand the differences:
Information Components: UI designers use information components to expand the so-called. reader experience – to convey more information. Examples of information components are status indicators, notifications, and message boxes. All this is used as confirmation: the user has completed a certain task. Or to notify that a certain action is required on his part.
Breadcrumb Navigation
It is a design tool that visually improves the usability of a website.
This is how people see their location on a web page, in its hierarchical structure. Any fancy design elements are not required, you just need to show which section of the site the user is in. Typically, such links are placed at the top of the web page of online stores, or on other resources.
Input controls: Users are given multiple options to answer the question they are asked. These can be checkboxes, dropdown lists and radio buttons. The information should be short and concise to make it easier to understand the needs.
Experience Research
Without research, it will not be possible to learn about the needs and preferences of people. UX research is about finding what users want; the data obtained forms the basis of UX design. Companies and designers use research to draw conclusions about what works and what needs to be changed. There are several options for UX research.
Usability testing
The purpose of such a study is to find out how successful the product is; users participate in testing. This is how companies get real information about how people use a product or system, or how that product or system works. There are two main ways to test.
Usability testing on random users is a quick and cheap way for companies and researchers to get information from people who may not know about their product. Random people use the product and share their opinion.
Remote usability testing allows companies to conduct research while users are in their natural environment (for example, at home or in the office).
Usability testing tools
Such tools allow you to find out the opinion of users, analyze feedback, and make certain changes based on the data. If you're looking for a tool to help you figure out how easy your site or app is to use, you have two options:
Adobe Fireworks CS6 allows web designers to create graphics for web pages without having to delve into the intricacies of code or design. Adobe Fireworks has a number of advantages. This tool has impressive pixel accuracy, image compression options (JPEG, GIF, etc.), allowing users to create functional websites and build vectors.
With Adobe XD, you can design websites and mobile applications, as well as prototypes, wireframes, and vector graphics. You can share interactive prototypes across multiple platforms, including Windows, Mac, iOS, and Android—the tool is perfect for teamwork.
Axure RP Pro is another great tool for UX design, and it's free. Axure has several options, including prototyping and documentation. You can even create a user navigation map and site maps. Ideal for creating web and desktop applications, Axure provides users with the ability to quickly export to PDF or HTML.
This is a complex software with many specific functions, incl. non-destructive editing (meaning that Sketch won't change the pixel density of the image you're working with). Code export, pixel accuracy, prototyping, vector editing - these are the main advantages of Sketch.
6. Storyboarding software
You might be wondering why UX design needs a storyboard. But it's a good way to visually predict how a user will interact with your product in a broader context. There are several storyboarding tools, with different features and difficulty levels.
Storyboarder is a free development with basic functionality that is suitable for all designers, regardless of their skill level. This software quickly creates sketches or stick figures to describe a plan or idea. Another tool is Toon Boom Storyboard Pro. It combines the function of drawing, animation, camera control and many other options - for an annual or monthly fee. Wide functionality for sophisticated storytelling and detailed preparatory work. All of these are great for designers who are looking for an opportunity to visually tell their story through an interface.
How to become a UX designer?
If you love design, research, and working with people—listening to others about their experiences—then a career in UX design might be worth considering. In such a case, you will have to focus on the conceptual aspects of the design; create a quality user experience for other users.
There are several important steps on the road to becoming a UX designer. Many universities around the world offer their courses, but in order to enroll in them, 4 years of education in the field of design is usually a prerequisite. There are more flexible programs like Quinnipiac University Graduate Program in User Experience Design. There are also certification programs for professionals. Much depends on the duration of training and the level of training.
If you are ready to fulfill your dream of becoming a UX designer, you will need a resume and a vibrant portfolio. Resources like Dribbble or Behance come in handy. You can showcase your work on your own website built with builders like SquareSpace.
Do not lose sight of the following nuances:
visual appeal
The presentation is everything. The work should speak for itself... show, don't tell! Color choice, typography - it's all important.
Add an About Page
Why should someone hire you? What new can you bring to any organization? Show recruiters your unique vision, or what inspires you.
The employee of your dream company should have no difficulty navigating a portfolio site. Add sections such as contacts, resume, portfolio, about me, etc. to the menu. to make navigation easier.
Explain how you create your UX
Your future employer wants to understand your way of thinking. Add information that tells the recruiter about your UX research, brainstorming, design process, or prototyping.
Create an additional portfolio
Use other tools to make your work available on the web resources where designers and those who want to hire them spend their time,
Outcome
Whether you're a graphic designer, blogger, developer, or whatever, UX design is something that can help you and your company grow. A happy user is the key to success, but without thoughtful UX design, this will not be possible.
Technology is increasingly infiltrating everyday life, and successful UX design removes any barriers between the user and his device (or applications). UX design is now more important than ever - join this movement and reap the benefits for your business.
As a rule, to stimulate a person using a product, service, system, you need the opportunity to give a response. This response should be measured, with clearly defined communication, and, in most cases, produce a clear and semi-predictable response. And then it works.
The above is a basic definition of Interaction Design (IxD), bringing together the general trends of definitions given by renowned designers Dan Saffer. 1 ) and Robert Reimann 2 ), as well as the Interaction Design Association (Interaction Design Association 3 ).
It is also very important to note that interaction design is a concept quite different from other types of design. This is not information architecture, or industrial design. It's also not a kind of user interface. Interaction design is not any form or structure, but something more ephemeral - it is more about the concept of "why" and "when" rather than "what" and "how".
For any kind of design, the first task is to formulate what is called basics or basic elements. The creation of such semantic concepts provides:
- better communication between participants
- creation of common aesthetic concepts
- best learning tools
- research area
These and other reasons that are not significant at the moment are an occasion to talk about the basics.
What are grounds?
My first introduction to the "foundations" was while preparing the industrial design program at the Pratt Institute in Brooklyn, New York. The program was created by Roweena Reed Kostellow based on her founding educational philosophy (for more details see Elements of Design by Gail Greet Hanna - Elements of design Gail Greet Hannah 4 ).
According to Costello, there are six elements that form the foundations of industrial design: line, lighting and color, space, volume (dimensions), negative space (background), and texture (surface, texture). Mixing and experimenting with these elements is the heart of 3D shape design. Pratt Institute students mastered these fundamentals during a one-year course. They had to define boundaries and dependencies, discussing abstractions and real projects.
Since I am not the only person who has thought about these things, it can be assumed that we all think about it differently. For example, Den Saffer, in his book Designing Interactions, has a long chapter where he describes the elements of interaction design: time, movement, space, appearance, texture, and sound. Den's elements are laid out by how I can call them on the form to have interactivity, not by which form of interactivity will or won't be available to me, except maybe for a while.
If these are indeed grounds for interaction design, they should be completely abstracted from form and have no physical attributes.
Foundations of Interaction Design
Time
"Time" distinguishes interactive design from other types. This is the shell of our concepts of interactivity.
But time is not the only basis for interaction design. There are so many interrelated aspects of time manipulation. And as we all know, time is relative, it exists along many axes at the same moment. So there are three time-dependent foundations of interaction design:
Pace
Interaction design is all about creating a narrative, a gradual change in individual experience while still staying within boundaries. For example, if I use an email client, I would absolutely hate to turn on the stove at the moment when I write a letter.
The story has pace. We clearly understand this when we watch a movie. If the movie is good, we never look at the clock. Pace is also part of interactive design, because sometimes you may look at the clock not out of boredom, but because you want to see if you can complete the “interactivity” process in time.
In my opinion, pace in interaction design often correlates with what we can do at any given moment. At the same time, it is not enough for me to be able to do something, it is also necessary for me to be able to do it before moving on to the next step. For example, when I buy something, I can fill out one very huge form that has all the information about me and check all the data at once, or I can check the data in parts, dividing the verification process into several.
Since the total length of the fields is the same, the time to complete should also be about the same in each case, but the feel of the pace will be different in each design. In general, one large form is more efficient, and one divided into chunks is more manageable.
Reaction
The simplest way to define time in interaction design is "reaction time". How long does it take for the system to respond to an event? This happens when we see the cursor turn into an hourglass or the now-familiar progress bar and we wait for the system to respond to us, but other reaction times are important as well.
An action that takes place in real time (synchronously) is connected to the current moment, while an asynchronous action loses this connection. Because some systems are time sensitive, you need to know how to account for differences in these response types.
Context
Each basic element, such as time, must have a sub-element - "context". In our case, the interactivity of the course for a person, this means that the design itself cannot be considered. For example, when we say “time”, we cannot design an application without understanding how long a person can spend in direct contact with the system.
Alan Cooper and Robert Reimann in About Face 2.0 6 talk about the temporal context as the principle of "position". Here are four positions:
Metaphor
Metaphor is a literary device in which one well-understood phenomenon or concept is used to explain another concept that is more difficult to understand, or when it is difficult to explain it in another way. The virtual nature of computers requires finding "real" metaphors in order to explain to people all these nebulous things. What type and how many metaphors you use directly affects the quality and emotional perception of your product.
The most obvious example of a metaphor is an urn or trash can (in the operating system on your computer). The idea is that your files are in a virtual "bucket" or "bin" so if you make a mistake, you can dig in there (oops!) and restore them to their original state. And, of course, you can always "empty the bucket" by making the contents unrecoverable. Metaphor works well for all people because it connects accurately and flexibly to reality.
All metaphors are non-reverse. For example, we tried to use the term "remove" to quickly explain how to add something to a bucket or bin. But, after all, we can’t delete something in a real trash can or trash can, can we?
But sometimes the metaphor is too distant. Then it allows us to expand the boundaries of our imagination. If I have a note book, file cabinet, mailbox, calendar, and the like to work comfortably on my screen, I can call my objects cards, use a notepad, leave my messages in the mailbox, and mark appointments on the calendar, right? ?
But at the same time, metaphors serve the purpose better if they are slightly inaccurate, and the user himself must fill in the gap according to his own understanding of the subject. So, for example, we adapted desktop metaphors to our modern computers.
The interactivity designer must achieve this balance by carefully using the metaphors of his predecessors and building on top of them, for as long as the original metaphor (perhaps universally accepted) is able to resist new currents.
Abstraction
Working in tandem with metaphor, abstraction relates more to the physical and mental activity that is essential for interactivity to take place. I first started thinking about abstraction when I read an article by Jonas Lowgren 7 , about what he called the term "plasticity". After reading this article and using the term several times in conversations and discussions, I suddenly realized that what Jonas was really talking about was how the abstraction in the interface is the product display.
By and large, everything we see in a computer is initially an abstraction, since we have two primary interfaces for an input point - a mouse and a keyboard. Some do place the monitor inside a special kind of pointing device and lower the abstraction level for some type of interactivity, mostly for drawing. However, most of us use keystrokes, pointing, clicking, and moving the mouse across the screen.
Let's focus on "mouse farming". We are looking at a monitor where the cursor (in the form of an icon) moves according to mouse movements. Without looking at the mouse (usually) we move it and, in accordance with the given direction, the icon on the screen (usually an arrow) moves too. Okay, let's sort. To the right and to the left works as it seems, but moving the mouse “away from you” moves the cursor up, and “towards you” moves the cursor down the screen. An excellent metaphor for the concept of perspective.
When we bring the icon to the target, we click on the mouse button. This is the highest level of abstraction. The mouse, monitor and processor work in unison and create a series of effects that we are connected to these three devices. But the connection is very, very abstract and must be studied.
There are different levels of abstraction in mouse behavior. My favorites for comparing this are Google Maps and MapQuest. In Google Maps, by clicking on the mouse button and moving my hand, I can move the center of the map area. There's a very fast reaction time, but the type of movement - moving my hand as if I were moving a piece of paper in a beam of light - is less abstract than in MapQuest, where I just click on a frame or on the map (setting the appropriate mode). You could say click is faster (smaller skill set), but it's more abstract, probably less fun, and definitely less precise. All this makes working with Google Maps (and its copycat) more enjoyable and efficient interactivity.
Systems are becoming more complex and more integrated into our lives. Many systems have become completely abstract, and it is not always good when complexity increases the abstractness of information. Each of us sooner or later came across screens that are sensitive to pressure. This is a sharp decrease in the level of abstraction when interacting with computer devices.
Some new and popular technologies are making it difficult for the new wave of interaction designers... The expanding world of spatial cues, RFID and other similar devices is giving abstraction a leap as there is simply no direct interface to interact with such devices. It is simply impossible for them to find simple effective metaphors to give users an understanding of the operation of such devices, like the metaphors that we have chosen for the mouse.
negative space
All "correct" design disciplines have a notion of the shape of negative space. In architecture and industrial design, these are cavities or spaces between arrays. In graphic design, this is "white space" without color, lines or shapes - like white spaces on a printed sheet of paper. Sound design uses silence, light design uses darkness.
So what is the negation of interactivity?
There are many places where "something" may be missing, or, to be more precise, there are many layers. Can we just talk about product performance? About our actions? About the space between action parts?
Pause– A very clear concept of the time when no actions related to interactivity are performed. Often interaction design tries to fill in these gaps, but maybe those gaps are useful.
stop and think– What to do if there is no reaction from the system? Think about how one student at the Swedish Interactivity Institute did and came up with a “thought ball”. If you think little, the ball rolls further and further.
Inactivity- Do nothing, the product does not respond to the action, maybe because of its incorrectness. This is not the same as a pause, since in this case, inactivity is a reaction to action, and not a stop in action.
Blending in interactivity
Unlike other formative design disciplines, interaction design is very complex because it requires other disciplines to build interactions. For this reason, interaction design is more like choreography. 8 or shooting a movie than with music or costume making. The core elements listed above are only suitable for interaction design or have been redefined exclusively for it.
For example, using color as an aesthetic tool improves or degrades the level of interactivity. In general, for most cases, an information architecture is required to prepare information before interactivity is created.
Ultimately, interaction design is the choreography or orchestral arrangement of other formative designs to create an interconnected dialogue between people and the products and systems around us.
4 As captured in this recent book: Hannah, Gail Greet, Elements of Design: Rowena Reed Kostellow and the Structure of Visual Relationships , New York: Princeton Architectural Press, 2002.
8 Heller, David (NKA Malouf, David), “Aesthetics and Interaction Design: Some Preliminary Thoughts.” (ACM required membership) , Interactions 12:5 (September-October 2005): 48-50.
As a rule, to stimulate a person using a product, service, system, you need the opportunity to give a response. This response should be measured, with clearly defined communication, and, in most cases, produce a clear and semi-predictable response. And then it works.
The above is a basic definition of Interaction Design (IxD), bringing together the general trends of definitions given by renowned designers Dan Saffer. 1 ) and Robert Reimann 2 ), as well as the Interaction Design Association (Interaction Design Association 3 ).
It is also very important to note that interaction design is a concept quite different from other types of design. This is not information architecture, or industrial design. It's also not a kind of user interface. Interaction design is not any form or structure, but something more ephemeral - it is more about the concept of "why" and "when" rather than "what" and "how".
For any kind of design, the first task is to formulate what is called basics or basic elements. The creation of such semantic concepts provides:
- better communication between participants
- creation of common aesthetic concepts
- best learning tools
- research area
What are grounds?
My first introduction to the "foundations" was while preparing the industrial design program at the Pratt Institute in Brooklyn, New York. The program was created by Roweena Reed Kostellow based on her founding educational philosophy (for more details see Elements of Design by Gail Greet Hanna - Elements of design Gail Greet Hannah 4 ).
According to Costello, there are six elements that form the foundations of industrial design: line, lighting and color, space, volume (dimensions), negative space (background), and texture (surface, texture). Mixing and experimenting with these elements is the heart of 3D shape design. Pratt Institute students mastered these fundamentals during a one-year course. They had to define boundaries and dependencies, discussing abstractions and real projects.
Since I am not the only person who has thought about these things, it can be assumed that we all think about it differently. For example, Den Saffer, in his book Designing Interactions, has a long chapter where he describes the elements of interaction design: time, movement, space, appearance, texture, and sound. Den's elements are laid out by how I can call them on the form to have interactivity, not by which form of interactivity will or won't be available to me, except maybe for a while.
If these are indeed grounds for interaction design, they should be completely abstracted from form and have no physical attributes.
Foundations of Interaction Design
Time
"Time" distinguishes interactive design from other types. This is the shell of our concepts of interactivity.
But time is not the only basis for interaction design. There are so many interrelated aspects of time manipulation. And as we all know, time is relative, it exists along many axes at the same moment. So there are three time-dependent foundations of interaction design:
Pace
Interaction design is all about creating a narrative, a gradual change in individual experience while still staying within boundaries. For example, if I use an email client, I would absolutely hate to turn on the stove at the moment when I write a letter.
The story has pace. We clearly understand this when we watch a movie. If the movie is good, we never look at the clock. Pace is also part of interactive design, because sometimes you may look at the clock not out of boredom, but because you want to see if you can complete the “interactivity” process in time.
In my opinion, pace in interaction design often correlates with what we can do at any given moment. At the same time, it is not enough for me to be able to do something, it is also necessary for me to be able to do it before moving on to the next step. For example, when I buy something, I can fill out one very huge form that has all the information about me and check all the data at once, or I can check the data in parts, dividing the verification process into several.
Since the total length of the fields is the same, the time to complete should also be about the same in each case, but the feel of the pace will be different in each design. In general, one large form is more efficient, and one divided into chunks is more manageable.
Reaction
The simplest way to define time in interaction design is "reaction time". How long does it take for the system to respond to an event? This happens when we see the cursor turn into an hourglass or the now-familiar progress bar and we wait for the system to respond to us, but other reaction times are important as well.
An action that takes place in real time (synchronously) is connected to the current moment, while an asynchronous action loses this connection. Because some systems are time sensitive, you need to know how to account for differences in these response types.
Context
Each basic element, such as time, must have a sub-element - "context". In our case, the interactivity of the course for a person, this means that the design itself cannot be considered. For example, when we say “time”, we cannot design an application without understanding how long a person can spend in direct contact with the system.
Metaphor
Metaphor is a literary device in which one well-understood phenomenon or concept is used to explain another concept that is more difficult to understand, or when it is difficult to explain it in another way. The virtual nature of computers requires finding "real" metaphors in order to explain to people all these nebulous things. What type and how many metaphors you use directly affects the quality and emotional perception of your product.
The most obvious example of a metaphor is an urn or trash can (in the operating system on your computer). The idea is that your files are in a virtual "bucket" or "bin" so if you make a mistake, you can dig in there (oops!) and restore them to their original state. And, of course, you can always "empty the bucket" by making the contents unrecoverable. Metaphor works well for all people because it connects accurately and flexibly to reality.
All metaphors are non-reverse. For example, we tried to use the term "remove" to quickly explain how to add something to a bucket or bin. But, after all, we can’t delete something in a real trash can or trash can, can we?
But sometimes the metaphor is too distant. Then it allows us to expand the boundaries of our imagination. If I have a note book, file cabinet, mailbox, calendar, and the like to work comfortably on my screen, I can call my objects cards, use a notepad, leave my messages in the mailbox, and mark appointments on the calendar, right? ?
But at the same time, metaphors serve the purpose better if they are slightly inaccurate, and the user himself must fill in the gap according to his own understanding of the subject. So, for example, we adapted desktop metaphors to our modern computers.
The interactivity designer must achieve this balance by carefully using the metaphors of his predecessors and building on top of them, for as long as the original metaphor (perhaps universally accepted) is able to resist new currents.
Abstraction
Working in tandem with metaphor, abstraction relates more to the physical and mental activity that is essential for interactivity to take place. I first started thinking about abstraction when I read an article by Jonas Lowgren 7 , about what he called the term "plasticity". After reading this article and using the term several times in conversations and discussions, I suddenly realized that what Jonas was really talking about was how the abstraction in the interface is the product display.
By and large, everything we see in a computer is initially an abstraction, since we have two primary interfaces for an input point - a mouse and a keyboard. Some do place the monitor inside a special kind of pointing device and lower the abstraction level for some type of interactivity, mostly for drawing. However, most of us use keystrokes, pointing, clicking, and moving the mouse across the screen.
Let's focus on "mouse farming". We are looking at a monitor where the cursor (in the form of an icon) moves according to mouse movements. Without looking at the mouse (usually) we move it and, in accordance with the given direction, the icon on the screen (usually an arrow) moves too. Okay, let's sort. To the right and to the left works as it seems, but moving the mouse “away from you” moves the cursor up, and “towards you” moves the cursor down the screen. An excellent metaphor for the concept of perspective.
When we bring the icon to the target, we click on the mouse button. This is the highest level of abstraction. The mouse, monitor and processor work in unison and create a series of effects that we are connected to these three devices. But the connection is very, very abstract and must be studied.
There are different levels of abstraction in mouse behavior. My favorites for comparing this are Google Maps and MapQuest. In Google Maps, by clicking on the mouse button and moving my hand, I can move the center of the map area. There's a very fast reaction time, but the type of movement - moving my hand as if I were moving a piece of paper in a beam of light - is less abstract than in MapQuest, where I just click on a frame or on the map (setting the appropriate mode). You could say click is faster (smaller skill set), but it's more abstract, probably less fun, and definitely less precise. All this makes working with Google Maps (and its copycat) more enjoyable and efficient interactivity.
Systems are becoming more complex and more integrated into our lives. Many systems have become completely abstract, and it is not always good when complexity increases the abstractness of information. Each of us sooner or later came across screens that are sensitive to pressure. This is a sharp decrease in the level of abstraction when interacting with computer devices.
Some new and popular technologies are making it difficult for the new wave of interaction designers... The expanding world of spatial cues, RFID and other similar devices is giving abstraction a leap as there is simply no direct interface to interact with such devices. It is simply impossible for them to find simple effective metaphors to give users an understanding of the operation of such devices, like the metaphors that we have chosen for the mouse.
negative space
All "correct" design disciplines have a notion of the shape of negative space. In architecture and industrial design, these are cavities or spaces between arrays. In graphic design, this is "white space" without color, lines or shapes - like white spaces on a printed sheet of paper. Sound design uses silence, light design uses darkness.
So what is the negation of interactivity?
There are many places where "something" may be missing, or, to be more precise, there are many layers. Can we just talk about product performance? About our actions? About the space between action parts?
Pause– A very clear concept of the time when no actions related to interactivity are performed. Often interaction design tries to fill in these gaps, but maybe those gaps are useful.
stop and think– What to do if there is no reaction from the system? Think about how one student at the Swedish Interactivity Institute did and came up with a “thought ball”. If you think little, the ball rolls further and further.
Inactivity- Do nothing, the product does not respond to the action, maybe because of its incorrectness. This is not the same as a pause, since in this case, inactivity is a reaction to action, and not a stop in action.
Blending in interactivity
Unlike other formative design disciplines, interaction design is very complex because it requires other disciplines to build interactions. For this reason, interaction design is more like choreography. 8 or shooting a movie than with music or costume making. The core elements listed above are only suitable for interaction design or have been redefined exclusively for it.
For example, using color as an aesthetic tool improves or degrades the level of interactivity. In general, for most cases, an information architecture is required to prepare information before interactivity is created.
Ultimately, interaction design is the choreography or orchestral arrangement of other formative designs to create an interconnected dialogue between people and the products and systems around us.
4 As captured in this recent book: Hannah, Gail Greet, Elements of Design: Rowena Reed Kostellow and the Structure of Visual Relationships , New York: Princeton Architectural Press, 2002.
8 Heller, David (NKA Malouf, David), “Aesthetics and Interaction Design: Some Preliminary Thoughts.” (ACM required membership) , Interactions 12:5 (September-October 2005): 48-50.
From the author: The past year has brought a wave of new techniques, styles and trends, most of which have emerged to meet the needs of the growing mobile device market. Technological advances have changed user expectations for the aesthetics and functionality of websites and apps. In this article, we will discuss interactive website design, namely the top 5 trends of 2015.
Let's take a look at some of the common tactics described in Interaction Design Best Practices.
Framing– The way you present certain information. Instead of showing that card payment will cost more, one could include it in the total cost and present other payment methods as discounted.
Anchoring– The bottom line is to display a more expensive product above, thereby setting its price for the standard. In this case, cheaper goods will look much more attractive. The method is especially effective when paired with discounts, when the user clearly sees how much he can save.
Fear of loss“According to the results of the study, it turned out that the instinct of the buyer to avoid pain is much stronger than the instinct of pleasure from the purchase. Asking the question "If you don't sign up, you'll lose $10" is much more effective than "If you sign up, you'll save $10."
deficit The smaller the product, the greater the demand for it. If you take a closer look at the Groupon and Amazon sites, you'll notice how they emphasize product scarcity to drive conversions.
Invisible interface
Good design does not draw attention to itself. This design works in the background, giving users the feeling that everything they have achieved is due to their efforts alone. Below I have presented some useful ways to empower the user in interacting with the site:
Reducing and simplifying steps – The fewer steps a user takes to achieve a goal, the more successful your interface is. The steps may be small, but even if you save the user from one extra click, he will appreciate it. Just take a look at how Uber (screenshot below) turned the multi-step process of adding credit card details into one simple step.
Clear visual communication – Stick to a consistent visual theme and generic and clear icons so that the user doesn't get confused (i.e. mail icon means message list or inbox).
Forgiving Interface - Anticipate common user errors and set appropriate security controls. These measures include undo, autosave, multi-format data entry, and explanatory feedback.
Monitor User Movement - The best way to identify interface redundancy and unnecessary steps is to visualize the user's movement around the site. Jessica Downey uses her "tentacle map" as an example to create a visual map to help organize the stages correctly. Ryan Singer from Basecamp came up with a similar but faster way.
Meaning of spaces
The book "User Interface Best Practices in Web Design" says that empty space is not always boring. Spaces should be used as an active part of the design. In terms of interactive web design, spaces are pauses between words and sentences. Recognizing and processing elements from the screen quickly loses its meaning without a brief respite.
Below I have compiled a couple of tips on whitespace to remember:
Spaces create hierarchy - The more empty space around an object, the more attention is drawn to it. Only this trick can already help designers influence the visual hierarchy of what they want to look at first.
Modern trends and approaches in web development
Learn the algorithm for rapid growth from scratch in website building
Minimalism adds sophistication – By minimizing the number of elements and increasing white space, you give your site an air of elegance and luxury. This approach is often seen on fashion brand websites.
Space Affects Clarity – Whitespace isn’t just used for backgrounds: if you take everything aside and look at the design at the atomic level, whitespace can either improve or detract from the readability of text. In our case, clarity refers to the ease of reading complex letters in a word. Follow these line/letter spacing tips to make sure your text is readable.
Interface text is also part of the design
Developing the analogy of user interaction as a dialogue, we can say that the interface should choose its words carefully. Everything on the screen of an app or website is considered an interface, and text is no exception. If the meaning of the written words does not match the purpose of the site, even the best font will not help.
It will not save you that your body text can take on various shapes and sizes. Usually, all text can be divided and changed into categories. The words of welcome can be casual or friendly, but the call-to-action text on the same page should be bolder and more concise. Regardless of the purpose of your text, the following tips can help convey the right message to the user:
Know Your Audience - This advice is as old as time. Know your users and what they want you to tell them. For example, on a site for children, words or phrases may be repeated to attract attention, while on a legal site this approach is not welcome.
Determine the context of your site - Are you writing for a website or application? Home page or description page? Just as you changed the body text for the audience, change the site for the usage environment. If your app is designed for use in busy or distracting situations (Waze while driving), text reduction will speed up information processing.
Show your personality - Your writing style contributes to the overall mood and atmosphere of the site as much as a strong image or smooth animation. It is necessary to understand what emotions certain colors evoke. Text should not conflict with visual interaction.
Great design
Last but not least, good interactive design is always nice. Emotional connection with users is the most reliable way to gain trust. When it comes to design, the heart is just as important as the mind.
Using MailChimp as an example, the confirmation window is an essential part of engaging users through email marketing. A funny picture and funny text only add to the enjoyment of using the site (not to mention the fact that this approach reduces the annoyance of bulk mailing). Below I've put together some quick tips:
Don't sacrifice usability - Think of great design as the icing on the cake: the icing dilutes the flavor of the cake, but it doesn't add anything on its own. Never sacrifice design for clarity.
Break away from the familiar - As Ben Rowe said, your primary task is to create "meaningful delight." How can your website or app get people into a state where there is no limit to what they can do?
Research - Users love surprises. Appropriate micro-interactions (such as fading out animations when the user has completed a task) can make fairly common tasks more emotionally rewarding. The image below shows how even a simple fade-in animation adds fun to repetitive actions.
