Mobile/UI/Designs/NonTouchScreen
Contents
Non-touch screen UI
A reference implmentation of this UI can be found here: [1]
Any ideas or help are welcome. Contact me (blassey) if you want to work on any aspect or send a patch.
Virtual Cursor
Because non-touch screen mobile devices do not have a pointer device, navigating web applications can be troublesome. To correct this, we use a virtual cursor, controlled by the directional pad.
The cursor should use spacial navigation to navigate between clickable elements when the directional pad is short pressed or "clicked."
On long presses of the directional pad, the browser should begin smooth scrolling. After a set amount of time, the page should gradually zoom out to give the user a view of the entire layout and facilitate faster scrolling. This also in effect will gradually accelerate the scrolling. When the long press ends, the browser should begin gradually zooming back in on the element that the cursor is positioned over.
The directional pad's OK/Select key should map to a left mouse button. Key down, key press and key up mapping to mouse down, mouse click and mouse up respectively. Similarly, the left soft key should map to the right mouse button.
The virtual cursor should also initiate mouse over, mouse out and mouse move events for the elements its over.
The right clicks events from the left soft key should spawn the standard contextual menus. Added to this menu should be "click and hold" which will send a mouse down. The next press of either the left soft, right soft or OK/Select should send the mouse up event. This is intended to allow selection of text in a page or interaction with drag and drop interfaces.
To do
- Hook the short presses of the directional pad to spacial navigation
- Contextual menus
- click and drag (and text selection)
- Fix jumpiness of scroll and zoom
- Change cursor when over clickable element
- When zooming in on an element, zoom in to a position relative to the position of the cursor
- this is important for when the element is a large div, image or even the body
- the current implementation scrolls into the top-left corner of the element
Discussion
| Comment | Discussion |
|---|---|
| Suggestion about Virtual Cursor :
Because non-touch screen mobile devices do not have a pointer device... true, but most of em have cam, maybe a fake Cursor linked to camera motion detection (as option in case of no cam) could be a good idea... maybe as plugins that could be use for other applications... see the game Fishopolis (from http://rivia.net/Fishopolis.aspx) to see what i mean (hope this suggestion is not too sci-fi and won't be considered as pollution) |
I think this would make a very good extension, but given how much power is required to run the camera on your average phone, I don't think it should be a default option |
Menu
The menu provides access to navigation functionality. Its mapped to the right soft key. The virtual cursor should go away when it or a places dialog pops up.
To do
- Merge address bar, bookmarks and history into one item
- Add "tag this"
- Change "back" to "stop" when navigating and implement functionality
- ? change "Bookmark this" to "Star this" ? is that the terminology we're moving towards?
Discussion
Places
To do
- Merge into one view
Discussion
Tabs
Tabs in the traditional sense should not be displayed because they take up valuable screen space. Instead, on the main menu will be a tabs sub menu. The first item in this menu is "New Tab," used to create a new tab. The second is view tabs, which should display thumbnails of each open tab. Finally, the title of each open tab should be displayed beneath a menu separator, much like the all tabs drop down in firefox.
To dos
- Implement
-
The menu does nothing right now in the reference implementation(version 0.6) -
New tab and the all tabs should be trivial to implement(version 0.6) - Marcio has a demo of the thumbnails in firefox
-
