WO2012101700A1 - UI(User Interface)作成支援装置、UI作成支援方法及びプログラム - Google Patents

UI(User Interface)作成支援装置、UI作成支援方法及びプログラム Download PDF

Info

Publication number
WO2012101700A1
WO2012101700A1 PCT/JP2011/006631 JP2011006631W WO2012101700A1 WO 2012101700 A1 WO2012101700 A1 WO 2012101700A1 JP 2011006631 W JP2011006631 W JP 2011006631W WO 2012101700 A1 WO2012101700 A1 WO 2012101700A1
Authority
WO
WIPO (PCT)
Prior art keywords
screen
display
configuration
creation support
components
Prior art date
Application number
PCT/JP2011/006631
Other languages
English (en)
French (fr)
Inventor
亮介 大久保
俊輔 鈴木
由紀子 谷川
Original Assignee
日本電気株式会社
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by 日本電気株式会社 filed Critical 日本電気株式会社
Priority to JP2012554494A priority Critical patent/JPWO2012101700A1/ja
Priority to US13/981,225 priority patent/US20130305176A1/en
Publication of WO2012101700A1 publication Critical patent/WO2012101700A1/ja

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00Arrangements for program control, e.g. control units
    • G06F9/06Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44Arrangements for executing specific programs
    • G06F9/445Program loading or initiating
    • G06F9/44505Configuring for program initiating, e.g. using registry, configuration files
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00Arrangements for program control, e.g. control units
    • G06F9/06Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44Arrangements for executing specific programs
    • G06F9/451Execution arrangements for user interfaces

