Editor | On 07, Jun 2010

By Umakant Mishra

Abstract

The concept of a graphical user interface (GUI) evolved during the 1980s in the computing industry.¹⁶ The early graphical user interfaces like Macintosh system-1 (1984) and Microsoft Windows-1 (1985) were substantially improved during the 1990s with MS Windows 95 (1995) and Mac OS 8 (1997). Graphical user interfaces like KDE 3.5, Mac OS X 10.5 and Microsoft Windows Vista are far superior to the previous ones.

Introduction

A graphical user interface has many advantages over its predecessor known as the textual user interface. The most fascinating feature of a graphical user interface is that it helps users perform complex operations with simple mouse clicks. The younger generation computer users are so accustomed with graphical interfaces that many of them fail to believe that there were software applications without any graphical user interface.

Designing a graphical user interface, however, is not as easy as it may appear on the outside. The developer faces many difficulties while improving its features. In many cases improving one feature of a graphical user interface results in worsening another feature of it, thus leading to a situation known as a contradiction in the Theory of Inventive Problem Solving (TRIZ).¹⁸ Many such contradictions have been solved by different inventors in the past. This article will demonstrate some important contradictions and will discuss alternative solutions for each contradiction. Some solutions that are already patented are mentioned with the patent number. Other solutions are either not patented or not patentable because they are known solutions.¹⁹

The Problem of Increasing the Number of Graphical User Interface Elements

The advanced applications of the recent era include more and more elements into the graphical user interface. But the biggest drawback of a graphical user interface is that it permanently consumes some active area of the display screen. As a result, a part of the display screen is always masked and the amount of user information that could have been viewed is reduced. For example, a toolbox in a CAD application, although useful, causes a lot of discomfort as it obscures the drawings.

This situation creates a contradiction. The goal is to display more and more visual elements on the screen so that the user can have easy access to more features of the graphical user interface. The physical size of the screen, however, is limited and cannot be easily expanded. This limitation of display space urges an individual to reduce the number of graphical user interface elements. A physical contradiction can be framed as follows:

1: Contradiction of Increasing Number of Graphical User Interface Elements

The goal is to display more visual elements on the screen so that the user can have easy access to more features. But at the same time the goal is to want to display fewer numbers of visual items on the screen to improve visibility and navigation.

Possible solutions:

• Using large physical screens, which effectively provide more display space (Principle 37, Expansion). Note: The conventional name of this principle “Thermal Expansion” has been renamed as “Expansion” by the author because of more relevance in the IT field.¹⁷
  
• Using virtual display to expand the effective size of a display screen by using the space beyond the edge of the display. (Principle 17, Another Dimension)
  
• Reducing the size of the fonts, pictures and graphical elements can reduce the demand for screen space and thereby display more information on the same size screen. (Principle 35, Parameter Change)
  
• Instead of reducing the size of fonts or graphics an individual may increase the screen resolution that may effectively reduce the size of the visual elements. (Principle 13, Other Way Round)
  
• Displaying only the important graphical user interface elements by default and display other elements later on demand. (Principle 16, Partial or Excessive Action)
  
• Divide graphical user interface elements in groups (Principle 1,Segmentation) and create containers (like menus or folder buttons) to hold a group of similar elements. This method saves screen space as only the container items are displayed instead of the individual items. (Principle 7, Nested Doll)
  
• Patent 6448986 proposes to hide the toolbars during normal operation and display the toolbars when the pointing device moves into a pre-defined control region.¹² When the toolbars are hidden or displayed, the data screen is automatically resized accordingly. (Principle 15, Dynamize)
  
• Allowing overlapping windows in order to accommodate more windows than the available physical screen size. (Principle 17, Another Dimension)
  
• Using a drop down menu (Principle 15, Dynamize) or a cascading menu (Principle 17, Another Dimension) to present more items without permanently occupying the screen.
  
• A three-dimensional presentation is more effective to present more icons on a limited screen space. (Principle 17, Another Dimension); A cube has six sides and can display more icons than a two-dimensional flat panel. Patent 5678015 discloses a translucent four-dimensional interface where the icons on the rear side of the cube are also visible (Principle 17, Another Dimension; Principle 32, Color Change).
  
• Zoom in and zoom out concepts when the user wants to view a large graphical universe within a limited area of a display screen. An individual has to “zoom out” the graphical universe to reduce its size. Conversely, when the user is interested in a detailed view of a particular object, an individual has to “zoom in” on the object-in-interest. (Principle 37, Expansion)
  
• Patent 5956035 proposes to enlarge the font menu items for clarity of viewing when the user moves the cursor over the items on the menu bar.⁶

