WO2001025956A2 - Graphical user interface - Google Patents

Graphical user interface Download PDF

Info

Publication number
WO2001025956A2
WO2001025956A2 PCT/US2000/027553 US0027553W WO0125956A2 WO 2001025956 A2 WO2001025956 A2 WO 2001025956A2 US 0027553 W US0027553 W US 0027553W WO 0125956 A2 WO0125956 A2 WO 0125956A2
Authority
WO
WIPO (PCT)
Prior art keywords
image
regions
menu
options
instructions
Prior art date
Application number
PCT/US2000/027553
Other languages
French (fr)
Other versions
WO2001025956A3 (en
Inventor
Robin Johnson
Mason Ham
Peter Strauss
Original Assignee
Sticky Networks, Inc.
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Sticky Networks, Inc. filed Critical Sticky Networks, Inc.
Priority to AU78628/00A priority Critical patent/AU7862800A/en
Publication of WO2001025956A2 publication Critical patent/WO2001025956A2/en
Publication of WO2001025956A3 publication Critical patent/WO2001025956A3/en

Links

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G06F3/0482Interaction with lists of selectable items, e.g. menus

Definitions

  • Networked computers such as computers attached to the Internet, pool a tremendous volume of information on a wide range of topics. Finding a particular needle of information in the Internet haystack, however, can sometimes challenge the patience of network users.
  • many network sites feature search engines that try to identify information relating to one or more keywords entered by a user. For example, to find information on apple picking, a user can submit the keywords "apple picking" to a search engine. Some search engines can identify hundreds of good matches for such a query. Sifting through the list of search engine matches, however, can take a very long time. Additionally, many of the matches identified by the search engine may be unrelated to the search intended. For example, instead of articles describing how to pick apples from a tree, some articles identified by the search engine may describe how to pick an AppleTM computer from a computer store.
  • the disclosure features methods, systems, and computer programs for use in distributing a graphical user interface over a network.
  • the graphical user interface can access information identifying an image, graphic regions of the image, and menu options corresponding to the image regions .
  • the graphical user interface displays the image, detects user movement of a cursor over one of the regions, and automatically displays a menu of the one or more options corresponding to the region.
  • the disclosure features methods, systems, and computer programs for constructing a graphical user interface. Aspects can feature receiving information from a user identifying at least one image, graphic regions of the image, and options corresponding to the regions.
  • aspects may also include providing instructions for causing a processor to access the image and options, display the image, detect movement of a cursor over one of the regions, and automatically display a menu of the options.
  • the disclosure features methods, systems, and computer programs for use with a graphical user interface. Aspects include receiving a request for menu options associated with a keyword from a client, accessing a database of menu options associated with different keywords, and sending the menu options associated with the requested keyword in the database to the client for display.
  • the disclosure features methods, systems, and computer programs for providing a graphical user interface that includes accessing information identifying regions of an image having associated keywords. After sending at least one of the keywords to a server and receiving menu options from the server in return, the image is displayed, positioning of a cursor over one of the regions is detected, and a menu of the options corresponding to the region is automatically displayed.
  • FIG. 1 to 6 are screenshots of a graphical user interface constructed to display a menu upon detecting cursor positioning over an image region.
  • FIG. 7 is a flow-chart of a process for displaying a menu upon detecting cursor positioning over an image region.
  • FIG. 8-12 are screenshots of a tool for constructing a graphical user interface.
  • FIG. 13 is a flow-chart of a process for constructing a graphical user interface.
  • FIG. 14-18 are diagrams of a system for providing a graphical user interface to a remote networked computer.
  • FIG. 19 is a flow-chart of a process for transmitting graphical user interface information to a remote networked computer.
  • FIG. 20 is a diagram of a keyword server that can share information between graphical user interfaces sharing a named element .
  • FIG. 21 is a diagram of information stored by a keyword server.
  • FIG. 22 is a screenshot of a keyword searching tool.
  • FIG. 23 is a flow-chart of a process for using information associated with a keyword.
  • FIGs . 1-6 show sample screen-shots of a graphical user interface that can ease users' searches for information on a network.
  • Each FIG. in the series features a web-browser display 100 of an image 102.
  • the image 102 may be encoded in a variety of formats for transmission over a network (e.g., JPEG (Joint Pictures Experts Group) format or GIF (Graphics Interchange Format) ) .
  • the image 102 need not be static, but may feature animation.
  • the image 102 depicts a kitchen having a variety of kitchen appliances and furniture .
  • the graphical user interface includes instructions that enable a user to obtain information about some aspect of the kitchen by merely positioning a cursor 106 over a picture of an item of interest. For example, to find more information about refrigerators, a user need only move the cursor 106 over the image's 102 depiction of a refrigerator.
  • the graphical user interface can, thus, change the process of searching for information from the often frustrating task of guessing keywords to a more intuitive approach akin to pointing to items in a store showcase.
  • the graphical user interface includes instructions and/or data that identify different image regions.
  • a region 110 maps the image's
  • a bounding rectangle 110 highlights the region 110.
  • the graphical user interface 110 automatically "pops-up" a menu 112 of options 114, 116 associated with the region 110. That is, the user need only move the cursor over the region and need not select the region with a mouse button click or other selection mechanism. As shown, positioning the cursor 106 over the dishwasher region 110 causes the graphical user interface to display a menu 112 of options
  • the menu 112 options include a "mini-banner" advertisement 114 for a particular dishwashing vendor. Selecting the advertisement 114 (e.g., positioning the cursor 106 over the advertisement 114 and clicking a mouse button) can cause a web-browser to navigate to a URI (Universal Resource Indicator) associated with the advertisement 114.
  • URI Universal Resource Indicator
  • the "Kenmore” advertisement 114 may transport a user to a "Kenmore” on-line store (e.g., "www. sears . com/kenmore/ dishwashers") .
  • the menu 112 displayed may be a hierarchical menu having menu options 118 nested within other menu options. That is, selecting a menu 112 option 116 may reveal or conceal other options 118. For example, selecting the "Shop" menu option caused the menu 112 to reveal choices for particular vendors 118.
  • the hierarchical organization enables a user to quickly navigate to information of interest.
  • the menu may show items in a non- hierarchical flat list, for example, when few menu options exist, .
  • options 118 may be links to content at other network computers.
  • the "Brand Master List" link shown in FIG. 3 is a hypertext link that encodes a URI (Universal Resource Indicator) of a web-page provided by another network computer. Selecting a link 118 can cause the graphical user interface 110 to initiate opening of an additional browser window displaying the contents of the link. By opening an additional window, the user can have quick, continuous access to the image 102 to navigate to other related topics .
  • URI Universal Resource Indicator
  • moving the cursor 106 about the image 112 can reveal other image 112 regions 120a, 120b, 120c having corresponding menu 122 options 126, 128.
  • a user can visually identify different goods, services, and/or information accessible via the interface.
  • This visual navigation can reduce problems associated with keyword searching. For example, instead of trying to determine whether a toaster is identified by keywords of "kitchen appliances" or "countertop appliances” , the user can visually identify and position the cursor over the toaster 120b in the image 102 and select from the displayed menu options.
  • regions 120a, 120b, 120c corresponding to a particular menu 122 need not be contiguous. Additionally, though shown as rectangular, regions may take on a variety of shapes such as other geometric shapes (e.g., circle or polygon) or irregular shapes .
  • the interface may feature more than one image 130.
  • the interface may show a close-up image 130 of countertop appliances.
  • the more detailed countertop image 130 may include one or more different regions (e.g., toaster 132) associated with corresponding menus 134.
  • menu options 144 need not link to a vendor, but may instead link to other information sources such as network bulletin boards, chat rooms discussing a depicted topic, and so forth. By packaging these information sources along with links to vendors, users can both research and order items by interacting with the same user interface.
  • a site offering the graphical user interface can provide a convenient, centralized access point for users interested in potentially related items.
  • FIGs. 1-6 in addition to the images 102, 130 displayed, the user interface may display a listing of accessible information.
  • FIGs. 1-6 feature a hierarchical tree 104. Nodes in the tree correspond to different images 102, 130, menu options, and/or image regions.
  • the "Dishwasher" node 108 corresponds to the dishwasher region 110 in the image 102.
  • the user may navigate through interface options via cursor movement over an image 102, 130 or by interacting with the tree 104. Though a useful feature, the text-oriented tree 104 display need not be displayed to take advantage of techniques described herein.
  • depiction of the tree 104 and images 102, 130 may be "synchronized". For example, moving a cursor on an image region causes highlighting of tree nodes associated with the region. Similarly, selecting a tree node can cause display of a menu for the region associated with the node.
  • the user interface also alters the level of tree 104 detail presented based on user interaction with the image 102 and menus. For example, selecting "Countertop
  • FIG. 4 caused a corresponding expansion of the tree 104 in FIG. 5. That is, the tree 104 shows additional menu options related to countertop appliances.
  • FIGs. 1-6 illustrate an intuitive, user- friendly interface that enables a user to find information of value by quick visual inspection of an image.
  • the techniques can enable a network site to retain users for extended periods of time and encourages repeat visits. For example, a user may return time and time again to a graphical user interface featuring kitchen items during a kitchen remodeling project.
  • the techniques also offer a method of raising revenue. For example, a site may receive fees from vendors wanting to supply advertising banners or links as options in the different menus. Such opportunities may prove particularly valuable to vendors since users navigating to a particular menu represent a highly targeted advertising population. Additionally, the graphical user interface 100 may include instructions that track the interface's and user's activity.
  • the interface 100 may identify when graphical user interface 100 instructions (e.g., an applet) begin execution, when tree information is received, when the interface has completed painting an image 102, 130, when a region becomes active (e.g., when a user positions the cursor 106 over the region) , when a user selects a menu option, when a user selects a link to content at another networked computer, when the user interface finishes painting advertisements in the web-browser window, when the interface terminates, and so forth.
  • graphical user interface designer/provider permit a graphical user interface designer/provider to identify features that succeed in attracting user interest. Such feedback permits a designer to revise the graphical user interface to increase the usefulness of the interface to users. Additionally, nodes/images receiving high traffic can be tracked and, potentially, sold at a premium.
  • graphical user interfaces may be devoted to research topics, course descriptions, and so forth.
  • menu options may be grouped as a "tutorial".
  • a first parent node of an interface on faucet repair may be "STEP ONE: Assembling Materials” while a second parent node may be "STEP TWO: Disconnecting a Water Source”. Children of such nodes may break down each step into sub-options.
  • the site www.stickynetworks.com provides a wide variety of graphical user interfaces directed to a wide variety of topics using these techniques. It should be noted that while FIGs.
  • 1-6 illustrate the interface as occupying an entire web-browser window 100
  • different interfaces may consume different amounts of screen real estate. That is, an interface display can be flexibly positioned, sized, and oriented. Additionally, the interface may co-exist with other window 100 contents. That is, the interface may occupy the space of a banner within a larger set of content .
  • graphical user interface instructions 150 detect 152 cursor positioning over a region of an image.
  • the instructions may compare the screen coordinates of a cursor's "hot spot" (e.g., the end point of a cursor arrow) and the coordinates of different defined regions.
  • the instructions may take advantage of higher level operations such as handling a Java MOUSE_OVER event.
  • the interface Upon detecting 152 the cursor's positioning over a defined region, the interface overlays 154 the image with a menu of options associated with the region. As shown in FIGs. 1-6, the menu can overlap the corresponding region, at least in part. While not a strict requirement, overlap with the region can more clearly convey the association of a menu with a particular region.
  • the menu can adjust positioning based on interface display size and the location of a particular region. Movement outside the bounds of the menu and/or region may cause the interface to remove display of the menu.
  • the graphical user interface may alert users to new or special items.
  • the interface may depict new or special regions, pictures, or menu options differently than other regions or items. That is, a new or special items may feature a distinctive "new item” or "special” graphic nearby or may be displayed in a manner (e.g., color, outline, animation, blinking, and so forth) distinguishing the items from others and catching users' attention.
  • the display of new and special items may be "hard-coded" or may be determined dynamically, for example, by storing and retrieving cookies that identify items a user has previously seen or purchased.
  • the graphical user interface instructions may be implemented using one or more of a variety of different network programming techniques.
  • the graphical user interface may incorporate JavaScript, applets, and so forth.
  • FIGs. 8 to 12 illustrate a tool that enables a user to quickly construct a graphical user interface featuring the "pop-up" menus of FIGs. 1-7 for different image regions.
  • the tool features a graphical user interface 200 that enables a user to define nodes 206 in a navigation tree (e.g., the tree 104 shown in FIGs. 1 to 6) .
  • the tool enables a user to associate an image 202 with a particular node 206. For example, as shown, a user has associated an image 202 of seed packets with the "Herb Garden" tree node. The resulting user interface will display the seed packet image 202 when the user navigates to the "Herb Garden" node. Since the "Herb Garden" node represents the root node, the constructed user interface will initially display the seed packet image 202.
  • the tool enables a designer to both define a region 208 of an image 202 and associate the region 208 with a tree node 206.
  • a designer has used a palette tool 212 to "draw" an image region 208.
  • the palette tool 212 eases the task of defining the coordinates bounding the region.
  • the tool also enables a user to associate a region 208 with a tree 206 node. For example, a designer can select a node for the region or drag-and-drop the region onto a particular tree node.
  • the user interface produced by the tool will detect the cursors positioning over the region and display menu options or images associated with that node.
  • Menu options for a particular tree 206 node can be determined from the tree 206 structure.
  • the "Resources" node has several children 208.
  • the child nodes are links to content at other network computers.
  • the tool enables a designer to define links by specifying the title of a link and the linking information (e.g., a URI) .
  • a menu for the "Resources" node will include these children 208 as menu options.
  • a designer can organize the links into different categories (e.g., nest the links in folders) .
  • the tool features a "Categories” 230 pane that enables a designer to assign links and other menu options to categories on an application wide basis. That is, links associated with one or more tree 206 nodes may be assigned to one or more of the categories (depicted as folders in FIG. 12) . This enables a designer to centrally organize a large number of options.
  • the user interface produced by the tool can generate a menu by identifying child links of a tree 206 node and displaying the categories of the child links as menu options. For example, in FIG. 11, the "Resources" node included a link "Garden.com". In FIG. 12, a designer placed the "Garden.com” link in the "Websites" category. Thus, the user interface constructed by the tool will display a menu including a "Websites" parent option that includes "Garden.com” as a child.
  • the tool receives identification 252 of at least one image, identification 254 of at least one region of the image, and identification 256 of menu options corresponding to the region. After receiving this information, the tool can output instructions and/or data for a graphical user interface.
  • FIGs. 14-18 illustrate a system for providing a graphical user interface featuring the "pop-up" menus shown in FIGs. 1-6 to remote computers 418 over a network 412. As shown in FIG. 14, after the creation tool 402 receives information from a designer specifying a graphical user interface (see FIGs.
  • the creation tool 402 transmits a description of the graphical user interface (e.g., a description of a tree, associated images and defined image regions, and so forth) to a database 404.
  • a description of the graphical user interface e.g., a description of a tree, associated images and defined image regions, and so forth
  • the database 404 may reside on a remote server 410.
  • a single server 410 may receive information for designed graphical user interfaces from different copies of the creation tool 402 operated at different network locations.
  • the data transmitted by the creation tool 402 may be formatted in a variety of ways.
  • the data may be stored as XML (Extensible Markup Language) instructions that define a tree's structure, images, image regions, menu content (e.g., links and categories), and other information.
  • XML is an example of SGML (Standard Generalized Markup Language) .
  • a networked computer 416 may store a web-page 414 (e.g., HTML (HyperText Markup Language) instructions) that refers to a particular set of graphical user interface information (e.g., a tree) stored on the server 410.
  • the web-page 414 may include a reference to an applet 408 provided by the server 410 and can specify a particular user interface (e.g., a tree) by an applet parameter (e.g., "garden").
  • the applet 408 includes instructions (e.g., Java instructions) that retrieve the specified tree information from the tree database 404 on the server 410.
  • the browser 418 receives a copy of the web-page 414 stored at the URI.
  • the browser requests a copy of the applet 408 referred to by the web-page 414.
  • the browser begins executing/interpreting the downloaded applet 408 instructions.
  • the applet 408 instructions query a servlet 406 on the server 410 for a description of the tree specified by the web-page. After receiving the tree description, the applet can provide the graphical user interface described in conjunction with FIGs. 1-7.
  • the applet 408 may transmit tracking information to the server for storage in a database. Such transmission may occur as each tracked event occurs. Alternatively, the applet 408 may collect tracking information for batched transmission. Tracking information may include additional information such as the IP (Internet Protocol) address of the client 418 receiving the graphical user interface, an identifier of the tree presented, and so forth.
  • FIG. 19 shows a method 450 for providing a graphical user interface. Again, a database stores 454 a tree description specified 452 by a graphical user interface designer. Thereafter, when a user navigates a browser to a URI offering the graphical user interface, the browser downloads 456 an applet which in turn queries 458 the database for the specified tree description.
  • IP Internet Protocol
  • the applet detects the positioning of the cursor over different image regions defined and presents 460 the corresponding menus .
  • the system described in FIGs. 14-19 is merely illustrative and a wide variety of other implementations are possible.
  • the creation tool can simply generate a single "hard coded" applet for a tree that includes all necessary information. That is, an applet (or other instructions) need not separate the tree data from the instructions as shown in FIGs. 14-18.
  • FIG. 20 shows a graphical user interface 510a depicting items in a kitchen and a graphical user interface 510b depicting items in a bathroom.
  • the graphical user interfaces 510a, 510b may reside at different web-sites and may be used by a large number of clients. As shown, both interfaces 510a, 510b have menus associated with defined regions corresponding to sinks. Additionally, both associate the keyword "sink" with the region. For example, both may include a tree node named "sink" or otherwise associate the keyword with the node or region.
  • a keyword server 500 can take advantage of keyword commonality between elements of graphical user interfaces 510a, 510b in a variety of ways.
  • the keyword server 500 includes a keyword database 502 that stores entries 504a, 504b for different keywords.
  • the term "keyword” does not imply a single word, but may actually refer to multiple words.
  • the keywords 504a, 504b in the database correspond to keywords of the one or more graphical user interfaces.
  • the keyword may correspond to a keyword associated with a tree node or image region.
  • the keyword database 502 may store information identifying each graphical user interface having a particular named element.
  • the database 502 can store an identifier for the graphical user interface. Such an identifier may identify a particular set of tree node information in an implementation using the architecture shown in FIGs. 14-18.
  • the database may also store information identifying different advertisers. For example, advertisers may purchase advertising rights to a particular keyword. These advertisers may submit an image and/or URI 508 for a particular keyword 504a in the database 502. For example, as shown, "Black and Decker" paid for the rights to the keyword "sink”. More than one advertiser may purchase a keyword. For advertisers paying lesser amounts, their advertisements may be used less often or displayed less prominently.
  • the keyword information stored in the server database may be accessed by different graphical user interfaces running on different clients. For example, as shown, graphical user interfaces 510a, 510b both include a region corresponding to a sink and have a node named "sink" .
  • both have retrieved a banner ad (e.g., an image and associated URI) from the server keyword database upon a user's positioning of a cursor over the, respective, "sink” regions.
  • the graphical user interface instructions package the retrieved information in the menu displayed.
  • the keyword database 502 thus, enables advertisers to have their advertisements featured in a number of different graphical user interfaces accessible at different web-sites by storing data in a, potentially, centralized server. Such a scheme can have the advantage that it does not require that the advertisers have knowledge of the graphical user interfaces using a particular keyword.
  • the graphical user interface can also retrieve links 516 to other graphical user interfaces 516 from the keyword database 508.
  • a menu could include a patent menu option of "> Other Related Sites" having children links to other user interfaces 506 featuring elements associated with a keyword. Linking together different graphical user interfaces can enable a web-surfer to navigate to sites all over the Internet using the same visually intuitive style of user interaction.
  • the keyword database can also provide listings of different graphical user interfaces available on a network that feature a particular keyword.
  • a searching tool can retrieve a list of different graphical user interfaces having image regions or nodes named with particular keywords.
  • a web- page 518 may feature a form that accepts a search term 520, accesses the keyword database 508, and displays user interfaces stored for the search term.
  • the searching tool can enable a user to quickly find graphical user interfaces related to a particular item or topic that feature the "popup" menus .
  • keyword entry information may be stored in a manner accessible to search engine spiders (e.g., as a HTML header). Further, the keyword entry information may be sent to traditional search engines such as YahooTM or LycosTM for inclusion in their search engine databases.
  • FIG. 23 shows a process for using a keyword database.
  • a server receives 522 keywords associated with different graphical user interface elements.
  • the creation tool described in conjunction with FIGs. 8-12 may send the server a comprehensive list of keywords featured in a newly defined graphical user interface (e.g., a list of the tree node names) .
  • the server can create additional keyword entries.
  • the server can add the constructed graphical user interface to a list of other graphical user interfaces featuring the keyword.
  • advertisers may submit 526 advertising information (e.g., images and/or links) for association with a keyword. Again, this advertising can appear as a banner in a menu.
  • advertising information e.g., images and/or links
  • the information stored for a keyword may be retrieved 528 by graphical user interface instructions for incorporation 530 into a menu.
  • the applet shown in FIGs. 14-18 may dynamically query the keyword server when the applet begins running.
  • the keyword information may be hard coded by a creation tool during graphical user interface construction.
  • download menu options from the server 510 are possible.
  • the keyword database 510 may be stored on (or accessible to) the same server as the stored node information in FIGs. 14-18.
  • the graphical user interface may be presented by other client programs having network access.
  • HTML instructions for a graphical user interface may be included in an e-mail message.
  • Some e-mail packages, such as Microsoft ® Outlook can process the HTML instructions and present the user interface.
  • the graphical user interface may be transmitted using HTTP (HyperText transfer protocol) messages in response to an HTTP request .
  • HTTP HyperText transfer protocol
  • the techniques are implemented in computer programs executing on programmable computers that each include a processor, a storage medium readable by the processor (including volatile and non-volatile memory and/or storage elements) , at least one input device, and one or more output devices.
  • Each program is preferably implemented in high level procedural or object oriented programming language to communicate with a computer system.
  • the programs can be implemented in assembly or machine language, if desired. In any case the language may be compiled or interpreted language.
  • Each such computer program is preferably stored on a storage medium or device (e.g., CD-ROM, hard disk, or magnetic disk) that is readable by a general or special purpose programmable computer for configuring and operating the computer when the storage medium or device is read by the computer to perform the procedures described herein.
  • a storage medium or device e.g., CD-ROM, hard disk, or magnetic disk
  • the system may also be considered to be implemented as a computer-readable storage medium, configured with a computer program, where the storage medium so configured causes a computer to operate in a specific and predefined manner.

Abstract

Methods, systems, and computer programs for use in distributing a graphical user interface over a network. The graphical user interface can access information identifying an image, graphic regions of the image, and menu options corresponding to the image regions. The graphical user interface displays the image, detects user movement of a cursor over one of the regions, and automatically displays a menu of the corresponding to the region.

Description

GRAPHICAL USER INTERFACE
Reference to Related Applications This application claims priority to U.S Provisional Application Serial No. 60/157,893, filed October 6, 1999, entitled "PUBLISHING APPARATUS AND METHOD", which is incorporated by reference herein in its entirety.
Background
Networked computers, such as computers attached to the Internet, pool a tremendous volume of information on a wide range of topics. Finding a particular needle of information in the Internet haystack, however, can sometimes challenge the patience of network users.
To help users find information of interest, many network sites feature search engines that try to identify information relating to one or more keywords entered by a user. For example, to find information on apple picking, a user can submit the keywords "apple picking" to a search engine. Some search engines can identify hundreds of good matches for such a query. Sifting through the list of search engine matches, however, can take a very long time. Additionally, many of the matches identified by the search engine may be unrelated to the search intended. For example, instead of articles describing how to pick apples from a tree, some articles identified by the search engine may describe how to pick an Apple™ computer from a computer store.
Summary
In general, in one aspect, the disclosure features methods, systems, and computer programs for use in distributing a graphical user interface over a network. The graphical user interface can access information identifying an image, graphic regions of the image, and menu options corresponding to the image regions . The graphical user interface displays the image, detects user movement of a cursor over one of the regions, and automatically displays a menu of the one or more options corresponding to the region. In general, in another aspect, the disclosure features methods, systems, and computer programs for constructing a graphical user interface. Aspects can feature receiving information from a user identifying at least one image, graphic regions of the image, and options corresponding to the regions. Aspects may also include providing instructions for causing a processor to access the image and options, display the image, detect movement of a cursor over one of the regions, and automatically display a menu of the options. In general, in another aspect, the disclosure features methods, systems, and computer programs for use with a graphical user interface. Aspects include receiving a request for menu options associated with a keyword from a client, accessing a database of menu options associated with different keywords, and sending the menu options associated with the requested keyword in the database to the client for display.
In general, in another aspect, the disclosure features methods, systems, and computer programs for providing a graphical user interface that includes accessing information identifying regions of an image having associated keywords. After sending at least one of the keywords to a server and receiving menu options from the server in return, the image is displayed, positioning of a cursor over one of the regions is detected, and a menu of the options corresponding to the region is automatically displayed.
Advantages will become apparent in view of the following description, including the figures and the claims. Brief Description of the Drawings
FIG. 1 to 6 are screenshots of a graphical user interface constructed to display a menu upon detecting cursor positioning over an image region. FIG. 7 is a flow-chart of a process for displaying a menu upon detecting cursor positioning over an image region.
FIG. 8-12 are screenshots of a tool for constructing a graphical user interface.
FIG. 13 is a flow-chart of a process for constructing a graphical user interface.
FIG. 14-18 are diagrams of a system for providing a graphical user interface to a remote networked computer.
FIG. 19 is a flow-chart of a process for transmitting graphical user interface information to a remote networked computer.
FIG. 20 is a diagram of a keyword server that can share information between graphical user interfaces sharing a named element .
FIG. 21 is a diagram of information stored by a keyword server.
FIG. 22 is a screenshot of a keyword searching tool.
FIG. 23 is a flow-chart of a process for using information associated with a keyword.
Detailed Description
Graphical User Interface
FIGs . 1-6 show sample screen-shots of a graphical user interface that can ease users' searches for information on a network. Each FIG. in the series features a web-browser display 100 of an image 102. The image 102 may be encoded in a variety of formats for transmission over a network (e.g., JPEG (Joint Pictures Experts Group) format or GIF (Graphics Interchange Format) ) . The image 102 need not be static, but may feature animation. As shown in FIG. 1, the image 102 depicts a kitchen having a variety of kitchen appliances and furniture .
The graphical user interface includes instructions that enable a user to obtain information about some aspect of the kitchen by merely positioning a cursor 106 over a picture of an item of interest. For example, to find more information about refrigerators, a user need only move the cursor 106 over the image's 102 depiction of a refrigerator. The graphical user interface can, thus, change the process of searching for information from the often frustrating task of guessing keywords to a more intuitive approach akin to pointing to items in a store showcase.
As shown in FIG. 2, the graphical user interface includes instructions and/or data that identify different image regions. For example, a region 110 maps the image's
102 depiction of a kitchen dishwasher. When a user positions a cursor 106 within the region 110, a bounding rectangle 110 highlights the region 110. In addition to the bounding rectangle 110, the graphical user interface 110 automatically "pops-up" a menu 112 of options 114, 116 associated with the region 110. That is, the user need only move the cursor over the region and need not select the region with a mouse button click or other selection mechanism. As shown, positioning the cursor 106 over the dishwasher region 110 causes the graphical user interface to display a menu 112 of options
114, 116 that can provide information about dishwashers. As shown, the menu 112 options include a "mini-banner" advertisement 114 for a particular dishwashing vendor. Selecting the advertisement 114 (e.g., positioning the cursor 106 over the advertisement 114 and clicking a mouse button) can cause a web-browser to navigate to a URI (Universal Resource Indicator) associated with the advertisement 114. For example, the "Kenmore" advertisement 114 may transport a user to a "Kenmore" on-line store (e.g., "www. sears . com/kenmore/ dishwashers") .
As shown in FIG. 3, the menu 112 displayed may be a hierarchical menu having menu options 118 nested within other menu options. That is, selecting a menu 112 option 116 may reveal or conceal other options 118. For example, selecting the "Shop" menu option caused the menu 112 to reveal choices for particular vendors 118. The hierarchical organization enables a user to quickly navigate to information of interest. Alternatively, the menu may show items in a non- hierarchical flat list, for example, when few menu options exist, .
As shown, options 118 may be links to content at other network computers. For example, the "Brand Master List" link shown in FIG. 3, is a hypertext link that encodes a URI (Universal Resource Indicator) of a web-page provided by another network computer. Selecting a link 118 can cause the graphical user interface 110 to initiate opening of an additional browser window displaying the contents of the link. By opening an additional window, the user can have quick, continuous access to the image 102 to navigate to other related topics .
As shown in FIG. 4, moving the cursor 106 about the image 112 can reveal other image 112 regions 120a, 120b, 120c having corresponding menu 122 options 126, 128. Thus, a user can visually identify different goods, services, and/or information accessible via the interface. This visual navigation can reduce problems associated with keyword searching. For example, instead of trying to determine whether a toaster is identified by keywords of "kitchen appliances" or "countertop appliances" , the user can visually identify and position the cursor over the toaster 120b in the image 102 and select from the displayed menu options. As shown in FIG. 4, regions 120a, 120b, 120c corresponding to a particular menu 122 need not be contiguous. Additionally, though shown as rectangular, regions may take on a variety of shapes such as other geometric shapes (e.g., circle or polygon) or irregular shapes .
As shown in FIG. 5, the interface may feature more than one image 130. For example, as shown, after selecting "Countertop Appliances" from the menu of FIG. 4, the interface may show a close-up image 130 of countertop appliances. Again, like the original kitchen image (see 102 in FIGs . 1-4), the more detailed countertop image 130 may include one or more different regions (e.g., toaster 132) associated with corresponding menus 134. As shown in FIG. 6, menu options 144 need not link to a vendor, but may instead link to other information sources such as network bulletin boards, chat rooms discussing a depicted topic, and so forth. By packaging these information sources along with links to vendors, users can both research and order items by interacting with the same user interface. Thus, a site offering the graphical user interface can provide a convenient, centralized access point for users interested in potentially related items.
As shown in FIGs. 1-6, in addition to the images 102, 130 displayed, the user interface may display a listing of accessible information. For example, FIGs. 1-6 feature a hierarchical tree 104. Nodes in the tree correspond to different images 102, 130, menu options, and/or image regions. For example, in FIG. 2, the "Dishwasher" node 108 corresponds to the dishwasher region 110 in the image 102. The user may navigate through interface options via cursor movement over an image 102, 130 or by interacting with the tree 104. Though a useful feature, the text-oriented tree 104 display need not be displayed to take advantage of techniques described herein.
As shown in FIGs. 1-6, depiction of the tree 104 and images 102, 130 may be "synchronized". For example, moving a cursor on an image region causes highlighting of tree nodes associated with the region. Similarly, selecting a tree node can cause display of a menu for the region associated with the node. The user interface also alters the level of tree 104 detail presented based on user interaction with the image 102 and menus. For example, selecting "Countertop
Appliances" in FIG. 4 caused a corresponding expansion of the tree 104 in FIG. 5. That is, the tree 104 shows additional menu options related to countertop appliances.
As described above, FIGs. 1-6 illustrate an intuitive, user- friendly interface that enables a user to find information of value by quick visual inspection of an image. The techniques can enable a network site to retain users for extended periods of time and encourages repeat visits. For example, a user may return time and time again to a graphical user interface featuring kitchen items during a kitchen remodeling project.
The techniques also offer a method of raising revenue. For example, a site may receive fees from vendors wanting to supply advertising banners or links as options in the different menus. Such opportunities may prove particularly valuable to vendors since users navigating to a particular menu represent a highly targeted advertising population. Additionally, the graphical user interface 100 may include instructions that track the interface's and user's activity. For example, the interface 100 may identify when graphical user interface 100 instructions (e.g., an applet) begin execution, when tree information is received, when the interface has completed painting an image 102, 130, when a region becomes active (e.g., when a user positions the cursor 106 over the region) , when a user selects a menu option, when a user selects a link to content at another networked computer, when the user interface finishes painting advertisements in the web-browser window, when the interface terminates, and so forth. These and other activity metrics permit a graphical user interface designer/provider to identify features that succeed in attracting user interest. Such feedback permits a designer to revise the graphical user interface to increase the usefulness of the interface to users. Additionally, nodes/images receiving high traffic can be tracked and, potentially, sold at a premium.
While generally described above as a tool for e- commerce, the content of graphical user interfaces using these techniques need not be so limited. For example, graphical user interfaces may be devoted to research topics, course descriptions, and so forth. Additionally, the menu options may be grouped as a "tutorial". For example, a first parent node of an interface on faucet repair may be "STEP ONE: Assembling Materials" while a second parent node may be "STEP TWO: Disconnecting a Water Source". Children of such nodes may break down each step into sub-options. The site www.stickynetworks.com provides a wide variety of graphical user interfaces directed to a wide variety of topics using these techniques. It should be noted that while FIGs. 1-6 illustrate the interface as occupying an entire web-browser window 100, different interfaces may consume different amounts of screen real estate. That is, an interface display can be flexibly positioned, sized, and oriented. Additionally, the interface may co-exist with other window 100 contents. That is, the interface may occupy the space of a banner within a larger set of content .
In summary, as shown in FIG. 7, graphical user interface instructions 150 detect 152 cursor positioning over a region of an image. For example, the instructions may compare the screen coordinates of a cursor's "hot spot" (e.g., the end point of a cursor arrow) and the coordinates of different defined regions. Alternatively, the instructions may take advantage of higher level operations such as handling a Java MOUSE_OVER event.
Upon detecting 152 the cursor's positioning over a defined region, the interface overlays 154 the image with a menu of options associated with the region. As shown in FIGs. 1-6, the menu can overlap the corresponding region, at least in part. While not a strict requirement, overlap with the region can more clearly convey the association of a menu with a particular region. The menu can adjust positioning based on interface display size and the location of a particular region. Movement outside the bounds of the menu and/or region may cause the interface to remove display of the menu.
The graphical user interface may alert users to new or special items. For example, the interface may depict new or special regions, pictures, or menu options differently than other regions or items. That is, a new or special items may feature a distinctive "new item" or "special" graphic nearby or may be displayed in a manner (e.g., color, outline, animation, blinking, and so forth) distinguishing the items from others and catching users' attention. The display of new and special items may be "hard-coded" or may be determined dynamically, for example, by storing and retrieving cookies that identify items a user has previously seen or purchased. As described below, the graphical user interface instructions may be implemented using one or more of a variety of different network programming techniques. For example, the graphical user interface may incorporate JavaScript, applets, and so forth. Graphical User Interface Construction Tool
FIGs. 8 to 12 illustrate a tool that enables a user to quickly construct a graphical user interface featuring the "pop-up" menus of FIGs. 1-7 for different image regions. As shown in FIG. 8, the tool features a graphical user interface 200 that enables a user to define nodes 206 in a navigation tree (e.g., the tree 104 shown in FIGs. 1 to 6) .
In addition to defining different nodes 206 and, potentially, their nesting, the tool enables a user to associate an image 202 with a particular node 206. For example, as shown, a user has associated an image 202 of seed packets with the "Herb Garden" tree node. The resulting user interface will display the seed packet image 202 when the user navigates to the "Herb Garden" node. Since the "Herb Garden" node represents the root node, the constructed user interface will initially display the seed packet image 202.
As shown in FIGs. 9 and 10, the tool enables a designer to both define a region 208 of an image 202 and associate the region 208 with a tree node 206. For example, as shown in FIG. 9, a designer has used a palette tool 212 to "draw" an image region 208. The palette tool 212 eases the task of defining the coordinates bounding the region.
As shown in FIG. 10, the tool also enables a user to associate a region 208 with a tree 206 node. For example, a designer can select a node for the region or drag-and-drop the region onto a particular tree node. Thus, the user interface produced by the tool will detect the cursors positioning over the region and display menu options or images associated with that node.
Menu options for a particular tree 206 node can be determined from the tree 206 structure. For example, as shown in FIG. 11, the "Resources" node has several children 208. In this case, the child nodes are links to content at other network computers. The tool enables a designer to define links by specifying the title of a link and the linking information (e.g., a URI) . A menu for the "Resources" node will include these children 208 as menu options. To create a hierarchical menu, a designer can organize the links into different categories (e.g., nest the links in folders) .
Alternatively, as shown in FIG. 12, the tool features a "Categories" 230 pane that enables a designer to assign links and other menu options to categories on an application wide basis. That is, links associated with one or more tree 206 nodes may be assigned to one or more of the categories (depicted as folders in FIG. 12) . This enables a designer to centrally organize a large number of options. The user interface produced by the tool can generate a menu by identifying child links of a tree 206 node and displaying the categories of the child links as menu options. For example, in FIG. 11, the "Resources" node included a link "Garden.com". In FIG. 12, a designer placed the "Garden.com" link in the "Websites" category. Thus, the user interface constructed by the tool will display a menu including a "Websites" parent option that includes "Garden.com" as a child.
In summary, as shown in FIG. 13, the tool receives identification 252 of at least one image, identification 254 of at least one region of the image, and identification 256 of menu options corresponding to the region. After receiving this information, the tool can output instructions and/or data for a graphical user interface. FIGs. 14-18 illustrate a system for providing a graphical user interface featuring the "pop-up" menus shown in FIGs. 1-6 to remote computers 418 over a network 412. As shown in FIG. 14, after the creation tool 402 receives information from a designer specifying a graphical user interface (see FIGs. 8-13), the creation tool 402 transmits a description of the graphical user interface (e.g., a description of a tree, associated images and defined image regions, and so forth) to a database 404. As shown, the database 404 may reside on a remote server 410. In fact, a single server 410 may receive information for designed graphical user interfaces from different copies of the creation tool 402 operated at different network locations. The data transmitted by the creation tool 402 may be formatted in a variety of ways. For example, the data may be stored as XML (Extensible Markup Language) instructions that define a tree's structure, images, image regions, menu content (e.g., links and categories), and other information. XML is an example of SGML (Standard Generalized Markup Language) .
As shown in FIG. 15, a networked computer 416 may store a web-page 414 (e.g., HTML (HyperText Markup Language) instructions) that refers to a particular set of graphical user interface information (e.g., a tree) stored on the server 410. For example, the web-page 414 may include a reference to an applet 408 provided by the server 410 and can specify a particular user interface (e.g., a tree) by an applet parameter (e.g., "garden"). The applet 408 includes instructions (e.g., Java instructions) that retrieve the specified tree information from the tree database 404 on the server 410. By retrieving interface information from a database instead of having such information hard coded, a single set of applet instructions can handle a wide variety of user interfaces operating on different clients 418. As shown in FIG. 15, when a browser 418 (e.g.,
Microsoft's® Explorer® or Netscape's® Navigator) or other client navigates to a URI (e.g., "www.gardensticky.com") storing a web-page referring to the applet 408, the browser 418 receives a copy of the web-page 414 stored at the URI. As shown in FIG. 16, after receiving the web-page 414, the browser requests a copy of the applet 408 referred to by the web-page 414. As shown in FIG. 17, after downloading the applet 408, the browser begins executing/interpreting the downloaded applet 408 instructions. The applet 408 instructions query a servlet 406 on the server 410 for a description of the tree specified by the web-page. After receiving the tree description, the applet can provide the graphical user interface described in conjunction with FIGs. 1-7.
As shown in FIG. 18, the applet 408 may transmit tracking information to the server for storage in a database. Such transmission may occur as each tracked event occurs. Alternatively, the applet 408 may collect tracking information for batched transmission. Tracking information may include additional information such as the IP (Internet Protocol) address of the client 418 receiving the graphical user interface, an identifier of the tree presented, and so forth. FIG. 19 shows a method 450 for providing a graphical user interface. Again, a database stores 454 a tree description specified 452 by a graphical user interface designer. Thereafter, when a user navigates a browser to a URI offering the graphical user interface, the browser downloads 456 an applet which in turn queries 458 the database for the specified tree description. Thereafter, the applet detects the positioning of the cursor over different image regions defined and presents 460 the corresponding menus . The system described in FIGs. 14-19 is merely illustrative and a wide variety of other implementations are possible. For example, instead of storing the tree description in a database and providing a servlet to dynamically transmit the tree description to different browsers, the creation tool can simply generate a single "hard coded" applet for a tree that includes all necessary information. That is, an applet (or other instructions) need not separate the tree data from the instructions as shown in FIGs. 14-18.
Keyword Server
Different graphical user interfaces may depict similar items. For example, FIG. 20 shows a graphical user interface 510a depicting items in a kitchen and a graphical user interface 510b depicting items in a bathroom. The graphical user interfaces 510a, 510b may reside at different web-sites and may be used by a large number of clients. As shown, both interfaces 510a, 510b have menus associated with defined regions corresponding to sinks. Additionally, both associate the keyword "sink" with the region. For example, both may include a tree node named "sink" or otherwise associate the keyword with the node or region. A keyword server 500 can take advantage of keyword commonality between elements of graphical user interfaces 510a, 510b in a variety of ways.
For example, as shown, an advertiser (e.g., "Black & Decker") can purchase a keyword and automatically be featured as a menu option in graphical user interfaces featuring that keyword . As shown in FIG. 21, the keyword server 500 includes a keyword database 502 that stores entries 504a, 504b for different keywords. It should be noted, that as used herein, the term "keyword" does not imply a single word, but may actually refer to multiple words. The keywords 504a, 504b in the database correspond to keywords of the one or more graphical user interfaces. For example, the keyword may correspond to a keyword associated with a tree node or image region. As shown, the keyword database 502 may store information identifying each graphical user interface having a particular named element. For example, graphical user interfaces residing at "www.kitchen.com" 510a and "www.kenmore.com" 510b both include nodes associated with the keyword "sink". As shown, in some implementations, the database 502 can store an identifier for the graphical user interface. Such an identifier may identify a particular set of tree node information in an implementation using the architecture shown in FIGs. 14-18.
The database may also store information identifying different advertisers. For example, advertisers may purchase advertising rights to a particular keyword. These advertisers may submit an image and/or URI 508 for a particular keyword 504a in the database 502. For example, as shown, "Black and Decker" paid for the rights to the keyword "sink". More than one advertiser may purchase a keyword. For advertisers paying lesser amounts, their advertisements may be used less often or displayed less prominently. As shown in FIG. 20, the keyword information stored in the server database may be accessed by different graphical user interfaces running on different clients. For example, as shown, graphical user interfaces 510a, 510b both include a region corresponding to a sink and have a node named "sink" . As shown, both have retrieved a banner ad (e.g., an image and associated URI) from the server keyword database upon a user's positioning of a cursor over the, respective, "sink" regions. As shown, the graphical user interface instructions package the retrieved information in the menu displayed. The keyword database 502, thus, enables advertisers to have their advertisements featured in a number of different graphical user interfaces accessible at different web-sites by storing data in a, potentially, centralized server. Such a scheme can have the advantage that it does not require that the advertisers have knowledge of the graphical user interfaces using a particular keyword.
As shown, instead of, or in addition to, advertisements, the graphical user interface can also retrieve links 516 to other graphical user interfaces 516 from the keyword database 508. For example, a menu could include a patent menu option of "> Other Related Sites" having children links to other user interfaces 506 featuring elements associated with a keyword. Linking together different graphical user interfaces can enable a web-surfer to navigate to sites all over the Internet using the same visually intuitive style of user interaction.
As shown in FIG. 22, the keyword database can also provide listings of different graphical user interfaces available on a network that feature a particular keyword. For example, a searching tool can retrieve a list of different graphical user interfaces having image regions or nodes named with particular keywords. For example, a web- page 518 may feature a form that accepts a search term 520, accesses the keyword database 508, and displays user interfaces stored for the search term. The searching tool can enable a user to quickly find graphical user interfaces related to a particular item or topic that feature the "popup" menus . As an alternative to the searching tool of FIG. 22, keyword entry information may be stored in a manner accessible to search engine spiders (e.g., as a HTML header). Further, the keyword entry information may be sent to traditional search engines such as Yahoo™ or Lycos™ for inclusion in their search engine databases.
FIG. 23 shows a process for using a keyword database. As shown, a server receives 522 keywords associated with different graphical user interface elements. For example, the creation tool described in conjunction with FIGs. 8-12 may send the server a comprehensive list of keywords featured in a newly defined graphical user interface (e.g., a list of the tree node names) . For keywords not previously stored in the keyword database, the server can create additional keyword entries. For existing keywords, the server can add the constructed graphical user interface to a list of other graphical user interfaces featuring the keyword.
As shown, advertisers may submit 526 advertising information (e.g., images and/or links) for association with a keyword. Again, this advertising can appear as a banner in a menu.
The information stored for a keyword may be retrieved 528 by graphical user interface instructions for incorporation 530 into a menu. For example, the applet shown in FIGs. 14-18 may dynamically query the keyword server when the applet begins running. Alternatively, the keyword information may be hard coded by a creation tool during graphical user interface construction. A wide variety of other variations that download menu options from the server 510 are possible. Additionally, the keyword database 510 may be stored on (or accessible to) the same server as the stored node information in FIGs. 14-18.
Implementations While the above description repeatedly referred to a browser, the graphical user interface may be presented by other client programs having network access. For example, HTML instructions for a graphical user interface may be included in an e-mail message. Some e-mail packages, such as Microsoft® Outlook can process the HTML instructions and present the user interface. The graphical user interface may be transmitted using HTTP (HyperText transfer protocol) messages in response to an HTTP request . The techniques described herein are not limited to any particular hardware or software configuration; they may find applicability in any computing or processing environment. The techniques may be implemented in hardware or software, or a combination of the two.
Preferably, the techniques are implemented in computer programs executing on programmable computers that each include a processor, a storage medium readable by the processor (including volatile and non-volatile memory and/or storage elements) , at least one input device, and one or more output devices.
Each program is preferably implemented in high level procedural or object oriented programming language to communicate with a computer system. However, the programs can be implemented in assembly or machine language, if desired. In any case the language may be compiled or interpreted language.
Each such computer program is preferably stored on a storage medium or device (e.g., CD-ROM, hard disk, or magnetic disk) that is readable by a general or special purpose programmable computer for configuring and operating the computer when the storage medium or device is read by the computer to perform the procedures described herein. The system may also be considered to be implemented as a computer-readable storage medium, configured with a computer program, where the storage medium so configured causes a computer to operate in a specific and predefined manner.
Other embodiments are within the scope of the following claims .

Claims

What is claimed is:
1. A method for use in distributing a graphical user interface over a network, the method comprising: (1) providing instructions for a graphical user interface, the instructions for causing a processor to:
(a) access information identifying an image;
(b) access information identifying one or more graphic regions of the image; (c) access information identifying one or more options corresponding to at least one of the one or more regions of the image;
(d) display the image;
(e) detect user movement of a cursor over the one of the one or more regions of the displayed image; and
(f) in response to detecting movement of the cursor over one of the one or more regions, automatically display a menu of the one or more options corresponding to the one of the one or more regions; and (2) storing the instructions on a networked computer for network transmission to network clients.
2. The method of claim 1, wherein the one or more graphic regions comprise more than one graphic region.
3. The method of claim 1, wherein the one or more options comprise one or more links to content stored at remote networked computers.
4. The method of claim 3 , wherein the one or more links comprise one or more URIs (Universal Resource Identifier) .
5. The method of claim 1, wherein displaying a menu of the one or more options comprises displaying option text.
6. The method of claim 1, wherein displaying a menu of the one or more options comprises displaying an option image.
7. The method of claim 6, wherein the option image comprises a banner advertisement.
8. The method of claim 1, wherein the one or more options comprise a series of steps to perform in a process.
9. The method of claim 1, wherein the one or more options comprise options in a hierarchy of options; and wherein displaying the menu comprises displaying a menu reflecting the hierarchy.
10. The method of claim 1, wherein the instructions further comprise instructions for causing a processor to display, with the image, a list including at least one of the one or more image regions .
11. The method of claim 10, wherein the instructions further comprise instructions for indicating in the list of the one or more regions, the region over which the cursor was moved .
12. The method of claim 1, wherein displaying the menu comprises overlaying the menu on top of at least a portion of the displayed image.
13. The method of claim 12, wherein overlaying the menu comprises overlaying the menu on top of at least a portion of the region in which the cursor was detected.
14. The method of claim 1, wherein displaying the image comprises displaying the image in a browser.
15. The method of claim 1, further comprising transmitting the instructions over the Internet.
16. The method of claim 15, wherein transmitting comprises transmitting in response to receiving an HTTP (HyperText Transfer Protocol) request for the instructions.
17. The method of claim 1, wherein the instructions comprise instructions in a mark-up language.
18. The method of claim 17 wherein the mark-up language comprises at least one of the following: XML (Extensible
Markup Language) , HTML (HyperText Markup Language) , and SGML (Standard Generalized Markup Language) .
19. The method of claim 1, wherein the instructions comprise an applet.
20. The method of claim 1, wherein the one or more regions comprise at least one image region not having text.
21. The method of claim 1, wherein the one or more regions comprise at least one rectangular region.
22. The method of claim 1, wherein the one or more image regions comprise at least one non-rectangular region.
23. The method of claim 1, further comprising tracking interface activity.
24. The method of claim 23, wherein tracking interface activity comprises transmitting a description of interface activity to a remote computer.
25. The method of claim 25, wherein tracking interface activity comprises detecting at least one of the following: selection of an option, detection of cursor movement in one of the one or more regions, completion of the displaying of the image, completion of the displaying of one of the one or more options, and termination of the instructions.
26. A method of constructing a graphical user interface, the method comprising:
(a) receiving information from a user identifying at least one image;
(b) receiving information from a user identifying one or more graphic regions of the at least one image;
(c) receiving information from a user identifying one or more options corresponding to at least one of the one or more regions of the at least one image; and
(d) providing instructions for causing a processor to:
(1) access the user identified image;
(2) access the information identifying the one or more graphic regions of the image; (3) access the information identifying one or more options corresponding to at least one of the one or more regions of the image;
(4) display the image;
(5) detect movement of a cursor over one of the one or more regions of the displayed image; and
(6) in response to detecting positioning of the cursor over one of the one or more regions, automatically display a menu of the one or more options corresponding to the region.
27. The method of claim 26, wherein receiving information from a user identifying of one or more regions of the image comprises user mapping of the region.
28. The method of claim 26, further comprising receiving user input identifying nodes associated with the respective regions.
29. The method of claim 28, wherein receiving user input identifying nodes comprises receiving user input identifying nodes in a hierarchy of nodes.
30. The method of claim 28, wherein receiving information from a user identifying of one or more regions comprises receiving information correlating a selected region of the image with one of the nodes.
31. The method of claim 30, wherein receiving information correlating a selected region comprises receiving notification of a user's dragging-and-dropping of a selected region.
32. The method of claim 26, wherein receiving information from user identifying of one or more options comprises receiving user identification of one or more links for use as menu options.
33. The method of claim 32, wherein the one or more links comprise one or more URIs (Universal Resource
Locators) .
34. The method of claim 26, further comprising transmitting the instructions over the Internet.
35. The method of claim 26, wherein the instructions comprise an applet.
36. The method of claim 35, further comprising storing in a database information of the at least one image, information of the one or more graphic regions of the at least one image, information of one or more options corresponding to at least one of the one or more regions of the at least one image; and wherein the applet comprises an applet that accesses the stored information in the database over a network.
37. A method for providing a graphical user interface, the method comprising: accessing information identifying one or more regions of an image, the regions of the image having associated keywords ; sending at least one of the keywords to a server; receiving from the server one or more menu options corresponding to the at least one keywords; displaying the image; detecting positioning of a cursor over one of the one or more regions of the displayed image; and in response to detecting positioning of the cursor over the region, automatically displaying a menu of the one or more options corresponding to the region.
38. The method of claim 37, wherein the one or more menu options comprise one or more links to other graphical user interfaces having named elements of the keyword.
39. The method of claim 37, wherein the one or more menu options comprise one or more graphic images corresponding to advertisers.
PCT/US2000/027553 1999-10-06 2000-10-06 Graphical user interface WO2001025956A2 (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
AU78628/00A AU7862800A (en) 1999-10-06 2000-10-06 Graphical user interface

Applications Claiming Priority (4)

Application Number Priority Date Filing Date Title
US15789399P 1999-10-06 1999-10-06
US60/157,893 1999-10-06
US68003200A 2000-10-05 2000-10-05
US09/680,032 2000-10-05

Publications (2)

Publication Number Publication Date
WO2001025956A2 true WO2001025956A2 (en) 2001-04-12
WO2001025956A3 WO2001025956A3 (en) 2003-12-18

Family

ID=26854570

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/US2000/027553 WO2001025956A2 (en) 1999-10-06 2000-10-06 Graphical user interface

Country Status (2)

Country Link
AU (1) AU7862800A (en)
WO (1) WO2001025956A2 (en)

Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
EP0609030A1 (en) * 1993-01-26 1994-08-03 Sun Microsystems, Inc. Method and apparatus for browsing information in a computer database
US5742768A (en) * 1996-07-16 1998-04-21 Silicon Graphics, Inc. System and method for providing and displaying a web page having an embedded menu
EP0918277A2 (en) * 1997-11-20 1999-05-26 International Business Machines Corporation Hotspots in hypertext document pages

Patent Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
EP0609030A1 (en) * 1993-01-26 1994-08-03 Sun Microsystems, Inc. Method and apparatus for browsing information in a computer database
US5742768A (en) * 1996-07-16 1998-04-21 Silicon Graphics, Inc. System and method for providing and displaying a web page having an embedded menu
EP0918277A2 (en) * 1997-11-20 1999-05-26 International Business Machines Corporation Hotspots in hypertext document pages

Also Published As

Publication number Publication date
AU7862800A (en) 2001-05-10
WO2001025956A3 (en) 2003-12-18

Similar Documents

Publication Publication Date Title
US7257604B1 (en) System and method for communicating information relating to a network resource
US7089237B2 (en) Interface and system for providing persistent contextual relevance for commerce activities in a networked environment
JP4422902B2 (en) Method and system for electronic commerce using multiple roles
US7603367B1 (en) Method and system for displaying attributes of items organized in a searchable hierarchical structure
US7373314B2 (en) Unified product purchasing method
US8180674B2 (en) Targeting of advertisements based on mutual information sharing between devices over a network
US20080162506A1 (en) Device and method for world wide web organization
JP5341276B1 (en) Information processing apparatus, information processing method, and information processing program
US7107264B2 (en) Content bridge for associating host content and guest content wherein guest content is determined by search
US7165070B2 (en) Information retrieval system
US20060036567A1 (en) Method and apparatus for organizing searches and controlling presentation of search results
WO2006044935A1 (en) Method and apparatus to view multiple web pages simultaneously from network based search
US8806060B2 (en) Information retrieval system
US20050188057A1 (en) Contents service system and method using image, and computer readable storage medium stored therein computer executable instructions to implement contents service method
US20020188619A1 (en) System and method for generating dynamically updated graphical user interfaces
JP2004038271A (en) Contents retrieval processing program, contents retrieval processing program recording medium, and operator inquiry processing system
US8438487B1 (en) Method and system for one-click navigation and browsing of electronic media and their category structure as well as tracking the navigation and browsing thereof
US20100191616A1 (en) Software method and system to enable automatic, real-time extraction of item price and availability from a supplier catalog during a buyer's electronic procurement shopping process
EP1087303A2 (en) Method and system for generating web pages with information displayed in a carousel
JP5315485B1 (en) Information processing apparatus, information processing method, and information processing program
KR100343854B1 (en) Classification diagram type displaying - information retrieval system
WO2001025956A2 (en) Graphical user interface
CA2780439A1 (en) Search engine identifying chemical products
JP2006059032A (en) Merchandise information providing device, method and program, and recording medium with the program recorded thereon
KR100571799B1 (en) Contents service system and method using image, and storage media thereof

Legal Events

Date Code Title Description
AK Designated states

Kind code of ref document: A2

Designated state(s): AE AG AL AM AT AU AZ BA BB BG BR BY BZ CA CH CN CR CU CZ DE DK DM DZ EE ES FI GB GD GE GH GM HR HU ID IL IN IS JP KE KG KP KR KZ LC LK LR LS LT LU LV MA MD MG MK MN MW MX MZ NO NZ PL PT RO RU SD SE SG SI SK SL TJ TM TR TT TZ UA UG US UZ VN YU ZA ZW

AL Designated countries for regional patents

Kind code of ref document: A2

Designated state(s): GH GM KE LS MW MZ SD SL SZ TZ UG ZW AM AZ BY KG KZ MD RU TJ TM AT BE CH CY DE DK ES FI FR GB GR IE IT LU MC NL PT SE BF BJ CF CG CI CM GA GN GW ML MR NE SN TD TG

121 Ep: the epo has been informed by wipo that ep was designated in this application
DFPE Request for preliminary examination filed prior to expiration of 19th month from priority date (pct application filed before 20040101)
REG Reference to national code

Ref country code: DE

Ref legal event code: 8642

122 Ep: pct application non-entry in european phase
NENP Non-entry into the national phase in:

Ref country code: JP