Method and system for presenting information in a summarizing accordion view

CROSS REFERENCE TO RELATED APPLICATIONS

0001This application claims benefit of U.S. Provisional Patent Application Ser. No. 60/846,267, filed Sep. 21, 2006.

BACKGROUND OF THE INVENTION

0002The present invention relates to user interfaces, and more particularly, to techniques for presenting information acquired from a user during an interactive session.

0003In general, user interfaces allow a person to provide information to and receive information from a machine. Although user interfaces are used for wide variety of applications, probably the most well known user interfaces exist in the field of e-commerce.

0004Consider a consumer using a computer-based web browser to access an e-commerce website and purchase a product. The web site typically provides a user interface (typically a Graphical User Interface or GUI) that allows the consumer to review and select the product, then provide transactional information such as form of payment, shipping and billing addresses, and other such data necessary to complete the purchase.

0005The e-commerce user interface generally presents the consumer with a series of views to solicit this necessary transactional information. For example, once the consumer has selected the desired product or products, the user interface may present a view listing the selections and asking for confirmation. Once the consumer confirms the selections, the user interface may provide another view that requests information identifying the consumer, such as name, address, phone number, e-mail address, and the like. After entering some or all of the identifying information, the user interface may present yet another view requesting payment information. Other subsequent views may solicit additional information regarding, for example, shipping address, special handling requests (e.g., gift wrapping), requests for newsletters or advertisements, or an opportunity to continue shopping.

0006One problem with existing user interfaces is the possibility of the consumer getting confused or lost while navigating the sequence of views. If the user interface presents only one view at a time, the consumer may forget what information has already been entered in a previous view. Or, if the consumer does not have a particular piece of information handy when the user interface solicits that information, the consumer may skip to another view expecting to retrieve the missing information later. In this case, the consumer may have difficulty navigating back to the view with the missing information, resulting in a frustrating shopping experience.

0007Thus in general, existing user interfaces have deficiencies that make transactions confusing or frustrating. For example, some existing user interfaces include windows that do not provide data entry capabilities at all. These windows merely provide static content. As another example, some interfaces do not provide significant feedback regarding the content of a particular window once that window has been completed and closed or minimized. These windows may provide a title, but do not give the user insight as to specific content of the window.

0008Whenever a consumer encounters confusion or frustration during a transaction, that consumer may simply decide to abandon the transaction. A consumer is more likely to complete a transaction if the user interface provides a pleasant shopping experience by reducing or eliminating any perplexing or annoying situations.

SUMMARY

0009A user interface is described for providing an information gateway between a user and one or more applications running on a computer platform. Although the described embodiment concerns an exemplary e-commerce application, the concepts described herein may be used for other applications that require a user-interface.

0010In some embodiments, the user interface includes a group of two or more windows constructed and arranged for displaying information, and for facilitating information entry from a user. The windows may be in the form of a rectangular box, although other shapes may be used. The group of windows may be associated with one another by residing within a larger “parent” window, or by relative proximity to one another, or by some other relational technique such as common color or common shape. The size and/or shape of each of the windows changes as the content of the window changes.

0011The user interface requires the user sequentially step through the windows, completing the required data entry or entries for each window before proceeding to the subsequent window. As the user encounters a particular window, that window expands to display details of the data entry field or fields contained therein, as well as guidance and commentary information. In general, a data entry field allows a user to provide information to the one or more applications through the user interface. The user can provide this information may in a number of ways, such as by entering alpha-numeric information through a keyboard or other data entry device, by selecting a predetermined item from (for example) a list of items, a pull-down menu or a radio button, or by other data entry techniques known in the art. When the user completes the data entry fields of an expanded window and proceeds to the subsequent window, the completed window collapses and displays a summary of the information contained therein.

0012In some embodiments, the expansion or collapse of a window occurs in a smooth, gradual transition. In other embodiments, the expansion/collapse of a window occurs abruptly.

