KR20230034874A - Method for providing information and electronic apparatus for performing the same - Google Patents

Abstract

An information providing method of an electronic apparatus according to various embodiments may comprise the steps of: displaying a page including a first area and a second area; checking whether a user input to the page is received; in response to the reception of a first user input, providing a first animation in which the size of the first area is enlarged and the size of the second area is reduced for a first period of time; and in response to the reception of a second user input after the first animation is provided, providing a second animation in which the size of the enlarged first area is reduced and the size of the reduced second area is enlarged for a second period of time shorter than the first period of time. Various other embodiments are possible. Therefore, provided is a user interface having usability improved.

Description

Information provision method and electronic device performing the same {METHOD FOR PROVIDING INFORMATION AND ELECTRONIC APPARATUS FOR PERFORMING THE SAME}

Various embodiments of the present disclosure relate to an information providing method and an electronic device performing the same.

As Internet technology develops and portable terminals such as smart phones and tablet PCs spread, the e-commerce market is commercialized. In particular, as the center of shopping, which was mainly handled offline, has changed to online, the frequency of ordering items necessary for daily life on e-commerce service platforms is increasing.

On the other hand, platforms that provide e-commerce services attempt to induce users to participate in events by notifying users of event information (e.g., benefit information provided when signing up for a specific membership service, information on purchasing benefits of a specific product, etc.) in a more intuitive way. can do.

To this end, a method of displaying event information by exposing a separate pop-up message in a platform providing an e-commerce service or displaying the event information in the form of a banner included in a part of a main page has been conventionally used.

However, this method of displaying event information effectively induces the user to participate in the event in that the event information is no longer provided to the user when the user terminates the display of the pop-up message or moves away from the main page including the banner. It can be difficult to do.

On the other hand, on a platform that provides e-commerce services, a method of continuously exposing event information at a specific location at all times regardless of page changes may be considered, but this is the main task that users want to perform in e-commerce services (e.g., Searching for a product to be sold, checking detailed information of a product, purchasing a specific product, etc.) may interfere with the process itself, and there is a possibility that the user may feel uncomfortable and not use the e-commerce service itself. .

Various embodiments of the present disclosure, in order to solve the above-described problem, consider the characteristics of content information to be provided to the user through a page, and change the size of a specific area where content is displayed based on a user input or only select a portion of the area. An electronic device that performs a method of providing page information in a scrolling and displaying manner is proposed.

An information providing method of an electronic device according to various embodiments includes displaying a page including a first area and a second area; checking whether a user input for the page is received; providing a first animation in which the size of the first area is enlarged and the size of the second area is reduced for a first time in response to receiving a first user input; and after the first animation is provided, in response to receiving a second user input, the size of the enlarged first area is reduced for a second time shorter than the first time, and the size of the reduced second area is reduced. A step of providing a second animation that is enlarged may be included.

An electronic device according to various embodiments includes a communication module; database; and a processor electrically connected to the database, wherein the processor displays a page including a first area and a second area, receives a user input for the page using the communication module, and receives a user input for the page by using the communication module. In response to receiving the input, a first animation in which the size of the first region is enlarged and the size of the second region is reduced for a first time is provided, and after the first animation is provided, a second user input is provided. In response to the reception of, it may be set to provide a second animation in which the size of the enlarged first area is reduced and the size of the reduced second area is increased for a second time period shorter than the first time period.

According to various embodiments, in an e-commerce system, a user interface with improved usability is provided by intuitively adjusting the amount of information of a specific type (eg, event information, user information, etc.) in response to user input. can do.

In addition, based on the importance of each information displayed on the page, a function of emphasizing and displaying specific content information or limiting exposure of specific content information in response to a user input may be provided.

In addition, a method of effectively providing specific information within a range minimizing user's inconvenience can be provided by controlling the speed at which an animation for displaying specific content information by enlarging or contracting it is provided.

In addition, a display control function of content information corresponding to the user's intention may be provided in consideration of the characteristics of the user's input (eg, dragging or scrolling direction, speed, etc.).

1 is a schematic diagram illustrating a financial service providing system according to various embodiments of the present disclosure.
2A is a schematic block diagram of an electronic device according to an embodiment of the present disclosure.
2B is a schematic block diagram of a user terminal according to an embodiment of the present disclosure.
3 is a schematic flowchart of an information providing method of an electronic device according to an embodiment of the present disclosure.
4A and 4B are schematic diagrams for explaining page information provided by an electronic device according to various embodiments of the present disclosure.
5A to 5E are diagrams schematically showing page screens for explaining a method of providing page information according to various embodiments of the present disclosure.
6 and 7 are diagrams schematically showing pages for explaining an information providing method according to an embodiment of the present disclosure.

The terms used in the embodiments have been selected as general terms that are currently widely used as much as possible while considering the functions in the present disclosure, but they may vary depending on the intention or precedent of a person skilled in the art, the emergence of new technologies, and the like. In addition, in a specific case, there are also terms arbitrarily selected by the applicant, and in this case, the meaning will be described in detail in the corresponding description. Therefore, terms used in the present disclosure should be defined based on the meaning of the term and the general content of the present disclosure, not simply the name of the term.

