1. WHAT ARE PERCH TEMPLATES
Included in every PERCH unit is a set of design templates that allow you to quickly create your own interactive displays. By simply swapping assets within the template, you can completely change the design of your PERCH display in a flash.
What can I change without coding?
- background graphic
- button graphics and text (active and inactive states)
- product spotlight and spotlight during hover state
- display title or company logo
- post-pick-up animation graphics/particles
- “pick me up” graphic
- product-specific content, including images, product descriptions, videos or reviews
What can I change with coding?
The templates are coded in XML. In a process similar to using HTML on a website, you can change the XML to alter the arrangement of how elements are displayed. With more advanced XML, you can change the interactive behavior of the templates and customize the experience further.
2. TEMPLATE CATALOGUE
First we will start with the options where the product area and the content of each product are in the same spot, so the content will be displayed once the product is removed from the table.
Depending on the number of products these are the different layouts:
In the second group the content of every product is displayed in the center and the products are placed around. This system behaves as a switch, so depending which product is picked up the correspondent content will appear on the Content Product Area.
The options for this operation mode are:
For the form factor PERCH VERTICAL we have the following templates variations:
3 Products SWITCH
4 Products SWITCH
5 Products SWITCH
4. CONTENT OF EACH FOLDER
Inside each folder for the different number of products you will find:
The Perch App
A resources folder including:
- 3 XML files, that we will go through in the next section
- log.text, not to worry
- assets folder - containing all the separate assets that will be used in the App and that you will eventually replace with your own designs.
- A settings folder, with different files related to the Perch Vision System
5. CORRESPONDENCE OF THE DIGITAL CONTENT AND THE SYSTEM
Customizing Perch Templates with your own graphic resources is very easy. You just need to know where you should drop your assets.
This guide will give you a very detailed description of how to do it, taking as an example the 4 Products from the first group.
If you want to change the background you will have to do it in the BACKGROUND folder:
If you want to change the logo you will have to do it in the LOGO folder:
If you want to change the logo you will have to do it in the SPOTLIGHT folder:
PARTICLES EXPLOSION EFFECT
When the user picks up a product, there is an explosion of graphic particles emerging from the center of the product space.
If you want to use your own graphics you will have to place them in the PARTICLES folder. The explosion will be a combination of all the graphics you place in there.
This is a graphic cue for the user to know where to place the product back on the product area in the PERCH system.
If you want to use your own graphics you will have to place them in the HOVER SPOTLIGHT folder.
CONTENT A SELECTED
This is the content that will be shown when button1 is pressed by the user. It is also the de- fault content that is shown when the user picks up the product.
This content could be also a video or a slideshow of images. You just have to place it in the CONTENT_A folder.
CONTENT B SELECTED
This is the content that will be shown when button2 is pressed by the user.
This content could be also a single image or a slideshow of images. You just have to place it in the CONTENT_B folder.
Remember videos need to have a width divisible by 32 to be displayed correctly.
CONTENT C SELECTED
This is the content that will be shown when button3 is pressed by the user.
This content could be also a single image or a video. You just have to place it in the CONTENT_C folder.
These are the graphics of the non-selected buttons. You will have to place them in the BUTTONS folder.
6. BEST PRACTICES IN PERCH DESIGN
The visual hierarchy is reversed on PERCH. The bottom of the display is seen first. It is closest to the user and is not blocked by products.
- Don’t use text smaller than 12 point. Sans serif text is easier to read than serif text at small sizes.
- On a 40” x 25” PERCH displays, the resolution is 32 ppi (this is equal to 1280 / 40). Multiply this resolution by an object size in inches to get the size of a physical object in pixels. For example, an object 4 inches across will be 32 x 4 = 128 pixels across on the 40” x 25” table.
- On a 48” x 30” the resolution is 26.67 ppi.
- Always create a white “spotlight” where the products are. A spotlight with blurry edges will look better when the product is a little bit outside the area. Hard edge spotlights will look strange when products cross them.
- All buttons should be at least one hand’s width across. A hand is about 4 inches across. So, that’s 4 x 32 = 128 pixels on a 40” PERCH display.
- Buttons should generally be lined up horizontally, rather than stacked vertically.
- A product’s content should be located right by the product and should not extend into another product’s content area. This allows multiple people to interact simultaneously.
- Use brighter, colorful or high- contrast backgrounds. Don’t use black backgrounds unless you want them to disappear on the table.
- Associating sound with interactions is always a good thing. It significantly enhances the user experience and attracts a larger crowd with every interaction.
7. DOWNLOAD THE TEMPLATES
Here you can download resources folder for each design in the Templates Catalogue.
To run the App you will have to create a folder and drop this resources within the "settings" folder and the Perch App that you will find in your Perch Unit.