Introduction

The following is a list of lessons we've learned from creating our own Intuiface experiences. Benefit from our mistakes and insights to ensure you maximize your time and optimize your results.

In all cases, be sure to test your work early and often on the target device. This is particularly important if deploying to an iPad, Android, Chrome, or Samsung SSP device, as the Windows-based Composer cannot reproduce those environments.

Overall Structure

• Neatly organize the structure of your experiences: Make good use of sequences and order your scenes in the way you would like your user to navigate through your app. Although this order has no direct impact on your navigation choices - you can have your audience move from any scene to any scene - it'll simplify your design efforts to keep a semblance of order. You can drag and drop scenes in the Scenes panel if you need to reorder them.
• Use meaningful names: Your content and assets should have self-explanatory names. The larger your experience gets, the harder it will be to remember acronyms and other indirections. This is particularly important if more than one person will be editing the same experience. Renaming is easy. For assets and collections, use the Properties panel. For content, right-click them in the Content Library and select Rename.
• Incorporate home and intro screens: A home screen acts as a menu pointing to the other scenes in your experience. Be creative - it doesn't have to be a simple table of contents. An intro screen is useful for self-service applications. It is displayed when the application is not being used. Typically triggered by an inactivity timer, it often contains an "attract loop" - a video designed to entice passers-by to engage.
• Limit the number of scenes: If your Experience gets more than 20 scenes, have a break. This can be due to 2 reasons:
  • Either you have a very specific need and complex information to share with the users. Ask yourself how much time the user will spend on the experience and if everything is really needed there.
  • Or you have several similar scenes that could be factorized. See how to simplify experiences using Excel. This can make you gain a lot of time and save a lot of brain power.
• Use inactivity timers: For those moments when your self-service application won't be used, consider introducing inactivity timers to trigger a return to the home or intro screen.
• Associate timers with assets: We have found that if the transition to a scene takes a long time due to the use of an underpowered PC, short timers associated with that scene will run and complete before the page has fully loaded. If this happens, triggers and actions meant to occur when the timer completes are never triggered. Associate your timer with one of the assets in the scene instead. This will ensure the timer won't start until the page has loaded.
• Properly format background graphics: Note the size of the image or video you use for a scene's background. If you are targeting a 1920-pixel x 1080-pixel display, then, for a perfect fit, the image or video must also be 1920 x 1080.
• Use Background property - Use the Background property of a scene instead of placing your background image or video in a layer behind other assets. The Background of a scene is the first element to be loaded when a transition occurs. Using an image as a background will make the transitions between scenes more fluid. To further improve the transition, the color of the background - i.e. any exposed area when the background image/video is smaller than the screen itself - should reflect the image/video base color.
• Select your loading indicator preference: By default, the red Intuiface loading indicator is selected. If this doesn’t match your graphic standards, you can choose not to have a loading indicator at all or to select the universal loading indicator. See Project settings for more information.

Design

• Create visible navigation options: Make sure navigation options away from the active scene are always obvious. You don’t want your users to feel stuck.
• Keep the target screen dimensions in mind: If you are building for a large screen, you can afford to insert a lot of small details. If it’s for a small screen, keep the design simple.
• Make use of hide/show actions: Use designs that progressively show and hide content. First, hidden assets are not loaded into memory, which means the more your design hides content, the faster a given scene loads when first visited. Second, using hide and show creates a very dynamic experience for your audience without requiring navigation between scenes.
• Be creative with your background: It doesn't just have to be a solid color. Use images and even videos. Each scene can be different, although it may be more likely that you will reuse the same background on all scenes.
• Use Triggers and Actions: Don’t be scared of triggers and actions. They add a ton of capability and engagement to your Intuiface experiences. Use them! Remember to test your project often to ensure that show/hide triggers are working as expected.
• Use multiple Actions on the same Trigger: This is particularly useful when creating timed events in your experience. To delay successive actions started by the same trigger, use the animation timeline to space them out at the intervals you require.

Buttons Buttons Buttons