Definitions

  • the present invention relates to a UI creation support apparatus, a UI creation support method, and a program.
  • the UI screen designer needs to understand the user who uses the UI screen (hereinafter, “assumed user”) and design a UI screen suitable for the assumed user. It is not easy to do.
  • Patent Document 1 discloses a technique for selecting a part to be arranged on a UI screen according to a user and generating a UI screen for the user in which only the selected part is arranged.
  • Patent Document 2 in a system having a function of providing help information when a user requests help information, help information provided according to the user is selected and only the selected help information is displayed on the display unit. A technique for displaying is disclosed.
  • Patent Document 3 describes a GUI (Graphical User Interface) component corresponding to the above device for the purpose of creating a UI screen corresponding to each mobile terminal for mobile terminals equipped with different devices including keys and displays. There is described an information processing terminal that calculates a size and a display position on a screen when displaying a GUI component when an application to be displayed is started, and displays the GUI component according to the content.
  • GUI Graphic User Interface
  • Patent Literature 4 does not require extensive user training, and is displayed on the GUI in a system that displays, edits, and processes multi-dimensional data efficiently and simply in real time using an intuitive GUI.
  • a configuration is described in which a user can execute editing (deletion, etc.) of an “event” included in a basic data element of a data structure.
  • the present inventors have found that some users feel unwieldy about a UI screen on which a large amount of information is displayed on the display at the same time, while others find it easy to handle a UI screen on which a large amount of information is displayed on the display at the same time. . For example, when a large amount of information is displayed on the display at the same time for a certain user, it becomes difficult to understand the information, and processing efficiency, accuracy, and the like deteriorate. In addition, other users do not have the above-described problems, but rather, it is possible to increase the processing efficiency for the reason that all inputs can be performed only by direct input using the keyboard.
  • display display information the amount of information displayed simultaneously on the display is reduced. It has changed.
  • the information displayed on the UI screen is always different between the two UI screens having different amounts of display display information. That is, a situation may occur in which information included in one UI screen is not included in the other UI screen.
  • Patent Document 3 is not configured to change the amount of display display information.
  • the technique of patent document 4 can change the amount of display display information by deleting the information displayed on UI screen, similarly to the technique described in patent documents 1 and 2, Two UI screens having different amounts of display information may always have different information displayed on the UI screen.
  • the present invention provides a technique for designing a UI screen suitable for an assumed user by changing the amount of information displayed on the display at the same time while ensuring the identity of the information displayed on the UI screen. Is an issue.
  • a UI creation support apparatus that performs support for creating a UI screen for a predetermined service in which a plurality of UI components are arranged, and according to an assumed user who uses the UI screen, Provided is a UI creation support apparatus having UI configuration determining means for determining the configuration of the UI screen for the assumed user by changing the number of the UI components that are simultaneously displayed on the display while including all of the plurality of UI components. Is done.
  • a UI creation support method for supporting creation of a UI screen for a predetermined service in which a plurality of UI components are arranged, according to an assumed user who uses the UI screen.
  • a UI creation support method comprising a UI configuration determination step for determining the configuration of the UI screen for the assumed user by changing the number of the UI components that are simultaneously displayed on a display while including all of the plurality of UI components Is provided.
  • a program for providing support for creating a UI screen for a predetermined service in which a plurality of UI components are arranged and a computer is provided to an assumed user who uses the UI screen. Accordingly, to change the number of the UI parts that are simultaneously displayed on the display while including all of the plurality of UI parts, and to function as a UI configuration determining unit that determines the configuration of the UI screen for the assumed user. Programs are provided.
  • a UI screen suitable for an assumed user by changing the amount of information displayed simultaneously on the display while ensuring the identity of information displayed on the UI screen.
  • each unit of the present embodiment includes an arbitrary computer CPU, memory, a program loaded in the memory (a program stored in the memory in advance from the stage of shipping the device, a storage medium such as a CD, and the Internet). And a storage unit such as a hard disk for storing the program, and a network connection interface, and any combination of hardware and software. It will be understood by those skilled in the art that there are various modifications to the implementation method and equipment.
  • each device of the present embodiment is described as being realized by one device, but the means for realizing it is not limited to this. That is, it may be a physically separated configuration or a logically separated configuration.
  • the UI component display density (arrangement density) on the UI screen is changed according to the assumed user without changing (selecting) the UI components to be arranged on the UI screen. Also, in order to arrange all the predetermined UI parts on the UI screen, the UI screen size (area) is changed according to the display density (placement density) of the UI parts, and a scroll display method is displayed on the UI screen as necessary. Incorporate In the present embodiment, with such a configuration, it is possible to change the amount of information simultaneously displayed on the display while ensuring the identity of the information displayed on the UI screen.
  • UI screen design performed by a UI screen designer
  • the support content illustrated here is an example to the last, and is not limited to this.
  • FIG. 1 is a functional block diagram showing an example of the configuration of the UI creation support apparatus 1 of the present embodiment.
  • the UI creation support apparatus 1 of the present embodiment includes a UI configuration determination unit 10.
  • the UI creation support apparatus 1 of the present embodiment may further include an input reception unit 20, a UI component holding unit 30, a UI creation unit 40, and an output unit 50.
  • the UI creation support apparatus 1 performs support for creating a UI screen for a predetermined service.
  • the content of the predetermined service is not particularly limited.
  • a plurality of UI parts are arranged on the UI screen.
  • the “UI component” corresponds to any component constituting the UI screen.
  • a character / graphic displayed on the UI screen The mere information consisting of is also included.
  • the type and number of UI parts arranged on the UI screen are not particularly limited, and are design matters that can be determined based on the usage scene, usage, and the like of the UI screen.
  • the UI configuration determination unit 10 includes all of a plurality of UI components arranged on the UI screen according to an assumed user who uses the UI screen, and the number of UI components displayed simultaneously on the display that displays the UI screen. To determine the UI screen configuration for the assumed user.
  • the plurality of UI components arranged on the UI screen are UI components that are determined to be arranged on the UI screen in the design of the UI screen (hereinafter, “design UI components”). It is a design matter to determine which UI part is the design UI part.
  • the “UI component displayed simultaneously on the display” is a UI component (hereinafter referred to as “display UI component”) that is displayed at the same time in the display that displays the UI screen. UI parts. Depending on the size of the UI screen and the like, the entire UI screen may or may not be displayed on the display at the same time. For this reason, the display UI component is a concept that becomes a part or all of the design UI component.
  • the UI configuration determination unit 10 changes the number of UI parts displayed simultaneously on the display by changing the display density of UI parts on the UI screen according to the assumed user. Specifically, the UI configuration determination unit 10 reduces the number of UI components that are simultaneously displayed on the display by reducing the display density of UI components on the UI screen according to the assumed user. Also, the UI configuration determination unit 10 increases the number of UI components displayed simultaneously on the display by increasing the display density of the UI components on the UI screen according to the assumed user.
  • the change of the UI component display density on the UI screen can be realized, for example, by changing the UI component arrangement rule on the UI screen.
  • the UI configuration determination unit 10 may determine the configuration of the UI screen for the assumed user by determining a UI component arrangement rule on the UI screen according to the assumed user.
  • the content of the UI component placement rule is not particularly limited, for example, a rule that determines the maximum number of UI components that can be placed in the same row on the UI screen, and the line direction between UI components on the UI screen. Combining at least two of the plurality of rules listed here, the rule defining the spacing, the rule defining the spacing in the column direction between UI components, the rule defining the row and column spacing between UI components It may be a rule. Specific values in each rule are design matters. For example, the UI configuration determination unit 10 may select one value from a plurality of predetermined candidate values according to the assumed user. .
  • the arrangement rule exemplified here is merely an example, and other contents may be used as long as the display density of the UI parts can be changed.
  • FIGS. 2 to 4 show examples of UI screens in which a plurality of UI parts are arranged according to different arrangement rules.
  • the UI screen shown in FIGS. 2 to 4 shows a state displayed on the display.
  • the UI screen shown in FIG. 2 is a UI screen for ordering system for inputting the contents of ordering / ordering.
  • On the UI screen in addition to UI parts consisting of information such as “ordering system”, “basic information”, and “product name”, UI parts such as “input box” and “radio button” for receiving predetermined user input are displayed. Including design UI parts.
  • the UI screen shown in FIG. 2 is a UI screen (hereinafter, “first UI screen”) on which all design UI components are displayed on the display at the same time.
  • the UI configuration determination unit 10 can determine an arrangement rule such that all the design UI parts are simultaneously displayed on the display, like the first UI screen shown in FIG.
  • the arrangement rule of the first UI screen is not particularly limited as long as it can realize a configuration in which all design UI parts are displayed on the display at the same time.
  • second UI screen is a UI screen (hereinafter, “second UI screen”) in which the display density of UI parts is smaller than the display density of UI parts on the first UI screen.
  • the arrangement rule for the second UI screen shown in FIGS. 3 and 4 is smaller in the maximum number of UI components that can be arranged in the same row than the arrangement rule for the first UI screen shown in FIG.
  • the second UI screen shown in FIGS. 3 and 4 has a lower UI component display density and a smaller number of UI components displayed simultaneously on the display than the first UI screen shown in FIG. ing.
  • the second UI screen shown in FIG. 4 has a smaller UI component display density than the second UI screen shown in FIG.
  • the arrangement rule for the second UI screen shown in FIG. 4 is smaller in the maximum number of UI components that can be arranged in the same row than the arrangement rule for the second UI screen shown in FIG.
  • the UI configuration determination unit 10 has a UI component display density lower than the UI component display density on the first UI screen, as in the second UI screen illustrated in FIGS. 3 and 4. Such an arrangement rule can be determined.
  • the arrangement rule of the second UI screen may be any as long as it can realize a configuration in which the display density of UI parts is smaller than the display density of UI parts on the first UI screen.
  • the described arrangement rule is an example.
  • the design UI component of the second UI screen shown in FIGS. 3 and 4 and the design UI component of the first UI screen shown in FIG. 2 are the same.
  • the second UI screen shown in FIGS. 3 and 4 is larger than the first UI screen and adopts a scroll display method.
  • “According to an assumed user” may be, for example, “according to an assumed user's proficiency level in a predetermined service”.
  • the UI configuration determination unit 10 increases the number of UI components displayed on the display at the same time when the proficiency level of the assumed user is high, and simultaneously displays on the display when the proficiency level of the assumed user is low.
  • the configuration of the UI screen may be determined so that the number of UI parts is reduced.
  • “according to the assumed user” may be, for example, “according to the proficiency level of the assumed user in the device for operating the UI screen (eg, PC)”.
  • the UI configuration determination unit 10 increases the number of UI parts displayed simultaneously on the display when the proficiency level of the assumed user is high, and simultaneously displays on the display when the proficiency level of the assumed user is low.
  • the configuration of the UI screen may be determined so that the number of UI parts is reduced.
  • “according to the assumed user” may be, for example, “frequency with which the assumed user performs a predetermined service”.
  • the UI configuration determination unit 10 increases the number of UI parts displayed on the display at the same time when the frequency of the assumed user is high, and displays the UI parts simultaneously on the display when the frequency of the assumed user is low.
  • the UI screen configuration may be determined so as to reduce the number of items.
  • the input receiving unit 20 receives input of information indicating the attribute of the assumed user from the user.
  • the information indicating the attribute of the assumed user is, for example, “information indicating the proficiency level of the assumed user in the predetermined service” or “information indicating the proficiency level of the assumed user in the device for operating the UI screen (eg, PC)” It may be.
  • These pieces of information may be, for example, information obtained by scoring the proficiency level of the assumed user (for example, 5-level evaluation).
  • the input receiving unit 20 may directly receive an input of a score indicating the proficiency level of the assumed user from the user, or may receive an input of information for calculating a score indicating the proficiency level of the assumed user. Also good.
  • the information for calculating the score indicating the proficiency level of the assumed user may be information on the assumed user such as the gender, age, service usage period, and occupation of the assumed user.
  • the input receiving unit 20 may calculate a score indicating the proficiency level of the assumed user using a predetermined calculation rule stored in advance based on such information received as input.
  • the means for the input receiving unit 20 to receive the input of information as described above is not particularly limited, and can be realized using any input device such as a keyboard, a mouse, a touch panel display, and the like.
  • the information indicating the attribute of the assumed user who has received the input by the input receiving unit 20 is passed to the UI configuration determining unit 10. Then, the UI configuration determination unit 10 determines the configuration of the UI screen corresponding to the assumed user based on the acquired information indicating the attribute of the assumed user. For example, the UI configuration determination unit 10 stores in advance information that associates information indicating the proficiency level of the assumed user (for example, a score) with information indicating the display density level of the UI component, and uses the information. Then, the UI screen configuration corresponding to the assumed user may be determined.
  • the UI component holding unit 30 holds UI components (design UI components) that are determined to be arranged on the UI screen in the design of the UI screen.
  • FIG. 5 shows an example of a UI component held by the UI component holding unit 30.
  • GUI components for receiving input from the user are listed in the “content” column.
  • “classification 1” and “item name” fields information displayed in association with each GUI component on the UI screen is described. For example, the text box described at the top of the “content” column is displayed in association with the information of “basic information” and “product name” on the UI screen.
  • the UI creation unit 40 uses the design UI parts held by the UI part holding unit 30 and arranges the design UI parts according to the UI screen configuration (eg, arrangement rule) determined by the UI configuration determination unit 10 to display the UI screen. Create As a result, a UI screen as shown in FIGS. 2 to 4 is obtained.
  • the UI screen configuration eg, arrangement rule
  • the UI creation unit 40 arranges the design UI components shown in FIG. 5 acquired from the UI component holding unit 30 on the UI screen. Further, the UI creation unit 40 sets one of the “item names” shown in FIG. 5 and the “contents” associated with the “item name” as a set (hereinafter “usage information”), and uses a plurality of usages. It is assumed that information is arranged on the UI screen from left to right and from top to bottom. Furthermore, the UI creation unit 40 does not place usage information with different information of “Category 1” associated with each other on the same line. The UI creation unit 40 acquires from the UI configuration determination unit 10 an arrangement rule that defines the maximum number of usage information that can be arranged in the same row.
  • the order in which the usage information is arranged may be from right to left and from bottom to top.
  • the arrangement rule can have other contents.
  • the UI creation unit 40 sets a position (hereinafter, “offset position”) where usage information is arranged on the UI screen as an initial position (S201).
  • the initial position here is the left end of the area located below the area (header area) displaying the page title, login name, help / guidance information, etc. (see FIGS. 2 to 4), but is limited to this. is not.
  • the UI creation unit 40 takes out the usage information one set at a time in a predetermined order (design items) from the design UI parts shown in FIG. 5 and arranges the extracted usage information on the UI screen. Go (S202).
  • the UI creation unit 40 places the extracted usage information at the offset position (S203).
  • the GUI components specified by “item name” and “content” are arranged in this order from the left.
  • the UI creation unit 40 determines whether or not the usage information that has just been placed is the usage information that has been placed last among the usage information associated with the associated classification 1 (S204). .
  • the UI creation unit 40 moves the offset position to the beginning of the next line (S207). That is, the x coordinate of the offset position is set to the leftmost value, and the y coordinate is increased by one line. On the other hand, if the result of determination is No, the process proceeds to S205.
  • the UI creation unit 40 determines whether the number of usage information arranged in the row where the usage information is arranged is smaller than a predetermined number in the state after the usage information is arranged in S203.
  • the predetermined number is the maximum number of usage information that can be arranged in the same row, which is specified by the arrangement rule acquired by the UI creation unit 40 from the UI configuration determination unit 10.
  • the UI creation unit 40 moves the offset position to the beginning of the next line (S207). That is, the x coordinate of the offset position is set to the leftmost value, and the y coordinate is increased by one line. On the other hand, if the result of determination is Yes, the UI creation unit 40 moves the offset position to the next (same row) next to the usage information that has just been placed (S206).
  • the UI creation unit 40 repeats S203 to S207 until all the usage information held by the UI component holding unit 30 is arranged, thereby completing the arrangement of all the design UI parts on the UI screen.
  • the output unit 50 outputs the UI screen created by the UI creation unit 40 via an output device such as a display. As a result, the user can check the UI screen as shown in FIGS.
  • the UI creation support method of this embodiment includes an input reception step S10, a UI configuration determination step S20, a UI creation step S30, and an output step S40.
  • the input reception unit 20 receives an input of information indicating the attribute of the assumed user from the user.
  • the input receiving unit 20 receives an input of “information indicating the proficiency level of an assumed user in a predetermined service” (eg, five-step evaluation).
  • the UI configuration determination unit 10 changes the number of UI components simultaneously displayed on the display while including all the design UI components based on the information acquired by the input reception unit 20 in S10. Then, the configuration of the UI screen of the assumed user is determined. For example, the UI configuration determination unit 10 determines the layout rule of the design UI component on the UI screen for the assumed user based on “information indicating the proficiency level of the assumed user in the predetermined service” (for example, five-level evaluation). .
  • the UI creation unit 40 creates a UI screen according to the UI screen configuration determined by the UI configuration determination unit 10 in S20.
  • the UI creation unit 40 uses the design UI parts held by the UI part holding unit 30 and arranges the design UI parts according to the UI screen configuration (eg, placement rule) determined by the UI configuration determination unit 10. Create a UI screen.
  • a UI screen as shown in FIGS. 2 to 4 is obtained.
  • the output unit 50 outputs the UI screen created by the UI creation unit 40 in S30 via, for example, a display.
  • an input for saving the UI screen configuration output in S40 from the user may be received, and information indicating the UI screen configuration may be stored in accordance with the input.
  • the information indicating the configuration of the UI screen may be the data of the UI screen on which the designed UI parts are arranged, or the arrangement rule determined by the UI configuration determining unit 10 in S20.
  • the UI creation support apparatus 1 of the present embodiment can be realized, for example, by installing the following program in a computer.
  • a program for providing support for creating a UI screen for a predetermined service in which a plurality of UI components are arranged the computer comprising: In accordance with an assumed user who uses the UI screen, the number of the UI parts displayed simultaneously on the display is changed while including all of the plurality of UI parts, and the configuration of the UI screen for the assumed user is determined.
  • a program for functioning as UI configuration determining means In accordance with an assumed user who uses the UI screen, the number of the UI parts displayed simultaneously on the display is changed while including all of the plurality of UI parts, and the configuration of the UI screen for the assumed user is determined.
  • UI screen design performed by a UI screen designer
  • the support content illustrated here is an example to the last, and is not limited to this.
  • the functional block diagram showing an example of the configuration of the UI creation support apparatus 1 of the present embodiment is the same as that of the first embodiment. That is, as illustrated in FIG. 1, the UI creation support apparatus 1 according to the present embodiment includes a UI configuration determination unit 10. In addition, the UI creation support apparatus 1 of the present embodiment may further include an input reception unit 20, a UI component holding unit 30, a UI creation unit 40, and an output unit 50.
  • the UI configuration determination unit 10 configures a UI screen (first UI screen) in which all design UI components are simultaneously displayed on the display as illustrated in FIG. 2 according to an assumed user. Can be determined as the configuration of the UI screen for the assumed user.
  • the UI configuration determination unit 10 has the configuration of the second UI screen in which the number of UI components simultaneously displayed on the display is smaller than that of the first UI screen, according to the assumed user, as in the first embodiment.
  • the UI screen configuration for the assumed user can be determined.
  • the configuration of the second UI screen determined by the UI configuration determining unit 10 of the present embodiment is different from the configuration of the second UI screen determined by the UI configuration determining unit 10 of the first embodiment. This will be described below.
  • the UI configuration determination unit 10 determines the configuration of the UI screen having a display method for dividing the UI screen into a plurality of pages and sequentially displaying the plurality of pages on the display as the configuration of the second UI screen. To do. In other words, the design UI parts are divided into a plurality of pages, and a predetermined number of design UI parts are sequentially arranged on the display.
  • FIGS. 8A to 8C and 9A to 9F show examples of the configuration of the second UI screen determined by the UI configuration determining unit 10 of the present embodiment.
  • a UI screen corresponding to the first UI screen shown in FIG. 2 is configured by the three pages shown in FIGS.
  • a UI screen corresponding to the first UI screen shown in FIG. 2 is configured by the six pages shown in FIGS. 9A to 9F.
  • the first UI screen shown in FIG. 2 is classified as “basic information”, “requester information”, and “destination person in charge information” 1 (see FIG. 5). ) And is displayed on one page.
  • the plurality of pages are displayed on the display in a predetermined order in response to input of “next” and “previous” buttons provided on each page.
  • the arrangement of UI components on the UI screen shown in FIGS. 8A to 8C that is, the number of UI components arranged in one line, the interval between UI components, and the like are shown in FIG. It has the same configuration as the UI screen.
  • each page of the UI screen shown in FIGS. 8A to 8C is further divided into two pages.
  • the plurality of pages are also displayed on the display in a predetermined order in accordance with the input of “next” and “previous” buttons provided on each page.
  • the UI component arrangement method on the UI screen shown in FIGS. 9A to 9F that is, the number of UI components arranged in one line, the interval between UI components, and the like are shown in FIG. It has the same configuration as the UI screen.
  • the UI creation unit 40 uses the design UI parts held by the UI part holding unit 30 and creates the UI screen by arranging the design UI parts according to the UI screen configuration determined by the UI configuration determination unit 10. As a result, UI screens such as those shown in FIGS. 2, 8 (a) to (c) and 9 (a) to (f) are obtained.
  • the second UI screen of this embodiment is a UI component of the first UI screen (see FIG. 2) as shown in FIGS. 8 (a) to 8 (c) and 9 (a) to (f).
  • the second embodiment is different from the first embodiment in that it can be arranged in the same manner as the arrangement.
  • the layout of design UI parts may be fixed. For example, by matching the arrangement method of information described in a slip or the like exchanged on a paper medium with the arrangement method on the UI screen of a design UI component corresponding to the information described on the paper medium, There may be a case where the input efficiency is improved.
  • the information displayed on the UI screen is displayed at the same time while maintaining the same information displayed on the UI screen. It is possible to design a UI screen suitable for the assumed user by changing the amount of information to be stored.
  • a functional block diagram showing an example of the configuration of the UI creation support apparatus 1 of the present embodiment is the same as that of the first embodiment. That is, as illustrated in FIG. 1, the UI creation support apparatus 1 according to the present embodiment includes a UI configuration determination unit 10. In addition, the UI creation support apparatus 1 according to the present embodiment may further include an input reception unit 20, a UI component holding unit 30, a UI creation unit 40, and an output unit 50.
  • the configuration of the UI configuration determination unit 10 will be described. Note that the configurations of the input receiving unit 20, the UI component holding unit 30, the UI creating unit 40, and the output unit 50 are the same as those in the first embodiment, and a description thereof will be omitted here.
  • the UI configuration determination unit 10 displays a UI screen on which all the design UI parts are simultaneously displayed on the display as shown in FIG. 2 according to the assumed user, as in the first and second embodiments.
  • the configuration of the (first UI screen) can be determined.
  • the UI configuration determination unit 10 has a second UI screen in which the number of UI components displayed simultaneously on the display is smaller than the first UI screen, depending on the assumed user. Can be determined.
  • the configuration of the second UI screen determined by the UI configuration determining unit 10 of the present embodiment is different from the configuration of the second UI screen determined by the UI configuration determining unit 10 of the first and second embodiments.
  • the UI configuration determination unit 10 divides the UI screen into a plurality of pages according to the configuration of the second embodiment as the configuration of the second UI screen, and sequentially converts the plurality of pages.
  • a configuration of a UI screen having a display method to be displayed on the display is determined. That is, the design UI parts are arranged in a plurality of pages, and a predetermined number of design UI parts are sequentially arranged on the display.
  • the UI configuration determination unit 10 changes the arrangement of the design UI parts distributed to each page as the configuration of the second UI screen according to the configuration of the first embodiment. That is, the UI configuration determination unit 10 changes the display density of UI components on the UI screen according to the assumed user. It is preferable that the display density is such that all the design UI parts on each page are displayed on the display at the same time.

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • User Interface Of Digital Computer (AREA)
  • Stored Programmes (AREA)

