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

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

User interfaces should not be rewritten, instead, it should be familiar and built on user’s existing knowledge about how the system works. [REFERENCE NUMBER, http://www.useit.com/alertbox/familiar-design.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

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://ijcem.org/papers12011/12011_21.pdf]

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.

[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://ijcem.org/papers12011/12011_21.pdf] 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. Over fourteen years of its lifetime (1989 to 2003), Word had 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. 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. In addition, submenus and sub-submenus also violates Principle of Consistency and yield low menu navigation performance (see Steering Law). As a menu can have zero to many submenus/sub-submenus, it is impossible for one to predict the structure of a menu. Therefore, users must spend time and effort to remember each menu’s organization. Finally, regarding 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 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 the classic WIMP user interface 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 three of the user interface design principles: Principle of Familiarity, Principle of Top-down Processing and Principle of 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. 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. Figure X: The Office Button and 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, 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 where 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

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. 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 submenus’ weaknesses, which are considered violation of the Principle of Minimized Accessing Cost and posts extra delay to users’ navigation. 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 and the right section will display the submenu/sub-submenu items if there is any. To solve the problem of Office button, Microsoft removed the “fade in” animation of the menu and programmed the the file page in a way that a file page menu item requires the user to click on a menu item to show the submenu items. Without the size limit of a submenu, the height of the submenu item 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). Finally, 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.

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

Zachary Andrew Bloom

       Normal  0          false  false  false    EN-CA  X-NONE  X-NONE                                                                                                                                                                                                                                                                                                                                                              Introduction

               Game console UI follows the same design principles that a computer application does. The main difference that game console UI has from desktop application UIs is the focus of certain HCI principles. It takes a different thought process in developing these UIs to yield desirable user likability. Games should be pleasing to the senses, and so presenting information isn’t at the pinnacle of design for UI but rather that it visually looks cool. Does this mean that information isn’t important? Or rather that it just takes a backseat compared to visual displays that “wow” the user? No, it is still very important that gamers may find and navigate their console’s UI just as any other application. There are different options available to game console UI, some better and some worse than average desktop application UIs. Xbox360’s dashboard, PS3’s XMB, and Wii’s UIs are similar in that they place similar amounts of emphasis on similar elements of the UI. The main different between each system is the “wow” effect on visuals.

What makes it so different?

When analyzing the different elements of UI there are many factors that must be considered other than just what is on the display itself (though that is a part of it).

Inputs

               Comparing console UIs to other UIs, there are drastically different kinds of inputs. Game consoles’ main input is a controller – the tool users use to play games. The main input for computer applications is mouse and keyboard. Designers have to take into account that the input is so different that some actions must be completely rethought.

               A good example of changes on UI due to input is textboxes. Textboxes are common for anyone who uses a computer, and are pretty standard way to receive input quickly from a user. Textboxes run into problems with game consoles due to the lack of a keyboard. They are used only when receiving text is unavoidable. Controllers make it difficult to type because users are not offered any lettered keys that can give them the letter they look for in a single button press, this should be obvious when looking at any controller. What has to be done instead is to provide the user the option to type with a virtual qwerty keyboard, this very annoying to a user due to the amount of effort involved.

               Motion sensors have started being implemented in most modern consoles now and provide a whole new aspect in designing UI. The difficulties it may cause are with buttons. Designers must use larger buttons so that gamers have a larger area to “click”. Gamers have much more sensitive controls with motion sensors, so that makes it harder to point and click that may be harder to navigate with. Console UIs seem to swing more towards being able to handle input from motion sensor. Starting with the Wii, the controller itself had point and button press built in it (this is how it was marketed), the UI was built to be completely navigable. PS3 and Xbox360 were originally used only a controller with no motion sensor, but recently there have been add-ons to the systems to allow motion sensor input. The UI has limited capabilities in handling these motion sensor inputs, but with the popularity of these games/inputs it will be only a matter of time until the UI can be completely navigable with motion sensor inputs.

Displays

               The displays that consoles use are generally T.Vs. This creates some complications in design as compared to monitors for computers. Designers must realize two differences: size and distance. Size and distance are balanced by the user. Some prefer to use small T.Vs and sit at a close distance, while others prefer to larger T.V and sit further away.

               What designers need to be aware of is that in some cases the font size or pictures that they use may be too small for some users. Discretion must be used to determine optimal settings for displays.

Network Connectivity

               Modern Console UI now employs some networked services. Some of the services that are offered on the majority of consoles now are: game downloading, movie viewing, and various other network services. Design principles show that with any UI you should attempt to lower loading times to an acceptable manner.

               Each service offered in the UI should load in an acceptable time, but what is acceptable to the user? Well to many users they understand that the more intensive activities require more time to complete. This means activities such as downloading a 6 GB game should not be expected to download in no time. The designers have mitigated this long download time though, by it not locking up your system (users can do other things with the console while they wait for the game to download). Smaller items, like viral videos should load smoothly as if on their desktop. Icons and text downloaded from the internet should be done seamlessly so that users do not even notice that it is from a network resource.

               Designers should realize the capabilities set by the console. The NIC (network interface card) on each console can handle only so large of files to be downloaded. They must accept that some users do not have that fast of an internet, and therefore their consoles not have that fast of a connection as well. Make sure that users are not burdened by so much content on one page, that it takes a long time to load for an average network speed.

Personalization

               On all recent consoles some form of personalization exists. Some of the personalized elements are avatars to represent users, custom background and icons. The benefit to this personalization is to make the user feel as if they are more comfortable. Users control their own profile which has their own avatar that looks like themselves, their favourite background picture, and the most visually appealing look and feel. The familiarity this experience provides allows users to not only visually enjoy their UI, but better understand all the information/tasks.

               The huge task of personalization must provide the user many options to make it truly feel as if it is their personalized theme. Avatars are usually outfitted with more options then users know what to do with, and they enjoy it that way, otherwise the avatar will not look similar to the user, and therefore lose its value. Look-and-feel should be created by 3rd party designers since they are normally too sophisticated to create for users, but need too many to provide any real variation for the console designer to create them.

               Other personalized elements should be controlled by the user, so providing interfaces for them to do so is favourable. This is noticeable with background images; they can be uploaded from computers, and used.

What HCI principles do console UIs focus on?

               Because of the very noticeable differences with game consoles and desktop applications, there is a difference of focus when it comes to HCI principles. The principles guide designers into how to make an efficient UI, so analyzing each aspect would give insight into what is focused, and how it is applicable to modern game console UI.

Perceptual principles

               These principles are based on how information is presented so that it is perceived by the user properly.

               “Make displays Legible” is applicable in all text and pictures. The text must be made at the right size so that users may be able to read it. It becomes noticeable as T.V. size and distance must be taken into account for how legible the text will be. More focus must be put into so that users may see all text.

               Top down processing  and avoiding absolute judgement limits are both taken into accounts but not as focused. Top down processing will be noticed with a familiar loading screen, or downloads/file transfers – these make the UI easier to understand. Avoiding absolute judgement limits is a hard principle to break as consoles are limited by their input. There is little to be done for adjusting precise settings with an absolute judgement. The only applicable variable would be for colour schemes, but there are full previews to mitigate the confusion that may be applicable.

Mental model principles

               Mental model principles explain best practices with

Gamers are used to navigating with a controller and so when they are asked to navigate

6.1. PERCEPTUAL PRINCIPLES

6.1.1. Make displays legible (or audible)

A display’s legibility is critical and necessary for designing

a usable display. If the characters or objects being

displayed cannot be discernible, then the operator cannot

effectively make use of them.

Is used within the OS of gaming, very obvious to note. It goes under the assumption that you have specific displays. PS3 Xbox360, and wii all have issues with legibility on smaller televisions. The handhelds are where gaming companies have a say when it comes to display, they determine the screen size and therefore can strictly control how legible the fonts and pictures are.

6.1.2. Avoid absolute judgment limits

Do not ask the user to determine the level of a variable on

the basis of a single sensory variable (e.g. color, size,

loudness). These sensory variables can contain many

possible levels.

Does not apply. Even in personalization of the look-and-feel for game consoles OS, it limits the options available. Picture/icon size is very large and they are fixed sizes. Changing font sizes is not supported in any of the large modern gaming console UIs. Loudness is usually handled through the t.v. or the games themselves, there is no modifying it within the OS.

6.1.3. Top-down processing

Signals are likely perceived and interpreted in accordance

with what is expected based on a user’s past experience. If

a signal is presented contrary to the user’s expectation,

more physical evidence of that signal may need to be

presented to assure that it is understood correctly.

Loading screens are shown with bars that fill that go along with the progress. Copying files over onto the system show a similar UI.

Xbox360

games

Games are sorted by last played being at the top – players expect this as most players will continue the game that they had last played. There is also an expectation that there are games that are not physically on a disk that are contained on the hard drive

PS3/PSP

games

Games are sorted by last added to the system, newer at the top, older at the bottom. The top of the list will always be the disk that is in the PS3. This goes under the assumption that there is not many downloaded games and that players are generally playing games through the disk.

Wii

games

Wii uses channels to show UI. Most ui elements in channels are displayed in a tile format. It is read like a book – newest elements are the top left, oldest are at the bottom right. There are channels with singular elements (disk channel – only one disk in the console) it normally will take up the whole screen.

6.1.4. Redundancy gain

If a signal is presented more than once, it is more likely

that it will be understood correctly. This can be done by

presenting the signal in alternative physical forms (e.g.

color and shape, voice and print, etc.), as redundancy does

not imply repetition. A traffic light is a good example of

redundancy, as color and position are redundant.

Xbox 360

There is similar menu items that are presented through both the OS UI and the UI presented when hitting xbox guide button(big button with the xbox logo in center of the controller).

All systems

There is redundancy with options for what with preferences in a gamer profile, they become redundant within games themselves as players may be able to change those options within the game itself.

6.1.5. Similarity causes confusion: Use discriminable

elements

Signals that appear to be similar will likely be confused.

The ratio of similar features to different features causes

signals to be similar. For example, A423B9 is more similar

to A423B8 than 92 is to 93. Unnecessary similar features

should be removed and dissimilar features should be

highlighted.

6.2 MENTAL MODEL PRINCIPLES

6.2.1. Principle of pictorial realism

A display should look like the variable that it represents

(e.g. high temperature on a thermometer shown as a higher

vertical level). If there are multiple elements, they can be

configured in a manner that looks like it would in the

represented environment.

Game icons are represented as disks. With the Wii specifically, when a disk is inserted you see the blank disk being inserted on the display, as it then later turns into the display for the game after it has loaded the disk. PSP, games are represented as UMD’s they happen to look different then normal disks. Games are allowed to display icons or small movies with music if they want. This functionality helps represent the games that are being represented within the system. The icon/music/movie clip helps players interpret and realize that the game they are hovering over is the game that they have bought(and should therefore recognize).

6.2.2. Principle of the moving part

Moving elements should move in a pattern and direction

compatible with the user’s mental model of how it actually

moves in the system. For example, the moving element on

an altimeter should move upward with increasing altitude.

Wii System and their disk loading.

6.3 PRINCIPLES BASED ON ATTENTION

6.3.1. Minimizing information access cost

When the user’s attention is diverted from one location to

another to access necessary information, there is an

associated cost in time or effort. A display design should

minimize this cost by allowing for frequently accessed

sources to be located at the nearest possible position.

However, adequate legibility should not be sacrificed to

reduce this cost.

The Wii takes special note in this priniciple. The system has to make large displays on the currently selected element so that the player would most likely perform actions, this display takes up a large portion of the screen. The user should also be able to navigate away from the currently selected item, it handles this by keeping similar icons to back out or move forward from the specific item, in similar places. Overall this design makes it enjoyable for the majority of users, first time users may have difficulty noticing the icons to navigate away.

6.3.2. Proximity compatibility principle

Divided attention between two information sources may be

necessary for the completion of one task. These sources

must be mentally integrated and are defined to have close

mental proximity. Information access costs should be low,

which can be achieved in many ways (e.g. close proximity,

linkage by common colors, patterns, shapes, etc.).

However, close display proximity can be harmful by

causing too much clutter.

N/A none comes to mind

6.3.3. Principle of multiple resources

A user can more easily process information across

different resources. For example, visual and auditory

information can be presented simultaneously rather than

presenting all visual or all auditory information.

6.4 MEMORY PRINCIPLES

6.4.1. Replace memory with visual information:

knowledge in the world

A user should not need to retain important information

solely in working memory or to retrieve it from long-term

memory. A menu, checklist, or another display can aid the

user by easing the use of their memory. However, the use

of memory may sometimes benefit the user by eliminating

the need to reference some type of knowledge in the world

(e.g. an expert computer operator would rather use direct

commands from memory than refer to a manual). The use

of knowledge in a user’s head and knowledge in the world

must be balanced for an effective design.

Due to the contextual nature of all game console UIs there are pictures that help represent ideas and pictures, this makes it easier for people who are new to gaming able to navigate systems easily. On the other end of the spectrum, due to the limited amount of input there are very few advanced commands for experts to utilize from memory. The only advantage experts have from memory is piecing together the shortest path to whatever command they need. There are a few exceptions to this idea, one of them is the command turn off the system. On all modern system UIs you are able to turn off the system through a command, but to an average user they may only be aware of how to turn off the console through the power button.

6.4.2. Principle of predictive aiding

Proactive actions are usually more effective than reactive

actions. A display should attempt to eliminate resource-

demanding cognitive tasks and replace them with simpler

perceptual tasks to reduce the use of the user’s mental

resources. This will allow the user to not only focus on

current conditions, but also think about possible future

conditions. An example of a predictive aid is a road sign

displaying the distance from a certain destination.

This principle is best shown in all the previews that the UI provides. When opening up the game menu in just about every UI you have it will provide previews to the games available to better aid the user in finding the game they would like to play. With the Xbox dashboard there are many previews to all channels available, so that a user may see what is new within a specific channel before entering (especially useful with online content), XMB (PS3) and the Wii’s UI provide similar experiences. When downloading online material the information is provided beforehand before the user is asked to download, this is true in all content, except in updates(and sometimes those can be avoided too).

6.4.3. Principle of consistency

Old habits from other displays will easily transfer to

support processing of new displays if they are designed in

a consistent manner. A user’s long-term memory will

trigger actions that are expected to be appropriate. A

design must accept this fact and utilize consistency among

different displays.

This principle is more true when comparing the PS3 to the PSP. They use similar operating systems called the XMB. But there has to be difference due to functionality. The PS3 has more online features compared to the PSP. This is due to the mobility and the lack of speed of the PSP. The PS3 allows a provides the user the option to turn off the system from one of its menu, while the PSP doesn’t. this is due to the physical distance that the user is expected to be away from the system. The PSP is expected to be in the hands of the user at all times, while the PS3 is to sit next to a t.v. out of arms’ reach.

Whether it was a fluke or not, there is some consistency between with UI in the PS3 and Xbox 360. They both feature UIs that are navigated in 2 dimensions (only up/down and left/right). This provides familiarity when switching between systems easier in terms of navigation.

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