JP2019114180A - Screen information processor, and control method and control program for the same - Google Patents

Abstract

To allow a user to efficiently perform selection operation by effective use of an empty space in a screen.SOLUTION: A screen information processor (for example, a user terminal 10) according to one embodiment of the present invention includes: area arrangement means (for example, an area arrangement part 441) for arranging a lower area in a manner such as to extend along a locus of slide operation partially superposed on an upper area; and element arrangement means (for example, an element arrangement part 442) for arranging, in the lower area, a relevant element associated with a superposition element superposed on the lower area in the upper area.SELECTED DRAWING: Figure 4

Description

The present invention relates to interaction techniques based on graphical user interfaces.
The present invention particularly relates to a technique for displaying a selection menu on a touch input screen and receiving a selection via the selection menu.

There is known a mechanism for displaying a selection menu including a plurality of icons along a trajectory of a slide operation on a touch panel (see, for example, Patent Document 1).
The display processing device described in Patent Document 1 automatically forms a locus resembling the shape of the locus when any icon in the selection menu is tapped, and the display processing device has a function corresponding to the tapped icon. A new selection menu including a plurality of icons corresponding to the subfunctions is arranged along the new trajectory (see FIG. 6 of the same document).

JP, 2014-123159, A

  The display processing device described in Patent Document 1 automatically arranges a new selection menu for displaying an icon corresponding to the sub function in the screen. Therefore, even if the original selection menu is arranged in the empty space, there is a possibility that the new selection menu will be arranged in an unintended position.

  The problem to be solved by the present invention is to make effective use of the free space in the screen and allow the user to perform selection operation efficiently.

[A] In order to solve the above problems, the “screen information processing apparatus” according to an aspect of the present invention is an area arranging unit for arranging a lower area along a trajectory of a slide operation partially overlapping with the upper area And element arranging means for arranging, in the lower area, related elements associated with overlapping elements overlapping the lower area in the upper area.
[B] In order to solve the above problems, the “control method of a screen information processing apparatus” according to an aspect of the present invention is an area in which lower areas are arranged along a trajectory of a slide operation partially superimposed on upper areas. And an element arranging step of arranging, in the lower area, related elements associated with overlapping elements overlapping the lower area in the upper area.
[C] In order to solve the above problems, the “control program” according to one aspect of the present invention includes an area arrangement function of arranging a lower area along a trajectory of a slide operation partially overlapping the upper area; The computer of the screen information processing apparatus realizes an element arranging function of arranging related elements associated with overlapping elements overlapping the lower area in the upper area in the lower area.
[D] In order to solve the above problems, the control program recorded on the “computer-readable recording medium” according to one aspect of the present invention is subordinate to the lower level so as to follow the trajectory of the slide operation partially superimposed on the upper area. The computer of the screen information processing apparatus realizes an area arranging function of arranging an area and an element arranging function of arranging related elements associated with overlapping elements overlapping the lower area in the upper area in the lower area. .

The following technical limitations may be added to the “screen information processing apparatus” of the above [A]. Further, similar technical limitations may be added to the control program recorded by the above-mentioned "control method" of the above [B], the "control program" of the above [C], and the "recording medium" of the above [D].
The element arranging unit for arranging the elements in the upper area changes at least one of the combination and the arrangement order of the elements arranged in the upper area according to the update instruction operation for the upper area.
-The area arranging means arranges a further lower area along a trajectory of a new slide operation partially overlapping the lower area, and the element arranging means is arranged such that the target of the update instructing operation is the lowest area Only in the case of the nearest upper area, at least one of the combination and the order of the elements arranged in the nearest upper area is changed.
-The element arrangement means changes the element arranged in the lowermost area into a related element associated with the changed overlapping element every time the overlapping element is changed by the update instruction operation.
The element arrangement means arranges a specific form of element which can identify the presence or absence of the related element.
The element placement unit changes the element in the lowermost area into an element of the specific form only after the slide operation for displaying a new lower area is started and ended.
The area arrangement means deletes the lowermost area in response to a deletion instructing operation instructing deletion of the lowermost area.
-The element arrangement means further arranges the deletion instructing element corresponding to the deletion instructing operation in the lowermost area and erases or invalidates the deletion instructing element in the area which is no longer the lowermost area.
-The element arranging means further arranges the deletion instructing element corresponding to the deletion instructing operation in the lowermost area, and the area arranging means operates the deletion instructing operation to the deletion instructing element in the area which is no longer the lowermost area. In response, both the area and the lowest area newly allocated to the area are deleted.

