JP5449284B2 - User interface design support device, user interface design support method, and user interface design support program - Google Patents

Description

  The present invention relates to a user interface design support apparatus, a user interface design support method, and a user interface design support program that support user interface design.

  As a method for supporting the design of a user interface using a computer, Patent Document 1 discloses a method for automatically designing a user interface by combining parts necessary for user interface design and data describing operations necessary for the system. A user interface automatic generation method to be performed is described.

  Non-Patent Document 1 describes a graph drawing method using a magnetic spring model.

Japanese Patent Laid-Open No. 2003-140893

“Graph Drawing Method Using Magnetic Spring Model”, Information Processing Society of Japan Research Report. HI, Human Interface Research Group Report 94 (60), 17-24, 1994-07-14, Kazuo Mitsue, Kozo Sugiyama

  By using Patent Document 1, a user interface is automatically generated. However, in Patent Document 1, only a user interface capable of operating the system is generated, and the user interface is not necessarily based on the usage of the user.

  In addition, information can be visualized by using a technique such as that described in Non-Patent Document 1, but it is not possible to design a user interface that is easy for the user to use.

  Therefore, whether or not the user interface can be appropriately designed depends largely on the know-how of the designer, and it is difficult to set a user interface that is easy for the user to use unless it is a skilled designer.

  The present invention has been made in view of the above circumstances, and an object of the present invention is to visualize information necessary for designing a user interface and to support a user interface design of a designer, a user interface design support apparatus, To provide a user interface design support method and a user interface design support program.

  In order to achieve the above object, the present invention is a user interface design support apparatus that supports user interface design, analyzes function information in which information related to a plurality of functions of a user interface is set, and for each function, The function information indicating the attribute of the function and the function related information indicating the function related to the function are generated and stored in the storage means, and the function information and the function related information stored in the storage means are used. Calculating a distance between each function, calculating a position of all functions using the calculated distance, and arranging a function corresponding to each position calculated by the calculation means, and Output means for outputting a visualization result of each function indicated by a line connecting the functions, and the output means represents the strength of the relation using the length of the line connecting the related functions. Together, displaying a region containing a functional group belonging to the same group in the visualization results.

  The present invention is a user interface design support method for supporting user interface design performed by a computer, wherein the computer analyzes function information in which information related to a plurality of functions of the user interface is set, and for each function. The function information indicating the attribute of the function and the function related information indicating the function related to the function are generated and stored in the storage unit, and the function information and the function related information stored in the storage unit are Calculating the distance between each function, calculating the position of all functions using the calculated distance, and arranging the function corresponding to each position calculated in the calculation step, and related functions An output step for outputting a visualization result of each function indicated by a line connecting the functions, and the output step connects related functions. Together with the length of the line represents the strength of the associated, displaying a region comprising a functional group belonging to the same group in the visualization results.

  The present invention is a user interface design support program for causing a computer to function as the user interface design support apparatus.

  According to the present invention, there are provided a user interface design support apparatus, a user interface design support method, and a user interface design support program that visualize information necessary for designing a user interface and support the user interface design of the designer. be able to.