The Problem of Size for the Graphical User Interface Elements

One fundamental requirement of a graphical user interface is that its elements should be clearly visible. The size of the fonts, icons and other visual elements should be reasonably large in size. In many situations, however, a designer is forced to reduce the size of the elements in order to accommodate more elements within the limited screen space. Reducing the size of visual elements reduces the clarity and visibility of the elements.

This situation again leads to a contradiction. The goal is to display the visual elements in a larger size for better visibility and easy identification. Increasing the size of the visual elements, however, requires larger display space.

The following situation is outlined in a physical contradiction:

2: Contradiction of the Size of Graphical User Interface Elements

The goal is to display the visual elements in a larger size for better visibility, but at the same time, to display the visual elements in a smaller size to accommodate more visual elements on the display screen.

Possible solutions:

• Reducing the number of display elements such as hiding unwanted elements (Principle 2, Taking Out) or grouping related commands and keeping them inside folder icons. (Principle 5, Merging; Principle 7, Nested Doll)
  
• Using a scroll bar or other scrolling mechanism to scroll a larger virtual screen within the limited physical screen. (Principle 15, Dynamize)
  
• Displaying items in a smaller size by default and increasing their size when the cursor is moved over them for better visibility. (Principle 15, Dynamize)
  
• A smart icon also provides a solution to this problem. For example, the “balloon help” in Apple Macintosh and “tooltips” in Microsoft Windows describe the functions of various graphical user interface elements in a pop-up display (Principle 17, Another Dimension) when a user moves the cursor onto the desired icon. (Principle 15, Dynamize)
  
• Transparent or translucent graphical components that do not obscure the client data. (Principle 32, Color Change)
  
• Patent 6445364 proposes an enlarged virtual display using a head mount, which makes the small items visible, even to visually impaired users. (Principle 37, Expansion)¹¹
  
• Using a sliding out interface. Patent 5914716 discloses a sliding out command bar that is displayed when the user moves the display pointer to a location near the target image. (Principle 34, Discard and Recover)⁴

The Problem of Displaying Scrollbars

Scrolling is an essential function of a graphical user interface. It helps for viewing large items on a small physical screen. Scrollbars are commonly used to scroll frames or windows. A major drawback of the scrollbars, however, is that they permanently occupy some screen real estate and thereby aggravates the problem further. The scrollbars require a lot of cursor operations.

Figure 1: Scrollbars

This causes another contradiction. The goal is to use the scrollbars because they are necessary for scrolling operations (and scrolling is essential for viewing large items especially on small screens). The scrollbars occupy some amount of screen space. This reduces the effective screen space and thereby aggravates the problem further. The goal is to use the scrollbars for the scrolling operation. Do not sacrifice screen space for the scrollbars.

A physical contradiction can be framed as follows:

3: Contradiction of Displaying Scrollbars

The goal is to display scrollbars for scrolling the display screen, on the other hand, do not display the scrollbars as they permanently occupy some amount of screen space.

Possible solutions:

• Reducing the scrollbar size (Principle 35, Parameter Change) or using scroll buttons instead of scrollbars. (Principle 28, Mechanics Substitution)
  
• Using a pulling concept typically with a thumb icon instead of conventional scrolling with scrollbars. (Principle 28, Mechanics Substitution)
  
• Displaying scrollbars only when the cursor goes to the border of the window and hide the scrollbars when the cursor is away. (Principle 34, Discard and Recover)
  
• Implement automatic scrolling when the cursor is placed on predefined areas. (Principle 25, Self Service)
  
• Using the navigation keys on the keyboard for scrolling. (Principle 28, Mechanics Substitution)
  
• Patent 6181316 proposes an inline scroll control. It is displayed directly on the worksheet. (Principle 17, Another Dimension); These scroll controls are small in size compared to scrollbars and require less screen space. (Principle 35, Parameter Change)¹⁰
  
• Patent 5611060 provides automatic scrolling during drag and drop operation.² When the mouse indicator is over a predefined area of the window (window border) the system scrolls the target window to facilitate dropping the dragged objects. (Principle 15, Dynamize)

Figure 2: Inline Scroll Control

The Problem of Menu Hierarchy

The problem of display space can be effectively addressed by:

1. Increasing levels in hierarchy (such as using folder icons and sub-menus).
   
2. Scrolling (that displays more items within the limited display space). But both these solutions affect the navigation adversely. For example, when there are more hierarchies in a menu (or directory or tree-navigator) the user has to expand various branches to search a desired item.

The following physical contradiction expresses the situation:

4: Contradiction Levels in Menu Hierarchy

