Interaction Design (IxD)

(High-fidelity Prototype)

1. What is Interactive Experience

Interactive Experience (sometimes referred as high-fidelity prototype) is a computer-based interactive representation of the product in its closest resemblance to the final design in terms of details and functionality.
The Interactive Experience cover not only the user interface (UI) of the product in terms of visuals and aesthetics, but also the user experience (UX) aspects in terms of interactions, user flow and behavior.

The IX for Dwarves Design Website

2. Goals

  • This way allow yourself a window in between users. You can test your assumptions for the product to make improvements before the next user
  • Quickly show our design concepts to the developers and customers
  • While formal usability testing sessions are useful, you can use your interactive prototype to show and get quick feedback from a friend, or even your user to use the app. They will tell you what they think about it.

3. How to create

Actually, the best interaction is not the actual “cool,” “wow” animation or how it was actually coded. For example, Dribbble always showcases fancy and fabulous works, but some of the interactions and animations are unnecessary.
Simply put, the complicated animation does NOT equal to good interaction. If you create a complex animation that engineers could not implement it, it is a bad design.

Step 1: Hand sketch and map out the transitions of the interaction
First, you should quickly sketch some ideas on your notebook. This helps decide the key interactions, animations, and elements on the screen that are needed

Step 2: Get story ideas
Before starting the visual design, it’s better to understand the core concept behind this design, what kind of story or message we want to deliver to our user.

Step 3: Understand user behavior
It’s always better to use simple and intuitive interaction rather than complex interaction

Step 4: Logic between screens
Don’t just think about the interaction itself. Think in terms of screen to screen transition. Will two UI elements/components animate at the same time or independently? When will user swipe to next screen, or does it have a slightly staggered start time?

4. Tools

Proto.pie, Principle, Adobe XD, InVision, Figma

Work with us

Drop us a message if you need any helps from the Dwarves

Let's build