It is a block diagram of the user interface design support apparatus which concerns on embodiment of this invention. It is a figure which shows an example of function information. It is a figure which shows an example of the function information containing a display attribute. It is a flowchart which shows operation | movement of an attribute information analysis part. It is a figure which shows an example of the data structure of a function clause and a function relevance degree. It is a flowchart which shows operation | movement of a relevance calculating part. It is a figure which shows typically the elastic force, repulsive force, and frictional force of a spring model. It is a flowchart which shows operation | movement of an output part. It is a figure which shows an example of a visualization result. It is a figure which shows an example of the visualization result which considered the display attribute. It is a figure which shows an example of the designed user interface.

  Hereinafter, embodiments of the present invention will be described with reference to the drawings.

  FIG. 1 is a configuration diagram of a user interface design support apparatus 1 according to an embodiment of the present invention. The user interface design support apparatus 1 is an apparatus for designing a user interface performed by a designer. The illustrated user interface design support apparatus 1 includes an attribute information analysis unit 11, a functional clause / function relevance degree storage unit 12, a relevance calculation unit 13, an output unit 14, and a display 15.

  The attribute information analysis unit 11 reads the function information 2 input to the user interface design support device 1, analyzes the function information 2, and determines the function clause (function information) and the function relevance level (function related information) of each function. It is generated and stored in the function clause / function relation storage unit 12. The function information 2 is information created in advance by the designer, and information on a plurality of functions is set. The function information 2 will be described later.

  The function clause / function relevance storage unit 12 stores the function clause and the function relevance generated by the attribute information analysis unit 11.

  The relevance calculation unit 13 calculates the distance between each function using the function information and the function related information stored in the function clause / function relevance degree storage unit 12, and uses the calculated distances to determine the positions of all functions. Is calculated and the relevance of the function and the attribute of the function are visualized.

  The output unit 14 arranges the functions corresponding to the respective positions calculated by the relevance calculation unit 13, draws the visualization results of the respective functions indicated by the lines connecting the functions, and displays them on the display 15. Output.

  In addition, the user interface design support apparatus 1 of the present embodiment may further include an editing unit 16 and an input interface 17 (for example, a keyboard, a mouse, etc.).

  The editing unit 16 accepts an operation instruction input by the designer using the input interface 17, and corrects / edits the data stored in the function clause / function related degree storage unit 12. As a result, the designer can edit the data in the input function clause / function relevance storage unit 12 by looking at the visualization result displayed on the display 15.

  The user interface design support apparatus 1 described above can use a general-purpose computer system including a CPU, a memory, an external storage device such as an HDD, an input device, and an output device, for example. In this computer system, each function of the user interface design support apparatus 1 is realized by the CPU executing a program for the user interface design support apparatus 1 loaded on the memory. The program for the user interface design support device 1 can be stored in a computer-readable recording medium such as a hard disk, a flexible disk, a CD-ROM, an MO, a DVD-ROM, or can be distributed via a network. .

  FIG. 2 is an example of the function information 2 input to the user interface design support apparatus 1.

  The function information 2 is information including an attribute of each function constituting a certain system and a relation between functions. The function information 2 is created in advance by the designer. Note that the system of the present embodiment operates, for example, by a combination of functions, and the functions of the present embodiment are used, for example, by a user operating the system and browsing information. .

The illustrated function information 2 has a plurality of functions 201, 202, and 203, and each function has a function name, a use attribute, and a degree of association. The degree of association is expressed by the group (label) to which the function belongs and the association strength (group level) between the group. Each function is grouped in advance in one of the groups, and the group is a set of related functions. In addition, the function holds a relation strength that is a relation strength for the group. Thereby, in this embodiment, the relevance degree with another function is indirectly expressed using a group.
The usage attributes include a degree of importance, a usage frequency (frequency), and a usage time (duration). The degree of importance represents whether the function is a function that is a main characteristic of the system. The usage frequency indicates how much the user uses the function. The use time indicates how long the user continues to use the function per use (use time per time).

  In the illustrated example, the degree of importance, the usage frequency, and the usage time are expressed by numerical values within a predetermined range (for example, “1 to 10”), but may be expressed by other methods. . Moreover, although the function information 2 shown in the figure is described in XML, any description format other than XML may be used.

  The function clause may have a display attribute in addition to the function name 21, the use attribute 22, and the function relevance 23.

  FIG. 3 is an example of function information of one function having a display attribute. The display attribute is information relating to a specific display form when the function is displayed on the display 15. By setting the display attributes, it is easy to determine how each function is expressed on the display 15, and the user interface design work can be facilitated.

  Examples of the display attributes include “size”, “color”, “display form (pop-up, tab, icon, button, etc.)”, “animation”, and the like.

  When outputting the visualization result of the output part 14 mentioned later, the expression of each function is actualized based on a display attribute.

  Next, the process of this embodiment is demonstrated.

  FIG. 4 is a flowchart showing the operation of the attribute information analysis unit 11.