In the present specification, terms are used as follows.
The “upper area” refers to an area relatively higher than the reference area.
"Sub-region" means a region relatively lower than the reference region.
The "uppermost area" refers to the uppermost area relatively among all the areas.
The "lowermost area" refers to the lowermost area among all the areas.
The "most recent upper area" refers to an area that is one level higher than a certain area.
The "nearest lower region" refers to a region lower by one hierarchy relative to a certain region.

The screen information processing apparatus according to the present invention arranges related elements associated with overlapping elements in the upper area in the lower area arranged along the trajectory of the slide operation partially overlapping the upper area. That is, the lower area in which the related element related to the element in the upper area is arranged is arranged in the form intended by the user at the position intended by the user in the screen.
Therefore, according to the present invention, it is possible to effectively utilize the free space in the screen and to allow the user to perform the selection operation efficiently.

An example of updating screen information is shown. (Embodiment) An example of updating screen information is shown. (Example) 2 shows an example of a hardware functional configuration of a user apparatus. (Example) 2 shows an example of the software-like functional configuration of a user terminal. (Example) An example item of element information is shown. (Example) The screen information update procedure is illustrated. (Example) An example of updating screen information is shown. (Example) An example of updating screen information is shown. (Example) An example of updating screen information is shown. (Example) An example of updating screen information is shown. (Modification)

[1. Embodiment]
[1-1. Overview]
The present embodiment relates to a screen information processing apparatus that displays a selection menu on a touch input screen and receives a selection operation via the selection menu.
In the screen information processing apparatus according to the present embodiment, the lower area where the related element related to the element in the upper area is arranged, in order to use the empty space in the screen effectively and allow the user to perform the selection operation efficiently. It is configured to be arranged in a form intended by the user at a position intended by the user in the screen.

[1-2. Screen information processing device]
FIG. 1 shows an example of screen information update.
The screen information processing apparatus (for example, the user terminal 10) according to the present embodiment arranges the lower area 130 so as to align the lower area 130 along the trajectory 120 of the slide operation partially overlapping the upper area 110 (for example, area allocation) Section 441) and an element arranging unit (eg, an element arranging section 442) which arranges related elements associated with the overlapping element 111 overlapping the lower area 130 in the upper area 110 in the lower area 130.

[2. Example]
[2-1. Overview]
The present embodiment relates to a user terminal that displays a selection menu on a touch input screen and receives a selection operation by a touch operation on the selection menu.
In order for the user terminal to effectively utilize the empty space in the screen and allow the user to perform the selection operation efficiently, the user intends in the lower area where the related element related to the element in the upper area is arranged in the screen The position is configured to be arranged in a form intended by the user.

FIG. 2 shows an example of updating the screen information.
The user terminal 10 arranges the region 220 along the trajectory 210 of the slide operation, arranges the region 240 along the trajectory 230 of the slide operation partially overlapping the region 220, and partially overlaps the region 240. The area 260 is arranged along the trajectory 250 of the sliding operation.
Also, user terminal 10 arranges related elements associated with overlapping element 221 overlapping area 240 within area 220 in area 240, and associates related elements overlapping overlapping area 260 within area 240 related to overlapping element 241. Are arranged in the area 260.

[2-2. User terminal]
The user terminal 10 is a user device (computer) in which a predetermined program (for example, a game program) is installed.
In this embodiment, a general-purpose portable device (for example, a mobile phone, a smartphone (smartphone), a tablet (tablet) terminal, a personal computer (PC), a wearable device, etc.) capable of installing a program as a user device. Or a general-purpose processing device (for example, a PC (personal computer) or the like) can be used.