In the entire specification, when a part is said to "include" a certain component, it means that it may further include other components, not excluding other components unless otherwise stated. In addition, terms such as "...unit" and "...module" described in the specification mean a unit that processes at least one function or operation, which is implemented as hardware or software, or a combination of hardware and software. It can be.

The expression of “at least one of a, b, and c” described throughout the specification means 'a alone', 'b alone', 'c alone', 'a and b', 'a and c', 'b and c' ', or 'all of a, b, and c'.

A “terminal” referred to below may be implemented as a computer or portable terminal capable of accessing a server or other terminals through a network. Here, the computer includes, for example, a laptop, desktop, laptop, etc. equipped with a web browser, and the portable terminal is, for example, a wireless communication device that ensures portability and mobility. , IMT (International Mobile Telecommunication), CDMA (Code Division Multiple Access), W-CDMA (W-Code Division Multiple Access), LTE (Long Term Evolution), etc. It may include a handheld-based wireless communication device.

Hereinafter, with reference to the accompanying drawings, embodiments of the present disclosure will be described in detail so that those skilled in the art can easily carry out the present disclosure. However, the present disclosure may be implemented in many different forms and is not limited to the embodiments described herein.

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

In describing the embodiments, descriptions of technical contents that are well known in the technical field to which the present invention pertains and are not directly related to the present invention will be omitted. This is to more clearly convey the gist of the present invention without obscuring it by omitting unnecessary description.

For the same reason, in the accompanying drawings, some components are exaggerated, omitted, or schematically illustrated. Also, the size of each component does not entirely reflect the actual size. In each figure, the same reference number is assigned to the same or corresponding component.

Advantages and features of the present invention, and methods for achieving them, will become clear with reference to the embodiments described below in detail in conjunction with the accompanying drawings. However, the present invention is not limited to the embodiments disclosed below, but may be implemented in various different forms, and only the present embodiments make the disclosure of the present invention complete, and common knowledge in the art to which the present invention belongs It is provided to fully inform the holder of the scope of the invention, and the present invention is only defined by the scope of the claims. Like reference numbers designate like elements throughout the specification.

At this time, it will be understood that each block of the process flow chart diagrams and combinations of the flow chart diagrams can be performed by computer program instructions. These computer program instructions may be embodied in a processor of a general purpose computer, special purpose computer, or other programmable data processing equipment, so that the instructions executed by the processor of the computer or other programmable data processing equipment are described in the flowchart block(s). It creates means to perform functions. These computer program instructions may also be stored in a computer usable or computer readable memory that can be directed to a computer or other programmable data processing equipment to implement functionality in a particular way, such that the computer usable or computer readable memory The instructions stored in are also capable of producing an article of manufacture containing instruction means that perform the functions described in the flowchart block(s). The computer program instructions can also be loaded on a computer or other programmable data processing equipment, so that a series of operational steps are performed on the computer or other programmable data processing equipment to create a computer-executed process to generate computer or other programmable data processing equipment. Instructions for performing processing equipment may also provide steps for performing the functions described in the flowchart block(s).

Additionally, each block may represent a module, segment, or portion of code that includes one or more executable instructions for executing specified logical function(s). It should also be noted that in some alternative implementations it is possible for the functions mentioned in the blocks to occur out of order. For example, two blocks shown in succession may in fact be executed substantially concurrently, or the blocks may sometimes be executed in reverse order depending on their function.

1 is a schematic diagram illustrating an information providing system according to various embodiments of the present disclosure.

The information providing system 10 according to various embodiments may include an electronic device 100 and at least one user terminal 200 connected through a network 50 .

According to various embodiments, the electronic device 100 is a device that performs various functional processes in order to provide various types of information related to the sale of products to a user (buyer) in e-commerce, and is connected to the network 50 from the user terminal 200. ), it is possible to perform preset operations based on a user input received through, and to provide sales-related information to the user terminal 200 accordingly.

For example, the electronic device 100 may include a plurality of computer systems or computer software implemented as a network server. For example, the electronic device 100 is a computer system that is connected to a sub-device that can communicate with another network server through a computer network such as an intranet or the Internet, receives a task execution request, performs the task, and provides an execution result. and computer software. In addition, it can be understood as a broad concept including a series of application programs that can operate on a network server and various databases built therein. For example, the electronic device 100 uses a network server program provided in various ways according to an operating system such as DOS, Windows, Linux, UNIX, or MacOS. can be implemented.

According to various embodiments, the electronic device 100 may process information related to product sales in e-commerce, store or manage related data in a database, and display the information related to product sales on a page (eg, a web page). It can be configured in the form of a -page, app-page) and provided to the user (buyer) through the user terminal 200.

