System for exportable graphical designs with interactive linked comments between design and playback environments

• US 9,052,812 B1
• Filed: 12/08/2014
• Issued: 06/09/2015
• Est. Priority Date: 11/18/2013
• Status: Active Grant

• Current Assignee: Axure Software Solutions Incorporated
• Original Assignee: Axure Software Solutions Incorporated
• Inventors: Hsu, Victor, Smith, Martin, Hashem, Samir
• Primary Examiner(s): Durkin, James T
• Application Number:
  US14/564,022
• Publication Number:
  US 20150143270A1
• Time in Patent Office: 183 Days
• US Class Current: 1/1
• CPC Class Codes: G06F 16/957 Browsing optimisation, e.g. caching or content distillation
• CPC Class Codes: G06F 3/04817 using icons graphical or visual programming using iconic symbols G06F8/34
• CPC Class Codes: G06F 3/04842 Selection of displayed objects or displayed text elements G06F3/0482 takes precedence
• CPC Class Codes: G06F 3/04845 for image manipulation, e.g. dragging, rotation, expansion or change of colour
• CPC Class Codes: G06F 3/04847 Interaction techniques to control parameter settings, e.g. interaction with sliders or dials
• CPC Class Codes: G06F 3/04855 Interaction with scrollbars
• CPC Class Codes: G06F 3/0486 Drag-and-drop
• CPC Class Codes: G06F 40/169 Annotation, e.g. comment data or footnotes
• CPC Class Codes: G06F 8/34 Graphical or visual programming

Abstract

Various methods and systems for collaborating on the specification of an interactive graphical design are provided. An exemplary system comprises a graphical design environment. The system also comprises a note interface in the graphical design environment that displays a note field for accepting a text string from the user. The system also comprises a design player that renders the design. The system also comprises a discussion interface that: (i) is displayed in the design player consistently with the design; (ii) displays the text string from the user as a note; and (iii) accepts a comment from a second user regarding the note. The system also comprises a data store accessible to the graphical design environment and the design player. The comment is displayed in the graphical design environment after being accepted in the discussion interface.

Claims

1. A system comprising:

a first workstation that instantiates a graphical design environment that provides a drag and drop interface to a first user, wherein the drag and drop interface allows a first user to add a widget to a design;

a note interface in the graphical design environment that displays a note field for accepting a text string from the first user;

an intermittent coded representation of the design that;

(i) is exported from the design environment; and

(ii) includes a set of at least two widgets that includes the widget;

a second workstation that instantiates a first design player that renders the design using the intermittent coded representation for a second user after the design has been exported from the graphical design environment;

a first discussion interface that;

(i) is displayed in the first design player consistently with the design;

(ii) displays the text string from the first user as a note; and

(iii) accepts a first comment from the second user regarding the note;

an interface element that;

(i) is in the first discussion interface with the note; and

(ii) when selected, places the first design player into a state wherein a selection of the widget by the second user links the note with the widget, wherein the state exposes each widget in the set of at least two widgets for selection by the second user;

a third workstation that instantiates a second design player that renders the design using a copy of the intermittent coded representation for a third user after the design has been exported from the graphical design environment;

a second discussion interface that;

(i) is displayed in the second design player consistently with the design; and

(ii) accepts a second comment from the third user; and

a data store that is accessible to the graphical design environment and the first design player, and that is not accessible to the second design player;

wherein the first comment is displayed in real time in the graphical design environment after being accepted in the first discussion interface;

wherein the second comment is displayed in the graphical design environment after being accepted in the second discussion interface, saved to disk, and imported into the data store; and

wherein the text string and comment are stored in the data store along with an indication of the widget selected by the second user.

2. The system of claim 1, further comprising:

a scrollbar for the first discussion interface;

wherein the scrollbar allows the second user to scroll through a set of notes that are each associated with different portions of the design while viewing a fixed portion of the design; and

wherein the set of notes includes the note.

