COLOR LABELING IN A GRAPHICAL USER INTERFACE
A method for providing visual cues to a user of a graphical user interface (GUI) for a computer system is disclosed. The visual cues indicate a relationship with an icon having text and/or image elements. In some embodiments, the method receives a color for labeling an icon that has a text-element and an image-element. The method applies the color to a background-region of the text-element of the icon without applying the color to the image-element. In some embodiments, the method does not affect the font of the text. In some embodiments, the method receives a selection of an icon. The icon has a background-region that has a first color. The method changes the first color of the background-region to a second color but retains the first color in a section of the background-region. In some of these embodiments, the method outlines the section of the background-region with a third color.
The present invention concerns the field of graphical user interfaces for computer systems. Specifically, the invention is directed towards methods for providing visual cues and color labeling in a graphical user interface (GUI).
BACKGROUND OF THE INVENTIONA computer operating system or application program can provide different views of a computer system's contents to a user through a GUI. Three such views in a GUI are an icon view, a list view, and a column view. In each view, icons are typically used to represent the computer system's contents. A computer system's contents are typically organized in a hierarchical “file system” of nested folders (directories) and files. An icon in the GUI can have two components, an image component and a text component. The icons are presented to a user of the GUI in different visual formats in each view (icon, list, or column view). The different visual formats are designed to present information in ways that facilitate understanding and manipulation of their contents. However, manipulation of the icons and views can alter the icon's appearance and thus obscure the icon's visual information. Also, the volume of information presented in each view of a file system can be large such that a high demand is placed on the attention and concentration of the user of the GUI.
As such, there is a need for a method of providing visual cues for interacting with icons that, for example, represent folders and files presented in a GUI.
SUMMARY OF THE INVENTIONThe invention provides a method for providing visual cues to a user of a graphical user interface (GUI) for a computer system. In some embodiments, the method receives a color for labeling an icon that has a text-element and an image-element. The method applies the color to a background-region of the text-element of the icon without applying the color to the image-element. In some embodiments, the method does not affect the font of the text.
In some embodiments, the method receives a selection of an icon. The icon has a background-region that has a first color. The method changes the first color of the background-region to a second color but retains the first color in a section of the background-region. In some of these embodiments, the method outlines the section of the background-region with a third color.
The novel features of the invention are set forth in the appended claims. However, for purpose of explanation, several embodiments of the invention are set forth in the following figures.
In the following description, numerous details are set forth for purposes of explanation. However, one of ordinary skill in the art will realize that the invention may be practiced without the use of these specific details. In other instances, well-known structures and devices are shown in block diagram form in order not to obscure the description of the invention with unnecessary detail.
I. DEFINITIONSA graphical user interface (“GUI”) is an interface of a computer system that allows users to interact with the computer system through images and text. A GUI allows users of the computer system to interact with the computer system in an intuitive graphical manner. Instead of learning and writing complex command languages, users can perform many operations by simply interacting with the visual components of a GUI, which are often easy to understand. A GUI often includes a cursor pointer, icons, desktop, windows, etc. The cursor pointer (the “cursor”) is a pointer that a user can move across the GUI through the operation of a cursor controller, such as a mouse, a trackpad, trackball, etc. A user can use the cursor to select objects in the GUI. For instance, the user can select an object by directing the cursor to the object and performing a click operation (e.g., through a button of the cursor controller).
Icons are examples of selectable objects in a GUI. Icons are used to represent folders, files, commands, etc. in the GUI. An icon can be represented by a text element, an image element, or both text and image elements in the GUI. The desktop refers to the contents on a display screen below any windows. A window is an area on the display screen that displays its own file, message, application, etc. independently of other windows that are displayed on the display screen.
A color, as used herein, can be any color of the visible light spectrum. A Macintosh computer, for example, can output to a display, millions of colors and can output thousands of different shades of gray. As used in this application, two colors are different colors when they are two different colors in the spectrum of visible light, or are two different shades of the same color.
A file, as used herein, is an elemental data object within a file system. A file can contain various types of data. For example, a file can contain executable data as part of an application program or as part of the operating system. A file may also contain data that was created by an application. A file created by an application may also be referred to as a document. Thus, a user of a computer system GUI may open an application by selecting and opening an executable file that runs an application, such as a word-processor. Then the user may operate the word-processor to create a document file.
A folder, as used herein, is an icon that represents a directory in a hierarchical file system. A folder can contain other folders or files. The hierarchy of a file system is created when folders are nested inside other folders.
A volume, as used herein, is a logical partition on a single computer storage device or across several computer storage devices. For example, a volume can be comprised of a single hard disk. As another example, a volume can be comprised of a redundant array of independent disks (RAID). A volume is typically used to store the folders and files of a hierarchical file system.
II. OVERVIEWThe invention provides a method for providing visual cues related to the selection and color-labeling of icons in a GUI. In some embodiments, the method receives a color for labeling an icon that has a text-element and an image-element. The method applies the color to a background-region of the text-element of the icon without applying the color to the image-element. In some embodiments, the method does not affect the font of the text. In some embodiments, the background-region has a shape and the color is applied to the shape.
In some embodiments, the method receives a selection of an icon. The icon has a background-region that has a first color. The method changes the first color of the background-region to a second color but retains the first color in a section of the background-region. In some of these embodiments, the method outlines the section of the background-region with a third color.
Some embodiments of the invention may be implemented in a computer operating system that presents different views of a file system to aid in comprehension of the data presented. Three such views are an icon view, a list view, and a column view. In some embodiments, the icon-view presents the contents of a folder or volume in terms of a number of freestanding icons that can be moved around the window. In the icon-view, icons are presented with both their image and text elements. For icons with only one element, that element is presented in the GUI. Icon-view is useful for viewing the image element of the icon, as the image element is presented in its largest form in icon-view. Icon-view is also useful for file and folder manipulation such as a drag-and-drop operation, as the icon is large and easily selected using a cursor controller.
In some embodiments, the list-view presents the contents of a folder as a set of icons in a single-column format. List-view is useful for displaying the detailed information about objects in the file system. List-view is often used to view several icons representing objects in the file system in a sorted and ordered single-column list. Icons in list-view can be shown with their graphic elements reduced in size or without their graphic elements to enhance comprehension of the detailed information presented.
Column-view is similar to list view, except that column view can be used to show multiple nested objects at once in several columns side-by-side. For example, the contents of a folder in a first column can be shown in a second column to the right of the first column. The contents of a folder in the second column can be shown in a third column to the right of the second column, and so forth. By placing several columns containing nested objects from left to right in a single window of the GUI, column view can be used to show the nested structure of a hierarchical file system.
Some embodiments of the invention that apply color-labeling to icons presented inan icon-view, a list-view, and column-view illustrations are described below.
III. ICON-VIEWAs shown in
According to some embodiments of the invention, a section 895 along the background-region 890 retains its original color label to provide a visual clue to the user as to the color label of the selected icon 115. One of ordinary skill will realize that the section 895 can have other shapes in other embodiments. For instance, in some embodiments, this section might be a small geometrical shape on one of the sides of the text element 120 of the icon. Alternatively, when the icon has been selected, some embodiments might not display any portion of the color label of an icon that is displayed in the icon view. In other embodiments of the invention, the color label of an icon and its selection is indicated only using the text element of the icon. These embodiments are advantageous when an icon has no image element, or the icon is displayed without its image element.
In additional embodiments of the invention, as shown in
In the examples illustrated in
Specifically,
According to some embodiments of the invention, a section 895 along the background-region 890 retains its original color label to provide a visual clue to the user as to the color label of the selected icon 115. One of ordinary skill will realize that the section 895 can have other shapes in other embodiments. For instance, in some embodiments, this section might be a small geometrical shape on one of the sides of the text element 120 of the icon. Alternatively, when the icon has been selected, some embodiments might not display any portion of the color label of an icon that is displayed in the icon view. In other embodiments of the invention, the color label of an icon and icon selection are indicated using only the text element of the icon. These embodiments are advantageous when an icon has no image element, or the icon is displayed without its image element.
Also shown in
In additional embodiments of the invention, as shown in
When the pane of window 100 is not white, a white-outline 1065 can be applied to surround the selection-border 855, according to some embodiments of the present invention. White-outline 1065 draws the user's attention to the selected icon 115 and offsets the selection-border 855 from the window 100.
IV. LIST-VIEWAccording to some embodiments of the invention, a section 1350 of the background-region 1240 retains its original color label to provide a visual clue to the user as to the color label of the selected icon 1115. In the example illustration in
Alternatively, when the icon has been selected, some embodiments might not display any portion of the color label of an icon that is displayed in the list view.
Various permutations of the examples described above would be apparent to one of ordinary skill. For instance, the shape that retains the label-color can be of various sizes and shapes that appear at various locations relative to the corresponding icon. Moreover, the background-region of the text element can also have various sizes and geometric properties. For instance, the background-region can have rounded or squared ends. Further, the background-region can apply to either the text element or the image element of the icon, or both, depending on the current view settings.
V. COLUMN-VIEWA “column-view” illustration presents a nested file structure in terms of a set of nested columns. Each of these columns in some embodiments presents a list of the contents of a folder in the nested file system. When a folder is “opened,” some embodiments (1) show the contents of that folder in the next column to the right of the column containing the opened folder, and (2) color a background region that surrounds the opened folder to indicate that its contents are shown in the next column. In some embodiments, the color that is used to highlight the selection of a folder does not distort either the image element or the text element of this folder's icon.
In such a column-view illustration, some embodiments allow a user to specify different color labels to the folders and files (including documents) displayed in this illustration. Different embodiments of the invention apply the color label differently to a folder or a file. Some embodiments apply the color label to a region that encompasses just the text element of an icon of the folder or the file, other embodiments apply it to a region that encompasses just the image element of the icon, and yet other embodiments apply it to a region that encompasses both the text and image elements of the icon. In some embodiments, the color that is used to label a folder or file does not distort either the image element or the text element of the icon of the folder or file.
The column 1620 illustrates the contents of the folder 1672 in the column 1610. As shown in
According to some embodiments of the invention, a section 1950 of the background-region 1840 retains its original color label to provide a visual clue to the user as to the color label of the selected icon 1815. In the example illustration in
Alternatively, when the icon has been selected, some embodiments might not display any portion of the color label of an icon that is displayed in the list view.
Various permutations of the examples described above would be apparent to one of ordinary skill. For instance, the shape that retains the label-color can be of various sizes and shapes that appear at various locations relative to the corresponding icon. Moreover, the background-region of the text element can also have various sizes and geometric properties. For instance, the background-region can have rounded or squared ends. Further, the background-region can apply to either the text-element or the image-element of the icon, or both, depending on the current view settings.
Many of the embodiments described above in relation to color-labeling are also applicable to the present invention's methods for providing to a user visual cues during icon-selection. For example, none of the figures show either the image or text element of the icon being deprecated whether the icon is color-labeled, selected, or opened. Specifically,
Also in accordance with the present invention, the selection-color and label-color may simply not be applied to either the text or the image element of an icon to avoid any deprecation of that element. For instance,
The present invention's method for providing visual cues to a user during icon-selection is applicable to an icon regardless of whether the icon has been color-labeled.
During color-labeling of an icon, the text-element's font may or may not be altered to improve readability or enhance the visual cue stimulus. Likewise, during icon-selection, the text-element's font may be altered.
From these various memory units, the processor 2610 retrieves instructions to execute and data to process in order to execute the processes of the invention. The read-only-memory (ROM) 2620 stores static data and instructions that are needed by the processor 2610 and other modules of the computer system.
The permanent storage device 2625, on the other hand, is a read-and-write memory device. This device is a non-volatile memory unit that stores instruction and data even when the computer system 2600 is off. Some embodiments of the invention use a mass-storage device (such as a magnetic or optical disk and its corresponding disk drive) as the permanent storage device 2625.
Other embodiments use a removable storage device (such as a floppy disk or Zip® disk, and its corresponding disk drive) as the permanent storage device. Like the permanent storage device 2625, the system memory 2615 is a read-and-write memory device. However, unlike storage device 2625, the system memory is a volatile read-and-write memory, such as a random access memory. The system memory stores some of the instructions and data that the processor needs at runtime. In some embodiments, the invention's processes are stored in the system memory 2615, the permanent storage device 2625, and/or the read-only memory 2620.
The bus 2605 also connects to the input and output devices 2630 and 2635. The input devices enable the user to communicate information and select commands to the computer system. The input devices 2630 include alphanumeric keyboards and cursor-controllers. The output devices 2635 display images generated by the computer system. For instance, these devices display IC design layouts. The output devices include printers and display devices, such as cathode ray tubes (CRT) or liquid crystal displays (LCD).
Finally, as shown in
Any or all of the components of computer system 2600 may be used in conjunction with the invention. However, one of ordinary skill in the art would appreciate that any other system configuration may also be used in conjunction with the present invention.
VII. ADVANTAGESThe different visual formats of the icon, list, and column views are designed to present information in ways that facilitate understanding and manipulation of their contents. However, manipulation of the icons and views can alter the icon's appearance and thus obscure the icon's visual information. Also, the volume of information presented in each view of a file system can be large such that a high demand is placed on the attention and concentration of the user of the GUI. However, the present invention provides a method of providing visual cues that assist a user interacting with icons in a GUI. Some advantages of the present invention are described below.
To increase organization and reduce errors, a user can organize folders and documents using a color-coded labeling system. For example, a folder bearing a certain importance could be associated with the color red. Related documents with the same level of importance could also be associated with the color red. In this manner, a user could manually organize folders and documents. Also, an application or operating system service could automatically provide the organization by, for example, grouping any documents associated with the color red into the folder associated with the color red. Similarly, a variety of system processes could be automated to perform tasks on files and folders that have been labeled in this manner. For instance, a system backup could be performed on all of the folders and documents with a certain color label.
Another advantage of a color-coded labeling system is that it provides visual cues to the user similar to the manner in which an icon's image element provides additional information and cues to the user. Thus, iconographic and color-label information supplements or provides an alternative to the information available to a user from an icon's text element. The text element typically names a folder or document represented by the icon. Previously, however, use of a color-coded labeling system in conjunction with graphical icons could interfere with the icon's visual information by altering the appearance of the icon or deprecating the icon. The present invention, however, provides visual cues that enhance rather than deprecate or interfere with an icon's visual information presented in a GUI. The present invention preserves an icon's visual information by presenting the additional color-label information in a manner that does not distort either the text or the graphic elements of the icon. For example, some of the methods described herein apply color to shapes that surround the icon rather than coloring the icon directly. Another method of preserving the visual contents of an icon could be to layer the icon (text and graphic) opaquely over the label and selection colors. The label and selection colors can, in turn, be layered opaquely over the background color such as the color of the window pane. As would be apparent to one of ordinary skill, this layering may not require 100% opacity. The layering of different colors in a GUI may be performed at various opacities and blends to achieve a multitude of desired effects using the text and image elements of icons in conjunction with color combinations.
Additionally, there may be instances in a GUI where the only visual information available to a user is in the form of an icon's text element, and the icon has no image element. Similarly, an icon can have a text element but no image element. For example, in a column or list view of folders and documents, an icon may have a text element but may not have a corresponding image element, or the corresponding image element, if any, may be diminished in size such that its visual information is not conveyed to the user. However, the present invention can be applied to either the text or image element of an icon. Thus, the present invention conveys visual cues for icons without a corresponding text or image element, and for diminished or impaired icons such as folder and document icons in column or list view.
Cursor controllers, such as a computer mouse, are used to interact with icons of a GUI. For example, a user may activate a selection button of the cursor controller to select an icon in the GUI. Typically, when an icon is selected in the GUI, its appearance is altered to show that it is currently selected. This alteration of appearance can be, for example, a change in the color of the icon using the GUI's “highlight” color. However, a change in the color of an icon can obscure or interfere with the color label applied to the icon or with the visual integrity of the icon itself. The present invention provides a method of providing visual cues that retains and continues to convey an icon's color label and visual information when the icon is selected and thereby highlighted.
While the invention has been described with reference to numerous specific details, one of ordinary skill in the art will recognize that the invention can be embodied in other specific forms without departing from the spirit of the invention. For instance, some embodiments have been described with reference to an operating system but the graphical user interface teachings of the present invention may be used in any application. One of ordinary skill in the art would understand that the invention is not to be limited by the foregoing illustrative details, but rather is to be defined by the appended claims.
Claims
1-33. (canceled)
34. A method for providing a graphical user interface (GUI) for a computing device, the GUI comprising a folder, the method comprising:
- displaying a first view of the folder comprising at least one icon;
- in response to a selection of a color for labeling the icon, labeling the icon in the first view by applying the color to at least a first portion of the icon;
- receiving an input to display the folder in a second view that is different from the first view; and
- in response to receiving the input, changing the display of the folder to the second view and labeling the icon in the second view by applying the color to at least a second portion of the icon different than the first portion.
35. The method of claim 34, wherein the first view is a column view and the second view is a list view.
36. The method of claim 34, wherein the first view is a column view and the second view is an icon view.
37. The method of claim 34, wherein the first view is an icon view and the second view is a list view.
38. The method of claim 34, wherein the icon comprises a text element and an image element that is separate from the text element.
39. The method of claim 38, wherein the first portion of the icon is a background region of the text element and the second portion of the icon is a background region of the entire icon.
40. The method of claim 38, wherein the first portion of the icon is a background region of the text element and the second portion of the icon is a background region of the image element.
41. The method of claim 38, wherein the first portion of the icon is a background region of the image element and the second portion of the icon is a background region of the entire icon.
42. The method of claim 38, wherein the first and second portions of the icon are background regions of the icon.
43. The method of claim 42, wherein applying the color to the first and second portions of the icon does not affect the image element of the icon.
44. The method of claim 42, wherein applying the color to the first and second portions of the icon does not affect the text element of the icon.
45. A non-transitory computer readable medium storing a program that when executed by at least one processing unit provides a graphical user interface (GUI), the GUI comprising:
- a display area for displaying a set of icons in a first view or a second different view;
- a set of selectable items for switching between the first and second views;
- a color label tool for (i) receiving a selection of a color for labeling an icon, (ii) labeling the icon in the first view by applying the color to at least a first portion of the icon, and (iii) labeling the icon in the second view by applying the color to at least a second different portion of the icon.
46. The non-transitory computer readable medium of claim 45, wherein the icon comprises a text element and an image element that is separate from the text element.
47. The non-transitory computer readable medium of claim 46, wherein the color is applied to a background region of the text element in the first view and the color is applied to a background region of the entire icon in the second view.
48. The non-transitory computer readable medium of claim 46, wherein the color is applied to a background region of the text element in the first view and the color is applied to a background region of the image element in the second view.
49. The non-transitory computer readable medium of claim 46, wherein the color is applied to a background region of the image element in the first view and the color is applied to a background region of the entire icon in the second view.
50. The non-transitory computer readable medium of claim 46, wherein applying the color to the icon in the first and second views does not affect the image element of the icon.
51. The non-transitory computer readable medium of claim 46, wherein applying the color to the icon in the first and second views does not affect the text element of the icon.
52. A non-transitory computer readable medium storing a program that when executed by at least one processing unit provides a graphical user interface (GUI) comprising a folder, the program comprising sets of instructions for:
- displaying a first view of the folder comprising at least one icon;
- in response to a selection of a color for labeling the icon, labeling the icon in the first view by applying the color to at least a first portion of the icon;
- receiving an input to display the folder in a second view that is different from the first view; and
- in response to receiving the input, changing the display of the folder to the second view and labeling the icon in the second view by applying the color to at least a second portion of the icon different than the first portion.
53. The non-transitory computer readable medium of claim 52, wherein the first view is a column view and the second view is a list view.
Type: Application
Filed: May 4, 2012
Publication Date: Nov 8, 2012
Inventor: Imran Chaudhri (San Francisco, CA)
Application Number: 13/464,930
International Classification: G06F 3/048 (20060101);