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:49, 22 January 2010

21 bytes added ,  22 January 2010
no edit summary
(Created page with 'The site menu should show the items in the following order: 1. Larry i.e. security information of the site etc<br>2. Dynamically appearing commands the desktop Firefox generally…')
 
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:  


1. Larry i.e. security information of the site etc<br>2. 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. <br>3. Browser-provided commands such as Find in page, Save as etc.<br>  
#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.  
#Browser-provided commands such as Find in page, Save as etc.<br>


[[Image:Extended_site_menu_basic_structure.png]]


<br>[[Image:Extended_site_menu_basic_structure_example.png]]<br><br>The reason to place dynamic page-provided menu items directly after Larry is to make them easy to perceive/find by the user whenever they are available (because they are not available on every web site/page).<br>


Browser UI provided options (such as Find on page, Save as etc) should be displayed in the order of their importance. Potentially, it would improve usability, if the most frequently used commands appeared first in the list and less used last. However, if the site menu should contain editing commands (cut, copy, paste) on one day, they should be placed after the Larry but before Feeds to make them available for use as instantly as possible.
[[Image:Extended site menu basic structure.png]]


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.
<br>[[Image:Extended site menu basic structure example.png]]<br><br>The reason to place dynamic page-provided menu items directly after Larry is to make them easy to perceive/find by the user whenever they are available (because they are not available on every web site/page).<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>
Browser UI provided options (such as Find on page, Save as etc) should be displayed in the order of their importance. Potentially, it would improve usability, if the most frequently used commands appeared first in the list and less used last. However, if the site menu should contain editing commands (cut, copy, paste) on one day, they should be placed after the Larry but before Feeds to make them available for use as instantly as possible.  


[[Image:Extended_site_menu_item_functionality.png]]<br><br>
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.  


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>
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_opening_and_closing.png]]<br>


<br>


LAYOUT
[[Image:Extended site menu item functionality.png]]<br><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>
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_command_order.png]]<br>


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.
[[Image:Extended site menu opening and closing.png]]<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>
 
 
 
[[Image:Extended site menu command order.png]]<br>
 
 
 
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.  
*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]]
Pflippp
323

edits

Retrieved from "https://wiki.mozilla.org/Special:MobileDiff/196092"

Navigation menu