Systems and methods for configuring tiles in a user interface

Abstract

 Methods and systems are disclosed for configuring a plurality of tiles displayed in a graphical user interface. The method comprises receiving an initial state of the tiles, wherein the initial state includes two overlapping tiles; deriving, via the one or more computer processors, one or more secondary states from the initial state by rearranging the tiles in the initial state; calculating one or more scores for the initial state and the secondary states; and determining, based on the scores, a selected state from among the initial state and the one or more secondary states as a display state to be displayed on the user interface.

Description

Technical Field

[0001] The present disclosure relates in general to methods and systems for reconfiguring objects in user interfaces and in particular for reorganizing tiles in a user-created configuration to enhance utility of the configuration.

Background

[0002] User interfaces are one of the most common ways in which a user interacts with a device. A user interface may be, for example, the main display of a mobile device or the desktop display of computer, the dashboard of an information sharing or monitoring application, or the display of an interactive game.

[0003] In many cases a user interface includes many display objects, and the interface enables the user to rearrange those objects by moving them around. The objects, however, may be tightly packed. Thus, when a user moves a first object next to a second object, the user also needs to rearrange other objects to make room for the moved object. When there are many objects, such rearrangement may be cumbersome, time consuming, or even very complex. Moreover, even after the rearrangement, some objects may still overlap each other, thus causing difficulty for the user to fully utilize all the objects. Thus, a user may decide not to reorganize the objects or may have to work with an interface in which some of the objects are not fully visible. Such problems make a user interface less user-friendly.

Summary

[0004] In some embodiments, a method for configuring a plurality of tiles displayed in a graphical user interface comprises receiving an initial state of the tiles, wherein the initial state includes two overlapping tiles; deriving, via the one or more computer processors, one or more secondary states from the initial state by rearranging the tiles in the initial state; calculating one or more scores for the initial state and the secondary states; and determining, based on the scores, a selected state from among the initial state and the one or more secondary states as a display state to be displayed on the user interface.

[0005] In some embodiments, the method further comprises defining one or more heuristics used for calculating the score for the initial state or the one or more scores for the secondary states. In some embodiments, the heuristics is based on at least one of area of overlap, tile displacement, boundary stretch, compression, and embedding. In some embodiments, deriving the one or more secondary states includes a hierarchical sequence of generating a child state from a parent state by shifting one or more tiles in the parent state.

[0006] In some embodiments, the one or more tiles of the parent state are shifted in one or more of four directions of up, down, left, and right to generate the child state. In some embodiments, the method further comprises generating a state list that includes the initial state and the secondary states sorted in increasing order of their scores.

[0007] In some embodiments, generating the secondary states includes generating one or more child states from a parent state that is closest to a head of the state list and that has not been previously used for generating child states. In some embodiments, the method further comprises adding the generated child states to the state list based on their scores.

[0008] In some embodiments, the one or more secondary states include a secondary state that is generated from a parent state by shifting a plurality of tiles together. In some embodiments, the plurality of tiles includes a group of two or more tiles that have overlapping boundaries. In some embodiments, generating a child state from a parent state includes shifting a first tile in the parent state that overlaps with a second tile in the parent state. In some embodiments, generating a child state from a parent state includes shifting a first tile in the parent state that is within a radius of a second tile in the parent state. In some embodiments, the selected state is selected from among the initial state and the one or more secondary states as a state for which the score is the lowest.

[0009] In some embodiments, a tile configuration system for configuring a plurality of tiles displayed in a graphical user interface comprises a state generator module implemented by one or more computer processors and configured to: receive an initial state of the tiles, wherein the initial state includes two overlapping tiles, and derive one or more secondary states from the initial state by rearranging the tiles in the initial state; a score calculator module configured to calculate one or more scores for the initial state and the secondary states; and a database configured to store the scores, wherein the state generator module is further configured to determine, based on the scores, a selected state from among the initial state and the one or more secondary states as a display state to be displayed on the user interface.

[0010] In some embodiments, the state generator module is further configured to generate a state list that includes the initial state and the secondary states sorted in increasing order of their scores. In some embodiments, the state generator module is further configured to add the generated child states to the state list based on their scores.

[0011] In some embodiments, a non-transitory computer readable medium stores a computer program, wherein the computer program, when executed by one or more computers, causes the one or more computers to execute a method for configuring a plurality of tiles displayed in a user interface, wherein the method comprises receiving an initial state of the tiles, wherein the initial state includes two overlapping tiles; deriving, via the one or more computer processors, one or more secondary states from the initial state by rearranging the tiles in the initial state; calculating one or more scores for the initial state and the secondary states; and determining, based on the scores, a selected state from among the initial state and the one or more secondary states as a display state to be displayed on the user interface.

Brief Description of the Drawings

[0012] The drawings are not necessarily to scale or exhaustive. Instead, emphasis is generally placed upon illustrating the principles of the inventions described herein. The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate several embodiments consistent with the disclosure and together with the description, serve to explain the principles of the disclosure. In the drawings:

Figs. 1A-1F demonstrate an application of the disclosed systems and methods in a display interface, according to one such embodiment.

Figs. 2A-2C demonstrate an application of the disclosed systems and methods in a browser interface according to some embodiments.

Figs. 3A-3E demonstrate an application of the disclosed systems and methods in a dashboard according to some embodiments.

Figs. 4A and 4B demonstrate an application of the disclosed systems and methods in a jigsaw puzzle according to some embodiments.

Fig. 5 shows a tile configuration system according to some embodiments.

Fig. 6 shows a tile configuring method according to some embodiments.

Fig. 7 illustrates a sequence of stages for updating a state list for a two tile configuration according to an embodiment.

Fig. 8 illustrates examples for calculating an intersection heuristic according to an embodiment.

Fig. 9 illustrates an example for calculating a tile move heuristic according to an embodiment.

Fig. 10 illustrates an example for calculating a boundary move heuristic according to an embodiment.

Fig. 11 illustrates an example for calculating a maximize-compression heuristic according to an embodiment.

Fig. 12 illustrates an example for calculating an embedded heuristic according to an embodiment.

Fig. 13 illustrates an example for determining moveable tiles according to some embodiments.

Fig. 14 illustrates a mechanism for determining two classes of moveable tiles according to some embodiments.

Fig. 15 illustrates examples of grouped tiles according to an embodiment.

Fig. 16 illustrates examples of group shifts according to an embodiment.

Fig. 17 illustrates examples n-tuple shifts according to an embodiment.

Fig. 18 illustrates an example of deriving a composite state according to an embodiment.

Fig. 19 illustrates an example of generating an evolutionary state according to an embodiment.

Figs. 20-23 illustrate snapshots for a reshuffle application according to various embodiments.

Detailed Description

[0013] The following detailed description refers to the accompanying drawings. Wherever possible, the same reference numbers are used in the drawings and the description to refer to the same or similar parts. Also, similarly named elements may perform similar functions and may be similarly designed, unless specified otherwise. While several exemplary embodiments and features are described here, modifications, adaptations, and other implementations may be possible, without departing from the spirit and scope of the invention. Accordingly, unless stated otherwise, the descriptions relate to one or more embodiments and should not be construed to limit the invention as a whole. Instead, the proper scope of the invention is defined by the appended claims.

[0014] In various embodiments, the disclosed system and methods rearrange tiles in a user interface to improve the utility of a configuration for being displayed. In some embodiments, the utility of a configuration of tiles is improved if the overlap among the tiles is reduced, if the tiles fit a smaller total area, or if the tiles are grouped according to some criteria determined by the user or by a system. Also, in some embodiments, of two different configurations that are derived from a user-generated configuration of tiles, the more useful configuration is the one that presents the least amount of change compared to the original configuration.

[0015] The disclosed systems and methods can be used in a variety of display-related applications. In various embodiments, the user interface may be a display of a computer or a mobile device, an interface of a game or browser, or a dashboard of a monitoring application. Further, in various embodiments such as those described below, the tiles may represent graphical user interface objects such as installed applications, websites, status data summaries, game pieces, or other items.

[0016] In some embodiments, the tiles correspond to representations of applications shown on a user display. Figs. 1A-1F demonstrate an application of the disclosed systems and methods according to one such embodiment. Figs. 1A-1F each include 24 tiles displayed on a user interface. In some embodiments, the user interface is a display of a user's mobile device and the tiles represent different application (app) installed on the user's mobile device. In this example, the tiles are equal-sized squares, each showing an icon representing the corresponding app. In various embodiments, the tiles may have other shapes such as rectangles, diamonds, circles, or other two or three dimensional shapes. Moreover, the tiles in the same interface may differ in shape or in size.

[0017] Returning to Figs. 1A-1F, in various embodiments, one or more tiles may be moved by a user or by other means, such as, by the display system. For example, a user may use a touch screen or a mouse to move one or more tiles to rearrange the order and design in which the tiles appear on the display of a computer or a mobile device. Such rearrangement may be based on the user's aesthetic preferences or on ease of use. For example, a user may wish to bring tiles for related apps next to each other, or may wish to move tiles that are more frequently used to specific positions that are more visible. In doing the rearrangement, the user may move the tiles to new positions. In some embodiments, a user moves a tile by a drag-and-drop method such as by positioning the pointer over the tile, pressing and holding a mouse button, moving the pointer to a new location, and releasing the mouse button. Alternatively, the display system may rearrange the tiles based on one or more criteria, such as sorting named tiles alphabetically, by installation dates, or by other criteria.