Abstract

 UI(User Interface)画面に表示される情報の同一性を確保したまま、ディスプレイに同時に表示される情報の量を変更して、想定ユーザに適したUI画面を設計するために、複数のUI部品が配置される所定のサービス用のUI画面を作成するための支援を行うUI作成支援装置(1)であって、UI画面を使用する想定ユーザに応じて、複数のUI部品の全てを含みつつディスプレイに同時に表示されるUI部品の数を変更して、想定ユーザ用のUI画面の構成を決定するUI構成決定部(10)を有するUI作成支援装置(1)を提供する。

Description

UI(User Interface)作成支援装置、UI作成支援方法及びプログラム
 本発明は、UI作成支援装置、UI作成支援方法及びプログラムに関する。
 UI画面の設計者は、UI画面を使用するユーザ(以下、「想定ユーザ」)を把握し、当該想定ユーザに適したUI画面を設計する必要があるが、想定ユーザに適したUI画面を設計することは容易でない。
 特許文献1には、ユーザに応じてUI画面に配置する部品を取捨選択し、選択した部品のみを配置した当該ユーザ用のUI画面を生成する技術が開示されている。
 特許文献2には、ユーザからヘルプ情報の要求があった場合にヘルプ情報を提供する機能を有するシステムにおいて、ユーザに応じて提供するヘルプ情報を取捨選択し、選択したヘルプ情報のみを表示部に表示する技術が開示されている。
 特許文献3には、キーやディスプレイを含む異なるデバイスを搭載した移動端末について、各々の移動端末に応じたUI画面を作成することを目的とし、上記デバイスに対応したGUI(Graphical User Interface)部品を表示するアプリケーションが起動されると、GUI部品を表示するときの画面上での大きさや表示位置を算出し、当該内容に従ってGUI部品を表示する情報処理端末が記載されている。
 特許文献4には、広範にわたるユーザ訓練を必要とせず、直感的GUIを用いて、効率よく、簡潔に、リアルタイムで多次元データを表示し、編集し、処理するシステムにおいて、GUIで表示されるデータ構造の基本データ要素に含まれる「イベント」の編集(削除等)を、ユーザが実行できる構成が記載されている。
