91.527 - Human Computer Interaction Mid-Term...

14
91.527 - Human Computer Interaction Mid-Term Paper Word User Interface Evolution By M. Michael Nourai

Transcript of 91.527 - Human Computer Interaction Mid-Term...

Page 1: 91.527 - Human Computer Interaction Mid-Term Paper91-527-f2010.wiki.uml.edu/file/view/nourai-midterm-paper.pdf · 91.527 - Human Computer Interaction Mid-Term Paper ... Today, almost

91.527 - Human Computer Interaction

Mid-Term Paper

Word User Interface Evolution

By

M. Michael Nourai

Page 2: 91.527 - Human Computer Interaction Mid-Term Paper91-527-f2010.wiki.uml.edu/file/view/nourai-midterm-paper.pdf · 91.527 - Human Computer Interaction Mid-Term Paper ... Today, almost

Mid-term Paper M. Michael Nourai

91.527 - Human Computer Interaction Page 2

Table of Contents 1. Abstract ................................................................................................................................................. 3

2. Introduction .......................................................................................................................................... 3

3. Microsoft Word 97-2003 ...................................................................................................................... 4

3.1 Overview ............................................................................................................................................. 4

3.2 Menu bar ............................................................................................................................................. 5

3.3 Office Assistant ................................................................................................................................... 6

4. Evolution of Word icons ........................................................................................................................ 7

5. Microsoft Word 2007 and 2010 ............................................................................................................ 8

5.1 Overview ............................................................................................................................................. 8

5.2 Ribbon Interface.................................................................................................................................. 9

5.3 Ribbon Interface Issues ..................................................................................................................... 10

5.3.1 Office Button is ambiguous ........................................................................................................ 10

5.3.2 Dialog box invoking icon is too small ......................................................................................... 11

5.4 Ribbon Interface Improvements ....................................................................................................... 12

5.4.1 New File Tab ............................................................................................................................... 12

5.4.2 Proposal for improving dialog box invoking icon ....................................................................... 13

6. Conclusion ........................................................................................................................................... 14

7. References .......................................................................................................................................... 14

Page 3: 91.527 - Human Computer Interaction Mid-Term Paper91-527-f2010.wiki.uml.edu/file/view/nourai-midterm-paper.pdf · 91.527 - Human Computer Interaction Mid-Term Paper ... Today, almost

Mid-term Paper M. Michael Nourai

91.527 - Human Computer Interaction Page 3

1. Abstract Microsoft has come a long way in improving user interaction with their Office applications. The

new ribbon menu and toolbar style was introduced and presented in Office 2007, and soon after

it showed up in other Microsoft applications. This paper describes the Microsoft Office Word

user interface evolution from earlier revisions to their latest revision.

2. Introduction Today, almost everybody in the developed world interacts with personal computers in some form

or another. We use them at home and at work, for entertainment, information, and as tools to

leverage our knowledge and intelligence. It is pretty much assumed whenever anyone sits down

to use a personal computer that it will operate with a graphical user interface (GUI) [1].

Microsoft, Apple and other leaders in the computer industries have made significant

contributions in this area transitioning users from older computer user interface such as batch

jobs or text based to GUI level user interface we know of today.

Since the release of Microsoft Windows 1.0 (Figure 1), Microsoft used a menu bar with pull-

down menus at the top of application window showing different options the application supports.

Pull-down menus are menus that the user can always access by making selections on top menu

bar. Introduced by the early Xerox Star, Apple Lisa, and Apple Macintosh interfaces these

menus are used by the majority of desktop applications today. Common items in the menu bar

are File, Edit, Format, View and Help [3].

Figure 1 – Microsoft Windows 1.0 [2]

Page 4: 91.527 - Human Computer Interaction Mid-Term Paper91-527-f2010.wiki.uml.edu/file/view/nourai-midterm-paper.pdf · 91.527 - Human Computer Interaction Mid-Term Paper ... Today, almost

Mid-term Paper M. Michael Nourai

91.527 - Human Computer Interaction Page 4

3. Microsoft Word 97-2003

3.1 Overview

My initial introduction to Microsoft Office was with Word 97. Its user interface was a

