The following recommendations will help you to ensure that your experience and its embedded content will perform optimally on any platform supported by Intuiface. This includes general and platform-related optimization tips.
Before going through the tips and recommendations listed below, make sure that your device fits our software and hardware requirements.
Try to find the best balance between the display quality of your content and the performance limitations of the device used for your Intuiface experience (processor speed, graphics processor, available memory, ...)
- Keep your project simple – too many assets could result in a complicated user experience, negatively affecting performance.
- Use collections (e.g. Asset grid, Carousel, Flip Chart, Asset Flow) to display multiple items in a scene rather than distributing them independently.
- Test often, test early!
- Test often the project you are building directly on its designated platform, whether it's Windows, iPad, Android, ChromeOS, Samsung SSP, LG WebOS, and BrightSign, you should test your project on the target device before going live.
- Test your content as early as possible in the experience design process to anticipate and avoid unexpected issues later. Test early during the development stage using the target platform.
Performance in general is affected by the number of items in your experience and any third-party applications running simultaneously. This is true not only for Intuiface but for any software application.
- Use the exact pixel resolution of the target display: The New Project panel contains Display Size presets corresponding to the pixel dimensions of various tablets and displays. Choose the exact match whenever possible as this helps the image optimization process used by Intuiface to minimize the memory consumed by images.
- Minimize the size of content: Be proactive and limit content to the size of the target display: e.g. reducing the resolution of a video that will never be more than 500x300 in size. This will reduce the amount of system resources consumed. Check details for images and videos below.
- Hide everything the user is not meant to see: Everything visible - even if just slid off-screen - consumes device resources. To prevent this consumption, deselect the "Visible" property of every unseen asset, collection and control. When the item is meant to be revealed, use the show action to make the asset visible to the user. We also encourage you to use a placeholder to display a collection of videos / documents / web pages without loading all of them in the collection.
- Use visual effects sensibly: Intuiface includes some very cool visual effects like blur and grayscale. These effects are amazing but can require a lot of processing power. Feel free to use them but do so judiciously - e.g. apply one at a time and only as much as necessary. And always test your work.
- Use the "blur" effect strategically. In particular, if your design doesn't require you to dynamically change the amount of blur, we encourage you to pre-blur videos using 3rd party software instead of using Intuiface. If blurring with Intuiface, the lower the pixel definition of the video and the smaller the blur radius, the better system performance will be.
And don't forget, Test often, test early!
- Users reported that several antivirus software such as McAfee or Norton Antivirus degrades performances all the time (not only when scanning or updating). Properly configuring the antivirus software may increase performances at run-time.
- Ensure your graphics card drivers are up to date manufacturer drivers (not windows default). This is mandatory when your experience contains 3D assets, Video assets or the Web Browser asset. For more details, see our how to update video drivers article.
- Ensure the Power Plan for your PC is not set to a power saving option when running Composer and Player. Certainly, avoid running off battery power if possible.
And don't forget, Test often, test early!
These additional recommendations apply if you plan to run Intuiface Player on an iPad, Android, ChromeOS or Samsung Smart Signage Platform device.
- Avoid single scene experiences with lots of visible content: The issue here is the amount of system memory required to show everything in a single scene. Tablets have limited memory so designs should consider minimizing memory use to optimize performance. Note that hidden content doesn't consume system resources. The issue is visible content only.
- Be careful about referencing PDFs in Interface Assets such as Excel spreadsheets: When dynamically opening such a PDF, Player for Tablets & Kiosks will try to render the PDF on the fly, resulting in a (potentially significant) delay. When possible, add PDFs to your experience at design time so Composer can pre-process them and optimize the way Player will display them.
- If possible in your designs, enable "Maximize videos to fullscreen": In the Player settings panel, selecting this option will increase the amount of system resources dedicated to video playback. Specifically, maximized videos will use the native video player. iPad and Android feature only.
- Sparingly use "Adapt font size" and "Overflow behavior": Activating the Adapt font size property of the Text Asset and the Button Asset with text, and using anything other than the default "Overflow behavior" of "Clip", can cause slow scene loading times because of high computational requirements, particularly on Player platforms other than Windows. Only use this feature when required for your design.
And don't forget, Test often, test early!
If you have a large number of scenes with the same layout but different content, you can replace those scenes with a single template-like scene that dynamically reads content from an Excel spreadsheet. This approach not only simplifies maintenance - e.g. when content changes, just update the spreadsheet - but it will also improve experience performance. For information about this approach, see this article.
If you have the same content duplicated across several scenes (such as the home button, high-level menu or background video), you can put this content into Experience Layers. Experience layers are global to an experience and can thus appear in all scenes. They are most commonly used to create foreground and background elements that are shared across multiple scenes. The concept is similar to that of a slide show master template although experience layers offer more power and control. The main benefits are 1/ visually seamless transitions between scenes and 2/ experience size reduction. For information about this approach, see this article.
Specially useful when creating animations. Content added in experience layers will only load one time when the project is loaded, instead of being loaded each time a scene is being entered. For example, when creating animations with Intuiface, the animation triggers may fire before all the assets are loaded: this approach will thus avoid misfiring animation triggers.
- Image size should not exceed the pixel resolution of the target device. keep them below 2 to 3MB - a dimension of about 1920x1080.
- an Image shouldn't be bigger than the experience resolution. Instead of putting a big static image in a bottom layer of your scene, crop the image with your favorite editing tool to the experience resolution (ex: 1920 x 1080) and use it as a scene or experience background.
- When you don't need transparency in an image, use jpg instead of png.
- Ensure the resolution does not exceed the target display resolution or the original video content size.
- Limit bitrate as much as possible (1500 kB/s or less should be fine most of the time).
- Remove sound from the video if it is not used.
- Avoid playing more than one video simultaneously as this can radically improve performance.
- Avoid using animations while video playback is performed as this might impact the fluidity of your video.
- Keep page size below 500 Kb (compress images in your documents with Adobe Acrobat or Microsoft Office)
- Do not over-estimate the DPI you'll need on the target device. Increasing this appearance property will increase the memory burden of the device.
- Avoid looping animations
- Add play controls in the .swf files when possible
- Avoid pages with too many animations such as embedded Flash banners
- Use a GPU with enough computing power and memory to handle your 3D models
Useful optimization tools
All the tools mentioned below are free and are used by Intuiface team members on a daily basis.
File size analysis: WinDirStat
Tool website: https://windirstat.net/
This tool will give you a visual representation of the size of all files contained in your experience. It can quickly tell you which files need to be optimized, especially among images, videos, and PDFs.
When starting WinDirStat, select the your experience folder, then click OK.
The tool will generate a map of all the files contained in this folder and will color-code them by file type. Here is an example of our Intuiface Presentation sample (a version with local video files). Only the videos represent a big portion of the media files and their size is reasonable.
Below is another example where at least one image is much bigger than the others. A close look at this particular image shows it hadn't been resized before being imported in Composer and should be resized to a more appropriate resolution. (For example, a 200x200 Image Asset shouldn't contain a 4k image.)
Image resizer: PowerToys
Tool website: https://github.com/microsoft/PowerToys
Among these PowerToys, Image Resizer is a very lightweight yet powerful tool for batch resizing multiple images.
In this example, the 34 images were sized down from a total of 78MB to 35MB
Video encoder: Handbrake
Tool website: https://handbrake.fr/
Handbrake is an easy-to-use tool for re-encoding video with a framerate more appropriate for its usage in Intuiface. For regular Full HD projects, the fast 1080p30 preset works well, but you can test multiple presets or set your own parameters.
Change user's perception
Bear in mind two things: test early, test often. Normally you should test your project on the target device; however you don’t often have the chance to do so. When creating an experience, you should always think of the moments a user must wait for more content to be displayed. If there is no room for more performance enhancements described above, you should consider reading the advises below.
Create Background Operations
Parallel Actions triggered by timers or by scene loading, have two benefits — they are invisible to the user and happen before the user actually asks for them.
For example you can have a Web Browser Asset with opacity 0 loading in the background while the user still explores the scene or watches an animation. When the animation finished, the browser will be already loaded with content waiting to be discovered.
Using Dummy Placeholders
Placeholders will load faster than the actual content. Upon entering a scene, the first element to be loaded is its background. Having an image background containing all elements of the scene will give you the impression of fast reaction time, even if all content is not loaded yet. If you use this technique, make sure to keep the user busy until all content is loaded. You don’t want the user trying to interact with content that is not actually there yet.
Using dummy content is not speeding-up the experience or its loading process, but in the user’s mind it feels like it is.
Use Experience Layers
Experience Layers are great; I could speak for hours about why they should be used in experiences. They allow you to display fast content on any scene, basically all the content loads when you first run the experience and it is never unloaded (except if you hide the layer on a specific scene). Experience Layers allow you play music through the entire experience, making the loading times more bearable for your end user.
Performance-wise, Experience Layers are a very good way of having a part of the experience always there, whether it is a navigation menu, a video running on the background or simply a header and a footer for your experience, it will be loaded and ready to be used even if the rest of the content is not loaded yet.
To ensure the end user is not impacted by the loading waiting time, you can offer some animation distractions, an animated gif, a video, or even a mini game while the content loads in the background.