The goal is to create more levels in the menu hierarchy to accommodate more menu items or child nodes. But at the same time the user does not want more levels in the menu hierarchy as that affects the navigation adversely.

Possible solutions:

• Finding an intelligent method to jump from the current directory to the target directory or from the current menu position to the desired menu option directly, instead of traversing through long and different branches of the tree (using the super system).
  
• Programming the graphical user interface to intuitively pull the cursor pointer near to the desired element so that the user needs to do less pointer movement. (Principle 10, Prior Action); Alternatively, the menu or other selectable item may be displayed near the cursor pointer so that the pointer needs to move a smaller distance. (Principle 10, Prior Action)

Figure 3: Programming the Graphical User Interface

• Patent 6005567 places the elements with higher access frequency in a screen location that is more conveniently accessible by the user. (Principle 10, Prior Action); The invention also automatically moves the elements between a first area (better accessibility) to a second area (not as much accessibility) on the screen based on the changing behavior of the user. (Principle 15, Dynamize)⁷
  
• Patent 5689669 provides a navigation system based on real world metaphors.³ The invention uses the concepts of real world objects like streets, hallways, rooms and doors. This simplifies the navigational routes and enables the user to navigate intuitively through the graphical user interface. (Principle 26, Copying)
  
• Providing a bookmark bar and bookmark buttons to open programs, files, pages, views, etc. directly without navigating through a number of steps (using a super system).
  
• Patent 6493006 proposes a contextual menu or pop-up menu that displays only the commands that are most frequently used with a particular type of object.¹³ Displaying fewer commands makes it easy for the user to find and select the desired command from the menu.

The Problem of Look and Feel

Look and feel attracts the users and makes a graphical user interface more popular. Implementing a better look and feel is not as easy as different users have different choices. Even if the developer applies the best look and feel, the same may not be liked by some users. The same user who likes a look and feel now may not like it later.

There is another problem involved in the look and feel of the graphical user interfaces. Even if the look and feel of a graphical user interface is good it may not be satisfactory unless it matches with the look and feel of other graphical user interfaces running on a computer. But different graphical user interfaces are developed by different vendors at different periods of time. Although each vendor will try to improve the look and feel of the product, the vendor cannot ensure its visual compatibility with other graphical user interfaces developed by other vendors.

This situation leads to a contradiction. An individual cannot impose any specific look and feel to be followed by the vendors because that would restrict innovation. The goal is to get the look and feel of all graphical user interfaces developed by different vendors to match. Otherwise they could be annoying to the user. The contradiction statement is as follows:

5: Contradiction of the Look and Feel of a Graphical User Interface

The goal is to implement fixed standards and norms for implementing look and feel so that the look and feel of different graphical user interfaces developed by different vendors will be compatible to each other. On the other hand, do not implement any fixed standard on look and feel as that would restrict the innovation and creativity of the vendors.

Possible solutions:

• The developer can provide multiple look and feel features in the graphical user interface with a selection option. The user can choose the option of their choice and get the desired look and feel. (Principle 15, Dynamize)
  
• Patent 6104391 discloses an appearance management layer. This provides the developers and end users with an ability to customize the appearance and behavior of the desktop.⁸ The appearance management layer is a level of abstraction with all the applications and the graphic subsystem. (Principle 24, Intermediary); Themes contain overall impressions of a graphical user interface. The user can switch to different themes to customize the visual appearance and behavior of an application even at runtime. (Principle 15, Dynamize)

The Problem of Increasing User Friendliness

User friendliness is a complex concept. It includes many features like easy to learn, easy to operate, easy to navigate. The current programs are advanced and complex. The developer tries to include various supportive features to counterbalance the complexities.

This situation creates a contradiction. If the graphical user interface provides supportive features for the beginners then it becomes boring for the advanced users. On the other hand, if it provides supportive features for the advanced users, it looks confusing to the beginners. If the graphical user interface provides supportive features for all levels of users then it may be boring and confusing to all levels of users. The goal is to provide supportive features for all levels of users but do not have the graphical user interface be boring or confusing to any level of users.

6: Contradiction of Providing Supportive Features

The goal is to provide supportive features for different levels of users because that would help for using the software more efficiently, but at the same time, do not provide supportive features for just any level of users as features for one level of users can be boring or confusing to other level of users.

Possible solutions:

• The graphical user interface may provide various assistances only on demand (when the user requests it) and avoid unsolicited pro-active help (solving the problem in the super system or the sub-system).
  
• The graphical user interface may allow the user to customize its features. The user will customize the features that will be suitable to their level and expertise. (Principle 15, Dynamize)
  
