Patented claim of the present invention is that international application no is PCT/US2003/028888; International filing date is on September 12nd, 2003; The application number that gets into the China national stage is 03824341.5, and name is called the dividing an application of application for a patent for invention of " improved browser user interface ".
The application requires the right of priority of the U.S. Provisional Patent Application No.60/410510 that awaits the reply jointly of submission on September 13rd, 2002; Its title is " browser user interface (Browser User Interface) "; And the U.S. Patent application No.10/656846 of submission on September 4th, 2003, it is incorporated herein by reference.
Summary of the invention
The present invention relates generally to user interface, relate in particular to the browser interface of the browsing pages that is used for providing on the browse network.
Background of invention
The Internet and other networks interconnect computers and calculation element are to allow through network data transmission easy to connect.Usually, computing machine and calculation element utilize client-server pattern tissue, and wherein network connects and to build on as some computing machine of server or calculation element with as between some computing machine or calculation element of client computer.Certainly, some computing machine or calculation element also can be used as server and client computer.
The Web server of an instance of server and the instance of client computer is the Web client computer is such as the personal computer of operation Web browser program.Develop many different Web client computer and developed the modification of Web client computer just regularly.Only as an example, the Web client computer can be embedded in desktop computer with embedded Web client functionality, laptop computer, handheld device, mobile phone, wireless device, electronic equipment or the like.Usually, needed is some user interfaces and socket.
In some instance, user interface is the interface to program user, but more typically, user interface is can be by the interface of user's utilization.The Web client computer sends to Web server with the agreement of utilizing known agreement or exploitation later on request according to this interface operation.In response to the request that receives, the response of Web server return data.In the interactional typical case of Web client-server describes; Suppose the use http protocol, wherein the Web client computer is sent being used as to the request of particular Web server address and in response to the server of this particular Web server address of the page that the URL in the request representes and is wanted the data of page displayed or other data set to respond.Usually, no matter by the real data of asking and returning, the data of being returned are known as the Web webpage.
Can the Web client computer that all or part Web webpage in the user interface is presented to the user and can be received user input (wherein certain user import can make the Web client computer present further Web webpage) at least can be called " Web browser ", because user's the common use of in the Web webpage, navigating is generally considered to be the part of the page " Web net " with reference to other page.
Web browser is known and commonly used, and the function except that presenting the Web webpage and receiving the user input relevant with the Web webpage that appears often is provided.For example, the Web webpage can be included in the program element of being carried out by Web browser when receiving the Web page that comprises this program element.An instance of this program element is JAVA
TMProgram.
The Web page also can comprise the program element that makes the Web server action.For example, Web server can provide portal service, and wherein Web server generates the portal page that is used for the Web client computer from each provenance Information Monitoring and according to request. Homepage (
Www.yahoo.com(my.yahoo.com) personal page that provides.The latter is provided for being delivered to the page of Web client computer, and it is customized according to the user preference of server place storage.
Web webpage and the space of a whole page of variation of customization often provide abundant user experience, if but information appear and need move to the Web webpage from the Web webpage, when then network delay occurring this experience just bad because the user need wait for page arrival and refresh.If the user must move to the page so that see required information from the page, then this experience also can be misleading.Though Web server keeper's control possibly appear and often exceed in network delay, the service linkage that the negative experience may that the user will cause owing to network delay usually provides with the Web server keeper together.Therefore, expectation alleviates the delay of perceiving that is caused by network delay.
Summary of the invention
In client-server system; Client machine system presents browser and is used for the customer interaction with server data or resource; Browser user interface comprises function; Be used to present to browser client so that on network, also handle the page that receives from the server requests page; Browser user interface comprises graphic alphanumeric display, user input apparatus and being used for and the storer that receives the dynamic interface element that the relevant browser of the page receives, wherein dynamic interface element can be rendered as the part of browser user interface and in response to selected user's input is modified not need with the further reciprocation of server.Except such as sliding single dynamic interface element or replace it; Browser user interface also can comprise the rotation viewing area; Can be opaque or the instrument of translucent ground cover page show menu structure, and make the user's modification page layout and do not need the ability of server interaction effect.
The rotation viewing area can comprise some or all viewing area that is used for page demonstration; And browser further comprises the storage of a plurality of rotation display items display; Be used to store the summary of each rotation display items display and mainly appear; Be used for the logic that mainly appears through the less whole a plurality of rotation display items display of browser display in the rotation viewing area; Be used for the logic through the browser display project overview, wherein summary quantity is greater than the quantity that mainly appears that once appears simultaneously, is used for the logic that mainly presents more corresponding summaries of form in the summary that is shown high bright and rotation viewing area; And be used to rotate a plurality of rotation display items display with the Gao Liang that mainly presents and be used to upgrade summary of the different subclass that show the rotation display items display with logic corresponding to the different subclass of rotation display items display.
Through following detailed description and preferred embodiment, other characteristics of the present invention and advantage will become obvious.
Summary of drawings
Fig. 1 is the block diagram according to the computer system of the embodiment of the invention.
Fig. 2 is the interactive trend map of client-server that the computer system of available Fig. 1 is carried out.
Fig. 3 is the single diagrammatic sketch of advanced search slide.
Fig. 4 is the diagrammatic sketch that dynamic item and summary show, can be used for illustrating new title and text.。
Fig. 5 is the diagrammatic sketch of tool layer.
Fig. 6 is to use the diagrammatic sketch of the navigation of layer.
Fig. 7 is the diagrammatic sketch with personal page of instrument.
Fig. 8 has the popularization of revolution space and/or the diagrammatic sketch of information tool layer.
Embodiment
The present invention has many application, and this will be obvious after reading this disclosure.In when description is routine according to browser interface system implementation of the present invention, some possible modification are only described.Other is used and modification will be obvious for those of ordinary skill in the art, thereby the present invention should not be limited to these instances, but according to appending claims.
Now embodiments of the invention will be described without limitation through instance.Should be understood that the present invention is widely useful and can be used in many varying environments.
The instance of browser session is that the user at the customer location place operates subscriber computer and controls browser, and the software that it normally moves on the general purpose user computer also can be other device, such as the firmware of dedicated hardware browser or mancarried device operation.Browser sends the request of the page or partial page and the page or the partial page that demonstration receives on network.Browser also can keep the local datastore of little segment information (cookies), caching page, script, code etc.Usually, browse request directly passes to page server on network, such as HTTP (HTTP) server (being also referred to as " Web server ", because the page that provides is often thought the part of the WWW of hyperlink document).The user can be people or machine, but often is human user.
" page " can be in response to the conventional H TML page that browse request is returned, and it can be the page that prestores the page or generate in response to request.The page can comprise the display part, but format part and operating part.As used herein, term page can relate to html page, message, data block, packets of information or other structuring or non-structured data cell, and they can be considered to the logical block in the page request system.
With reference now to accompanying drawing,, with the browing system of describing exemplary.
Fig. 1 is the block diagram according to the system 100 of the embodiment of the invention.Using system 100, user-operable client machine system 102 moves a browser and receives these request responses 106 with the request 104 of the transmission page and from server 108.Response 106 pages normally, but under error situation,, server non-availability incomplete or when asking the user not have access rights, responding 106 can be the error message or the wrong page such as not existing, ask when the page.
Fig. 1 only illustrates a client computer and a server, but should be understood that exemplary systems can have many client computer and many servers.As shown in the figure, server 108 was opened through network 110 and client machine system in 102 minutes, and in this case, the Internet of network is called " the Internet ".The bandwidth in the client-server path through network 110 is reduced viewing experience sometimes with response.But because the typical essential calculation task of browing system fast processing, network and/or server more typically are the reasons of bottleneck and deceleration.But through using some technology described herein, browing system can be asked and server can have the page response of characteristics, even these characteristics can provide response to the user in the face of under the situation of network slowdown.
Fig. 2 is the action and the trend map of flow process between explanation client computer (such as user's browser) and the server, and wherein each is communicated by letter and all uses the agreement such as HTTP and/or its expansion.The step that client computer or server are carried out is mark in order, illustrates with mark " S1 ", " S2 ", " S3 " etc.Also can carry out unshowned other step and be not underlined step must to carry out.
In case the user begins the instance (S1) of browser, browser is with regard to the input of receivability from the user.In this example, user's request is by URL (uniform resource locator)
Http:// PLUS.yahoo.com/index.htmlThe page and the browser of sign obtain this request (S2) from the user.Browser can be keyed in this URL, selection in the bookmark tabulation, the link of clicking institute's display page or other method through the user and obtain request.Subsequently, browser sends to HTTP request the server of major part with the URL of request (promptly in this example " PLUS.yahoo.com ") sign.
In case the server request of receiving (S3), its searching page (S4) also sends it to request browser (S5).The page can comprise html data, such as page text, form or the like, but also can comprise dynamic element.A standard that is used for this dynamic element is DHTML (Dynamic Hyper Text Makeup Language) standard.In case browser receives the page (S6), this page of browser handles (S7) and selected layer is shown to user (S8) then.
Along with the selected layer of the DHTML page is shown, the user can select element on the display to cause an action subsequently.Can be through cursor positioning to be carried out some selection on an element, other selection simultaneously can comprise that indication selects, such as through when cursor is on element, pushing mousebutton.Certainly; For browser, the location selection appears also can being treated in the chance of somewhere cursor on the display, thereby even if the user does not change cursor position; Also can carry out the action carried out through positioning cursor, be interpreted as " selection " as estimating under the normal condition.
But select action or incident by record, browser detects or interpreting user input (S9), based on the DHTML code of selected element action (S10) is made in this selection subsequently.The instance of the page and element is below described.Though DHTML has been used for rendering content and locating content, the instance that below illustrates be instrument the interface element (for example, button, form) on the layer is provided and/or be used for interface the layer use.
Fig. 3 shows the part of the page 300 with dynamic interface elements.The page 300 is delivered to browser as a DHTML page, has wherein comprised the required all component in interface in this DHTML page.This allows browser need not send to other request of server in response to user action, and this may delayed response.As shown in here, select " Advanced Search " button or only cursor is rolled to when being activated on this button through the user, " it is single to slide " 301 that be used for Advanced Search falls from search tool bars.
The employing advanced search slide is single, and the user can carry out Advanced Search and need not seem to have left the current page that is just showing, because search tool bars can be used as the part of current display page, wherein opens single part of only disturbing institute's display page of sliding.
DHTML " Advanced Search " link can provide compatible visual language to mark this dynamic link through text element 302 or graphic element sign.When the non-selected Advanced Search of user, the single maintenance of sliding, hide, and when being selected, then showing as behind toolbar and slide.The list that slides can comprise various advanced search option elements.If Advanced Options need be divided into a plurality of parts, then the form navigational system can be used in the slip list.According to the demonstration actual assets that can be used for sliding single and the number of elements that will show, sliding singly also can comprise rollover elements, to allow the rolling at the actual assets interior element that is distributed.In some is implemented, single can vertically expansion of sliding, thus the employed actual assets of user's may command possibly eliminated the needs to scroll bar.
Shown in slip single in, " search " button 306 is provided, it can start with search tool bars in " search " button 308 same or similar modes of providing action and can hide the list use in 301 o'clock of sliding.The user can be through accomplishing search, singly clicking, click once more " Advanced Search " element 302 or close slip list 301 through clicking " x " on single 301 the upper right corner of the sliding chart that closes window outward clicking on arbitrary search button, sliding.
This search slide singly can be used in the various zones of portal, such as homepage, music page, movies page, games page, the physical culture page, local news/information page and/or news pages.But instrument is used for receiving the function of searching such as newspaper like the finance and economics page association class.If each this page all has different search element, can be different sliding single for the different pages.The selection that the user carries out on slide single or other dynamic interface element can be stored in client machine system and send the server (or other given server) of asynchronous or the synchronized transmission page (blocking-up (blocking)) to.For example, a server can offer browser with the page, and it is appointed as the server of collection from user's input of dynamic interface element collection with second server.Preferably, if delay is possible, client machine system can be taken action based on the input of the user on the dynamic interface element before server receive user's input of being gathered.
In some situation, the user can ask to have the page of this DHTML element, but does not have to handle the browser that DHTML constitutes.In this case, the DHTML page is configured to replace other function.For example, when the user with non-enabled browser selects advanced search element 302, they will be directed into the html page that is used for Advanced Search, the user left contain the page of said element.
Therefore in another example, utilize dynamic interface element, dynamic content delivery is provided in the page, allow the user to keep the page and watch additional elements.The instance that this dynamic content delivery constitutes is shown in Fig. 4.Adopt this formation, show the numerous items summary, wherein show a project.In this example, project is that new story and summary are titles, but the project of other type also is fine.
Dynamic layer 400 is used for the demonstration of the project 402 and the summary 404 of this project and other project.Summary (summary 406 in this situation) corresponding to display items display illustrates with visible indicium 408, thereby makes the title that the user can be shown in further detail more than the quick identification.If institute's items displayed and image or video or other medium are relevant, then can be shown in the zone.According to selecting and/or cursor position; Browser can (instruction in the page that provides according to server) automatically conversion through each project; Successively it is illustrated and select specific project (perhaps through clicking this project the user; Click this summary, cursor moved to this summary or takes other indication action) time stops.
This content delivery mechanism can find on the homepage of door Web website character.In main new page, top news and feature story are dynamically rotated so that to the user more information is provided.The user can be through directly selecting specific top story or interrupt this rotation through only cursor being moved into the project viewing area or pushes a key the short tabulation that shows from the page.In order to obtain complete story (in most cases, not being shown project), the user can select this project or title.
Can carry out directly conversion automatically of project by many modes.For example, browser is rotatable through these projects, fades out one and fade in another.A kind of mode of doing like this is in a layer, to have current project, in another layer, has next project, makes a next zone of interest transparent and on current layer and increase the opacity of a next zone of interest gradually.Perhaps, current layer can be opaque and on top, makes that this layer becomes more transparent gradually.In some situation, project comprises the medium of taking time and showing, the rotation that current project goes out and next project is gone into can rely on current project and when accomplish demonstration, after accomplishing broadcast in current project, begins this conversion soon.In the situation that provides control to control media play, such as rewinding, time-out and F.F., when rotation appears in user's may command.In any situation, browser should enough postpone so that present the comfortable reading of text and appear conversion with the beginning vision and/or audio cue.
When showing when a project is transformed into another project, will become present current project such as the visual mark of visual mark 408.The rotation order can be at random or limits certain group rule, but the order of expectation can be from top to bottom, repetition top items when the bottom project rotates.The tabulation of project overview (therefore, project) can be at the server place by importance or interest ordering.
Except the rotation of project and summary thereof, dynamic layer 400 also can provide link, and such as " more bull bar story " and " referring to relevant story ", they make the user leave current page and go to new page that this is the same with conventional link.
Can other mark be provided to the user.For example, when user's scroll cursor is suspended rotation with indication to height on the bright story, mark can be provided.For fear of discordant action, browser (once more by the instruction control from the page) can postpone several seconds of scroll actions and carry out level and smooth conversion subsequently.
Because the navigation in the each conversion between the project and the element of dynamic layer 400 can not related to server by browser handles, customer interaction can carry out fast and need not relate to network activity or bottleneck.Statistical information about watching if desired, but page acquisition state message and send it to server (being used for confirming that which project is concerned about by mass viewer audiences and which does not have), but this server interaction effect can not postpone demonstration experience.
This dynamic layer page can be used for the various zones of portal, such as homepage, music page, movies page, games page, the physical culture page, local news/information page and/or news pages.In some situation, the user can ask to have the page of this DHTML element, but does not have to handle the browser that DHTML constitutes.In this case, the DHTML page is configured to replace other function.For example, can present project and summary, but needn't select summary to watch project to user with non-enabled browser.
Comprise in the situation of object video in project, this object can directly appear in a layer through plug-in card program etc.Owing to directly handle video, just need not open the external played device, therefore make the page more flexible.For example, distribute to the zone of video and can adjust automatically, and should the zone can or shrink and need not reload video flowing by user's expansion based on detected aspect ratio.
Fig. 5 shows another instance that dynamic page uses.Here, show tool layer 500.Tool layer 500 allows users to carry out popular action and/or action and does not leave the page of being paid close attention to.Tool layer 500 comprises button, such as button 502, when on them, roll with indicate they enrich dynamic function the time they react by some mode, such as height bright with postpone after ToolTips.The page comprises having the DHTML layer that the user accomplishes action or the action interactive elements that is necessary, does not need usually and server communication.For wizard-like activity or tour, this model can be self-contained and when accomplishing, close that wherein user's input is recorded in client machine system, then is sent to server like needs.
When through click or alternate manner selection tool, present DHTML layer (preferably) to the user through consistent visual transition, wherein comprised the necessary interactive elements of this task of completion.Another browser window is ejected in the link that comprises in this model usually.
This tool layer can many modes use.For example, main portal page can comprise tool button and be used for send Email.As response, browser can present the new layer that is used for the Email login, and wherein the user does not discover any guiding of leaving this group portal page.In addition, because e-mail layer has been the part at the page at browser place, open and the recovery of homepage of this layer will be can postpone and do not postponed owing to network or server.Other use can comprise the website service that is used for quick load document, calendar renewal, photo upload, search, inquiry of the yellow page etc.
For the layer such as e-mail layer, the part that is used for the Email login can be translucent, to keep user plane to the page of selecting e-mail function.This often cause less not towards, and make appear more clear.Also can provide and fade.
In order to adapt to the browser that does not have dynamic page or DHTML ability, server can detect through " detecting method " or other and whether launch browser and dynamic page is provided subsequently or retreats into the page that separates that does not have the instrument ability.
Except comprising the dynamic page of user interface element (such as button and form), some dynamic page can be operated under the situation of this element not having.For example, Fig. 6 shows the use of the layer that is used for the son navigation.Implement to use DHTML to eject for one of sub-navigation layers, it shows the main menu item purpose subdivision and/or subclass.When user's chaining on master menu rolled, can show these submenus.If master menu does not have tangible one group of sub-navigating items, then this layer can be used for describing menu item and/or the fast link that arrives the popular subdivision in this project is provided.
In some system, simple in order to keep interactive action, when using the sub-grade (such as the sublayer) of selected and limited quantity, selected menu item is by Gao Liang.In the instance of Fig. 6, when the user rolls on top menu, subdivision DHTML menu or description will come across the right side.As long as cursor remains on selected master menu project or DHTML submenu itself, the DHTML submenu should stay open, but the DHTML submenu disappears when item selected or DHTML menu itself are left in user's rolling.
This layer can be used in the various zones of portal, such as homepage, music page, movies page, games page, the physical culture page, local news/information page and/or news pages.In some situation, the user can ask to have the page of this DHTML element, but does not have to handle the browser that DHTML constitutes.In this case, the DHTML page will be configured to replace other function, such as the submenu project under menu item shown in flat, the sawtooth menu, and for the menu item that does not have subdivision, when clickthrough, take the user to this page itself.
Some page can be the complex combination of above-mentioned formation.For example, Fig. 7 shows the layer of " personal assistant " group, is used to carry out user's special duty.In this case, employed dynamically (DHTML or other agreement) page can be by user storage, thereby server needn't be repeatedly sends to the user with user's the page, and several thousand or millions of users.Even content of pages will change, this too because the page of buffer memory can comprise each use page the time from the placeholder of the information of server retrieves, even searching page itself not at every turn.
Adopt the layer of personal assistant group, " assistant " model in the special properties is provided, wherein according to user's preference rendering content, instrument, characteristics and popularization in advance, they can be managed actively or passively.Customization can comprise event notification (that is, auction result, concert tickets in the sale or the like), information reminding (news, finance and economics), popularization (release of new products) or personal information (should pay one's bill etc.).Preferably, tabulation is restricted to certain quantity (such as 10) clauses and subclauses, with the link that avoids confusion and have the project of guiding to self.For example, " editor " link allows the user on separate page, to edit its preference.This separate page will comprise tangible project and the preference that the user selects, to the permission of promotion project characteristics explanation, and the permission of the passive personalization that use, the popularization of personalization features on the horizon or news, or the like.If model does not comprise all items at first, " more " links can be through vertically expanding the single individual project of adding that shows of DHTML slip.
If the user does not make its model personalized, then it will comprise popularization, indication or the tour that is used for assistant's model.As assistant during by personalization, it will comprise initiatively or the passive limited tabulation that is customized to the project of user preference.The project of listing can comprise link, when clicking these links, will allow the user further with the specific project interactive action.If model can not completely comprise all individual projects, will provide " more " to link, when click should link, will present the list that slides to show all the other tabulations.
Preference can comprise the type of active making prompting or the content that model appears and filters, and it also can comprise color customization, pictorial element and other personalization features.
This layer can be used for the various zones of portal, such as homepage, music page, movies page, games page, the physical culture page, local news/information page and/or news pages.In some situation, the user can ask to have the page of DHTML element, but does not have to handle the browser that DHTML constitutes.In this case, the DHTML page is configured to replace other function, such as when " more " go up click, sending the separate page of listing all items to the user.
Fig. 8 shows another dynamic page.Here, show indulgence (premium) and promote model, it rotates in a series of popularizations or information project, the activity conversion that use one is made peace careful.Project comes across in a plurality of spaces, and project can be from the space conversion the staggered catalogue, thus their all conversions at once.As an example, door Web website go up most the page or leaf can comprise promotional module.
This conversion can be consistent with other conversion of other dynamic page, such as animation, fade in, box goes into or the like.Even the user is idle, rotation also can appear, and it is careful and consistent preferably running through module.If the user rolls on particular space, then can suspend the rotation in this space, rotation continues when this module or space are left in user's rolling.Link in the model can link the samely with routine and operate.User with non-DHTML enabled browsers can be equipped with such one group of space, but can not present rotation.
A kind of architecture that can be used for appearing These characteristics is to have the separate tools on the DHTML page layer and move these layers through the position that changes them, thereby eliminating is to the needs of page furbishing.In some variation should be in the situation of viscosity; Such as when the user drags to a layer reposition or changes the mutual alignment of layer; Can carry out this change and not refresh the page from server; Wherein these variations can with server communication, thereby these layers are arranged in the set state of last visit user when next user gets into this page.In fact, for example, this allows the user to drag and put down the some parts of portal page design, and watches them relative to each other to move apace, and this is that given network and/or server situation institute are impossible.Can the communication that change be sent to server, and not block moving of subscriber set place.Except communication changes, also can give server, although the server action need be in response to these user actions with reference (perhaps the being further details option) communication that the user carries out such as navigation menu.
It is illustrative and nonrestrictive more than describing.It is obvious that many modification of the present invention will become after those skilled in the art watch this disclosure.Therefore, scope of the present invention should not confirmed with reference to above description, but pass through to confirm with reference to the four corner of appended claims and equivalent thereof.