2-2-1. Hardware Features]
FIG. 3 shows an example of the hardware functional configuration of the user apparatus.
A typical user device includes an MPU (Micro-Processing Unit) 311 constituting a control processing unit, a RAM (Random Access Memory) 321 constituting a main storage unit, and a ROM (Read Only Memory) constituting an auxiliary storage unit. 322, an EEPROM (Electrically Erasable Programmable Read-Only Memory) 323, a touch panel display 331 constituting an input unit and a display unit, a speaker 332 constituting an audio output unit, and an NIC (Network Interface Controller) constituting a communication control unit And at least a wireless local area network (LAN) chip 342.

The RAM 321, the ROM 322, the EEPROM 323, the touch panel display 331, the speaker 332, the NIC 341, and the wireless LAN chip 342 are connected to the MPU 311 via a bus line.
The MPU 311 reads (1) the program stored in the ROM 322 or the EEPROM 323 onto the RAM 321, and (2) acquires data from at least one of the touch panel display 331, the EEPROM 323, the NIC 341 and the wireless LAN chip 342 according to the instructions of the program. (3) The acquired data is operated and processed according to the procedure defined in the program, and then (4) the operated and processed data is stored in the EEPROM 323, the touch panel display 331, the speaker 332, the NIC 341 and the wireless LAN chip 342 at least. Provide to either.

2-2-2. Software-like function]
FIG. 4 shows an example of the software-like functional configuration of the user terminal.
As illustrated in FIG. 4, the user terminal 10 includes a display unit 410, a detection unit 420, an input analysis unit 430, an arrangement unit 440, a display control unit 450, and a storage unit 460. The arranging unit 440 includes an area arranging unit 441 and an element arranging unit 442.
The display unit 410 and the detection unit 420 include a touch panel display 331. The storage unit 460 includes an EEPROM 323. The other functions are configured to include the MPU 311.

The software-like function of the user terminal 10 is realized by installing an operating system (OS) for the user device and a program operating on the OS in the user device.
The OS to be installed on the user device is generally installed on the user device from the beginning of shipment. Also, the program to be installed on the user device is generally supplied to the user device by being superimposed on a carrier wave via a communication network. The OS and the program are distributed in the state of being recorded on a recording medium such as a CD (Compact Disc), a DVD (Digital Versatile Disk), an MO disc (Magneto-Optical disk), and a flash memory (flash memory). It may be read from the recording medium to the user device.

The display unit 410 displays a selection menu on the display under the control of the display control unit 450. The detection unit 420 detects a contact position of a finger or a touch pen on the touch panel.
The input analysis unit 430 identifies the trajectory of the user operation from the contact position detected by the detection unit 420. The placement unit 440 instructs the display control unit 450 to place a region or element on the display of the display unit 410. The display control unit 450 controls the display unit 410. Storage unit 460 stores data related to the selection menu.

The area arrangement unit 441 arranges and deletes areas as follows.
-Arrange each area along the trajectory of the slide operation. In particular, the lower regions are arranged along the trajectory of the slide operation that is partially superimposed on the latest upper region.
· Delete the area according to the deletion instruction operation instructing deletion of the area. In this embodiment, the area is deleted according to the deletion instruction operation for the deletion instruction element arranged in the area.

The element arrangement unit 442 arranges and deletes elements as follows.
-Select the elements of the number according to the size of each area in descending order of "display priority", arrange them in the order of "display priority", and arrange them in the area. In particular, related elements associated with overlapping elements overlapping the lower area in the upper area are arranged in the lower area.
-Change at least one of the combination of the elements arranged in the lowermost area and the nearest upper area of the lowermost area and the arrangement order according to the update instruction operation for the latest upper area. In this embodiment, the slide operation for the lowermost area and the immediate upper area of the lowermost area is input as the update instruction operation, and the elements displayed in the area are scrolled according to the update instruction operation.
Each time the overlapping element superimposed on the lowermost area in the latest upper area is changed, the element arranged in the lowermost area is changed to a related element associated with the changed overlapping element. For example, as in the case of arranging the other elements, the related elements of the number according to the size of the lowermost area are selected in the order of higher "display priority", arranged in the order of "display priority" and arranged in the lowermost area It is good to do.