0013In one aspect, the invention is a method of providing an interface between a user and at least one software application running on a computer platform. The method includes providing two or more windows for displaying information and for facilitating entry of information from a user. The two or more windows are visually associated with one another. The method further includes requiring the user to sequentially access the two or more windows, and for each sequentially accessed window, complete at least one predetermined data entry task before accessing a subsequent window. Each window, when sequentially accessed by the user, transitions to an expanded state to display one or more of (i) data entry fields, (ii) guidance information and (iii) commentary information. A window in the expanded state transitions to a collapsed state when the user accesses a different window, such that the window in the collapsed state displays summary information describing contents of the window in the collapsed state.

0014One embodiment further includes gradually transitioning from the collapsed state to the expanded state, or from the expanded state to the collapsed state. Another embodiment further includes abruptly transitioning from the collapsed state to the expanded state, or from the expanded state to the collapsed state. Yet another embodiment further includes initially providing the two or more windows in the collapsed state.

0015One embodiment further includes modifying one or more size characteristics of at least one of the two or more windows in response to content changes of that window. Another embodiment further includes providing data entry fields in the two or more windows, wherein the data entry fields for a particular window correspond to information required for a particular task.

0016One embodiment further includes providing an option to the user to allow one or more windows to remain in an expanded state when the user accesses the different window. Another embodiment further includes preventing the user from accessing the different window until data has been entered into all of the data entry fields of the expanded window. Yet another embodiment further includes automatically entering data into a first data entry field of one particular window as a result of information provided by the user to a second data entry field of the one particular window or of another window.

0017One embodiment further includes grouping at least two of the two or more windows to form a window group, wherein the window group has only one window open at one time with the other windows from that group remain collapsed.

0018In one embodiment, the summary information includes more data related to the contents in the window than a title of the window.

0019In another aspect, a system for providing an interface between a user and at least one software application includes a computer platform having a display for presenting the interface to the user and a processor for executing the at least one software application and for executing interface software. The system also includes a storage device for storing the at least one software application and the interface software, and for providing the at least one software application and the interface software to the processor for execution. The interface software executing on the processor is operable to provide two or more windows for displaying information and for facilitating entry of information from a user. The two or more windows are visually associated with one another. The interface software is further operable to require the user to sequentially access the two or more windows, and for each sequentially accessed window, complete at least one predetermined data entry task before accessing a subsequent window. Each window, when sequentially accessed by the user, transitions to an expanded state to display one or more of (i) data entry fields, (ii) guidance information and (iii) commentary information. A window in the expanded state transitions to a collapsed state when the user accesses a different window, such that the window in the collapsed state displays summary information describing contents of the window in the collapsed state.

0020In another aspect, a computer readable medium storing computer executable instructions that when executed by a computer processor are operable to provide two or more windows for displaying information and for facilitating entry of information from a user. The two or more windows are visually associated with one another. The instructions are further operable to require the user to sequentially access the two or more windows, and for each sequentially accessed window, complete at least one predetermined data entry task before accessing a subsequent window. Each window, when sequentially accessed by the user, transitions to an expanded state to display one or more of (i) data entry fields, (ii) guidance information and (iii) commentary information. A window in the expanded state transitions to a collapsed state when the user accesses a different window, such that the window in the collapsed state displays summary information describing contents of the window in the collapsed state.

BRIEF DESCRIPTION OF DRAWINGS

0021The foregoing and other objects of this invention, the various features thereof, as well as the invention itself, may be more fully understood from the following description, when read together with the accompanying drawings in which:

0022<figref idref="DRAWINGS">FIG. 1A</figref> shows one embodiment of a user interface constructed and arranged according to the invention.

0023<figref idref="DRAWINGS">FIG. 1B</figref> shows one embodiment of a computer platform for implementing the user interface of <figref idref="DRAWINGS">FIG. 1A</figref>.

0024<figref idref="DRAWINGS">FIG. 2</figref> shows a state diagram for animated state transition according to an embodiment of the user interface of <figref idref="DRAWINGS">FIG. 1</figref>.

