Payment application program, information processing device, and information processing method
The payment application enhances usability and visibility by dynamically adjusting identification code sizes based on user gestures, addressing limitations in existing payment applications.
Patent Information
- Authority / Receiving Office
- JP · JP
- Patent Type
- Applications
- Current Assignee / Owner
- Filing Date
- 2025-05-12
- Publication Date
- 2026-04-01
AI Technical Summary
Existing payment applications lack usability and visibility enhancements, particularly in electronic payment services using identification codes.
A payment application that adjusts the display size of identification codes in response to user operations, such as pinch-in and pinch-out gestures, to enhance operability and visibility.
Improves the operability and visibility of payment applications by allowing users to easily read identification codes, even in challenging conditions, without transitioning to different screens.
Smart Images

Figure 2026056531000001_ABST
Abstract
Description
Technical Field
[0001] The present disclosure relates to a settlement application program, an information processing device, and an information processing method.
Background Art
[0002] In the settlement for goods or services, cashless settlement without using currency is becoming popular. In particular, electronic settlement using a settlement application program (hereinafter referred to as a settlement app) that can be installed on a terminal device such as a smartphone has attracted attention due to its high convenience. As one of the settlement methods using a settlement app, there is a method of displaying an identification code (barcode or QR code (registered trademark)) in which the user's identification information is encoded on the user's terminal device and having it read by the store terminal. In this method, a request for settlement processing is sent from the store terminal to an electronic settlement server, and settlement processing is performed between the electronic account linked to the identification information of the store terminal and the electronic account linked to the identification information of the user in the electronic settlement server. As an operation of the user in this settlement method, first, the settlement app is launched to display the identification code on the user's terminal device, and then, it is either held up to the code reader of the store terminal for reading or the store staff is requested to read it.
[0003] Patent Document 1 describes the display of an identification code in a settlement app. Specifically, it is described that a payment button for transitioning to a payment screen is included in an interface screen on which the above-mentioned identification code and buttons related to various other services are displayed. Further, it is described that when the payment button is operated, it transitions to a payment screen different from the interface screen, and the identification code is enlarged and displayed.
Prior Art Documents
Patent Documents
[0004]
Patent Document 1
Summary of the Invention
[0005] However, the technology described in Patent Document 1 has room for improvement in terms of enhancing the usability and visibility of payment applications.
[0006] This disclosure aims to improve the usability and visibility of payment applications installed on users' terminal devices in electronic payment services. [Means for solving the problem]
[0007] A payment application program according to one aspect of the present disclosure is a payment application that is pre-installed on a terminal device used by a user of electronic payment to use electronic payment using an identification code, and comprises a display control unit that displays the identification code on the display unit of the terminal device, and a reception unit that receives operations from the user to the terminal device, wherein the display control unit enlarges or reduces the display size of the identification code in accordance with the specific operation when the reception unit receives a specific operation. [Effects of the Invention]
[0008] According to this disclosure, it is possible to improve the operability and visibility of payment applications installed on users' terminal devices in electronic payment services. [Brief explanation of the drawing]
[0009] [Figure 1] This diagram shows an overview of this disclosure. [Figure 2] This is a diagram showing an example of the system configuration of an electronic payment system. [Figure 3] This is a diagram showing an example of a screen used for electronic payments. [Figure 4] A block diagram showing an example of a user terminal's hardware configuration. [Figure 5]This figure shows an example of the software configuration of a user terminal. [Figure 6] This diagram illustrates the transitions between display screens. [Figure 7] This flowchart shows the flow of the display control process in the first embodiment. [Figure 8] This diagram explains how to determine the display size. [Figure 9] This diagram illustrates the transitions between display screens. [Figure 10] This flowchart shows the flow of the display control process in the second embodiment. [Modes for carrying out the invention]
[0010] Preferred embodiments of the payment application program, information processing device, and information processing method relating to this disclosure will be described in detail below with reference to the drawings. However, these embodiments do not limit the payment application program, information processing device, and information processing method relating to this disclosure. Furthermore, identical components will be denoted by the same reference numerals in the following embodiments, and redundant descriptions will be omitted. In this specification, the payment application program will be referred to as a payment app.
[0011] (Summary of this disclosure) Figure 1 is a diagram illustrating an overview of the present disclosure. A payment application according to one embodiment of the present disclosure includes a display control unit that displays either or both of a first identification code 101 and a second identification code 102 as identification codes on the display unit of a terminal device used by a user (hereinafter referred to as the user terminal), and a reception unit that receives operations from the user on the user terminal. When the display control unit receives a specific operation from the user, it enlarges or reduces the display size of the identification code in accordance with the specific operation. The specific operation is, for example, a pinch-out operation and a pinch-in operation. In the following description, pinch-out operations and pinch-in operations are collectively referred to as pinch operations.
[0012] Figure 1(a) shows an example of the initial state of the top screen 100 displayed on the user terminal's display immediately after launching the payment application. Figure 1(b) shows an example of the top screen 100A after a pinch-out operation. As shown in Figure 1(a), the initial state of the top screen 100 displays a first identification code 101 and a second identification code 102, which encode the user's identification information, in the code display area 104. The identification code is at least one of the following: the first identification code 101 is a one-dimensional code such as a barcode, and the second identification code 102 is a two-dimensional code such as a QR code (registered trademark). The figure shows an example where both are displayed. Information other than the identification code, such as payment method and balance information, may also be displayed in the code display area 104.
[0013] As will be explained in more detail later, there are two payment methods using a payment app: the first method involves a store staff member reading a user identification code that contains the user's identification information, and the second method involves scanning a store identification code, which contains the store's identification information and is displayed in the store, with the user's terminal and entering the payment amount. In the following explanation, the first method will also be called store scan, and the second method will also be called user scan. The first identification code 101 and the second identification code 102 displayed in the code display area 104 are user identification codes used in the first method.
[0014] The top screen 100 displays a payment button 109 at the bottom of the screen, which is used when transitioning to the payment screen. Below the code display area 104, various buttons are displayed, including a scan button 108 used when transitioning to the scan screen, as well as buttons used when transitioning to the remittance screen, points screen, transaction history screen, and charge screen. The scan screen is the screen used in the second method described above. In addition, various buttons are displayed that are used when transitioning to screens for various functions of the payment app. Furthermore, when scrolling the top screen 100, other information such as coupon information and store information will be displayed within the display area. In this way, a lot of information is laid out on the top screen 100.
[0015] When a pinch-out operation is received on the screen where the user identification codes 101 and 102 are displayed, the display control unit enlarges the display sizes of the identification codes 101 and 102. When a pinch-in operation is received, the display control unit reduces the display sizes of the identification codes 101 and 102. On the top screen 100A after the pinch-out operation, as shown in FIG. 1(b), the code display area 104A is enlarged and displayed. When the code display area 104A is enlarged and displayed, the identification codes 101A and 102A are also enlarged and displayed. The size of the enlarged code display area 104A is controlled by the display control unit so as not to exceed the display range of the display unit. Alternatively, the display control unit may control the sizes of the enlarged identification codes 101A and 102A so as not to exceed the display range of the display unit. Further, when a pinch-in operation is performed in the enlarged display state, the code display area 104 is reduced and displayed. As a result, the identification codes 101 and 102 are also reduced and displayed. The size of the reduced code display area 104 is controlled by the display control unit so as not to be smaller than the size of the code display area 104 in the initial state. Alternatively, the display control unit may control the sizes of the reduced identification codes so as not to be smaller than the sizes of the identification codes 101 and 102 in the initial state. The enlargement and reduction of the identification codes corresponding to the specific operation are preferably performed on the top screen displayed immediately after the start of the payment application.
[0016] In this way, by making it possible to change the display sizes of the identification codes 101 and 102 displayed on the display unit in response to specific operations by the user, the operability and visibility of the payment application are improved. Specifically, when reading the identification code displayed on the user terminal using a handy-type code reader, even if the hand shakes or the identification code is difficult to view, the identification code can be enlarged on the screen and changed to a size suitable for reading. Therefore, the reading operation can be performed smoothly. Also, if the payment button 109 is operated as in the conventional manner, it is possible to enlarge and display the identification code on the payment screen, which is a different screen. However, according to the present disclosure, even if the user does not notice the payment button 109, it is possible to enlarge and display the identification code displayed on the screen within the same screen. Also, even when it takes time to update the screen in an environment where the communication state is unstable, it is possible to enlarge and display the identification code without transitioning to the payment screen, which is a different screen. Also, it is possible to improve the visibility of the identification code while displaying a lot of information on the screen. Also, the size of the identification code can be changed by an intuitive operation in which the operation of the fingers and the display size are linked, such as enlarging by a pinch-out operation that widens the distance between two fingers and shrinking by a pinch-in operation that narrows the distance between two fingers, and the usability is improved.
[0017] <First Embodiment> (Overview of Electronic Payment System) An overview of an electronic payment system using a payment application program (hereinafter referred to as a payment app) according to the present disclosure will be described. FIG. 2 is a diagram showing an example of the system configuration of the electronic payment system 1. As shown in FIG. 2, the electronic payment system 1 includes a user terminal 2, a store terminal 3, and an electronic payment server 5, and the store terminal 3 and the electronic payment server 5 are communicatively connected to each other via a network 4. Also, the user terminal 2 and the electronic payment server 5 are communicatively connected to each other via the network 4.
[0018] In this specification, a user is defined as a person who uses a payment application to make a payment for goods or services at a store. The user obtains an account for the electronic payment service provided by the electronic payment system 1, for example, using the account management function of the payment application. The user's account is managed by the electronic payment server 5 and is linked to the user's identification information and electronic account. The user can access the electronic payment service by installing the payment application 200 on the user terminal 2. The electronic payment service can also be accessed by using a general web browser to access the website provided by the electronic payment server 5.
[0019] (Store terminal) The store terminal 3 is an information processing device used by stores or service providers that have a contract with a service provider that provides electronic payment services. The store terminal 3 consists of at least a computer having a product price acquisition function, an optical reading function, a program execution function, and a communication function. The store terminal 3 includes a so-called POS (Point of Sale) device, and the product price acquisition function and optical reading function may be implemented by the POS device. The optical reading function is implemented by a code reader 31 such as a barcode reader that reads images of one-dimensional codes such as barcodes, or a camera that reads images of two-dimensional codes such as QR codes (registered trademark). In addition, a store code image 32 is displayed in the store. The store code image 32 shows the store URL, which is the store's identification information, in the form of a two-dimensional code such as a QR code. The store code image 32 may be printed on paper or plastic media and displayed, or it may be displayed on a screen. Hereinafter, stores or service providers that have a contract with a service provider that provides electronic payment services will be referred to as member stores. Member stores include, for example, organizations that operate multiple physical stores or online shops. "Store" refers to any place that actually provides goods or services to users, such as shops, restaurants, department stores, movie theaters, or gyms. "Goods" refers to tangible items such as goods that users actually acquire at a store, or intangible items such as image data, video data, music data, and game programs. "Services" refers to services that users actually receive at a store or similar establishment.
[0020] (Electronic payment server) The electronic payment server 5 is an information processing device that provides electronic payment services, including electronic payment processing and distribution of information related to electronic payments. It consists of at least a computer having communication and program execution functions. The electronic payment server 5 manages the electronic accounts of merchant stores and the electronic accounts of users who have accounts for the electronic payment service. It enables various payments, for example, by transferring electronic money between electronic accounts. The electronic payment server 5 may be implemented by a single information processing device or by multiple information processing devices.
[0021] (User terminal) User terminal 2 is a terminal device used when a user makes an electronic payment at a participating merchant. For example, a portable terminal such as a smartphone is commonly used. The payment app 200 is pre-installed on user terminal 2 when a user makes an electronic payment. The payment app 200 is operated and managed by the service provider that provides the electronic payment service. The payment app 200 will be described later. There are two main methods for making an electronic payment at a participating merchant using the payment app 200: store scan (first method) and user scan (second method).
[0022] (Store scan) In store scanning, the store terminal 3 optically reads the user identification code displayed on the user terminal 2 using a code reader 31, decodes the read identification code to obtain the user's identification information. The store terminal 3 sends the obtained user identification information along with a payment request to the electronic payment server 5. The electronic payment server 5 generates a one-time code in response to the payment request and returns it to the store terminal 3. The store terminal 3 adds the store's identification information and payment amount information to the received one-time code and sends it to the electronic payment server 5. Based on the information received from the store terminal 3, the electronic payment server 5 identifies the user and store's electronic accounts from its database and performs the payment processing. Once the payment processing is complete, the electronic payment server 5 displays a payment completion screen on the user terminal 2. The store terminal 3 may send and receive payment-related information directly with the electronic payment server 5, or it may send and receive payment-related information via the server of an intermediate payment service provider.
[0023] For reading the identification code during store scanning, the identification codes 101 and 102 displayed on the top screens 100 and 100A shown in Figure 1 may be used, or the identification codes 311 and 312 displayed on a payment screen 310, which is separate from the top screen 100, may be used. Figure 3(a) shows an example of the payment screen 310. The payment screen 310 is displayed on the display of the user terminal 2 when the payment button 109 displayed on the top screens 100 and 100A is tapped by the user. To return from the payment screen 310 to the top screen 100, the user should operate button 314.
[0024] (User scan) In the user scan, the user terminal 2 reads a store code image 32, such as a QR code, displayed in the store. The store code image 32 contains store identification information, such as the store URL. The payment application 200 on the user terminal 2 adds the user's identification information to the read store URL and sends it to the electronic payment server 5. The electronic payment server 5 identifies the user and store from its database based on the received store URL and user identification information, and displays an amount input screen on the user terminal 2. The user terminal 2 accepts the amount input from the user on the amount input screen and sends the entered amount information to the electronic payment server 5. The electronic payment server 5 processes the payment between the identified user and store's electronic accounts. Once the payment process is complete, it displays a payment completion screen on the user terminal 2.
[0025] For reading the store code image 32 during user scanning, the scan screen 320 shown in Figure 3(b) is used. The user operates the payment app 200 to display the scan screen 320 on the display of the user terminal 2 and takes a picture of the store code image 32 displayed in the store so that it fits within the frame 321. The user can access the scan screen 320 by tapping the scan button 108 displayed on the top screen 100 or 100A shown in Figure 1, or by tapping the button 313 displayed on the payment screen 310 shown in Figure 3(a). To return to the payment screen 310 from the scan screen 320, the user taps the button 322 on the scan screen 320. To return to the top screen 100 from the scan screen 320, the user operates the button 324.
[0026] Figure 4 shows the hardware configuration of the user terminal 2 according to this embodiment. An example of the user terminal 2 is shown, specifically the internal configuration of a smartphone. In this embodiment, the user terminal 2 is described using a smartphone as an example, but is not limited to this. The user terminal 2 may be, for example, a tablet device, a notebook PC (Personal Computer), a desktop PC, or a PDA (Personal Digital Assistant).
[0027] The user terminal 2 is equipped with a CPU 201, ROM 202, RAM 203, storage unit 204, operation unit 205, communication interface 208, camera 209, voice processing unit 210, and vibration detection unit 212, and each unit is connected via a bus 213. The operation unit 205 has a display unit 206 and an input unit 207.
[0028] The CPU 201 is the central processing unit and controls various parts of the user terminal 2. The CPU 201 reads programs stored in the ROM 202 or memory unit 204 into the RAM 203 and executes the read programs to realize the various functions contained in the programs. The CPU 201 may be an MPU (Micro Processing Unit) or an ASIC (application specific integrated circuit). The CPU 201 may also be an FPGA (Field Programmable Gate Array), etc. The CPU 201 may consist of one processor or multiple processors.
[0029] ROM202 stores the startup program and OS (Operating System) of user terminal 2. RAM203 temporarily stores programs or data when the CPU201 executes various processes. RAM203 is used as work memory.
[0030] The storage unit 204 is memory for storing application programs and various data. Examples of storage units 204 include HDDs (Hard Disk Drives), SSDs (Solid State Drives), flash memory, and storage devices.
[0031] The operation unit 205 is a user interface that receives operations from the user, inputs the received operation information to the CPU 201, and outputs the output information from the CPU 201 in a way that the user can recognize. In this embodiment, the operation unit 205 is assumed to be a touch panel display in which the display unit 206 and the input unit 207 are integrally configured. The display unit 206 includes a display and a display control circuit, and displays various screens on the display based on the output information input from the CPU 201. The screens that are displayed will be described later. The input unit 207 includes input devices such as various buttons and a touch panel, and transmits information input by the user via the input devices to the CPU 201. Note that the operation unit 205 does not necessarily have to have the display unit 206 and the input unit 207 integrally configured; they may be configured separately. Also, the operation unit 205 may be provided separately from the main body of the user terminal 2 and connected wirelessly or by wire.
[0032] Communication I / F208 includes an interface for communication connection with network 4, including LAN (Local Area Network), WAN (Wide Area Network), the Internet, and mobile communication networks, as well as interfaces for short-range wireless communication such as Bluetooth® and NFC (Near Field Communication). Communication I / F208 can be wired or wireless. User terminal 2 receives data etc. from other devices via communication I / F208 and transmits data etc. generated or stored by user terminal 2 to other devices via communication I / F208.
[0033] Camera 209 has an optical system including a lens and an image sensor such as a CCD (Charge Coupled Device) or CMOS (Complementary Metal Oxide Semiconductor) sensor, and outputs the captured image data to CPU 201. The code reading function of the payment application 200 is implemented using camera 209.
[0034] The audio processing unit 210 includes a microphone and a speaker. The microphone acquires the voice of users, store staff, etc., and outputs it as audio data to the CPU 201. The speaker outputs the audio data input from the CPU 201 so that users can listen to it.
[0035] The vibration detection unit 212 is composed of a gyro sensor and the like. The gyro sensor measures the rotational angular velocity when the user terminal 2 is tilted, and includes vibration-type gyro sensors and capacitive-type gyro sensors. When the vibration detection unit 212 detects vibration in the user terminal 2, it outputs the detection signal to the CPU 201.
[0036] Note that the user terminal 2 is not limited to the configuration shown in Figure 4. For example, a positioning unit for implementing GPS functionality may be provided. The user terminal 2 may also be equipped with a media I / F (not shown). The media I / F is an interface for connecting a media drive device that reads and writes data and programs stored on a data storage medium (hereinafter referred to as "media") connected by wire or wireless. The media I / F reads programs and data stored on the media, temporarily stores them in RAM 203, and inputs them to CPU 201. CPU 201 can load the input program into the work memory of RAM 203 and execute processing. The media includes, for example, optical recording media such as DVD (Digital Versatile Disc) and PD (Phase change rewritable Disk), magneto-optical recording media such as MO (Magneto-Optical disk), tape media, magnetic recording media, or semiconductor memory.
[0037] The CPU 201 of the user terminal 2 implements various functions by reading programs stored in the memory unit 204, ROM 202, and media into the RAM 203 and executing them. Programs may also be obtained from other devices, such as a server, via the network 4. Furthermore, it goes without saying that the user terminal 2 is equipped with the necessary configurations to realize the information processing in this embodiment.
[0038] (Overview of payment application features) Next, referring to Figure 5, the functions and data of the payment application 200 according to this embodiment will be described. In this embodiment, the display control function on the user terminal 2 will be described in particular.
[0039] Figure 5(a) shows the data stored in the storage unit 204 of the user terminal 2. As shown in Figure 5(a), the storage unit 204 of the user terminal 2 stores the program of the payment application 200, as well as data for various screens displayed in the payment application (hereinafter referred to as screen data 230) and user identification information 220 for the electronic payment service. The identification information 220 is assigned by the electronic payment server 5 when the account is registered.
[0040] The payment application 200 is an application program installed and used by the user terminal 2 of a user of an electronic payment service, and is operated and managed by the service provider that provides the electronic payment service. While the payment application 200 is typically installed on the user terminal 2 by downloading it from a website, it may also be installed on the user terminal 2 by reading it from media. Alternatively, the payment application 200 may be provided as a web application that runs on the web browser of the user terminal 2.
[0041] Payment app 200 has payment processing functions for making electronic payments in electronic payment services, as well as a points function, a top-up function, a coupon function, an information content distribution function, and a My Page function for managing user account information. In addition, payment app 200 has a display control function to control the screen display and a reception function to receive operations.
[0042] Figure 5(b) shows the configuration of the program modules of the payment application 200. As shown in Figure 5(b), the payment application 200 of this embodiment has a payment processing unit 501, a reception unit 502, and a display control unit 503 as program modules. Although not shown, the payment application 200 also has various program modules for realizing the various functions described above.
[0043] The payment processing unit 501 performs payment processing using an identification code with the store terminal 3 or the electronic payment server 5. The payment processing unit 501 sends and receives payment-related information between the user terminal 2 and the store terminal 3 or the electronic payment server 5 according to the processing procedures for store scan and user scan described above, and starts and completes the electronic payment.
[0044] The reception unit 502 receives operations from the user via the operation unit 205 of the user terminal 2. When the operation unit 205 of the user terminal 2 is configured as a touch panel display, the operations on the touch panel display can take the following forms: a tap operation where the target of the operation is touched with one finger, a swipe operation where the finger is slid across the screen while touching it, a long press operation where the finger is held in contact with the screen for a predetermined time or longer, a pinch-out operation where the distance between two fingers touching the screen is moved from a narrowed state to a widened state, a pinch-in operation where the distance between two fingers touching the screen is moved from a widened state to a narrowed state, etc. Pinch-in and pinch-out operations are collectively referred to as pinch operations. Operations on the user terminal 2 are not limited to these. The reception unit 502 may accept a variety of operations, such as repeating a tap operation multiple times, a double-tap operation, a triple-tap operation, or a swipe operation with multiple fingers. Furthermore, if the operation unit 205 is not a touch panel display but consists of input devices such as a keyboard or mouse, the reception unit 502 accepts input for specific operations and other operations described later using the operation method corresponding to each input device.
[0045] The reception unit 502 accepts specific operations from the user. In this embodiment, the specific operations are pinch-in and pinch-out operations. However, the specific operations are not limited to pinch-in and pinch-out operations, but may be other operations. Furthermore, the target of the specific operation may be the identification codes 101 and 102, or the code display area 104. Alternatively, the specific operation may be performed in an area outside the code display area 104, or it may be performed spanning both the inside and outside of the code display area 104.
[0046] The display control unit 503 controls the display of various screens corresponding to the various functions of the payment application 200. The display control unit 503 acquires screen data 230 corresponding to the function from the storage unit 204 in response to user operations, and displays the screen on the display unit 206, reflecting identification information 220 and balance information acquired from the electronic payment server 5 on the screen. For example, when the user double-tap the startup icon for the payment application 200 displayed on the home screen of the user terminal 2, the payment application 200 starts. As soon as the payment application 200 starts, the display control unit 503 displays the top screen 100 shown in Figure 1(a). Also, when the user taps the payment button 109 displayed on the top screen 100, the display control unit 503 displays the payment screen 310 shown in Figure 3(a) on the display unit 206. When the user taps the scan button 108 displayed on the top screen 100, the display control unit 503 displays the scan screen 320 shown in Figure 3(b) on the display unit 206. In addition, when any of the buttons for various functions displayed on the top screen 100 are tapped, the display control unit 503 displays the screen corresponding to the operated button on the display unit 206.
[0047] In this embodiment, when the reception unit 502 receives a specific operation from a user, the display control unit 503 enlarges or reduces the display size of the identification code displayed on the screen in accordance with the specific operation. In this embodiment, the reception unit 502 receives the specific operation with the identification codes 101 and 102 displayed on the top screen 100, which is displayed immediately after the payment application 200 is launched. The top screen 100 also displays a button 109 for transitioning to the payment screen 310. The display control when a specific operation is performed will be described in detail below.
[0048] Figure 6 illustrates the changes in specific operations and screen display states in the payment application 200. Figure 6(a) shows an example of the initial state of the top screen 100 displayed immediately after launching the payment application 200. As shown in Figure 6(a), the top screen 100 displays a code display area 104 that includes a one-dimensional code, which is a first identification code 101 that encodes the user's identification information, and a two-dimensional code, which is a second identification code 102. The code display area 104 may also display payment methods 603 and balance information of electronic accounts linked to the user's identification information. In addition, a payment button 109, which is operated when transitioning to the payment screen 310, is displayed in a fixed display area 608 at the bottom of the top screen 100. The fixed display area 608 also displays buttons that are operated when displaying information provided by the electronic payment service provider, a wallet button that is operated when displaying balance information, point information, and credit information. Furthermore, an account button that is operated when displaying account information and the My Code used for remittances, and a home button that is operated when calling up the top screen 100 from other screens are also displayed in the fixed display area 608. The fixed display area 608 is not linked to screen scrolling and is always displayed in a fixed position on the display unit 206 of the user terminal 2. In the example in Figure 6, the fixed display area 608 is displayed at the bottom of the display unit 206. In this specification, up, down, left, and right in the description of the screen refer to the up, down, left, and right within the screen plane.
[0049] Directly below the code display area 104 is a menu area 605. In addition to the scan button, the menu area 605 displays buttons used to navigate to the money transfer screen, points screen, transaction history screen, and charge screen. Above the code display area 104, campaign information 610 and notification icons 611 are displayed. Campaign information 610 may not be displayed if the relevant campaign is not currently running. Furthermore, there is a function selection area 606 that displays buttons used to navigate to screens for various functions of the payment app 200, and a balance display area 607 that displays point balance, available credit amount, payment app balance, etc. Furthermore, scrolling down the top screen 100 displays information related to the payment app, such as coupon information and nearby store information.
[0050] When the reception unit 502 receives a specific operation (pinch-out operation and pinch-in operation) on the top screen 100, the display control unit 503 enlarges or reduces the display size of identification codes 101 and 102 in accordance with the specific operation. When a pinch-out operation is received, the display control unit 503 enlarges the display size of identification codes 101 and 102. When a pinch-in operation is received, the display control unit 503 reduces the display size of identification codes 101 and 102. In the example in Figure 6, the display control unit 503 enlarges or reduces the display size of identification codes 101 and 102 by enlarging or reducing the display size of the code display area 104, which includes identification codes 101 and 102. The enlarged identification codes 101C and 102C are shown in Figure 6(c). In the top screen 100C shown in Figure 6(c), the code display area 104C is displayed enlarged compared to the code display area 104 in Figure 6(a). Identification codes 101C and 102C, included in the code display area 104C, have also been similarly enlarged.
[0051] If the reception unit 502 receives a second operation different from a specific operation on the top screen 100, the display control unit 503 changes the identification code 101, 102 or the code display area 104 to an active state. An active state means that the system is capable of receiving a specific operation. In this embodiment, the second operation is a long press operation on the identification code 101, 102 or the code display area 104. However, the second operation is not limited to a long press operation; it may be simply a finger resting on the screen (touch operation), a tap operation, a double tap operation, or other operations. Furthermore, if the operation unit 205 is not a touch panel display but consists of an input device such as a keyboard or mouse, the reception unit 502 accepts the input of the second operation using an operation method corresponding to the respective input device.
[0052] Furthermore, to let the user know that the area is active, the display control unit 503 displays a hover effect on the identification code 101, 102, or code display area 104 that is the target of the operation. The top screen 100B shown in Figure 6(b) is a diagram showing an example of hovering on the code display area 104B. Hover display is a visual change that occurs when a specific operation is performed on a specific element on the screen. For example, the display state may change so that the operated code display area 104B appears to float above other areas, or the color of the code display area 104B may be changed. Hover display can show the user that the area of the target of the operation is active (operable). In addition to hover display, the audio processing unit 210 may also generate sound or vibration.
[0053] In this embodiment, the reception unit 502 accepts a specific operation on the identification code 101, 102, or the code display area 104 when it is in an active state. That is, on the top screen 100 in Figure 6(a), the reception unit 502 accepts the second operation and, as shown in Figure 6(b), displays the code display area 104B by hovering over it, and then accepts the specific operation. The specific operation causes the screen to change to the top screen 100C shown in Figure 6(c).
[0054] When the display control unit 503 enlarges or reduces the display size of identification codes 101 and 102, it is preferable to enlarge or reduce the display size to one that corresponds to the screen layout. Specifically, the display control unit 503 enlarges or reduces the display size of identification codes 101 and 102 or the code display area 104 within a predetermined maximum size that does not exceed the display range of the display unit 206. The display range of the display unit 206 refers to the entire area of the display unit 206, i.e., the range corresponding to the display size.
[0055] On the top screen 100, the longitudinal direction of the identification code 101, which is a one-dimensional code, is laid out so that it coincides with the width direction of the display unit 206. Also, the longitudinal direction of the code display area 104 is laid out so that it coincides with the width direction of the display unit 206. In the example of Figure 6, the width direction of the display unit 206 is the left-right direction of the figure. In other words, when the longitudinal direction of the display of the display unit 206 is displayed as the up-down direction (scroll direction) of the top screen 100, the direction perpendicular to the longitudinal direction of the display of the display unit 206 is the width direction of the display unit 206.
[0056] The display control unit 503 enlarges the display size of the identification code 101, 102, or the code display area 104 so that the display size of the identification code 101, which is a one-dimensional code, in the longitudinal direction, or the display size of the code display area 104 in the longitudinal direction, fits within the size in the direction perpendicular to the longitudinal direction of the display range of the display unit 206. That is, in the example of Figure 6, the display size of the identification code 101, or the display size of the code display area 104 in the longitudinal direction, is enlarged so that it fits within the width direction of the display unit 206.
[0057] Furthermore, the display control unit 503 enlarges or reduces the display size of the identification code 101, 102, or the code display area 104, within a predetermined minimum size range, such that the display size of the identification code 101, 102, or the code display area 104 does not fall below the display size of the identification code 101, 102, or the code display area 104 in the initial state. The initial state is the display state of the top screen 100 that is displayed immediately after the payment application 200 is launched.
[0058] The enlargement or reduction may be a two-stage change in display size between a minimum size and a maximum size, or the size may be continuously changed in conjunction with the operation within the range from the minimum size to the maximum size. The display control unit 503 also enlarges or reduces the identification codes 101, 102 or the code display area 104 while maintaining the initial aspect ratio of the identification codes 101, 102 and the code display area 104.
[0059] In the example shown in Figure 6, the display size of the code display area 104 is enlarged or reduced, but the display control unit 503 may enlarge or reduce only the identification codes 101 and 102. Alternatively, it may enlarge or reduce only one of the two types of identification codes 101 and 102, or both.
[0060] When enlarging or reducing the display size of the code display area 104, it is preferable for the display control unit 503 to maintain the display size of the area (second area) excluding the code display area 104 within the top screen 100. The display control unit 503 may enlarge or reduce the display size of the code display area 104 so that it does not overlap with the second area, or it may enlarge or reduce the display size of the code display area 104 so that it overlaps with a part of the second area.
[0061] (Display control processing) Next, the flow of the display control process in this embodiment will be explained with reference to Figure 7. The process shown in this flowchart is written in the program of the payment application 200 installed on the user terminal 2. The program is stored in the memory unit 204, called by the CPU 201, loaded into RAM 203, and executed. When the user operates the startup icon of the payment application 200 and the payment application 200 is started, the CPU 201 starts this process. In the following explanation, the symbol "S" means step.
[0062] In S101, the CPU 201 first obtains screen data 230 of the top screen 100 of the payment application 200 from the storage unit 204 and displays it on the display unit 206 as shown in Figure 6(a). As described above, the top screen 100 is provided with a code display area 104, a menu area 605, a function selection area 606, a balance display area 607, a fixed display area 608, etc. The fixed display area 608 displays a payment button 109. The upper area of the code display area 104 displays campaign information 610 and notification icons 611. In addition, the right-hand area of the code display area 104 may display operation buttons such as a credit payment button 612 that are operated when transitioning to the credit payment screen.
[0063] In the initial state shown in Figure 6(a), the code display area 104 is positioned so as not to overlap with the campaign information 610 and notification icon 611 displayed above it, the menu area 605 displayed below it, and the credit payment button 612 displayed in the right-hand area. Also, in Figure 6, the longitudinal center of the code display area 104 coincides with the widthwise center of the display unit 206. As mentioned above, in the screen layout example of Figure 6, the width direction of the display unit 206 is perpendicular to the longitudinal direction of the display range of the display unit 206. However, it is not limited to this, and the code display area 104 may be displayed biased to one end, such as left-aligned or right-aligned. The credit payment button 612 may be positioned to the left of the code display area 104.
[0064] In S102, the CPU 201 accepts an operation on the top screen 100. When the input unit 207 detects that a long press operation has been input to the code display area 104, and the CPU 201 receives this detection signal from the input unit 207 (S102; YES), the process proceeds to S103. If the operation on the top screen 100 is not an operation on the code display area 104, but an operation on another button (S112; YES), the process proceeds to the operation corresponding to the operation (S113). For example, if the payment button 109 is operated, the process transitions to the payment screen 310 shown in Figure 3(a), and the process proceeds to the payment screen 310. If no operation is performed on the top screen 100 (S112; NO), the process returns to S102 and waits for an operation.
[0065] In S103, the CPU 201 displays a hover effect on the code display area 104, making it active. As shown in Figure 6(b), the hover effect displays a shadow around the code display area 104, creating a visual effect that makes the code display area 104 appear to float. The CPU 201 may also indicate the active state through vibration or sound in addition to the hover effect. In the initial state, a tap mark 620 may be displayed on the code display area 104 to guide the user's operation of the code display area 104. However, the location where the CPU 201 detects the long press operation in S102 is not limited to the location of the tap mark 620, but can be any location within the code display area 104. The hover effect lasts for a predetermined time of several seconds. That is, the active state lasts for a predetermined time of several seconds.
[0066] The code display area 104 accepts pinch gestures when it is in a hover state, i.e., when the code display area 104 is active. When the input unit 207 detects a pinch-out gesture on the code display area 104, and the CPU 201 acquires the detection signal in S104 (S104; YES), the process proceeds to S105. In S105-S106, the CPU 201 expands the display size of the code display area 104 in conjunction with the pinch-out gesture.
[0067] In S105, the CPU 201 determines the maximum size of the code display area 104. Figure 8 is a diagram illustrating the display size of the code display area 104 in the layout of the top screen 100. In the description of Figure 8, the width direction is the left-right direction of the figure, and the height direction is the up-down direction of the figure.
[0068] Figure 8(a) shows the size and screen layout of the code display area 104 in its initial state. In the initial state, i.e., S101, the width of the code display area 104 (hereinafter referred to as the width size) is W1, and the height size (hereinafter referred to as the height size) is H1. The display size W1 × H1 in this initial state is predetermined. The display size in the initial state may also be determined as a ratio to the display size (display range) of the display unit 206. Specifically, the ratio W1 / Wd of the width size of the code display area 104 to the width size Wd of the display is predetermined to be a predetermined ratio α1 (α1 < 1). Similarly, for the height size, the ratio H1 / Hd of the height size of the code display area 104 to the height size Hd of the display is predetermined to be a predetermined ratio β1 (β1 < 1). For example, α1 = 0.7, β1 = 0.2, etc.
[0069] The CPU 201 determines the width W2 and height H2 of the code display area 104, which correspond to the predetermined maximum magnification ratio αmax. αmax is the ratio W2 / Wd of the maximum width W2 of the code display area 104 to the width Wd of the display, and is predetermined, for example, αmax = 0.99. Furthermore, αmax is set to a value greater than the initial ratio α1 and less than or equal to 1 (α1 < αmax ≤ 1). The maximum height H2 of the code display area 104 is determined based on the aspect ratio (H1 / W1) of the code display area 104 in the initial state. That is, the display size of the maximum code display area 104 after magnification is determined by the following equations (1) and (2).
[0070] W² = αmax × Wd ... (1) H2 = W2 × (H1 / W1) ... (2)
[0071] The expanded width W2 of the code display area 104 is controlled to be at most less than or equal to the width Wd of the display unit 206.
[0072] In S106, the CPU 201 expands the code display area 104 by ΔW in the width direction and ΔH in the height direction in conjunction with the pinch-out operation, using the size W2×H2 determined in S105 as the maximum size. The aspect ratio of the code display area 104 is maintained during expansion. When the size of the code display area 104 reaches the maximum size W2×H2, the display control unit 503 controls it to maintain the maximum size even if a pinch-out operation is performed. In this way, by limiting the maximum size after expansion to less than or equal to the display size, the code display area 104 and identification codes 101 and 102 are expanded so that they do not extend beyond the screen. As a result, they are expanded to an appropriate size that allows the codes to be read, improving visibility. In addition, even if the user does not perform the pinch-out operation accurately, the identification codes 101 and 102 do not extend beyond the screen, improving the operability of the user terminal 2.
[0073] Furthermore, when the code display area 104 is enlarged, the input unit 207 detects a pinch-in operation on the code display area 104, and in S107 the CPU 201 acquires this detection signal (S107; YES), the process proceeds to S108. In S108-S109, the CPU 201 reduces the display size of the code display area 104 in conjunction with the pinch-in operation.
[0074] In S108, the CPU 201 determines the minimum size of the code display area 104. In this embodiment, the minimum size of the code display area 104 is set to the display size W1 × H1 of the code display area 104 in the initial state. As described above, the initial state, i.e., the minimum width size W1 of the code display area 104, is the size obtained by multiplying the width size Wd of the display unit 206 by a ratio α1. The reduced width size of the code display area 104 is controlled so as not to be less than the initial width size W1 of the code display area 104.
[0075] If a minimum ratio αmin is predetermined instead of ratio α1, the CPU 201 determines the width Wmin and height Hmin of the code display area 104 corresponding to that ratio αmin. In that case, the minimum width Wmin and height Hmin of the reduced code display area 104 are determined by the following equations (3) and (4).
[0076] Wmin = αmin × Wd ... (3) Hmin = Wmin × (H1 / W1) ... (4) However, assume that αmin < αmax ≤ 1.
[0077] In this case, the reduced width of the code display area 104 will be displayed in such a way that it does not fall below the initial width of the code display area 104, Wmin.
[0078] In S109, the CPU 201 reduces the code display area 104 by ΔW in the width direction and ΔH in the height direction in conjunction with the pinch-in operation, using the size W1×H1 (or size Wmin×Hmin) determined in S108 as the minimum size. The aspect ratio of the code display area 104 is maintained during reduction. If the size of the code display area 104 reaches the initial size W1×H1 (or minimum size Wmin×Hmin), the display control unit 503 controls it to maintain the initial size (or minimum size) even if a pinch-in operation is performed. In this way, by limiting the size after reduction so that it does not fall below the initial size (or predetermined minimum size), the code is reduced to an appropriate size that is readable, improving visibility. In addition, even if the user does not perform the pinch-in operation accurately, the identification codes 101 and 102 will not become too small, improving the operability of the user terminal 2. After S109, proceed to S104.
[0079] If a pinch-out operation is not performed in S104 (S104; NO), or if a pinch-out operation is performed and the image is enlarged, but a pinch-in operation is not performed (S107; NO), the process proceeds to S110. In S110, the CPU 201 determines whether a predetermined time has elapsed since the system became active, or whether a predetermined time has elapsed since the last operation. If the predetermined time has not elapsed (S110; NO), the system remains active and the process proceeds to S104. If a predetermined time has elapsed since the system became active, or whether a predetermined time has elapsed since the last operation (S110; YES), the process proceeds to S111. In S111, the CPU 201 cancels the hover display and active state of the code display area 104. After that, this flowchart is terminated.
[0080] Figure 8(b) shows the top screen 100C with the code display area 104C enlarged to a maximum size of W2 x H2. In the example of Figure 8(b), due to the enlargement of the code display area 104, a portion of the top screen 100C that was initially displayed is not shown on the screen. That is, the enlarged code display area 104C is displayed overlapping the campaign information 610, notification icon 611, and credit payment button 612, but the other areas are displayed so as not to overlap with the code display area 104C. Operation on the various displayed buttons is possible.
[0081] As shown in Figure 8(b), when a pinch-in operation is performed on the code display area 104C while it is enlarged, the code display area 104 is reduced to a range up to the initial display size W1 × H1 shown in Figure 8(a).
[0082] In the flowchart explanation in Figure 7, the width and height of the code display area 104C are changed by ΔW and ΔH in conjunction with pinch gestures when zooming in or out, but this is not limited to this. For example, when a pinch-out operation is performed, the size may change from the initial minimum size to the maximum size all at once, and when a pinch-in operation is performed, the size may change from the maximum size to the initial minimum size all at once. By limiting the display size to two stages in this way, zooming in and out operations can be performed instantly.
[0083] Furthermore, in the example display in Figure 8(b), the campaign information 610 and notification icons 611 are hidden by the code display area 104, but the screen layout is not limited to this. The display of the campaign information 610 and notification icons 611 may be maintained even after enlargement. In that case, the CPU 201 may shift the display positions of the menu area 605, function selection area 606, balance display area 607, and other areas located below the code display area 104 downward by the length of the height enlargement of the code display area 104 (H2-H1). By doing so, it is possible to make the information displayed on the top screen 100C visible to the user even after enlargement.
[0084] As described above, the payment application 200 of the first embodiment makes it possible to enlarge or reduce the identification code displayed on the display unit 206 of the user terminal 2 based on a specific operation by the user. Therefore, the visibility of the identification code in the payment application 200 is improved. In addition, the identification code can be enlarged or reduced to a size suitable for code reading with intuitive operation without having to transition to a separate payment screen, thus improving usability.
[0085] In the first embodiment, an example was shown in which a second operation (long press operation) changes the code display area 104 (identification codes 101, 102) to an active state and then accepts a specific operation, but this disclosure is not limited to this. The configuration for transitioning to the active state is not necessarily required. In that case, the identification codes 101, 102 or the code display area 104 on the top screen 100 are always in an active state. In the flowchart of Figure 7, after S101, S102 to S103 are skipped and the system proceeds to S104. As shown in Figure 1, when the reception unit 502 receives a pinch operation for the identification codes 101, 102 or the code display area 104, the display control unit 503 enlarges or reduces the display size of the identification codes 101, 102 or the code display area 104 in response to the pinch operation. If a pinch operation is not accepted (S104; NO or S107; NO), the system proceeds to S112.
[0086] <Second Embodiment> In the first embodiment, an example was shown where the target to be enlarged or reduced in response to a specific operation was the code display area 104 or the identification codes 101 and 102. However, the target to be enlarged or reduced may be the entire screen including the identification codes 101 and 102. In the second embodiment, an example will be described in which the entire screen including the identification codes 101 and 102 is enlarged or reduced in response to a specific operation. Note that the configuration of the payment application 200, the user terminal 2, the store terminal 3, and the electronic payment server 5 in the second embodiment are the same as in the first embodiment, so redundant explanations will be omitted, and the same parts will be denoted by the same reference numerals.
[0087] Figure 9 illustrates the display control by the payment application 200 of the second embodiment. Figure 9(a) shows the initial state of the top screen 100 of the payment application 200, and Figure 9(b) shows the top screen 100D enlarged by a pinch-out operation. The top screen 100 in the initial state is the same as in the first embodiment. In the enlarged top screen 100D shown in Figure 9(b), not only the code display area 104 but the entire screen is enlarged and displayed. That is, areas of the top screen 100 other than the code display area 104 are also enlarged together with the code display area 104. As a result, a part of the top screen 100 in the initial state does not fit within the display range of the display unit 206 and is displayed overflowing. However, the size and position of the code display area 104 are controlled so that it fits within the display range of the display unit 206 even after enlargement.
[0088] (Display control processing) The display control process in the second embodiment will be explained with reference to Figure 10. The process shown in this flowchart is described in the program of the payment application 200 according to the second embodiment, which is installed on the user terminal 2. The program is stored in the memory unit 204, called by the CPU 201, loaded into RAM 203, and executed. When the user operates the startup icon of the payment application 200 and the payment application 200 is started, the CPU 201 starts this process. In the following explanation, the symbol "S" means step.
[0089] In S201, the CPU 201 first obtains screen data 230 of the top screen 100 of the payment application 200 from the storage unit 204 and displays it on the display unit 206 as shown in Figure 9(a). The top screen 100 is the same as in the first embodiment. Also, the size of the code display area 104 in the initial state is the same as in the first embodiment, and is displayed with a predetermined initial size W1 × H1. The overall width size Ws of the top screen 100 in the initial state matches the width size Wd of the display range (entire display area) of the display unit 206. The height size Hs of the top screen 100 in the initial state is a size corresponding to the amount of information. In the example in Figure 9, the height size Hs of the top screen 100 is longer than the height size Hd of the display range of the display unit 206, and the area displayed in the display range is changed by scrolling.
[0090] In S202, the CPU201 accepts an operation on the top screen 100. In the second embodiment, the entire top screen 100 is the target of the operation, and the entire top screen 100 is assumed to be in an active state beforehand and managed to accept specific operations. If an operation is performed on the top screen 100 (S202; YES), the process proceeds to S203.
[0091] In S203, the input unit 207 detects a pinch-out operation on the top screen 100, and when the CPU 201 receives the detection signal from the input unit 207 (S203; YES), the process proceeds to S204. In S204-S205, the CPU 201 enlarges the display size of the entire top screen 100 in conjunction with the pinch-out operation.
[0092] In S204, the CPU201 determines the maximum size of the top screen 100 based on a predetermined maximum ratio αmax. αmax is the same as in the first embodiment and is predetermined as the ratio W2 / Wd of the maximum width size W2 of the code display area 104 to the width size Wd of the display. For example, it is predetermined as αmax = 0.99. Furthermore, αmax is set to a value greater than the ratio α1 = W1 / Wd in the initial state and less than or equal to 1 (α1 < αmax ≤ 1). For the height size H2, the aspect ratio (H1 / W1) of the code display area 104 in the initial state is maintained. That is, the sizes W2 and H2 of the maximum code display area 104 after enlargement are determined by the above-mentioned equations (1) and (2).
[0093] In S205, the CPU 201 expands the entire top screen 100 by ΔW in the width direction and ΔH in the height direction in conjunction with the pinch-out operation, while maintaining the aspect ratio (H1 / W1) of the code display area 104. At this time, the CPU 201 displays the expanded top screen 100D so that the center of the code display area 104 in the width direction coincides with the center of the display in the width direction. The CPU 201 also displays the expanded top screen 100D so that the upper and lower edges of the code display area 104 are displayed on the display. When the size of the code display area 104 reaches the maximum size W2×H2, the display control unit 503 controls it so that it does not expand any further even if a pinch-out operation is performed, and maintains the maximum size. In this way, by limiting the maximum size of the expanded code display area 104 to be less than or equal to the display size, the identification codes 101 and 102 are expanded so that they fit within the display range of the display unit 206. As a result, they are expanded to an appropriate size that allows for code reading, improving visibility. Even if the user does not perform a pinch-out operation precisely, identification codes 101 and 102 will not extend beyond the display area, thus improving the usability of the user terminal 2.
[0094] Furthermore, the CPU 201 may adjust the screen brightness according to the display size of the identification code. That is, in response to a pinch-out operation, the CPU 201 controls the screen brightness to increase while enlarging the identification code 101, 102, or the code display area 104. The brightness may be increased in small increments according to the amount of enlargement, or it may be increased to the maximum brightness all at once. This makes it possible to display the identification code on a bright screen suitable for reading the code, further improving visibility.
[0095] When the top screen 100 is enlarged, the input unit 207 detects a pinch-in operation, and in S206, the CPU 201 acquires the detection signal, then the process proceeds to S207. In S207-S208, the CPU 201 reduces the display size of the enlarged top screen 100D in conjunction with the pinch-in operation.
[0096] In S207, the CPU 201 determines the minimum size of the top screen 100. In this embodiment, the CPU 201 sets the width Ws of the top screen 100 in its initial state as the minimum width of the top screen 100. As described above, the width Ws of the top screen 100 in its initial state matches the width Wd of the display unit 206.
[0097] In S208, the CPU 201 reduces the top screen 100D by ΔW in the width direction and ΔH in the height direction in conjunction with the pinch-in operation, using the size determined in S207 as the minimum size. During reduction, the aspect ratio (H1 / W1) of the code display area 104 is maintained. At this time, the CPU 201 displays the reduced top screen 100 so that the center of the code display area 104 in the width direction coincides with the center of the display in the width direction. The CPU 201 also displays the reduced top screen 100 so that the upper and lower edges of the code display area 104 are displayed on the display. If the size of the top screen 100 reaches the initial size Ws×Hs, the display control unit 503 controls the CPU 201 to maintain the initial size Ws×Hs even if a pinch-in operation is performed. In this way, by limiting the reduced size so that it does not fall below the initial size, the screen is reduced to an appropriate size that allows for code reading. This improves usability because the user does not need to perform the pinch-in operation accurately.
[0098] Furthermore, the CPU 201 may adjust the screen brightness according to the display size of the identification code. That is, in response to a pinch-in operation, the CPU 201 controls the screen brightness to decrease as the identification code 101, 102 or the code display area 104 is reduced in size. The brightness may be decreased in small increments according to the amount of reduction, or it may be decreased all at once to the minimum brightness. The minimum brightness may be the brightness in the initial state of the top screen or a predetermined brightness. This allows the screen to be displayed with appropriate brightness in conjunction with the operation. After S208, proceed to S202.
[0099] If an operation is detected in S202, the CPU 201 determines in S203 whether a pinch-out operation was performed. If no pinch-out operation is performed (S203; NO), or if a pinch-out operation is performed and the image is enlarged, but no pinch-in operation is performed (S206; NO), the process proceeds to S209. In S209, the CPU 201 determines whether an operation other than a pinch operation has been entered. If an operation other than a pinch operation is performed, the process proceeds to S210 and the corresponding processing is executed. For example, if the payment button is operated, the process transitions to the payment screen 310. If the scan button is operated, the process transitions to the scan screen 320. In addition, if various buttons or area selection operations are performed, the process transitions to the screen corresponding to that operation, and the process proceeds to the processing on the transitioned screen. If no operation other than a pinch operation is performed, the process returns to S202 and waits for an operation on the top screen 100. If no operation is performed after a predetermined time has elapsed, this flowchart is terminated.
[0100] Figure 9(b) shows the top screen in an enlarged state. As the top screen is enlarged, the code display area 104 is also enlarged, and consequently, the identification codes 101 and 102 displayed within the code display area 104 are also enlarged. In addition, all areas other than the code display area 104 are also enlarged. Some parts of the screen that were displayed in the initial state become outside the display range and are no longer displayed due to the enlargement.
[0101] In the state shown in Figure 9(b), when a pinch-in operation is performed on the top screen 100D, the entire enlarged top screen 100D is reduced to its initial size Ws × Hs shown in Figure 9(a).
[0102] In the flowchart in Figure 10, when zooming in or out, the screen width and height are changed by ΔW and ΔH in response to pinch gestures, but this is not the only option. For example, when a pinch-out gesture is performed, the screen size may change from the initial minimum size to the maximum size in one go, and when a pinch-in gesture is performed, it may change from the maximum size to the initial size in one go. By limiting the display size of the top screen to these two states, zooming in and out can be performed instantly.
[0103] As described above, the payment application 200 of the second embodiment allows for the enlargement or reduction of buttons and information other than the identification code, in addition to the effects of the first embodiment. In this case, the size and layout of the identification code are controlled to fit within the screen, making it possible to change the display size of the identification code without interfering with the reading of the code during payment.
[0104] In the embodiments described above, examples were shown in which the code display area 104 of the top screen 100 is enlarged to a predetermined maximum ratio αmax based on the display size. When only the identification code is enlarged, the code is enlarged to a predetermined maximum ratio αmax so that the width of the identification code (the length in the case of a one-dimensional code) does not exceed the width of the display (the direction perpendicular to the length of the display area of the display unit). As shown in the first embodiment, only the identification code may be enlarged while maintaining the display size of other areas of the top screen, or as shown in the second embodiment, the size of the entire top screen may be enlarged along with the enlargement of the identification code.
[0105] Furthermore, while the entire display screen was enlarged in the second embodiment, the system is not limited to this. A portion of the screen may be fixed in its display, while other areas may be enlarged or reduced in response to pinch gestures. For example, if the fixed display area is the fixed display area 608 at the bottom of the screen, the fixed display area 608 will not be enlarged or reduced even when pinch gestures are performed. As a result, frequently used buttons such as the payment button 109 within the fixed display area 608 will always be displayed without being removed from the display area, improving usability.
[0106] Furthermore, as shown in the first embodiment, when the reception unit 502 receives a second operation different from a specific operation, it changes the identification code 101, 102 or the area 104 containing the identification code to an active state and changes it to a hover display. In this case, if the reception unit 502 receives a specific operation on the screen (top screen 100) where the identification code 101, 102 is displayed, the display control unit 503 may be configured to enlarge or reduce the display size of the entire screen in response to the specific operation. In other words, if the user wants to enlarge or reduce only the identification code 101, 102 or the area 104 containing the identification code, they can perform a pinch operation after a long press operation on the identification code 101, 102 or the area 104 containing the identification code, as in the first embodiment. If the user wants to enlarge or reduce the entire screen, they can perform a pinch operation without long pressing the identification code 101, 102 or the area 104 containing the identification code.
[0107] In this disclosure, when enlarging the identification codes 101, 102, or the identification code display area 104, it is preferable that the display control unit enlarges the identification codes 101, 102, or the code display area 104 so that they do not overlap with other areas. However, the identification codes 101, 102, or the code display area 104 may be enlarged to overlap with other areas. Furthermore, this disclosure is not limited to enlarging or reducing the identification codes displayed on the top screen, but is also applicable to identification codes displayed on other screens.
[0108] Furthermore, as described in the first embodiment above, when a second operation different from a specific operation is received, the display control unit may be configured to change the identification code or the area containing the identification code to an active state, and to accept the specific operation in the active state. The second operation is, for example, a long press operation on the identification code or the area containing the identification code. In the active state, the display control unit performs a hover display that gives a visual change to the identification code or the area containing the identification code. The hover display is a display state that makes the user perceive the target area as floating above the screen, or a change in color, or any other expression that makes the target area appear different from other areas.
[0109] Furthermore, as described in the second embodiment above, the display control unit may enlarge or reduce the identification code by enlarging or reducing the entire screen in response to a specific operation. In this case, not only the identification code but also buttons and information displayed on the screen can be enlarged or reduced, so the screen display can be adjusted to an appropriate size that is easy for the user to see and operate. When enlarging or reducing the entire screen, the display control unit enlarges or reduces the display size of the entire screen so that the identification code fits within the display range of the display unit. Also, in the second embodiment, when a second operation different from the specific operation is received, the display control unit may change the entire screen to an active state and accept the specific operation in the active state. In addition, in the active state, the display control unit may display an indication that the entire screen has become active. That is, when a second operation such as a long press operation is received on the entire screen, the display may change to a display state indicating the active state, accept the specific operation, and then enlarge or reduce the entire screen.
[0110] Furthermore, when the reception unit receives a second operation different from a specific operation, it changes the identification code or the area containing the identification code to an active state. In this case, when the reception unit receives a specific operation on the screen where the identification code is displayed, the display control unit may enlarge or reduce the display size of the entire screen in accordance with the specific operation.
[0111] Furthermore, the display control unit may adjust the screen brightness according to the display size of the identification code. That is, in response to a pinch-out operation, the display control unit may enlarge the identification code or code display area and increase the screen brightness. Conversely, in response to a pinch-in operation, the display control unit may reduce the identification code or code display area and decrease the screen brightness.
[0112] This disclosure allows for the display of a large amount of information within a limited display area while simultaneously adjusting the size of the identification code to a size appropriate for reading. Therefore, it is possible to improve the operability and visibility of payment applications.
[0113] Preferred embodiments of this disclosure have been described above with reference to the attached drawings, but this disclosure is not limited to such examples. For example, the content of buttons and information displayed on the screen, the screen layout, and the processing procedures shown in the flowchart are examples and can be modified as appropriate without departing from the technical idea of this disclosure. Furthermore, it is clear that those skilled in the art can conceive of various modifications or alterations within the scope of the disclosed technical idea, and these will naturally also fall within the technical scope of this disclosure. [Explanation of Symbols]
[0114] 1. Electronic payment system 2. User terminals 100 Top screen 101, 102 Identification Codes 104 Code display area 109 Payment button 200 payment apps 501 Payment Processing Unit 502 Reception Department 503 Display Control Unit
Claims
1. A payment application program that is pre-installed on a terminal device used by a user of electronic payment in order to use electronic payment using an identification code, wherein the terminal device The display unit of the terminal device includes a display control unit that displays the identification code, It functions as a reception unit that receives operations from the user on the terminal device, The display control unit, A payment application program characterized in that, when the reception unit receives a specific operation in which the operation of the fingers and the display size of the identification code are linked, the display size of the identification code is enlarged or reduced in response to the specific operation, and the display size of the identification code is changed in two stages, minimum size and maximum size.
2. The aforementioned specific operation is a pinch-out operation or a pinch-in operation. When the pinch-out operation is received, the display control unit enlarges the display size of the identification code. The payment application program according to claim 1, characterized in that when the pinch-in operation is received, the display control unit reduces the display size of the identification code.
3. A payment application program that is pre-installed on a terminal device used by a user of electronic payment in order to use electronic payment using an identification code, wherein the terminal device The display unit of the terminal device includes a display control unit that displays the identification code, It functions as a reception unit that receives operations from the user on the terminal device, The display control unit, A payment application program characterized in that, when the reception unit receives a specific operation in which the operation of the fingers and the display size of the identification code are linked, the display size of the identification code is enlarged or reduced in response to the specific operation, and the display size of the identification code is continuously changed in conjunction with the specific operation within a range from the minimum size to the maximum size.
4. The aforementioned specific operation is a pinch-out operation or a pinch-in operation. When the pinch-out operation is received, the display control unit enlarges the display size of the identification code. The payment application program according to claim 3, characterized in that when the pinch-in operation is received, the display control unit reduces the display size of the identification code.
5. A payment application program that is pre-installed on a terminal device used by a user of electronic payment in order to use electronic payment using an identification code, wherein the terminal device The display unit of the terminal device includes a display control unit that displays the identification code, It functions as a reception unit that receives operations from the user on the terminal device, The display control unit, When the reception unit receives a specific operation, it enlarges the display size of the identification code in accordance with the specific operation, and when the first area, which is the area containing the identification code, reaches its maximum size, it maintains the maximum size even if the specific operation is performed. A payment application program characterized in that the aforementioned specific operation is a pinch-out operation.
6. A payment application program that is pre-installed on a terminal device used by a user of electronic payment in order to use electronic payment using an identification code, wherein the terminal device The display unit of the terminal device includes a display control unit that displays the identification code, It functions as a reception unit that receives operations from the user on the terminal device, The display control unit, When the reception unit receives a specific operation, it reduces the display size of the identification code in accordance with the specific operation, and when the first area, which is the area containing the identification code, reaches its initial size or minimum size, it maintains the minimum size even if the specific operation is performed. A payment application program characterized in that the aforementioned specific operation is a pinch-in operation.
7. The payment application program according to any one of claims 1 to 6, characterized in that the display control unit enlarges or reduces the display size of the identification code so that the identification code fits within the display range of the display unit.
8. The payment application program according to any one of claims 1 to 6, characterized in that the display control unit enlarges the display size of the identification code so that the display size of the identification code in the longitudinal direction fits within the size in the direction perpendicular to the longitudinal direction of the display range of the display unit.
9. The payment application program according to any one of claims 1 to 6, characterized in that the display control unit reduces the display size of the identification code so as not to fall below the size of the identification code in the initial state.
10. The payment application program according to any one of claims 1 to 6, characterized in that the display control unit enlarges or reduces the display size of the identification code by enlarging or reducing the display size of the entire screen on which the identification code is displayed.
11. The payment application program according to any one of claims 1 to 6, characterized in that the display control unit enlarges or reduces the display size of the identification code on the screen on which the identification code is displayed.
12. The payment application program according to any one of claims 1 to 6, characterized in that the display control unit adjusts the brightness of the screen according to the display size of the identification code.
13. The payment application program according to any one of claims 1 to 6, characterized in that the receiving unit accepts the specific operation when the specific operation is performed on a first area which is an area within the screen where the identification code is displayed that includes the identification code, and also accepts the specific operation when the specific operation is performed on an area within the first area where the identification code is not displayed.
14. The payment application program according to any one of claims 1 to 6, characterized in that the reception unit accepts the specific operation when the specific operation is performed across the inside and outside of a first region which is a region containing the identification code on a screen where the identification code is displayed.
15. The payment application program according to any one of claims 1 to 6, characterized in that the reception unit accepts the specific operation when the specific operation is performed outside the first area, which is an area containing the identification code on the screen where the identification code is displayed.
16. The payment application program according to any one of claims 1 to 6, characterized in that the identification code includes a barcode and a QR code.
17. An information processing device used by a user of electronic payment to utilize electronic payment using an identification code, The display unit of the information processing device includes a display control unit that displays the identification code, It has a reception unit that receives operations from the user on the information processing device, The display control unit, The information processing device is characterized in that, when the reception unit receives a specific operation in which the operation of the fingers and the display size of the identification code are linked, it enlarges or reduces the display size of the identification code in accordance with the specific operation, changing the display size of the identification code in two stages: minimum size and maximum size.
18. An information processing method performed by a computer in an information processing device used by a user of electronic payment in order to use electronic payment using an identification code, The steps include: causing the display unit of the information processing device to display the identification code; A step of receiving an operation from the user on the information processing device, When a specific operation is received in which the operation of the fingers is linked to the display size of the identification code, the display size of the displayed identification code is enlarged or reduced in response to the specific operation, changing the display size of the identification code in two stages: minimum size and maximum size. An information processing method characterized by including
Citation Information
Patent Citations
Determination system, determination method, and program
JP2023127458A