WO2013106423A1

WO2013106423A1 - Method and apparatus for animating transitions between search results

Info

Publication number: WO2013106423A1
Application number: PCT/US2013/020820
Authority: WO
Inventors: Matthew K. Gray; Alison Cichowlas; Gregory H. PLESUR; Marcin K. Wichary; Thomas W. COLTHURST
Original assignee: Google Inc.
Priority date: 2012-01-10
Filing date: 2013-01-09
Publication date: 2013-07-18
Also published as: US20150143213A1; US8880992B2; US9922005B2; US20130179762A1

Abstract

The technology described relates to animated transitions between consecutive sets of search engine results.

Description

METHOD AND APPARATUS FOR ANIMATING TRANSITIONS BETWEEN SEARCH RESULTS

BACKGROUND

[0001] Consecutive web searches by a client replace the results of the old search query with the search results of the new search query. When the new search query includes a switch to a new search corpus, it can be unclear whether the new search results are related to the old search results. Similarly, when the new search query has a refinement of a query term - for example, a spelling correction, a new query term, a related query term, or other query refinement■ it is again unclear o w the refinement reorders or otherwise modifies the search results.

SUMMARY

[0002] The technology disclosed relates to a method of visually indicating relationships between different sets of search results. The different search results include a first plurality of search results responsive to a first search engine query from a client system, and a second plurality of search resulis responsive to a second search engine query from the client system,

[0003] In one implementation, a server sends instructions to the client system. The instructions are executable by the client system to indicate results common to the first plurality of search results and the second plurality of search results with an animated transition of the hyperlinks moving along paths having origins at positions of the hyperlinks in the first plurality of search results and destinations at positions of the hyperlinks in the second plurality of search results. An example of a result is a hyperlink to a hyperlinked Uniform Resource Locator.

[0004] In another implementation, the client system indicates the results common to the first plurality of search resul ts and the second plurality of search results with an animated transition of the hyperlinks moving along paths having origins at positions of the hyperlinks in the first plurality of search results and destinations at positions of the hyperlinks in the second plurality of search results. An example of a result is a hyperlink to a hyperlinked Uniform Resource Locator. An example of a client system includes a browser extension which indicates the results.

[0005] In yet another implementation, a no -tra itory computer readable medium has instructions stored thereon which, when executed by one or more computers, cause the one or more computers to perform operations to visually indicating relationships between the different sets of search results. The computer executable instructions indicate the results common to the first plurality of search results and the second plurality of search results with an animated transition of the hyperlinks moving along paths hav ing origins at positions of the hyperlinks in the first plurality of search results and destinations at positions of the hyperlinks in the second plurality of search results. An example of a result is a hyperlink to a hyperlinked Uniform Resource Locator.

[0006] Various embodiments include one or more of the following features, which can be performed by the client sy stem or the server or in combination,

[0007] The hyperlinked Uniform Resource Locators common to t e first plurality of search results and the second plurality of search results are identified. The identified hyperlinked Uniform Resource Locators are indicated by the animated transition.

[0008] Various hyperlinked Uniform Resource Locators are omitted from the animated transition, for example those that fail to refer to a distinct web document, and/or those that generate an additional plurality of search results.

[0009] The animated transition from the first plurality of search results to the second plurality of search results reduces visual discontinuity, for example, by changing a visual appearance of an animated element to match a destination hyperlink in the second plurality of search results prior to the animated element reaching the destination hyperlink.

[0010] The first search engine query and the second search engine query are directed at different search corpuses, and the animated transition indicates the hyperlinks to hyperlinked Uniform Resource Locators common to the different search corpuses.

[Οθΐί ] Comparison accuracy among hyperlinked Uniform Resource Locators of the first plurality of search results and the second plurality of search results is increased by removing parameters from the hyperlinked Uniform Resource Locators.

