Layout
Principles
When creating an interface design exclusive to Zenbo, try to imagine all possible scenarios in which Zenbo will utilize these functions. Note that not all designs for smartphones or tablets, which are used in close proximity, are applicable to Zenbo, whose screen might be more than 10 feet away from the user.therefore, all visual layouts designed specifically for tablet devices are not suitable as Zenbo's interface. In order to meet the requirements of additional usage scenarios, Zenbo's GUI layout and partition must conform to a set of rules concerning their proportions relative to the screen size. Zenbo's GUI layout and partition are designed based on how far away the user is located (at a long, medium, or short distance) as well as their age group. The fonts, button locations, and corresponding proportions are designed to facilitate the interaction between Zenbo and its users.
Strctures
The screen of each app consists of four principal parts: the title area near the top, which is immediately followed by the text area, buttons, and the page indicator at the bottom. The areas that are actually displayed will differ from one app to another based on their specific requirements.
Layout measurement
Title Height: 97dp
Content Height: 420dp
System buttons area Height: 215dp
Page indicators Height: 68dp
Left and right content padding: 68dp
- Multimedia Grid view
The Multimedia Grid view is appropriate for browsing, photos or for displaying any page that needs to show cover photos or thumbnails with themes and brief introductions. When using this particular layout, the designer must reserve the space below the grid for two rows of buttons and the page indicator.
- Contact list
The conntact is suitable for screen layouts that require quick browsing and the display of photos and icons. The designer must be aware that on this type of screens, there can be at most two lines of text in the title area, and that it is necessary to reserve the space for two rows of buttons and the page indicator at the bottom of the screen.
- Single-column list view
This layout is suitable for the display of a longer text string. Comply with the "three items per page" display rule and reserve the space for two rows of buttons and page indicator at the bottom of the screen.
- Double-column list view
This layout is more appropriate for displaying succinct information, with two columns (left and right) and three rows on a single page. For numbering, please follow the rule for horizontal, left-to-right progression.
- List view type
Three views are provided based on their operating characteristics:
1. Single selection: The user selects exactly one item from a list, after which the selected item will be activated. Example: Asking the user to open or close, or turning something on or off.
2. Multiple selections: The user selects more than one item from a list, after which a "Confirm" button is presented to the user to finalize the selection and also a button needs to combine the numbers of selected items at the button which could inform user how many items has been selected. Example: Selecting record items should be deleted. When presenting multiple-selection options, it is advisable to include the "Delete (N) ", "Select All" and "Clear All" buttons.
3. List of items: The user is presented with a series of items; it is possible to perform a single operation on all items on this list simultaneously. Common examples include: the address book and to-do lists.
i. Touching a single item: Enter the item for further details, e.g. a contact's detailed information.
ii. If the list consists of a large number of items, it is recommended that functions which allow the user to filter, sort, or search be provided to facilitate the location of desired information.
iii. After touching the "Multiple Selection" button, the user will enter multiple-selection mode and will be able to select multiple items at once for file deletion or other administrative tasks.
Multiple selections (nothing has been selected)
Multiple selections (while performing selection)
Multiple selections (all items are selected)
- The hint page
If a system command is more complex, or if the user is expected to respond but has failed to respond after 12 seconds have elapsed, Zenbo will use its hint screen to display various commands from the bottom to the top, which are appropriate for the context. This helps to train users in the use of voice commands as well in their interaction with Zenbo. With respect to screen layout, it is sufficient to reserve enough space for just one line of system buttons, so that more space can be allocated to the main area.
On the hint screen, each command is accompanied by displaying an voice icon displaying a simple human profile, which is used to indicate that the item's text can be used as a voice command. Both the icon and the title area utilize the monochrome blue (#12afe2) color with a list of text strings in white to provide the list of commands available to the user.
- Calling a contact
On the screen for making a phone call to a contact, the contact's name and account number should be displayed on the title area, and more importantly, the main area should also show the contact's photo; therefore, the photo in the main area should be surrounded by a circle decorated with a color gradient.
- Voice input
Voice input is the default input method for Zenbo. As soon as voice input is activated, it is necessary to take notice whether there are audio interferences coming from the application itself or from the TTS (Text to speed) .
- IME (Input Method Editor)
If voice input is not suitable, switch to the keypad input mode.
- Interface for setting time and units
When entering the time or units, it is recommended that an analog style up-down slider interface be used in order to provide a clearer and more interactive experience.
- Loading
When an app is loading or when the system is being updated, it is necessary to display this screen; there are no exceptions.
