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 13:38, 22 January 2010
, 22 January 2010no edit summary
No edit summary |
No edit summary |
||
| Line 13: | 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 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> | ||
<br> | <br> | ||
| Line 25: | Line 23: | ||
'''LAYOUT''' | '''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> | ||
| Line 34: | Line 32: | ||
*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]]<br> | ||
Regarding the layout of indivudual menu commands, they should consist of a single text string without an icon. Icons can make the menu to look busy without adding any extra value (such as better intelligibility or readability). However, Larry will and commands for feed subscription should make exceptions.<br> | |||
[[Image:Extended_site_menu_item_layout.png|640x149px]] | |||
<br>The command for a feed subscription could have two lines of text in addition to Feed icon. The first text line should label the name of feed (that is given by the title attribute of link tag in the HTML) and the second line of text would be purely informative and let the user to understand the functionaly of the button. If the HTML file does not define the title attribute in the link tag, the menu could show the address detailed by the href attribute. | |||