特開2004-355418号公報 特開2001-117688号公報 特開2010-267186号公報 特表2005-525658号公報
 本発明者らは、多量の情報がディスプレイに同時に表示されるUI画面を扱いにくく感じるユーザもいれば、多量の情報がディスプレイに同時に表示されるUI画面を扱いやすく感じるユーザもいることを見出した。例えば、あるユーザは、多量の情報がディスプレイに同時に表示されると、情報を理解し難くなり、処理効率や正確性などが低下する。また、他のユーザは、上述のような問題がなく、むしろ、キーボードによる直接入力のみで全ての入力を行うことが可能となる等の理由により、処理効率を高めることができる。
 ここで、特許文献1及び2に記載の技術では、ユーザに応じてUI画面に表示する情報を取捨選択することで、ディスプレイに同時に表示される情報(以下、「ディスプレイ表示情報」)の量を変更している。
 このような特許文献1及び2に記載の技術の場合、ディスプレイ表示情報の量が異なる2つのUI画面は、必ず、UI画面に表示される情報が異なってしまう。すなわち、一方のUI画面に含まれる情報が他方のUI画面に含まれないなどの状況が生じ得る。
 上述のように、特許文献1及び2に記載の技術の場合、UI画面に表示される情報の同一性を確保したまま、ディスプレイ表示情報の量を変更することはできないという問題がある。
 特許文献3に記載の技術は、ディスプレイ表示情報の量を変更するようには構成されていない。また、特許文献4に記載の技術は、UI画面に表示する情報を削除することで、ディスプレイ表示情報の量を変更できるとも考えられるが、特許文献1及び2に記載の技術と同様に、ディスプレイ表示情報の量が異なる2つのUI画面は、必ず、UI画面に表示される情報が異なるという状況が生じ得る。
 そこで、本発明では、UI画面に表示される情報の同一性を確保したまま、ディスプレイに同時に表示される情報の量を変更して、想定ユーザに適したUI画面を設計する技術を提供することを課題とする。
 本発明によれば、複数のUI部品が配置される所定のサービス用のUI画面を作成するための支援を行うUI作成支援装置であって、前記UI画面を使用する想定ユーザに応じて、前記複数のUI部品の全てを含みつつディスプレイに同時に表示される前記UI部品の数を変更して、前記想定ユーザ用の前記UI画面の構成を決定するUI構成決定手段を有するUI作成支援装置が提供される。
 また、本発明によれば、複数のUI部品が配置される所定のサービス用のUI画面を作成するための支援を行うUI作成支援方法であって、前記UI画面を使用する想定ユーザに応じて、前記複数のUI部品の全てを含みつつディスプレイに同時に表示される前記UI部品の数を変更して、前記想定ユーザ用の前記UI画面の構成を決定するUI構成決定ステップを有するUI作成支援方法が提供される。
 また、本発明によれば、複数のUI部品が配置される所定のサービス用のUI画面を作成するための支援を行うためのプログラムであって、コンピュータを、前記UI画面を使用する想定ユーザに応じて、前記複数のUI部品の全てを含みつつディスプレイに同時に表示される前記UI部品の数を変更して、前記想定ユーザ用の前記UI画面の構成を決定するUI構成決定手段として機能させるためのプログラムが提供される。
 本発明によれば、UI画面に表示される情報の同一性を確保したまま、ディスプレイに同時に表示される情報の量を変更して、想定ユーザに適したUI画面を設計することが可能となる。
 上述した目的、および、その他の目的、特徴および利点は、以下に述べる好適な実施の形態、および、それに付随する以下の図面によって、さらに明らかになる。
本実施形態のUI作成支援装置の機能ブロック図の一例である。 本実施形態のUI作成支援装置により実現されるUI画面の一例である。 本実施形態のUI作成支援装置により実現されるUI画面の一例である。 本実施形態のUI作成支援装置により実現されるUI画面の一例である。 本実施形態のUI部品保持部が保持するUI部品の一例である。 本実施形態のUI作成部による処理の流れの一例を説明するためのフローチャートである。 本実施形態のUI作成支援方法の処理の流れの一例を説明するためのフローチャートである。 本実施形態のUI作成支援装置により実現されるUI画面の一例である。 本実施形態のUI作成支援装置により実現されるUI画面の一例である。 本実施形態のUI作成支援装置により実現されるUI画面の一例である。 本実施形態のUI作成支援装置により実現されるUI画面の一例である。 本実施形態のUI作成支援装置により実現されるUI画面の一例である。 本実施形態のUI作成支援装置により実現されるUI画面の一例である。 本実施形態のUI作成支援装置により実現されるUI画面の一例である。 本実施形態のUI作成支援装置により実現されるUI画面の一例である。 本実施形態のUI作成支援装置により実現されるUI画面の一例である。
 以下、本発明の実施の形態について図面を用いて説明する。
 なお、本実施形態の各部は、任意のコンピュータのCPU、メモリ、メモリにロードされたプログラム(あらかじめ機器を出荷する段階からメモリ内に格納されているプログラムのほか、CD等の記憶媒体やインターネット上のサーバ等からダウンロードされたプログラムも含む)、そのプログラムを格納するハードディスク等の記憶ユニット、ネットワーク接続用インタフェースを中心にハードウエアとソフトウエアの任意の組合せによって実現される。そして、その実現方法、機器にはいろいろな変形例があることは、当業者には理解されるところである。
 また、本実施形態の説明において利用する機能ブロック図は、ハードウエア単位の構成ではなく、機能単位のブロックを示している。これらの図においては、本実施形態の各装置は1つの機器により実現されるよう記載されているが、その実現手段はこれに限定されない。すなわち、物理的に分かれた構成であっても、論理的に分かれた構成であっても構わない。
