KR20220018711A - Method and apparatus for providing prototype of graphical user interface - Google Patents

Abstract

Provided is an interaction scenario for a prototype of a graphic user interface (GUI). According to an embodiment of the present invention, a method for providing an interaction scenario for a prototype of a GUI includes the steps of: identifying a difference between a first version and a second version of the prototype by a prototype viewing device; and producing a second version of an interaction scenario by updating a first version of the interaction scenario, which is previously produced with respect to the first version of the prototype, based on the difference by the prototype viewing device. The prototype includes information on the trigger and a response caused by the trigger. The interaction scenario, which is previously produced with respect to the first version, may include multiple pieces of trigger information sensed while a user demonstrates the first version of the prototype.

Description

METHOD AND APPARATUS FOR PROVIDING PROTOTYPE OF GRAPHICAL USER INTERFACE

The present invention relates to a method and apparatus for providing a prototype of a graphical user interface (GUI). More particularly, it relates to a method and apparatus for generating and reproducing an interaction scenario targeting a prototype of a graphical user interface.

Terminal manufacturers, application manufacturers, and online service providers are putting much effort into the design of graphic user interfaces to increase user convenience. In the graphic user interface design process, various tools are used to produce a graphic user interface prototype. Before applying the graphical user interface to a terminal, an application, or an online service (hereinafter referred to as "application" without distinction), a graphical user interface producer, through a prototype of the produced graphical user interface, and various visual effects. In addition, graphic user interface creators can share the prototype of the graphic user interface with third parties, such as planners and developers of applications, and exchange opinions with each other. The graphical user interface produced by the graphic user interface creator is provided to the application developer in the form of a prototype, that is, a prototype, and is programmed by the developer and implemented on the application.

A graphical user interface is generally composed of not only visual objects displayed on a display, but also various interactions between the objects and a user, ie, interactions. As devices with touch screens begin to become widespread, various types of rich interactions are increasingly provided on graphic user interfaces to increase user convenience. The graphical user interface may include various interactions related to various objects, and a precedence relationship and/or a dependency relationship may exist between the interactions. Therefore, when only the prototype created by the graphic user interface creator is delivered to the developer, it is difficult for the developer to identify which interactions are included in the graphic user interface prototype and to clearly understand the operation principle. In order to clearly communicate the various interactions included in the prototype to the developer, the creator of the graphical user interface often prepares a separate document describing the interactions included in the prototype and delivers it to the developer together with the prototype. A lot of time and money is wasted in this process.

Korean Patent Publication No. 10-1818544 Korean Patent Publication No. 10-2017-0118576

The technical problem to be solved by the present invention is to provide a method and an apparatus for providing a prototype of a graphical user interface.

Another technical problem to be solved by the present invention is to provide a method and an apparatus for generating an interaction scenario targeting a prototype of a graphical user interface.

Another technical problem to be solved by the present invention is to provide a method and apparatus for reproducing an interaction scenario targeting a prototype of a graphical user interface.

Another technical problem to be solved by the present invention is to provide a method and an apparatus for effectively delivering details of interactions included in a prototype of a graphical user interface.

Another technical problem to be solved by the present invention is to provide a method and an apparatus for effectively communicating changes occurring in a prototype of a graphical user interface.

Another technical problem to be solved by the present invention is to provide a method and an apparatus for reflecting changes occurring in a prototype of a graphical user interface in a pre-made interaction scenario.

The technical problems of the present invention are not limited to the technical problems mentioned above, and other technical problems not mentioned will be clearly understood by those skilled in the art from the following description.

In order to solve the above technical problem, a method for providing a prototype of a graphical user interface (GUI) according to an embodiment of the present invention is provided, in response to an interaction scenario recording start command, for a GUI prototype on a prototype authoring device. The steps of receiving a demonstration from a user, detecting a first trigger generated during the demonstration, and generating the interaction scenario including information about the first trigger, by the prototype authoring device, and transmitting the interaction scenario. In this case, the prototype may include information about the trigger and a response triggered by the trigger, the trigger may include a user input event, and the response may include a display property of an object on the prototype. may include changes.

In an embodiment, the interaction scenario further includes information about a first response triggered by the first trigger. In some embodiments, the interaction scenario further includes information about a second response automatically triggered by the first response acting as a trigger.

In an embodiment, the method for providing a prototype further includes detecting a second trigger generated during the demonstration in response to the interaction scenario recording start command, wherein the interaction scenario includes the first trigger and the second trigger. It further includes information indicating an occurrence time of each of the two triggers.

In an embodiment, generating the interaction scenario includes saving the interaction scenario as a file separate from the prototype.

In one embodiment, the trigger comprises a sensor detection event.

In order to solve the above technical problem, the method of providing a prototype of a graphical user interface (GUI) according to another embodiment of the present invention includes, by a prototype viewing device, information about a trigger generated on the GUI prototype. obtaining an interaction scenario including; and outputting, by the prototype viewing device, a response automatically triggered by a trigger included in the interaction scenario, and reproducing the interaction scenario for the prototype. include In this case, the prototype may include information about a trigger and a response triggered by the trigger, the trigger may include a user input event, and the response may include a change in display property of an object on the prototype may include

In an embodiment, reproducing the interaction scenario with respect to the prototype includes visualizing the occurrence of the trigger included in the interaction scenario on the prototype. In some embodiments, the trigger comprises a trigger of a first type and a trigger of a second type, wherein visualizing the occurrence of the trigger comprises: visualizing the occurrence of the first type of trigger as a first indication attribute; and visualizing the occurrence of the second type of trigger as a second indicative attribute.

In an embodiment, the method for providing the prototype further includes displaying a property of the trigger included in the interaction scenario.

In an embodiment, the method for providing the prototype further includes displaying a property of the response.

In an embodiment, reproducing the interaction scenario with respect to the prototype includes displaying a change in a display property value of an object included in the prototype over time.

In an embodiment, the step of reproducing the interaction scenario with respect to the prototype includes obtaining a user input for selecting a part of the interaction scenario, and reproducing a part of the selected interaction scenario. . In this case, the user's input for selecting a part of the interaction scenario is an input for selecting part of one or more triggers included in the interaction scenario, or selecting part of one or more responses caused by the one or more triggers. It can be an input.

In one embodiment, the step of reproducing the interaction scenario for the prototype includes displaying the output result of the response on a first screen and displaying a trigger and a response included in the interaction scenario on a second screen, The response includes a first response output when the trigger is generated and a first condition is satisfied, and a second response output when the trigger is generated and the first condition is not satisfied; The method further includes outputting the first response when the first condition is satisfied, and visually distinguishing between a GUI object pointing to the first response and a GUI object pointing to the second response.

In some embodiments, the step of reproducing the interaction scenario for the prototype may include, when a condition change demonstration input through a user interface for forcibly outputting the second response in the first condition satisfaction situation is provided, The method further includes outputting the second response.

In some embodiments, the outputting of the second response may include displaying a display indicating that the GUI object pointing to the second response is forcibly output, overlaid on the GUI object pointing to the second response, or displaying the second response. and displaying adjacent to the GUI object pointing to.

In an embodiment, the interaction scenario includes data about a comment and a target of the comment, and the target of the comment includes a part of the prototype, a part of the interaction scenario, a trigger included in the interaction scenario, and a response triggered by the trigger, wherein the reproducing the interaction scenario for the prototype includes displaying the comment in data about a target of the comment.

In an embodiment, the method for providing the prototype further includes displaying a GUI object indicating a start time and duration of the response.

In an embodiment, the interaction scenario and the prototype may be provided as an electronic document that can be read through a web browser.

In order to solve the above technical problem, a method for providing a prototype of a graphical user interface (GUI) according to another embodiment of the present invention is a GUI prototype on a prototype authoring device in response to an interaction scenario recording start command receiving a user's demonstration of by, transmitting the interaction scenario, acquiring the interaction scenario by the prototype viewing device, and by the prototype viewing device, a response automatically triggered by a trigger included in the interaction scenario and reproducing the interaction scenario for the prototype by outputting it. In this case, the prototype may include information about a trigger and a response triggered by the trigger, the trigger may include a user input event, and the response may include a change in display property of an object on the prototype may include