• Patent 5425140 suggests separating advanced functions from basic functions.¹ The graphical user interface would display only the basic functions at startup and not the advanced functions. (Principle 2, Taking Out); Advanced functions could be displayed on request by checking an advanced option checkbox. (Principle 15, Dynamize)
  
• The graphical user interfaces may be intelligent to determine the level of a user and configure its features intelligently to make them suitable to the specific user, for the specific machine, under the specific working environments. (Principle 25, Self Service)

The Problem of Graphical User Interface Customization

A graphical user interface is meant for the user. The graphical user interface should ideally contain all the features that a user requires and should not contain any of the features that the user does not require. This is a complex situation because the requirements are different for different users. An extremely well-designed user interface may fail to meet some expectations of a specific category of users. One of the obvious solutions to this problem is customization by the user. But customization might require complicated programming and demand a lot of valuable time and effort. This could divert a user from the core activity. Do not divert a user from their core activity and waste their time and effort on customization.

The situation can be stated in the following physical contradiction:

7: Contradiction of Graphical User Interface Customization

The goal is for the end users to customize the graphical user interface as they can best do it as per their changing requirements from time to time, but on the other hand, do not let the end users customize the graphical user interface as that will waste their time and effort.

Possible solutions:

• The developer should pre-build all possible functionalities at the time of software development. (Principle 10, Prior Action); The graphical user interface should include a customization interface (Principle 24, Intermediary) and allow the user to customize the graphical user interface by adding or removing the functionalities (such as menu items, buttons or other) without getting into the difficulties of learning complicated programming languages. (Principle 15, Dynamize)
  
• The graphical user interface may allow a user to create buttons (or menu items) by dragging and dropping controls onto the toolbar or similar designated area. (Principle 15, Dynamize)

Figure 4: Dynamization

• The graphical user interface may allow removing buttons (menu items or other graphical user interface elements) just by dragging them out of the graphical user interface. (Principle 34, Discard and Recover)
  
• Patent 6621532 discloses an easy method of dragging pull down menu items and dropping onto a toolbar.¹⁵ This method converts a menu item to a toolbar item and displays the item permanently like any other toolbar item.
  
• The advanced menus or advanced buttons should appear or disappear automatically according to the level of expertise and requirement of the user. (Principle 15, Dynamize; Principle 25, Self Service)
  
• The graphical user interface elements may be automatically added, deleted or altered according to the changing requirement of the user. (Principle 25, Self Service)
  
• Change the concept from user-customization to auto-customization. (Principle 25, Self Service)

The Problem of Operational Errors

If a graphical user interface is operated incorrectly it can lead to undesirable results. Although such errors are caused by human operations, the design of a graphical user interface also plays a significant role. A well-designed graphical user interface guides the user and restrains the user from making mistakes. Whereas a poorly built graphical user interface can confuse the user and thereby mislead the user to commit more mistakes. A graphical user interface that is less error-prone is more efficient and productive.

8: The Contradiction of User Freedom and Operational Errors

On one hand, the graphical user interface should provide operational freedom to the user to enter any valid data (or click on any screen region) to encourage user creativity. On the other hand, the graphical user interface should restrict the user from entering any kind of data (or click on any screen region) as that would result in operational errors.

Possible solutions:

• Reducing errors through input validation with data entry controls like check boxes, selection boxes, submit buttons. All can be improved to reduce errors in data feeding. (Principle 9, Prior Counteraction)
  
• Hiding irrelevant options. The graphical user interface should filter out all options that are not relevant to the current operational context of the user in order to reduce the chances of selecting incorrect options. (Principle 2,Taking Out)
  
• Displaying only the desirable functions. The graphical user interface should display only those functions or graphical user interface elements that are relevant to the skill, habit and mood of the user. (Principle 25,Self Service; Principle 15, Dynamize)
  
• Reconfirming uncommon operations. The graphical user interface may ask for a confirmation before executing any risky or uncommon operations. The graphical user interface may display alerts and warnings wherever appropriate. (Principle 8, Counterweight)
  
• Providing rescue and error corrections. The graphical user interface may automatically correct the errors made by a user. It may also provide some kind of rescue operations for recovering damages. (Principle 11, Cushioning)
  
• Isolating risky items from other items in the menu and displaying them separately to avoid the chances of finger slips during selection. (Principle 2, Taking Out)
  
• Patent 5956032 discloses a method of resizing windows that visually indicates to the user that the window cannot be further extended.⁵ When the user tries to extend the window beyond its limit it displays a graphical icon that provides an immediate and perceivable feedback about the forbidden attempt. The invention uses visual feedback to communicate to the user that the border is not further expandable. (Principle 23, Feedback)