According to various embodiments, the electronic device 100 provides various information related to product sales (eg, detailed information such as the type, price, and manufacturer of a product sold, review information, information related to a user's participation in an event (or membership subscription), and discounts. Information, product information added by the user to the shopping cart, etc.) that provides data related to the display screen in the form of a web page or a user interface (eg, an app page) displayed through an application installed on the user terminal 200. It can function as an end server.

The network 50 connects the electronic device 100 and a user terminal 200 (eg, a buyer terminal, a seller terminal, a manager terminal, etc.), or the electronic device 100 and an external device (eg, a logistics management server, etc.). can play a role in For example, the network 50 may provide an access path so that the user terminal 200 or an external device may be connected to the electronic device 100 to transmit/receive packet data.

For example, the user terminal 200 may be connected to the electronic device 100 or other external devices through the network 50 to transmit/receive product sales related information or user input information implementing electronic commerce. In addition, the electronic device 100 may store information received from the user terminal 200 or another external device in a database or transmit the information stored in the database to the user terminal 200 or an external device.

For example, the electronic device 100 may include an electronic commerce operation server that provides a platform for electronic commerce (online store). Specifically, the electronic device 100 may provide a program in the form of an application for using an online store to the user terminal 200, and the user (eg, a buyer) executes the application in the user terminal 200 to sell. You can check information related to the product you are using or purchase a specific product. Meanwhile, the electronic device 100 may provide information in the form of a web-page through a browser in addition to the method of providing information to the user terminal 200 in the form of an app-page through an application, and the information displayed through the app-page It is possible to set different information displayed through information and web-page.

Meanwhile, in one embodiment, at least some of the functions that can be processed by the electronic device 100 may be directly implemented through the user terminal 200 . For example, a user may receive a program in the form of an application through the network 50 and install and use the program in the user terminal 200. Some can be done instead.

The information providing system 10 according to various embodiments may be implemented as a single physical device or may be implemented in a manner in which a plurality of physical devices are organically combined. For example, some of the functions provided by the electronic device 100 may be implemented by one physical device, and some of the functions provided by the electronic device 100 may be implemented by other physical devices. For example, one physical device may be implemented as part of the electronic device 100, and another physical device may be implemented as part of the user terminal 200 or other external devices. In some cases, each component included in the information providing system 10 is distributed and arranged in different physical devices, and the distributed components are organically combined to form the information providing system 10 of the present disclosure. It may be implemented to perform functions and operations.

2A is a schematic block diagram of an electronic device according to an embodiment of the present disclosure.

Referring to FIG. 2A , an electronic device 100 (eg, a server) according to various embodiments may include at least one of a processor 110, a database 120, and a communication module 130.

The electronic device 100 may correspond to a device providing an e-commerce service. For example, the electronic device 100 may obtain predetermined product sales-related information from a user (eg, a seller), process the information, and provide the information so that the buyer can check the product sales-related information. For example, the electronic device 100 may mediate so that a buyer can purchase a predetermined product sold by a seller based on a product purchase request input (and payment input) received from a specific user terminal 200 (eg, a buyer terminal). there is. For example, the electronic device 100 may store and manage product sales related information in the database 120 .

The processor 110 may process various functions for performing an information providing method according to various embodiments of the present disclosure, and other components of the electronic device 100 (eg, a database 120, a communication module ( 130)), it is possible to control the overall operation of the components.

According to an embodiment, the processor 110 may provide page information related to an e-commerce service to the user terminal 200 . For example, the processor 110 may classify areas constituting a page according to the type of content displayed through the page. For example, a page provided by the processor 110 may include a first area displaying content of a first type and a second area displaying content of a second type.

The processor 110 may check whether a user input is received from the user terminal 200 by controlling the communication module 130 . Also, the processor 110 may identify characteristics of the user input (eg, a touch input point, a touch drag direction, speed, etc.).

When a user input is received, the processor 110 configures predetermined animations related to the size change of the first area and the second area of the page in response to receiving the user input and provides page information.

In addition to this, the processor 110 may implement various functions related to providing information according to various embodiments of the present disclosure.

The database 120 is a data structure implemented in a predetermined storage space of the electronic device 100, and functions such as storing, searching, deleting, editing, or adding data can be freely performed. For example, the database 120 may have fields or components for processing functions such as data storage, search, deletion, editing, or addition.

The database 120 may store data related to various functions of the electronic device 100 . For example, the database 120 may store various data related to information providing methods according to various embodiments of the present disclosure, and may store instructions or data for an execution operation of the processor 110 .

The communication module 130 transmits information stored in the database 120 of the electronic device 100 or predetermined information processed by the processor 110 to another device (eg, the user terminal 200) or from another device. A function of receiving information may be performed by the electronic device 100 . For example, the communication module 130 may receive predetermined user input information from the user terminal 200 . For example, the communication module 130 may include a transceiver for transmitting and receiving information.

2B is a schematic block diagram of a user terminal 200 according to an embodiment of the present disclosure.

Referring to FIG. 2B , a user terminal 200 according to an embodiment may include at least one of a processor 210, a memory 220, a communication module 230, and a display 240.

The processor 210 may perform overall control in relation to execution of various functions of the user terminal 200 . The processor 210 is electrically connected to at least one of other components of the user terminal 200, for example, the memory 220, the communication module 230, and the display 240, and uses each of the components in various ways. functions can be implemented.

For example, the processor 210 may receive an application or program related to purchasing an online product using the communication module 230 (eg, a transceiver) and store related data in the memory 220 . In addition, the processor 210 displays a user interface screen related to the application or program through the display 240 (eg, a touch screen panel), or obtains various user input information and uses another device (eg, a touch screen panel) through the communication module 230. It can be transmitted to the electronic device 100). For example, the display 240 according to an embodiment may correspond to a configuration that performs both functions of an input module and an output module.

