This guide provides clear and practical Kiosk design guidelines so you can create user-friendly and efficient Kiosk pages that look good and work well.
A downloadable zip file is attached at the bottom of this article that contains templates of the kiosk elements for you to upload into your design software as overlays so you can accurately see how your designs will look once loaded into your kiosk flow.
Size Recommendations
Before you start designing any of your pages you will need to identify the size required for your device. For most iPads and devices used, the majority of Patch accounts use 2048 X 1536 for their designs or at least as a starting point.
However, since you are not restricted to a single type of device there will be variations you might need to account for. This means that a one-size-fits-all recommendation cannot be made. Please consider the following size recommendations as general information for your designs.
Keep in mind that any changes that are made during the design process will be reflected immediately in the preview. As a result, you will be able to determine whether an image you have created will fit.
General Guidelines
Ideal Aspect Ratio: 3:4
Max File Size: 20MB
Common Tablet Resolutions (in pixels)
-
- 768x1024
- 800x1280
- 962x601
- 1280x800
- 601x962
Supported iPad Generations
-
- iPad Pro 12.9” (1st – 6th gen)
- iPad Pro 11” (1st – 4th gen)
- iPad Pro 10.5”
- iPad Pro 9.7”
- iPad (5th – 10th gen)
- iPad Air (3rd – 4th gen)
- iPad Air 2
- iPad mini (4th –6th gen)
iPad Sizing Guide
NOT SUPPORTED:
-
- iPad mini (1st – 3rd gen)
- iPad (1st – 2nd gen)
- Any iPad not compatible with iOS 15 or higher
Welcome Page
This page is the first thing your customers will see when interacting with your kiosk. It's critical to make an excellent first impression. Therefore, design the page carefully. Keep it simple and straightforward. Provide clear instructions and make sure the experience is intuitive.
Background Image
To ensure that your background image is readable, design it to account for the space the phone number pad and other keyboard options will take up.
Patch Number Pad takes up 40% (410px) of the right-hand side of the screen
Device Email Keyboard and Device Number Pad are centered, take up the full width of the kiosk page, and have a height of 221px.
*Please note that screen sizes may differ, and thus exact sizing is not possible. These numbers are provided as a general guideline.
Check-in Button
Your check-in button text should be short and sweet. Avoid more than two lines of text (or 30 characters) as it makes words harder for customers to read.
Patch Logo
Each Welcome Page includes our logo in the bottom left-hand corner. This logo will be 107px wide and 28px tall. Leave room for the logo so that it doesn't cover any text or necessary parts of the background image. On a screen with a 1080x810 resolution, the logo will sit 16px from the left side and the bottom of the screen.
Keyboard Spacing
It’s important that your designs account for the size of the keyboard on the Welcome Page. Use these pixel specifications as a guideline when creating your background designs to ensure that the images follow the recommendations on the previous page.
Page Elements
OS Header
Kiosk designs need to account for the iOS header, pictured below. Within the Kiosk editor, a placeholder header bar is included to give you an idea of what the final screen will look like.
When designing your flow pages, keep in mind the following:
-
- The header bar is 20px wide
- This bar is not editable in any way as it is an iOS feature
Page Headers
On certain pages, you can add a header in order to provide important information about what content the page contains.
When adding a header, keep in mind the following:
-
- Header text is 32px in size
- The header container is 72px tall; the width is dependent on how much text you need
- Try to keep the header text to one line, or 70 characters
Top Menu Bar
You can choose to include this top menu bar within your Kiosk flow. This menu bar allows users to edit their account information and notification preferences from directly within the Kiosk!
When designing your flow pages, keep in mind the following:
-
- The top menu bar measures 48px tall
Next & Back Button Spacing
On some of your flow pages, you have the option of showing or hiding the Back or Next buttons.
When designing your pages, keep in mind the following:
-
- The following pixel specifications are based on a resolution of 1080x810px
- These buttons will resize based on the tablet being used
Other Pages
Fields Page
-
- Choose a background image carefully as the fields section is very transparent. If at all possible, choose an image that is as close to a solid color as possible
Offers Page
-
- Each SmartOffer is 256x584px
- Make sure that your images don’t clash and cause legibility issues
- The Default Offer Header Image displays on the top of your SmartOffer
- This image may be up to 572px wide and should be exactly 220px tall
- The Default Offer Background Image has a max width of 640px and a height of 960px
Splash Page
-
- Use this page to show a graphic that takes up the entire screen
- Use this page to show a graphic that takes up the entire screen
HTML Page
-
- This page should be used sparingly so that consistency is maintained between all other kiosk pages
- It is recommended that only someone experienced in HTML, CSS, and/or JavaScript use this page
Message Page
-
- Choose a background image carefully so that customers can read your message
- The message page comes with a built-in Header that can be used without the need for custom code
- The rest of the text on the page will need to be done using custom code. Experience with HTML is recommended
Selection Page
-
- Another page that requires careful consideration of a background image
- Limit text per option to one line or 65 characters
Other Design Best Practices
Color
Color can enhance your marketing strategies – but only when applied properly. Colors can evoke certain emotions in people, so it's important to choose them carefully. The wrong color can confuse viewers and turn them away. Additionally, not every color is legible or effective on a tablet. It's essential to be mindful of the color palette you use when creating kiosk pages. Below are some tips, tricks, and rules for choosing colors that work best.
The 60/30/10 Rule
Typically used for interior design, this rule refers to the balance in usage of a primary, secondary, and accent color, and is helpful when determining how to apply a color palette even to digital products. This rule states that in a design, 60% of the color used should be the primary color, 30% should be the secondary color, and only 10% should be the accent color. This way, you can highlight important information without overshadowing other aspects of the design.
Contrast
It is very important that a color palette has a high level of contrast for it to be effective. When contrast is not used correctly, words become illegible and therefore difficult to interact with. Color contrast should always be double-checked using an online tool that checks colors using web accessibility guidelines. As a result, everyone can access and read your kiosk pages.
Resources
https://coolors.co/ -- great for creating or finding color palettes
https://accessibleweb.com/color-contrast-checker/ -- checks colors for web accessibility
Further Reading
https://blog.hubspot.com/marketing/color-theory-design
https://www.flux-academy.com/blog/how-to-strategically-use-color-in-website-design
https://www.wordstream.com/blog/ws/2022/07/12/color-psychology-marketing
Typography
Typography, or how you style your copy, is vital to a legible kiosk flow. Because kiosks are on smaller screens, it's imperative that careful consideration is given to font choice and font size. Using a font size that is too small can make it difficult for users to read, leading to frustration and confusion. On the other hand, too large a font size can reduce the amount of content that can be viewed on the screen. Choosing a font that is easily legible from a distance is key.
Font Size
For tablets, a font size between 18px and 24px is ideal; however, there is some wiggle room for header size and body copy. Always make sure that there is enough of a size difference between header font size and body font size so that customers know how to internalize the information presented. Make sure that you’re choosing a size that is legible!
Further Reading
https://blog.hubspot.com/website/website-typography
https://www.toptal.com/designers/typography/web-typography-infographic
https://blog.hubspot.com/website/how-to-choose-fonts-for-marketing
Comments
0 comments
Please sign in to leave a comment.