Clickable Mockups – Wireframes with super interactivity.
What good is a wireframe if you cannot simulate the basic navigation using links across different pages?
The navigation is done by pressing the shift key and the mouse button on the linked text. In the presentation mode, it will behave just like a web page.
Recently, we introduced the linking of objects through Icons and a new dedicated icon named 'hotspot'.
Hotspot is just an Icon with a square frame, the first icon you see in the icon list
When you drag the hotspot, it comes with a transparent background by default
You can drag and expand or contract the size the way you do it with any other icon
You can overlay this hotspot icon over any other widget to simulate clickability.
Above, the hotspot is stretched and overlayed on top of the comment bubble.
But where is the link?
All icons have the ability to define the link the same we define links for the text widgets.
Double click on the hotspot to bring up the text editor
Now you can press shift and the mouse button on the hotspot icon to jump to the linked page.
Similary you can drag any icon and add the link.
For e.g Consider the Map icon
We will add a link to this Map icon by just including the link tag (make it clickable)
NOTE: The position of the link tag is not relevant. You can place the link tag anywhere before the text, after the text, middle of text or without text.
In between text
With no text
Remember: For external links, the link SHOULD include the full url and start with http://
For internal pages you just need the document reference as explained in the clickable prototyping with text widgets
Posted in 05 - Tutorials