Intro
Last Updated: February 25, 2014
When designing for a back screen, consider the usage contexts. We see it as a secondary screen, rather, containing widgets and notifications. As opposed to the main screen, the interaction with the back screen is very limited—keep this in mind. Always check how the comps look on the EPD (Electrophoretic Display), as they can look a lot different than in graphic editor.
Gestures
There's a touch zone below the back screen. It accepts the following gestures: swipe left, swipe right, swipe left-right, swipe right-left, single tap, double tap, long tap. The following five gestures are available for the apps: swipe left, swipe right, swipe left-right, swipe right-left, single tap. Generally, they should behave quite intuitively—swipe to navigate (flip through pages of a book, for example), tap to confirm (think of it as an OK button).
Wallpaper App & Widgets
Wallpaper is an app typically used to customize the back screen. With Wallpaper, a user would choose a background image, select some widgets — for example, Twitter and weather — and arrange them on the screen. Just as any other YotaPhone apps, Wallpaper covers the back screen entirely.
Developers can build custom widgets which would be available like the widgets installed by default. To design a widget, one should follow the principles described below.
Working area
Wallpaper uses 4x8 grid to divide the 360x640px screen, so 1x1 element is 90x80px, and that is the minimum size of a widget. It is recommended to build 4-blocks widgets, as they generally are far more informative than 1- or 2-blocks ones. Of course, the size of each widget is determined by the amount of the data and common sense.
User experience
Ideally, a widget should solve exactly one problem, and do it in the best way possible. Remember that there is no interaction involved — user won't be able to scroll a widget or click on it — so make this static information block as useful as it can be.
Building blocks
All the familiar interface design tools can used to construct widgets: type, geometric shapes, images.
Typography
Minimum readable font size is 16pt. For text to be read comfortably from distance we recommend starting at 30pt.
States
Depending on the information available, the widget can be in a certain state, all of which should be considered while designing a widget. For instance, what happens if there's no data available? If there's too much information to fit it into a given container, what would happen to it? The mechanics of all widget elements should be described thoroughly so that users will get enjoyable and productive tools.
Back screen
Typography
Minimum readable font size is 18 pt, although 14 pt might be used for not so important information.
Light and Thin font styles get distorted on EPD. If you are determined to use such styles, it is recommended to set text in 36 pt or larger.
Thin serifs might not be displayed properly—be careful with serif fonts.
Colors
The display shows 16 shades of grey. We recommend pre-processing images to reduce the amount of shades and to get as much pure black and pure white colors as possible. Adjusting brightness and contrast can help, too. Due to particular qualities of the EPD, various shades can be displayed differently and visual artefacts may appear. Be careful.
The gradation of grey of the display is not the same as in Photoshop or Illustrator. Different shades of grey can look the same on the EPD.
It is recommended to use no more than two shades of grey for text elements on a single screen.
Vector graphics
1px-wide lines should be either strictly horizontal or vertical, but never diagonal — those could be distorted by the EPD. It is best to apply wider strokes in vector iconography.
Dashed 1px-wide lines would be almost invisible due to EPD specifics, so we recommend choosing the width of 2px at least.
Minimum icon size is 24x24 px; maximum is 34x34 px. Pay special attention to highly detailed, complex-shaped icons.
UX
There are four methods of refreshing the screen.
- DU, direct update (black and white) — all the pixels are updated; no blink effect. Recommended for fast updates, pop-up menus, handwriting. Drawing time: 250ms. Direct update is similar to full update (see below), but can draw only black and white pixels.
- A2, fast animation (black and white) — only the changed black and white pixels are updated; grayscale pixels won't be affected. There is no blink effect, but ghosting effect can appear. Recommended for simple animation, quick page skimming, menu scrolling, zooming. Drawing time: 120ms.
- Partial update (16-shades grayscale) — only the changed pixels are updated; slight blinking occurs. Ghosting effect can appear. Recommended for displaying text and icons. Drawing time: 500ms.
- Full update (16-shades grayscale) — all the pixels are updated; substantial blinking occurs. This method is recommended for displaying highly detailed images, as it clears the ghosting effect. Drawing time: 500ms.
Choose the most appropriate method depending on the context.
- If the image is purely black and white (no shades of grey whatsoever), respective screen area can be updated faster. This update method can be used for dynamic elements.
- Avoid using dark backgrounds, especially black, as there is a ghosting effect on the EPD: a shadow of an image may be visible after refreshing parts of the screen.
- The front-screen app which uses the back screen should include Put to back button. It should be positioned strictly in the upper right corner (see the screenshot).