<第1の実施形態>
 まず、本実施形態の概要を説明する。
 本実施形態では、UI画面に配置するUI部品を変更(取捨選択)せずに、想定ユーザに応じて、UI画面上におけるUI部品の表示密度(配置密度)を変更する。また、所定のUI部品全てをUI画面に配置するために、UI部品の表示密度(配置密度)に応じてUI画面の大きさ(面積)を変更し、必要に応じてUI画面にスクロール表示手法を取り入れる。本実施形態ではこのような構成により、UI画面に表示される情報の同一性を確保したまま、ディスプレイに同時に表示される情報の量を変更することを実現する。
 本実施形態によれば、UI画面の設計者が行うUI画面設計の支援を行うことができるほか、UI画面を使用する想定ユーザが自分用にUI画面をカスタマイズするための支援を行うこともできる。ここで例示した支援内容はあくまで一例であり、これに限定されるものではない。
 図1は、本実施形態のUI作成支援装置1の構成の一例を示す機能ブロック図を示す。図示するように、本実施形態のUI作成支援装置1は、UI構成決定部10を有する。本実施形態のUI作成支援装置1は、その他、入力受付部20、UI部品保持部30、UI作成部40及び出力部50を有してもよい。
 UI作成支援装置1は、所定のサービス用のUI画面を作成するための支援を行う。所定のサービスの内容は特段制限されない。当該UI画面には、複数のUI部品が配置される。
 「UI部品」は、UI画面を構成するあらゆる部品が該当し、例えば、ユーザから何らかの入力を受付けるためのいわゆるGUI部品(ボタン、チェックボックス等)のほか、UI画面に表示される文字・図形等からなる単なる情報も含まれる。UI画面に配置されるUI部品の種類及び数は特段制限されず、UI画面の使用場面、用途等に基づいて決定することができる設計的事項である。
 UI構成決定部10は、UI画面を使用する想定ユーザに応じて、UI画面に配置される複数のUI部品の全てを含みつつ、当該UI画面を表示するディスプレイに同時に表示されるUI部品の数を変更して、当該想定ユーザ用のUI画面の構成を決定する。
 「UI画面に配置される複数のUI部品」とは、UI画面の設計上、UI画面に配置されると決定されているUI部品(以下、「設計UI部品」)である。どのようなUI部品を設計UI部品とするかは設計的事項である。「ディスプレイに同時に表示されるUI部品」とは、UI画面を表示するディスプレイ内において同時に表示されるUI部品(以下、「表示UI部品」)であり、すなわち、想定ユーザが同時に視認することができるUI部品である。UI画面の大きさ等次第では、UI画面の全てが同時にディスプレイに表示される場合もあれば、表示されない場合もありえる。このため、表示UI部品は、設計UI部品の中の一部または全部となる概念である。
 本実施形態では、UI構成決定部10は、想定ユーザに応じて、UI画面上におけるUI部品の表示密度を変更することで、ディスプレイに同時に表示されるUI部品の数を変更する。具体的には、UI構成決定部10は、想定ユーザに応じて、UI画面上におけるUI部品の表示密度を小さくすることで、ディスプレイに同時に表示されるUI部品の数を少なくする。また、UI構成決定部10は、想定ユーザに応じて、UI画面上におけるUI部品の表示密度を大きくすることで、ディスプレイに同時に表示されるUI部品の数を多くする。
 UI画面上におけるUI部品の表示密度の変更は、例えば、UI画面上におけるUI部品の配置ルールを変更することで実現することができる。UI構成決定部10は、想定ユーザに応じて、UI画面上におけるUI部品の配置ルールを決定することで、当該想定ユーザ用のUI画面の構成を決定してもよい。
 上記UI部品の配置ルールの内容は特段制限されないが、例えば、UI画面上において、同一行に配置することができるUI部品の最大数を定めたルール、UI画面上におけるUI部品間の行方向の間隔を定めたルール、UI部品間の列方向の間隔を定めたルール、UI部品間の行及び列方向の間隔を定めたルール、ここで列記した複数のルールの中の少なくとも2つを組み合わせたルールなどであってもよい。各ルールにおける具体的な値は設計的事項であり、例えば、UI構成決定部10は、予め定められた複数の候補値の中から想定ユーザに応じて1つの値を選択するようにしてもよい。なお、ここで例示した配置ルールはあくまで一例であり、UI部品の表示密度を変更することができる内容であれば、その他の内容であっても構わない。
 ここで、図2乃至4に、異なる配置ルールに従い複数のUI部品を配置したUI画面の例を示す。図2乃至4に示すUI画面は、ディスプレイに表示された状態を示している。
 図2に示すUI画面は、受発注の内容をデータ入力するための受発注システム用UI画面である。当該UI画面においては、「受発注システム」、「基本情報」、「品名」などの情報からなるUI部品のほか、所定のユーザ入力を受付ける「入力ボックス」、「ラジオボタン」などのUI部品を含む設計UI部品が配置されている。図2に示すUI画面は、ディスプレイに同時に設計UI部品の全てが表示されるUI画面(以下、「第1のUI画面」)である。
 UI構成決定部10は、想定ユーザに応じて、図2に示す第1のUI画面のように、ディスプレイに同時に設計UI部品の全てが表示されるような配置ルールを決定することができる。
 なお、第1のUI画面の配置ルールは、設計UI部品の全てがディスプレイに同時に表示される構成を実現できるものであればよく、その詳細は特段制限されない。
 図3及び4に示すUI画面は、UI部品の表示密度を、第1のUI画面におけるUI部品の表示密度よりも小さくしたUI画面(以下、「第2のUI画面」)である。図3及び4に示す第2のUI画面の配置ルールは、図2に示す第1のUI画面の配置ルールに比べて、同一行に配置可能なUI部品の最大数が少なくなっている。結果、図3及び4に示す第2のUI画面は、図2に示す第1のUI画面と比べて、UI部品の表示密度が小さくなり、ディスプレイに同時に表示されるUI部品の数が少なくなっている。なお、図4に示す第2のUI画面は、図3に示す第2のUI画面と比べてUI部品の表示密度が小さく、ディスプレイに同時に表示されるUI部品の数が少なくなっている。すなわち、図4に示す第2のUI画面の配置ルールは、図3に示す第2のUI画面の配置ルールに比べて、同一行に配置可能なUI部品の最大数が少なくなっている。
 UI構成決定部10は、想定ユーザに応じて、図3及び4に示す第2のUI画面のように、UI部品の表示密度が、第1のUI画面におけるUI部品の表示密度よりも小さくなるような配置ルールを決定することができる。
 なお、第2のUI画面の配置ルールは、UI部品の表示密度が第1のUI画面におけるUI部品の表示密度よりも小さくなる構成を実現できるものであればよく、図3及び4を用いて説明した配置ルールは一例である。
 ここで、図3及び4に示す第2のUI画面の設計UI部品と、図2に示す第1のUI画面の設計UI部品とは同じである。図3及び4に示す第2のUI画面は、第1のUI画面よりも大きくなっており、スクロール表示手法を取り入れている。
 次に、「想定ユーザに応じて」の概念について説明する。
 「想定ユーザに応じて」とは、例えば「所定のサービスにおける想定ユーザの習熟度に応じて」であってもよい。かかる場合、UI構成決定部10は、想定ユーザの当該習熟度が高い場合、ディスプレイに同時に表示されるUI部品の数が多くなり、想定ユーザの当該習熟度が低い場合、ディスプレイに同時に表示されるUI部品の数が少なくなるように、UI画面の構成を決定してもよい。
 その他、「想定ユーザに応じて」とは、例えば「UI画面を操作するための装置(例:PC)における想定ユーザの習熟度に応じて」であってもよい。かかる場合、UI構成決定部10は、想定ユーザの当該習熟度が高い場合、ディスプレイに同時に表示されるUI部品の数が多くなり、想定ユーザの当該習熟度が低い場合、ディスプレイに同時に表示されるUI部品の数が少なくなるように、UI画面の構成を決定してもよい。
 その他、「想定ユーザに応じて」とは、例えば「想定ユーザが所定のサービスを実施する頻度」であってもよい。かかる場合、UI構成決定部10は、想定ユーザの当該頻度が多い場合、ディスプレイに同時に表示されるUI部品の数が多くなり、想定ユーザの当該頻度が少ない場合、ディスプレイに同時に表示されるUI部品の数を少なくなるように、UI画面の構成を決定してもよい。
 なお、上記例はあくまで一例であり、「想定ユーザに応じて」とはその他の概念を含んでもよい。
 図1に戻り、入力受付部20は、想定ユーザの属性を示す情報の入力をユーザから受付ける。想定ユーザの属性を示す情報は、例えば、「所定のサービスにおける想定ユーザの習熟度を示す情報」や、「UI画面を操作するための装置(例:PC)における想定ユーザの習熟度を示す情報」であってもよい。これらの情報は、例えば、想定ユーザの習熟度を点数化(例:5段階評価)した情報などであってもよい。かかる場合、入力受付部20は、ユーザから想定ユーザの習熟度を示す点数の入力を直接受付けても良いし、または、想定ユーザの習熟度を示す点数を算出するための情報の入力を受付けてもよい。想定ユーザの習熟度を示す点数を算出するための情報は、想定ユーザの性別、年齢、サービス使用期間、職業などの想定ユーザに関する情報であってもよい。入力受付部20は入力を受付けたこのような情報を基に、予め保持している所定の算出ルールを利用して、想定ユーザの習熟度を示す点数を算出しても良い。入力受付部20が上述のような情報の入力を受付ける手段は特段制限されず、キーボード、マウス、タッチパネルディスプレイ等のあらゆる入力装置を利用して、実現することができる。
 入力受付部20が入力を受付けた想定ユーザの属性を示す情報は、UI構成決定部10に渡される。そして、UI構成決定部10は、取得した想定ユーザの属性を示す情報に基づき、想定ユーザに応じたUI画面の構成を決定する。例えば、UI構成決定部10は、想定ユーザの習熟度を示す情報(例:点数)と、UI部品の表示密度レベルを示す情報とを対応付けた情報を予め保持しておき、当該情報を利用して、想定ユーザに応じたUI画面の構成を決定してもよい。
 UI部品保持部30は、UI画面の設計上、UI画面に配置されると決定されているUI部品(設計UI部品)を保持する。図5に、UI部品保持部30が保持するUI部品の一例を示す。図5に示す例においては、「内容」の欄に、ユーザから入力を受付けるためのGUI部品が列記されている。そして、「分類1」及び「項目名」の欄に、UI画面上において、各GUI部品に対応付けて表示される情報が記載されている。例えば、「内容」の欄の一番上に記載されているテキストボックスは、UI画面上において「基本情報」及び「品名」の情報と対応付けて表示される。
 UI作成部40は、UI部品保持部30が保持する設計UI部品を利用し、UI構成決定部10が決定したUI画面の構成(例:配置ルール)に従い、設計UI部品を配置してUI画面を作成する。結果、図2乃至4に示すようなUI画面が得られる。
 ここで、図6のフローチャートを用いて、UI作成部40がUI画面を作成する処理の流れの一例を説明する。
 前提として、UI作成部40は、UI部品保持部30から取得した図5に示す設計UI部品を、UI画面上に配置していくものとする。また、UI作成部40は、図5に示す「項目名」の1つ、及び、当該「項目名」に対応付けられた「内容」をセット(以下、「使用情報」)とし、複数の使用情報を、左から右、上から下に向かってUI画面上に配置していくものとする。さらに、UI作成部40は、対応付けられている「分類1」の情報が異なる使用情報は同一行に配置しないものとする。そして、UI作成部40は、UI構成決定部10から、同一行に配置可能な使用情報の最大数を規定した配置ルールを取得するものとする。
 なお、上記前提はあくまで一例であり、本実施形態はその他の構成とすることができることは言うまでもない。例えば、使用情報を配置していく順は、右から左、下から上とすることもできる。また、配置ルールはその他の内容とすることもできる。
 以下、UI作成部40が使用情報を配置していく処理の流れを説明する。
 まず、UI作成部40は、UI画面上に使用情報を配置する位置(以下、「オフセット位置」)を初期位置に設定する(S201)。ここでの初期位置は、ページタイトル、ログイン名、ヘルプ・ガイダンス情報などを表示した領域(ヘッダ領域)の下に位置する領域の左端とするが(図2乃至4参照)、これに限られるものではない。
 次に、UI作成部40は、図5に示す設計UI部品の中から、所定の順(設計的事項)に、使用情報を1セットずつ取り出し、取り出した使用情報をUI画面上に配置していく(S202)。
 具体的には、UI作成部40は、取り出した使用情報をオフセット位置に配置する(S203)。ここでは、「項目名」及び「内容」で特定されるGUI部品を、この順に左から並べて配置する。次に、UI作成部40は、今配置した使用情報が、対応付けられている分類1に対応付けられた使用情報の中で、最後に配置された使用情報か否かを判定する(S204)。
 S204における判定の結果、Yesである場合、UI作成部40は、オフセット位置を次の行の初めに移動する(S207)。すなわち、オフセット位置のx座標を左端の値にし、y座標を一行分増加させる。一方、判定の結果、Noである場合、S205に進む。
 S205では、UI作成部40は、S203における使用情報の配置後の状態において、当該使用情報を配置した行に配置された使用情報の数が、所定の数より小さいか判定する。所定の数は、UI作成部40がUI構成決定部10から取得した配置ルールで特定される、同一行に配置可能な使用情報の最大数である。
 S205における判定の結果、Noである場合、UI作成部40は、オフセット位置を次の行の初めに移動する(S207)。すなわち、オフセット位置のx座標を左端の値にし、y座標を一行分増加させる。一方、判定の結果、Yesである場合、UI作成部40は、オフセット位置を今配置した使用情報の隣(同一行)へ移動する(S206)。
 その後、UI作成部40は、UI部品保持部30が保持するすべての使用情報を配置するまでS203からS207を繰り返すことで、UI画面上への設計UI部品すべての配置を完了する。
 なお、上記は、使用情報を配置する処理を中心に説明したが、所定のタイミングで、分類1の情報を配置するステップを有してもよい。
 図1に戻り、出力部50は、UI作成部40が作成したUI画面を、例えばディスプレイ等の出力装置を介して出力する。結果、ユーザは、図2乃至4に示すようなUI画面を確認することが可能となる。
 次に、本実施形態のUI作成支援方法の処理の流れの一例を、図7のフローチャートを用いて説明する。
 図7のフローチャートに示すように、本実施形態のUI作成支援方法は、入力受付ステップS10と、UI構成決定ステップS20と、UI作成ステップS30と、出力ステップS40とを有する。
 入力受付ステップS10では、入力受付部20が、想定ユーザの属性を示す情報の入力をユーザから受付ける。例えば、入力受付部20は、「所定のサービスにおける想定ユーザの習熟度を示す情報」(例:5段階評価)の入力を受付ける。
 UI構成決定ステップS20では、UI構成決定部10が、S10で入力受付部20が取得した情報に基づき、設計UI部品の全てを含みつつ、ディスプレイに同時に表示されるUI部品の数を変更して、当該想定ユーザのUI画面の構成を決定する。例えば、UI構成決定部10は、「所定のサービスにおける想定ユーザの習熟度を示す情報」(例:5段階評価)に基づき、当該想定ユーザ用のUI画面における設計UI部品の配置ルールを決定する。
 UI作成ステップS30では、UI作成部40が、S20でUI構成決定部10が決定したUI画面の構成に従い、UI画面を作成する。例えば、UI作成部40は、UI部品保持部30が保持する設計UI部品を利用し、UI構成決定部10が決定したUI画面の構成(例:配置ルール)に従い、設計UI部品を配置してUI画面を作成する。結果、例えば、図2乃至4に示すようなUI画面が得られる。
 出力ステップS40では、出力部50が、S30でUI作成部40が作成したUI画面を、例えばディスプレイを介して出力する。
 その後、例えば、ユーザからS40で出力したUI画面の構成を保存する入力を受付け、当該入力に従い、当該UI画面の構成を示す情報を保存してもよい。当該UI画面の構成を示す情報は、設計UI部品を配置したUI画面のデータそのものであってもよいし、S20でUI構成決定部10が決定した配置ルールであってもよい。
 なお、本実施形態のUI作成支援装置1は、例えば、以下のプログラムをコンピュータにインストールすることで、実現することができる。
 複数のUI部品が配置される所定のサービス用のUI画面を作成するための支援を行うためのプログラムであって、コンピュータを、
 前記UI画面を使用する想定ユーザに応じて、前記複数のUI部品の全てを含みつつディスプレイに同時に表示される前記UI部品の数を変更して、前記想定ユーザ用の前記UI画面の構成を決定するUI構成決定手段として機能させるためのプログラム。
 本実施形態によれば、UI画面に表示される情報の同一性を確保したまま、ディスプレイに同時に表示される情報の量を変更して、想定ユーザに適したUI画面を設計することが可能となる。
