US20130298056A1

US20130298056A1 - Painting user controls

Info

Publication number: US20130298056A1
Application number: US13/935,937
Authority: US
Inventors: Chaitanya Sareen; Stephan Hoefnagels; Rob Jarrett; Jared Simpson; Bret Anderson
Original assignee: Microsoft Corp
Current assignee: Microsoft Technology Licensing LLC
Priority date: 2008-10-27
Filing date: 2013-07-05
Publication date: 2013-11-07
Also published as: BRPI0919294A2; JP2012507103A; CN102197361B; EP2344944A4; BRPI0919294B1; AR073988A1; WO2010062619A2; RU2011116557A; KR101654388B1; EP2344944B1; WO2010062619A3; JP5705121B2; US8490026B2; CN102197361A; KR20110084193A; EP2344944A2; RU2524863C2; US20100107120A1

Abstract

The described implementations relate to dynamically painting user-controls. One method dynamically determines a highlight color of a user-control under a cursor on a graphical user-interface. The method also paints at least a portion of the user-control with the highlight color.

Description

BACKGROUND

Computers offer many functionalities to users. For instance, the user can surf the web, generate a document, and listen to music on a computer as he/she desires. Then the user may remember that he/she needs to send an email too. Often the user interacts with the computer via a graphical user-interface (GUI). A common way for the user to open an email application is to click on a control that launches the email application. Given the sheer number of applications that the user may have open on the GUI and the number of options available, the user may lose his/her train of thought during this task. The present implementations can allow the user to navigate a GUI with less effort and/or in a more natural manner which can lead to an enhanced overall user experience.

SUMMARY

The described implementations relate to dynamically painting user-controls. One method dynamically determines a highlight color of a user-control under a cursor on a graphical user-interface. The method also paints at least a portion of the user-control with the highlight color.
Another implementation is manifested as a method that identifies a group of related user-controls on a graphical user-interface. Individual user-controls can include an icon. The method also paints portions of the user-controls of the group with a color that is dynamically selected from information relating to the icon.
The above listed examples are intended to provide a quick reference to aid the reader and are not intended to define the scope of the concepts described herein.

BRIEF DESCRIPTION OF THE DRAWINGS

The accompanying drawings illustrate implementations of the concepts conveyed in the present application. Features of the illustrated implementations can be more readily understood by reference to the following description taken in conjunction with the accompanying drawings. Like reference numbers in the various drawings are used wherever feasible to indicate like elements. Further, the left-most numeral of each reference number conveys the Figure and associated discussion where the reference number is first introduced. This patent application contains at least one drawing executed in color. Copies of this patent or patent application publication with color drawing(s) will be provided by the Office upon request and payment of the necessary fee.

FIGS. 1-10 show hypothetical screenshots of exemplary dynamic user-control painting implementations in accordance with some of the present concepts.

FIG. 11 illustrates an exemplary dynamic user-control painting system in accordance with some implementations of the present concepts.

FIGS. 12-13 are flowcharts of exemplary dynamic user-control painting methods in accordance with some implementations of the present concepts.

DETAILED DESCRIPTION

Overview

This patent application pertains to painting user-controls on a graphical user-interface (GUI). Briefly, the present concepts can create a glow around the cursor on the GUI. The glow can be thought of as similar to directing a flashlight beam at the cursor. As the user moves the cursor over a user-control, such as a selectable button, the user-control is painted with a highlight color to create a colored glow. Continuing with the flashlight analogy, the colored glow could be created with a colored lens on the flashlight.
The highlight color can be dynamically selected based upon color information obtained from the user-control. For instance, an icon can occupy a portion of the user-control to quickly identify a function associated with the user-control. The present implementations can select the highlight color for painting based upon color information from the icon. The highlight color can be a dominant color determined from the color information, a complementary color, or any other color determined from the color information that can aid the user. So, for instance, if a dominant color of the icon is red and a remainder of the user-control is white, the present implementations can paint a red glow over some or all of the remainder of the user-control. Further, the painting can be done in a manner that helps to convey the location and direction of travel of the cursor over the user-control. Other implementations and/or inventive concepts are introduced below.

Exemplary Screenshots

