SYSTEM, METHOD AND USER INTERFACE FOR DESIGNING CUSTOMIZABLE PRODUCTS FROM A MOBILE DEVICE
A methodology and user interface enabling a user to create and edit a product design from an electronic device includes features that are particular optimal for designing customized products from mobile devices. By integrating form control with WYWIWYG presentation and including zoom and edit control independently and directly associated with the visual presentation element itself, users of mobile device experience a cleaner simplified design process, leading to more satisfied customers.
1 . A user interface for customizing a product design, comprising:
a preview container containing a visual representation of the design displayed on an electronic display, the visual representation of the design depicting the design in its current form in a What-You-See-Is-What-You-Get (WYSIWYG) depiction, the visual representation of the design having a plurality of customizable elements that are individually selectable by a user via direct touch on a corresponding area of the electronic display;
a plurality of user interface controls, the plurality of user interface controls comprising:
a form control responsive to user input to set the form control into one of a plurality of form control states including at least an expanded state, a contracted state, and a partially contracted state, wherein
the expanded state is configured to expose for display on the electronic display a plurality of user-editable form fields corresponding to the plurality of customizable elements of the visual representation of the design and wherein each user-editable field is configured to receive content from the user whereby the received content corresponds to corresponding visual content of the corresponding element in the visual representation of the design,
the contracted state is configured to hide the user-editable form fields from view on the electronic display, and
the partially contracted state is configured to display on the electronic display only the user-editable form fields corresponding to currently selected elements in the visual representation of the design;
a customization control responsive to user input to set the customization control into one of a plurality of customization control states including at least a contracted customization control state in which an expanded set of customization option controls is hidden from view on the electronic display and an expanded customization control state in which the expanded set of customization option controls is exposed for view on the electronic display and for user interaction, the set of customization controls configured to allow the user to configure different visual features of the visual content of the respective elements in the visual representation of the design;
wherein the preview container is configured to allow a user to scroll and zoom the visual representation of the design within the preview container without simultaneously scrolling or zooming the user interface controls on the electronic display, and
wherein direct touch selection of an individual customizable element on the visual representation of the design triggers display of the form control configured in the partially contracted state.
2 . A method for enabling a user of an electronic device to customize a product design via a user interface displayed on an electronic device, the method comprising:
displaying in the user interface a design within a container, the design comprising a plurality of individually selectable elements, the container configured to allow zooming and scrolling of the design within the container;
displaying, within the user interface and outside the container, a plurality of design editing controls;
receiving at least one of a zoom event and a scroll event associated with the container and performing corresponding zooming or scrolling action to zoom or scroll the design within the container, wherein the design editing controls are unaffected by zooming or scrolling action;
receiving at least one selection event within the container, the at least one selection event corresponding to use selection of an individual element of the design;
receiving at least one design editing control events and performing a corresponding design edit action associated with the received design editing control event, the action performed on the selected individual element of the design.
3 . The method of claim 2 , wherein the at least one selection event triggers display of a partially contracted form field control which displays a user editable input field for editing content of the selected individual element of the design.