Team Undecided

BTH740 |  Weekly Schedule  |  Research Projects |  Research Essay  |  Student Resources

Members list

• Kiu Kwan Leung
• Wai Kit Liew
• Zachary Andrew Bloom

email All

Research Resources

1. Photoshop UI (Pallet toolbox, Menu and Shortcuts)
2. MS Word Evolution ( Toolbox to Ribbon )

Thesis Statement

Thesis

Through research and study, Team Undecided will make its attempt to survey modern UI organizational practices through studying their design and explaining with HCI principles.

Through research and study, Team Undecided will analyze HCI principles in several different applications' UI to discover the motives for focusing on specific principles as opposed to others.

Possible principles that apply to our applications (List reasoning under principle)

6.1.1. Make displays legible (or audible)

6.1.2. Avoid absolute judgment limits

6.1.3. Top-down processing

6.1.4. Redundancy gain

Ken (toolbars + menu items Office < 2003 (good but got dropped))

6.1.5. Similarity causes confusion: Use discriminable elements

6.2.1. Principle of pictorial realism

6.2.2. Principle of the moving part

6.3.1. Minimizing information access cost

Ken (expandable menus and submenus of Office < 2007, Office 2007 Office Button (bad), Office 2010 Home (better))

6.3.2. Proximity compatibility principle

6.3.3. Principle of multiple resources

6.4.1. Replace memory with visual information: knowledge in the world

6.4.2. Principle of predictive aiding

Ken (Ribbon tabs grouping Office >= 2007, home(bad) and others (good))

6.4.3. Principle of consistency

Ken (menus and submenus of Office < 2007, the Ribbon tabs of Office >= 2007)

4.3.ii Design Principles - Iterative Design

i. Visibility

ii. Consistency

iii. Familiarity

Ken (The UI design shift)

iv. Affordance

v. Navigation

Ken (Submenus of Office < 2007)

vi. Control

vii. Feedback

viii. Style

ix. Constraints

x. Flexibility

Ken (Expandable menus and submenus of Office < 2007)

Drafts

Kiu Kwan Leung

The Ribbon User Interface – A study of Microsoft’s effort to comply HCI Principles

The Ribbon user interface marked one of the most well-known examples of user interface shifting. In this section, the team will first disscuss the common HCI and graphical user interface design principles and willl explain how did different versions of Microsoft Word, version 2003, 2007 and 2010, follow/violate the principles.. NOTE: To simplify the complexity of our research, the team will focus on the default setting of the Word user interface in this section. Common HCI and Graphical User Interface Design Principles

Throughout the research process, the team had been able to apply a list of HCI and graphical user interface design principles to explain Microsoft’s action taken in each version of Word. These principles are: Principle of Consistency

Principle of Familiarity

Applications should customizable to meet users’ unique needs.