FIGS. 1-9 show exemplary hypothetical screenshots of some implementations of the present user-control painting concepts.
FIGS. 1-3 collectively show dynamic color painting implementations on a display 100. FIG. 1 includes a first graphical user-interface (GUI) screenshot 102(1) on the display 100. FIG. 2 includes a second, subsequent screenshot 102(2). FIG. 3 shows another screenshot 102(3) that represents an alternative configuration to the implementation of FIG. 2.
In this example, FIGS. 1-3 include three user-controls 104(1), 104(2), 104(3) on the screenshots 102(1)-102(3). Further, each of the three user-controls contains an icon 106(1), 106(2), and 106(3), respectively. An icon can be thought of as a pictorial image used in a GUI to represent a program, a command, a link to a Web page, etc. When positioned in a user-control, the icon helps to convey the functionality of the user-control (i.e., the icon serves to quickly convey what the user is selecting).
In FIG. 1, a cursor 108 is shown in a first position that is not over any of the user-controls 104(1), 104(2), 104(3). In FIG. 2, the user has moved cursor 108 over user-control 104(3). Responsive to the cursor position, user-control 104(3) is painted at 202 with a highlight color in a manner that can aid the user to easily ascertain that the cursor is over the user-control. In this case, the painting 202 is generally circular around the cursor 108 to create a colored glow, such as a halo centered around the cursor. FIG. 3 illustrates an alternative implementation where the painting 202 is masked outside of user control 104(3). Stated another way, the painting only occurs within the user control portion of the GUI.
The highlight color of the painting 202 is dynamically determined from color information of the user-control's icon 106(3). Briefly, in this case the painting color is selected as the dominant color of the icon 106(3). Methods for selecting the painting color(s) are described below in more detail relative to FIG. 12.
In these implementations, cursor 108 remains visible as the cursor passes over user-control 104(3). Also, while the cursor is super-imposed over the user-control 104(3) and the icon 106(3), the painting 202 is layered behind icon 106(3). This configuration keeps the icon visible to the user during the painting.
FIGS. 4-6 collectively show another dynamic color painting implementation. In this case, FIGS. 4-6 show three consecutive screenshots 402(1), 402(2), and 402(3), respectively. In contrast to FIGS. 1-3, only a portion of the overall GUI is shown in FIGS. 4-6. Each screenshot shows three user-controls 404(1), 404(2), and 404(3) and three respective icons 406(1), 406(2), and 406(3).
In FIG. 4, the user has positioned the cursor over user-control 404(2) as indicated generally at 410(1). In this configuration, as the cursor travels over the user-control, the traditional arrow shape of the cursor is replaced by painting 412. In this case, the location of the cursor is painted with an inner colored glow 414. An outer larger colored glow 416 is concentrically painted around the inner glow 414 so that the cursor location is defined as the focus of the two glows 414, 416. Similar to the implementation of FIG. 3, the painting in FIGS. 4-6 only appears within the user-control over which the cursor is positioned. Stated another way, a portion of the inner and outer glows that would otherwise extend onto user-controls 404(1), 404(3) and/or onto a remainder of the GUI are not displayed. In this particular example, the inner glow 414 is painted with a white color and the outer glow 416 is painted with a dominant color of icon 406(2), which in this case is orange. Further, in this particular example inner glow 414 is relatively concentrated while outer glow 416 is relatively diffuse. In FIGS. 4-5, brackets are utilized to identify the extent of the inner and outer glows 414, 416. FIG. 6 offers another approach utilizing dotted lines to aid the reader in identifying the glows 414, 416.
FIGS. 5-6, when compared to FIG. 4, show how the painting of the present implementations can convey cursor location and direction relative to the user-control 404(2). For instance, in FIG. 4 cursor location as identified at 410(1) is at the bottom left portion of user-control 404(2). In FIG. 5, cursor location as identified at 410(2) is at the bottom center portion of user-control 404(2) and in FIG. 6, cursor location as identified at 410(3) is at the bottom right. Taken collectively, the dynamic painting of FIGS. 4-6 show the cursor moving from left to right parallel to the horizontal or x-axis.
FIGS. 4-6 serve to illustrate another exemplary painting feature that can be termed a “refractory affect”. The refractory affect can be created by painting one or more edges of a user-control proximate to the painting 412. Such an example is designated at 602 and 604 of FIG. 6.
FIGS. 7-8 collectively show another dynamic color painting implementation involving a user-control 702. In this case, the user control 702 does not contain an icon. However, the user-control does contain text 704 in the form of the word “email” to help convey to the user the purpose of the user-control 702. Color information can be obtained from text 704 to paint the user-control. For instance, FIG. 8 shows an instance where the user positions the cursor over the user-control at approximately point 802. Responsively, an elliptical shape 804 is painted over a portion of user-control 702 centered on point 802. In this case, elliptical shape 804 is masked around text 704 as indicated at 806 so that the text remains visible to the user.
FIG. 9 shows another dynamic color painting implementation involving a user-control 902 positioned on a GUI 904. In this case, the user-control includes an icon 906. A portion 908 of user-control 902 is dynamically painted responsive to the user positioning the cursor over the user-control 902. In this example, the portion is comet-shaped so that a tail portion 910 points in the direction from which the cursor came and a head portion 912 indicates the present location of the cursor.
In this case, the user-control's icon 906 has a “blue” color. A remainder 914 of the user-control is transparent. By chance, the user has selected a similar blue color as the background for the GUI 904. Since the remainder 914 of the user-control is transparent, it also appears blue. In this scenario, rather than selecting the icon's dominant blue color for painting, the selected highlight color for the painted portion 908 is a complementary color to the dominant color. In this example, the complementary color is yellow. In some cases, such as this one, painting with a complementary color can offer an enhanced user experience when compared to painting with the dominant color.
FIG. 10 shows another user-control painting implementation. In this case, four user-controls 1002(1), 1002(2), 1002(3), and 1002(4) are illustrated, each having a respective icon 1004(1), 1004(2), 1004(3), and 1004(4). The four user-controls can be thought of as a group that relates to the same application or functionality. In this case, the group relates to a PowerPoint brand application from Microsoft Corp. A dominant color of the icons is determined and painted over portions of the four user-controls 1002(1), 1002(2), 1002(3), and 1002(4) as indicated at 1006 to aid the user in recognizing the related nature of the four user-controls.