[0018] Fig. 1A shows the result of one such rearrangement in which the user has started from an initial arrangement of the twenty-four tiles, tightly packed in four rows of six tiles (not shown), to a new arrangement in which tile 102 has been moved from its initial position 102i to the new position of tile 102 shown in Fig. 1A. In Fig. 1A location 102i thus does not include any tiles. Instead, tile 102 is located in its new position in which tile 102 overlaps (or intersects) two other tiles 103 and 104.

[0019] In the embodiment shown in Fig. 1B, the disclosed systems and methods have rearranged the tiles to make room for tile 102. In particular, tiles 103 and 105 have shifted up and tiles 104 and 106 have shifted down to create space for the present location of tile 102. As a result, in Fig. 1B, the twenty-four tiles have been rearranged such that tile 102 is located in its new position and no two tiles overlap, such that all tiles are fully visible.

[0020] Figs. 1C-1F demonstrate consecutive other arrangements in which a tile is first moved to a new location and then other tiles are shifted to make room for the moved tile. In Fig. 1C, for example, tile 112 of Fig. 1B has moved from its original location 112i in Fig. 1B into its new position shown in Fig. 1C. In this new position, tile 112 overlaps four other tiles 113-116. Fig. 1D shows a new arrangement of the tiles in which the tiles have shifted to make room for tile 112 in its new positions. In particular, in Fig. 1D, tiles 113 and 114 have shifted up and tiles 115-118 have shifted down to make room for tile 112. As a result of these shifts, in Fig. 1D no two tiles overlap.

[0021] Another situation is demonstrated in Figs. 1E and 1F. In Fig. 1E, tile 122 of Fig. 1D has moved from its initial position 122i to its new position shown in Fig. 1E in which it overlaps four other tiles. In Fig. 1F, on the other hand, to make room for tile 122, tiles 103, 105, and 123 have shifted up, and tiles 102, 104, 106, 126, and 128 have shifted down. As a result of these shifts, in Fig. 1F no two tiles overlap.

[0022] In some embodiments the tiles may correspond to representations of different websites browsed by a user. Figs. 2A-2C demonstrate such an application of the disclosed systems and methods according to some embodiments. Figs. 2A-2C each include eight tiles displayed on a user interface. In some embodiments, the user interface in these figures is an initial display of a web browser and the tiles represent different suggested websites to browse. In some embodiments, the suggested websites represent websites recently visited by the user and are sorted based on the time they were visited. In Figs. 2A-2C, the eight tiles are equal-sized rectangles, each showing an icon representing the corresponding website.

[0023] Fig. 2A shows an initial arrangement of the eight tiles tightly packed in two rows of four tiles. Figs. 2B and 2C demonstrate consecutive rearrangements in which a tile is first moved from its initial location in Fig. 2A to a new location and then other tiles have shifted to make room for the moved tile. In particular, in Fig. 2B, tile 202 has moved from its initial location 202i in Fig. 2A to the new location in Fig. 2B, in which it overlaps four other tiles. In Fig. 2C, tiles 203 and 204 have shifted up and tiles 205 and 206 have shifted down to make room for tile 202. Thus, in Fig. 2C, no two tiles overlap.

[0024] In some embodiments the tiles may correspond to representations of different types of data shown on a status dashboard. Figs. 3A-3E demonstrate one such application of the disclosed systems and methods according to some embodiments. Figs. 3A-3E each show eight tiles displayed on a user interface. In some embodiments, the user interface of these figures may be a status dashboard displayed on a computer screen. The status dashboard may show a summary of the status of various data that are of interest to the user. Each of the tiles may show a detailed or a summary update related to various types of data, applications, or activities; these may include updates of, for example, an email account, a twitter account, a weblog, news headlines, stock prices, weather broadcasts, business activities, or alike. In the example of Figs. 3A-3E, the eight tiles are variously sized rectangles and squares, each showing an icon including the corresponding data. In some embodiments, a user can expand each tile by, for example, a double click, to show the corresponding data in more details. Moreover, in some embodiments, the user can move the tiles to rearrange them. In some embodiments, after the user moves one or more tiles, the disclosed systems and methods may further shift the tiles to reduce overlap among the tiles and thus maximize the amount of data that the user can see on the dashboard.

[0025] Fig. 3A shows an initial arrangement of the eight tiles tightly packed in three rows that respectively consist of, from top to bottom, three, three, and two tiles. Figs. 3B-3E demonstrate consecutive rearrangements in which a tile is first moved from one location to another in which it overlaps some other tiles; and then other tiles have shifted to make room for the moved tile and reduce or remove the overlap.

[0026] In particular, in Fig. 3B, tile 302 has moved from its initial location 302i in Fig. 3A to the new location in Fig. 3B, in which it overlaps four other tiles 304-307. In Fig. 3C, tiles 303 and 304 have shifted left, tile 305 has shifted right, and tiles 306 and 307 have shifted down to make room for tile 302. Thus, in Fig. 3C, no two tiles overlap.

[0027] Similarly, in Fig. 3D, tile 303 has moved from its initial location 303i in Fig. 3C to the location shown in Fig. 3D, in which it overlaps three other tiles. In Fig. 3E, to make room for tile 303 and reduce the overlap, tile 304 has shifted left, tiles 302 and 305 have shifted right, and tile 308 has shifted up. These shifts are such that in Fig. 3E no two tiles overlap.

[0028] In some embodiments the tiles may correspond to pieces of a picture or a puzzle, or a game that the user is assembling. Figs. 4A and 4B demonstrate such an application of the disclosed systems and methods according to some embodiments. In particular, these figures show two displays of an on-screen jigsaw puzzle. In these figures, a user is presented with sixteen tiles, each being a piece of the puzzle. During the process, the user rearranges the pieces by moving them around and changing their location on the display. In this example, the tiles are sixteen variously shaped and sized pieces, each of which includes some tabs or blanks that are configured to interlock with blanks or tabs of neighboring pieces.

[0029] Fig. 4A shows an initial arrangement of the sixteen pieces in which the user has picked piece 402 and intends to place it at location 402f. In this location, piece 402 will overlap with four other tiles around it. Fig. 4B shows that, after the user has moved tile 402 to its new location, the system has shifted twelve other tiles to make room for tile 402 and reduce the overlap. In particular, in Fig. 4B, tiles 403 and 404 have been shifted up, tiles 405-407 have shifted right, tiles 408-410 have shifted left, tiles 411 and 412 have shifted down and left, and tiles 413-415 have shifted down and right. As a result of the shifts, in Fig. 4B no two pieces overlap.

[0030] In various embodiments, a tile configuration system generates and displays states corresponding to different arrangement of the tiles. Fig. 5 shows a tile configuration system 500 according to some embodiments. System 500 includes a display module 510, a state generator module 520, a score calculator module 530, and a database 540.

[0031] Display module 510 is configured to display one or more configurations of the tiles to the user. In various embodiments, display module 510 includes a display of a computer system or a mobile device. In some embodiments, display module 510 also represents one or more processors and memories that are connected to the display and are utilized for generating signals to display various objects.

[0032] State generator module 520 is configured to receive one or more initial states from display module 510. In some embodiments, an initial state represents an initial configuration of the tiles. In some embodiments, in the initial configuration two or more tiles overlap. Moreover, state generator module 520 is configured to start from a first state and generate one or more other states by shifting one or more tiles from their positions in the starting state. In this process, the starting state is called a "parent" state, and the generated state is called a "child" state or a secondary state. The parent state can be an initial state or a secondary state previously generated. In some embodiments, state generator 520 also places the initial state and the secondary states in the form of a sorted list, a tree, a vector, or other arrangements. State generator 520 may select and transmit to display module 510 one or more of those secondary states to be displayed.

[0033] Score calculator module 530 is configured to calculate one or more scores for one or more of the initial state or secondary states. In some embodiments, score calculator 530 uses various characteristics of a state to calculate its score. In some embodiments, the characteristics include the location and the size of the tiles. Moreover, in some embodiments, score calculator 520 uses one or more heuristics to calculate a score. The heuristics may depend on amounts of overlaps among tiles, movement of tiles compared to another state, overall packing or spread of tiles, or other parameters.

[0034] Database 540 stores different types of data utilized by various sections in system 500. These data include state arrangement data, scores of states, heuristics, and rules for calculating scores. In various embodiments, a state may be represented and stored in different ways such as a list recording the location and the orientation of the tiles; or a list recording the differences between the configuration and a reference configuration.

[0035] In some embodiments, a disclosed module is implemented via one or more computer processors executing one or more software programs for performing the functionality of the corresponding module. In some embodiments, the disclosed module may be implemented via one or more hardware modules executing firmware for performing the functionality of the module. In some embodiments, the disclosed module includes storage media for storing data or databases used by the module, or software or firmware programs executed by the module. In some embodiments, one or more of the disclosed module or disclosed storage media are internal or external to the disclosed systems. In some embodiments, one or more of the disclosed modules or storage media are implemented via a computing "cloud", to which the disclosed system connects via a communication system and accordingly uses the external module or storage medium. In some embodiments, the disclosed storage media for storing information include non-transitory computer-readable media, such as a CD-ROM, a computer storage, e.g., a hard disk, or a flash memory. Further, in some embodiments, one or more of the storage media are non-transitory computer-readable media that store information or software programs executed by various modules or implementing various methods or flowcharts disclosed herein.