The attribute information analysis unit 11 analyzes the input function information and generates a function clause and a function relevance for each function.
First, the attribute information analysis unit 11 reads function information described using XML or the like (S11), and decomposes each function (S12). Then, for each function, “function name”, “majority” (usage attribute), and “attribute” (usage attribute other than the majority) are extracted (S14, S15, S16). If the display attribute is set as shown in FIG. 3, “display attribute” is also extracted.

  Then, the attribute information analysis unit 11 generates a function clause (data, record) of the function using the extracted function name, the degree of importance, and the attribute (S17), and the function clause / function relation storage unit 12 (S18). FIG. 5A is a diagram illustrating an example of the data structure of the function clause.

  Further, when there is a related function, the attribute information analysis unit 11 generates a function relevance level (data, record) based on the relevance level. That is, referring to the relevance level of the function (S19, S20), it is determined whether there is another function having the same group name as the group name set in the “label” of the relevance level. It discriminate | determines with reference to a relevance degree (S21). When other functions having the same group name exist, a function relevance level is generated for each other function (S22) and stored in the function clause / function relevance level storage unit 12 (S23).

  For example, in the case of the function 201 of the function information shown in FIG. 2, the group name set in “label” is “SEC1”, which is the same as the group names of the function 202 and the function 203. Therefore, two data are generated as the function relevance of the function 201.

  FIG. 5B is a diagram illustrating an example of a data structure of function relevance. The function relevance shown in the figure is a function name for associating with the function clause of FIG. 5A, a relation strength, a group name set in “label”, and a function name or function ID of the function. A function clause and a to-function clause for setting a function name or a function ID of another function having the same group name. The from function clause and the to function clause are related function clauses belonging to the same group. In the function-related strength, an index indicating the strength of the relationship between the from function clause and the to function clause group is set. For example, the average value of the “group level” of the from function clause and the “group level” of the to function clause Is set.

  For all the functions divided in S12, the processing from S13 to S23 is performed, and the function clauses and function relevance degrees of all the functions set in the function information are stored in the function clause / function relevance degree storage unit 12.

  FIG. 6 is a flowchart showing the operation of the relevance calculation unit 13. The relevance calculation unit 13 determines an arrangement for visualizing each functional clause (function). The distance between functional clauses is determined by the relationship strength and the similarity of usage attributes. That is, the stronger the relation strength and the similar the use attribute, the closer the distance between functional clauses. As a specific calculation method for visualization of relevance, in the present embodiment, a technique applying the spring model shown in FIG. 7 is used.

  First, the relevance calculation unit 13 reads the function clause and function relevance data generated in FIG. 4 from the function clause / function relevance degree storage unit 12 (S31). Then, the relevance calculating unit 13 determines the size of each functional node based on the read importance of each functional node (S32). The size of the function clause (function_size) can be calculated by the following equation, for example.

function_size = k1 * importance (k1 = arbitrary constant)
Then, the relevance calculation unit 13 performs the processing from S33 to S38 for each functional clause. That is, the function clause (including the corresponding function relevance level) to be processed is read (S33), and any other function clause (including the corresponding function relevance level) other than the processing target is read (S34). Then, the function clause to be processed is compared with the other function clauses read in S34 (S35).

  Then, when a function clause to be processed is set in the from function clause and there is a function relevance in which the other function clause is set in the to function clause, that is, the comparison target function clause (read in S33 and S34). If there is a relationship to the function clause (S36: YES), the distance (edge_length) between the function clauses to be compared is calculated (S37). Specifically, it is calculated based on the similarity between the relation strength (level) and the usage attribute (element).

  For example, when calculating the distance (edge_length) between node_A and node_B, it can be calculated by the following equation.

