New UI and Ribbon beyond the menus and toolbars of MS Office 2007


in front Office 2007 New UI Design Goals and Principles looked into This time, let's take a look at the ribbon.

When you first look at Office 12, the biggest change compared to the previous version is the menu area located at the top of the window. The Windows standard has a menu below the title bar text at the top of the window, and a toolbar below it.

windows

source:Official Guidelines for User Interface Developers and Designers

 

In Office 12, in order to solve the scaling problem of menus and toolbars, as mentioned earlier, the menus and toolbars, which were first introduced on Xerox Alto computers in 1973, have been removed as the Windows UI standard for over 20 years.

Instead of exposing the commands as shown in the figure, this command area is called a 'ribbon'. The Ribbon is the UI element that replaces menus and toolbars in Office 12, and is the only place to see what the product can do. So, in Office 12, look at the ribbon to find the features you need.

 

office 2007 ribbon
Ribbon in MS Word 2007

 

The ribbon is composed of tabs organized according to usage scenarios and targets, and tabs are composed of chunks and controls that group commands into tabs.

composition of the ribbon

composition of the ribbon

 

ribbon tab

Ribbon tabs can be divided into general tabs and context tabs. The general tab is a tab that is always visible regardless of the user's context, and the context tab is a tab that appears and disappears depending on the user's working context.

The tabs on the ribbon do not consist of File, Edit, View, Insert, Format, Tools, Window, and Help like the menus in Office 2003, but are different for each Office program. This is to arrange the ribbon tabs for each task of the user by designing the ribbon tabs as task-oriented rather than command-oriented ones.

Menus in Office 2003 and Ribbon Tabs in Office 12

Menus in Office 2003 and Ribbon Tabs in Office 12

청크
You can see that the commands are grouped in the tabs of each ribbon, the code name of this set of commands is the chunk. In the toolbar UI, groups of commands were separated between commands by simply a vertical bar called a delimiter.

Chunks on the ribbon group commands together and label the groups so that users can quickly find the commands they need. Commands in chunks have a 2D layout, similar to the old toolbars and main menus, and some commands look like dialog boxes, task panes, or even web pages.

 

control
Inside the chunk are buttons, dialog box content, and a gallery. The dialog box contents allow items to be entered in the dialog window directly from the ribbon.

 

Control Types in the Ribbon
Control Types in the Ribbon

 

Control analyzed the data collected through the Office User Engagement Program and placed them in the order of frequent use. The number of functions in Word is about 1500, but there are not many functions that users actually use a lot.

As a result of analyzing the data collected through the user participation program in the office team, the most frequently used commands in Word 2003 are Paste, Save, Copy, Undo, and Bold. Bold). In addition, these five instructions amounted to about 32% of the total number of instructions used in Word, and one paste occupies 11% of the total used instructions.

Paste is the most used command in Excel and PowerPoint, with 15% and 12% of them used, respectively. So, in the Write tab, the first icon for paste is a large icon, and cut, copy, and copy format are placed as the first group of commands.

 

office 2007 label
Example of an icon with a label

As for the size of the buttons, the buttons used by users are large, and those not used are small. And all commands have a fixed position so that users can predict them, and commands in the ribbon are grouped together to make it easier for users to find commands. Command icons are labeled.

After years of usability testing at Microsoft, most people didn't click on unlabeled, 16x16-pixel icons. Functions such as bold, italic, and center alignment were frequently used, but from 8 or more icons, the frequency of use dropped sharply, so the buttons were labeled.

Many Windows programs and web applications have only icons and no labels. As you can see in Office 2007, the icons are intuitive, but you can see that the labels are the best rather than the clumsy icons. Don't just emphasize the visual design, just put all the labels on it.

 


Ribbon is not an official name, but a code name that is being called during the development process.

The original name of the Ribbon was proposed in the fall of 2003 by Johnson Harris, program manager lead on the Office User Experience team, because it meant that commands scroll like a scroll.

Ribbon refers to something like a long, thin piece of cloth used to wear a bow tie, and it is said that it was thought of as a UI where commands were continuously displayed like a printer ribbon or a scroll. However, unlike the first thought, the tab shape was decided, but the office team continued to call it ribbon internally, so the code name was changed to ribbon.

 

Ribbon that changes smartly when window size is changed
As you resize the window, you can see that the shape of the button changes very cleverly. When the size of the window is gradually reduced, the arrangement or spacing of the ribbon changes so that the user can recognize the command as much as possible. The first thing that changes when you make the window smaller is that the buttons arranged in two rows are changed to three rows. Reducing the window to a smaller size creates scroll buttons on the far left and right sides of the ribbon, allowing you to scroll through different chunks of one tab. There are buttons for scrolling on the left and right, but I think this UI is not the UI named Ribbon in the first place.

 

Ribbon UI with scroll concept

 

If you reduce it further, the spacing between tabs is reduced, and it is hidden from the right side of the tab label. The label of the tab is partially hidden, but since the label can see the preceding letters, there is no problem in selecting the tab. When the size of the buttons in the chunks is reduced, the icons and labeled buttons change to drop-down buttons for each chunk.

The shape of the ribbon changes when the window size is reduced

 


If you further reduce the size of the window, the ribbon disappears without leaving any tabs.



You can imagine that the button's icon on the ribbon is so large that the editing area is smaller than when there were menus and toolbars. If you measure the height of the menu and toolbar and the height of the ribbon in pixels, you can see that the height of the ribbon is similar to when three toolbars were opened in the previous version.

 


Comparison of the height of the Office 2003 toolbar and the Office 12 ribbon

 

Maximize edit area height
In order to view more web pages in a web browser such as Internet Explorer or Firefox, there is a full-screen view function that hides only the web page and toolbar. In Office 2007, documents can be populated on the screen so that users can focus on the area they are working on, such as Internet Explorer's full view feature. If you click the tab of the currently selected ribbon, the commands under the tab are hidden and the editing area becomes that much. If you click any tab on the ribbon, the commands in that tab are visible, and the height of the edit window is the same as before.

 

Maximize edit area size

 

As mentioned above, we looked at the radically changed Ribbon in Office 2007. Next, we will look at the context-oriented UI.

full table of contents Office 2007's new user interface can be seen in

 







Recommendations





0 If you like the article, please click the heart~ It will be a strength to bloggers (SNS/login/advertising is not related)



Articles you might like







Contact map: customer management on the map
4.6
Contacts at a glance on the map, location-based contact management, view nearby contacts












Add a Comment

Email addresses are not disclosed. Required items *is indicated by

























This posting is part of Coupang Partners' activities, and a certain amount of commission is provided accordingly.