3. The system of claim 1,

wherein:

the first and second design players are web browsers;

the design is a web site design; and

the second workstation provides a comment field in the first discussion interface for accepting the first comment from the second user.

4. The system of claim 1, further comprising:

a link in the first comment;

wherein selecting the link navigates the first user to a point of the design associated with the first comment.

5. The system of claim 1, further comprising:

a subscription management interface that accepts a subscription type selection from the first user;

wherein the subscription type selection includes a real time or daily delivery option; and

wherein the first comment is delivered to the first user via email in accordance with the subscription type selection from the first user.

6. The system of claim 1, further comprising:

a selection reticle displayed by the first design player and surrounding the widget;

wherein the selection reticle is displayed when the note is selected in the first discussion interface.

7. The system of claim 1, wherein

the text string is restricted such that it can only be edited by a predetermined set of users.

8. The system of claim 1, further comprising:

an expansion icon displayed in the first discussion interface with the note;

wherein selecting the expansion icon hides and displays a set of comments associated with the note; and

the set of comments includes the first comment.

9. The system of claim 1, further comprising:

a selectable icon associated with the first comment;

wherein selecting the selectable icon changes a status of the first comment.

10. The system of claim 1, wherein:

the first discussion interface displays an identifier for the first user with the note.

11. A computer-implemented method comprising:

providing a graphical design environment to a user using a processor, wherein the graphical design environment includes a drag and drop interface that allows the user to add a widget to a design;

displaying a note field in a note interface in the graphical design environment that accepts a text string from the user;

exporting the design from the graphical design environment and storing the design as an intermittent coded representation of the design in a markup language format, wherein a set of at least two widgets that include the widget are exported with the design;

rendering the design in a design player using the intermitted coded representation of the design in the markup language format;

displaying a discussion interface in the design player that;

(i) is displayed in the design player consistently with the design;

(ii) displays the text string from the user as a note;

(iii) has a scrollbar; and

(iv) accepts a comment from a second user regarding the note;

allowing the second user to use the scrollbar to scroll through a set of notes that are associated with different portions of the design while viewing a fixed portion of the design;

in response to selection of an interface element that is in the discussion interface with the note by the second user, placing the design player into a state wherein each widget in the set of at least two widgets is exposed for selection by the second user as a selected widget, and wherein selection of the selected widget by the second user links the note with the widget; and

displaying the comment in the graphical design environment after being accepted in the discussion interface;

wherein the text string and comment are;

(i) stored in a data store along with an indication of the selected widget;

(ii) read from the data store and rendered by the design player from the markup language format; and

(iii) read from the data store and displayed in the graphical design environment from a design environment format; and

wherein the data store is accessible to the graphical design environment and the design player.

12. The computer-implemented method of claim 11, wherein:

a first workstation instantiates the graphical design environment for the providing step;

a second workstation instantiates the design player;

the design player is a web browser;

the design is a web site design; and

the second workstation provides a comment field in the discussion interface for accepting the comment from the second user.

13. The computer-implemented method of claim 11, further comprising:

providing a link in the comment; and

navigating the user to a point of the design associated with the comment upon selection of the link by the user.

14. The computer-implemented method of claim 11, further comprising:

displaying an expansion icon in the discussion interface with the note;

wherein selecting the expansion icon hides and displays a set of comments associated with the note; and

the set of comments includes the comment.

15. The computer-implemented method of claim 11, further comprising:

displaying a selection reticle in the design player that surrounds the widget;

wherein the selection reticle is displayed when the note is selected in the discussion interface.

16. The computer-implemented method of claim 11, further comprising:

displaying the comment in the graphical design environment in real time after the comment is accepted in the discussion interface.

17. The computer-implemented method of claim 11, further comprising:

restricting access to the text string such that it can only be edited by a predetermined set of users.

18. The computer-implemented method of claim 11, further comprising:

