A Year of Interaction Design Lessons
In 2018 I set a goal — develop my skills as an Interaction Designer. The following is a recount of the past year, what I have learned and where I am going next.
My Goals
One of my personal goals for the year was to improve on my UX process by really diving into interaction design. During graduate school, I created interface designs and then built out prototypes with Processing, HTML, CSS and JS. I focused on function — creating linear experiences where the user would transition from one state to the next.
As an Experience Designer working on software and applications, interaction design has become a vital component of the product’s development. Interaction design determines how the product feels and gives the user a sense of its personality. Is this app playful or serious? Does it reprimand the user when they make a mistake or help facilitate the desired behavior?
Working with developers I have realized the importance of not only defining the layout and content of an interface but also it’s interaction, structure and transitions. As I am creating the visual layer I am constantly thinking about the interaction design: how are the elements presented to the user and in what manner? Is this information presented in a modal or a toast? How does the user transition from this state to the next? This past year I not only wanted to improve my own skill set but also experiment with different handoff methods for development.
The Lessons
1. Put interactions where they are needed
Interaction design is not including a fancy transition just to “delight” the user. Interactions should exist to indicate process and give feedback. Loading states, status indicators and verification toasts all signify that a backend process is occurring and gives a visual indication of the user’s state. The interaction should indicate meaning and there are moments where visual signifiers help illustrate what is going on to the user.
There are certain scenarios that need to be accounted for when creating a digital platform such as error handling, network errors, successful and unsuccessful transfer of information and loading states. As an Experience Designer, I need to imagine these scenarios and design for them so the user is not left stranded.
In the above example, the user lands on a skeleton loading page while information is being retrieved from the backend. With this implementation the user is not abandoned on a blank page, wondering if anything is occurring. This indicates that there is an ongoing process taking place.
2. Presentation matters
When creating these interactions it is important not only to define their function but also how they are presented to the user. Not every interaction calls for a modal with a primary and secondary action. Sometimes interactions should be subtle and do not require user input. When creating these designs I ask myself several questions: Does this interaction require the user’s full attention? Does the user need to make a decision to move forward or should an action be optional? How easy or difficult should it be for the user to complete this action? By placing myself in the mindset of the user and gauging the severity of the task I can make these design decisions.
It is important to note that not every notification requires the same pattern. There are times when you want the interaction to be difficult to fulfill, such as completing a destructive task. In this scenario, you may want to make the task a bit more difficult to complete by including a forcing function. A forcing function is a fail-safe mechanism where the user has to complete an extra step before the desired action is accomplished. For example, in many softwares when the user selects a file and then the delete button, a modal would appear asking them if this item should be deleted. The verification method confirms that the user intends to remove this file.
The example above illustrates two ways to present an error message. The first method is a modal that contains a primary action and a close button. This presentation creates an overlay on the entire page, dominating the user’s attention. The second method is a toast that is dismissible on tap or swipe. This method is visually less disruptive and does not require further action. Evaluate how the information should be presented when creating these states.
3. Consider how it feels
The type of animation greatly affects how the information is perceived. The animation curve should be representative of its content. Pop animations create a playful look and feel, while ease in-out animations can appear more natural. I evaluate the intention of the program when deciding which animation curve to use.
The speed of the animation should also be evaluated. Research that has been conducted on interface animations found that the ideal range for transitions to occur is between 200–500ms. If an animation occurs in less than 0.1 seconds the human brain perceives the interaction as instantaneous, while animations that occur over 1 second appear too slow. The animation duration should be appropriate for its content and not prevent the user from accomplishing their goal.
It is important to also consider how often the animation will occur. Would this animation appear every time the user selects the primary action button? Is this interaction still going to be “playful” the 10th time the user sees it? What about the 100th time? Could the animation distract the user from the intent of the messaging? The overall interaction design of a software should match its function.
4. Work with development
Creating the interaction is only half of the process, the second half is giving your work to development so they can implement it. It is important to collaborate with development during this process and not just throw the files over with the expectation that everything will be created to your specifications. Explain what is going on, why and when that interaction pattern appears. Some interactions may be difficult to recreate with code; therefore, it is important to convey the intent of the interaction and the overall feeling you want the user to experience.
5. Iterate on specification handoff
In the beginning of 2018, I would handoff interaction work by creating the prototype in Origami and recording videos. I found that only relying on a video asset leaves a lot of details up to interpretation. I wanted to improve the specification handoff process so I started to write very detailed descriptions of the interaction. By specifying the duration, type of animation curve, and transition changes the developers were given numerical values to work with which has reduced the rounds of feedback.
Conclusion
I learned a tremendous about interaction design in 2018. Working on various software and applications, I realized that interaction design is much more than animated micro-interactions; it is about bringing the program to life and defining its personality.
Instead of trying to learn 5 different prototyping tools this year I focused on one: Origami. Origami is a function based design program, where interactive prototypes are created by connecting patches to one another. By learning one program this year I was able to experiment with different concepts rapidly.
In 2019 I want to continue my growth and knowledge of interaction design by creating and testing prototypes frequently. I plan on continuing my iteration of handoff methods with development to further improve my workflow.
What is your interaction design process? Leave me a comment below!
Want to improve your design to development handoff? Check out my Sketch to Zeplin tutorial
Let’s Connect
Watch my Design Tutorials on Sketch, Zeplin and Origami
Follow me on Dribbble