edge_length = k2 * Σ | node_A.element (i)-node_B.element (i) | + k / (node_A.level + node_B.level)
(i = 0..n, n = number of usage attributes, k, k2 = arbitrary constant, edge_length> 0)
For example, in the function information shown in FIG. 2, when the function clause to be processed is the volume display function (Volume) 201 and the other function clause is the voice detail display (Voice) 202, the distance (edge_length) is as follows: Street.

(Volume to Voice) .edge_length
= k2 * | 2-2 + 10-5 | + k / (1 + 0.5)
= k2 * 5 + k / 1.5
Further, when the function clause to be processed is the volume display function (Volume) 201 and the other function clause is the video detail display (Image) 203, the distance (edge_length) is as follows.

(Volume to Image) .edge_length
= k2 * | 2-2 + 10-4 | + k / (1 + 0.6)
= k2 * 6 + k / 1.6
When the function clause to be processed is the audio detail display (Voice) 202 and the other function clause is the video detail display (Image) 203, the distance (edge_length) is as follows.

(Voice to Image) .edge_length
= k2 * | 2-2 + 5-4 | + k / (0.5 + 0.6)
= k2 + k / 1.1
In this case, the distance between the audio detail display and the video detail display is relatively short, whereas the distance between the audio detail display and the volume display is relatively long.

  In S37, the elastic force (Fe) (see FIG. 7A) applied to the function node is calculated as follows.

If the length in the x-axis direction is x_length and the length in the y-axis direction is y_length,
x_length = node_A.x-node_B.x
y_length = node_A.y-node_B.y
And the current spring length (current_length) is
current_length = SQRT ((x_length) ² + (y_length) ² )
It becomes.

Furthermore, the inclination angle θ of current_length is
θ = arccos (x / current_length) (where x, y ≠ 0)
Is required.

  That is, current_length is obtained by the Pythagorean theorem, the length in the x-axis direction and the length in the y-axis direction are coordinate differences, and the angle θ is obtained by a trigonometric function. It should be noted that a random value or a predetermined value is used as the initial value of the position (x, y) of the function clause (node) necessary for obtaining current_length. In the second and subsequent iterations, the length of current_length is calculated using the node position (x, y) calculated in the previous iteration.

Also, the elastic force (Fe) is
Fe.x = -k3 * (current_length-edge_length) * cosθ
(However, current_length-edge_length ≠ 0)
Fe.y = -k3 * (current_length-edge_length) * sinθ (k3 = any constant)
It becomes.

  Since the functional nodes (nodes) have a repulsive force (Fr) regardless of whether they are related to each other, the repulsive force (Fr) (see FIG. 7A) is calculated (S38).

If the length in the x-axis direction is x_length and the length in the y-axis direction is y_length,
x_length = node_A.x-node_B.x
y_length = node_A.y-node_B.y
And
The distance between nodes (distance) is
distance = SQRT ((x_length) ² + (y_length.y) ² )
Is required. When there is a relationship (edge_length) between nodes (S36: YES), distance = current_length.

  Furthermore, when the inclination of the distance is an angle θ, the repulsive force (Fr) can be obtained by the following equation.

Fr_x = g / distance ² * cosθ
Fr_y = g / distance ² * sinθ (where g = coefficient of restitution = any constant)
That is, distance is obtained by the Pythagorean theorem, the length in the x-axis direction and the length in the y-axis direction are coordinate differences, and the angle θ is obtained by a trigonometric function.

  In S38, when the function node moves (Fe + Fr ≠ 0), a frictional force (Fu) is generated with respect to the movement amount delta (= Fr + Fe) (FIG. 7B). )reference).

Fu_x = -μ * delta_x
Fu_y = -μ * delta_y (μ = any constant)
Therefore, the moving distance (Fa) that the node moves is calculated as follows.