Meanwhile, the user terminal 200 may further include a separate input module such as a mouse, keyboard, or joystick in addition to the display 240 .

3 is a schematic flowchart of an information providing method of an electronic device according to an embodiment of the present disclosure.

Referring to FIG. 3 , an information providing method according to various embodiments may include, in operation 310, providing page information including a first area and a second area.

For example, the electronic device 100 (eg, the processor 110 of the electronic device 100) provides page (eg, app-page, web-page) information to the user terminal 200 in step 310, , page information may be displayed through the display 240 included in the user terminal 200 .

For example, the page may include a first area and a second area. Here, the first area may include an area where content corresponding to user information is displayed, and the second area may include an area where content corresponding to product sales information is displayed.

In the information providing method according to various embodiments, in step 320, a user input for a page may be received.

For example, the electronic device 100 (eg, the processor 110 ) may determine whether a predetermined user input is received from the user terminal 200 through the communication module 130 .

For example, the user input received from the user terminal 200 may include a touch input on one area of the page, a touch input on one area of the page, and then moving in a predetermined direction while maintaining the touch. It may include at least one of a touch drag input that is used, or a scrolling input using a mouse wheel or the like. For example, in relation to receiving a user input, the electronic device 100 may check where on the page a touch input or a touch drag input corresponding to the user input was received, in which direction the drag was performed, and the drag speed. there is.

Meanwhile, in step 330, the electronic device 100 (eg, the processor 110) may provide animation related to the size change of the first area and the second area in response to receiving a specific user input.

According to an embodiment, the electronic device 100 may provide a first animation for enlarging the size of the first area and reducing the size of the second area in response to receiving the first user input. For example, the size by which the second area is reduced may correspond to the size by which the first area is enlarged. For example, the second area may be reduced by the same size as the first area is enlarged. For example, in the first animation, the size expansion of the first area and the reduction in size of the second area may gradually appear in the form of a fade-in of the enlarged first area and a fade-out of the reduced second area.

According to an embodiment, after the first animation is provided in response to the reception of the first user input, when a second user input is received, the electronic device 100 reduces the size of the enlarged first region, A second animation for enlarging the size of the second region may be provided. In this case, the size by which the second area is enlarged may correspond to the size by which the first area is reduced. For example, in the second animation, the size expansion of the second area and the reduction in size of the first area may gradually appear in the form of a fade-in of the enlarged second area and a fade-out of the reduced first area.

For example, in one embodiment, all of the first area disappears through the second animation, and all areas where the first area was displayed may be replaced with the second area. For example, the second animation may be provided for a second time (eg, about 0.2 second) shorter than the first time (eg, about 0.4 second) during which the first animation is provided.

Meanwhile, according to an embodiment, the first user input is a touch drag input (or scrolling input) starting from the first area and moving away from the second area, or starting from the second area and moving away from the first area. It may correspond to a touch drag input (or scrolling input) directed in a direction. In addition, the second user input is a touch drag input (or scrolling input) starting from the first area and moving in a direction closer to the second area, or starting from the second area and moving in a direction closer to the first area. It may correspond to a touch drag input (or a scrolling input).

According to one embodiment, in step 330, the electronic device 100 responds to a touch drag input (or scrolling input) directed in a direction starting from the second area and approaching the first area, that is, toward the first area. When a corresponding user input is received, another animation operation may be performed based on a state before the user input is received. For example, the electronic device 100 may differently determine an animation operation to be provided based on whether an animation (eg, a first animation) in which the first region is expanded is previously provided before the user input is received. For example, the second area may include a 2-1 area positioned adjacent to the first area and a 2-2 area positioned relatively far from the first area. Before receiving a user input corresponding to a touch drag input (or scrolling input) directed in a direction in which the first area and the second area come closer, the electronic device 100 may perform an animation (eg, an animation in which the size of the first area is enlarged) : 1st animation) is not previously provided, an animation in which the size of the first area is reduced and the size of the second area is enlarged in response to the reception of the user input is provided, but the size of the 2-2 area is An animation in which the size of the 2-1 area is enlarged and the size of the 2-1 area is reduced together with the first area may be provided. On the other hand, before the user input is received, if an animation (eg, a first animation) in which the size of the first region is enlarged is provided and the size of the first region is enlarged, the electronic device 100 An animation may be provided in which the size of the second area is enlarged in response to the user input, while the size of the 2-1 area is kept the same and only the size of the 2-2 area is enlarged.

According to another embodiment, the electronic device 100 may determine a touch-drag speed or a scrolling speed in relation to the received user input, and provide another animation based on the speed. For example, when the dragging speed (or scrolling speed) of the user input is greater than or equal to a set size, the electronic device 100 provides an animation for changing the size of the first area and the second area in response to the dragging (or scrolling) direction. In addition, the content displayed in the second area may be moved and displayed in a scrolling manner. On the other hand, when the drag speed (or scrolling speed) of the user input is less than the set speed, the electronic device 100 does not provide animation related to the size change of the first area and the second area, and the existing size is reduced. In the maintained state, only the content displayed in the second area may be moved and displayed in a scrolling manner corresponding to the dragging (or scrolling) direction. For example, the set speed may be about 200mbp.