In order to solve the above technical problem, a method for providing an interaction scenario for a prototype of a graphical user interface (GUI) according to another embodiment of the present invention is provided with a first version of the prototype by a prototype authoring device identifying a difference between a second version; and updating, by the prototype authoring device, a first version of an interaction scenario previously generated for the first version of the prototype based on the difference, so that the interaction generating a second version of a scenario, wherein the prototype includes information about the trigger and a response triggered by the trigger, and the interaction scenario pre-created for the first version includes: and information regarding a plurality of triggers detected during the user's demonstration of the first version of a type.

In one embodiment, identifying the difference comprises identifying a trigger added to the second version of the prototype, and generating the second version of the interaction scenario comprises: It may include obtaining a user input for a position where the trigger is to be inserted.

In an embodiment, the obtaining of a user input for a position where the added trigger is to be inserted may include obtaining a user input for selecting any one trigger among triggers included in the first version of the interaction scenario. And, it may include the step of inserting the added trigger immediately before or after any one of the trigger.

In an embodiment, obtaining a user input for a location at which the added trigger is to be inserted comprises: displaying a timeline of the first version of the interaction scenario; a user selecting a specific location on the timeline obtaining input.

In one embodiment, the step of identifying the difference comprises identifying a trigger deleted from the first version of the prototype and a trigger added to the second version of the prototype, wherein: The generating of the second version may include determining a similarity between the deleted trigger and the added trigger.

In an embodiment, the generating of the second version of the interaction scenario includes replacing the deleted trigger with the added trigger in the first version of the interaction scenario based on a determination that the similarity is equal to or greater than a threshold. Thus, the method may further include generating the second version of the interaction scenario.

In an embodiment, determining the similarity between the deleted trigger and the added trigger may include determining a ratio in which responses triggered by each of the deleted trigger and the added trigger overlap each other. have.

In an embodiment, the determining of the similarity between the deleted trigger and the added trigger includes: a first GUI object for which a change in display property is caused by the deleted trigger, and a display property by the added trigger. The method may include determining whether the second GUI objects for which the change is caused are identical to each other.

In an embodiment, the interaction scenario may further include information about a plurality of responses triggered by the plurality of triggers detected during the user's demonstration.

In an embodiment, the interaction scenario may further include information about a response automatically triggered by at least one of the plurality of responses acting as a trigger.

In order to solve the above technical problem, a method for providing a prototype of a graphical user interface (GUI) according to another embodiment of the present invention includes information about a trigger generated on a GUI prototype by a prototype viewing device and outputting, by the prototype viewing device, a response automatically triggered by a trigger included in the interaction scenario, the first version and the first version of the interaction scenario for the prototype Reproducing the second version, wherein the prototype includes information about a trigger and a response triggered by the trigger.

In an embodiment, at least some of the triggers included in the first version of the interaction scenario and the triggers included in the second version are different from each other, or responses included in the first version of the interaction scenario and At least some of the responses included in the second version may be different from each other.

In an embodiment, the reproducing the first version and the second version of the interaction scenario includes: reproducing the first version of the interaction scenario in a first display area; and reproducing in a second display area, wherein the first version and the second version are reproduced in synchronization with each other.

In one embodiment, the reproducing the first version and the second version of the interaction scenario comprises: in response to a user's selection of a first trigger among a plurality of triggers included in the first version of the interaction scenario, Displaying a property designated for the first trigger, and displaying a property designated for a second trigger corresponding to the first trigger from among a plurality of triggers included in the second version of the interaction scenario have.

In one embodiment, the step of reproducing the first version and the second version of the interaction scenario comprises: in response to a user's selection of a first response from among a plurality of responses included in the first version of the interaction scenario, Displaying a property designated for the first response; and displaying a property designated for a second response corresponding to the first response among a plurality of responses included in the second version of the interaction scenario. have.

In an embodiment, reproducing the first version and the second version of the interaction scenario comprises: identifying a difference between the first version and the second version of the interaction scenario; based on the difference, the and semi-transparently displaying at least some objects of the first version or the second version of the interaction scenario.

In an embodiment, the reproducing the first version and the second version of the interaction scenario includes: initiating reproducing the first version of the interaction scenario; and a user requesting reproduction of the second version of the interaction scenario. obtaining an input; and in response to the user input, identifying a second response of a second version of the interaction scenario corresponding to a first response of the first version of the interaction scenario being reproduced; outputting a second response of the second version of the scenario.

In order to solve the above technical problem, a computer-readable non-transitory recording medium according to another embodiment of the present invention, by a prototype authoring device, to identify the difference between the first version and the second version of the prototype and updating, by the prototype authoring device, the first version of the interaction scenario previously generated for the first version of the prototype based on the difference to generate a second version of the interaction scenario. A computer program is stored for performing a method comprising the steps.

1 is a block diagram of a system for providing a graphical user interface prototype according to an embodiment of the present invention.
2 is a flowchart illustrating a process of performing a method of providing a prototype of a graphical user interface according to another embodiment of the present invention.
3 to 5 are diagrams for explaining a process of recording an interaction scenario of a graphical user interface prototype according to the embodiment described with reference to FIG. 2 .
6 is a flowchart illustrating a process of performing a method for providing a prototype of a graphical user interface according to another embodiment of the present invention.
7 to 12 are diagrams for explaining a process of reproducing an interaction scenario of a graphical user interface prototype according to the embodiment described with reference to FIG. 6 .
13 is a flowchart illustrating a process of performing a method of providing an interaction scenario of a prototype of a graphical user interface according to another embodiment of the present invention.
14 and 15 are diagrams for explaining in more detail some steps of the method described with reference to FIG. 13 .
16 is a flowchart illustrating a process of performing a method of providing a prototype of a graphical user interface according to another embodiment of the present invention.
17 and 18 are diagrams for explaining a process of reproducing the first version and the second version of the interaction scenario of the graphical user interface prototype according to the embodiment described with reference to FIG. 16 .
19 is a diagram illustrating an exemplary computing device that may implement various embodiments of the present invention.

Hereinafter, preferred embodiments of the present invention will be described in detail with reference to the accompanying drawings. Advantages and features of the present invention and methods of achieving them will become apparent with reference to the embodiments described below in detail in conjunction with the accompanying drawings. However, the present invention is not limited to the embodiments disclosed below, but may be implemented in various different forms, and only these embodiments allow the disclosure of the present invention to be complete, and common knowledge in the art to which the present invention pertains It is provided to fully inform those who have the scope of the invention, and the present invention is only defined by the scope of the claims.

In adding reference numerals to the components of each drawing, it should be noted that the same components are given the same reference numerals as much as possible even though they are indicated on different drawings. In addition, in describing the present invention, if it is determined that a detailed description of a related known configuration or function may obscure the gist of the present invention, the detailed description thereof will be omitted.

Unless otherwise defined, all terms (including technical and scientific terms) used herein may be used with the meaning commonly understood by those of ordinary skill in the art to which the present invention belongs. In addition, terms defined in a commonly used dictionary are not to be interpreted ideally or excessively unless clearly defined in particular. The terminology used herein is for the purpose of describing the embodiments and is not intended to limit the present invention. In this specification, the singular also includes the plural unless specifically stated otherwise in the phrase.

In addition, in describing the components of the present invention, terms such as first, second, A, B, (a), (b), etc. may be used. These terms are only for distinguishing the elements from other elements, and the essence, order, or order of the elements are not limited by the terms. When it is described that a component is “connected”, “coupled” or “connected” to another component, the component may be directly connected or connected to the other component, but another component is formed between each component. It should be understood that elements may also be “connected,” “coupled,” or “connected.”

As used herein, "comprises" and/or "comprising" refers to the presence of one or more other components, steps, operations and/or elements mentioned. or addition is not excluded.

Hereinafter, some embodiments of the present invention will be described in detail with reference to the accompanying drawings.

First, the meaning of the terms used in this specification will be described.

First of all, the "author" is a person who prototypes a graphical user interface, for example a designer. An "authoring device" is a device used to author a graphical user interface prototype and to create a scenario demonstrating the interactions implemented in the prototype.