[0012] Within the first plurality of search results and within the second plurality of search results, multiple instances of a same hyperlinked Uniform Resource Locator are searched to select one of the multiple instances for the animated transition. This selection has various alternatives. For example, in the animated transition, a Document Object Model tree element enclosing the multiple instances of the same hyperlinked Uniform Resource Locator is animated. In another example, in response to finding a first Document Object Model tree element that encloses the multiple instances of the same hyperlinked Uniform Resource Locator and that also encloses a different hyperlinked Uniform Resource Locator, a second Document Object Model tree element at a lower level than the first Document Object Model tree element is animated. In a farther alternati v e, text-only instances of the same hyperlinked Uniform Resource Locator are favored over non-text-only instances of the same hyperlinked Uniform Resource Locator for use in the animated transition.

BRIEF DESCRIPTION OF THE DRAWINGS

[0013] Figure 1 is a block diagram of an example overall architecture, including a client system with a web browser that displays an animated transition and a search engine providing search engine results.

[0014] Figure 2 is an example process flow of animating transitions between search results.

[0015] Figure 3 is an example process flow of identifying transitionable elements in search results.

[0016] Figure 4 is an example process flow of merging transitionable elements.

[0017] Figures 5-7 are a series of screen shots showing an example of an animated transition between search engine results.

[0018] Figures 8-1 1 are another series of screen shots showing more examples of animated transitions between search engine results.

[0019] Figure 12 is a block diagram of a computer system configured for performing animated transitions between search engine results.

[0020] Figures 13 is a diagram of a computer readable memory with logic for performing animated transitions between search engine results.

DETAILED DESCRIPTIO

[0021] Figure 1 is a block diagram of an example overall architecture, including a client with a web browser and a search engine providing search engine results.

[0022] The client 1 10 has a web browser 1 15 that displays an animated transition. The client 1 10 sends first and second search queries 151 to a search engine 130. The search engine 130 returns search engine results 155, displayed at the client as search engine results of the first search query 121 and search engine results of the first search query 122. The search engine result animation 125 shows a transition between the sets of search engine results.

[0023] The underlying work supporting the animated transition can be performed at the client 1 10, the search engine 130 or other server 160, or a combination. The server 160 can send instructions to the client 1 10, for example precompiled Flash or

Javascript code, which when executed by the client 1 10 perform the animated transition. The client 1 10 can execute code, which can be the code sent from the server 160 or previously installed code, for example javascript code or a web browser extension. Details about the animated transitions are discussed below.

[0024] Figure 2 is an example process flow of animating transitions between search results. The order of this process flow is an example and can be reordered.

[0025] At 2.1 1 a first search query is sent from the client to a search engine. At 213 the first search engine results are received by the client and displayed. At 215 a second search query is sent from the client to the search engine. At 217 the second search engine results are received by the client.

[0026] The following parts of the process flow can be performed at the client, the server, or combination of the client and server. At 219 iransitionable elements are identified from the first and second search engine results. Transitionable elements are hyperlinks for the hyperlinked URLs, or Uniform Resource Locators, in the search engine results that are candidates for an animated transition between the first and second search engine results. The process of identifying candidate hyperlinked URLs is further discussed in connection with Figure 3.

[0027] Identifying a transitionable element is nontrivial, particularly for search results that are actually groupings of multiple individual results, in such cases, multiple transitionable elements are merged into a single transitionable element; at 221 transitionable elements from the hyperlinks to hyperlinked URLs that match each other within the first set of search results are merged, and transitionable elements from the hyperlinks to hyperlinked URLs that match each other within the second set search results are merged. For example, merging combines multiple URLs that are part of the same search result into a single transitionable element. An example of such merging is shown in Figures 5-7, discussed below. The process of merging transitionable elements is further discussed in connection with Figure 4. [0028] At 223 transitionable element URLs that match between the first and second sets of search results are identified. A subsequent animated transition visually indicates URLs that match between the older first set of search results and the newer second set of search results.

