|
Mach V |
UI Specification |
|
Context Menus Specification Revision 2, 1st Draft send feedback to the component specific newsgroup |
Last Modification:
|
|
Author Marlon Bishop |
Status: Implemetable Framework Specification |
|
Contents
|
Feature Team |
Menu Interaction and Design
This
document assumes a fundamental understanding of the interaction
design of conventional context/pop up menus. For background, consult
platform specific UI documention. The information design method
described here is for designing context sensitive menus in
applications of high content density, such as web content. These
menus consider the increasing number of novice Windows users who use
right mouse click as a means of discovering features. Therefore the
menus are decidedly geared toward more general use, rather than
containing exclusively hidden or esoteric features. By representing
every context in the more ambiguous cases, we ensure users will be
get lost less, and increase their chance to hit the intended scope of
features.
Supported Cases
The
following cases listed below are specified in this document. For
yet-to-be-specified cases, or, if changes to a case are necessary,
follow the Menu Design Principles.
Content:
- Content Area
- Selected Content
- Text as Link
- Image
- Image as Link
- Text as Mailto: Link
- Image as Mailto: Link
- Text as News: Link
- Image as News: Link
- Form/Input Field
- Frame Content Area
Chrome:
- Sidebar Tabs (rough sketch)
- Toolbar Area - (Customizable Toolbars and Chrome cross ref)
- Browser Tabs (rough sketch)
Menu Design Principles
The
following are a set of design principles to keep in mind when
creating, or making changes to context menus.
- Provide convenience by offering the most common File Menu commands
- Provide power by applying context sensitivity to the most common File/Edit menu commands
- Provide speed by making menus brief, to make identification quicker and selection easier.
- Menu items should be ordered by frequency and/or relevancy to the immediate context and task
- Define a core subset for each context. When placing in new contexts, do allow core items to loose their arrangement. (cut, copy, paste, delete, select all)
- Menus are often used as "cue cards" to reveal features available for related cases
- Maintain 4.x feature parity when possible
- Use Netscape familiar terminology
- Follow platform fundamentals when possible (or make compromises between different platforms)
- Identify items which are "expendable", or offer little or less utility in other contexts. Expendable items should always have alternate, 2-step methods in their absence.
- When
necessary, structure menu subsets to "degrade gracefully"
(see Example 1)
- Identify high traffic menu items and label them less expendable.
- Identify expendable menu Items - actions which can be done relatively easily by other means (usually by performing one more step that is common)
- Compromise menu items for subsequent descendents of a context (children or kin).
- Expend items based on the degree of ambiguity for a given case. Highly ambiguous cases generally need more cores represented
- Using dividers: provide dividers between each domain and/or provide dividers between each task category. Rule of thumb should be no more than 4 or 5 items between each set of dividers.
- Identify menus that are kin. That is, menus which share familial characteristics, thus are dependent on each other for consistency, and should be kept in parity. This will propogate family characteristics which can then later be easily identified by the user.
- In very
general terms, menus should be no more than 12-14 items in length,
with a "sweet spot" of around 8-9 items. Menus which are 13
items or longer are lacking ease of use, while menus shorter than 5-6
are possibly lacking innovation.
Anatomy of a Context
Menu
NOTE: Menu items identified as "expendable" are by no means of lesser value. Branding certain menu functions as expendable, simply implies that function might offer less utility in the next context. A core set of functions should always retain their internal order.
|
Content Area Menu (see alternate Macintosh terms
indicated by an *)
The Menu
|
Core Set
|
•
alt text:[bookmark this page]?
* [Alias in Finder] for mac • [View Background Image] is enabled only if there is a background image in the page. • [Stop] is enabled if a page is still loading * [Alias in Finder] for mac |
||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||
|
6.x |
4.x |
IE5.5 |
Opera 6.0 |
Opera Flyouts |
||||||||||||||
|
|
|
|
|
||||||||||||||
Selected Content Menu
The Menu
|
Core Set
|
alt:bookmark this page?
- special quotes formatting in email with URL - Perform Search on... - high intention window (more degradation) -Text properties? - Global context not present since this menu has high intention. Must select, must click on selection - "Cut, Copy, Paste, Select All" |
||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||
|
6.x |
4.x |
IE5.5 |
Opera 6.0 |
Opera Flyouts |
||||||||
| Ignored - same as previous context |
||||||||||||
|
|
|
|
|
Text as Link Menu (kin: text as mailto: link, text as news: link) (child: image as link)
The Menu
|
Core Set
|
what is
link properties?
-mistaken context is high - since it could a link could potentially be mistaken for the page |
|||||||||||||||||||||
|
|||||||||||||||||||||||
|
6.x |
4.x |
IE5.5 |
Opera 6.0 |
Opera Flyouts |
||||||
| what is
link properties? -mistaken context is high - since it could a link could potentially be mistaken for the page * [Alias in Finder] for mac |
[Page >] provides entire previous context | |||||||||
|
|
|
|
|
Image Menu (see alternate Macintosh terms indicated by *)
The Menu
|
Core Set
|
- very
high potential for mistaken context -
images could potentially be mistake for the content area • why have [select all] here? (removed) - *[Alias in Finder] for mac |
||||||||||||||||||||||
|
||||||||||||||||||||||||
|
6.x |
4.x |
IE5.5 |
Opera 6.0 |
Opera Flyouts |
||||||||
| [Page >] provides entire previous context | ||||||||||||
|
|
|
|
|
Image as Link Menu (see alternate Macintosh terms indicated by *) (kin: image as mailto: link, image as news: link)
The Menu
|
Core Set
|
- very
high potential for 3 mistaken contexts -
could potentially be mistake for page • why have [select all] here? (removed) - what is more important for the user - the image or the link? *expend items - Formula for this menu is to combine Link Menu and Image Menu. The Link Core shall take precedence over the Image Core. - 15 items |
|||||||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||||||||
|
6.x |
4.x |
IE5.5 |
Opera 6.0 |
Opera Flyouts |
||||||||
| [Page >] provides entire previous context | ||||||||||||
|
|
|
|
|
Text
as mailto: Link Menu (kin: text as link, text as news: link)
The Menu
|
Core Set
|
what is
link properties?
-mistaken context is high - since it could a link could potentially be mistaken for the page - [Select All]? -kin to text as link menu |
|||||||||||||||
|
|||||||||||||||||
|
6.x |
4.x |
IE5.5 |
Opera 6.0 |
Opera Flyouts |
||||||
| Uses same
menu for Text Link |
[Page >] provides entire previous context | |||||||||
|
|
|
|
|
Image
as mailto: Link Menu (kin: image as link, image as news: link)
The Menu
|
Core Set
|
what is
link properties?
-mistaken context is high - since it could a link could potentially be mistaken for the page - [Select All]? * [Alias in Finder] for mac **REVIEW LENGTH and DEGRADE** - Formula for this menu is to combine Link Menu and Image Menu. The Link Core shall take precedence over the Image Core. - 15 items long because it has to be - kin to image as link menu |
||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||
|
6.x |
4.x |
IE5.5 |
Opera 6.0 |
Opera Flyouts |
||||||||
| Uses same
menu for Text Link |
tack on
the image subset to the mailto mailto subset. |
[Page >] provides entire previous context | ||||||||||
|
|
|
|
|
Text
as news: Link Menu (kin: text as link, text as mailto: link)
The Menu
|
Core Set
|
what is
news: link properties?
-mistaken context is high - since it could a link could potentially be mistaken for the page - [Select All]? * [Alias in Finder] for mac - kin to text as mailto:link |
|||||||||||||||
|
|||||||||||||||||
|
6.x |
4.x |
IE5.5 |
Opera 6.0 |
Opera Flyouts |
||||||
| same menu for text link | Uses same
menu for Text Link |
[Page >] provides entire previous context | ||||||||
|
|
|
|
|
Image
as news: Link Menu (kin: image as mailto: link, image as link)
The Menu
|
Core Set
|
what is
link properties?
-mistaken context is high - since it could a link could potentially be mistaken for the page - [Select All]? \*expend items**REVIEW LENGTH and DEGRADE** - Formula for this menu is to combine Link Menu and Image Menu. The Link Core shall take precedence over the Image Core. - 15 items long because it has to be - kin to image as link menu |
||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||
|
6.x |
4.x |
IE5.5 |
Opera 6.0 |
Opera Flyouts |
||||||
| same menu for text link | Uses same
menu for Text Link |
[Page >] provides entire previous context | ||||||||
|
|
|
|
|
Form/Input Field Menu (rough draft)
The Menu
|
Core Set
|
- toggle
autocheck spelling checker (feature)?
- editiable text menu cross reference |
|||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||
|
6.x |
4.x |
IE5.5 |
Opera 6.0 |
Opera Flyouts |
||||||
| -Opera 6
takes you to form fill settings/presets |
||||||||||
|
|
|
|
|
Frame
Content Area Menu (see alternate Macintosh terms indicated by *)
The Menu
|
Core Set
|
-
extremely high potential for mistaken context -
could potentially be mistook for page. many frames are virtually invisible to the UE. - [view background] and [background as Wallpaper] break convention because they don't belong in "frames" because the usertype that needs the feature isn't concerned that frames exist. - *[Alias in Finder] for mac Append [This Frame] to any Context which lives within a frame |
|||||||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||||||||
|
6.x |
4.x |
IE5.5 |
Opera 6.0 |
Opera Flyouts |
||||||||||||||
| IE makes
no distinction between the frame and regular content. |
Opera
adds a single flyout to provide disctinction between contexts |
|||||||||||||||||
|
|
|
|
|
Sidebar Tab Menu (rough sketch)
The Menu
|
Core Set |
||||||
|
|||||||
|
6.x |
4.x |
IE5.5 |
Opera 6.0 |
Opera Flyouts |
n/a |
n/a |
n/a |
n/a |
n/a |
Browser Tab Menu (rough sketch)
The Menu |
Core Set |
||||||||||||||
|
formula
= tab / content area - [bookmark tab set] |
||||||||||||||
|
|
6.x |
4.x |
IE5.5 |
Opera 6.0 |
Opera Flyouts |
n/a |
n/a |
n/a |
n/a |
n/a |
Toolbar / Chrome Menus
Feature Menu |
Button Menu |
Personal Toolbar Menu |
Generic Toolbar Menu |
||||||||||||||||||||||
|
|
|
|
||||||||||||||||||||||
|
6.x |
4.x |
IE5.5 |
Opera 6.0 |
Opera Flyouts |
n/a |
n/a |
n/a |
n/a |
n/a |
Personal Toolbar Menus
Personal Toolbar Menu |
Personal Toolbar Items (bookmarks) |
Personal Toolbar Items (folders) |
|
||||||||||||||
|
|
||||||||||||||||
|
6.x |
4.x |
IE5.5 |
Opera 6.0 |
Opera Flyouts |
n/a |
n/a |
n/a |
n/a |
n/a |