Figure 5: Resizing Windows with Graphical Icon

• Patent 6061059 provides a preview capability that helps a user to see the results of their selection before finally closing a dialog.⁹ As the user can immediately see the consequences of their selection there is less chance of the user making a wrong selection.
  
• In order to do a non-default (or special purpose) drag and drop operation the user may have to press a special key on the keyboard during the drag and drop operation to ensure their intention (patent 6535230). (Principle 8, Counterweight; Principle 35, Parameter Change)¹⁴

Conclusion

The concept of contradictions is quite interesting in TRIZ solution processes. A contradiction is a situation where solving one problem leads to another problem. In a physical contradiction an individual wants to have something for specific reasons, but at the same time, the individual does not want to have the same for other reasons. A contradiction can be solved by applying inventive principles, moving to a sub-system or super system or by applying other methods.

This article demonstrates some important contradictions in a graphical user interface. The goal is to display more graphical user interface elements without sacrificing navigation comfort. The goal is to scroll using scrollbars without sacrificing space for the scrollbars. The goal is to scroll the screen for viewing large items without moving the pointer for scrolling. Overall the user wants all the good features without any drawbacks or limitations.

Each contradiction in this article is addressed with a number of solutions. All solutions are not ideal for all situations. Some solutions may be found extremely useful in certain situations while some solutions may lead to further contradictions (contradiction chains) creating space to be discussed further.

References

1. US Patent 5425140, “Method and Apparatus for Providing Conditional Cascading in a Computer System Graphical User Interface,” Invented by Bloomfield, assigned by the International Business Machines Corporation, issued June 1995.
   
2. US Patent 5611060, “Auto-scrolling During a Drag and Drop Operation,” Four Dimensional Graphical User Interface, Invented by Eng Lim Goh, assigned by Silicon Graphics Inc., Oct. 1997.
   
3. US Patent 5689669, “Graphical User Interface for Navigating Between Levels Displaying Hallway and Room Metaphors,” Invented by Lynch, assigned by General Magic, Issued Nov. 1997.
   
4. US Patent 5914716, “Sliding Out Interface,” Invented by Rubin, assigned by Microsoft Corporation, June 1999.
   
5. US Patent 5956032, “Signaling the User Attempting to Resize a Window Beyond the Limit,” Invented by Andrea Argiolas, assigned by IBM, Sep. 1999.
   
6. US Patent 5956035, “Menu Selection with Menu Stem and Sub-menu Size Enlargement,” Invented by Sciammarella, assigned by Sony Corporation, Sep. 1999.
   
7. US Patent 6005567, “Method and System for Efficient Organization of Selectable Elements on a Graphical User Interface,” Invented by Nielsen, assigned by Sun Microsystems, issued Dec. 1999 and May 2000.
   
8. US Patent 6104391, “System and Method for Customizing Appearance and Behavior of Graphical User Interfaces,” Invented by Jr. Johnston, assigned by Apple Computer Inc., issued Aug. 2000.
   
9. US Patent 6061059, “Method of Providing Preview Capability to a Dialog Box,” Invented by Taylor, assigned by Adobe Systems Incorporated, may 2000.
   
10. US Patent 6181316, “Graphical User Interface Inline Scroll Control,” Invented by Little, assigned by IBM, issued Jan. 2001.
    
11. US Patent 6445364, “Enlarged Virtual Display,” Invented by Arthur Zwern, assigned by Vega Vista Inc., Sep. 2002.
    
12. US Patent 6448986, “Method and System for Displaying Graphical Objects on a Display Screen,” Invented by Kim Smith, assigned by Spotware Technologies LLC, issued Sep. 2002.
    
13. US Patent 6493006, “Graphical User Interface Having Contextual Menus,” Invented by Gourdol, assigned by Apple computer, Dec. 2002.
    
14. US Patent 6535230, “Graphical User Interface Providing Consistent Behavior for the Dragging and Dropping of Content Objects,” Invented by Celik, assigned by Apple Computer Inc., issued Mar. 2003.
    
15. US Patent 6621532, Easy Method of Dragging Pull-down Menu Items onto a Toolbar, Invented by Mandt, assigned by IBM, Sep. 2003.
    
16. Umakant Mishra, “Improving Graphical User Interface,” First Edition, 2009.
    
17. Umakant Mishra, “TRIZ Principles for Information Technology,” Revised Edition, 2010, pp. 409.
    
18. Umakant Mishra, “The Revised 40 Principles for Software Inventions,” TRIZ Site, July 2006.
    
19. US Patent and Trademark Office (USPTO).