Open main menu

CDOT Wiki β

Changes

Team Undecided

1,158 bytes added, 17:56, 1 December 2011
Drafts
Principle of Consistency
A design must utilize consistency among different displays to allow users to easily remember the layout of the displays with their long-term memory.
[REFERENCE NUMBER, http://ijcem.org/papers12011/12011_21.pdf]
Principle of Familiarity
Applications User interfaces should customizable to meet users’ unique needsnot be rewritten, instead, it should be familiar and built on user’s existing knowledge about how the system works. [REFERENCE NUMBER, httpshttp://www-01.ibmuseit.com/softwarealertbox/ucd/designconcepts/designbasicsfamiliar-design.html]
Principle of Feature Exposure
Principle of Flexibility
Applications should customizable to meet users’ unique needs.
 
[REFERENCE NUMBER, https://www-01.ibm.com/software/ucd/designconcepts/designbasics.html]
Principle of Minimizing Access Cost
When the user’s attention is diverted from one location to another to access his/her desired information/feature, there is an associated cost in time or effort. User interfaces should be designed to minimize is cost.
[REFERENCE NUMBER, http://wwwijcem.google.caorg/papers12011/url?sa=t&rct=j&q=steering%20law%20sub%20menu&source=web&cd=2&ved=0CCMQFjAB&url=http%3A%2F%2Fciteseerx.ist.psu.edu%2Fviewdoc%2Fdownload%3Fdoi%3D10.1.1.11812011_21.7601%26rep%3Drep1%26type%3Dpdf&ei=0iq7To-uFaXZ0QHx5eDeCQ&usg=AFQjCNHrOOm9nR54M4rbGAuFJ8fq1CteiA&cad=rjapdf]Principle of Navigation
Steering Law
Where T is the average time for the action; a and b are experimentally fitted constants; A is the total length of the path and W is the width of the path.
 
[REFERENCE NUMBER, http://www.google.ca/url?sa=t&rct=j&q=steering%20law%20sub%20menu&source=web&cd=2&ved=0CCMQFjAB&url=http%3A%2F%2Fciteseerx.ist.psu.edu%2Fviewdoc%2Fdownload%3Fdoi%3D10.1.1.118.7601%26rep%3Drep1%26type%3Dpdf&ei=0iq7To-uFaXZ0QHx5eDeCQ&usg=AFQjCNHrOOm9nR54M4rbGAuFJ8fq1CteiA&cad=rja]
Principle of Top-down Processing
Signals are likely perceived and interpreted in accordance with what is expected based on a user’s past experience. User interfaces should be predictable and be designed in a way that will meet common users’ expectation.
[REFERENCE NUMBER, http://wwwijcem.google.caorg/papers12011/url?sa=t&rct=j&q=steering%20law%20sub%20menu&source=web&cd=2&ved=0CCMQFjAB&url=http%3A%2F%2Fciteseerx.ist.psu.edu%2Fviewdoc%2Fdownload%3Fdoi%3D10.1.1.11812011_21.7601%26rep%3Drep1%26type%3Dpdf&ei=0iq7To-uFaXZ0QHx5eDeCQ&usg=AFQjCNHrOOm9nR54M4rbGAuFJ8fq1CteiA&cad=rjapdf]
Word 2003
Since its first version for Windows, Word for Windows 1.0, Word had been using the WIMP (windows, icons, menus, pointing device) design. After Over fourteen years of time its lifetime (1989 to 2003), Word had grown evolved into a very complex word processor with a long list of features. To handle such a rich feature base, Word’s WIMP user interface had developed sophisticated techniques such as adaptable menus, submenus and sub-submenus to reduce the amount of information presented to its user.
Adaptable menus
Adaptable menus can reduce the amount of information displayed to the user by hiding less frequently used menu items. When menu item/s is/are being hidden, an extra ‘﹀’ button will appear as the last item of the menu. By clicking or placing the mouse on the ‘﹀’ button for two seconds, the menu will expand to display all the menu items available.
Although this approach helps simplifying the menu, it violates the Principle of Feature Exposure and the Principle of Minimizing Access Cost. Fundamentally, this feature was design to hide instead of expose the features and hence, violation of the first principle is inevitable. In case of access cost, the action of expanding the menu requires extra mouse click or time hovering on the ‘﹀’ button. And as the menu expands, users will also need extra time to look at the menu and learn what else has been made available to him/her.
Figure X: An adaptable menu
 
Submenus and sub-submenus
Submenus and sub-submenus are ways to shorten a menu by categorizing related menu items together to form a submenu and place the category name as a menu item at the parent menu with an extra ‘▶’ at the end of the category name. By clicking the menu item or hovering onto the menu item for one second, the submenu/sub-submenu will appear. As However, if the user’s mouse was not hovering correctly on the menu item or mis-clicked on another menu item, the desired submenu will disappear. Due to the fact that submenus and sub-submenus are designed to hide information, they naturally violate the Principle of Minimizing Access Cost and Principle of Feature Exposure in the same way as adaptable menus. Other than feature exposure and access costIn addition, submenus and sub-submenus also violates Principle of Consistency and yield low selection time menu navigation performance(see Steering Law). Due to the fact that As a menu can have zero to many submenus/sub-submenus, it is impossible for one to find any two menus that shares predict the same structureof a menu. Therefore, users must spend time and effort to remember the each menu’s organization of each of the menus. Finally, regarding selection menu navigation time, one should consider the mouse hovering accuracy requirement of the submenus and sub-submenus discussed above. [REFERENCE NUMBER, http://www.google.ca/url?sa=t&rct=j&q=steering%20law%20sub%20menu&source=web&cd=2&ved=0CCMQFjAB&url=http%3A%2F%2Fciteseerx.ist.psu.edu%2Fviewdoc%2Fdownload%3Fdoi%3D10.1.1.118.7601%26rep%3Drep1%26type%3Dpdf&ei=0iq7To-uFaXZ0QHx5eDeCQ&usg=AFQjCNHrOOm9nR54M4rbGAuFJ8fq1CteiA&cad=rja] indicates that general mouse users would require two seconds to access any menu item on a sub menu and three seconds to access any menu item on a sub-submenu. And as a reference point, [REFERENCE NUMBER] also mentioned that it takes an average of one second for selecting any first level menu item.Figure X: A menu, a submenu and a sub-submenu 
Word 2007
Secondly, the team looked at studied Word 2007, which marks the initial release of the Ribbon UI. In this version, Microsoft Word received a major user interface redesign with the introduction of the Ribbon UI, the Office button, the Office menu and mega-menus.
The tabbed Ribbon UI / The elimination of sub-submenus
The major departure from Word 2003 to Word 2007 was the removal of Word’s the classic WIMP user interface is and the introduction of the Ribbon UI. The Ribbon UI is a tabbed menu aimed at easing user navigation by eliminating most of the expendable menus, submenus and sub-submenus found in the classic Word user interface. The goal was successfully achieved by moving all the toolbar menus into ribbon tabs, moving all menu items found in the classic menu bar to Ribbon as buttons with icons in a tab and converting all the sub-submenus to pop-up menus activated by clicking the Ribbon buttons.However, by introducing the Ribbon UI, Microsoft had failed to obey the Principle of Familiarity. According to [REFERENCE NUMBER, http://www.useit.com/alertbox/familiar-design.html], users are interested in completing their task with skilled performance (as fast as the user can finish the task, based on his/her familiarity of the user interface) without spending extra time to analyze a new user interface. In this regard, the team did a small research into the user acceptance and the average Office productivity of the Ribbon UI. According to [REFERENCE NUMBER, http://www.wseas.us/e-library/conferences/2010/Faro/DNCOCO/DNCOCO-25.pdf], users with longer word processing experience share the feeling that the Ribbon UI is not well organized and are less satisfied with it. And [REFERENCE NUMBER, http://www.exceluser.com/explore/surveys/ribbon/ribbon-survey-results.htm], pointed out that on average, users experience a twenty percent productivity drop after using the Ribbon UI. This outcome can be explained by using the Principle of Familiarity - the Ribbon UI destroyed experienced user’s skilled performance by introducing uncertainty and extra time spent on analyzing and learning the structure and button placement of the new user interface. Figure X: The Word 2007 Ribbon 
The Office button and Office menu
In Word 2007, a new Office button is added to the top left corner of the window. The Office button is a large, circular button with the Office Logo icon to replace the classic File menu. Clicking on the button will lead to the Office menu containing all file operations such as new, open, save, save as and print to appear.
By studying the design of the Office button, the team believes that Microsoft had failed to obey four three of the user interface design principles: Principle of Familiarity, Principle of Top-down Processing, and Principle of Navigation Minimizing Accessing Cost.As the Office button contains submenus for save as, print and other operations, it inherits the problem of submenus’ problem with slowing down the user’s menu navigation and hence, violates the Principle of Minimizing Accessing Cost. As In addition, the Office logo provides no hint that it is meant for file operations, users cannot apply any expectation nor user interface knowledge to determine the meaning of the Office button. Therefore, one can conclude that the Office button is simply an unfamiliar and meaningless button with very low usability.NOTEFigure X: The Office button’s violation of Principle of Navigation Button and Principle of Minimizing Accessing Cost will be discussed in the Word 2010 subsection.its Save As submenu  
Use of mega-menus
Another Ribbon’s achievements to ease navigation are the use of mega menu to allow all shapes to be easily selected and inserted by the user in the insert tab. According to [REFERENCE NUMBER, http://www.useit.com/alertbox/mega-dropdown-menus.html]’s list of characteristics, the insert shape has the following characteristics:
In compliance of the Principle of Top-down Processing, the insert shape menu is designed as a big and , two-dimensional pop-up menu with its shape divided into labeled categories. This format allows users to search for their desired shapes easier by scanning only the desired category to narrow down their search.
To follow the Principle of Consistency, all menu categories and items are structured and follow the same layoutwhere shapes are placed from left to right.
Obeying the Principle of Feature Exposure and Principle of Minimizing Access Cost, all shapes are visible and hence users can see all of them without scrolling.
 
 
Figure X: A megamenu
 
Word 2010
, http://answers.microsoft.com/en-us/office/forum/office_2007-access/how-to-minimize-ribbon-on-access-application-when/e128cfe7-c0c6-4b75-a80c-09ba13880629]. Therefore, it is logical to conclude that the function has a very low usability.
To improve the situation, Microsoft provided a minimize/maximize Ribbon button in Word 2010. Locating at the top right corner of the Ribbon and using the ‘︿’ and ‘﹀’characters as its icon for minimize and maximize respectively, the button obeys the Principle of Top-down Processing where users can apply their common knowledge of graphical user interface and expect that button to hide/expose the Ribbon.
Figure X: Minimizing and Maximizing the Ribbon
Elimination of the Office button / The File Tab and File Screen
In Word 2007, the Office button was the equivalent of Word 2003’s File menu. By clicking the Office button, a pop-up menu (the Office Menu) with common file menu operations such as Save as and Print will appear. As mentioned previously, the Office button provides no evidence that it is meant for file operations. In addition, the Office Menu also inherited Word 2003’s submenus including Permission and Send To2003 submenus’ weaknesses, which are considered violation of the principle Principle of Minimized Accessing Cost and posts extra delay to users’ navigation and principle of minimized accessing cost.To address the issue, Microsoft replaced the Office button/menu with the File Tab. Obeying the Principle of Familiarity, the File Tab button is located at the leftmost corner of the Ribbon to resemble the location of the classic File menu. Clicking on the File Tab button will cause the entire editing area of Word 2010 to be replaced by a file screen with left and right section. The left section of the file screen is used to store most of the menu items of the Office buttonand the right section will display the submenu/sub-submenu items if there is any. Instead To solve the problem of animating Office button, Microsoft removed the “fade in” animation of the submenu, clicking a submenu will cause menu and programmed the right section of the file screen page in a way that a file page menu item requires the user to click on a menu item to show the submenu items of that submenu. Without the size limit of a submenu, the height of the submenu item had been increased was able to increase from 6 millimeters to about 1.5 centimeters while the distance between the main menu item and the submenu item remains unchanged. According to the Steering Law, this height increase is equivalent to an increase in the W variable of the law (width of the travelling path). This renders a large reduction of the b(A/W)term and hence easing the navigation by reducing the average time of selecting the submenu item (the cost of accessing the submenu item). In additionFinally, the elimination of the “fade in” animation is also an effort to better comply the Principle of Minimizing Access Cost – instead of paying attention with the animation, the user can better focus on his/her task and hence reducing the time and mental effort spent on handling the context switching. Figure X: The File tab and File page 
Recap of the Ribbon UI Research
In order to find out the reason behind the Ribbon user interface, the team studied three different versions of Microsoft Word (2003, 2007 and 2010) as well as the HCI and graphical user interface design principles Microsoft had succeed/failed to follow. Result of the research suggested that the act of dropping the classic Word user interface, Microsoft had sacrificed the flexibility of adaptable menus and submenus and the familiarity of the classic user interface design. However, by introducing the Ribbon user interface (the Ribbon UI), Microsoft had successfully achieved ease of navigation; reduced information/tools access cost of the adaptable menus and a consistent yet predictable tabbed user interface.
 
<u>'''Wai Kit Liew'''</u>
1
edit