4A and 4B are schematic diagrams for explaining page information provided by an electronic device according to various embodiments of the present disclosure.

Referring to FIG. 4A , in the electronic device 100 according to an embodiment, a page including a first area B1 and second areas A1, A2, and A3, as shown by identification number 310, is a user terminal 200. ), page information may be provided to the user terminal 200.

For example, the first area B1 may correspond to the upper part of the page, and the second areas A1, A2 and A3 may correspond to the lower part of the page.

For example, corners of the second regions A1 , A2 , and A3 contacting the first region B1 may have a rounded shape.

In one embodiment, the first area B1 corresponds to an area displaying a first type of content corresponding to user information, and the second areas A1, A2, and A3 correspond to second areas corresponding to product sales related information. It may correspond to an area displaying tangible content. In another embodiment, the first area B1 may correspond to an area displaying content corresponding to information on a specific event related to product sales.

According to various embodiments, the electronic device 100 starts from a specific point in the second areas A1, A2, and A3 on the page shown by identification number 310 of FIG. When a first user input corresponding to a touch drag input that is dragged in a direction opposite to the direction toward which the user is heading is received, the size of the first area B1 is enlarged and the size of the second areas A1, A2, and A3 is reduced. By providing the first animation, a page such as identification number 320 can be changed and displayed. In this case, the first type of content corresponding to user information or event-related information may be displayed in more detail in the enlarged first area B1 of the identification number 320 . According to one embodiment, the content displayed in the enlarged first area B1 of 320 may be changed based on whether a period set for a specific event has elapsed. For example, during the event period, content for participating in the event is provided in the enlarged first area B1, and when the event period has elapsed, content related to membership service subscription is provided in the enlarged first area B1. can For example, when the user participates in the event during the event period, the electronic device 100 displays membership service subscription-related content displayed on the enlarged first area B1 after the event period elapses and the event ends. Information on benefits acquired by the user through event participation (eg, cumulative discount details, delivery cost benefits, etc.) may also be displayed. Meanwhile, in the first area B1 in a reduced state, such as the page of identification number 310, at least some of the same contents may be displayed regardless of whether the event period has passed or not.

In addition, in one embodiment, the second regions A1, A2, and A3 maintain a rounded shape in a direction opposite to the direction toward the first region B1, with outer portions contacting the first region B1 maintained as a whole. You can move in the same direction as the dragging direction. Through this, the user can indirectly recognize that the second areas A1, A2, and A3 have not disappeared, but have moved in the drag input direction in response to the user input, and the second areas A1, A2, and A3 Intuitively, it makes sense that to zoom in again, you'd just have to input dragging/scrolling in the opposite direction.

Next, on the same page as the identification number 320, the second user corresponding to a touch drag input starting from a specific point of the second areas A1, A2, and A3 and dragging in the direction toward which the first area B1 is heading. When an input is received, the electronic device 100 provides a second animation for reducing the size of the enlarged first area B1 and enlarging the size of the second areas A1, A2, and A3, thereby displaying the identification number 330. It can be changed to the same page as In this case, the second animation may be provided for a second time period shorter than the first time period during which the first animation is provided, and the first area B1 is completely reduced according to the second animation, so that the second areas A1, A2, All can be replaced with A3). For example, the second animation may be provided for a second time (eg, about 0.2 second) shorter than the first time (eg, about 0.4 second) during which the first animation is provided. Through this, when the size of the first area B1 is increased, the content corresponding to the first area B1 can be exposed to the user for a relatively long time, and when the size of the first area B1 is reduced, the content corresponding to the first area B1 can be exposed to the user for a relatively short time. While the size change animation is provided, it is possible to prevent the user from feeling stuffy.

Meanwhile, in one embodiment, the second areas A1, A2, and A3 may include the 2-1 area A1 and the 2-2 area A2. For example, while the electronic device 100 provides a first animation changing from identification number 310 to identification number 320 or a second animation changing from identification number 320 to identification number 330, the 2-1 area A1 The size of can be kept constant without being changed, and only the size of the 2-2 area A2 can be reduced or enlarged for display. However, as shown in FIG. 4A, the 2-1 area A1 and the 2-2 area A2 respond to the size change of the first area B1 according to the provision of the first animation and the second animation. Correspondingly, the displayed position on the page may be changed.

Meanwhile, in one embodiment, the second areas A1, A2, and A3 may further include a 2-3 area A3 in addition to the 2-1 area A1 and the 2-2 area A2. The second-third area may correspond to an area in which a size and a displayed position on a page are maintained constant regardless of receiving a user input.