Next, the "viewer" is a person who receives and browses the prototype authored by the author and uses the information extracted from the prototype, for example, a developer, a planner, and/or a decision maker. A "viewing device" is a device used by a viewer for viewing a prototype. The viewing device may be understood as a device for executing a prototype, or a device for reproducing or reproducing an interaction scenario for the prototype. The viewing device may be the same type of device as the target device on which the authoring target graphical user interface will ultimately be executed.

As used herein, a “trigger” is an event that causes a visual change on a graphical user interface and/or any reaction or feedback of a device in which the graphical user interface is implemented. A trigger may be a user input on the graphical user interface, other external input such as a sensor, or other event occurring on the graphical user interface. The trigger is a touch input or gesture to a touch screen provided in a device to which a graphical user interface is applied, a user input through a device such as a mouse or keyboard, and a sensor (eg, a camera, a microphone, an acceleration sensor, a gyro sensor) provided in the device. , a proximity sensor, a geomagnetic sensor, etc.) or an event generated by data measured by a sensor that provides data to the device from outside the device (eg, an illuminance sensor, a temperature sensor, a human body sensor, etc.).

As used herein, “response” refers to a response induced by a trigger. As an example, the response may be a change in display properties (position, size, transparency, color, azimuth, etc.) of an object of the graphical user interface. In this case, the output of the response may mean execution of an operation for changing the display attribute of the object. As another example, the response may be haptic feedback or sound feedback of a device in which a graphical user interface is implemented. On the other hand, a response may act as a trigger that triggers another response.

Meanwhile, a trigger may be defined to cause different responses according to a trigger occurrence condition.

An “interaction set” is a term that refers to a collection of triggers and responses triggered by the triggers.

"Interaction" is a term that comprehensively refers to the occurrence of an event detected on a graphical user interface and a process of a series of reactions in response thereto. A graphical user interface may consist of GUI objects and a series of interactions.

The "interaction scenario" is data for sequentially or out of sequence reproduction of at least some of the interactions applied to the prototype of the graphical user interface.

1 is a block diagram of a system for providing a graphical user interface prototype according to an embodiment of the present invention.

Referring to FIG. 1 , the prototype providing system may include a prototype authoring device 110 , a prototype viewing device 120 , and a prototype providing server 130 .

The prototype authoring device 110 is a device for authoring a prototype of a graphical user interface and generating an interaction scenario for the prototype. The prototype authoring device 110 may provide the authored prototype to the prototype providing server 130 or the prototype viewing device 120 . The prototype authoring device 110 may be the same type of device as the target device to which the authoring target graphical user interface is applied, or may be a different type of device. In the process of authoring and/or demonstrating the prototype, the target device is wired or wirelessly connected to the prototype authoring device 110 to input or define a trigger to be included in the prototype, or to check a response triggered by the trigger can be used

The prototype viewing device 120 is a device for viewing or executing a prototype of a graphical user interface. In this specification, "viewing a prototype" and "executing a prototype" are used interchangeably. Also, the prototype viewing device 120 may be a device for reproducing or reproducing an interaction scenario for a prototype of a graphical user interface. The prototype viewing device 120 may acquire a prototype and/or an interaction scenario from the prototype authoring device 110 or the prototype providing server 130 .

The prototype viewing device 120 may be the same type of device as the target device to which the authoring target graphical user interface is applied, or may be a different type of device. When the prototype viewing device 120 is a device of a different type from the target device, the prototype is displayed and executed in a graphic object simulating the screen of the target device displayed in the user interface of the prototype viewing device 120 . can

According to an embodiment, the prototype authoring device 110 and the prototype viewing device 120 may be configured to include a computing device that may be connected to each other through a network. For example, the prototype authoring device 110 and the prototype viewing device 120 may be configured to include devices such as servers, desktop PCs, notebooks, and smart phones configured to include one or more processors. The prototype authoring device 110 and the prototype viewing device 120 may be, for example, the computing device 1500 illustrated in FIG. 13 .

The prototype providing server 130 may receive a prototype and/or an interaction scenario from the prototype authoring device 110 and provide it to the prototype viewing device 120 . The prototype providing server 130 may be any server that transmits/receives and exchanges data through various protocols such as a file server and a web server.

Hereinafter, a method of providing a prototype of a graphical user interface according to another embodiment of the present invention will be described in more detail with reference to FIGS. 2 to 5 . In particular, a method for creating an interaction scenario targeting a prototype will be described. The prototype providing method of the present embodiment may be performed by the prototype authoring device 110 .

2 is a flowchart illustrating a process for performing a method for providing a prototype of a graphical user interface according to the present embodiment.

First, in step S210 , the graphical user interface prototype 200 is authored by the prototype authoring device 110 . For the authoring of the prototype, various conventional tools and techniques for prototyping a graphical user interface may be used. The prototype 200 may include one or more graphical user interface objects and an interaction set (ie, a set of triggers and responses) associated with at least some objects.

In some embodiments, in the prototype authoring step S210, the target device to which the authoring target graphical user interface will be applied is wired or wirelessly connected to the prototype authoring device 110 to input or define a trigger to be included in the prototype, or trigger It can be used to confirm the response triggered by

In step S220, the prototype authoring device 110 displays the user interface 300 for generating the interaction scenario of the prototype, and receives an interaction scenario recording start command.

3 is a diagram showing an exemplary state in which a user interface 300 for generating an interaction scenario with respect to the prototype 200 created in step S210 is displayed on the prototype authoring device 110 . Referring to FIG. 3 , the interface 300 includes an area for displaying the authored prototype 200 and an area 302 for providing GUI objects 304 , 306 , 308 related to the creation of an interaction scenario. include A user of the prototype authoring device 110 may demonstrate or manipulate the prototype 300 displayed on the interface 300 .

In step S220, for example, by receiving an input 310 of a user selecting the interaction scenario recording start button 304 of the user interface 300 is received, recording of the interaction scenario for the prototype 200 can be started. . In some embodiments, when the recording of the interaction scenario is started, the display property of the interaction scenario recording start button 304 is changed, so that the interaction scenario is being recorded can be visually expressed.

In steps S230 to S250, a user's demonstration of the prototype 200 is input, and interactions occurring during the demonstration are recorded. At this time, a video recording a series of interactions that occurred during a user's demonstration with respect to the prototype 200 is not recorded, but an identifier of a trigger that causes changes in objects included in the prototype and the trigger occurrence time are recorded. Note that it will be

Steps S230 to S250 will be described with reference to FIGS. 4A to 4C .

In step S230, the prototype authoring device 110 receives the user's demonstration input for the prototype (200). A user may demonstrate the prototype 200 by interacting with objects included in the prototype 200 on the interface 300 of the prototype authoring device 110, and the prototype authoring device 110 It is possible to receive data generated by the user's demonstration.

4A to 4C are diagrams illustrating exemplary views of the prototype 200 while a user's demonstration of the prototype 200 is being performed. 4A shows a state in which a user touches an object 420 included in the prototype 200, and FIG. 4B shows the display of the objects 420, 430, and 440 of the prototype 200 as a result of the touch. Shows the change in properties. Specifically, referring to FIG. 4B , a change in size property of the object 420 and a change in transparency of the object 430 and object 440 are induced due to a touch input to the object 420 . In other words, the size of the object 420 is enlarged, and in the state shown in FIG. 4A , the hidden object 430 and the object 440 are visually displayed. In this regard, a touch event generated for the object 420 is a trigger, and a change in the size property of the object 420 , and a change in transparency of the object 430 and object 440 are responses caused by the trigger. Meanwhile, the user of the prototype authoring device 110 performs an operation of clicking the object 420 with a pointing device, such as a mouse, instead of touching the object 420 during the demonstration of the prototype 200 . By doing so, it is noted that the event of touching the object 420 may be defined as the trigger.

In some embodiments, in step S230 , a target device (not shown) may be connected to the prototype authoring device 110 and used to demonstrate the prototype 200 . The user performs a demonstration by manipulating the prototype 200 on the target device, and the prototype authoring device 110 may receive data about the user's demonstration from the target device.

