Patent Application
20150135127
This relates to a computer-based graphical user interface (GUI) for marketing greeting cards to a customer on a website and enabling the customer to customize the greeting cards.
Vendors of greeting cards have websites that provide a graphical user interface (GUI) for marketing greeting cards. A customer uses the GUI to upload a photograph and select a greeting card template. The website combines the photograph with the template to yield a customized greeting card that the customer can purchase.
A system stores, in a database, different stock templates and also, for each stock template, a stock image to be displayed with the template. The system receives a user-designated image. The system then displays items simultaneously. Each item incorporates a different one of the stock templates along with the respective template's stock image. The system provides an image selector that is in a first position and capable of being switched by the user to a second position. Each time a user switches the selector to the second position, the system transforms the images in the displayed items simultaneously to the user-designated image. Each time the user switches the selector to the first position, the system transforms the images in the displayed items simultaneously to the items' respective stock images.
In another example, the system displays greeting cards simultaneously, each card incorporating a different one of the stock templates along with the respective stock text. The system receives user entry of a first user-designated text, and replaces the stock texts in all the displayed cards simultaneously with the first user-designated text. The system then receives user entry of a second user-designated text, and replaces the first user-designated text in all the displayed cards simultaneously with the second user-designated text.
In yet another example, the system displays, on a display screen, a front view of a card for sale. The front view includes a front plan view in which a front surface of the card appears to be parallel with a front surface of the screen. The front view further includes the card being portrayed on the screen as rotating oscillatorily while remaining less than 90 degrees from the front plan view
A graphical user interface (GUI) is used for selecting and customizing products that are decorated with an ornamental design. The GUI displays product items, with different candidate design templates, to a user such as a potential customer. The user uses the GUI to customize the designs of the displayed product items, to select one of the items, and to purchase a product with the customized design.
The product items may be, for example, art prints, business cards, posters, flyers, brochures, stationery, calendars, event (e.g., wedding and party) invitations, personal journals (with a decorative cover and blank inner pages for writing in), and greeting cards. These design products typically comprise printed paper medium and have a utilitarian function, such as providing information (e.g., regarding a contact, a scheduled event and personal notes). In this example, the products are greeting cards.
Besides storing the software code, the storage medium includes a database 104 that stores images and text provided by the user. The database 104 also stores design templates and data relating to each template. For each template, the data includes features such as a stock image set (one or more stock images to be included in the template), different possible stock greetings (text heading on a card's front indicating the primary subject or purpose of the card), different possible stock messages (sentences following the greeting), and different stock colors to accompany the template. For each template, the data further includes different rankings that differ from each other in terms of which statistical method the respective ranking was derived with (such as whether derived from popularity analysis and or machine learning) and that differ from each other in terms of the sampled population (e.g., whether the population comprises all customers or is specific to a demographic group or to a geographic area or to the current customer requesting a search).
The database 104 also stores information about ancillary merchandise items. Ancillary merchandise items are products that are not what the user is searching for. In this example, where the user is searching for greeting cards, example ancillary items are typically print-on-paper items such as business cards, posters, flyers, brochures, stationery, calendars, event invitations, and personal journals. Examples of ancillary items that are not print-on-paper are stationery-related products (e.g., pens and rulers) and non-stationery-related products (e.g., clothing items imprinted with images and text).
The GUI is provided on a user's computing device 110. Examples of user computing devices are a personal computer (PC) and a mobile communication device such a smart phone. Each user device has a processor 111 and a data storage medium 112. It also has a user interface that includes a display screen 113 and a user input device 114. The input device 114 may include a mouse, a keypad and a touch-screen for inputting user entries. The user device may communicate through a network such as the Internet 120 with the web server 101 that implements the website GUI. Alternatively, some or all of the software code for implementing the GUI may be stored in the data storage medium 112 of the user device 110 and executed by the user device's processor 111, such that a server or network connection is unnecessary.
The images 320 that are imported into the image designation window 300 (in the various ways described above) together comprise “user-designated” images. The user may drag the user-designated images 320 to distribute them into one or more image set boxes 311, 312, 313 in the image designation window 300. In this example, the first image set box 311 contains a first image set 321, the second image set box 312 contains a second image set 322, and the third image set box 313 has not yet received any images from the user. In each designated image box 311, 312, 313, the user may also delete images, duplicate images, rearrange their order, and drag 305 them to another image set box.
The user may use software application features of the GUI to provide color adjustment, red-eye correction, transformation into sepia or black-and-white, cropping, rotation, aspect ratio adjustment, and other image processing operations. Some or all of the image processing can, alternatively, be done by the server without user input.
Additionally or alternatively, the criteria designation window 400 may include a dropdown feature selection menu 421 displaying a list of card features (e.g., greeting, dimensions, color, mood, peripheral shape, number of images, font, structure and style). When the user selects one of the features, a “Select Option” dropdown menu 422 displays a list of category options relating to the selected feature, for the user to choose from. For example, selecting the “Greeting” feature might yield the options “Merry Christmas”, “Happy Birthday” and “Type your greeting here”. Selecting a “Message” feature might yield different suggested messages, along with “Type your message here”.
Selecting a “Color” feature might yield different suggested colors, or color combinations (e.g., “red & green”) or a non-color term (e.g., “American flag” or “Christmas”) that is associated with colors for the card to have (such as red, white and blue for flag, and green and red for Christmas).
The criteria designation window 400 also displays a “Search String” field 423 for typing a search string. The search string may be, for example, a server-designated category like the categories listed above. Or the search string may be a term that is not a category, such as a greeting phrase to be compared to the stock greetings. Or the search string may be a key word to be compared to key words assigned in the database to each template.
The server 101 (
The same ranking and filtering scheme used for determining the most closely matching greeting cards may be used to determine a predetermined number, in this case three, of the ancillary merchandise items from the database 102 that most closely match the user-designated criteria.
The nine displayed items—six greeting cards 501 and three ancillary products 511—are arranged in the window 500 in an array (matrix) whose dimensions (number of rows R and number of columns C) are determined by the server to best match the number and shapes of displayed items. R and C are preferably at least two, and are respectively three and four in this example. Each card's location on the array may be based on one or more of its ranking values.
The ancillary items 511 occupy locations (positions) of the array that are interspersed among the cards 501. The interspersing may be achieved by, for example, the following features: At least one, and preferably all, of the ancillary items 511 has at least two, and preferably at least three, and more preferably at least four vertically-neighboring and horizontally-neighboring locations occupied by a greeting card 501. For some or all of the ancillary items 511, no two ancillary items are in vertically-neighboring or horizontally-neighboring or diagonally-neighboring array locations. This arrangement of ancillary items 511 being intermingled with, and on the same array grid as, the greeting cards 501 helps give the user an impression that the ancillary items 511 are part of the search results for the user-requested search, as opposed to merely advertisements unrelated to the user-requested search.
The GUI includes an image selector 530, to be actuated with the input device 114 (
The displayed ancillary items 511 can, like the displayed cards 501, have spaces that initially hold stock images. Those stock images in the ancillary items can, as in the cards, be replaced with the first image set 321 (
Operation of this selector 530 provides user control of the transformation process, which is amusing to the user and gives the user the impression of being in control of the design customization.
It also helps the user appreciate how well his/her designated image set 321 goes with each item 501. It also facilitates a comparison of how well a user-designated image 321 goes with each item 501, 511 relative to the stock image that the item designer considered optimal for that item. It also facilitates comparison of how well one user-designated image set 321 goes with each item 501, 511 relative to another user-designated image set 322 that the user him/herself previously considered optimal for that item.
Alternatives for the image selector 530 are as follows: The image selector may be one or more hardware or virtual keyboard keys, such as by pressing a right carrot key (>) to trigger each successive forward transformation and pressing a left carrot key (<) to trigger each successive reverse transformation. Alternatively, the GUI feature that causes the transformations may be movement of a cursor along a virtual stationary track, without showing any button, in a forward direction to cause a forward transformation and in a reverse direction to cause a reverse transformation. Alternatively, a user can select (such as by clicking or touching) one of the image boxes 311, 312 to cause all of that box's images to replace the images in all displayed items simultaneously. Alternatively, the forward transformation may occur automatically, soon after the items 501, 511 are displayed, and not be triggered by user input.
In a variation from the above example where all templates are initially displayed with their respective stock images, one or more of the templates can be initially displayed with the user-designated images. Cards embodying the template designer's image picks are thus intermingled with cards embodying the user's image picks. This gives the user a feeling that he/she is working in conjunction with the templates' professional designers, and that the user's work product is on par with that of professional designers.
Even after the image transformations have occurred, the user can add images to and delete images from the image set boxes 311, 312, 313. The user can also drag 305 (
While the items 501, 511 are displayed, the user can apply changes to all items 501, 511 using a feature-modification section 550 of the card display window 500 as follows: The user can open a dropdown feature-selection window 551 displaying a list of features (e.g., greeting, message, font, color). When the user selects one of the features, a feature-options dropdown menu 552 displays a list of options relating to the selected feature for the user to choose from. For example, if the user selects the “Greeting” feature, the option list can be “Merry Christmas”, “Thank You”, “Happy Birthday” and “Type your greeting here”. When an option is selected, such as the user typing a greeting in the “Type your greeting here” option, each item's greeting changes to the selected greeting for all displayed items 501, 511 simultaneously. If the user selects the “Color” feature, the option list 552 may be, for example, “Red”, “Green” and “Type a color here”. Or, the GUI may display a color wheel from which the user can select a color. The color selection may affect color or color tint of background or text or image, in either a user image or stock image for all items simultaneously. The “Options” menu 552 for the “Color” feature might also include a non-color term (e.g., “American flag” or “Christmas”) that is associated with colors for the card to have (such as red, white and blue for flag, and green and red for Christmas).
Additionally or alternatively, the feature modification section 550 may include a color selector comprising squares 560 of different colors. Selecting (e.g., clicking or touching) a square applies that square's color to all displayed items 501, 511.
A list of features (e.g., greeting, font, background, image) may appear beside the colored squares 560 for the user to select which of the cards' feature the selected square's color will be applied to. Alternatively, the server 101 (
The feature change may occur gradually, so that the user can perceive a previous greeting gradually disappearing while being gradually replaced with the new greeting.
The feature modification section 550 may appear continuously in the item display window 500 or may appear in a pop-up dialog window (not shown) so as not to take up space in the item display window 500 when not used.
Like the image transformations, any feature change applied to the displayed cards 501 may be concurrently applied to the displayed ancillary items 511. For example, if an ancillary item 511 is an envelope, calendar, or cap, its features (e.g., greeting, color) may be changed simultaneously with the changes in corresponding features in the displayed cards 501. Having the ancillary items 511 change simultaneously with and in agreement with the changes in the cards 501 gives the user an impression that the ancillary items 511 are associated with and belong with the cards 501 and should therefore be purchased along with the cards, even though the user was initially searching for only cards.
After the present web session ends and the user logs off from the website, the image sets 321, 322 are stored in the server's database 102 (
The GUI enables the user, before or after image transformations and feature changes have been done, to drag the items 501, 511 to rearrange them on the array, which changes the positions of the items 501, 511 in the array. The rearrangement may be done, for example, to arrange the items in order of user preference.
The GUI also enables the user to delete items 501, 511 from the array, leaving only a subset of the previously displayed items. So, in this example, the initial set of six cards 501 and three ancillary items 511 may be narrowed to only cards or to only ancillary items, or to one or two cards with one or two ancillary items. The set of items 501, 511 that have been thus rearranged and reduced in number can be then further modified (changed, transformed) by the user using the same changes and transformations explained above. The subset of items can be further narrowed by successively eliminating items from the array until even only one last item (either a card or an ancillary item) is left. And even that one last item may be modified by the user using the same image transformations and feature changes explained above for the initial set and subset.
Each time one or more items are eliminated from the array, the server may reconfigure the array dimensions based on the reduced number of items to be viewed. For example, the initial 3×3 (three row by three column) array to handle nine items may be changed to 2×3 if only six items are left. Alternatively, since the user might keep track of each item based on that item's position, the GUI may keep retained items in their previous array positions as other items are deleted, leaving empty spaces where the deleted items previously were.
Each card is displayed in front plan view, in that the card's front surface appears to be parallel with the display screen's front surface and faces directly forward. Each displayed card is essentially only two dimensional. That is because each card's peripheral surfaces (i.e., top surface, bottom surface and two opposite side surfaces) have negligible thickness (essentially paper thin) and carry no information or design. So tilting a card (by computer animation) on the display screen 500 to display its peripheral surfaces to the user provides the user no useful information regarding the peripheral surfaces. However, tilting the card does provide the user information about its front surface, including a clearer understanding of the front surface's texture (e.g., fine or coarse), contour (e.g., if embossed and debossed sections, and especially if blind embossed and debossed), reflectivity and shine, and how it changes shade and brightness when reflecting light from different tilt angles. Tilting the card on the display screen 500 also gives the user a better feel and understanding of how the physical card will appear when in the hands of a recipient, since the card's design features (e.g., images, text and other motif lines) can give different impressions when viewed at different angles, which a front plan view might not convey. If a card has a laminate added to it, such as shiny foil, card rotation gives the viewer an idea of the thickness of the foil, which a front plan view cannot convey.
Accordingly, as shown in
The GUI may portray the cards 501 as levitated in air without support (as in
All the cards 501 may appear to move, as described above, continuously. Alternatively, each card 501 may initially be stationary and start moving only when it is selected (e.g., clicked or touched) by the user. This simulates the card being disturbed by the user's touch. Once started, the movement may gradually decrease (dampen), reaching a full stop by perhaps 2-4 seconds as an actual card would. Having the cards 501 remain stationary except when disturbed by the user may provide three advantages: 1) facilitates scrutiny of each card, 2) reduces mental distraction relative to having too many things continually moving, and 3) enhances realism.
The ancillary items 511 may rotate in the same manner as the cards 501, to reinforce the impression that the ancillary items 511 are associated with and belong with the cards 501.
The first trigger may comprise a selection (such as clicking or touching) by the input device 114 (
The flat and bent view images 701, 702 together comprise a transitional image that simulates an actual (physical, paper) card as follows: The flat image 701 has the same shape and appearance (in terms of peripheral shape and graphic content) as an actual card offered for sale, although it might differ in size. The bent image 702 has the same shape and appearance as the flat image 701, except for a lift tab section 730 that simulates a corner of the card being lifted away from the plane of the display screen and bent over so as to both cover (hide) only a portion of the front surface 731 of the card and expose (reveal) only a portion 732 of the rear surface of the card 501.
The card 501 has opposite first and second vertical edges 741, 742 and opposite first and second (top and bottom) horizontal edges 743, 744. The entire first vertical edge 741, the entire first horizontal edge 743, only a portion 760 of the second horizontal edge 744 and only a portion 766 of the second vertical edge 742 occupy the same pixels in the bent view 702 as they respectively do in the flat view 701.
The first transition (from the flat view 701 to the bent view 702) and the reverse transition (back to the flat view 701) may be instantaneous. Or they may be animated and gradual such that a viewer may perceive the lift tab section 730 appearing, over the course of a predetermined time (e.g., ⅓ second), to be lifted away from the plane of the screen 500 and over, to arrive at its position shown in the bent view 702. Being gradual helps the viewer understand the bent card view's relationship to the flat card view.
The lift tab section 730 in the bent view 702 of
All graphic content, such as pictures and text, on the front surface 731 that is not covered by the lift tab 730 remains unchanged and unmoved when transitioning from the flat view 701 to the bent view 702 and back again. In other words, the output of each pixel of the card 501, that is not covered by the lift tab 730, is the same when in the bent view 702 as when in the flat view 701.
Although, in this example, the lift tab 730 is shown at the card's bottom right corner, the lift tab could equivalently be at the card's bottom left corner, top left corner or top right corner. If the user selects (e.g., clicks or touches) one corner of the card, that corner may be designated by the GUI as the corner to lift.
The user may then select the remaining items on the display window 500 for purchase. The user provides payment and delivery information to the server 101. The selected items are then delivered (provided) to the user.
The components and procedures described above provide examples of elements recited in the claims. They also provide examples of how a person of ordinary skill in the art can make and use the claimed invention. They are described here to provide enablement and best mode without imposing limitations that are not recited in the claims. In some instances in the above description, a term is followed by a substantially equivalent term enclosed in parentheses.
This claims the benefit of U.S. Provisional Application No. 61/901484, filed Nov. 8, 2013, hereby incorporated herein by reference.
| Number | Date | Country | |
|---|---|---|---|
| 61901484 | Nov 2013 | US |