According to an embodiment, the electronic device 100 responds to receiving a user input of touching a point of the first area B1 in addition to a user input corresponding to a touch drag input or a scrolling input using a mouse wheel, and A first animation or a second animation may be provided. For example, as shown in FIG. 4A , in the first area B1 of the page, a display unit (eg, v shape) configured to receive an input for enlarging the first area B1 or the first area B1 ) may include a display unit configured to receive an input for reducing the size (eg, ^ shape or x shape), and the electronic device 100 receives a touch input corresponding to the display unit, and the first An animation or a second animation may be provided and the page shape may be changed. In another example, the electronic device 100 may be configured to always provide the first animation or the second animation when a touch input is applied to the first area B1, regardless of whether the touched point corresponds to the aforementioned display unit. there is. Meanwhile, according to an embodiment, the electronic device 100 may be configured to provide the first animation or the second animation when receiving an input of briefly touching a point of the first region B1 (single tap) once. However, it is not limited thereto, and may be set to provide the first animation or the second animation when an input of consecutively touching twice (double tap) or long touching (long touch) is received.

Referring to FIG. 4B , the electronic device 100 according to an embodiment displays a page including a first area B1 and second areas A1, A2, and A3, and receives an identification number 340 for the page. As shown in , when a third user input corresponding to a touch drag input starting from a specific point of the second areas A1, A2, and A3 and dragging in the direction toward which the first area B1 is directed is received, the input Correspondingly, by providing an animation that reduces the size of the first area B1 and enlarges the size of the second areas A1, A2, and A3, it goes through the form of a page such as the identification number 350 and the form of a page such as the identification number 360. It can be displayed by changing it.

For example, the third user input may correspond to a touch and drag input substantially similar to the second user input described with reference to identification number 320 of FIG. Before an input is received, different animations may be provided based on whether the first area B1 is currently in an enlarged state as the first animation is provided.

For example, as shown in identification number 340 of FIG. 4B , when the third user input is received in a state in which the first area B1 is not enlarged, the electronic device 100 operates as shown in identification number 350. Likewise, an animation may be provided to reduce the size of the first area B1 and enlarge the size of the second areas A1, A2, and A3. Meanwhile, the 2-1 area A1 corresponding to a position adjacent to the first area B1 among the second areas A1, A2, and A3, while the animation is provided, the first area B1 , and the 2-2 area A2 corresponding to a position relatively far from the first area B1 is, by the animation, the first area B1 and the 2-1 area ( Corresponding to the decrease in the size of A1), its size may be enlarged. In addition, as the sizes of the first area B1 and the 2-1 area A1 gradually decrease while the animation is provided, as shown in identification number 360, they completely disappear, and their positions are located in the 2-2nd area A1. All may be replaced with area A2.

In addition, in the embodiment, the electronic device 100, as shown by the identification number 360, is located at a point in the second areas A2 and A3 on a page where the first area B1 and the 2-1 area A1 have completely disappeared. When receiving a fourth user input that starts and is dragged in a direction opposite to the direction in which the existing first area B1 and the 2-1 area A1 are located, an identification number 370 corresponds to the fourth user input. As shown, the 2-1 area A1 may be exposed on the page again, but the first area B1 may not be exposed. For example, the re-exposure of the 2-1 area A1 may be gradually enlarged and displayed in the form of an animation. At this time, the 2-2 area A2 is moved and displayed in a direction away from the 2-1 area A1. , The shape of the 2-3 area A3 may be maintained regardless of animation.