Change the form of the element in the lowermost area into a specific form that can visually identify the presence or absence of the related element only after the slide operation for displaying the new lower area is started and ended. .
The deletion instruction element corresponding to the deletion instruction operation is arranged in the lowermost area. Then, the deletion instruction element in the area which is no longer the lowest area is invalidated. The deletion instructing element in the area which is no longer the lowermost area may be deleted.

2-2-3. Element information]
FIG. 5A shows an example of items of top level element information. Top-level element information is information on an element to be placed in the top-level area.
As illustrated in FIG. 5A, the top level element information includes key items "element ID", "display priority", "lower element presence / absence flag", and "start module path". "Default Icon Path" and "Specific Form Icon Path" are included.
"Display priority" is a numerical value corresponding to the frequency of use. The “lower element presence / absence flag” indicates that a lower element (related element) is present when it is significant. The “start module path” is a character string specifying a functional module to be started when a start instruction operation (tap operation) on the element is performed. The “default icon path” is a character string specifying icon image data in a normal form. The “specific form icon path” is a character string that specifies a specific form of icon image data that can be visually identified that the lower element (related element) is present.

FIG. 5B shows an example of items of lower element information. The lower element information is information on an element to be arranged in an area (lower area) other than the top area.
As illustrated in FIG. 5B, the lower element information includes the key items "upper element ID" and "element ID", "display priority", "lower element presence / absence flag", and "activation". Module path, "default icon path", and "specific form icon path" are included.
“Display priority”, “lower element presence / absence flag”, “starting module path”, “default icon path”, and “specific form icon path” are the same as the items in the above (a) top element information.

[2-3. Screen information update procedure]
FIG. 6 illustrates the screen information update procedure by the user terminal 10.
S610: If the detection unit 420 detects a touch operation (touch operation) on the touch panel, the process proceeds to S620.
S620: The input analysis unit 430 analyzes the type of user operation. If the user operation is a slide operation (swipe operation or flick operation), the process proceeds to S630, and if the user operation is a tap operation, the process proceeds to S670. If the user operation is neither slide operation nor tap operation, the process returns to S610.

  S630: If it is determined that the user operation is a slide operation, the input analysis unit 430 further specifies a target area of the slide operation. In the present embodiment, when the trajectory of the slide operation falls within a specific area from the start point to the end point, the area is specified as the target area. If the target area is out of the area, the process proceeds to step S640. If the target area is the immediately upper area of the lowermost area, the process proceeds to step S650. If the target area is the lowermost area, the process proceeds to step S660.

S640: The area placement unit 441 places the area along the trajectory of the slide operation, and proceeds to S645 (FIGS. 2A to 2F).
S645: The element arrangement unit 442 selects the elements of the number according to the size of the area in the order of “display priority” in high order, arranges them in the order of “display priority” and arranges them in the area (FIG. 2 (b), ( d), (f)), return to S610. In the present embodiment, if the area arranged in S640 is the top area, an element is selected from the elements corresponding to the top element information (FIG. 5A). On the other hand, if the area arranged in S640 is the lower area, from among the related elements corresponding to the lower element information (FIG. 5B) associated with the overlapping element overlapping the lower area in the latest upper area. Select an element In each area (in the present embodiment, an area other than the top area), a deletion instructing element corresponding to a deletion instructing operation for instructing deletion of the area is disposed.

