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.

1 Like

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.


The left image is a wireflow. Navigation is best expressed as a sitemap. No screens or wireframes involved. Here is an example (not perfect), What is a sitemap? - Every Interaction.


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