AUTO-COMPLETION FOR USER INTERFACE DESIGN

• US 20130275892A1
• Filed: 04/12/2013
• Published: 10/17/2013
• Est. Priority Date: 04/13/2012
• Status: Active Grant

• Current Assignee: Google LLC (Alphabet Inc.)
• Original Assignee: Google Inc. (Alphabet Inc.)
• Inventors: Li, Yang, Chang, Tsung-Hsiang
• Granted Patent: US 9,417,760 B2
• Time in Patent Office: Days
• US Class Current: 715/762
• CPC Class Codes: G06F 3/0481 based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
• CPC Class Codes: G06F 3/04817 using icons graphical or visual programming using iconic symbols G06F8/34
• CPC Class Codes: G06F 3/0482 Interaction with lists of selectable items, e.g. menus
• CPC Class Codes: G06F 3/0484 for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
• CPC Class Codes: G06F 7/08 Sorting, i.e. grouping record carriers in numerical or other ordered sequence according to the classification of at least some of the information they carry by merging two or more sets of carriers in ordered sequence G06F7/16
• CPC Class Codes: G06F 7/20 Comparing separate sets of record carriers arranged in the same sequence to determine whether at least some of the data in one set is identical with that in the other set or sets

Abstract

Techniques for automatically completing a partially completed UI design created by a user are described. A UI query including attributes of UI components in the partially completed UI design is created. Example designs with similar UI components are identified. UI components of one such design example are displayed to automatically complete the partially completed UI design (also called an “auto-complete suggestion”). The user can systematically navigate the design examples and accept auto-completed suggestions to include into the partially complete UI design.

Claims

1. A computer-implemented method of assisting a user to create a user interface (UI), comprising:

receiving an incomplete UI design, the incomplete UI design comprising a first set of one or more existing UI components;

identifying a plurality of example designs, each comprising a second set of one or more corresponding UI components, similar to the first set, and one or more additional UI components, wherein identifying comprises calculating a transformation cost associated with each of the plurality of example designs;

grouping the plurality of example designs into a plurality of groups based on similarities between the additional UI components thereof;

ranking the plurality of groups based on a number of example designs therein;

selecting, from each group, a representative example design; and

providing the representative example designs for presentation to the user in an order based on the ranking, wherein presenting includes providing user controls for the selection of a specific example design for incorporation with the incomplete UI design.

2. The computer-implemented method of claim 1, wherein the ranking for a group is further based on the corresponding transformation costs associated with the example designs therein.

3. The computer-implemented method of claim 1, wherein calculating the transformation cost associated with one of the plurality of example designs comprises:

calculating, for each existing UI component, a difference score indicating a degree of difference from a corresponding one of the corresponding UI components in the example design; and

calculating the transformation cost based on the difference scores.

4. The computer-implemented method of claim 3, wherein calculating the transformation cost associated with one of the plurality of example designs further comprises:

calculating an addition score associated with one of the existing UI components that is not found in the example design, wherein the transformation cost is further based on the addition score.

5. The computer-implemented method of claim 1, wherein grouping the plurality of example designs comprises:

calculating, for a first example design, a degree of difference between the additional UI components of the first example design and the additional UI components of a second example design; and

grouping the first and second example designs responsive to the degree of difference being less than a threshold.

6. The computer-implemented method of claim 1, wherein selecting a representative example design for a group comprises:

calculating, for each example design in the group, a degree of difference from other example designs in the group;

producing, for each example design, a total difference score based on the corresponding example design'"'"'s degrees of difference from other example designs in the group; and

selecting an example design with a lowest total difference score as the representative example design.

7. The computer-implemented method of claim 1, further comprising:

receiving an indication of an incomplete area within the incomplete UI design; and

identifying, for each example design, a corresponding area that corresponds to the incomplete area, wherein the additional UI components of each example design are contained within the respective corresponding area.

8. A non-transitory computer-readable medium storing executable computer program code for assisting a user to create a UI, the computer program code comprising instructions for:

receiving an incomplete UI design, the incomplete UI design comprising a first set of one or more existing UI components;

identifying a plurality of example designs, each comprising a second set of one or more corresponding UI components, similar to the first set, and one or more additional UI components, wherein identifying comprises calculating a transformation cost associated with each of the plurality of example designs;

grouping the plurality of example designs into a plurality of groups based on similarities between the additional UI components thereof;

ranking the plurality of groups based on a number of example designs therein;

selecting, from each group, a representative example design; and

providing the representative example designs for presentation to the user in an order based on the ranking, wherein presenting includes providing user controls for the selection of a specific example design for incorporation with the incomplete UI design.

9. The non-transitory computer-readable medium of claim 8, wherein the ranking for a group is further based on the corresponding transformation costs associated with the example designs therein.

10. The non-transitory computer-readable medium of claim 8, wherein calculating the transformation cost associated with one of the plurality of example designs comprises:

calculating, for each existing UI component, a difference score indicating a degree of difference from a corresponding one of the corresponding UI components in the example design; and

calculating the transformation cost based on the difference scores.

11. The non-transitory computer-readable medium of claim 10, wherein calculating the transformation cost associated with one of the plurality of example designs further comprises:

calculating an addition score associated with one of the existing UI components that is not found in the example design, wherein the transformation cost is further based on the addition score.

12. The non-transitory computer-readable medium of claim 8, wherein grouping the plurality of example designs comprises:

calculating, for a first example design, a degree of difference between the additional UI components of the first example design and the additional UI components of a second example design; and

grouping the first and second example designs responsive to the degree of difference being less than a threshold.

13. The non-transitory computer-readable medium of claim 8, wherein selecting a representative example design for a group comprises:

calculating, for each example design in the group, a degree of difference from other example designs in the group;

producing, for each example design, a total difference score based on the corresponding example design'"'"'s degrees of difference from other example designs in the group; and

selecting an example design with a lowest total difference score as the representative example design.

14. The non-transitory computer-readable medium of claim 8, further comprising:

receiving an indication of an incomplete area within the incomplete UI design; and

identifying, for each example design, a corresponding area that corresponds to the incomplete area, wherein the additional UI components of each example design are contained within the respective corresponding area.

15. A system for assisting a user to complete an incomplete UI, comprising:

a non-transitory computer-readable medium storing executable computer program code, the computer program code comprising instructions for;

sending, to a server, a query comprising a first set of one or more existing UI components;

receiving, from the server, a plurality of suggested designs based on example designs in a corpus, each suggested design including one or more corresponding UI components, similar to the existing UI components, and one or more additional UI components, the suggested designs ranked based on a frequency with which designs similar to the suggested designs appear in the corpus;

presenting a highest ranked suggested design to the user; and

incorporating the additional components of the highest ranked suggested design into the incomplete UI responsive to user input indicating approval of the highest ranked suggested design; and

a processor for executing the computer program code.

16. The system of claim 15, wherein the computer program code further comprises instructions for:

presenting a second highest ranked suggested design to the user responsive to user input indicating rejection of the highest ranked suggested design; and

incorporating the additional components of the second highest ranked suggested design into the incomplete UI responsive to user input indicating approval of the second highest ranked suggested design.

17. The system of claim 15, wherein the suggested designs are ranked further responsive to a measure of similarity between the existing UI components and the respective corresponding UI components.

18. The system of claim 15, wherein the corresponding UI components and additional UI components of each suggested design are taken from a corresponding one of the example designs in the corpus.

19. The system of claim 18, wherein the query further comprises an indication of an area of interest, the additional UI components of each suggested design being taken from a corresponding area of the respective corresponding example design in the corpus.

20. The system of claim 18, wherein the computer program code further comprises instructions for:

presenting the corresponding example design in the corpus for a currently displayed suggested design responsive to user input, the presenting comprising visually distinguishing components of the corresponding example design included in the suggested design as at least one of;

corresponding UI components and additional UI components.