0025<figref idref="DRAWINGS">FIG. 3</figref> shows an e-commerce site for which the user interface described herein may be used.

0026<figref idref="DRAWINGS">FIG. 4</figref> shows an exemplary user interface in the e-commerce site of <figref idref="DRAWINGS">FIG. 3</figref>, having four inner boxes.

0027<figref idref="DRAWINGS">FIG. 5</figref> shows the user interface of <figref idref="DRAWINGS">FIG. 4</figref> with the “shipment” box expanded and the remaining boxes collapsed.

0028<figref idref="DRAWINGS">FIG. 6</figref> shows the user interface of <figref idref="DRAWINGS">FIG. 4</figref> with the “payment” box expanded and the remaining boxes collapsed.

0029<figref idref="DRAWINGS">FIG. 7</figref> shows the user interface of <figref idref="DRAWINGS">FIG. 6</figref> with feedback to the user regarding data entry.

DESCRIPTION OF THE PREFERRED EMBODIMENTS

0030<figref idref="DRAWINGS">FIG. 1A</figref> shows one embodiment of a user interface constructed and arranged according to the invention. The user interface <b>100</b> presents a rectangular box <b>102</b> containing an array of smaller inner boxes <b>104</b>, <b>106</b>, <b>108</b>, <b>110</b>, <b>112</b>, <b>114</b> and <b>116</b>. These inner boxes, also referred to herein as “children” boxes, are stacked vertically within the parent box <b>102</b>. This particular arrangement with rectangular boxes stacked vertically is merely illustrative. Other arrangements and designs are possible, with alternative box shapes and box-to-box relationships.

0031In the described embodiment, the user interface <b>100</b> is implemented by computer software (referred to herein as “interface software”) running or executing on a computer platform <b>101</b> as shown in <figref idref="DRAWINGS">FIG. 1B</figref>. The computer platform may include, for example, a stand-alone personal computer, a workstation or multiple-core computing system, although other implementation techniques known in the art may also be used. The user interface <b>100</b> provides a gateway for communication between the user and other applications running on the computer platform.

0032The computer platform includes a tangible storage medium <b>103</b> for storing the computer software <b>105</b>. The tangible storage medium <b>103</b> may include a storage device such as a magnetic or optical disk, FLASH memory, or magnetic tape or other such storage media known in the art. In the exemplary embodiment, the storage medium <b>103</b> resides within the computer platform, but in other embodiments the storage medium <b>103</b> may be external to the computer platform.

0033The computer platform also includes a display <b>107</b> for presenting the user interface <b>100</b> to the user, and a processor <b>109</b> for executing the computer software <b>105</b> provided by the storage medium <b>103</b>. Other components necessary for operation of the computer platform <b>1001</b>, although not shown are also understood to be included.

0034Each of the inner boxes <b>104</b>, <b>106</b>, <b>108</b>, <b>110</b>, <b>112</b>, <b>114</b> and <b>116</b> is a holder of information content. Some of the content is input provided by the user, and some of the content is native to the user interface itself. For example, the native information may include prompts or instructions that describe what information the user should enter. The native information may also include graphics (e.g., boxes, lines, spaces) that indicate where the user should enter the information. Further, some of the content may have been entered previously from the current or a different user, or some of the content may have been derived from direct user inputs. Some of the content may have been generated from the software or other type of application that is controlling, maintaining and/or utilizing the user interface <b>100</b>.

0035In some embodiments, the portion of the box <b>102</b> that is not occupied by the smaller inner boxes also holds information as the inner boxes do.

0036The content of each of the inner boxes changes over the course of a user session. As their content changes, the inner boxes may expand or contract. In at least one embodiment, the inner boxes expand or contract in the vertical dimension, with the outer box <b>102</b> being anchored (i.e., stationary) at the top edge, and expanding or contracting at the bottom to accommodate the size of its children. This, however, is merely an exemplary embodiment, and other expansion/contraction schemes can alternatively be used.