[REFERENCE NUMBER, https://www-01.ibm.com/software/ucd/designconcepts/designbasics.html] Principle of Feature Exposure

Features of a program should be easily exposed. This allows users to determine the function of the feature by quick visual scanning. [REFERENCE NUMBER, http://www.sylvantech.com/~talin/projects/ui_design.html] Principle of Flexibility

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://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 Navigation

Steering Law

The Steering Law is a derived 2D model of the Fitt’s law, which can be used to approximate the average time taken for humans to perform mouse navigation. Assuming the actor is moving a mouse in a straight path, the formula of the model will take the following form: T = a + b (A/W)

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.

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 designed in a way that will meet common users’ expectation.

[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] 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 fourteen years of time (1989 to 2003), Word had grown 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. 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 submenus and sub-submenus are designed to hide information, they 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 cost, submenus and sub-submenus also violates Principle of Consistency and yield low selection time performance. Due to the fact that a menu can have zero to many submenus/sub-submenus, it is impossible for one to find any two menus that shares the same structure. Therefore, users must spend time and effort to remember the organization of each of the menus. Finally, regarding selection time, [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. Word 2007

Secondly, the team looked at 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 of Word’s classic WIMP user interface is 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 menu items found in the classic menu bar to Ribbon as buttons with icons 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 new user interface. 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 of the user interface design principles: Principle of Familiarity, Principle of Top-down Processing, Principle of Navigation and Principle of Minimizing Accessing Cost. As 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. NOTE: The Office button’s violation of Principle of Navigation and Principle of Minimizing Accessing Cost will be discussed in the Word 2010 subsection. 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 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 layout.

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. Word 2010

Finally, the team studied the user interface of Word 2010. The Ribbon UI featured in Word 2010 can be considered a slightly improved version of the original. Noticeable enhancements include a new minimize/maximize Ribbon UI menu button, the elimination of the Office button and a new File tab. Minimize/Maximize Ribbon UI menu button

Since the introduction of the Ribbon UI, Microsoft had built in a Ribbon minimize/maximize function. This function offers the user a choice to hide/expose the Ribbon and, by reducing the screen area occupied by the ribbon, reduces the occasion of scrolling (move the uses hand to the scroll wheel and back to the keyboard). Hence, the act can be considered an effort to comply the Principle of Flexibility and Principle of Minimizing Access Cost. However, the problem of the function is that it can only be activated by doubling clicking the active tab, the keyboard combination Ctrl+F1 or the Ribbon’s right click menu [REFERENCE NUMBER, http://blogs.technet.com/b/office2010/archive/2009/12/03/minimizing-the-ribbon-exposed.aspx]. The above listed ways of accessing the function are not obvious and requires extra effort to access, yielding a very low usability and even introduce errors by accidentally activating it. This is supported by the large amount of threads on Microsoft’s support forum indicating users are having difficulty accessing it or accidentally activated it [REFERENCE NUMBERS, http://answers.microsoft.com/en-us/office/forum/office_2007-word/ribbon-disappeared/c6f0418b-8a12-46b3-af1b-35d260b82978

, http://answers.microsoft.com/en-us/office/forum/office_2007-outlook/how-do-i-restore-the-ribbon/e0a1f0a8-d94a-e011-8dfc-68b599b31bf5

,

http://answers.microsoft.com/en-us/office/forum/office_2007-word/default-ribbon-on-word-2007-has-disappeared/1677de51-fc69-e011-8dfc-68b599b31bf5

, 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. 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 To, which are considered violation of the principle of 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 button. Instead of animating the “fade in” of the submenu, clicking a submenu will cause the right section of the file screen to show the submenu items of that submenu. Without the size limit of a submenu, the height of the submenu item had been increased 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 addition, 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. 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.

Wai Kit Liew

  Normal  0          false  false  false    EN-US  JA  X-NONE

Photoshop

Adobe Photoshop, as an application, possesses a fundamentally different design goal and challenges compared to the majority of software out on the market today. Famously known for its overwhelming number of tools, Photoshop’s design goal is to facilitate the use of every tool imaginable to allow users to express their creativity without the need to worry about not having an intuitively accessible tool to get the job done.

To achieve its design goals, Photoshop has consistently maintained the use of HCI principles throughout its design.

Principle: Top down processing

Photoshop employs top down processing for all of its menus and sub-menus. Any predictable or sequential order (such as alphabetical) is always top down in order. One of the best use of top down processing lies in the Layers tool panel interface. The layer tool panel displays all available layers in order of front (top) to back (bottom). This interface also allows user to utilize the top down model to predictably change the organization of layers or insert new layers.

[IMAGE: LAYER TOOLBOX]

Principle: Redundancy Gain

Redundancy gain is another oft used principle in Photoshop. In general, all functions in Photoshop tools appear 1-4 times: Top menu, customizable side tool bar, a context tool panel (to the right), and the contextual menu (a.k.a. right click). The user is able to heavily customize Photoshop via the use of available framework (e.g. tool bar), plug-ins and contextual menus for more advanced packages and users.

[IMAGE: menu + side tool bar + context tool panel + context menu combination example]

Principle: Pictorial Realism & the moving part

Pictorial realism is important in Photoshop due to the fact that the physical world of colors is analog by nature. Any feature dealing with color change or shading of any sort must utilize pictorial realism in order for the user to predict the kind of change that would be applied. Photoshop always displays a preview color box or a preview on the actual image in order to facilitate this. On the other hand, the principle of moving part is clearly a pairing principle used in conjunction with pictorial realism in the form of a color wheel and shade sliders. Digital value notwithstanding, almost all mental models dealing with color must be expressed either as a color wheel or a shade slider. This makes the principle of the moving part an integral part of any design involving an analog control for color.

[IMAGE: color panel, shade panel]

Principle: Minimizing information access cost, Proximity compatibility principle

Context tool panels, sub-menus sorted by categories

Principle: Principle of predictive aiding

Tool categories and sub categories that reduces clutter in toolboxes and allow closely related tools to be accessed via the same button

[IMAGE: toolbar sub-tools]

Principle: Principle of consistency

Photoshop previous version comparison

Keywords

Topic: Modern UI organizational practices

Ribbon UI

UI Changes/redesign

Users don't care about design, they just want to complete their task quick. When people are visiting websites or using applications, they don't spend their time analyzing or admiring the design. They focus their attention on the task, the content, and their own data or documents. Thus, people love a design when they know the features and can immediately locate the ones they need. That is, they love a familiar design.

Menu Elimination

Navigation

See PDF file for data.

Errors

Fitts' Law

T = a + b log2 ((D/W) + 1)

Steering Law

Linear: T=a+b(d/w)

> 1 vertical Linear: T = 2a + b((n/x) + x); x = w/h

Principle of feature exposure/accessible

Features of the program need to be easily exposed so that a quick visual scan can determine what the program actually does. There are various levels of "hiding": Here's a partial list of them in order from most exposed to least exposed:

• Toolbar (completely exposed)
• Menu item (exposed by trivial user gesture)
• Submenu item (exposed by somewhat more involved user gesture)
• Dialog box (exposed by explicit user command)
• Secondary dialog box (invoked by button in first dialog box)
• "Advanced user mode" controls -- exposed when user selects "advanced" option
• Scripted functions

Predictability and common convention

Use a common set of design patterns and guidelines so that users don't have to relearn how to perform common tasks.

Uncertainty vs. Familiarity

Fresh design will be a worse design simply because it's new and thus breaks user expectations. A better strategy is to play up familiarity and build on users' existing knowledge of how a system works.

Flexibility

Let users customize the application to meet their unique needs. Flexibility is also enhanced by letting users select options in various sequences and in letting them modify default values.

Photoshop

Shortcuts/Toolbars

Classifications Menus

Pallets

Contextual Menus

Redundancy Gain

Modern Game Console UI

Inputs

Display

Network connectivity

Loading times

Personalization

Bibliography

Design Concepts:

https://www-01.ibm.com/software/ucd/designconcepts.html

https://www-01.ibm.com/software/ucd/designconcepts/designbasics.html

http://www.useit.com/alertbox/familiar-design.html

http://www.useit.com/alertbox/20000206.html

http://www.useit.com/alertbox/20030825.html

http://www.sylvantech.com/~talin/projects/ui_design.html

Microsoft Word evolution:

http://en.wikipedia.org/wiki/Ribbon_%28computing%29

http://www.computerworld.com/s/article/9003994/Final_Review_The_Lowdown_on_Office_2007?taxonomyId=16&pageNumber=2

http://redmondmag.com/articles/2007/10/01/word-2007-not-exactly-a-musthave.aspx

http://www.exceluser.com/explore/surveys/ribbon/ribbon-survey-results.htm

User Acceptance of the Microsoft Ribbon User Interface

Survey Results: Excel 2007's Ribbon Hurts Productivity, Survey Shows

Mega drop-down navigation menus work well

Mega menus gone wrong

Steering Law

Modeling and improving selection in cascading pull-down menus using Fitts' law, the steering law and force fields

Microsoft commands design principles

Microsoft tabs design principles

Minimizing the Ribbon: Exposed

Photoshop UI:

http://vandelaydesign.com/blog/design/learn-photoshop-basics/

http://www.ischool.utexas.edu/technology/tutorials/graphics/photoshop7/

HCI principles - http://ijcem.org/papers12011/12011_21.pdf

Modern Game Console UI:

http://en.wikipedia.org/wiki/PlayStation_3

http://gizmodo.com/5070189/new-xbox-experience-nxe-review-its-pure-improvement

http://en.wikipedia.org/wiki/Wii_system_software