For example, in the page, the first area B1 is the content that has the lowest importance in providing e-commerce services (e.g., user information (user's rating information, service subscription information, etc.), event information (specific Event information for inducing service subscription, service benefit information, etc.)) may correspond to the area displayed, and the 2-1 area (A1) has a higher importance than the content displayed in the first area (B1), but the second -2 Content that is less important than the contents displayed in area A2 (eg, detailed information related to product sales, information related to search results of sold products, etc.) (eg, search tab to provide a product search function, etc.) may correspond to the displayed area. In addition, the 2nd-3rd areas (A3) provide the ability to enter the most important content (e.g., main page, preferences page, shopping cart page, etc.) that needs to be continuously provided to the user in any situation. may correspond to an area where a shortcut icon, etc.) is displayed.

The electronic device 100 according to various embodiments provides page information that enlarges or reduces (or excludes) a specific region in response to a user input in consideration of the importance of each region of the page, thereby providing more intuitive and improved usability. An interface can be presented to the user.

Meanwhile, in one embodiment, the electronic device 100, in addition to a user input of a touch drag input or a scrolling input method using a mouse wheel, receives an animation described with reference to FIG. 4B in response to receiving a user input of touching a specific point. can also provide. For example, the electronic device 100 may provide an animation changing from the identification number 340 to the identification numbers 350 and 360 when a touch input is detected at a specific location of the second areas A1, A2, and A3. In another example, the electronic device 100 may include a specific display unit (eg, ^ shape) configured to receive an input for reducing the size of a designated area (eg, the first area B1) among the second areas A1, A2, and A3. It goes without saying that the animation may be provided as a touch input (eg, a short touch, a long touch, a double touch, etc.) corresponding to (not shown) is received.

5A to 5E are diagrams schematically showing page screens for explaining a method of providing page information according to various embodiments of the present disclosure.

Referring to FIGS. 5A to 5E , a page provided to the user terminal 200 by the electronic device 100 may include an area A1, an area A2, and an area A3 displaying content having different characteristics, respectively. .

In FIG. 5A , the electronic device 100 may receive a drag input or scrolling input starting from area A2 and moving toward area A1 , and in response to receiving the input in FIGS. 5B and 5C , the electronic device 100 may receive a drag input or a scrolling input. , it is possible to provide an animation of reducing area A1 and enlarging area A2. For example, the electronic device 100 may ignore a touch drag input or a scrolling input starting from area A1 or area A3 and may not perform a separate operation.

According to an embodiment, the electronic device 100 may not reduce the area A1 when the speed of the drag input (or scrolling input) is less than the set size, and the speed of the drag input (or scrolling input) is the set size. In this case, the area A1 may be reduced and the size of the area A2 may be enlarged corresponding to the size of the reduced area A1. For example, the set size may be about 200mbp.

Meanwhile, the electronic device 100 gradually reduces and displays the size of area A1 as shown in FIG. As a result, as shown in FIG. 5C , all areas where the existing A1 area was displayed except for the A1 area can be displayed by replacing them with the A2 area.

In this process, the content displayed in the area A1 may be integrally reduced and displayed corresponding to the rate at which the size of the area A1 is reduced, as shown in FIG. 5B. On the other hand, the content displayed in area A2 can maintain the same size regardless of the rate at which the size of area A2 is enlarged, and only the position where the content is displayed on the enlarged area A2 moves in the drag input direction corresponding to the user input. You can move by scrolling.

In FIG. 5D , when the electronic device 100 receives a user input of a drag input or a scrolling input starting from area A2 and directed in a direction opposite to the position where the existing area A1 was displayed, in FIG. 5E , the electronic device 100 ) may provide an animation in which the reduced area A1 is enlarged and displayed and the enlarged area A2 is reduced and displayed in response to the user input. In this case, the time for providing the animation in which the area A1 is enlarged and displayed again may be shorter than the time in which the animation in which the area A1 is reduced and displayed is provided.

Meanwhile, the area A3 of the page may maintain a constant size regardless of receiving a user input, as shown in FIGS. 5A to 5E .

For example, according to various embodiments, area A1 may correspond to an area displaying contents such as a search tab for providing a product search function, and area A2 displays contents such as detailed product information and sales product recommendation information. area, and area A3 may correspond to an area where a predetermined icon is displayed.

According to the provision of the first animation and the second animation, the sizes of areas A1 and A2 may be enlarged or reduced, and the size of area A3 may be maintained without being enlarged or reduced. In addition, according to the provision of the first animation and the second animation, the size of the content displayed in the area A1 may also be enlarged or reduced corresponding to the size of the area A1, and the size of the content displayed in the area A2 may be A2. Regardless of the change in the size of the area, it is maintained constant, but the position can be changed and displayed in a scrolling manner.

6 and 7 are diagrams schematically showing pages for explaining an information providing method according to an embodiment of the present disclosure.

Referring to FIGS. 6 and 7 , the electronic device 100 according to various embodiments may provide page information including a first area B1 and second areas A1, A2, and A3.

For example, the electronic device 100 may perform a user input corresponding to a touch input on a point of the first area B1 or a touch drag input (or scrolling input) starting from the second areas A1, A2, and A3. ), page information may be provided so that the size of the first area B1 and the size of the second areas A1, A2, and A3 are changed and displayed.

For example, on a page including the first area B1 and the second areas A1, A2, and A3 indicated by identification number 410 in FIG. 6, the electronic device 100 touches a predetermined first area B1. When an input is received, as shown in identification number 420, the first area B1 is enlarged and displayed, and the second areas A1, A2, and A3 corresponding to the enlargement of the first area B1. can be reduced and excluded from display.

For example, the content displayed in the enlarged first area B1 from the identification number 420 includes information similar to the content displayed in the first area B1 from the identification number 410, but more specific user information or events. It may correspond to content corresponding to information. For example, the content displayed in the enlarged first area B1 of the identification number 420 may include link information for switching to another page for the user information or event information, and the first area B1 may be A display unit capable of switching to the two areas A1, A2, and A3 (eg, an “X” shape, a “continue shopping” button unit, etc.) may be included. The electronic device 100 converts to and displays a page for the user information or event information according to a user input for the page of the identification number 420, or expands the second areas A1, A2, and A3 such as the identification number 430. pages can be displayed.

For another example, the electronic device 100, as shown by identification number 440 in FIG. 7 , on a page including the first area B1 and the second areas A1, A2, and A3, regardless of user input. While the size and contents of the first area B1 are fixed and displayed, a touch input (eg, single tap, double tap) to the display unit (eg, “X” shape) for deleting the display of the first area B1 is performed. According to reception of a tap or long touch, as shown in identification number 450, the second areas A1, A2, and A3 except for the first area B1 may be enlarged and displayed. For example, the content displayed in the first area (B1) in the identification number 440 may correspond to benefit information according to the user's event subscription (eg, "Member Kim OO is free shipping + 7 benefits"), and second Contents displayed in the regions A1, A2, and A3 may correspond to various information related to products for sale, such as recommended product-related information, product search result information, detailed information of products for sale, and shopping cart list information.

