Navigation is critical to a good user experience on a mobile phone.
Mobile phones have small screens which can only display limited data. To convey a lot of information quickly, the user must navigate through a number of pages. This should therefore be easy and obvious. biNu has been designed so that all navigation can be achieved as quickly and painlessly as possible. Navigation is therefore supported in two ways:
- Using the number keys plus the 2 standard softkeys beneath the screen as ‘shortcut’ keys.
- Using the scroll keys for navigating up and down or left and right between all defined links on the page.
There is no fiddly pointer to move around the screen. Note also that the phone’s scroll keys are also used to scroll down to see hidden content on a long page. The way this works is that the page starts to scroll if the user clicks the down scroll button after selecting the last link in the visible page. Scrolling left and right across pages is possible but discouraged because it is tedious and confusing; providing a poor user experience.
Function Keys can be programmed in 4 ways, usually for navigation:
- Links (similar to hrefs in HTML) can be defined anywhere in the content using the definition. When these are encountered they are automatically assigned a number (between1-9) and are activated by pressing a number on the key pad.
- Specific keys can be programmed in the
section of a binu XML page using the definition. These key assignments are not displayed on the screen.
- A pop-up Menu can be defined in the
section. A list of key assignments is displayed on the screen.
- Navigation keys (up, down, left and right) are allocated automatically based on the layout of content and the execution of the pages.
biNu supports some special Navigation actions that are defined using the ActionType attribute of the
- ‘Back’ Navigation – navigates to the previous page
- ‘Home’ Navigation – navigates to a ‘home’ page. The ‘home’ page is specified in the biNu configuration and cannot be controlled by the Application Developer. It is usually the first page the user saw when they entered biNu.
- ‘AppHome’ Navigation – navigates to a ‘home’ page that can be specified by the Application Developer for the app. If the Application Home has not been specified the page redirects to the biNu 'home' page.
- ‘AppExit’ Navigation – navigates to the page from which the user most recently navigated into the application.
<actions> <action key="navigate" actionType="back" /> <action key="select" actionType="home" /> </actions>
- Back navigates the user to the previous page not the previous impression. Usually navigation is to the last impression on that page.
- If the page uses Proxy Scrolling the user will return to the top of the page.
- The user can traverse back through a history of pages providing each page has a ‘Back’ action defined. If the user goes to a page without a ‘Back’ action the chain is broken and the back history is reset.
- If the user travels ‘back’ to a page the normal refresh rules determine if the page is checked for expiry and refreshed. Generally if the user goes back to the top impression of a page its expiry will be checked. If the impression is down a page expiry is not checked.
Please see the Sample Code page for a more in-depth example.
Because navigation is implemented using scroll keys to jump between links or using the number pad as a shortcut, it is a lot quicker than standard mobile browsers that typically require several keystrokes to scroll to the desired navigation link and then select it.
User navigations in biNu are accelerated through Spidering, where the Server pre-caches pages linked by the numbered options onto the user's handset.
A pop-up menu can be defined within the
The displayed pop-up menu has a white background and green border. It is sized to fit the defined menu options up to a maximum of half the screen width. When the menu is displayed all other keys defined for the page are disabled.
The menu will only list keys 0-9 that are configured in the menu. If other keys (eg. Navigate) are defined in the menu section they will be activated but no listing will appear in the pop-up menu. When the pop-up menu is displayed, pressing the key that opened it will close the menu (this behaviour can be turned off by assigning the key within the menu segment).
A menu should be designed to have a maximum of 7 keys.
The scroll keys (up, down, left, right) will also work in a menu to move up or down within the menu.
The following code will open and close the pop-up in the left bottom corner of the screen. There will be 3 items in the menu which are selected by pressing keys 2,3 or 4.
<control> <actions> <menu key="action" align="Left"> <action key="2" text="Forward">http://mysite.com/test7.xml</action> <action key="3" text="Home">http://pip/home</action> <action key="4" text="Back" actionType="back" /> </menu> <action key="navigate">http://mysite.com/test4.xml</action> </actions> </control>
Note that to label or name a menu to alert users of the presence of a menu, there needs to be a text element defined at the bottom of the screen above the relevant button. This can be done by defining a pageSegment with a negative y value which means it is fixed at the bottom of the page, at a defined height above the bottom of the screen.
Invoking an External Browser
It is possible to open the mobile device’s browser to view content that has not been optimised for Binu. An action must be controlled in the control area with attribute: actionType=”browser”. The URL associated with the action will be opened in the browser rather than in Binu.
<control> <actions> <action key="1" actionType="browser">http://www.google.com</action> <action key="navigate">http://mysite.com/test1.xml</action> </actions> </control>
The browser can also be configured for a list item in a listing area:
<pageSegment x="0" y="72" h="-16"> <listing listName="applications" type="complex" vscroll="right"> <link name="url" actionType="browser" x="22" y="4" w="20" mode="truncate" style="body"> <field name="text" x="40" y="4" w="-10" mode="truncate" style="body"/></link> <text x="4" y="33" mode="truncate" style="headerText"> ----------ooooo0ooooo---------- </text> </listing> </pageSegment>
Touch Screen Support
biNu supports touch screen for all links. This means that if the handset supports touch, the user can directly select any link by touching within the defined area of the link (normally displayed using a bounding rectangle).