Exemplary Operating Environments

FIG. 11 shows an exemplary operating environment 1100 in which dynamically painting user-control concepts described above and below can be implemented on various computing devices. Briefly, the present implementations can be implemented with any computing device that displays a graphical user-interface and employs a cursor that is controllable by a user. Further, the present implementations can be employed in a stand-alone configuration and/or a server/client configuration.
In the illustrated case, the computing devices are manifested as a personal computer (PC) 1102, a smart phone 1104, and a server computer 1106. The computing devices 1102-1106 can be communicably coupled with one another via the Internet 1110 or via another communication means, such as cellular microwave means.
In the present discussion, PC 1102 can be representative of any type of computer, such as a Unix based computer, or an Apple brand computer, among others. Smart phone 1104 can be representative of any number of ever evolving classes of computing devices that can offer one or more of: cellular service, internet service, and/or some processing capabilities combined with a GUI. Other current examples of this class can include personal digital assistants and cell phones, among others.
The present concepts can be employed with computing devices having various capabilities. For instance, the present concepts can be employed on a freestanding computing device where applications are run locally on the computing device to perform an associated functionality. PC 1102 can offer such an example, where a tracking module 1112(1), a color module 1114(1), and a painting module 1116(1) can operate locally. One or more of these components can alternatively or additionally operate on the server computer 1106 as indicated at 1112(2), 1114(2), and 1116(2). For sake of brevity no components are specifically designated for smart phone 1104, but the same freestanding and/or server client configurations can be implemented on the smart phone as the PC.
Tracking module 1112 can track a location and direction of movement of a cursor over a graphical user-interface. This information can be supplied to the color module 1114. The color module can obtain color information relating to user-controls on the graphical user-interface. The color module can use the color information to dynamically determine a highlight color, such as a dominant color of individual user-controls from the color information. An example of an algorithm that can be performed by the color module is described below in relation to FIG. 12. Painting module 1116 can paint a portion of the individual user-control with the highlight color determined by the color module.

Exemplary Methods