For example, the electronic device 100 may provide different animations according to the shape of a page provided from the user terminal 200 in consideration of information providing compatibility with the user terminal 200 . For example, in one embodiment, when a page is displayed in the form of an app-page through an application on the user terminal 200, the electronic device 100 may provide the animation described with reference to FIGS. 4A and 4B in response to a user input. However, when a page is displayed in a web-page form through a web browser in the user terminal 200, it may be provided in the form of a page shown in FIG. 6 or 7 in response to a user input.

Meanwhile, the size change of the first area B1 and the second area A1, A2, and A3 in FIGS. 6 and 7 is not performed by a gradual animation operation in the form of fade-in or fade-out, but the size is immediately changed. may be displayed.

According to another embodiment, the electronic device 100 displays FIGS. 4A and 4B when a specific event is in progress in relation to page information provided to the user terminal 200 or when the user has not subscribed to a predetermined membership. User information or content corresponding to an event or service benefit information may be displayed in the first area B1 in the manner described with reference to FIG. 6 or 7 after the event has ended or the user has completed membership registration. Contents corresponding to event end guide information or membership benefit information provided to the user may be displayed in the first area B1 in the manner described with reference to FIG.

According to another embodiment, when a specific event is in progress, the electronic device 100 receives a user input set to enlarge the size of the first area B1, and displays the image on the enlarged first area B1. Guidance content related to event registration may be displayed. When the electronic device 100 intends to provide guide contents related to the event subscription in response to a user input during the event period, the electronic device 100 sets the second areas A1, A2, and A3 to the first area in the manner described with reference to FIG. 4A. After displaying by sliding in a direction away from (B1), the event subscription-related content can be displayed on the enlarged first area (B1). For example, in one embodiment, the specific event may correspond to a free participation event for a paid membership service. Meanwhile, when the event ends because the event period has elapsed, the electronic device 100 receives a user input set to enlarge the size of the first area B1 and displays membership on the enlarged first area B1. Content for guiding service subscription may be displayed. When the electronic device 100 intends to provide content related to membership service subscription in response to a user input as the event period elapses, the electronic device 100 removes all of the second areas A1, A2, and A3 in the manner described with reference to FIG. 6. Membership service subscription-related content can be displayed on the first area B1, which is replaced by area 1 (B1) and occupies the entire screen of the page. However, even in this case, the content displayed in the first area B1 of identification number 410 and the content displayed in the enlarged first area B1 of identification number 420 are composed of the same background color, the same image, or the same text color. Accordingly, the continuity of the first area B1 may be shown to the user.

On the other hand, preferred embodiments of the present invention have been disclosed in the present specification and drawings, and although specific terms have been used, they are only used in a general sense to easily explain the technical content of the present invention and help understanding of the present invention. It is not intended to limit the scope of the invention. It is obvious to those skilled in the art that other modified examples based on the technical idea of the present invention can be implemented in addition to the embodiments disclosed herein.

An electronic device or user terminal according to the above-described embodiments includes a processor, a memory for storing and executing program data, a permanent storage unit such as a disk drive, a communication port for communicating with an external device, a touch panel, and a key ( key), user interface devices such as buttons, and the like. Methods implemented as software modules or algorithms may be stored on a computer-readable recording medium as computer-readable codes or program instructions executable on the processor. Here, the computer-readable recording medium includes magnetic storage media (e.g., read-only memory (ROM), random-access memory (RAM), floppy disk, hard disk, etc.) and optical reading media (e.g., CD-ROM) ), and DVD (Digital Versatile Disc). A computer-readable recording medium may be distributed among computer systems connected through a network, and computer-readable codes may be stored and executed in a distributed manner. The medium may be readable by a computer, stored in a memory, and executed by a processor.

This embodiment can be presented as functional block structures and various processing steps. These functional blocks may be implemented with any number of hardware or/and software components that perform specific functions. For example, an embodiment is an integrated circuit configuration such as memory, processing, logic, look-up table, etc., which can execute various functions by control of one or more microprocessors or other control devices. can employ them. Similar to components that can be implemented as software programming or software elements, the present embodiments include data structures, processes, routines, or various algorithms implemented as combinations of other programming constructs, such as C, C++, Java ( It can be implemented in a programming or scripting language such as Java), assembler, or the like. Functional aspects may be implemented in an algorithm running on one or more processors. In addition, this embodiment may employ conventional techniques for electronic environment setting, signal processing, and/or data processing. Terms such as “mechanism”, “element”, “means” and “composition” may be used broadly and are not limited to mechanical and physical components. The term may include a meaning of a series of software routines in association with a processor or the like.

The foregoing embodiments are merely examples and other embodiments may be implemented within the scope of the claims described below.

Claims (1)

In the information providing method of the electronic device,
displaying a page including a first area and a second area;
checking whether a user input corresponding to the page is received;
providing a first animation in which a size of the first area is enlarged and a size of the second area is reduced for a first time, based on reception of a first user input; and
Based on reception of a second user input confirmed after the first animation is provided, for a second time shorter than the first time, the size of the enlarged first region is reduced and the size of the reduced second region is reduced. A method of providing information, comprising providing a second animation in which is enlarged.

Images