S650: The element placement unit 442 updates the element displayed in the immediate upper area of the lowermost area, and the process proceeds to S655. In the present embodiment, the elements displayed in the area are scrolled according to the direction and the size of the slide operation (FIG. 8 (a) → (b)).
S655: The element arranged in the lowermost area is changed to at least one of the related elements associated with the overlapping element superimposed on the lowermost area in the nearest upper area. Specifically, “display priority” is a number of elements corresponding to the size of the lowest area among related elements corresponding to lower element information (FIG. 5B) associated with the changed overlapping element. It selects in high order, arranges in order of "display priority", and arrange | positions to the said area | region (FIG. 8 (b)-> (c)).
S660: The element placement unit 442 updates the element displayed in the lowermost area, and returns to S610. In this embodiment, the elements displayed in the area are scrolled according to the direction and size of the slide operation (FIG. 7 (a) → (b), FIG. 7 (c) → (d)).

S670: If it is determined that the user operation is a tap operation, the input analysis unit 430 further specifies a target element of the user operation. If the target element is a deletion instruction element, the process proceeds to S680, and if the target element is a normal element, the process proceeds to S690.
S680: The area is deleted according to the deletion instruction operation targeting the deletion instruction element arranged in the area (FIG. 9A → B, FIG. 9C → D).
S690: A function corresponding to an activation instruction operation targeting an activation instruction element (an element not significant for “lower element presence / absence flag” (FIGS. 5A and 5B) placed in the area) Start up

[2-4. Example of screen information update]
[2-4-1. Add area]
FIG. 2 shows an example of screen information update when an area is added.
2A → 2B: The area placement unit 441 places the area 220 along the trajectory 210 of the slide operation. At this time, the element placement unit 442 places the elements A-D in the area 220.

FIG. 2C → FIG. 2D: The area placement unit 441 places the area 240 along the trajectory 230 of the slide operation that partially overlaps the area 220. When the slide operation is started, the element placement unit 442 determines that an element ("lower element presence / absence flag" (FIG. 5A)) in which a lower element (related element) exists among elements arranged in the area 220 is significant. Element) is changed from "default icon" to "specific form icon". In FIG. 2 (c), the color of the element B-D is reversed. Also, the element placement unit 442 places related elements b _{1 to} b ₄ associated with the overlapping element 221 overlapping the area 240 in the area 220 in the area 240.

2 (e) → FIG. 2 (f): The area placement unit 441 places the area 260 along the trajectory 250 of the slide operation partially overlapping the area 240. When the slide operation is started, the element placement unit 442 determines that the element ("lower element presence / absence flag" (FIG. 5B)) in which the lower element (related element) exists among the elements arranged in the area 240 is significant. Element) is changed from "default icon" to "specific form icon". In the display example of FIG. 2E, the color of the elements b ₁ and b ₂ is reversed. The element placement unit 442 also places related elements b _{21 to} b ₂₄ associated with the overlapping element 241 overlapping the area 260 in the area 240 in the area 260. At this time, the element arrangement unit 442 invalidates the deletion instruction element in the area 240. In the display example shown in FIG. 2F, the color of the deletion instruction element is reversed.

[2-4-2. Change of element]
7 and 8 show an example of screen information update when an element is changed.
FIG. 7A → FIG. 7B: The element placement unit 442 is displayed in the area 220 according to the direction and size of the trajectory 225 of the slide operation (update instruction operation) targeting the area 220. Change the element from A-D to C-F.
7 (c) → FIG. 7 (d): The element placement unit 442 is displayed in the area 240 according to the direction and the size of the trajectory 245 of the slide operation (the update instruction operation) targeting the area 240. Change the element from b ₁ -b ₄ to b ₂ -b ₅ .

8 (a) → FIG. 8 (b): The element placement unit 442 is displayed in the area 220 according to the direction and the size of the trajectory 226 of the slide operation (the update instruction operation) targeting the area 220. Change the element from A-D to C-F. At this time, the overlapping element is changed from element B to element D.
FIG. 8 (b) → FIG. 8 (c): When the superimposing element is changed from element B to element D, the element arranging unit 442 displays lower element information associated with the superimposing element D after the change (FIG. 5 (b). The related elements d _{1 to} d ₄ corresponding to) are selected and arranged in the area 240.