• Take advantage of the Image Button pressed and released state images: The visual feedback generated by having different images for the pressed and released states of an Image Button is extremely useful. The simplest way to achieve a good effect is to shade (opacify) the released image by 30%, thereby creating the pressed image. This pressed state will appear when the Image Button is touched.
• On the other hand, consider the use of invisible buttons: Your audience doesn't know you've placed an invisible button on top of an image, video, or other graphical element. Use this invisible button technique to free your design efforts from having to accommodate explicit navigation controls. Or create interactive points of interest on a schematic or map. See this article for more details. And don't forget to test them in Play Mode and on the target device!
• Be smart about where to position your home button: A user naturally searches the top left or right corners of a display to find the return-to-home button. The top left is preferred because it is similar to the location of the Back button in a Web browser.
• Customize button and control styles for assets: Use the customization options of your assets to customize the styles of embedded buttons and controls to fit the design of your experience. For example, you can tune the radius of elements to make them more or less square vs. round, tune their transparency & color, and even turn on/off the shadow effect. Want to use your own button icons? You can do that as well by following the directions here.
• Use buttons for more than just navigation: Buttons can be used to trigger ANY action. Be creative, and remember to test your work!
• Worst case scenario: you are using an image asset with the is tapped trigger. The user will not get proper feedback, but that's okay, it will work. Unless you have a very good reason, avoid using the is double-tapped trigger. A finger is not a mouse pointer!

Working with Assets

• Change the appearance of your assets: You can choose between three shadow effects for assets: rectangle, drop shadow or no effect. Typically, the drop shadow or no shadow effect is preferable, particularly if your images include transparent regions at their edges.
• Tune soft move of an asset: In the Behavior section of a layer's Properties panel, you can tune the action of items when they are moved. When moved, an asset could come to a stop immediately or could drift after release. If you need to be very precise when touching an image, disable Allow soft move. On the other hand, allowing a soft move creates pleasant visual effects.
• Modify visuals when an asset is maximized: In the Content behavior section of a scene's Properties panel, use Background filter on maximize to specify the look of a scene in the background of a maximized asset. This property can make background items either blurred, hidden, or faded.
• Use layers to organize assets: Give some thought to how you can take advantage of arranging assets and collections by layer. For example, you may want to place navigation buttons in the bottom layer to ensure all on-screen action happens in front of them. NOTE: Dynamic alignment guides - the visual lines that let you know when a selected asset or collection is aligned with another asset or collection - are only displayed for assets and collections in the same layer.
• Delete unused content: Once you have finished your experience, it is a good idea to delete unused content in the Content Library. Doing so will ensure the file size of your project is as small as possible when you copy it to new PCs. Select Filter unused content from the filters toolbar button in the Content Library and then delete everything you see. NOTE: Files aren't actually deleted from your folder until the project is closed.
• Combine multiple assets into one background image: Is your background comprised of multiple static items? When your design is finished, take a snapshot of your screen while in Play Mode and use this image as a background image for each scene (i.e. for the Background property of each scene). Include navigation buttons in the snapshot; just overlay the background image of your buttons with transparent buttons placed on top. This will boost the performance of your project and make scene transitions smoother. Consider taking a snapshot of your scene if you have more than 20 Text and Image assets combined.

Navigation

• Consider the use of on-screen swipe gestures: Intuiface recognizes over 20 on-screen swipe gestures, from simple West and East finger drags to complex shapes. Experiment with these gestures to add a cool factor to your Intuiface experiences. For example, use those West/East gestures to trigger navigation to the previous and next scenes.
• Be sure to include navigation buttons: Systematically insert navigation buttons. This typically means the existence of Next, Previous, and Home buttons. Create a blank scene populated by these navigation buttons - supplemented with a background color, image, or video - and then copy/paste this scene to use it as a template for all scenes in your experience.
• Make good use of transition effects: Intuiface includes seven transition effects for navigation from one scene to another. Try out different options and choose those that make your users' experience more lively. You will find these effects listed as a parameter for navigation actions like Next and Previous. If your target device is a tablet or the Samsung SSP, be aware that most transition effects are not supported as they create a heavy resource load on the device that can slow the experience. See our iOS/Android and Samsung SSP limitations pages for which transitions are supported.

Performance optimization

We have so much to say on the topic that we created a dedicated article about performance optimization. See that article for details.