combinations of menu bar with pull-down menus and list of icons for most frequently used

options such as New Document, Open Folder, Save As, Font selection, etc. (Figure 2a). This user

interface was somewhat familiar to the users of Windows, so the user didn’t have to learn a

brand new user interface from scratch when using this application. User knew enough to get

started and then learned the Word 97 user interface as they used it.

Throughout the years, Microsoft released Office 2000, Office XP and Office 2003 (Figure 2b).

With each revision there were some user interface changes to make the office applications easier

to use. However, some changes such as addition of Office Assistant, and hiding menu items in

pull-down menus, didn’t make the user interface easier to use, and in fact had a reverse effect.

Figure 2a – Word 97 main window

Figure 2b – Word 2003 main window

Page 5: 91.527 - Human Computer Interaction Mid-Term Paper91-527-f2010.wiki.uml.edu/file/view/nourai-midterm-paper.pdf · 91.527 - Human Computer Interaction Mid-Term Paper ... Today, almost

Mid-term Paper M. Michael Nourai

91.527 - Human Computer Interaction Page 5

3.2 Menu bar The menu bar for Word 97 (Figure 3a) consisted of the following: File, Edit, View, Insert,

Format, Tools, Table, Windows, and Help. When user clicks on a menu bar title, it brings up a

list of related items, and user can then make a selection by moving the pointing device over the

items (which respond by highlighting), and clicking on the desired choice (or by using the up and

down arrow keys to highlight their selection and pressing Enter to select) [3]. These pull-down

menus were very convenient for hiding all the options until user clicks on them when they

needed them. This technique increased screen space for the user’s document area.

Figure 3a – Word 97 menu bar

Figure 3b – Word 2000 menu bar

With the Office 2000 and 2003 release, Microsoft changed the pull-down menus based on how

frequently you used the items listed in the menus (Figure 3b). Some menu items were hidden if

you didn’t use it often. Although this feature sounded good at first, it started to be extra work for

the users to find menu items they needed. I disabled this feature whenever I used Word.

Page 6: 91.527 - Human Computer Interaction Mid-Term Paper91-527-f2010.wiki.uml.edu/file/view/nourai-midterm-paper.pdf · 91.527 - Human Computer Interaction Mid-Term Paper ... Today, almost

Mid-term Paper M. Michael Nourai

91.527 - Human Computer Interaction Page 6

3.3 Office Assistant Microsoft Word 97 included for the first time a feature known as Office Assistant (Figure 4a),

which was "supposed to" assist the user in common tasks. In reality, it was nothing more than an

irritant and was quickly slammed by users [4].

Figure 4a – Word 97 Office Assistant

Figure 4b – Word 2000 Office Assistant

Since I was new to Word 97 and it had a different look and feel to it than my favorite word

processor, AMI Pro, I wanted to try to learn as much as I can about this new feature. But after

playing with the Office Assistant for several weeks, I didn’t find it useful and started turning it

off whenever I did a new install of Office.

Office Assistant went through some changes over the years since its initial introduction. In Word

2000 it got a new look (Figure 4b), but it remained as a not so useful feature. Office Assistant

was enabled by default for Word 97 and 2000.

While the Office Assistant was still present in Office XP, it was (thankfully) switched off by

default in this version of Word [4].

Page 7: 91.527 - Human Computer Interaction Mid-Term Paper91-527-f2010.wiki.uml.edu/file/view/nourai-midterm-paper.pdf · 91.527 - Human Computer Interaction Mid-Term Paper ... Today, almost

Mid-term Paper M. Michael Nourai

91.527 - Human Computer Interaction Page 7

4. Evolution of Word icons I love arts and icons, so when I was researching Microsoft Office Word for my mid-term paper, I

decided to present their icon changes from each releases (Figure 5). The following are Microsoft

icons for Word 97 – Word 2010.

Word 97 Word 2000

Word XP Word 2003

Word 2007 Word 2010

Figure 5 – Word 97 – Word 2010 icons