In step S240, a trigger detected during the user's demonstration is recorded. For example, a touch event for the object 420 described with reference to FIGS. 4A and 4B may be recorded as a trigger. In some embodiments, the response triggered by the trigger may also be recorded. For example, a change in display properties of the objects 420 , 430 , and 440 exemplarily illustrated in FIG. 4B may be recorded as a response. In some other embodiments, when the first response triggered by the trigger chains triggers a second response distinct from the first response, the first response may be recorded as a trigger that triggered the second response. .

In step S250, it is determined whether the recording of the interaction scenario has ended. For example, it is determined whether an interaction scenario recording end command has been received from the user. If the interaction scenario recording is not finished, the process returns to step S230, and the process of receiving the user's demonstration input (S230) and recording the trigger and response detected during the user's demonstration (S240) may be repeated. For example, as shown in FIG. 4C , a touch event for an object 441 included in the prototype 200 is detected during the user's continued demonstration, and a response induced by the touch (ie, trigger) is displayed in the prototype. It is output on the type 200, and the trigger and response can be recorded.

In operation S260 , an interaction scenario may be generated based on triggers and responses detected during the user's demonstration. Note that, in the embodiments of the present invention, the interaction scenario is not a video recording a series of interactions that occurred during a user's demonstration with respect to the prototype 200 .

In some embodiments, the interaction scenario may include information about a trigger detected during a user's demonstration, but not information about a response triggered by the trigger. In this case, in order to reproduce the interaction scenario on the prototype viewing device 112 , the interaction scenario and the prototype must be provided together, and the interaction scenario functions as data that triggers the prototype. In some other embodiments, the interaction scenario may include information about both a trigger and a response.

In some embodiments, the interaction scenario may include information regarding the occurrence time of a trigger detected during the user's demonstration. For example, the interaction scenario may include information regarding the occurrence order of the first trigger and the second trigger detected during the user's demonstration. As another example, the interaction scenario may include information regarding time elapsed from when the user's demonstration is started until the first trigger and the second trigger are respectively sensed.

In some embodiments, data describing an interaction scenario may be provided integrated with data describing a prototype.

In some other embodiments, the data describing the interaction scenario is not integrated with the data describing the prototype, but is stored as a separate file and provided to the prototype viewing device 120 or the viewer. In the case where a plurality of interaction scenarios for one prototype are produced or the interaction scenarios are modified several times and provided sequentially frequently occurs, it may be efficient to separate the interaction scenario data and the prototype data.

In step S270, a comment input may be received from the user, and information about the comment may be added to the interaction scenario. This will be described with reference to FIG. 5 .

Referring to FIG. 5 , for example, the user's input 310 for selecting the comment input start button 306 of the user interface 300 is received, whereby the user's comment input may be started. The comment is a comment for a part of the prototype 200, a comment for a part of an interaction scenario, a comment for a part of a trigger included in the interaction scenario, or a comment for a part of a response It can be a comment. As will be described later, depending on the object of the comment, during the reproduction of the interaction scenario by the prototype viewing device 120, the position, the point of view, etc. at which the comment is displayed may be different.

As exemplarily shown in FIG. 5 , by receiving a user's input 510 designating a specific part of the prototype, the specific part of the prototype may be designated as the object of the comment. In addition, when a user input 510 for designating a comment target is received, a layer 520 for inputting a comment is displayed on the user interface 300 , and the content of the comment can be received from the user.

In step S280 , the interaction scenario may be stored and transmitted to the prototype providing server 130 or provided to the prototype viewing device 120 .

In the description of this embodiment with reference to FIGS. 2 to 5 , a user input on the graphical user interface prototype 200 has been described as an example of a trigger included in an interaction scenario, but the present invention is not limited to such an embodiment . As described above, a trigger includes an event generated by an external input, such as data measured by a sensor. In the user interface 300 for creating an interaction scenario provided on the prototype authoring device 110, a function for designating an event generated by an external input such as a sensor as a trigger and including it in the interaction scenario may be provided. will understand

So far, a method for generating an interaction scenario targeting a prototype according to an embodiment of the present invention has been described with reference to FIGS. 2 to 5 . Hereinafter, referring to FIGS. 6 to 12 , a method for reproducing an interaction scenario targeting a prototype according to another embodiment of the present invention will be described. The method of reproducing the interaction scenario according to the present embodiment may be performed by the prototype viewing device 120 .

6 is a flowchart illustrating a process for performing a method for providing a prototype of a graphical user interface, according to an embodiment of the present invention.

First, in step S610, the prototype viewing device 120 acquires an interaction scenario. The interaction scenario may be obtained from the prototype providing server 130 or the prototype authoring device 110 . In an embodiment in which the graphical user interface prototype and the interaction scenario are provided as separate data, the graphical user interface prototype may also be obtained in step S610. In some embodiments, the graphical user interface prototype and the interaction scenario may be electronic documents stored on the prototype providing server 130 . In this case, the graphical user interface prototype and the interaction scenario may be obtained by accessing the URL pointing to the electronic document through a web browser of the prototype viewing device 120 .

As described above, the interaction scenario includes information about a trigger detected during a user's demonstration in the prototype authoring device 110 . In some embodiments, the interaction scenario further includes information about a response triggered by the sensed trigger. In some embodiments, the interaction scenario may include information about a trigger occurrence time. Note that, in the embodiments of the present invention, the interaction scenario is not a video recording a series of interactions that occurred during a demonstration for the prototype 200 .

In step S620 , the prototype viewing device 120 may display a user interface 700 for reproducing an interaction scenario for the prototype.

Referring to FIG. 7 , the user interface 700 for reproducing the interaction scenario controls the first area 710 for displaying the prototype 200 and the reproduction of the interaction scenario, and and a second area 720 for displaying details. In step S620 , the prototype 200 is displayed in the first area 710 .

Referring to FIG. 7 , in the second area 720, a GUI object 730 for selecting any one of one or more interaction scenarios related to the prototype, and for selecting a part of one or more triggers included in the selected interaction scenario GUI objects 740, GUI objects 750 corresponding to one or more responses triggered by a selected trigger, objects 760 for controlling reproduction or reproduction of an interaction scenario, and a timeline of an interaction scenario A progress bar 770 for betting, a GUI object indicating a start time and duration of responses, and the like may be displayed.

In step S630, an interaction scenario reproduction start command is received. For example, a user input for selecting a reproduction start button among the GUI objects 760 for controlling reproduction of an interaction scenario may be received.

In steps S640 to S660, the interaction scenario for the prototype 200 is reproduced, the occurrence of triggers included in the interaction scenario during the reproduction is visualized, and the responses caused by the trigger are displayed on the prototype 200. is output Steps S640 to S660 will be described with reference to FIGS. 8A to 11 .

In step S640, the reproduction of the interaction scenario is started, and the occurrence of a trigger included in the interaction scenario is visualized. FIG. 9 exemplarily shows a state in which a touch event for the object 420 on the prototype 200 is visualized 910 . The trigger included in the interaction scenario may be a visual change of a GUI object included in the prototype, but may be a non-visual event, such as a user action targeting the prototype, or input from an external device such as a sensor. have. Therefore, in step S640, by visualizing the occurrence of a trigger included in the interaction scenario, a user (eg, a developer, etc.) who reproduces the interaction scenario of the prototype through the prototype viewing device 120, the occurrence of the trigger and the trigger make the properties recognizable. Meanwhile, in step S640 , the occurrence of different types of triggers, such as a user action on the prototype and an input of an external device such as a sensor, may be visualized in different ways. For example, a tap gesture and a double tap gesture on the prototype 200 may be visualized in different ways. Furthermore, although not shown, various conventional techniques for visualizing sensor detection events of various types of sensors on the user interface 700 may be utilized.

In step S650 , a response triggered by the trigger is output on the prototype 200 . When the response triggered by the trigger is a change in the display property of the GUI object included in the prototype, the output of the response means an operation in which an operation to change the display property of the object is executed. When the response is haptic feedback or sound feedback, the haptic or sound feedback may be output by the vibrating device or speaker of the prototype viewing device 120 . On the other hand, when the response triggered by the trigger acts as a trigger for inducing a second response, the second response is also output in series.

In step S650 , while a response is being output, an object corresponding to the currently output response among the objects 750 representing each response on the interface 700 may be visually highlighted and displayed.