<第2の実施形態>
 まず、本実施形態の概要を説明する。
 本実施形態では、UI画面に配置するUI部品を変更(取捨選択)せずに、想定ユーザに応じて、UI画面を複数のページに分割し、UI部品を複数のページに分けて表示する。本実施形態ではこのような構成により、UI画面に表示される情報の同一性を確保したまま、ディスプレイに同時に表示される情報の量を変更することを実現する。
 本実施形態によれば、UI画面の設計者が行うUI画面設計の支援を行うことができるほか、UI画面を使用する想定ユーザが自分用にUI画面をカスタマイズするための支援を行うこともできる。ここで例示した支援内容はあくまで一例であり、これに限定されるものではない。
 本実施形態のUI作成支援装置1の構成の一例を示す機能ブロック図は第1の実施形態と同様である。すなわち、図1に示すように、本実施形態のUI作成支援装置1は、UI構成決定部10を有する。また、本実施形態のUI作成支援装置1は、その他、入力受付部20、UI部品保持部30、UI作成部40及び出力部50を有してもよい。
 以下、UI構成決定部10及びUI作成部40の構成について説明する。なお、入力受付部20、UI部品保持部30及び出力部50の構成については、第1の実施形態と同様であるので、ここでの説明は省略する。
 UI構成決定部10は、第1の実施形態と同様、想定ユーザに応じて、図2に示すようなディスプレイに同時に設計UI部品の全てが表示されるUI画面(第1のUI画面)の構成を、当該想定ユーザ用のUI画面の構成として決定することができる。
 また、UI構成決定部10は、第1の実施形態と同様、想定ユーザに応じて、第1のUI画面よりもディスプレイに同時に表示されるUI部品の数が少ない第2のUI画面の構成を、当該想定ユーザ用のUI画面の構成として決定することができる。しかし、本実施形態のUI構成決定部10が決定する第2のUI画面の構成は、第1の実施形態のUI構成決定部10が決定する第2のUI画面の構成と異なる。以下、説明する。
 本実施形態のUI構成決定部10は、第2のUI画面の構成として、UI画面を複数のページに分割し、複数のページを順次ディスプレイに表示する表示手法を備えたUI画面の構成を決定する。すなわち、設計UI部品を複数のページに分けて配置し、設計UI部品が所定数ずつ順次ディスプレイに配置されるようにする。
 ここで、図8(a)乃至(c)及び9(a)乃至(f)に、本実施形態のUI構成決定部10が決定した第2のUI画面の構成の例を示す。図8(a)乃至(c)に示す3つのページにより、図2に示す第1のUI画面に相当するUI画面が構成されている。また、図9(a)乃至(f)に示す6つのページにより、図2に示す第1のUI画面に相当するUI画面が構成されている。
 図8(a)乃至(c)に示すUI画面は、図2に示す第1のUI画面を「基本情報」、「要求者情報」、「納入先担当者情報」という分類1(図5参照)の情報単位で分割し、各々を1つのページに表示している。これら複数のページは、各ページに設けられた「次へ」、「前へ」のボタンの入力に応じて、所定の順にディスプレイに表示される。なお、図8(a)乃至(c)に示すUI画面におけるUI部品の配置の仕方、すなわち一行に配置されるUI部品の数やUI部品間の間隔等については、図2に示す第1のUI画面と同じ構成になっている。
 図9(a)乃至(f)に示すUI画面は、図8(a)乃至(c)に示すUI画面の各ページをさらに2つのページに分割している。これら複数のページも同様に、各ページに設けられた「次へ」、「前へ」のボタンの入力に応じて、所定の順にディスプレイに表示される。なお、図9(a)乃至(f)に示すUI画面におけるUI部品の配置の仕方、すなわち一行に配置されるUI部品の数やUI部品間の間隔等については、図2に示す第1のUI画面と同じ構成になっている。
 第1のUI画面をいくつのページに分割するか、また、設計UI部品をどのように各ページに振り分けるかは設計的事項である。
 「想定ユーザに応じて」の概念については第1の実施形態と同様である。
 UI作成部40は、UI部品保持部30が保持する設計UI部品を利用し、UI構成決定部10が決定したUI画面の構成に従い、設計UI部品を配置してUI画面を作成する。結果、図2、8(a)乃至(c)及び9(a)乃至(f)に示すようなUI画面が得られる。
 本実施形態のUI作成支援方法の処理の流れは、第1の実施形態に準じて実現することができる。よって、ここでの説明は省略する。
 本実施形態によれば、第1の実施形態と同様の作用効果を実現することができる。
 また、本実施形態の第2のUI画面は、図8(a)乃至(c)及び9(a)乃至(f)に示すように、第1のUI画面(図2参照)におけるUI部品の配置の仕方と同じ配置の仕方とすることができる点で、第1の実施形態と異なる。
 UI画面の設計においては、設計UI部品の配置の仕方が固定されている場合があり得る。例えば、紙媒体でやり取りされる伝票等に記載された情報の配置の仕方と、当該紙媒体に記載された情報に相当する設計UI部品のUI画面における配置の仕方とを一致させることで、情報の入力効率の向上を図る場合等があり得る。
 本実施形態によれば、上述のように、設計UI部品の配置の仕方が固定されている場合であっても、UI画面に表示される情報の同一性を確保したまま、ディスプレイに同時に表示される情報の量を変更して、想定ユーザに適したUI画面を設計することが可能となる。