FIG. 12 illustrates a flowchart of an algorithm or method 1200 that is consistent with at least some implementations of the present concepts. The order in which the method 1200 is described is not intended to be construed as a limitation, and any number of the described blocks can be combined in any order to implement the method, or an alternate method. Furthermore, the method can be implemented in any suitable hardware, software, firmware, or combination thereof such that a computing device, such as those described above in relation to FIG. 11 can implement the method. In one case, the technique is stored on a computer-readable storage media as a set of instructions such that execution by a computing device causes the computing device to perform the technique.
Blocks 1202 and 1204 introduce an exemplary method for dynamically painting user-controls. Blocks 1206-1212 offer one approach for accomplishing block 1202.
Block 1202 dynamically determines a highlight color of a user-control under a cursor on a graphical user-interface (GUI). For instance, a location and direction of cursor travel can be tracked. In some implementations, information about an individual user-control can be obtained as the cursor passes over the user-control. The process can be completed and the user-control painted in a few milliseconds so that from the user's perspective the cursor and the painting appear over the user-control at the same time. Other implementations can predict where the user will move the cursor based upon location and direction of movement and begin the method even before the cursor actually passes over an individual user-control. Still another implementation can obtain color data from all user-controls on a GUI and dynamically determine a highlighting color for each user-control. This highlighting color data can then be accessed as needed based upon cursor movement.
Block 1206 identifies an icon of the user control. This particular implementation further processes the icon as described below. However, a similar approach can be applied to user-controls that do not include icons. For instance, a user-control may contain text that can be processed in a similar manner.
Block 1208 obtains pixels of the icon. Block 1210 sorts the pixels by color. This process can be analogized to labeling a bucket for each color of the icon and placing the individual pixels in the corresponding buckets.
Block 1212 selects a color with the highest number of pixels as the highlight color which in this case is also the dominant color. In the bucket analogy, the bucket with the most pixels is selected as the dominant color. Some implementations do not consider some colors, such as black, white, and grey when selecting the dominant color. In some cases, a complementary color to the dominant color may also be identified to use in the painting.
After block 1212, the method returns to block 1204 which paints at least a portion of the user-control with the highlight color. In the method of blocks 1206-1212 the highlight color is the dominant color. Various examples of this painting are illustrated in FIGS. 1-10 above.
FIG. 13 illustrates another flowchart of an algorithm or method 1300 that is consistent with at least some implementations of the present concepts. The order in which the method 1300 is described is not intended to be construed as a limitation, and any number of the described blocks can be combined in any order to implement the method, or an alternate method. Furthermore, the method can be implemented in any suitable hardware, software, firmware, or combination thereof such that a computing device can implement the method. In one case, the method is stored on a computer-readable storage media as a set of instructions such that execution by a computing device causes the computing device to perform the method.
Block 1302 identifies a group of related user-controls on a GUI. Individual user-controls can include an icon. For instance, the group of user-controls may relate to an email application. In this example, the GUI may include a first user-control for the email application, a second user-control relating to an open received email and a third user-control may relate to an email that the user is drafting. Assume for discussion purposes, that each of the three above described user-controls contains an icon. In this example, the method can analyze color information from one or more of the icons. An example of such analysis is described above in relation to blocks 1206-1212 of FIG. 12.
Block 1304 paints at least portions of the user-controls of the group with a color (i.e., highlight color) that is dynamically selected from information relating to the icon(s). Continuing with the above described email example, the method can paint each of the three user-controls with the dynamically selected color from the icons so that the highlight color serves to group the user-controls for the user. This painting can aid the user to recognize that each of the grouped user-controls relates to a function associated with the functionality (i.e., an email functionality).
In summary, the above techniques can dynamically generate visual clues about the user-controls to enhance the user experience.

CONCLUSION

Although techniques, methods, devices, systems, etc., pertaining to dynamically painting user-controls are described in language specific to structural features and/or methodological acts, it is to be understood that the subject matter defined in the appended claims is not necessarily limited to the specific features or acts described. Rather, the specific features and acts are disclosed as exemplary forms of implementing the claimed methods, devices, systems, etc.

Claims

1-17. (canceled)

18. A computer-readable storage media having instructions stored thereon that when executed by a computing device cause the computing device to perform acts, comprising:

identifying a group of related user-controls on a graphical user-interface, wherein an individual user-control includes an icon; and,

painting at least portions of the user-controls of the group with a color that is dynamically selected from information relating to the icon.

19. The computer-readable storage media of claim 18, wherein the identifying comprises identifying the group that relates to a specific application.

20. The computer-readable storage media of claim 18, wherein the identifying comprises identifying the group that relates to a web-site.

21. The computer-readable storage media of claim 18, wherein at least a second individual user-control includes a second icon.

22. The computer-readable storage media of claim 21, wherein the color is a dominant color of the icon and the second icon.

23. The computer-readable storage media of claim 21, wherein the group of related user-controls are arranged horizontally on a user interface.

24. A method performed by a computing device, the method comprising:

identifying a group of related user-controls having corresponding icons included therein;

displaying the group of related user-controls on a graphical interface with the corresponding icons included therein; and

painting the related user-controls of the group with a highlight color that is selected based on a first color of a first one of the corresponding icons.

25. The method of claim 24, wherein the highlight color is selected dynamically.

26. The method of claim 24, wherein the painting comprises painting portions of the related user-controls with the highlight color.

27. The method of claim 24, wherein each of the related user-controls is associated with a particular functionality.

28. The method of claim 27, wherein the functionality is email functionality.

29. A computing device having stored computer-executable instructions that when executed by the computing device perform operations comprising:

displaying multiple user controls on a graphical user interface; and

painting the multiple user controls with a highlight color to indicate that the multiple user controls relate to a common application or a common functionality.

30. The computing device of claim 29, wherein the multiple user controls comprise corresponding icons that each share a dominant color.

31. The computing device of claim 30, wherein the highlight color is the dominant color.

32. The computing device of claim 30, wherein the highlight color is complementary to the dominant color.

33. The computing device of claim 30, the operations further comprising:

sorting pixels of at least one of the corresponding icons; and

determining the dominant color using the sorted pixels.

34. The computing device of claim 33, the operations further comprising:

excluding at least one of white, black, or grey pixels of the sorted pixels when determining the dominant color.

35. The computing device of claim 29, wherein the painting occupies only part of the multiple user controls and other parts of the multiple user controls remain unpainted.

36. The computing device of claim 29, embodied as a smartphone.

37. The computing device of claim 29, embodied as a server computer or a personal computer.