323
edits
Mobile/UI/Designs/TouchScreen/Fennec 1.1+/Extended site menu: Difference between revisions
Jump to navigation
Jump to search
Mobile/UI/Designs/TouchScreen/Fennec 1.1+/Extended site menu (view source)
Revision as of 12:51, 22 January 2010
, 22 January 2010no edit summary
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
The site menu should show the items in the following order: | The site menu should show the items in the following order: | ||
#Larry i.e. security information of the site etc | #Larry i.e. security information of the site etc | ||
#Dynamically appearing commands the desktop Firefox generally display in its chrome (awesome bar) such as feeds (or add-ons?) a content-provider has made available in the head part of HTML page and therefore are not displayed in the content area. | #Dynamically appearing commands the desktop Firefox generally display in its chrome (awesome bar) such as feeds (or add-ons?) a content-provider has made available in the head part of HTML page and therefore are not displayed in the content area. | ||
#Browser-provided commands such as Find in page, Save as etc.<br> | #Browser-provided commands such as Find in page, Save as etc.<br> | ||
[[Image:Extended site menu basic structure.png]] | [[Image:Extended site menu basic structure.png]] | ||
| Line 15: | Line 13: | ||
The menu should provide functional options only and not contain any dimmed commands. This would help in keeping the menu as short as possible and thereby improve usability with mobile devices that typically have fairly limited size of screens. If a command could not be available in some circumstances, it should be simply removed from the menu. | The menu should provide functional options only and not contain any dimmed commands. This would help in keeping the menu as short as possible and thereby improve usability with mobile devices that typically have fairly limited size of screens. If a command could not be available in some circumstances, it should be simply removed from the menu. | ||
For usability reasons, a menu item should stand for a single action only and it should be functional as a whole. It should not contain any nested button or buttons. If the menu would contain some option with a checkbox, the whole item should be interactive, not just the part of item that indicates the state of it.<br> | For usability reasons, a menu item should stand for a single action only and it should be functional as a whole. It should not contain any nested button or buttons. If the menu would contain some option with a checkbox, the whole item should be interactive, not just the part of item that indicates the state of it.<br> | ||
[[Image:Extended site menu item functionality.png]]<br><br>Also for usability reasons, the user should be able to cancel a selection from the menu safely i.e. close it without executing any extra action. The menu should be closed when the user taps anywhere outside of it and this should not trigger any other action such as reloading the page or closing the browser etc. This is how desktop Firefox works (at least with Mac) and it works fine.<br> | |||
[[Image:Extended site menu opening and closing.png]]<br> | [[Image:Extended site menu opening and closing.png]]<br> | ||
| Line 29: | Line 21: | ||
<br> | <br> | ||
<br> | |||
'''LAYOUT''' | |||
In general, the site menu should display the options in one column for narrow screen or portrait orientation and in two columns for wide screen or landscape orientation. Larry should make an exception and take always full width of the display because it will display quite a lot of content (and long text strings).<br> | |||
In general, the site menu should display the options in one column for narrow screen or portrait orientation and in two columns for wide screen or landscape orientation. Larry should make an exception and take always full width of the display because it will display quite a lot of content (and long text strings).<br> | |||
[[Image:Extended site menu command order.png]]<br> | [[Image:Extended site menu command order.png]]<br> | ||
<br>The reason to use two column layout for landscape orientation is to use screen area effectively for commands/content: | |||
The reason to use two column layout for landscape orientation is to use screen area effectively for commands/content: | |||
*Menu can show more commands in two columns than in one column at once. | *Menu can show more commands in two columns than in one column at once. | ||
*Usability is not sensitive to device orientation: you can see approximately the same number of commands both in landscape and portrait orientation at a time.<br> | *Usability is not sensitive to device orientation: you can see approximately the same number of commands both in landscape and portrait orientation at a time.<br> | ||
[[Image:Extended site menu columns comparison.png]] | [[Image:Extended site menu columns comparison.png]] | ||