Image Requirements are used as a guideline for Users of a white label product. These guidelines may be useful in the process of creating:
- Items
- Combos
- Modifiers
- Discounts
- News
Items
Item images help users navigate through the Menu and help you give the best representation of your Items.
One Item can only have one image. It is displayed in multiple places across the ecosystem and it may be cropped depending on where the Item is being displayed. These guidelines will help you position the image correctly.
DO:
- Use background in white or color to make the visuals stand out
- Use professional photographer if you can
Our research shows that the majority of Users appreciate good looking images, and use it in decision making and a significant percentage of users base their decision solely on the displayed image.
Example of Item image:
Image requirements:
Image size: 1200x800px
Visible area:
Menu and Subcategory screen: 800x800px
Item screen - visible part on phones with notch: 1200x700px
Combos
Combo images help with an up-selling to a Combo and customizing.
The image must show main Combo Item and should show default Combo Items that User can order. Combo is presented with one image per Main Item. These guidelines will help you position the image correctly.
DO:
- Use background in white or color to make the visuals stand out
- Use professional photographer if you can
- Select carefully which Items you’ll show together with the main Item in Combo.
- Show default Items in Combo image
Our research shows that 92% of Users expect to get what is seen in the image. Also, 36% of Users assume that they’ll be able to make a custom selection of Items in a Combo.
DON'T:
- Show Items that aren’t in Combo
- Show Items in a group where only one can be selected
Example of Combo Meal image:
Image requirements:
Image size: 1200x800px
Visible area:
Combo layover: 800x800px
Item screen - visible part on phones with notch: 1200x700px
Combo Clusters
Combo Cluster represents a "container" for Combos and Items to be combined into a separate Combo Meal. Multiple Combos can be assigned to one Combo Cluster.
Combo Cluster images help with an up-selling and customizing. The image should show Combo Meal and the Main Item and/or any other Item that is in the Cluster.
DO:
- Use background in white or color to make the visuals stand out
- Use professional photographer if you can
- Select carefully which Combos/Items you’ll show together within a Combo Cluster.
- Show default Items/Combos in a Combo Cluster image
DON'T:
- Show Items that aren’t in a Combo Cluster
- Show Items in a group where only one can be selected
Image requirements:
Image size: 1200x800px
Visible area:
Combo Cluster layover: 800x800px
Item screen - visible part on phones with notch: 1200x700px
Modifiers
Modifiers are modifications or add-ons ordered as part of an Item. Images should represent a single Modifier and help User scan through the list of Modifiers and perform a quick selection. Modifiers should be single add-ons like:
- Toppings
- Spices
- Additional ingredients
- Full Items
Good visual representation of Modifiers improves User’s ordering experience. Use these guidelines to correctly position Modifiers in a Modifier Image.
DO:
- Modifier Images should have a white background for a User to be able to scan quickly through possible Modifiers
Example of Modifier image:
Image requirements:
Image size: 1200x800px
Visible area:
Item screen: 800x800px
Images for Discounts (Coupons, Promotions and Rewards)
Your app may have Coupons, Rewards, Promotions or all three and their images should follow the same set of guidelines. One image represents the Discount in all the places where the Discount is displayed (in the list of all available Discounts and the Discount preview or editing section).
Use guidelines to correctly position elements of the Discount in the Discount Image.
DO:
- Feature Items and Combos that the Discount applies to
- Use background color but avoid using white or light colors: If white or light color is used for a background, don’t use any text in the Coupon Image
- Use text for Discount images if possible: The text should emphasize the value of the Discount for the User (e.g. the prize or the Discount amount)
DON'T:
- Overlap the text and Items in Discount Images as it reduces readability
- Use a small text size on Discount Images: It needs to be readable in the list of Discounts where the Image is shown in a smaller format
- Include a disclaimer text in an image unless specifically advised by your counsel: Discount preview screen has a designated area that can include a legal disclaimer text
Example of Coupon image:
Example of Promotion image:
Example of Reward image:
Image requirements:
Image size: 1200x800px
Visible area:
Coupon/Reward preview - visible part on phones with notch: 1200x700px
Coupon/Reward screen: 1200x800px
News:
News images visually summarize topics of News articles. Articles are displayed in form of a list with image in the article header.
Use these guidelines to correctly position elements in a News article image.
DO:
- Visually saturated graphic, colorful and features a text snippet from the article
- Be careful with the text dimension
DON'T:
- Use white background for News images
Our research shows that users are highly interested in the News about the Offers, Campaigns and new Items, which provides a direct benefit to them. They don’t engage in corporate News.
Example News image:
Image requirements:
Image size: 1200x800px
Visible area:
News article - visible part on phones with notch: 1200x700px
Home screen and News screen: 1200x800px
Text on Images:
If you want to include text on your images (offer, reward, news …) take into account the safe areas shown on the image below. On some phones, the notch can overlap text. Also, you should not put the text below the close button which is located on the right.
Comments
0 comments
Please sign in to leave a comment.