0037In operation, the user interface <b>100</b> guides the user through a stepwise process of entering information. Each of the inner boxes <b>104</b>, <b>106</b>, <b>108</b>, <b>110</b>, <b>112</b>, <b>114</b> and <b>116</b> of the user interface <b>100</b> corresponds to a particular task. An inner box is “open” while it is collecting input from the user for the corresponding task, and “closed” while awaiting the user's attention or presenting summary information to the user. In some embodiments, while a particular inner box is open, rest of the inner boxes are closed, although in other embodiments more than one box may be open.

0038In at least one embodiment, the stepwise process described above requires the user to complete all of the required input actions for a particular box before the user can proceed to the subsequent box. In general, the user cannot complete only a portion of a box, expecting to return to that box at a later time.

0039In some embodiments, an “accordion” component of the user interface <b>100</b> provides for opening one inner box at a time, which keeps the user focused on the task at hand. When the user completes one step in the process, the accordion component closes the open box as it opens a new one. In the described embodiment, visual transitions between open and closed state smoothly animated. In other words, as an inner box transitions from open to closed (or closed to open), the size of the box changes gradually. The effect is a seamless flow from one logical step of the process to the next.

0040In some embodiments, the user interface <b>100</b> includes groups of related boxes, so that one box from each “group” can be open at a time, with other boxes from that group closed. A group of related boxes may have a relationship or link to one or more of the other groups, although such a relationship or link is not necessary.

0041A “summarizing accordion” transition provides the visual transition described above, but also provides a summary view of the contents of the inner box once it is closed. In other words, once the inner box is closed it only displays a summary of the content contained within. This summary view of the inner box contents may be displayed without the accordion transition described above.

0042The following sections describe implementation details of the user interface <b>100</b> described above. This particular implementation is only one example of how the user interface <b>100</b> may be carried out, and is not intended to be limiting.

0000Object Framework

0043The internal framework for this user interface is made up of three abstract component classes, (i) TaskSequence, (ii) Task, and (iii) TaskView. The responsibilities of each class are shown in the table below. <tables id="TABLE-US-00001" num="1"><table frame="none" colsep="0" rowsep="0"><tgroup align="left" colsep="0" rowsep="0" cols="3"><colspec colname="OFFSET" colwidth="14PT" align="left" /><colspec colname="1" colwidth="56PT" align="left" /><colspec colname="2" colwidth="147PT" align="left" /><thead><row><entry /><entry /></row><row><entry /><entry namest="OFFSET" nameend="2" align="center" rowsep="1" /></row><row><entry /><entry>Class Name</entry><entry>Responsibility</entry></row><row><entry /><entry namest="OFFSET" nameend="2" align="center" rowsep="1" /></row></thead><tbody valign="top"><row><entry /><entry>TaskSequence</entry><entry>Represents the accordion control as a whole.</entry></row><row><entry /><entry /><entry>Manages its array of Task children.</entry></row><row><entry /><entry>Task</entry><entry>Represents an inner box within the accordion</entry></row><row><entry /><entry /><entry>control. Communicates state changes to its</entry></row><row><entry /><entry /><entry>parent TaskSequence. Manages a set of</entry></row><row><entry /><entry /><entry>TaskView children, only</entry></row><row><entry /><entry /><entry>one of which may be shown at a time.</entry></row><row><entry /><entry>TaskView</entry><entry>Represents one possible view of a Task.</entry></row><row><entry /><entry namest="OFFSET" nameend="2" align="center" rowsep="1" /></row></tbody></tgroup></table></tables>