8A to 8C sequentially illustrate the process of changing the display properties of GUI objects on the prototype 200 and the process of changing the user interface 700 caused by a touch event on the object 420 on the prototype 200. It is an exemplary diagram indicated by . A change in display properties of GUI objects on the prototype 200 is an example of a response. Referring to the first area 710 of FIGS. 8A to 8C , due to the occurrence of a touch event on the object 420, the size property of the object 420 changes over time, the object 430 and the object 440 ) was induced to change the transparency. Meanwhile, referring to the second area 720 of FIGS. 8A to 8C , a timeline in which responses triggered by the trigger are executed may be visually displayed.

In operation S660 , changes in property values of objects included in the prototype 200 may be displayed while the interaction scenario is reproduced. 10 is a diagram exemplarily illustrating a state in which attribute values of an object 1010 selected by a user are displayed 1020 at a certain moment in the middle of an interaction scenario being reproduced. In the present embodiment, how properties such as location coordinates, size, and transparency of the object 1010 selected by the user during reproduction of the interaction scenario change during reproduction of the interaction scenario may be displayed. In some embodiments, among the objects 750 representing responses, an object corresponding to a response that currently causes a property change of the object may be highlighted on the interface 700 .

In step S670, it may be determined whether the reproduction of the interaction scenario has ended. For example, it may be determined whether all interactions by one or more triggers included in the interaction scenario are reproduced. If the reproduction of the interaction scenario has not ended, returning to step S640, a series of operations such as visualization of occurrence of a subsequent trigger, output of a response triggered by the subsequent trigger, display of a change in attribute value of an object, and the like may be performed.