[0036] In some embodiments, the tile configuration system performs a tile configuring method for selecting a configuration to be displayed. Fig. 6 shows a tile configuring method 600 according to some embodiments. Method 600 may be performed by a tile configuration system. Moreover, various steps of method 600 may be performed by one or more of the modules in a tile configuration system.

[0037] In block 602, the system receives an initial state. In various embodiments, the initial state corresponds to an initial configuration of the tiles. In this initial state, one or more tiles may overlap. In the embodiments shown in Figs. 1A-1E, for example, the initial state may correspond to the configuration of tiles shown in Figs. 1A, 1C, or 1E. Similarly, in the embodiments shown in Figs. 2A-2C, the initial state may correspond to the configuration of tiles in Fig. 2B; in Fig. 3A-3E the initial state may correspond to the configuration of tiles in Figs. 3B or 3D; and in Figs. 4A and 4B, the initial state may correspond to the configuration of tiles in Fig. 4A, when tile 402 is placed at location 402f. An initial state may correspond to a configuration of tiles after a user moves one or more tiles to a new location, as described before in relation to the above-mentioned initial states.

[0038] Returning to Fig. 6, in block 604, the system derives one or more secondary states. In some embodiments, the system derives a secondary state by shifting one or more tiles in a parent state that may be an initial state or another secondary state. For example, in the embodiments shown Figs 1A-1F, Fig. 1B can correspond to a secondary state derived from the initial state shown Fig. 1A; Fig. 1D can correspond to another secondary state derived from the state shown in Fig. 1C; and Fig. 1F can correspond to a third secondary state derived from the state shown in Fig. 1E. Similarly, in the embodiments shown in Figs. 2A-2C, the state shown in Fig. 2C can correspond to a secondary state derived from the state in Fig. 2B; in the embodiments shown in Figs. 3A-3E, Figs. 3C and 3E each can correspond to a secondary state derived from the states shown in Figs. 3B and 3D, respectively; and in Figs. 4A and 4B the state shown in Fig. 4B can correspond to a secondary state derived from the state shown in Fig. 4A. In various embodiments, one or more than one secondary states may be derived from an initial state or another secondary state. In some embodiments, the system stores initial states or secondary states in a state list and uses members of the state list for deriving additional secondary states. A secondary state may include two or more overlapping tiles or may not include any overlapping tiles.

[0039] Returning to Fig. 6, in block 606, the system calculates configuration scores for the initial or secondary states. In some embodiments the system stores in the state list the score for each state along with the state. In some embodiments, the system searches for states with lower configuration scores. In some embodiments, a lower configuration score represents a state that is more useful to the user. A lower configuration score may, for example, indicate that the state is more usable to the user in one or more ways, such as, having less overlap, having less spread of the tiles, or being reached from an initial state via the least amount of tile shifts.

[0040] In some embodiments, the system populates the state list in a recursive manner and in multiple stages. In each stage, the system may generate some new secondary states, calculate their scores, and update the state list. The system may then use the updated state list for generating new secondary states in the next stage.

[0041] Fig. 7 illustrates a sequence of stages for updating a state list for a two-tile configuration according to an embodiment. Fig. 7 relates to generating various states and their corresponding state lists for different configurations of two square tiles, one gray and one black. In particular, Fig. 7 shows five consecutive stages (labeled (1) to (5)) for generation of secondary states and the corresponding state list for each stage. The state list corresponding to each stage includes one or more states that can be used in the future stages for generation of secondary states. In each stage, the system generates one or more secondary states from one or more states in the previously generated state list. Moreover, the system calculates the configuration scores for the generated states and stores all or a subset of the states in a new state list and in an increasing order of their scores. Also, the system keeps track of the best state among all previously considered or generated states.

[0042] In stage (1), Fig. 7 includes two consecutive states (AA) and (A). In state (AA), the two tiles are located next to each other. In state (A), a user has moved the gray tile to the right, such that it covers almost half of the black tile. Thus, in state (A), the two tiles are overlapping. The system may store state (A) as an initial state in a state list. Moreover, in Fig. 7, the system calculates for state (A) a configuration score of 1000. The details of calculating a score is described later. Fig. 7 shows state list 701, which the system generates after receiving the initial state (A). State list 701 includes one member, state (A) and also shows its score, 1000. Up to this point, the best state is the only considered state, that is, initial state (A), with a score of 1000.

[0043] In stage (2), the system generates four secondary states (B) to (E) from the initial state (A). In particular, the system generates states (B)-(E) by shifting the black tile in four directions of left, right, up, and down, respectively. In some embodiments, in each shift, the system moves one or more tiles by a unit of distance in one of four or more directions. In some embodiments, the system performs different shifts by moving different tiles by different amounts. In some embodiment, a unit of distance is determined as a number of pixels or as a fraction of a dimension of a tile. In stage (2), for example, the amount of shift for states (B) and (C) is around one fourth of one side of the tiles and the amount of shift for states (D) and (E) is about one half one side of the tiles. The system further calculates scores of the states (B), (C), (D), and (E) to be respectively 1500, 500, 750, and 750. The system stores in a state list the generated states in an increasing order of their scores. State list 702 shows such an exemplary state list 702 as generated after the completion of stage (2). In some embodiments, upon generating secondary states from a parent state, the system removes the parent state from the state list. Moreover, when two or more different states in the state list have equal scores, the system may position them next to each other based on different rules, for example, in a random order or based on the order by which they are generated. At the end of stage (2), the system selects state (C) as the best state considered so far.

[0044] In some embodiments, the best state is a state with the lowest configuration score. In some other embodiments, an alternative score may be defined such that the selected state is the one with the highest alternative score. One such alternative score for a state may be defined as, for example, the negative of the configuration score for the state, or the difference between a maximum configuration score and the configuration score.

[0045] In some embodiments, in addition to a score, the system may also consider other factors in choosing the best state. For example, to decide whether to choose a specific state, the system may also consider the cost of the intermediate states for reaching that specific state. In some embodiments, the system may define a revised score for a specific state as the sum of the configuration score for that specific state and a factor multiplied by the sum of the configuration scores of intermediate states that are generated to reach the specific state. In some of such embodiments, thus, a first state with a higher configuration score may be selected over a second state with a lower configuration score, if the revised score for the first state is lower.

[0046] In stage (3), the system generates four additional secondary states (F) to (I) from state (C). In particular, the system selects the first state in state list 702 as a parent state and generates secondary states as child states of the parent state. This first state, state (C), generated in stage (2), has the lowest score among the states in state list 702. In stage (3), the system starts from the selected state (C) and generates secondary states (F)-(I) by further shifting the tiles. In particular, the system generates child states (F)-(I) by shifting the black tile in parent state (C) in four directions of left, right, up, and down, respectively. Of the newly generated states (F)-(I), state (F) is a duplicate to initial state (A) and thus the system does not consider it any further. The system further calculates the scores for the new states (G), (H), and (I) to be, respectively, 100, 150, and 150. Thus, the system removes state (C) from the state list and adds the newly generated states to generate state list 703. State list 703 thus includes states (G), (H), (I), (D), (E), and (B) in that order, for which the scores are, respectively, 100, 150, 150, 750, 750, and 1500. At the end of stage (3), the system selects state (G) as the best state considered so far, as it has had the lowest score of 100.

[0047] In stage (4), the system generates four additional secondary states (J) to (M) from state (G). In particular, the system selects the first state in state list 703, that is, state (G), as a parent state and generates secondary states as child states of state (G). In stage (4), the system starts from the selected state (G) and generates secondary states (J)-(M) by further shifting the tiles. In particular, the system generates child states (J)-(M) by shifting the black tile in parent state (G) in four directions of left, right, up, and down, respectively. Of the newly generated states (J)-(M), state (J) is a duplicate to previously considered state (C) and thus the system does not consider it any further. The system further calculates the scores for all new states (K), (L), and (M) to be 175. Thus, the system removes state (G) from the state list and adds the newly generated states (K), (L), and (M) to generate state list 704. State list 704 thus includes states (H), (I), (K), (L), (M), (D), (E), and (B) in that order, for which the scores are, respectively, 150, 150, 175, 175, 175, 750, 750, and 1500. At the end of stage (4), the system retains state (G) as the best state considered so far, as it has had the lowest score of 100.

[0048] In stage (5), the system generates four additional secondary states (N) to (Q) from state (H). In particular, the system selects the first state in state list 704, that is, state (H), as a parent state and generates secondary states as children states of state (H). In stage (5), the system starts from the selected state (H) and generates secondary states (N)-(Q) by further shifting the tiles. In particular, the system generates child states (N)-(Q) by shifting the black tile in parent state (H) in four directions of left, right, up, and down, respectively. The system further calculates the scores for all new states (N), (O), (P), and (Q) to be respectively 675, 125, 125, and 1100. Thus, the system removes state (H) from the state list and adds the newly generated states (N), (O), (P), and (Q) to generate state list 704. State list 704 thus includes states (O), (P), (I), (K), (L), (M), (N), (D), (E), (Q), and (B) in that order, for which the scores are, respectively, 125, 125, 150, 150, 175, 175, 175, 675, 750, 750, 1100, and 1500. At the end of stage (5) also, the system retains state (G) as the best state considered so far, as it has had the lowest score of 100.