Fa = (Fe + Fr + Fu)
Finally, the lengths of Fa in the x-axis direction and y-axis direction are applied to x and y of node_A, respectively, and the node position is calculated.

node_A.x = node_A.x + Fa.x
node_A.y = node_A.y + Fa.y
If there is another uncompared function clause, the process returns to S34 and the following processing is repeated. When the processing from S34 to S38 is completed for all other functional clauses, the process returns to S33, and the same processing is performed for the next functional clause.

  After all the function clauses have been processed, a termination determination is made (S39). That is, when the movement distances (Fa) of all the function nodes (nodes) are below a certain value (for example, 10 or less) (S39: YES), the processing in FIG. On the other hand, when the movement distance (Fa) of any functional clause exceeds a certain value (S39: NO), the process returns to S33 and the subsequent processing is repeated. That is, the process is repeated until there is no change in the position of the function clause. Note that the coordinates (positions) and distances between functions calculated by the relevance calculation unit 13 are stored in the function node / function relevance storage unit 12.

  By the above processing, it is possible to visualize in consideration of the relationship and strength of the function, the similarity of the use attribute, and the importance.

  It is also possible to determine whether or not each functional clause should be displayed on a separate screen. Specifically, an arbitrary threshold value (edge_threshold) is defined for edge_length. At this time, one function (functional clause A) in a certain group is considered. If the average edge_length with other functional clauses belonging to the same group connected to functional clause A is within the threshold value, it should be displayed on the same screen, and if it exceeds the threshold value, it should be displayed on another screen It is determined that By performing such calculation for all functional clauses, it is possible to determine whether or not each functional clause should be displayed on a separate screen.

  This makes it possible to automatically generate a candidate as to which function should be included in the same screen. Further, whether or not they should be arranged close to each other can also be calculated by similarly determining a threshold value. The threshold varies depending on the environment (PC, smartphone, web browser, etc.) that uses the system, and the designer designs the user interface while setting the threshold according to circumstances.

  FIG. 8 is a flowchart showing the operation of the output unit 14.

  The output unit 14 reads the data stored in the function clause / function relation storage unit 12 (S51), and performs the processing of S52 to S56 for each function clause. That is, the data of the target functional clauses are read in order (S52), the functional clauses are arranged at the positions calculated by the relevance calculation unit 13 (S53), and the arranged functional clauses are based on the use attribute and the display attribute. (S54). If the function clause has a function relevance level (S55), a closed region including the function and including all the related function clauses is drawn (S56). Then, the process returns to S52, the data of the next functional section is read, the subsequent processing is performed, and the drawing is performed for all the functional sections.

  FIG. 9 is an example in which the result obtained by the relevance calculation unit 13 is visualized by the operation of the output unit shown in FIG. In the example shown in the figure, each functional clause is arranged at a calculated position (FIG. 6: S38), and is represented by a circle of a size (FIG. 6: S32) calculated using the degree of importance.

  Further, related functional sections are indicated by solid lines connecting the functional sections. The relation strength indicated by edge_length and the similarity of the function attribute are expressed using the weight of the solid line.