[0029] At 2.25 the animated transition is performed between the remaining transitionable element URLs that match between the first and second sets of search results. Styling elements of the hyperlinks are preserved to prevent visual discontinuity during the animated transition. To prevent a v isual discontinuity at the end of the visual animation, the animated original result is repl aced with a copy of the target result, before the original result has reached the target position. The animated target result continues until landing at the final position at the second set of search results. Because the animated target result matches the target result at the second set of search results, there is no visual discontinuity at the end of the animated transition. An example of such visual continuity is shown in Figures 8-11, discussed below. At 227 following the animated transition, the client displays the second set of search engine results.

[0030] Figure 3 is an example process flow of identifying transitionable elements in search results, providing more details about 219 in Figure 2.

[0031] The identification of transitionable elements that are candidates for an animated transition between the first and second search engine results, assists the subsequent process of identifying URLs that match between the first and second sets of search results. At 313 the hyperlinked URLs are omitted from being candidates for animated transition, if the hyperlinked URLs generate more search results, and/or the hyperlinked URLs fail to refer to a distinct web document. For example, selected CSS or Cascading Style Sheet classes are blacklisted. An example of a blacklisted CSS class is "gl", which indicates that the hyperlinked URL is a gray line link. At 315, extra parameters are removed from each hyperlinked URL, increasing comparison accuracy to identify matching URLs, resulting in "cleaned-up" URLs. The cleaned-up URL acts as a "key" which increases accurac of comparison with other cleaned-up URLs. At 317, cleaned-up URLs with a single hyperlink are identified. Such cleaned-up hyperlinked URLs are ready for matching between the first and second sets of search results. [0032] The process of Figure 3 is performed within the first set of search results, and within the second set of search results. In case there are multiple hyperlinks within the first set of search results for a cleaned- up URL, or there are multiple hyperlinks within the second set of search results for a cieaned-up URL, the merging process of Figure 4 is performed.

[0033] Figure 4 is an example process flow of merging transitionable elements when multiple transitionable elements have the same cleaned-up URL, providing more details about 22.1 in Figure 2. For example, a video search result contains at least two transitionable elements having the same cleaned-up URL - one containing a thumbnail of a frame from the video and one with the video's title. To identify the transitionable element for the animated transition, the lowest DOM (Document Object Model) element is identified containing both results. This lowest DOM element is deemed the transitionable element.

[0034] At 441, the DOM tree element that encloses the multiple copies of the same cleaned-up hyperlinked URL is found. At 443, if the enclosing DOM tree element does not enclose other hyperlinked URLs, then that enclosing DOM tree element is the transitionable element in the animated transition. At 445, if the enclosing DOM tree element does enclose other hyperlinked URLs, then a lower-level DOM tree element is the transitionable element in the animated transition. However, in this case there can be ties between lower-level DOM tree elements at the same tree level. At 447, to break such ties between cleaned-up URLs with multiple hyperlinked URLs, text-only hyperlinks are favored over non-text hyperlinks, and/or earlier appearing hyperlinks are favored over later appearing hyperlinks, or later appearing hyperlinks are favored over earlier appearing hyperlinks. The process of Figure 4 is performed within the first set of search results and within the second set of search results. Such merged and cleaned- up hyperlinked URLs are ready for matching between the first and second sets of search results.

[0035] Figures 5-7 are a series of screen shots showing an example of an animated transition between search engine results, when a user switches from an "Everything" search results page to "Videos".

[0036] Figure 5 is a screen shot of a first set of search engine results with

"Everything" selected as a search corpus. The video entitled "Coverage of Example News Event" is transitionable element 550, which is animated in this example of an animated transition. Transitionable element 550 is a DOM tree element that encloses the multiple references to the same hyperlinked URL; the same URL is hyperlinked to a video frame thumbnail and a text video title.

[0037] Figure 6 is a screen shot of an intermediate point of an animated transition from the first set of search engine results in Figure 5 to the second set of search engine results in Figure 7. The transitionable element 650 is at an intermediate point between the origin point in Figure 5 and the destination point in Figure 7. The first set of search engine results are remo ved by fading or without fading, and the animated transition occurs on a plain background. After the animated transition, the second set of search engine results fade in or appear without fading in.