0044A TaskSequence has the properties shown in the table below. <tables id="TABLE-US-00002" num="2"><table frame="none" colsep="0" rowsep="0"><tgroup align="left" colsep="0" rowsep="0" cols="3"><colspec colname="OFFSET" colwidth="14PT" align="left" /><colspec colname="1" colwidth="56PT" align="left" /><colspec colname="2" colwidth="147PT" align="left" /><thead><row><entry /><entry /></row><row><entry /><entry namest="OFFSET" nameend="2" align="center" rowsep="1" /></row><row><entry /><entry>Property</entry><entry /></row><row><entry /><entry>Name</entry><entry>Meaning</entry></row><row><entry /><entry namest="OFFSET" nameend="2" align="center" rowsep="1" /></row></thead><tbody valign="top"><row><entry /><entry>complete</entry><entry>Becomes true when the user completes all</entry></row><row><entry /><entry /><entry>Tasks in the sequence.</entry></row><row><entry /><entry>openTask</entry><entry>A reference to the Task child that is</entry></row><row><entry /><entry /><entry>currently open. If all Tasks are closed,</entry></row><row><entry /><entry /><entry>is empty (null).</entry></row><row><entry /><entry namest="OFFSET" nameend="2" align="center" rowsep="1" /></row></tbody></tgroup></table></tables>

0045A Task has the properties shown in the table below. <tables id="TABLE-US-00003" num="3"><table frame="none" colsep="0" rowsep="0"><tgroup align="left" colsep="0" rowsep="0" cols="3"><colspec colname="OFFSET" colwidth="14PT" align="left" /><colspec colname="1" colwidth="49PT" align="left" /><colspec colname="2" colwidth="154PT" align="left" /><thead><row><entry /><entry /></row><row><entry /><entry namest="OFFSET" nameend="2" align="center" rowsep="1" /></row><row><entry /><entry>Property</entry><entry /></row><row><entry /><entry>Name</entry><entry>Meaning</entry></row><row><entry /><entry namest="OFFSET" nameend="2" align="center" rowsep="1" /></row></thead><tbody valign="top"><row><entry /><entry>complete</entry><entry>If false, the task requires user interaction before</entry></row><row><entry /><entry /><entry>the sequence can advance to the next task.</entry></row><row><entry /><entry>open</entry><entry>If true, the task is showing its open view.</entry></row><row><entry /><entry /><entry>If false, the task is showing its closed view.</entry></row><row><entry /><entry /><entry>Only the parent TaskSequence may modify this</entry></row><row><entry /><entry /><entry>property.</entry></row><row><entry /><entry>openView</entry><entry>The TaskView to be shown if the Task is open.</entry></row><row><entry /><entry>closedView</entry><entry>The TaskView to be shown if the Task is closed.</entry></row><row><entry /><entry>currentView</entry><entry>The TaskView to be shown currently.</entry></row><row><entry /><entry namest="OFFSET" nameend="2" align="center" rowsep="1" /></row></tbody></tgroup></table></tables>

0046The TaskSequence maintains the following invariants in management of its Task children: <ul id="ul0001" list-style="none"><li id="ul0001-0001" num="0000"><ul id="ul0002" list-style="none"><li id="ul0002-0001" num="0047"> (1) At most one of its Task children may be open at any time; </li><li id="ul0002-0002" num="0048"> (2) The openTask may not be later in the sequence than the earliest incomplete Task. Completeness of a Task is not absolute; once a Task becomes complete, if the state of the application changes in such a way as to render the Task incomplete, the TaskSequence must respond by updating its display, enforcing the second invariant. <br /> State Transitions </li></ul></li></ul>

0049The TaskSequence receives notification of any event that may require its display to change, including:

0050(1) A change in the complete property of any child Task;

0051(2) A change in the openView property of any child Task;

0052(3) A change in the closedView property of any child Task;

0053(4) A user request to open a specific Task;

0054(5) A user request to close the open Task;

0055(6) The addition of a new Task to the list of children;

0056(7) The removal of a child Task.

0057The TaskSequence responds to notification by re-evaluating its open task, then assigning to each child Task either its openView or closedView, depending on whether it is open or closed. If the currentView of any child Task has changed, the TaskSequence mediates an animation sequence that brings all new TaskViews into view and resizes the entire display accordingly. The sequence of events is as illustrated in <figref idref="DRAWINGS">FIG. 2</figref>.

0058Alternatively, the TaskSequence may only assign a view to the two TaskViews that are affected, while leaving the other TaskViews alone.