[0049] Returning to Fig. 6, in step 608, the system determines a selected state for display. In some embodiments, a selected state may be the best state found by the system. In some embodiments, the system determines the best state as the state with the lowest score. The system may use a time limit to stop the search process: upon reaching the time limit, the system may determine the selected state as the state with the lowest score, as found up to that time. In the embodiment illustrated in Fig. 7, for example, if the system reaches the time limit after the completion of stage (5), the system may determine that state (G) is the selected state, as state (G) is the best state found at the end of stage (5). In some embodiments, the system stops the generation of secondary states upon finding a desired state that satisfies a threshold criterion. The system may then choose that desired state as the selected state. The desired state may, for example, have a score that is the minimum possible score or below a low-threshold score. In some embodiments, the minimum possible score is zero. Alternatively, the desired state may be defined as a state that does not include any overlapping tiles.

[0050] Returning to Fig. 6, in step 610 the system displays the selected state. The selected state may be a state that improves upon the initial state. In particular, the selected state may be a state that results from the initial state after one or more shifts, and in which there is no overlap or less overlap among the tiles compared to the initial state. For example, in the embodiments shown Figs 1A-1F, the states shown in Fig. 1B, Fig. 1D, and Fig. 1F can correspond to selected states that have been chosen and displayed after one or more shifts were performed on the tiles in Figs. 1A, 1C, and 1E, respectively. Similarly, in the embodiments shown in Figs. 2A-2C, the state shown in Fig. 2C may correspond to a selected state that has been chosen and displayed after performing one or more shifts in the initial state in Fig. 2B; in the embodiments shown in Figs. 3A-3E, the states shown in Figs. 3C and 3E each may correspond to a selected state chosen and displayed after one or more shifts were performed in the initial states shown in Figs. 3B and 3D, respectively; and in Figs. 4A and 4B the state shown in Fig. 4B may be a selected state resulting from one or more shits of the tiles in the initial state shown in Fig. 4A.

[0051] In various embodiments, the system calculates a configuration score for each state. In some embodiments, the system uses one or more heuristics or rules to determine the configuration score of a state. The heuristics may quantify one or more characteristics of a configuration of tiles that relate to its utility for display. Each heuristic may result in a heuristic-related score for the state. In some embodiments, the overall score of a state is a simple sum, a weighted sum, or another function of the one or more heuristic-related scores of the state. In some embodiments, a state with a lower score is more usable for being displayed.

[0052] In some embodiments, one such heuristic is an intersection heuristic. The intersection heuristic quantifies the overlap among the tiles. In some embodiments, the intersection heuristic is an increasing function of the total overlap among different tiles in the configuration. In various embodiments, the intersection heuristic increases as the overall overlap among tiles increases. Those tiles that do not overlap do not contribute to this heuristic. Those tiles that do overlap may contribute to this heuristic in proportion to the area of their overlap. The intersection heuristic for a state may thus be proportional to the sum of the areas of the overlap among the tiles. The intersection heuristic thus penalizes states that have more overlaps and awards those that have less overlaps.

[0053] Fig. 8 illustrates two examples for calculating the intersection heuristic according to an embodiment. Fig. 8 show two different states (1) and (2) for three square-shaped tiles 812, 814, and 816 that overlap with each other. States (1) and (2) each can be an initial state or a secondary state.

[0054] In state (1), tile 814 partially overlaps with tile 812 in an overlap section 813, and the area of overlap section 813 is 17,500 pixels. Similarly, tile 814 partially overlaps with tile 816 in an overlap section 815 and the area of overlap section 815 is 20,000 pixels. The intersection heuristic for this configuration of the three tiles is a function of the overlap areas. In one embodiment, the intersection heuristic is proportional to the sum of the overlap areas, that is, 37,500 pixels. In one embodiment, the intersection heuristic is the total overlap areas, measured in pixels, divided by 100. In this embodiment, thus, the intersection heuristic for the configuration of state (1) of Fig. 8 is 37,500 divided by 100, that is, 375.

[0055] In state (2), as compared to state (1), tile 816 has slightly moved down, such that its overlap with tile 814 has enlarged to an overlap section 825. The area of overlap section 825 is 50,000 pixels. Thus, in the embodiment discussed above, the intersection heuristic is proportional to the sum of the increased overlap areas, that is, 67,500 pixels, and in particular is 67,500 divided by 100, that is, is 675.

[0056] In some embodiments, one heuristic is a "tile move" heuristic. The tile move heuristic for a secondary state relates to the amount that the system moves one or more tiles to reach from the initial state to the secondary state. In some embodiments, the tile move heuristic is an increasing function of the total move distances of different tiles. In various embodiments, the tile move heuristic increases as the total movement increases. Tiles that do not move do not contribute to this heuristic. The tiles that move may contribute to this heuristic in proportion to the amount of their movement. The tile move heuristic for a state may thus be proportional to the sum of the movement of different tiles in the system. Tile move heuristic thus penalizes a state based on the number of shifts that are needed to reach that state.

[0057] Fig. 9 illustrates one example for calculating the tile move heuristic according to an embodiment. Fig. 9 shows one initial state (1) of a configuration of two tiles, one gray and one black, and three secondary states (2) to (4) that are consecutively derived from the initial state. In the initial state (1), the gray tile overlaps the black tile. In the secondary states (2), (3), and (4), the black tile has consecutively shifted up three times and by 75 pixels each time. Thus, with respect to the initial state (1), the total movement distances of the black tile in secondary states (2), (3), and (4) are respectively 75, 150, and 225 pixels. In one embodiment, the tile move heuristic for secondary states (2), (3), and (4) are respectively 75, 150, and 225, that is, equal to the total movement distance measured in pixels. In other embodiments, the tile move heuristic may be equal to the total movement distance of all tiles as measured in other units, or may be a product of that total movement distance in pixels multiplied by a proportionality factor. In various embodiments in which more than one tile moves, the tile move heuristic is proportional to the sum of the movement distances of those tiles.

[0058] In some embodiments, the tile move heuristic is a weighted sum of the movement distances of tiles. The weighted sum of movement distances may, for example, differentiate between movements in different directions by, for example, giving different weights to movements in different directions. The system may, for example, turn on a "horizontal move preference" or "leftward move preference" mode by respectively giving a lower weight to horizontal movements or to leftward movements compared to other movements, thus giving preference to horizontal or leftward movements. Alternatively, the system may give a lower weight to the movement distances of a first set of tiles compared to the movement distances of other tiles, thus giving preference to the movements of the first set of tiles.

[0059] In some embodiments, one heuristic is a boundary move heuristic. The boundary move heuristic for a secondary state relates to the distance that one or more sides of the boundary of the overall configuration moves when the initial state changes to the secondary state. In various embodiments, the boundary of a configuration is defined as a geometric shape that encompasses the configuration. In some embodiments, the boundary of a configuration is the smallest rectangle that encompasses all tiles in the configuration.

[0060] Fig. 10 illustrates one example for calculating the boundary move heuristic according to an embodiment. Fig. 10 shows one initial state (1) of a configuration of four tiles, one gray tile 1010 and three black tiles 1020, 1030, and 1040; and two secondary states (2) and (3) that are consecutively derived from the initial state. In the initial state (1), the gray tile overlaps the three black tiles. Moreover, for state (1), the boundary of the configuration is shown as a rectangle with four sides 1050, 1060, 1070, and 1080.

[0061] In the secondary state (2), black tile 1020 has moved to the right by 50 pixels with respect to initial state (1). As a result of this move, the right side 1050 of the boundary has moved to the right by 50 pixels. Such a movement that increases the area defined by the boundary is a stretching movement.

[0062] In the secondary state (3), black tile 1020 has moved to the left by 150 pixels with respect to initial state (1). As a result of this move, the right side 1050 of the boundary has moved to the left by 150 pixels. Such a movement that decreases the area defined by the boundary is a compressing movement.

[0063] In various embodiments, the boundary move heuristic is a function of the total boundary movement. Moreover, in some embodiments, the total boundary movement is measured based the movements of each of the sides of the boundary. In some situations, to reach the secondary state, some of the boundaries may not move, some may have a stretching move and some may have a compressing move. In some embodiments, the system may penalize stretching movements and award compressing movements. In some of such embodiments, the total boundary movement is an algebraic sum of the boundary movements, with the stretching moves being positive and the compressing moves being negative. In such embodiments, thus, the total boundary movement for state (2) of Fig. 10 is 50 and for state (3) is -150.

[0064] In some other embodiments, the system may penalize both stretching and compressing movements. In some of such embodiments, the total boundary movement is the sum of the absolute values of the boundary movements, that is, with both the stretching moves and compressing moves contributing by a positive amount. In such embodiments, thus, the total boundary movement for state (2) of Fig. 10 is 50 and for state (3) is 150.

[0065] In yet some other embodiments, the system may only penalize stretching movements and may not take into account compressing movements. In some of such embodiments, the compressing movement is not taken into account and the total boundary movement is the sum of the stretching movements only. In such embodiments, thus, the total boundary movement for state (2) of Fig. 10 is 50 and for state (3) is 0.