[0038] Other examples of ways to replace the first set of search engine results with the second set of search engine results, in combination with the animated transition, include: replacing the first set of search engine results with the second set of search engine results and then performing the animated transition; performing a cross-fade between the first set of search engine results and the second set of search engine results while performing the animated transition; and leaving the first set of search engine results in place until the animated transition is complete, and then replacing the first set of search engine results with the second set of search engine results.

[0039] Figure 7 is a screen shot of the second set of search engine results that overlaps slightly with the first set, that includes transi ionable element 650. The second set of search engine results are responsive to a change in search corpus. Transitionable element 650 from Figure 6 has reached the destination point 750 of the example animated transition. Transitionable element 750 is also a DOM tree element which encloses the multiple copies of the same hyperlinked URL, including a video frame thumbnail and a text video title.

[0040] Figures 8-1 1 are another series of screen shots showing more examples of animated transitions between search engine results, when a user switches from an "Everything" search results page to "News". In this series, two animated transitions occur simultaneously.

[0041] Figure 8 is a screen shot of a first set of search engine results. The shown results are responsive to a first search query of a first search corpus. The hyperlink entitled "Locals affected by..." is transitionable element 860, which is the origin point of the path of a first animated transition of a hyperlink. The hyperlink entitled "News Blog - Example ..." is transitionable element 870, which is the origin point of the path a second animated transition of a hyperlink.

[0042] Figures 9 and 10 are sequential screen shots of intermediate points along the paths of animated transitions of hyperlinks from the first set of search engine results in Figure 8 to the second set of search engine results in Figure 1 1. Between Figures 9 and 10, in the first animated transition, animated original result 960 is replaced with an animated target result 1060. Between Figures 9 and 10, in the second animated transition, animated original result 970 is replaced with an animated target result 1070, Because the animated elements match the target results, there is no visual discontinuity at the conclusions of the animated transitions.

[0043] Figure 1 1 is a screen shot of a first set of search engine results. The shown results are responsive to a second search query of a second search corpus.

Transitionable element 860 is the destination point of the path of the first animated transition of a hyperlink. For the first animated transition, the source result "Locals affected by..." at example.com/aiiofhernewssite/local was in an animated transition to the target result "Locals affected by..." at example.com/anothernewssite/local.

[0044 ] Transitionable element 870 is the destination point of the path of the second animated transition of a hyperlink. For the second animated transition, the source result "News Blog - Example..." at example.com anewsblog html in Figure 8 was in an animated transition to the target result "Example News Event Updates..." at example.com localnewssite html in Figure 1 1.

[0045] Figure 12 is a block diagram of a computer system configured for performing animated transitions between search engine results.

[0046] Computer system 1210 typically includes at least one processor 1214 which communicates with a number of peripheral devices via bus subsystem 1212. These peripheral devices may include a storage subsystem 1224, comprising for example memory devices and a file storage subsystem, user interface input devices 1222, user interface output devices 1220, and a network interface subsystem 1216. The input and output devices allo w user interaction with computer system 1210. Network interface subsystem 1216 provides an interface to outside networks, including an interface to communication network 1218, and is coupled via communication network 1218 to corresponding interface devices in other computer systems. Communication network 1218 may comprise many interconnected computer systems and communication links. These communication links may be wireline links, optical links, wireless links, or any other mechanisms for communication of information. While in one embodiment, communication network 1218 is the Internet, in other embodiments, communication network 1218 may be any suitable computer network.

[0047] User interface input devices 12.22 may include a keyboard, pointing devices such as a mouse, trackball, touchpad, or graphics tablet, a scanner, a touchscreen incorporated into the display, audio input devices such as voice recognition systems, microphones, and other types of input devices. In general, use of the term "input device" is intended to include all possible types of devices and ways to input information into computer system 1210 or onto communication network 1218.