Page 8: 91.527 - Human Computer Interaction Mid-Term Paper91-527-f2010.wiki.uml.edu/file/view/nourai-midterm-paper.pdf · 91.527 - Human Computer Interaction Mid-Term Paper ... Today, almost

Mid-term Paper M. Michael Nourai

91.527 - Human Computer Interaction Page 8

5. Microsoft Word 2007 and 2010

5.1 Overview

Word 2007 was released in 2007 along with Office 2007. This version of Word differed radically

in looks from the previous versions, and went more with a Vista kind of theme (Figure 6a). A

major and easily noticeable feature was the Ribbon user interface design which was a bit

confusing (at least at the start) to users of the previous versions since it was result-oriented rather

than the traditionally command-oriented Menu system. Also new in this version is the new

XML-based DOCX format, which is not compatible with previous versions [4].

Word 2010 was released this year along with Office 2010. The Word 2010 User interface (Figure

6b) remains the ribbon interface and looks similar to Word 2007. However, there have been

some improvements made to ribbon interface of this version. The most noticeable difference

between Word 2007 and 2010 is the addition of File tab.

Figure 6a – Word 2007 main window

Figure 6b – Word 2010 main window

Page 9: 91.527 - Human Computer Interaction Mid-Term Paper91-527-f2010.wiki.uml.edu/file/view/nourai-midterm-paper.pdf · 91.527 - Human Computer Interaction Mid-Term Paper ... Today, almost

Mid-term Paper M. Michael Nourai

91.527 - Human Computer Interaction Page 9

5.2 Ribbon Interface Although at first the Office 2007 ribbon interface seems challenging to use (Figure 7), since it

looks so different than the traditional menus and toolbars that users were used to using. Over

time users got used to the new way of using Office applications and perhaps prefer it over the

traditional way. As part of my full-time job, I help students and faculty in using Office 2007 on

day to day basis and have gotten similar feedback from them. This feedback is very valuable to

me since I know that I am not the only one preferring the new interface over the previous

versions of Office.

Figure 7 – Word 2007 Ribbon interface

The ribbon interface is all about organizing and grouping most frequently used commands in a

tabbed-based format to allow the user to quickly find the commands they need to complete a

task. In older revisions of Office, the menus and toolbars seem to hide the commands and user

needed to click on the toolbars to see the contents. With ribbon interface, the contents of the

menus and toolbars are right there in front of you.

A great feature of ribbon interface is the capability of hiding and showing different menus based

on your current activity, which reduces clutter. For example, if you are on Insert tab and clicking

on Table to insert a table, a table context tab is added to the tab interface (Figure 8) to allow you

to select different options for your table.

Figure 8 – Word 2007 Ribbon Interface Showing Table Tools’ Design Tab

Page 10: 91.527 - Human Computer Interaction Mid-Term Paper91-527-f2010.wiki.uml.edu/file/view/nourai-midterm-paper.pdf · 91.527 - Human Computer Interaction Mid-Term Paper ... Today, almost

Mid-term Paper M. Michael Nourai

91.527 - Human Computer Interaction Page 10

5.3 Ribbon Interface Issues

5.3.1 Office Button is ambiguous

Although I like the ribbon interface over the traditional windows menus and toolbars interface, it

can be further improved. For example, when we first installed Office 2007 in the lab, almost

every student using it for the first time asked me, “where is the print button?” or “how do I print

my document?”

The print button is in a brand new menu accessible to the user only when the Office button is

pressed (Figure 9). The Office button is ambiguous and doesn’t seem to provide any function, at

first glance, unless you knew about it before hand.

Figure 9 – Word 2007 – Showing Office button pressed

Page 11: 91.527 - Human Computer Interaction Mid-Term Paper91-527-f2010.wiki.uml.edu/file/view/nourai-midterm-paper.pdf · 91.527 - Human Computer Interaction Mid-Term Paper ... Today, almost

Mid-term Paper M. Michael Nourai

91.527 - Human Computer Interaction Page 11

5.3.2 Dialog box invoking icon is too small

Most groups in the ribbon interface contain a dialog box to allow user change more options that

are normally hidden. Dialog box can be displayed if the user clicks on the dialog box icon. One