[0066] In some embodiments, the boundary move heuristic is an increasing function of the total boundary movement. In various embodiments, the boundary move heuristic increases as the total boundary movement increases. In some embodiments, the boundary move heuristic is proportional to the total boundary movement. In one embodiment, for example, when the boundary move heuristic is a boundary stretching heuristic, the value of the heuristic for state (1) in Fig. 10 is 50 or proportional to 50, and that value for state (2) is 0.

[0067] In some embodiments, one heuristic is a compression heuristic. The compression heuristic is defined for any state, whether initial or secondary, and quantifies the tight packing of the tiles. The more tightly packed tiles are awarded by receiving a lower compression heuristic. In some embodiments, the compression heuristic is based on the area defined by the boundary of the state or the location of the sides of the boundary. In some embodiments, the compression heuristic is activated when the overall display gets resized through, for example, a window resize event.

[0068] Fig. 11 illustrates one example for calculating the compression heuristic according to an embodiment. Fig. 11 shows three states (1) to (3) for three black tiles. The configuration boundary in each state is a rectangle with four sides 1101 to 1104. Further, the display boundary is another rectangle with four sides 1111 to 1114. As observed qualitatively, in states (1) to (3), the tiles are progressively more tightly packed. The compression heuristic, thus, reflects this progression by calculating progressively lower values for these states.

[0069] In some embodiments, the compression heuristic of a state is proportional to the area of the configuration boundary for the state. In some other embodiments, the compression heuristic of a state is a function of the distance between the sides of the boundary and some reference points or lines. For the states in Fig. 11, for example, in one embodiment the compression heuristic is proportional to the sum of the distances of side 1111 of the display with the vertical sides of the boundary, which are sides 1101 and 1103. In state (1), the distances between side 1111, and sides 1101 and 1103 of the boundary are 200 and 1500 pixels, respectively. The compression heuristic of state (1) is thus equal or proportional to the sum of these values, that is, 1700. In one embodiment, the compression heuristic is proportional to this sum by a factor of 0.1 and is thus 170 for state (1).

[0070] For state (2), in which the tiles are more tightly packed compared to state (1), the distances between side 1111, and sides 1101 and 1103 of the boundary are 50 and 900 pixels, respectively; and the compression heuristic is thus equal or proportional to 950. In particular, in the one embodiment mentioned above, the compression heuristic for state (2) is 95, which is lower than that of state (1).

[0071] For state (3), in which the tiles are most tightly packed compared to both previous states, the distances between side 1111, and sides 1101 and 1103 of the boundary are 0 and 700 pixels, respectively; and the compression heuristic is thus equal or proportional to 700. In particular, in the one embodiment mentioned above, the compression heuristic for state (3) is 70, which is lower than those of both states (1) and (2).

[0072] In some embodiments, one heuristic is an embedded heuristic, which is non-zero for a tile that is fully embedded in another tile. The purpose of this heuristic is to drive the system to move the embedded tile out of the embedding tile. The embedded heuristic measures the level to which the embedded tile is close to exiting the embedding tile. In particular, the embedded heuristic results in a lower value when the embedded tile is closer to exiting the embedding tile.

[0073] Fig. 12 illustrates one example for calculating the embedded heuristic according to an embodiment. Fig. 12 shows six states (A) to (F) for two tiles, one larger rectangular black tile and one smaller square gray tile that is fully embedded in the black tile. Fig. 12 also shows a state list 1202. State (A) is a parent state, which may be an initial state or a secondary state. States (B)-(E) are four secondary states that are derived from state (A). State (F) is a secondary state derived from state (B). State list 1202 lists states (B)-(E) and sorts them according to their score derived solely from the embedded heuristic, as detailed below.

[0074] In some embodiments, the embedded heuristic is an increasing function of the least distance between the boundaries of the embedded and the embedding tiles. In some embodiments, the embedded heuristic is proportional to this distance. In state (A) of Fig. 12, for example, the distance between the top sides of the embedded and embedding tiles is 50 pixels, the distance between the leftmost sides of the two tiles is 75 pixels, the distance between the bottom sides is 100 pixels, and the distance between the rightmost sides is 200 pixels. The embedded heuristic in state (A) is thus proportional to the smallest of these four distances, that is, 50 pixels. In one embodiment, used here, the proportionality factor is one. The embedded heuristic for state (A) is thus 50.

[0075] States (B)-(E) are derived from state (A) by shifting the gray tile with respect to the black tile by an amount of 25 pixels in the four directions of up, down, left, and right, respectively. In state (B), thus, the above listed four distances between the top, left, bottom, and right pairs of sides are 25, 75, 125, and 200, respectively. The embedded heuristic for state (B) is thus 25, the smallest of these four distances. Similarly, for state (C), the four distances are 75, 75, 75, and 200, and the embedded heuristic is 75; for state (D), the four distances are 50, 50, 100, and 225, and the embedded heuristic is 50; and for state (E), the four distances are 50, 100, 100, 175, and the embedded heuristic 50.

[0076] State list 1202 lists the four child states (B) to (E) and configuration scores based on embedded heuristic only. As noted, state (B) has the lowest score of 25 compared to the other three scores. That is the system, based on embedded heuristic, awards an upward shift of the gray tile in state (A), resulting in state (B), because an upward shift is the closest way for the gray tile to exit the black tile. More generally, the embedded heuristic awards the configuration that shifts the tiles such that the embedded tile moves towards exiting the embedding tile. Other heuristics may not have such an effect. In particular, the intersection heuristic does not distinguish among different embedded configurations: in all these configurations, the area of overlap is equal to the area of the embedded tile and is thus the same. For states (A)-(E) of Fig. 12, for example, the intersection heuristic is the same and proportional to the area of the gray tile that is fully overlapped by the black tile.

[0077] Returning to Fig. 12, in the next stage the system may derive from state (B) the child state (F) by shifting the gray tile up by 25 pixels. Such a shift will bring the upper side of the gray tile to overlap with the upper side of the black tile. In state (F), thus, the smallest distance between the corresponding sides of the two tiles is 0. Therefore, in above-discussed embodiment, the embedded heuristic for state (F) is 0.

[0078] In various embodiments, the system may apply one or more heuristics to determine the configuration score of different states. The configuration score may be based on the sum or a weighted sum of one or more of the heuristics, such as those discussed above or others. Moreover, at different stages of the process, the system may vary the effect of one or more heuristics by varying the values of their weights in the weighted sum; or may even deactivate some of them by setting their weights to zero. The system may, for example, reduce the effect of a heuristic or deactivate it when, for example, its usage is counterproductive because it lengthens the process or generates unnecessary states. The system may, on the other hand, raise the effect of a heuristic or activate a previously deactivated heuristic when it is necessary to overcome a specific change in the configuration and derive the necessary states.

[0079] For example, the system may set the weight of the embedded heuristic to a non-zero value, in effect activate this heuristic, only when a tile becomes fully embedded in another tile and also may calculate this heuristic only for those tiles. As another example, if a tile extends such that its size increases by a large factor, e.g., 1000%, and thus overlaps or embeds many tiles, the system may deactivate the move heuristic or the boundary move heuristic, and may at the same time increase the weight of the intersection heuristic by a large factors, e.g., 100. The system may make such changes to facilitate the movement of the overlapped or embedded tiles away from the extended tile. In yet another example, if a tile extends or moves such that its breadth blocks the entire or most of the horizontal breadth of the screen, the system may change the weights for horizontal movements, turning on the horizontal move preference mode described above, to facilitate movements that are horizontal. The changes in the weights may be performed by a user or triggered automatically due to some events, such as the above-mentioned events of a tile getting fully embedded in another tile or a tile area expanding by a large factor such as 10.

[0080] As described earlier, in some embodiments, the system stops generating new secondary states and chooses a selected state upon reaching a time limit or upon generating a state that satisfies a threshold criterion. If the system reaches a time limit, the system may choose the selected state as the state with lowest score up to that point. Depending on the mechanism and order that the system uses for generating the secondary states, the system may arrive at different states with different scores within the time limit. Similarly, more than one state may satisfy the threshold criterion and the system may reach different ones of them first based on the mechanism and order by which it generates the secondary states. Thus, the mechanism and order of generating new secondary states may determine the outcome of the process. The system provides better selected states if it uses a mechanism that arrives at states with lower scores faster and through fewer steps. In other words, in deriving secondary states, ordering them in a state list, and deriving the next generation of secondary states, the system explores the space of possible states in search of the selected state. The system may benefit from mechanisms that shorten its path towards favorable states and avoid less favorable states.

[0081] In various embodiments, the system improves its mechanism of generating secondary states and searching for the selected state by using one or more criteria and techniques for moving the tiles or for deriving secondary states. In various embodiments, to derive secondary states from a parent state, the system should determine which tiles to shift and by what amount to shift them.