weight = k4 * edge_length (k4 = arbitrary constant)
Further, the length of the solid line is expressed by current_length. The reason why not only the distance but also the thickness is used for the expression of the relation strength is that the distance between the functional clauses (current_length) may be longer than the theoretical value (edge_length) for convenience of display.

  In the illustrated example, the group to which the function belongs is surrounded by a closed area (hatching). In addition, functional clauses that should be displayed on the same screen are divided by closed regions (dotted lines). This makes it easy for the designer to determine which functions should be included in or separated from the same screen. In the example shown in FIG. 9, the video display function belongs to three groups.

  FIG. 10 shows an example of visualization by adding expression attributes (see FIG. 3) in addition to the visualization example of FIG. In the illustrated example, each functional clause is not a circle but is expressed based on attribute information set as a display attribute. This allows you to list what the function clause should be expressed in.

  FIG. 11 shows an example of a user interface designed based on the result visualized in FIG. 9 or FIG. The designer can consider the screen configuration, creation of icons, and the like based on the visualization result automatically generated as shown in FIG. 9 or FIG. In the example shown in the figure, the screen is composed of three screens.

  Note that the result (FIGS. 9 and 10) displayed by the output unit 14 can be edited by the designer using the input interface 17 and the editing unit 16. That is, the designer can edit / update the function clause and the function relevance stored in the function clause / function relevance storage unit 12 using the input interface 17. With respect to the function clause, each attribute can be changed, and with respect to the function relevance level, the association and association strength can be edited, added, and deleted. The editing unit 16 receives the changed result via the input interface 17 and updates the information in the function clause / function relation storage unit 12.

  Visualized candidates can be changed, updated, and memorized interactively, so it is possible to visually grasp where the affected part is when changes are made, and to consider changes such as whether it is really possible to make changes. Easy to do.

  In the present embodiment described above, the functional information described based on the determined rule is analyzed, the relevance is calculated, and the designer draws the screen on the screen based on the predetermined rule. By looking at it, it is possible to easily grasp information related to functions such as not only the relation between functions but also the strength of the relation between the functions and the difference in how the functions are used and make it easier to understand. In addition, it is possible to design a user interface that is easy to use for designers by automatically generating candidates such as which functions should be placed close to each other, whether they should be included in the same screen, and what functions should not be placed on the same screen. Can help.

  In addition, since the generated functional section can be changed interactively, when changes are made, it is possible to visually grasp where the affected part is, and it is easy to consider changes, such as whether it is really possible to make changes. Can be done.

  In addition, user interface design can be performed in a short period of time and with less labor, without requiring advanced specialized knowledge. As a result, it is possible to perform a dense study on the user interface in a short period of time, and it is possible to create a user interface that is easier for the user to understand.

  In addition, this invention is not limited to the said embodiment, Many deformation | transformation are possible within the range of the summary.

  The present invention can also be used for designing a graphical user interface (for example, a web conference system).

1: User interface design support device 11: Attribute information analysis unit 12: Functional clause / function relevance storage unit 13: Relevance calculation unit 14: Output unit 15: Display 16: Editing unit 17: Input interface 2: Function information

Claims (5)

A user interface design support device for supporting user interface design,
Analyzes function information in which information related to a plurality of functions of the user interface is set, and generates and stores function information indicating an attribute of the function and function related information indicating a function related to the function for each function Analysis means for storing in the means;
Using the function information and function related information stored in the storage means, calculating the distance between each function, and calculating the position of all functions using the calculated distance;
An output unit that outputs a visualization result of each function, in which a function corresponding to each position calculated by the calculation unit is arranged, and a related function is indicated by a line connecting the functions;
The output means represents the strength of the relationship using the length of a line connecting the related functions, and displays a region including the function group belonging to the same group in the visualization result. Support device. The user interface design support device according to claim 1,
A user interface design support apparatus, further comprising an editing unit that receives a user instruction and edits information stored in the storage unit. A user interface design support method for supporting user interface design performed by a computer,
The computer
Analyzes function information in which information related to a plurality of functions of the user interface is set, and generates and stores function information indicating an attribute of the function and function related information indicating a function related to the function for each function An analysis step stored in a section;
Using the function information and function related information stored in the storage unit, calculating the distance between each function, calculating the position of all functions using the calculated distance,
The function corresponding to each position calculated in the calculation step is arranged, and the related function is indicated by a line connecting the functions, and an output step of outputting a visualization result of each function is performed.
The output step represents the strength of the relationship using the length of a line connecting the related functions, and displays a region including a function group belonging to the same group in the visualization result. Support method. A user interface design support method according to claim 3,
The computer further receives an instruction of a user, and further performs an editing step of editing information stored in the storage unit.   A user interface design support program for causing a computer to function as the user interface design support device according to claim 1.

Images