[2-4-3. Delete area
FIG. 9 shows an example of screen information update when an area is deleted.
9 (a) → FIG. 9 (b): When the tap operation (deletion instructing operation) is performed on the deletion instructing element 261 arranged in the area 260, the area arranging unit 441 deletes the area 260. . At this time, the element placement unit 442 enables the deletion instructing element 242 placed in the area 240. In the display example of FIG. 9B, color reversal is restored.
9 (c) → FIG. 9 (d): When the tap operation (deletion instructing operation) is performed on the deletion instructing element 242 arranged in the area 240, the area arranging unit 441 deletes the area 240. .

[3. Modified example]
In the above embodiment, the deletion instruction element placed in the area which is not the lowest area is invalidated (FIG. 2 (f), etc.). Further, the area to be deleted by the deletion instruction operation is limited to the lowermost area (FIG. 9A, etc.).
On the other hand, it is possible to collectively delete the area including the deletion instruction element which is the target of the deletion instruction operation and all the lower areas while leaving the deletion instruction element arranged in the area which is no longer the lowermost area valid. It may be configured as follows.

FIG. 10 shows an example of screen information update in the case where areas are collectively deleted.
10 (a) → FIG. 10 (b): The area placement unit 441 targets the deletion instructing element 242 placed in the area 240 when the area 260 is placed after the area 240 is placed. When the tap operation (deletion instruction operation) is performed, the area 240 and the area 260 are collectively deleted.

10 User terminal (an example of "screen information processing device")
410 display unit 420 detection unit 430 input analysis unit 440 arrangement unit 441 area arrangement unit 442 element arrangement unit 450 display control unit 460 storage unit

Claims (11)

Area arrangement means for arranging the lower area along the trajectory of the slide operation partially overlapping the upper area;
Element placement means for placing related elements associated with overlapping elements overlapping the lower area in the upper area in the lower area;
Screen information processing apparatus comprising: The element arranging means for arranging elements in the upper area changes at least one of a combination of elements arranged in the upper area and an arrangement order in accordance with an update instruction operation for the upper area.
The screen information processing apparatus according to claim 1. The area arrangement means arranges a further lower area along a trajectory of a new slide operation partially overlapping the lower area.
The element arrangement means changes at least one of the combination and the order of arrangement of the elements arranged in the nearest upper area only when the target of the update instruction operation is the nearest upper area of the lowermost area.
The screen information processing apparatus according to claim 2. The element arrangement means changes an element arranged in the lowermost area into a related element associated with the changed overlapping element every time the overlapping element is changed by the update instruction operation.
The screen information processing apparatus according to claim 3. The element arrangement means arranges a specific form of element capable of identifying the presence or absence of a related element,
The screen information processing apparatus according to claim 1. The element arranging means changes the element in the lowermost area to an element of the specific form only after the slide operation for displaying a new lower area is started and ended.
The screen information processing apparatus according to claim 5. The area arrangement means deletes the lowermost area in response to a deletion instructing operation instructing deletion of the lowermost area.
The screen information processing apparatus according to claim 1. The element arranging means further arranges the deletion instructing element corresponding to the deletion instructing operation in the lowermost area, and erases or invalidates the deletion instructing element in the area which is not the lowermost area.
The screen information processing apparatus according to claim 7. The element arrangement means further arranges a deletion instruction element corresponding to the deletion instruction operation in the lowest area;
The area arrangement means deletes both the area and the lowest area newly allocated to the area in response to a deletion instruction operation on the deletion instruction element in the area which is no longer the lowest area.
The screen information processing apparatus according to claim 7. An area arrangement step of arranging the lower area along the trajectory of the slide operation partially overlapping the upper area;
An element arranging step of arranging, in the lower area, related elements associated with overlapping elements overlapping the lower area in the upper area;
And a control method of the screen information processing apparatus. An area arrangement function of arranging the lower area along the trajectory of the slide operation partially overlapping the upper area;
An element placement function of placing related elements associated with overlapping elements overlapping the lower area in the upper area in the lower area;
Control program for realizing the computer of the screen information processing apparatus.

Images