[0082] In some embodiments, the system determines that some tiles are moveable, that is, they are candidates for shifting; then, to derive a secondary state, the system shifts one or more of the moveable tiles. In some embodiments, the system determines as moveable the tiles that are overlapping with other tiles or have been previously deemed moveable in a parent state. Fig. 13 illustrates an example of such determinations according to some embodiments. Fig. 13 shows three states (1) to (3) for four tiles one gray tile, and three black tiles marked A, B, and C. In state (1), the gray tile overlaps black tiles A and B. Black tile C does not overlap any tile. To derive secondary states from state (1), the system may thus determine that the moveable tiles are the gray tile and black tiles A and B.

[0083] In the example shown in Fig. 13, the system derives states (2) and (3) from state (1) by shifting moveable black tile B down and right, respectively. In states (2) and (3), the gray tile still overlaps black tile A, but it no longer overlaps black tile B. Black tiles B and C, on the other hand, do not overlap any tiles in state (2), but overlap each other in state (3). Thus, based on the above rule, in state (2), the gray tile and the black tile A are moveable, as they overlap. Moreover, in state (2), black tile B is also moveable, as it has been deemed moveable in the parent state (1). In state (3), on the other hand, each of the four tiles is moveable, as each overlap another tile.

[0084] In some embodiments, the system may employ a mechanism that determines two classes of moveable tiles. According to this two-class mechanism, a first class of moveable tiles includes those tiles that overlap other tiles and a second class of moveable tiles includes those tiles that are within a specific distance of a tile in the first class. Fig. 14 illustrates this mechanism according to some embodiments. Fig. 14 shows a configuration of five tiles, one gray tile and four black tiles labeled A to D. Moreover, Fig. 14 shows a movability circle around each tile. The movability circle for each tile shows the area that is within the specific distance mentioned above. In Fig. 14, black tiles A and B overlap the gray tile, while black tiles C and D do not overlap any tiles. Thus, in Fig. 14, the gray tile and black tiles A and B are first class moveable. Moreover, in Fig. 14, tile C intersects the movability circle of the first class tile B. Thus, tile C is also moveable as it belongs to the second class. Tile D, on the other hand, is not moveable, as it neither overlaps any other tiles, nor is within the movability circle of a first class tile.

[0085] In some embodiments, the radius of the movability circle for a tile depends on the tile itself. Larger tiles, for example, may have larger movability circles. Moreover, in various embodiments, the radius of the circle extends from the geometrical center of the tile. In some embodiments, for example, the diameter of the circle is a factor, e.g., twice, of the largest dimension of the tile. In such a case, a rectangular 200 by 100 pixel tile will have a movability circle with a radius of 200 pixels (and thus diameter of 400 pixels), and a center that is at the center of the rectangle.

[0086] In some embodiments, the system starts from a parent state and moves the moveable tiles one at a time to derive each secondary state. In some embodiments, each move is a shift in one of the four directions up, down, left, and right.

[0087] Referring now to Fig. 15, in some embodiments, the system may move groups of tiles together. In some embodiments, the system moves a group of tiles together by moving them in one step, by the same amount, and in the same direction. In some embodiments, the selected group of tiles is an abutting-group, which consists of two or more tiles that are abutting each other. Two tiles abut each other if all or part of the perimeter of one tile overlaps with all or part of the perimeter of the second tile. In some embodiments, if a tile belongs to such an abutting group, any tile that abuts it also belongs to the same abutting group. Belonging to the abutting group is thus a transitive property that is transferred from a first tile to a second tile, if the two tiles share at least one portion of their sides.

[0088] Fig. 15 illustrates four examples of grouped tiles, numbered (1) to (5), according to an embodiment. In example (1), two tiles are abutting side by side and thus belong to the same abutting group. In example (2), three tiles are shown that belong to the same abutting group, because the upper two share one full side, while the lower tile abuts with each of the two other tiles along half of its upper side. In example (3), six tiles belong to the same abutting group, because every one of those six tiles abuts another tile in the abutting group along all or a portion of one of its sides. Similarly, in example (4), five tiles belong to the same abutting group, because every one of those fives tiles abuts another tile in the abutting group along a portion of one of its sides.

[0089] Referring now to Fig. 16, in some embodiments, instead of shifting one tile at a time, each time the system shifts an abutting group of tiles together to derive a secondary state. Fig. 16 illustrates examples of such group shifts according to one embodiment. Fig. 16 illustrates five states of five tiles 1601-1605. The five states are labeled (A) to (E). In state (A), tile 1601 overlaps tile 1602. Moreover, tile 1602 abuts tile 1603, and tile 1603 abuts both tiles 1604 and 1605. Thus, the four tiles 1602-1605 belong to the same abutting group of tiles.

[0090] In Fig. 16, from state (A), the system generates four secondary states (B)-(E) by shifting the abutting group together. In particular, to generate states (B)-(E), the system has shifted tiles 1602-1605 together in the directions of up, left, down, and right, respectively. As seen states (B), (C), and (D) still include some overlapping tiles, but state (E) does not include any overlapping tiles. Thus, the system is able to reach a non-overlapping state via one group shift from state (A) to state (E) and one stage. If the system performs shifts of single tiles only, it will require multiple shifts of different tiles and significantly larger number of stages to reach from state (A) to state (E). Under such circumstances, the system may not be able to reach state (E) within the time limit and may thus chose a selected state that is less favorable or has a higher score compared to state (E)

[0091] In some embodiments, the system may utilize more advanced moves to accelerate the search mechanism and shorten the path to a favorable state. In these embodiments, to perform more advanced moves, the system may select a group of multiple tiles and shift them together, even when those tiles do not belong to an abutting group. One such multiple shift may be an n-tuple shift. In an n-tuple shift, n tiles may be moved together. These n-tiles may be located anywhere in the configuration with respect to each other. In some embodiments, when considering n-tuple shifts, the system choses different or sometimes all groups of n tiles and shifts them together.

[0092] In a 2-tuple shift, for example, the system may choose a subset (or all) of tiles and then shift every possible pair of tiles in that subset to create new states: the system may choose a subset of four tiles labeled a, b, c, and d for 2-tuple shifts, and then choose, in six different stages, pairs ab, ac, ad, bc, bd, and cd as 2-tuples and shift the chosen 2-tuple together. Alternatively, for the same subset of tiles, the possible 3-tuples are abc, abd, acd, and bcd. Selecting a larger n for the n-tuple shift may affect the search time in opposite ways. On the one hand, a larger n may reduce the number of stages needed to reach a selected state. On the other hand, a larger n may increase the number of secondary states that are generated in each stage because a larger number of n-tuples need to be considered. In some embodiments, the system decreases the number of n-tuples by only considering a subset of all possible n-tuples in which the n tiles in the n-tuples are within a movability circle of each other.

[0093] Fig. 17 illustrates examples of such n-tuple shifts according to one embodiment. Fig. 17 illustrates seven states of three tiles 1701 to 1703. The seven states are labeled (A) to (G), among which state (A) is a parent state, and states (B) to (G) are each derived from state (A) as secondary states. In state (A), tile 1701 overlaps tile 1702. Under single tile movement mechanisms, the system may determine tile 1702 to be moveable. The system may thus generate states (B) and (C) by shifting tile 1702 up and left, respectively. In State (B), tile 1702 overlaps tile 1701 in an amount that is less than their overlap in state (A). In state (C), on the other hand, tile 1702 does not overlap tile 1701, but overlaps tile 1703 by an amount that is more than the overlap in state (B). Thus, in some embodiments in which the score is calculated based on the intersection heuristics, state (B) has a lower score than state (C). To generate the next set of secondary states, therefore, the system may start from state (B). State (B) however, may be less favorable compared to state (C), because it lacks the original alignment between tiles 1702 and 1703 in the parent state (A).

[0094] In the above situation, the system may use an n-tuple shift mechanism to move the tiles, as shown in states (D) to (G). In particular, the system has chosen tiles 1702 and 1703 as an n-tuple and shifts them together and by the same amount. In particular, to generate states (D)-(G) from state (A), the system has shifted tiles 1702 and 1703 together in the directions of right, left, up and down, respectively. Using this shift mechanism enables the system to derive state (E) in this first set of secondary states. State (E) may be more desirable that state (B), as it does not include any overlaps, and also maintains the alignment between tiles 1702 and 1703.

[0095] In some embodiments, the system improves the search mechanism by generating "composite" states that are combinations of different parts of previous secondary states. The system may, for example, record beneficial moves of different tiles and then combine those moves to generate the composite state. A composite state, thus, may be a hybrid of two or more secondary states.

[0096] Fig. 18 illustrates one example of deriving such a composite state according to one embodiment. Fig. 18 illustrates five states of four tiles 1801 to 1804. The five states are labeled (A) to (E), among which state (A) is a parent state, and states (B) to (D) are each derived from state (A) as secondary states. Further, state (E) is a secondary state that is derived from states (B) to (D) as a composite state.

[0097] In parent state (A), the central tile 1801 overlaps each of the three peripheral tiles 1802 to 1804. The system generates state (B) to (D) by respectively shifting tile 1802 to the right, shifting tile 1803 to the left, and shifting tile 1804 down. Due to each of the shifts, the score of the state is lower than the parent state, because the shift removes the overlap between the shifted tile and the central tile, tile 1801. The system may record the shifted tile and mark the shift as beneficial, as the shift lowers the overall score. The system may then generate state (E) as a composite state by combining those beneficial shits. In particular, in composite state (E) and as compared to the initial state (A), tile 1802 has shifted left, in the manner seen in state (B); tile 1802 has shifted right, in the manner seen in state (C); and tile 1803 has shifted down, in the manner seen in state (D). In state (E), therefore, none of the tiles overlap. Using a composite state mechanism may thus enable the system to reach a favorable state with no overlap within two generations. Generating simple secondary states by performing single tile shifts from any one of secondary states (B) to (D) may require more generations of secondary states and thus a longer path to arrive at state (E)

