Navigation vs Interaction vs Prototype vs Wireframe

Can anyone explain the difference between navigation vs interaction vs prototype vs wireframe. If possible, can you explain each with an example or ***share some sample pics or screens (recommended)***. What details should be included at each level?

Navigation, Interaction, Wireframe, Prototype. Is the order correct?

Navigation is a conceptual model in which you can define what content and information to take and Interaction shows how to organize and structure that information and content. You can do an interaction model on paper.

And Wireframe is rough designs and layouts of content and information. But, a Prototype is a trial version of those layouts, we can say it advanced Wireframe. So, it gives visual details of the content.

I think the order you have written Navigation, Interaction, Wireframe, Prototype is correct.

2 Likes

Thanks Sagar. Please refer attached image

If I have understood correctly, on the left its Navigation and on the right its Wireframe. Now where does Interaction fit in? How am supposed to draw it. Am still not clear with interaction!!

1 Like

On the Left can either be a User Flow or Navigation. You can use the navigation on the left to explain the required process, users are expected to take in completing a goal or task.

The wireframe forms the Navigation - In the navigation (on the left) you have 3 wireframes in there (Search Flight, Login Pop-up and the Passenger Details).

Interaction - Each arrows points to different wireframes on the Left (Navigation), the arrow represents the interactions you expect users to make.

I hope this answers your question.

3 Likes

@arihant_prasad This is totally true about Interaction said by @senimobs.

I think you mean what is different between interaction design and prototyping.
In my opinion Prototype is a visualization of wireframes which has relations from wireframes but when you add actions from an element in your prototype to another elements(usually in different page), you have an interaction design at the end.

Wireframes represent the fundamental aspects of a nascent product idea in a low-fidelity format. The wireframe outlines the page layout, information architecture, and path. Wireframes may be drawn by hand or produced digitally, and they feature primarily black, white, and grey colours.

Prototypes are working models of apps or websites used in the design process after wireframing. The user journey, the sequence of actions required to achieve particular outcomes, and potential problems with the flow of interaction can all be assessed through prototyping.

A mockup is a high-fidelity visualisation of the finished product design that delivers the appearance of the text, iconography, colour, and overall aesthetic of the design.

5 Most Popular Wireframing and Prototyping Tools

  1. Adobe XD
  2. Figma
  3. InVision

The key distinction between wireframes and prototypes is whether the mockup matches the final product as precisely as possible. With wireframing, you create the skeleton of the structure and the basic layout, including the path between screens. They are always static. Prototypes, in contrast, provide a peek at the interface, user behaviour, and visual elements. They are clickable and interactive.