<第3の実施形態>
 本実施形態のUI作成支援装置1の構成の一例を示す機能ブロック図は第1の実施形態と同様である。すなわち、図1に示すように、本実施形態のUI作成支援装置1は、UI構成決定部10を有する。また、本実施形態のUI作成支援装置1は、その他、入力受付部20、UI部品保持部30、UI作成部40及び出力部50を有してもよい。
 以下、UI構成決定部10の構成について説明する。なお、入力受付部20、UI部品保持部30、UI作成部40及び出力部50の構成については、第1の実施形態と同様であるので、ここでの説明は省略する。
 本実施形態では、UI構成決定部10は、第1及び第2の実施形態と同様、想定ユーザに応じて、図2に示すような、ディスプレイに同時に設計UI部品の全てが表示されるUI画面(第1のUI画面)の構成を決定することができる。
 また、UI構成決定部10は、第1及び第2の実施形態と同様、想定ユーザに応じて、第1のUI画面よりもディスプレイに同時に表示されるUI部品の数が少ない第2のUI画面の構成を決定することができる。しかし、本実施形態のUI構成決定部10が決定する第2のUI画面の構成は、第1及び第2の実施形態のUI構成決定部10が決定する第2のUI画面の構成と異なる。
 具体的には、本実施形態のUI構成決定部10は、第2のUI画面の構成として、第2の実施形態の構成に準じてUI画面を複数のページに分割し、複数のページを順次ディスプレイに表示する表示手法を備えたUI画面の構成を決定する。すなわち、設計UI部品を複数のページに分けて配置し、設計UI部品が所定数ずつ順次ディスプレイに配置されるように構成する。
 さらに、本実施形態のUI構成決定部10は、第2のUI画面の構成として、第1の実施形態の構成に準じて、各ページに振り分けられた設計UI部品の配置の仕方を変更する。すなわち、UI構成決定部10は、想定ユーザに応じて、UI画面上におけるUI部品の表示密度を変更する。なお、各ページの設計UI部品の全てがディスプレイに同時に表示される程度の表示密度とすることが好ましい。
 「想定ユーザに応じて」の概念については第1の実施形態と同様である。
 本実施形態のUI作成支援方法の処理の流れは、第1の実施形態に準じて実現することができる。よって、ここでの説明は省略する。
 本実施形態によれば、第1の実施形態と同様の作用効果を実現することができる。
 この出願は、2011年1月27日に出願された日本特許出願特願2011-015235号を基礎とする優先権を主張し、その開示の全てをここに取り込む。