[0098] In some embodiments, the system improves the search mechanism by generating "evolutionary" states that are random combination of previous secondary states. The system may, for example, select two more states from among secondary states and combine different tiles from each to generate an evolutionary state.

[0099] Fig. 19 illustrates one example of generating such an evolutionary state according to an embodiment. Fig. 19 illustrates eight states of five tiles 1901 to 1905. The eight states are labeled (A), (L), (I), and (N) to (R), among which state (A) is a parent state, states (I) and (L) are secondary states, and states (N) to (R) are evolutionary states generated from states (I) and (L). In state (A), the central tile 1901 overlaps each of the four peripheral tiles 1902 to 1905. In the other states the tiles are shifted by different amounts from their positions in state (A), and in some of them one or more of tiles 1902-1905 do not overlap with tile 1901.

[0100] Fig. 19 also shows a state list 1910 listing eight states that are generated from state (A). State list 1910 lists those state in increasing order of scores as (H), (I), (K), (L), (M), (D), (E), and (B). Of these secondary states, Fig. 9 shows the configurations of states (I) and (L). In state (I), as compared to parent state (A), tile 1902 has shifted up and left, and tile 1903 has shifted up and right, such that none of them do not overlap tile 1901. In state (L), as compared to parent state (A), tile 1902 has shifted up and left but still overlaps tile 1901, tile 1903 has shifted down and right and still overlaps tile 1901, and tiles 1904 and 1905 have shifted down and right in a way that they do not overlap tile 1901. In these states, the position of tile 1901 is the same as that of state (A).

[0101] To generate evolutionary states (N) to (R), the system has chosen states (I) and (L) from among the secondary states. The system has then generated state (N) to (R) by randomly combining positions of some of the tiles from state (I) with the positions of the remaining tiles from state (L). The state from which the position of each tile is chosen is shown by marking the tile with an "I" or an "L". For example, in state (N), the system has chosen the positions of tiles 1902 and 1905 from state (I), and the positions of tiles 1903 and 1904 from state (L). In state (O), on the other hand, the system has choses the positions of tile 1902 and 1903 from state (I), and the positions of tiles 1904 and 1905 from state (L). As another example, in state (R), the system has chosen the position of tile 1902 from state (L), and the positions of tiles 1903 to 1905 from state (I). Thus, by generating these evolutionary states, the system is able to generate a favorable state such as (O), in which no two tiles overlap. By performing single tile shifts the system may require more generations of secondary states to reach state (O) or may not reach it at all.

[0102] In various embodiments, the system chooses two or more states at random to generate evolutionary states. In some embodiments, for the random choice, the system gives a higher weight to the states that are closer to the start of the state list to increase the possibility that they are chosen as parents of an evolutionary state. In some embodiments, the system chooses the parent states as the states closest to the start of the state list.

[0103] Figs. 20-23 illustrate a reshuffle application, which utilizes the disclosed systems and method in a user interface to reshuffle displayed tiles according to various embodiments. The user interface is a display that shows multiple square or rectangular tiles to a user. Each tile includes one or more words or numbers and presents to the user some information of interest. When utilizing the interface, the user may change the display by selecting a tile and relocating, resizing, or expanding that tile. Each of these actions may cause the selected tile to overlap one or more other tiles. Upon such overlap, the reshuffle application may reshuffle, i.e., shift the tiles to reduce or remove the overlap. The reshuffled state may be a favorable state of the tiles that the system selects and displays according to various embodiments. Each of Figs. 20-23 shows a sequence of snapshots of the display, which includes the display after the user's action and after the reshuffle.

[0104] In particular, Figs. 20A-20G display, in seven snapshots, some basic actions of the reshuffle application. In these snapshots, the user moves the same tile to different locations and, in response to each move, the system shifts the other tiles to reduce or remove the overlaps. Snapshot 20A shows the initial configuration of the tiles. In snapshot 20B, the user moves the tile "SALES" to a new location in which it overlaps three other tiles. In snapshot 20C, the system shifts four tiles to reduce the overlaps. In 20D, the user moves the "SALES" tile to another location in which it overlaps three tiles. In 20E, the system shifts five tiles to remove the overlaps. In 20F, the user moves the "SALES" tile to yet another location in which it overlaps two tiles. In 20G, the system shifts three tiles to remove the overlaps.

[0105] Figs. 21A-21O show fifteen snapshots in which the reshuffle application utilizes the disclosed group shifting of tiles. Snapshot 21A shows the initial configuration of the tiles. In 21B and 21C, a user slightly moves tiles "USA" and "ANZ" at the lower right of the display, such that together with the square "REGIONAL" tile they form a group of three abutting tiles. Further, in 21D and 21 E, the user slightly moves tiles "FACEBOOK" and "GLOBAL" at the lower left of the display, such that together with the "SALES" and the rectangular "GLOBAL" tiles they form a second group of four abutting tiles. In 21F, the user moves the tile "STOCK" from left to right, such that it overlaps the first group of tiles. In 2 1 G, the system shifts this first group together to the left to remove the overlap and further shifts the rectangular "REGIONAL" tile to the left to avoid its overlap with the shifted group. In 2 1 H, the user moves up the other rectangular "REGIONAL" tile from the bottom, such that it overlaps the first group as well as the first rectangular "REGIONAL" tile. In 21I, the system shifts the first "REGIONAL" up and also shifts the first group up all together to remove the overlap. Further, the system shifts up two other tiles located above these shifted tiles to avoid overlaps with the shifted tiles. In 21J, the user moves the first rectangular "REGIONAL" tile to the left such that it overlaps the "GLOBAL" tile in the second group. In 21K, the system shifts all four tiles in the second group to the left to remove the overlap. In 21 L, the user moves the rectangular blank tile to the left, such that it overlaps the rectangular "GLOBAL" tile in the second group. In 21 M, the system shifts up all four tiles in the second group to remove the overlap. In 21N, the user moves the blank tile down such that it overlaps the square "REGIONAL" tile in the first group. In 21O, the system shifts down all three tiles in the first group to remove the overlap.

[0106] Figs. 22A-22G illustrate the performance of the reshuffle application in response to expansion of a tile according to some embodiments. Fig. 22A shows the initial configuration. In 22B, the user has clicked on the blank rectangular tile to expand it. As a result, the blank tile disappears in 22B and appears as an expanded tile in 22C and 22D. The expanded tile shows detailed information about the object associated with the blank tile. Because the tile has expanded, in 22D it partially overlaps some tiles and fully covers, i.e., embeds some others tiles. In 22E, the system shifts those objects to bring them out from under the expanded tile or remove the overlaps. In 22F, the user closes the expanded object. In 22G, the closed object re-appears as the rectangular blank tile and the remaining objects also shift back to their original locations.

[0107] In some embodiments, snapshots of Figs. 22A-22G occur when the user clicks on the blank tile, moves it to the center, and holds the mouse without releasing the tile, and eventually moving the blank tile back to its original location. The system interprets these actions as expansion of the blank tile without releasing it. The system thus retains the initial state during the whole process. The system thus uses the retained initial state to generate the state in 22G.

[0108] Figs. 23A-22C illustrate the performance of the reshuffle application in response to resizing of a tile according to some embodiments. Fig. 23A shows the initial configuration. In 23B, the user has resized the tile "CHART" by stretching it upward. The resized tile overlaps two other tiles. In 23C, the system has shifted the overlapped tiles to remove the overlap.

[0109] In this disclosure, the use of the singular includes the plural unless specifically stated otherwise. In this application, the use of "or" means "and/or" unless stated otherwise. Furthermore, the use of the term "including" as well as other forms such as "includes" and "included" is not limiting. In addition, terms such as "objects", "element", or "component" encompass objects, elements, or components comprising one unit, and objects, elements, and components that comprise more than one subunit, unless specifically stated otherwise. Additionally, the section headings used herein are for organizational purposes only and are not to be construed as limiting the subject matter described.

[0110] The foregoing description of the invention, along with its associated embodiments, has been presented for purposes of illustration only. It is not exhaustive and does not limit the invention to the precise form disclosed. Those skilled in the art will appreciate from the foregoing description that modifications and variations are possible in light of the above teachings or may be acquired from practicing the invention. For example, the steps described need not be performed in the same sequence discussed or with the same degree of separation. Likewise various steps may be omitted, repeated, or combined, as necessary, to achieve the same or similar objectives. Similarly, the systems described need not necessarily include all parts described in the embodiments, and may also include other parts not described in the embodiments. Accordingly, the invention is not limited to the above-described embodiments, but instead is defined by the appended claims in light of their full scope of equivalents.

Claims

1. A method for configuring a plurality of tiles representing graphical user interface objects displayed in a graphical user interface, the method comprising:

receiving an initial state of the tiles displayed on the graphical user interface, wherein the initial state includes two overlapping tiles;