0059In the transition diagram of <figref idref="DRAWINGS">FIG. 2</figref>, the messages between the TaskSequence and Task are parallel, with one message sent or received per Task in transition. Setting the current view does not effect an immediate change in the display.

0060As described above, the TaskSequence and Tasks are responsible for dispatching state change events to other objects, allowing the outside application to respond interactively to changes in the sequence.

0000Application to Checkout

0061The summarizing accordion view is a specialization of the framework described above. The specialization adds the following logic to the framework. <ul id="ul0003" list-style="none"><li id="ul0003-0001" num="0000"><ul id="ul0004" list-style="none"><li id="ul0004-0001" num="0062"> (1) At start time, the application initializes the closedView of each Task to a simple display that indicates that the Task has not yet been completed. The openView of each Task is not yet set. </li><li id="ul0004-0002" num="0063"> (2) When a Task signals that it is opening, the application assigns it an openView based on the application state. For example, if a pre-registered user advances to the “payment information” task, the task presents a view that includes options that would not be available to a non-registered user. The view shown depends on the application state. </li><li id="ul0004-0003" num="0064"> (3) When the user enters information for a particular Task, the application assigns the Task a closedView that displays a summary of the information the user entered. For example, once the user has entered payment information, the closed “payment information” task shows a summary of the payment information. </li></ul></li></ul>

0065<figref idref="DRAWINGS">FIG. 3</figref> shows another embodiment of a user interface <b>100</b> as described herein. <figref idref="DRAWINGS">FIG. 3</figref> shows an e-commerce site with a “shopping cart” area <b>140</b> and a “checkout” area <b>142</b>. In <figref idref="DRAWINGS">FIG. 3</figref>, the user has selected several items <b>144</b>, <b>146</b> and <b>148</b>, which are shown in the cart area <b>140</b>. Once the user is finished shopping, the user selects the “checkout” button <b>150</b> in the checkout area <b>142</b>, resulting in the view shown in <figref idref="DRAWINGS">FIG. 4</figref>.

0066<figref idref="DRAWINGS">FIG. 4</figref> shows four “inner boxes” as described above; a login box <b>160</b>, a shipment box <b>162</b>, a payment box <b>164</b>, and a review box <b>166</b>. In this embodiment, there is no “parent” box containing several inner boxes, but rather four separate boxes corresponding to the “inner” boxes described above.

0067As each of the boxes in <figref idref="DRAWINGS">FIG. 4</figref> is opened, it expands to show detailed data entry items such as “email” <b>168</b> and “password” <b>170</b> in the login box <b>160</b>, while the other boxes remain small with only title information displayed.

0068Once logged in, the shipment box <b>162</b> opens as shown in <figref idref="DRAWINGS">FIG. 5</figref>, while the login box <b>160</b> becomes the logout box. When open, the shipment box <b>162</b> expands to show a number of entry items, such as name <b>172</b>, shipping address <b>174</b> and shipping method <b>176</b>.

0069After the user enters all of the data required for the shipment box <b>162</b>, the shipment box <b>162</b> collapses and the payment box <b>164</b> expands, as shown in <figref idref="DRAWINGS">FIG. 6</figref>. As shown, the collapsed shipment box <b>162</b> now displays a summary of the information entered in the step corresponding to <figref idref="DRAWINGS">FIG. 5</figref>. The user now completes the entry items in the open payment box shown in <figref idref="DRAWINGS">FIG. 6</figref>, such as credit card type <b>180</b> and credit card number <b>182</b>.

0070<figref idref="DRAWINGS">FIG. 7</figref> shows how an expanded box <b>164</b> can provide guidance to the user when the user interface receives an unexpected input. In <figref idref="DRAWINGS">FIG. 7</figref>, the user has entered an invalid credit card number. The user interface provides a message <b>184</b> to the user specifically pointing out where the error occurred.

0071The invention may be embodied in other specific forms without departing from the spirit or essential characteristics thereof. The present embodiments are therefore to be considered in respects as illustrative and not restrictive.