Meanwhile, according to the present embodiment, a property of a trigger selected from one or more triggers included in an interaction scenario may be displayed on the interface 700 . 9 is a diagram exemplarily illustrating a state in which details of a selected trigger (Trigger#1) among a plurality of triggers (Trigger#1, Trigger#2) included in an interaction scenario are displayed on an interface 920 . In the present embodiment, in response to a user's selection of selecting at least one of the GUI objects 740 corresponding to a plurality of triggers, during or before and after reproduction of the interaction scenario, the selected trigger type, occurrence location, and occurrence condition Detailed properties, such as, may be displayed.

Also, according to the present embodiment, a property of a response selected from among one or more responses included in an interaction scenario may be displayed on the interface 700 . 11 is a diagram exemplarily illustrating a state in which details of a response (Response#1) selected from among a plurality of responses included in an interaction scenario are displayed 1120 on an interface. In this embodiment, in response to the user's selection of at least one of the GUI objects 750 corresponding to the plurality of responses, the selected response type, degree, object to be the target of the response, the starting time, Detailed properties such as duration may be displayed.

Also, according to the present embodiment, a comment added to the interaction scenario may be displayed on the interface 700 . For example, a comment added to the interaction scenario by an author who is a user of the prototype authoring device 110 may be displayed on the interface 700 during or before and after the interaction scenario is reproduced.

As described above, the comment is a comment targeting a part of the prototype 200, a comment targeting a partial section on the timeline of the interaction scenario, or a comment targeting some triggers included in the interaction scenario Or, it may be a comment targeting some responses.

When the comment is a comment targeting a specific object of the prototype 200, the comment may be displayed in an area adjacent to the target object during reproduction of the interaction scenario, and furthermore, the correlation between the target object and the comment is visually displayed. can be expressed

When the comment is a comment targeting a partial section of the interaction scenario, the comment may be displayed only in the corresponding section during reproduction of the interaction scenario.

When the comment is a comment targeting some triggers included in the interaction scenario, the comment may be displayed at a time point when the target trigger is generated during reproduction of the interaction scenario. Furthermore, the correlation between the target trigger and the comment may be visually expressed.

When the comment is a comment targeting some responses included in the interaction scenario, the comment may be displayed when the target response is output during reproduction of the interaction scenario. Furthermore, the correlation between the target response and the comment may be visually expressed.

As described above, according to the present embodiment, when viewing an interaction scenario, a user (eg, an application developer) of the prototype viewing device 120 may perform a prototype due to the interaction and details of triggers and responses included in the prototype. You can easily check the change in the display properties of your objects. Also, according to the present embodiment, when viewing the interaction scenario, the user (eg, application developer) of the prototype viewing device 120 can easily check the author's comment added to the interaction scenario. Due to this, the content of the interaction intended by the author of the prototype can be effectively delivered to the developer or the like.

The process of reproducing the interaction scenario through steps S640 to S660 of the present embodiment may be partially performed for a part of the interaction scenario according to a user's selection. In this case, prior to step S640, a user input for selecting a part of the interaction scenario may be obtained, and the interaction scenario may be reproduced with respect to the selected part. A part of the interaction scenario includes a partial section on the timeline of the interaction scenario, a part of one or more triggers included in the interaction scenario, a part of one or more responses triggered by triggers included in the interaction scenario, a prototype ( 200) may be some of the one or more objects included in the . By selectively designating some of the objects 740 , 750 , 770 displayed on the interface 700 or objects included in the prototype 200 , the user wants to reproduce the interaction scenario through steps S640 to S660 . A part of can be selectively reproduced.

Meanwhile, according to some embodiments of the present invention, a trigger may be defined to cause different responses according to a trigger occurrence condition. In other words, the prototype may include an interaction set having branches according to conditions. The prototype may include, for example, an interaction set in which a first response is triggered when a first condition is satisfied with trigger generation, and a second response is triggered when the first condition is not satisfied with trigger generation. 12 is a diagram illustrating an exemplary state in which a trigger having a condition and responses induced according to the condition are displayed on the interface 700 as described above.

Referring to FIG. 12 , an object 1210 represents a trigger, an object 1220 represents a first condition that is likely to be satisfied when the trigger occurs, and an object 1230 is likely to be satisfied when the trigger occurs. A second condition different from the condition is indicated. Objects 1225 indicate first responses that are triggered when the first condition is satisfied when a trigger occurs, and objects 1235 indicate second responses that are triggered when the second condition is satisfied when a trigger occurs. More specifically, different responses ( 1225, 1235) is shown in FIG. 12 as an example of an induced interaction set.

Through steps S640 to S660 of the embodiment described above with reference to FIG. 6 , while an interaction scenario for the prototype 200 is reproduced, an interaction set having a branch according to a condition is reproduced on the prototype 200, trigger Upon occurrence of , a satisfied condition and an unsatisfied condition may be visually distinguished and displayed on the interface 700 . For example, when the first condition is satisfied and the second condition is not satisfied when the trigger occurs, the objects 1230 and 1235 related to the second condition may be displayed in an inactivated state as shown in FIG. 12 .

In some embodiments of the present invention, in a situation where the first condition is satisfied during reproduction of the interaction scenario, a function for forcibly outputting second responses corresponding to the second condition may be provided. Furthermore, when the second responses corresponding to the second condition are forcibly output in a situation where the first condition is satisfied, the second responses are forcibly output on or adjacent to the objects 1235 indicating the second response. A visual indication indicating the may be displayed. In some embodiments of the present invention, by providing a function to forcibly output second responses corresponding to a second condition that is not satisfied during reproduction of the interaction scenario, it is not demonstrated at the time of creation of the interaction scenario by the prototype author Even in situations where it is not, the prototype viewer will be able to reproduce it.

So far, a method for reproducing an interaction scenario targeting a prototype according to an embodiment of the present invention has been described with reference to FIGS. 6 to 12 . Hereinafter, with reference to FIGS. 13 to 15 , a method that can be used to effectively transmit changes occurring in a prototype of a graphical user interface will be described.

In the process of prototyping a graphical user interface, the prototype is frequently and continuously modified. When a graphical user interface creator modifies a prototype of an existing version, it is necessary to communicate what has been modified to the application designer and/or developer. To this end, a situation may arise where the prototype maker must prepare a document describing the modifications of the interactions included in the prototype and deliver it to the developer, or create and deliver the interaction scenario for the modified prototype from the beginning. have. A lot of time and money can be wasted in the process.

The present embodiment relates to a method of effectively delivering changes occurring in a prototype of a graphical user interface by automatically reflecting changes that occur in a prototype of a graphical user interface to an interaction scenario produced in the past. The interaction scenario providing method according to the present embodiment may be performed by the prototype authoring device 110 .

Referring to FIG. 13 , the method includes a step S1310 of identifying a difference between the first version and the second version of the prototype, and updating the first version of the interaction scenario for the prototype, so that the second version of the interaction scenario for the prototype is performed. and step S1320 of automatically generating the version.

In this embodiment, the second version of the prototype of the graphical user interface may be a result of applying modifications to the first version of the prototype. The process of modifying the prototype of the graphical user interface may include addition, deletion, and property value change of triggers, responses, and/or objects included in the prototype. In other words, the difference between the first version and the second version of the prototype may include addition, deletion, and property value change of triggers, responses, and/or objects included in the prototype.

In this embodiment, the first version of the interaction scenario for the prototype is previously generated by the method according to the embodiment described with reference to FIGS. 2 to 5, for example, to explain the first version of the prototype. It refers to an interaction scenario. Also, the second version of the interaction scenario for the prototype refers to an interaction scenario that is automatically generated for the second version of the prototype based on the first version of the interaction scenario for the prototype.

In step S1310, by comparing the first version and the second version of the prototype, addition, deletion, and property value changes of triggers, responses, and/or objects included in the prototype are identified.

In step S1320, addition, deletion, and attribute value change of the identified trigger, response, and/or object are reflected in the first version of the interaction scenario.

Specifically, when a new response or object is added to the prototype, the second version of the interaction scenario may be generated by adding the response or object to the first version of the interaction scenario. Also, when a response or object previously included in the prototype is deleted, the second version of the interaction scenario may be created by deleting the response or object from the first version of the interaction scenario. Similarly, when an existing property value of a response or object included in the prototype is changed, the second version of the interaction scenario may be generated by modifying the changed property values in the first version of the interaction scenario.

Similarly, when a trigger previously included in the first version of the prototype is deleted or the attribute value of the trigger is changed, the trigger is deleted from the first version of the interaction scenario, or the changed trigger attribute values are added to the first version of the interaction scenario. By modifying in version 1, a second version of the interaction scenario can be created.

Hereinafter, with reference to FIGS. 14 and 15 , a trigger included in the first version of the prototype is replaced with a new trigger, or a new trigger not included in the first version of the prototype is applied to the second version of the prototype. If added, a method for automatically reflecting this in the interaction scenario will be described.

Referring to FIG. 14 , a trigger deleted from the first version of the prototype is identified in step S1311, and a trigger newly added to the second version of the prototype is identified in step S1312. Steps S1311 and S1312 may be understood as a part of step S1310 described with reference to FIG. 13 .

In step S1321, it is determined whether a trigger deleted from the first version exists. If there is no deleted trigger, the process proceeds to step S1331, and if there is a deleted trigger, the process proceeds to step S1341.

In step S1331, a user input regarding a position where a trigger newly added to the second version of the prototype should be inserted in an interaction scenario is obtained. Subsequently, in step S1335, the added trigger is inserted into the interaction scenario. At this time, the trigger is inserted at a position determined based on the user input obtained in step S1331.

Hereinafter, with reference to FIG. 15 , a process of acquiring a user input regarding the insertion position of a trigger in step S1331 will be described in more detail.

Referring to FIG. 15 , a timeline of an interaction scenario is displayed in step S1332. The timeline of the interaction scenario includes, for example, GUI objects 740 indicating triggers included in the interaction scenario shown in FIG. 7 , a progress bar 770 , and GUI objects 780 indicating the start time and duration of responses. and the like.

In an embodiment, in step S1333, a user's input for selecting any one of the triggers included in the interaction scenario may be obtained. For example, a user's input for selecting any one of the GUI objects 740 shown in FIG. 7 may be obtained. Subsequently, in step S1334, a position immediately before or after the selected trigger may be determined as a position into which a new trigger is to be inserted. In some embodiments, the user's input as to whether a new trigger is to be inserted immediately before the selected trigger or immediately after the selected trigger may be further obtained.

In another embodiment, in step S1333, a user's input for selecting a specific location on a timeline indicating a specific point in time in progress of the interaction scenario may be obtained. For example, a user input for selecting a specific location on the progress bar 770 shown in FIG. 7 or a specific location on the GUI objects 780 indicating the start time and duration of responses may be obtained. Subsequently, in step S1334 , a position on the selected timeline may be determined as a position where a new trigger is to be inserted.

It will be described again with reference to FIG. 14 . A trigger newly added to the second version of the prototype may be inserted at a position determined through the steps described with reference to FIG. 15 (step S1335), and a second version of the interaction scenario may be generated (step S1351).

On the other hand, when it is determined in step S1321 shown in Fig. 14 that the trigger deleted from the first version exists, the flow advances to step S1341.

In step S1341, a degree of similarity between the trigger deleted from the first version of the prototype and the trigger added to the second version of the prototype is determined, and in step S1343 it is determined whether the similarity exceeds a threshold.

In an embodiment, the similarity between the deleted trigger and the added trigger may be determined by the similarity or overlap of responses triggered by each trigger. If the responses caused by the deleted trigger and the responses caused by the added trigger overlap each other by a certain ratio or more, it may be determined in step S1343 that the similarity exceeds a threshold.

On the other hand, if the responses caused by the deleted trigger and the responses caused by the added trigger are not related to each other, it may be determined in step S1343 that the similarity is less than or equal to a threshold.

In another embodiment, the degree of similarity between the deleted trigger and the added trigger may be determined based on whether GUI objects for which a change in display property is caused by each trigger are identical to each other. In other words, if the deleted trigger and the added trigger cause a change to the same GUI object, the similarity between the deleted trigger and the added trigger can be highly evaluated, whereas the deleted trigger and the added trigger If the triggered triggers are triggers that cause changes to different GUI objects, the similarity between the two triggers may be evaluated low.

If the similarity is equal to or less than the threshold in step S1343, the process proceeds to step S1331. When it is determined in step S1343 that the similarity exceeds the threshold, it may be preferable that a trigger added to the second version of the prototype replaces a trigger deleted from the first version of the prototype. In this case, the flow proceeds to step S1345.

In step S1345, in the interaction scenario, the deleted trigger is replaced with the added trigger. In other words, the trigger added to the second version of the interaction scenario is inserted in the position where the deleted trigger was in the first version of the interaction scenario. A second version of the interaction scenario may be automatically generated by reflecting the replacement of the trigger (step S1351).

A method of automatically generating a new version of the interaction scenario in which the changes are reflected by reflecting the changes that occurred in the prototype of the graphical user interface to the previously produced interaction scenario will be described with reference to FIGS. 13 to 15 did According to this embodiment, triggers, responses, and objects deleted from the prototype or modified property values are automatically reflected in the interaction scenario, and newly added triggers, responses, and objects are automatically inserted at appropriate positions in the interaction scenario. do. Accordingly, the changes in the prototype can be effectively communicated to a third party without separately explaining the changes that occurred in the prototype of the graphical user interface or creating a new version of the interaction scenario reflecting the changes.

Hereinafter, a method of reproducing an interaction scenario in which changes in a prototype of a graphical user interface are reflected will be described with reference to FIGS. 16 to 18 . In particular, a method for displaying changes occurring in a prototype of a graphical user interface by reproducing the first version and the second version of the interaction scenario together will be described. The interaction scenario reproduction method according to the present embodiment may be performed by the prototype viewing device 120 .

16 is a flowchart illustrating a process for performing a method for providing a prototype of a graphical user interface, according to an embodiment of the present invention.

First, in step S1610, the prototype viewing device 120 acquires an interaction scenario. The interaction scenario may be obtained from the prototype providing server 130 or the prototype authoring device 110 . In an embodiment in which the graphical user interface prototype and the interaction scenario are provided as separate data, in addition to the interaction scenario, a graphical user interface prototype may also be obtained in step S1610.

In step S1610, the prototype viewing device 120 may acquire the first version and the second version of the interaction scenario. The first version of the interaction scenario may be an interaction scenario generated with respect to the first version of the prototype, and the second version of the interaction scenario may be an interaction scenario generated with respect to the second version of the prototype. At least a portion of the first version and the second version of the interaction scenario may be different from each other. For example, triggers included in the first version of the interaction scenario and triggers included in the second version of the interaction scenario may be different from each other. Also, responses included in the first version of the interaction scenario may be different from responses included in the second version of the interaction scenario.

In step S1620, the prototype viewing device 120 may display a user interface for reproducing the first version and the second version of the interaction scenario for the prototype.

17 is an exemplary user interface for reproducing a first version and a second version of an interaction scenario for a prototype according to an embodiment of the present invention, and FIG. 18 is an exemplary user interface for a prototype according to another embodiment of the present invention. It is an exemplary user interface for reproducing the first version and the second version of the interaction scenario.

First, in the embodiment shown in FIG. 17 , the user interface includes a first area 1701 for reproducing a first version of the interaction scenario and a second area 1751 for reproducing a second version of the interaction scenario. . The first area 1701 and the second area 1751 are detailed areas 1710 and 1760 for displaying prototypes, detailed areas for controlling reproduction of the interaction scenario and displaying details and timelines of the interaction scenario. 1720 and 1770 , and detailed areas 1730 and 1780 for displaying attribute values designated for triggers, responses, and objects included in the prototype, respectively. In step S1620, the prototype is displayed in detail areas 1710 and 1760, respectively.

In step S1630, an interaction scenario reproduction start command is received. For example, a user input for selecting a reproduction start button among the GUI objects 1726 for controlling reproduction of an interaction scenario may be received.

In step S1640, the first version and the second version of the interaction scenario for the prototype are reproduced, the occurrence of triggers included in the interaction scenario during the reproduction is visualized, and the responses caused by the trigger are each in the detailed area 1710 , 1760) is output on the displayed prototype.

In some embodiments, in step S1640 , the first version and the second version of the interaction scenario may be reproduced together in synchronization with each other.

The synchronized reproduction of the first version and the second version of the interaction scenario includes simultaneous reproduction of the first version and the second version in response to an instruction to start reproducing the interaction scenario. Specifically, the first version may be reproduced in the first area 1701 and the second version may be reproduced in the second area 1702 at the same time.

The synchronized reproduction of the first version and the second version of the interaction scenario makes it easy to understand the difference between the first version and the second version of the interaction scenario. For example, when the user selects any one of the plurality of triggers 1724 included in the first version of the interaction scenario, responses 1725 triggered by the selected trigger are displayed in the area 1720 and the selected A detailed attribute specified in the trigger may be displayed in the area 1730 . Furthermore, a trigger corresponding to the selected trigger among a plurality of triggers included in the second version of the interaction scenario is identified, responses triggered by the identified trigger are displayed in the area 1770 , and detailed properties assigned to the identified trigger may be displayed within this area 1780 . Similarly, when the user selects any one of the plurality of responses 1725 included in the first version of the interaction scenario, detailed attributes specified for the selected response are displayed in the area 1730, while the second version of the interaction scenario is displayed. A response corresponding to the selected response among a plurality of responses included in version 2 may be identified, and detailed attributes designated for the identified response may be displayed in the area 1780 . In this way, the first version and the second version of the interaction scenario are reproduced in synchronization with each other in the regions 1701 and 1751 , so that the user can easily identify differences or changes between the first version and the second version.

Meanwhile, in the case of the embodiment shown in FIG. 18 , the first version and the second version of the interaction scenario may be reproduced in one display area. This is different from the embodiment shown in FIG. 17 in which the first version and the second version are reproduced side by side in different regions 1701 and 1751 .

Referring to FIG. 18 , the user interface includes a detailed area 1810 for displaying a prototype, a detailed area 1820 for controlling reproduction of an interaction scenario and displaying details and a timeline of the interaction scenario, included in the prototype. and detailed areas 1831 and 1832 for displaying attribute values assigned to the triggered trigger, response, object, and the like.

In the embodiment shown in FIG. 18 , the first version and the second version of the interaction scenario are synchronized and reproduced together in step S1640, but may be reproduced simultaneously in one area. Specifically, the part in which the first version or the second version of the interaction scenario is the same is usually displayed, and the part with the difference between the first version and the second version of the interaction scenario is the second version on top of the corresponding part of the first version. By translucently overlapping and displaying the corresponding portion of , the first version and the second version can be synchronized and reproduced together in one area 1810 .

For example, FIG. 18 exemplarily illustrates a case in which a change occurs in the movement distance of the GUI elements 1811 and 1812 between the first version and the second version of the GUI prototype. Referring to FIG. 18 , the GUI element 1812 is displayed translucently overlaid on the GUI element 1811 , so that changes in moving distances of the GUI elements 1811 and 1812 can be simultaneously displayed in one area 1810 .

Meanwhile, in some other embodiments, a version selected by the user among the first version and the second version of the interaction scenario may be reproduced in the area 1810 . And if another version is selected by the user during reproduction of the selected version, the selected other version may be subsequently reproduced within the area 1810 .

For example, after the first version of the interaction scenario is reproduced in the area 1810 by the user's selection, a user's input requesting reproduction of the second version may be obtained. In this case, the first response currently being output may be identified in the first version of the interaction scenario being reproduced, and output of the first response may be stopped. And, a second response may be identified in the second version of the interaction scenario. When the second response of the second version of the interaction scenario is identified, while the second response is output in the same region 1810 , reproduction of the second version of the interaction scenario may be started in the same region 1810 .

In this case, the second response is a response corresponding to the first response included in the first version of the interaction scenario, among responses included in the second version of the interaction scenario. For example, the first response included in the first version and the second response included in the second version may be responses having the same position on the timeline of each version or corresponding responses.

As such, in some embodiments of the present invention, when the user requests to reproduce the second version while the first version of the interaction scenario is being reproduced, the timeline on the interaction scenario currently being reproduced is maintained as it is, and the current user browses and The second version can be reproduced continuously within the same area 1810 without leaving the existing screen. As a result, the user can easily check the difference between the first version and the second version on one screen without the hassle of separately reproducing the first version and the second version of the interaction scenario.

So far, with reference to FIGS. 16 to 18 , a method of displaying changes occurring in the prototype of the graphical user interface by reproducing the first version and the second version of the interaction scenario for the prototype of the graphical user interface together will be described. did According to some embodiments of the method, the first version and the second version of the interaction scenario are displayed side by side or overlapping each other in one user interface screen and reproduced at the same time, so that the difference between the first version and the second version or Changes can be easily identified by the user. According to some other embodiments of the present method, by providing an interface that allows the user to recreate the first version and the second version of the interaction scenario by crossing each other in one area, the user can make the first version It makes it possible to easily check the difference between the two versions on a single screen without the hassle of reproducing the second version and the second version separately.

So far, a method of providing a prototype of a graphical user interface according to various embodiments of the present invention has been described with reference to FIGS. 2 to 18 . Hereinafter, an exemplary computing device 1500 capable of implementing the methods described in various embodiments of the present invention will be described with reference to FIG. 19 .

19 is an exemplary hardware configuration diagram illustrating a computing device 1500 .

19 , the computing device 1500 loads one or more processors 1510 , a bus 1550 , a communication interface 1570 , and a computer program 1591 executed by the processor 1510 . It may include a memory 1530 and a storage 1590 for storing the computer program 1591 . However, only the components related to the embodiment of the present invention are illustrated in FIG. 19 . Accordingly, a person skilled in the art to which the present invention pertains can know that other general-purpose components other than the components shown in FIG. 19 may be further included. The computing device 1500 illustrated in FIG. 19 may indicate any one of physical servers belonging to a server farm that provides an Infrastructure-as-a-Service (IaaS) type cloud service.

The processor 1510 controls the overall operation of each component of the computing device 1500 . The processor 1510 includes at least one of a central processing unit (CPU), a micro processor unit (MPU), a micro controller unit (MCU), a graphic processing unit (GPU), or any type of processor well known in the art. may be included. In addition, the processor 1510 may perform an operation on at least one application or program for executing the method/operation according to various embodiments of the present disclosure. The computing device 1500 may include one or more processors.

The memory 1530 stores various data, commands, and/or information. The memory 1530 may load one or more programs 1591 from the storage 1590 to execute methods/operations according to various embodiments of the present disclosure. An example of the memory 1530 may be a RAM, but is not limited thereto.

The bus 1550 provides a communication function between components of the computing device 1500 . The bus 1550 may be implemented as various types of buses, such as an address bus, a data bus, and a control bus.

The communication interface 1570 supports wired/wireless Internet communication of the computing device 1500 . The communication interface 1570 may support various communication methods other than Internet communication. To this end, the communication interface 1570 may be configured to include a communication module well-known in the art.

The storage 1590 may non-temporarily store one or more computer programs 1591 . The storage 1590 may include a non-volatile memory such as a flash memory, a hard disk, a removable disk, or any type of computer-readable recording medium well known in the art.

The computer program 1591 may include one or more instructions in which methods/operations according to various embodiments of the present invention are implemented. When the computer program 1591 is loaded into the memory 1530 , the processor 1510 may execute the one or more instructions to perform methods/operations according to various embodiments of the present disclosure.

So far, some embodiments of the present invention and effects thereof have been described with reference to FIGS. 1 to 19 . Effects of the present invention are not limited to the effects mentioned above, and other effects not mentioned will be clearly understood by those skilled in the art from the description of the present specification.

The concepts of the present invention described with reference to FIGS. 1 to 19 may be implemented as computer-readable codes on a computer-readable medium. The computer-readable recording medium may be, for example, a removable recording medium (CD, DVD, Blu-ray disk, USB storage device, removable hard disk) or a fixed recording medium (ROM, RAM, computer-equipped hard disk). can The computer program recorded on the computer-readable recording medium may be transmitted to another computing device through a network such as the Internet and installed in the other computing device, thereby being used in the other computing device.

In the above, even though all the components constituting the embodiment of the present invention are described as being combined or operated in combination, the present invention is not necessarily limited to this embodiment. That is, within the scope of the object of the present invention, all the components may operate by selectively combining one or more.

Although acts are shown in a particular order in the drawings, it should not be understood that the acts must be performed in the specific order or sequential order shown, or that all illustrated acts must be performed to obtain a desired result. In certain circumstances, multitasking and parallel processing may be advantageous. Moreover, the separation of the various components in the embodiments described above should not be construed as necessarily requiring such separation, and the described program components and systems may generally be integrated together into a single software product or packaged into multiple software products. It should be understood that there is

Although embodiments of the present invention have been described above with reference to the accompanying drawings, those of ordinary skill in the art to which the present invention pertains can realize that the present invention can be embodied in other specific forms without changing its technical spirit or essential features. can understand Therefore, it should be understood that the embodiments described above are illustrative in all respects and not restrictive. The protection scope of the present invention should be construed by the following claims, and all technical ideas within the scope equivalent thereto should be construed as being included in the scope of the present invention.

Claims (18)

A method for providing an interaction scenario for a prototype of a graphical user interface (GUI), comprising:
identifying, by the prototype authoring device, a difference between the first version and the second version of the prototype; and
generating, by the prototype authoring device, a second version of the interaction scenario by updating the first version of the interaction scenario previously generated for the first version of the prototype based on the difference;
including,
The prototype includes information about a trigger and a response triggered by the trigger,
The pre-generated interaction scenario for the first version includes information about a plurality of triggers detected during a user's demonstration of the first version of the prototype.
How to provide interaction scenarios for GUI prototypes. According to claim 1,
The step of identifying the difference is:
identifying a trigger added to the second version of the prototype;
generating the second version of the interaction scenario,
Comprising the step of obtaining a user input for a position where the added trigger is to be inserted,
How to provide interaction scenarios for GUI prototypes. 3. The method of claim 2,
The step of obtaining a user input for a position where the added trigger is to be inserted includes:
obtaining a user input for selecting any one trigger among triggers included in the first version of the interaction scenario; and
Inserting the added trigger immediately before or after any one of the triggers
containing,
How to provide interaction scenarios for GUI prototypes. 3. The method of claim 2,
The step of obtaining a user input for a position where the added trigger is to be inserted includes:
displaying a timeline of the first version of the interaction scenario; and
obtaining a user input for selecting a specific location on the timeline;
containing,
How to provide interaction scenarios for GUI prototypes. According to claim 1,
The step of identifying the difference is:
identifying a trigger deleted from the first version of the prototype and a trigger added to the second version of the prototype;
generating the second version of the interaction scenario,
Comprising the step of determining the similarity between the deleted trigger and the added trigger,
How to provide interaction scenarios for GUI prototypes. 6. The method of claim 5,
generating the second version of the interaction scenario,
generating the second version of the interaction scenario by replacing the deleted trigger with the added trigger in the first version of the interaction scenario based on a determination that the similarity is equal to or greater than a threshold
further comprising,
How to provide interaction scenarios for GUI prototypes. 6. The method of claim 5,
The step of determining the similarity between the deleted trigger and the added trigger,
and determining a ratio in which responses triggered by each of the deleted trigger and the added trigger overlap each other.
How to provide interaction scenarios for GUI prototypes. 6. The method of claim 5,
The step of determining the similarity between the deleted trigger and the added trigger,
and determining whether a first GUI object whose display property change is triggered by the deleted trigger and a second GUI object whose display property change is triggered by the added trigger are identical to each other.
How to provide interaction scenarios for GUI prototypes. According to claim 1,
The interaction scenario is
Further comprising information about a plurality of responses triggered by the plurality of triggers sensed during the user's demonstration,
How to provide interaction scenarios for GUI prototypes. 10. The method of claim 9,
The interaction scenario is
At least one of the plurality of responses further comprises information about a response automatically triggered by acting as a trigger,
How to provide interaction scenarios for GUI prototypes. A method of providing a prototype of a graphical user interface (GUI), comprising:
acquiring, by the prototype viewing device, an interaction scenario including information about a trigger generated on the GUI prototype; and
Reproducing the first version and the second version of the interaction scenario for the prototype by outputting, by the prototype viewing device, a response automatically triggered by a trigger included in the interaction scenario
including,
The prototype includes information about a trigger and a response triggered by the trigger,
How to provide a GUI prototype. 12. The method of claim 11,
At least some of the triggers included in the first version and the triggers included in the second version of the interaction scenario are different from each other,
At least some of the responses included in the first version of the interaction scenario and the responses included in the second version are different from each other,
How to provide a GUI prototype. 12. The method of claim 11,
Reproducing the first version and the second version of the interaction scenario comprises:
reproducing the first version of the interaction scenario in a first display area; and
reproducing the second version of the interaction scenario in a second display area;
including,
The first version and the second version are reproduced in synchronization with each other,
How to provide a GUI prototype. 12. The method of claim 11,
Reproducing the first version and the second version of the interaction scenario comprises:
In response to a user's selection of a first trigger among a plurality of triggers included in the first version of the interaction scenario,
displaying an attribute assigned to the first trigger; and
displaying a property designated for a second trigger corresponding to the first trigger among a plurality of triggers included in the second version of the interaction scenario
containing,
How to provide a GUI prototype. 12. The method of claim 11,
Reproducing the first version and the second version of the interaction scenario comprises:
In response to a user's selection of a first response from among a plurality of responses included in the first version of the interaction scenario,
displaying an attribute specified in the first response; and
displaying a property designated for a second response corresponding to the first response among a plurality of responses included in the second version of the interaction scenario;
containing,
How to provide a GUI prototype. 12. The method of claim 11,
Reproducing the first version and the second version of the interaction scenario comprises:
identifying differences between the first version and the second version of the interaction scenario; and
translucently displaying at least some objects of the second version of the interaction scenario based on the difference
containing,
How to provide a GUI prototype. 12. The method of claim 11,
Reproducing the first version and the second version of the interaction scenario comprises:
initiating reproduction of a first version of the interaction scenario;
obtaining a user input requesting reproduction of a second version of the interaction scenario;
in response to the user input, identifying a second response of the second version of the interaction scenario corresponding to a first response of the first version of the interaction scenario being reproduced; and
outputting a second response of the second version of the interaction scenario;
containing,
How to provide a GUI prototype. A computer program for causing a computer to perform the method of any one of claims 1 to 17 stored therein, a computer readable non-transitory recording medium.

Images