deriving, via one or more computer processors, one or more secondary states for display of the tiles on the graphical user interface from the initial state by rearranging the tiles in the initial state;

calculating one or more scores for the initial state of the tiles displayed on the graphical user interface and the secondary states for display of the tiles on the graphical user interface; and

determining, based on the scores, a selected state from among the initial state and the one or more secondary states as a display state to be displayed on the user interface.

2. The method of claim 1, further comprising defining one or more heuristics used for calculating the score for the initial state or the one or more scores for the secondary states;
wherein the heuristics may be based on one or more of the following: area of overlap, tile displacement, boundary stretch, compression, and embedding of the tiles displayed on the graphical user interface.

3. The method of claim 1 or 2, wherein deriving the one or more secondary states includes a hierarchical sequence of generating a child state for display of the tiles on the graphical user interface from a parent state for display of the tiles on the graphical user interface by shifting one or more tiles in the parent state.

4. The method of claim 3, wherein the one or more tiles of the parent state are shifted in the graphical user interface one or more of four directions of up, down, left, and right to generate the child state.

5. The method of any one of the preceding claims, further comprising generating a state list that includes the initial state and the secondary states sorted in increasing order of their scores.

6. The method of claim 5, wherein generating the secondary states includes generating one or more child states for display of the tiles on the graphical user interface from a parent state for display of the tiles on the graphical user interface that is closest to a head of the state list and that has not been previously used for generating child states.

7. The method of clam 6, further comprising adding the generated child states to the state list based on their scores.

8. The method of any one of the preceding claims, wherein the one or more secondary states include a secondary state that is generated from a parent state for display of the tiles on the graphical user interface by shifting a plurality of tiles together; and
wherein the plurality of tiles may include a group of two or more tiles that have overlapping boundaries.

9. The method of any one of claims 3 to 8, wherein generating a child state from a parent state includes:

shifting a first tile in the parent state that overlaps with a second tile in the parent state; and/or

shifting a first tile in the parent state that is within a radius of a second tile in the parent state.

10. The method of any one of the preceding claims, wherein the selected state is selected from among the initial state and the one or more secondary states as a state for which the score is the lowest.

11. A tile configuration system for configuring a plurality of tiles representing graphical user interface objects displayed in a graphical user interface, the system comprising:

a state generator module implemented by one or more computer processors and configured to:

receive an initial state of the tiles displayed on the graphical user interface, wherein the initial state includes two overlapping tiles, and

derive one or more secondary states for display of the tiles on the graphical user interface from the initial state by rearranging the tiles in the initial state;

a score calculator module configured to calculate one or more scores for the initial state of the tiles displayed on the graphical user interface and the secondary states for display of the tiles on the graphical user interface; and

a database configured to store the scores,

wherein the state generator module is further configured to generate at least one of a sorted list, a tree, or a vector and to determine, based on the scores, a selected state from among the initial state and the one or more secondary states as a display state of the tiles to be displayed on the user interface.

12. The system of claim 11, wherein deriving the one or more secondary states includes a hierarchical sequence of generating a child state for display of the tiles on the graphical user interface from a parent state for display of the tiles on the graphical user interface by shifting one or more tiles in the parent state;
wherein the one or more tiles of the parent state may be shifted in the graphical user interface one or more of four directions of up, down, left, and right to generate the child state.

13. The method of claim 11 or 12, wherein the state generator module is further configured to generate a state list that includes the initial state and the secondary states sorted in increasing order of their scores.

14. The method of claim 13, wherein generating the secondary states includes generating one or more child states for display of the tiles on the graphical user interface from a parent state for display of the tiles on the graphical user interface that is closest to a head of the state list and that has not been previously used for generating child states;
wherein the state generator module may be further configured to add the generated child states to the state list based on their scores.

15. A non-transitory computer readable medium storing a computer program, wherein the computer program, when executed by one or more computers, causes the one or more computers to execute a method for configuring a plurality of tiles representing graphical user interface objects displayed in a graphical user interface, the method comprising:

receiving an initial state of the tiles displayed on the graphical user interface, wherein the initial state includes two overlapping tiles;

deriving in multiple stages, via the one or more computer processors, one or more secondary states for display of the tiles on the graphical user interface by rearranging the tiles in the initial state, wherein new secondary states are generated using the initial state and existing secondary states;

calculating one or more scores for the initial state displayed on the graphical user interface and the secondary states for display of the tiles on the graphical user interface; and

determining, based on the scores, a selected state from among the initial state and the one or more secondary states as a display state of the tiles to be displayed on the user interface.

Amended claims

Amended claims in accordance with Rule 137(2) EPC.

1. A method for configuring a plurality of tiles representing graphical user interface objects displayed in a graphical user interface, the method comprising:

receiving an initial state of the tiles displayed on the graphical user interface, wherein the initial state includes two overlapping tiles;

deriving, via one or more computer processors, one or more secondary states for display of the tiles on the graphical user interface from the initial state by rearranging the tiles in the initial state;

calculating one or more scores for the initial state of the tiles displayed on the graphical user interface and the secondary states for display of the tiles on the graphical user interface; and

determining, based on the scores, a selected state from among the initial state and the one or more secondary states as a display state to be displayed on the user interface.

2. The method of claim 1, further comprising defining one or more heuristics used for calculating the score for the initial state or the one or more scores for the secondary states;
wherein the heuristics may be based on one or more of the following: area of overlap, tile displacement, boundary stretch, compression, and embedding of the tiles displayed on the graphical user interface.

3. The method of claim 1 or 2, wherein deriving the one or more secondary states includes a hierarchical sequence of generating a child state for display of the tiles on the graphical user interface from a parent state for display of the tiles on the graphical user interface by shifting one or more tiles in the parent state.

4. The method of claim 3, wherein the one or more tiles of the parent state are shifted in the graphical user interface one or more of four directions of up, down, left, and right to generate the child state.

5. The method of any one of the preceding claims, further comprising generating a state list that includes the initial state and the secondary states sorted in increasing order of their scores.

6. The method of claim 5, wherein generating the secondary states includes generating one or more child states for display of the tiles on the graphical user interface from a parent state for display of the tiles on the graphical user interface that is closest to a head of the state list and that has not been previously used for generating child states.

7. The method of clam 6, further comprising adding the generated child states to the state list based on their scores.

8. The method of any one of the preceding claims, wherein the one or more secondary states include a secondary state that is generated from a parent state for display of the tiles on the graphical user interface by shifting a plurality of tiles together; and
wherein the plurality of tiles may include a group of two or more tiles that have overlapping boundaries.

9. The method of any one of claims 3 to 8, wherein generating a child state from a parent state includes:

shifting a first tile in the parent state that overlaps with a second tile in the parent state; and/or

shifting a first tile in the parent state that is within a radius of a second tile in the parent state.

10. The method of any one of the preceding claims, wherein the selected state is selected from among the initial state and the one or more secondary states as a state for which the score is the lowest.

11. A tile configuration system for configuring a plurality of tiles representing graphical user interface objects displayed in a graphical user interface, the system comprising:

a state generator module implemented by one or more computer processors and configured to:

receive an initial state of the tiles displayed on the graphical user interface, wherein the initial state includes two overlapping tiles, and

derive one or more secondary states for display of the tiles on the graphical user interface from the initial state by rearranging the tiles in the initial state;

a score calculator module configured to calculate one or more scores for the initial state of the tiles displayed on the graphical user interface and the secondary states for display of the tiles on the graphical user interface; and

a database configured to store the scores,

wherein the state generator module is further configured to generate at least one of a sorted list, a tree, or a vector and to determine, based on the scores, a selected state from among the initial state and the one or more secondary states as a display state of the tiles to be displayed on the user interface.

12. The system of claim 11, wherein deriving the one or more secondary states includes a hierarchical sequence of generating a child state for display of the tiles on the graphical user interface from a parent state for display of the tiles on the graphical user interface by shifting one or more tiles in the parent state;
wherein the one or more tiles of the parent state may be shifted in the graphical user interface one or more of four directions of up, down, left, and right to generate the child state.

13. The system of claim 11 or 12, wherein the state generator module is further configured to generate a state list that includes the initial state and the secondary states sorted in increasing order of their scores.

14. The system of claim 13, wherein generating the secondary states includes generating one or more child states for display of the tiles on the graphical user interface from a parent state for display of the tiles on the graphical user interface that is closest to a head of the state list and that has not been previously used for generating child states;
wherein the state generator module may be further configured to add the generated child states to the state list based on their scores.

15. A non-transitory computer readable medium storing a computer program, wherein the computer program, when executed by one or more computers, causes the one or more computers to execute a method for configuring a plurality of tiles representing graphical user interface objects displayed in a graphical user interface, the method comprising:

receiving an initial state of the tiles displayed on the graphical user interface, wherein the initial state includes two overlapping tiles;

deriving in multiple stages, via the one or more computer processors, one or more secondary states for display of the tiles on the graphical user interface by rear-ranging the tiles in the initial state, wherein new secondary states are generated using the initial state and existing secondary states;

calculating one or more scores for the initial state displayed on the graphical user interface and the secondary states for display of the tiles on the graphical user interface; and

determining, based on the scores, a selected state from among the initial state and the one or more secondary states as a display state of the tiles to be displayed on the user interface.

Drawing