User interactions

Creating interactive links and buttons

It is easy to set up buttons, links & roll-overs in Quest. You can add a link or interaction to any layer or group in your page design. To get started, simply pick a layer and go to the right-side panel and add a feature.

Features are divided by interaction types at the top and layer attributes & effects at the bottom. When creating links and buttons, you’ll most likely want to start with a URL feature.

You can use the URL feature to launch a URL whenever a user clicks or taps on that layer. Because this is a native HTML URL, you have several options for what that can be. You can launch a new webpage on your site using a relative path, launch a webpage on some other website, launch the default email client like Outlook or Mail and pre-populate it with an email address and/or subject and message, or launch the native phone app on a phone to make a call to a number you provide. In Quest, we set up 5 of the most popular options as buttons to help you get started but you can literally use any standard HTML URL that exists.

Examples

External Site: www.wikipedia.com

Page / Relative Link: (Link to another page you have in your site on Quest) /contact

Send Email: (This will launch the default email client and pre-populate a new email)[e-mail]

Or with a CC, BCC, Subject & Body Message all pre-populated:

[e-mail]

Phone call: (Launches the phone app, usually mobile only) tel:[phone]

SMS: sms:[phone]

Or with a message sms:[phone]&body=Hi%2520there!

For a full list of examples you can check out this wikipedia page here: List of URI schemes

However, you can do more than simply launch URLs. You can also do things like triggering animations, hiding/showing elements on the page such as pop-ups or scroll down the page to other sections with anchor links.

You can choose the action you like by first choosing the interaction feature of “Click / Tap”. From here you can experiment with how you’d like the button or link to setup the interaction.

Last, you can also give the user feedback that they are on a button or link with some color or movement. Quest will also automatically convert the cursor to a hand icon when users roll-over interactive content.

For instance, you can setup a “While Hovering” feature with Animate Out and Scale Out to a button. This will scale the button up a little as the user rolls over it and back down to its original scale when they roll off. This just gives a nice subtle cue that the button can be clicked. You can always adjust the settings and amount of scale for the animation in the pop-up.

Another common button and link feature is changing the color of the button when you rollover it. To do this, again choose the “While Hovering” feature and this time choose Set Color. This will allow you to change the color of text or vector button layers when they are rolled over. “Set Color” is just a quick on and off option but you can always choose Animate Out > To Color to smoothly transition colors as well.