Claims (7)

  1.  複数のUI(User Interface)部品が配置される所定のサービス用のUI画面を作成するための支援を行うUI作成支援装置であって、
     前記UI画面を使用する想定ユーザに応じて、前記複数のUI部品の全てを含みつつディスプレイに同時に表示される前記UI部品の数を変更して、前記想定ユーザ用の前記UI画面の構成を決定するUI構成決定手段を有するUI作成支援装置。
  2.  請求項1に記載のUI作成支援装置において、
     前記UI構成決定手段は、
      前記ディスプレイに同時に前記複数のUI部品の全てを表示可能な第1の前記UI画面よりも前記ディスプレイに同時に表示される前記UI部品の数が少ない第2の前記UI画面の構成として、前記UI画面における前記UI部品の表示密度を、前記第1のUI画面における前記表示密度よりも小さくした構成を決定するUI作成支援装置。
  3.  請求項2に記載のUI作成支援装置において、
     前記UI構成決定手段は、
      前記第2のUI画面の構成として、スクロール表示手法を備えた構成を決定するUI作成支援装置。
  4.  請求項1または2に記載のUI作成支援装置において、
     前記UI構成決定手段は、
      前記ディスプレイに同時に前記複数のUI部品の全てを表示可能な第1の前記UI画面よりも前記ディスプレイに同時に表示される前記UI部品の数が少ない第2の前記UI画面の構成として、前記UI画面を複数のページに分割し、複数のページを順次ディスプレイに表示する表示手法を備えた前記UI画面の構成を決定するUI作成支援装置。
  5.  請求項1から4のいずれか1項に記載のUI作成支援装置において、
     前記UI構成決定手段は、
      前記想定ユーザの前記所定のサービスの習熟度が低い場合には、前記ディスプレイに同時に表示される前記UI部品の数を少なくし、
      前記想定ユーザの前記所定のサービスの習熟度が高い場合には、前記ディスプレイに同時に表示される前記UI部品の量を多くするUI作成支援装置。
  6.  複数のUI部品が配置される所定のサービス用のUI画面を作成するための支援を行うUI作成支援方法であって、
     前記UI画面を使用する想定ユーザに応じて、前記複数のUI部品の全てを含みつつディスプレイに同時に表示される前記UI部品の数を変更して、前記想定ユーザ用の前記UI画面の構成を決定するUI構成決定ステップを有するUI作成支援方法。
  7.  複数のUI部品が配置される所定のサービス用のUI画面を作成するための支援を行うためのプログラムであって、
     コンピュータを、
     前記UI画面を使用する想定ユーザに応じて、前記複数のUI部品の全てを含みつつディスプレイに同時に表示される前記UI部品の数を変更して、前記想定ユーザ用の前記UI画面の構成を決定するUI構成決定手段として機能させるためのプログラム。
PCT/JP2011/006631 2011-01-27 2011-11-29 UI(User Interface)作成支援装置、UI作成支援方法及びプログラム WO2012101700A1 (ja)

Priority Applications (2)

Application Number Priority Date Filing Date Title
JP2012554494A JPWO2012101700A1 (ja) 2011-01-27 2011-11-29 UI(UserInterface)作成支援装置、UI作成支援方法及びプログラム
US13/981,225 US20130305176A1 (en) 2011-01-27 2011-11-29 Ui creation support system, ui creation support method, and non-transitory storage medium

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
JP2011015235 2011-01-27
JP2011-015235 2011-01-27

Publications (1)

Publication Number Publication Date
WO2012101700A1 true WO2012101700A1 (ja) 2012-08-02

Family

ID=46580314

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/JP2011/006631 WO2012101700A1 (ja) 2011-01-27 2011-11-29 UI(User Interface)作成支援装置、UI作成支援方法及びプログラム

Country Status (3)

Country Link
US (1) US20130305176A1 (ja)
JP (1) JPWO2012101700A1 (ja)
WO (1) WO2012101700A1 (ja)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JP2017157163A (ja) * 2016-03-04 2017-09-07 三菱電機インフォメーションシステムズ株式会社 Ui定義生成装置およびui定義生成プログラム

Families Citing this family (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US9134888B2 (en) * 2011-01-27 2015-09-15 Nec Corporation UI creation support system, UI creation support method, and non-transitory storage medium
CA2923602A1 (en) * 2015-05-19 2016-11-19 Mitel Networks Corporation Apparatus and method for generating and outputting an interactive image object

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JPH1083269A (ja) * 1996-09-09 1998-03-31 Nec Corp ユーザインタフェース変換装置
JP2000250723A (ja) * 1999-03-01 2000-09-14 Seiko Epson Corp 印刷制御方法および印刷制御装置、記憶媒体
JP2003223312A (ja) * 2002-01-29 2003-08-08 Canon Inc 情報処理装置、情報処理方法、記録媒体及びプログラム
JP2006004054A (ja) * 2004-06-16 2006-01-05 Sharp Corp 電子機器のユーザインターフェイス生成装置
JP2006338233A (ja) * 2005-06-01 2006-12-14 Matsushita Electric Ind Co Ltd 状態検知装置及び状態検知方法

Family Cites Families (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20030046401A1 (en) * 2000-10-16 2003-03-06 Abbott Kenneth H. Dynamically determing appropriate computer user interfaces
US7752633B1 (en) * 2005-03-14 2010-07-06 Seven Networks, Inc. Cross-platform event engine
US9058337B2 (en) * 2007-10-22 2015-06-16 Apple Inc. Previewing user interfaces and other aspects

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JPH1083269A (ja) * 1996-09-09 1998-03-31 Nec Corp ユーザインタフェース変換装置
JP2000250723A (ja) * 1999-03-01 2000-09-14 Seiko Epson Corp 印刷制御方法および印刷制御装置、記憶媒体
JP2003223312A (ja) * 2002-01-29 2003-08-08 Canon Inc 情報処理装置、情報処理方法、記録媒体及びプログラム
JP2006004054A (ja) * 2004-06-16 2006-01-05 Sharp Corp 電子機器のユーザインターフェイス生成装置
JP2006338233A (ja) * 2005-06-01 2006-12-14 Matsushita Electric Ind Co Ltd 状態検知装置及び状態検知方法

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JP2017157163A (ja) * 2016-03-04 2017-09-07 三菱電機インフォメーションシステムズ株式会社 Ui定義生成装置およびui定義生成プログラム

Also Published As

Publication number Publication date
JPWO2012101700A1 (ja) 2014-06-30
US20130305176A1 (en) 2013-11-14

Similar Documents

Publication Publication Date Title
US11150739B2 (en) Chinese character entry via a Pinyin input method
US8515984B2 (en) Extensible search term suggestion engine
CN105204708A (zh) 信息处理装置以及显示方法
US20170269805A1 (en) File workflow board
CN114154461A (zh) 一种文本数据的处理方法、装置及系统
JP6667452B2 (ja) テキスト情報の入力方法及び装置
JP2014106625A (ja) 携帯端末、携帯端末の制御方法、プログラム、および記録媒体
JP5910510B2 (ja) UI(UserInterface)作成支援装置、UI作成支援方法及びプログラム
WO2012101700A1 (ja) UI(User Interface)作成支援装置、UI作成支援方法及びプログラム
CN112583603B (zh) 可视化签名方法、装置、电子设备和计算机可读存储介质
WO2013108628A1 (ja) 情報管理装置、情報管理方法およびプログラム
CN105630911A (zh) 基于移动终端的搜索展示方法及装置
JP5928344B2 (ja) UI(UserInterface)作成支援装置、UI作成支援方法及びプログラム
JP2015079467A (ja) 情報処理装置、支出状況可視化方法および支出状況可視化プログラム
CN104423614B (zh) 一种键盘布局方法、装置及电子设备
WO2015011774A1 (ja) 検索システム、検索プログラム、および検索条件入力方法
JP6855720B2 (ja) 情報処理装置及び情報処理プログラム
JP5874997B2 (ja) 検索システム、検索方法及びプログラム
JP2008299407A (ja) Gui画面設計支援プログラム、gui画面設計支援方法、およびgui画面設計支援装置
JP2014132408A (ja) 電子メニュー装置及び電子メニュープログラム
JP2013073298A (ja) 情報表示装置及び情報表示プログラム
CN112100428A (zh) 图形模板匹配方法、装置及电子设备
JP6146417B2 (ja) 入力支援装置、入力支援方法、及び、プログラム
JP2020119404A (ja) 表示プログラム、情報処理装置及び表示方法
JP2020004128A (ja) 表示方法、表示システム、及びプログラム

Legal Events

Date Code Title Description
121 Ep: the epo has been informed by wipo that ep was designated in this application

Ref document number: 11856782

Country of ref document: EP

Kind code of ref document: A1

ENP Entry into the national phase

Ref document number: 2012554494

Country of ref document: JP

Kind code of ref document: A

WWE Wipo information: entry into national phase

Ref document number: 13981225

Country of ref document: US

NENP Non-entry into the national phase

Ref country code: DE

122 Ep: pct application non-entry in european phase

Ref document number: 11856782

Country of ref document: EP

Kind code of ref document: A1