[0048] User interface output devices 1220 may include a display subsystem, a printer, a fax machine, or non-visual displays such as audio output devices. The display subsystem may include a cathode ray tube (CRT), a flat-panel device such as a liquid crystal display (LCD), a projection device, or some other mechanism for creating a visible image. The display subsystem may also provide non-visual display such as via audio output devices. In general, use of the term "output device" is intended to include all possible types of devices and ways to output information from computer system 1210 to the user or to another machine or computer system.

[0049] Storage subsystem 1224 stores the basic programming and data constructs that provide the functionality of some or all of the tools described herein, including the logic for performing animated transitions between search engine results. These software modules are generally executed by processor 1214 alone or in combination with other processors.

[0050] Memory used in the storage subsystem can include a number of memories including a main random access memory (RAM) for storage of instructions and data during program execution and a read only memory (RDM) in which fixed instructions are stored. A file storage subsystem can provide persistent storage for program and data files, and may include a hard disk drive, a floppy disk drive along with associated removable media, a CD-ROM drive, an optical drive, or removable media cartridges. The databases and modules implementing the functionality of certain embodiments may be stored by file storage subsystem in the storage subsystem 1224, or in other machines accessible by the processor. [0851] Bus subsystem 1212 provides a mechanism for letting the various components and subsystems of computer system 1210 communicate with each other as intended. Although bus subsystem 1212 is shown schematically as a single bus, alternative embodiments of the bus subsystem may use multiple busses.

[0052] Computer system 1210 can be of varying types including a personal computer, a portable computer, a workstation, a computer terminal, a network computer, a television, a mainframe, or any other data processing system or computing device. Due to the ever-changing nature of computers and networks, the description of computer system 1210 depicted in FIG, 12 is intended only as a specific example for purposes of illustrating example embodiments. Many other configurations of computer system 1210 are possible having more or less components than the computer system depicted in FIG. 12.

[0053] Figures 13 is a diagram of a computer readable memory with logic for performing animated transitions between search engine results in a computer readable memory 245, The memory 245 can comprise a medium for example associated with file storage subsystem 224, and/or with network interface subsystem 216, or can comprise a data storage medium in a separate device. The medium used for the computer readable memory 245 can be a non-transitory medium, such as a hard disk, a floppy disk, a CDROM, an integrated circuit memory device, an optical medium, and removable media cartridge. The logic 285 as described herein can also be embodied by data coded on a transitory medium, such as a radio communication channel.

[0054] While new technology is disclosed by reference to the preferred embodiments and examples detailed above, it is understood that these examples are intended in an illustrative rather than in a limiting sense.

[0055] It is contemplated that modifications and combinations will readily occur to those skilled in the art, which modifications and combinations will be within the spirit of the invention and the scope of the following claims.

Claims

1. A method of visually indicating relationships between different sets of search results including a first plurality of search results responsive to a first search engine query from a client system and a second plurality of search results responsive to a second search engine query from the client system, including:

a server sending instructions to the client system, the instructions executable by the client system to indicate hyperlinks to hyperlinked Uniform Resource Locators common to the first plurality of search results and the second plurality of search results with an animated transition of the hyperlinks moving along paths having origins at positions of the hyperlinks in the first plurality of search results and destinations at positions of the hyperlinks in the second plurality of search results.

2. The method of claim 1 , further comprising:

identifying the hyperlinked Uniform Resource Locators common to the first plurality of search results and the second plurality of search results.

3. The method of claim 1 , further comprising:

omitting, from the animated transition, one or more hyperlinked Uniform Resource Locators that fail to refer to a distinct web document.

4. The method of claim 1, further comprising:

omitting, from the animated transition, one or more hyperlinked Uniform Resource Locators that generate an additional plurality of search results.

5. The method of claim 1, wherein the animated transition from the first plurality of search results to the second plurality of search results reduces visual discontinuity by changing a visual appearance of an animated element to match a destination hyperlink in the second plurality of search results prior to the animated element reaching the destination hyperlink.