providing a subscription type selection option to the user via a subscription management interface, wherein the subscription type selection option includes a real time or daily delivery option; and

delivering the comment to the user via email in accordance with a selected delivery option from the subscription type selection option.

19. The computer-implemented method of claim 11, further comprising:

associating a selectable icon with the comment;

wherein selecting the selectable icon changes a status of the comment.

20. The computer-implemented method of claim 11, further comprising:

displaying an identifier for the user with the note in the discussion interface.

21. Non-transitory computer-readable media storing instructions for executing a computer-implemented method comprising:

providing a graphical design environment to a user using a processor, wherein the graphical design environment includes a drag and drop interface that allows the user to add a widget to a design;

displaying a note field in a note interface in the graphical design environment that accepts a text string from the user;

exporting the design from the graphical design environment and storing the design as an intermittent coded representation of the design in a markup language format, wherein a set of at least two widgets that includes the widget are exported with the design;

rendering the design in a design player using the intermitted coded representation of the design in the markup language format;

displaying a discussion interface in the design player that;

(i) is displayed in the design player consistently with the design;

(ii) displays the text string from the user as a note;

(iii) has a scrollbar; and

(iv) accepts a comment from a second user regarding the note;

allowing the second user to use the scrollbar to scroll through a set of notes that are associated with different portions of the design while viewing a fixed portion of the design;

in response to selection of an interface element that is in the discussion interface with the note by the second user, placing the design player into a state wherein each widget in the set of at least two widgets is exposed for selection by the second user as a selected widget, and wherein selection of the selected widget by the second user links the note with the widget; and

displaying the comment in the graphical design environment after being accepted in the discussion interface;

wherein the text string and comment are;

(i) stored in a data store along with an indication of the selected widget;

(ii) read from the data store and rendered by the design player from the markup language format; and

(iii) read from the data store and displayed in the graphical design environment from a design environment format; and

wherein the data store is accessible to the graphical design environment and the design player.

22. The non-transitory computer-readable media of claim 21, wherein:

a first workstation instantiates the graphical design environment for the providing step using a first portion of the computer-readable media;

a second workstation instantiates the design player using a second portion of the computer-readable media;

the design player is a web browser;

the design is a web site design; and

the second workstation provides a comment field in the discussion interface for accepting the comment from the second user.

23. The non-transitory computer-readable media of claim 21, wherein the method further comprises:

receiving a selection of a link in the comment from the user; and

focusing a display of the design on a point of the design associated with the comment after receiving the selection of the link in the comment from the user.

24. The non-transitory computer-readable media of claim 21, wherein the method further comprises:

displaying an expansion icon in the discussion interface with the note;

wherein selecting the expansion icon hides and displays a set of comments associated with the note; and

the set of comments includes the comment.

25. The non-transitory computer-readable media of claim 21, wherein the method further comprises:

displaying a selection reticle in the design player that surrounds the widget;

wherein the selection reticle is displayed when the note is selected in the discussion interface.

26. The non-transitory computer-readable media of claim 21, wherein the method further comprises:

displaying the comment in the graphical design environment in real time after the comment is accepted in the discussion interface.

27. The non-transitory computer-readable media of claim 21, wherein the method further comprises:

restricting access to the text string such that it can only be edited by a predetermined set of users.

28. The non-transitory computer-readable media of claim 21, wherein the method further comprises:

receiving a subscription type selection option from the user to switch a comment subscription frequency between daily and real time;

receiving a second text string from the second user via the design player, wherein the second text string is stored as a second comment on the note in the data store; and

delivering the second comment to the user via email in real time after the second comment is received in the design player in the second text string receiving step.

29. The non-transitory computer-readable media of claim 21, wherein the method further comprises:

associating a selectable icon with the comment;

wherein selecting the selectable icon changes a status of the comment.

30. The non-transitory computer-readable media of claim 21, wherein the method further comprises:

displaying an identifier for the user with the note in the discussion interface.