UX Concept: Interaction Design Sketches from Flow Diagram

Intro

This Interaction Design for Desktop project is the second and last part of the Concept Block of my UX Case Study. The process has been guided and developed during my studies at the UX Design Institute.

The study aims at designing a hotel booking system that is aligned with users’ needs while following the design thinking process. The main purpose is to declutter the interface while reducing the number of steps. The outcome is to prototype a booking system that sparks joy in the eyes of users. Such products facilitate experiences smoothly and enjoyably.

Interaction Design as part of the UX process

Let’s first give a definition of what Interaction Design is as a discipline. The definition given by John Kolko¹ best describes it as:

“the creation of a dialogue between a person and a product, system, or service. This dialogue is both physical and emotional in nature and is manifested in the interplay between form, function, and technology as experienced over time.”

- John Kolko, author of Thoughts on Interaction Design

Even though it might be easy to confuse IxD with UX, it is important to understand they are different disciplines, but that they integrate each other. It could be said that IxD is part of UX, and to explain that we can refer to the illustration below.

Interaction design is a part of UX design. Image by Dan Saffer.

How do we know we are following the right IxD guidances when designing?

According to Usability.gov, asking ourselves these questions can help us prototype digital products successfully in the presence of interactive elements¹:

• What commands can a user give to interact with the interface?
• What about the appearance (color, shape, size, etc) gives the user a clue about how it may function?
• What information do you provide to let a user know what will happen before they perform an action?
• Are there constraints put in place to help prevent errors?
• Do error messages provide a way for the user to correct the problem or explain why the error occurred?
• What feedback does a user get once an action is performed?
• How long between an action and a product’s response time?
• Are the interface elements a reasonable size to interact with?
• Are edges and corners strategically being used to locate interactive elements like menus?
• Is information chunked into a few items at a time?
• Are familiar formats used?

Objectives

• Creating a list of screens to design based on previously built Flow Diagram.
• Translating, visually through sketches, all the user goals and pain points identified in previous researches and analyses.
• Sketching screens until the flow is completely represented.
• Finalising the sketches and photographing/documenting the results.

Sketches’ Screen States

• Homepage
• Search
• Results
• Booking Confirmation
• Payment
• Successful Booking Confirmation

Sketching the interactions

The first actions went into reviewing the flow diagram and thinking about how each step of the flow fits into the screen states visually.

Keeping the main established problems in mind, “reduce the number of steps” and “declutter the interface”, I proceeded by reviewing my notes from my benchmarking and making annotations on successful UI practices. Then, moved into drafting on a piece of paper very vaguely how will the screens be structured. After that, following the flow I created in previous steps, I tweaked and adapted the sketches trying to give a solution to the stated UX problems.

Progress of paper sketches.

The sketches have been drafted in a gray scale manner using regular black pencil and pen, as well as black/yellow marker pens for highlights. The yellow sections can be interpreted as the actions taken by the user as they flow through the product.

As previously advertised, my handwriting is quite hard to read *even for myself at times*, but I did my best to try to visualise the screens and how the prototype will start to build in the next steps. These sketches and interactions are the foundation of my future Hotel booking system prototype. Excited to get into digital and start giving life to this whole process!

Final result

Hopefully, these insights can be of any help to anyone out there reading this article! This is the last part of my UX Concept Block. The next phase is digitally prototyping and wireframing the final design, and with that starts the UX Design Block of my Case Study. I will be posting the next project soonish. Wishing everybody a great start to the weekend! Cheers ✨

[1]Nick Babich. XD Adobe Ideas. What is Interaction Design and How Does it Compares to UX? https://xd.adobe.com/ideas/principles/human-computer-interaction/what-is-interaction-design/#:~:text=For%20UX%20designers%2C%20the%20moment,a%20part%20of%20UX%20design.