6. The method of claim 1 , wherein the first search engine query and the second search engine query are directed at different search corpuses, and the animated transition indicates the hyperlinks to hyperlinked Uniform Resource Locators common to the different search corpuses.

7. The method of claim 1, wherein identifying hyperlinked Uniform Resource Locators common to the first plurality of search results and the second plurality of search results, includes:

increasing accuracy of comparison among the hyperlinked Uniform Resource Locators by removing parameters from the hyperliiiked Uniform Resource Locators of the first plurality of search results and the second plurality of search results,

8. The method of claim 1, further including:

within the first plurality of search results and within the second plurality of search results, searching for multiple instances of a same hyperlinked Uniform

Resource Locator to select one of the multiple instances for the animated transition.

9. The method of claim 8, further including:

in the animated transition, animating a Document Object Model tree element enclosing the multiple instances of the same hyperlinked Uniform Resource Locator.

10. The method of claim 8, further including:

in response to finding a first Document Object Model tree element that encloses the multiple instances of the same hyperlinked Uniform Resource Locator and that also encloses a different hyperlinked Uniform Resource Locator, animating a second Document Object Model tree element at a lower level than the first Document Object Model tree element.

1 1. The method of claim 8, further including:

favoring text-only instances of the same hyperlinked Uniform Resource Locator over non-text-only instances of the same hyperlinked Uniform Resource Locator for use in the animated transition.

12. A method of visually indicating relationships between different sets of search results including a first plurality of search results responsive to a first search engine query from a client system and a second plurality of search results responsive to a second search engine query from the client system, including:

the client system indicating hyperlinks to the hyperlinked Uniform Resource Locators common to the first plurality of search results and the second plurality of search results with an animated transition of the hyperlinks moving along paths having origins at positions of the hyperlinks in the first plurality of search results and destinations at positions of the hyperlinks in the second plurality of search results.

13. The method of claim 12, further comprising:

14. The method of claim 12, further comprising:

15. The method of claim 12, further comprising:

16. The method of claim 12, wherein the animated transition from the first plurality of search results to the second plurality of search results reduces visual discontinuity by changing a visual appearance of an animated element to match a destination hyperlink in the second plurality of search results prior to the animated element reaching the destination hyperlink.

17. The method of claim 12, wherein the first search engine query and the second search engine query are directed at different search corpuses, and the animated transition indicates the hyperlinks to hyperlinked Uniform Resource Locators common to the different search corpuses.

18. The method of claim 12, wherein identifying hyperlinked Uniform Resource Locators common to the first plurality of search results and the second plurality of search results, includes:

increasing accuracy of comparison among the hyperlinked Uniform Resource Locators by removing parameters from the hyperlinked Uniform Resource Locators of the first plurality of search results and the second plurality of search results.

19. The method of claim 12, further including:

20. The method of claim 19, further including:

21 . The method of claim 19, further including:

in response to finding a first Document Object Model tree element that encloses the multiple instances of the same hyperlinked Uniform Resource Locator and that also encloses a different hyperlinked Uniform Resource Locator, animating a second

Document Object Model tree element at a lower level than the first Document Object Model tree element.

22. The method of claim 19, further including:

favoring text-only instances of the same hyperlinked Uniform Resource Locator over non-text-only instances of the same hyperlinked U niform Resource Locator for use in the animated transition.

23. A non- transitory computer readable medium has instructions stored thereon which, when executed by one or more computers, cause the one or more computers to perform operations visually indicating relationships between different sets of search results including a first plurality of search results responsive to a first search engine query from a client system and a second plurality of search results responsive to a second search engine query from the client system comprising:

computer executable instructions indicating the hyper linked Uniform Resource Locators common to the first plurality of search results and the second plurality of search results with an animated transition of the hyperlinks moving along paths having origins at positions of the hyperlinks in the first plurality of search results and destinations at positions of the hyperlinks in the second plurality of search results.