of the issues of the dialog box icon is that it is tiny and tough to see and it’s time consuming to

place the cursor on that little area to click on it (Figure 10a). The other issue is that it looks

ambiguous looking unless you knew about it ahead of time, or discovered what it does by play

with it.

Once you figure out what that icon means and get used to clicking on it, a dialog box will be

shown (Figure 10b) to allow you to view and change your editing options. This is a very valuable

resource available to the user for fine tuning extra editing options.

Figure 10a – Word 2007 Paragraph dialog box icon

Figure 10b – Word 2007 Paragraph dialog box

Page 12: 91.527 - Human Computer Interaction Mid-Term Paper91-527-f2010.wiki.uml.edu/file/view/nourai-midterm-paper.pdf · 91.527 - Human Computer Interaction Mid-Term Paper ... Today, almost

Mid-term Paper M. Michael Nourai

91.527 - Human Computer Interaction Page 12

5.4 Ribbon Interface Improvements

5.4.1 New File Tab

The hidden menu under office button was not liked by Word users. It was difficult to use for

beginners as well as extra clicks needed for advanced user to bring up those options.

Word 2010 improved the ribbon interface introduced with Word 2007 by replacing the

ambiguous office button with a File menu tab. In addition, some of the options that were

available under the office button were improved and modified.

However, File menu tab comes at a cost of interface inconsistency which behaves differently

than any other tabs in ribbon interface. This interface inconsistency at first is surprising, but the

added features make up for it. Some of the great features of File menu tab are “Info” selection

which provides information about the document (Figure 11a), “Print” selection which shows a

preview of the document as well as printer and settings (Figure 11b).

Figure 11a – Word 2010 – File tab->Info

Figure 11b – Word 2010 – File tab->Print

Page 13: 91.527 - Human Computer Interaction Mid-Term Paper91-527-f2010.wiki.uml.edu/file/view/nourai-midterm-paper.pdf · 91.527 - Human Computer Interaction Mid-Term Paper ... Today, almost

Mid-term Paper M. Michael Nourai

91.527 - Human Computer Interaction Page 13

5.4.2 Proposal for improving dialog box invoking icon

The dialog box icon mentioned in section 5.3.2 is yet to be improved. The Word 2007 (Figure

12a) and Word 2010 (Figure 12b) are using the same graphics and icon for displaying the dialog

box which I find it hard to use.

Figure 12a – Word 2007 Paragraph Group

Figure 12b – Word 2010 Paragraph Group

My suggestion is to remove the tiny icon and make the group’s name clickable (Figure 13). This

way user has more clickable area which is easier to see and click on.

Figure 13 – My propose changes to the dialog box invoking icon

Page 14: 91.527 - Human Computer Interaction Mid-Term Paper91-527-f2010.wiki.uml.edu/file/view/nourai-midterm-paper.pdf · 91.527 - Human Computer Interaction Mid-Term Paper ... Today, almost

Mid-term Paper M. Michael Nourai

91.527 - Human Computer Interaction Page 14

6. Conclusion Creating and improving a Human-User Interaction is a lot harder than one can image. Every

types of application may require a whole set of new design to improve the interface. In my

opinion, Microsoft made a great attempt in improving the Office Human-User Interaction

introducing the ribbon interface in Office 2007, then improving it further with Office 2010

considering 2-3 years of field testing and customer feedbacks. Ribbon interface for Word is

definitely a step in the right direction but there is always room for improvement.

7. References

[1] Jeremy Reimer, May 5, 2005. A History of the GUI.

http://arstechnica.com/old/content/2005/05/gui.ars

[2] Alex Castle and Florence Ion, October 22, 2009. A Visual History of the Windows GUI.

http://www.maximumpc.com/article/features/windows_throughout_ages_evolution_gui

[3] Ben Shneiderman, Catherine Plaisant, Maxine Cohen, Steven Jacobs. 2010. Designing the

User Interface: Strategies for Effective Human-Computer Interaction, 5/E.

[4] Jayesh Limaye, Apr 23, 2009. Evolution of MS Word.

http://www.techtree.com/India/Reviews/Evolution_of_MS_Word/551-101355-575-1.html