Electronic device and method for providing user interface thereof

Abstract

An electronic device is disclosed. The electronic device includes: a display; a memory storing one or more instructions; and one or more processors connected to the display and the memory to control the electronic device. The one or more processors may control the display by executing the one or more instructions to: display a list identified as including a first group of one or more first GUI items and a second group of one or more second GUI items; displaying a title of the first group on at least one of a top or a bottom of the first GUI item; displaying a second group of titles on at least one of a top or a bottom of the second GUI item; and when a list length corresponding to at least one of the first group or the second group is changed according to a scroll input to the list, changing a length of a title of at least one of the first group or the second group based on the changed list length, and then displaying the changed title.

Description

Technical Field

[0001] The present disclosure relates to an electronic device and a user interface (UI) providing method thereof, and more particularly, to an electronic device for providing a UI screen including a plurality of graphical user interface (GUI) items and a UI providing method thereof. Background Art

[0002] As electronic technology develops, various types of electronic devices have been developed. In particular, display devices such as TVs provide various contents in order to meet the needs of users who expect various functions and new experiences.

[0003] As the types of content provided from TVs vary and the amount of content gradually increases, the importance of navigation functions for searching for user desired content increases. However, conventional displays cannot provide sufficient or convenient navigation options. Summary of the invention

[0004] According to one or more embodiments, an electronic device includes: a display; a memory configured to store one or more instructions; and one or more processors connected to the display and the memory and configured to control the electronic device, wherein the one or more processors are configured to perform the following operations by running the one or more instructions: display a list including (i) a first group including one or more first graphical user interface (GUI) items and (ii) a second group including one or more second GUI items, display a title of the first group on at least one of the upper ends or lower ends of a display area of ​​the one or more first GUI items on the display, display a title of the second group on at least one of the upper ends or lower ends of a display area of ​​the one or more second GUI items on the display, and based on a list width corresponding to at least one of the first group or the second group being changed according to a scroll input for the list, display a modified title of at least one of the first group or the second group on the display by changing the title width of at least one of the first group or the second group.

[0005] The one or more processors are configured to control the display to change a title width of the first group based on a change in a list width corresponding to the first group according to a scroll input to the list so that the title of the first group is displayed within the changed list width.

[0006] One or more processors are configured to abbreviate the end portion of the title of the first group to include the title of the first group within the changed list width of the first group based on determining that a GUI item included in the list is moved to one side, determining that a list width corresponding to the first group is changed, and determining that a difference between a title width of the first group and the changed list width is within a threshold width range.

[0007] The one or more processors are configured to control the display to repeatedly display text of the abbreviation portion based on determining that a list width of the first group changes according to a reverse scroll input and determining that a difference between a title width of the first group and the changed list width is not within a threshold width range.

[0008] One or more processors are configured to: control a display to display a movable focus item on one of the one or more first GUI items, and based on the list width corresponding to the first group being changed when the movable focus item is moved to another first GUI item among the one or more first GUI items or one of the one or more second GUI items according to a scroll input, control the display to display a title of the modified first group based on the changed list width.

[0009] One or more processors are configured to: control the display to display a fixed focus item on one of the one or more first GUI items, and based on the list width corresponding to the first group changing according to the scroll input, and based on moving another of the one or more first GUI items to the position of the fixed focus item, control the display to display the title of the modified first group based on the changed list width.

[0010] One or more processors are configured to: control a display to display a cursor item, and based on a list width corresponding to the first group changing according to a scroll input while the pointer item is located on one of the one or more first GUI items, control the display to display a title of the modified first group based on the changed list width.

[0011] One or more processors are configured to: based on the change in the list width corresponding to the first group according to the scroll input to the list, control the display to display the title of the first group through abbreviations based on the changed list width or the title type of the first group, or replace and display the title of the first group with a summarized title.

[0012] One or more processors are configured to: control the display to abbreviate and display at least one of the multiple words included in the title of the first group based on the list width corresponding to the first group being shortened to be shorter than the title width of the first group based on a scrolling input in a left direction, and control the display to abbreviate and display at least one of the multiple words included in the title of the second group based on the list width corresponding to the second group being shortened to be shorter than the title width of the second group based on a scrolling input in a right direction.

[0013] One or more processors are configured to: control the display to replace and display the title of the first group with a summarized title based on the list width corresponding to the first group being shortened to be shorter than the title width of the first group based on a scroll input in a left direction, and control the display to replace and display the title of the second group with a summarized title based on the list width corresponding to the second group being shortened to be shorter than the title width of the second group based on a scroll input in a right direction.

[0014] According to one or more embodiments, a method for providing a user interface (UI) of an electronic device, the method comprising: displaying a list including (i) a first group including one or more first graphical user interface (GUI) items and (ii) a second group including one or more second GUI items; displaying a title of the first group on at least one of the upper end or the lower end of a display area of ​​the one or more first GUI items; displaying a title of the second group on at least one of the upper end or the lower end of a display area of ​​the one or more second GUI items; and displaying a modified title of at least one of the first group or the second group by changing a title width of at least one of the first group or the second group based on a list width corresponding to at least one of the first group or the second group changing according to a scroll input for the list.

[0015] According to one or more embodiments, a non-transitory computer-readable medium storing computer instructions therein, which, when executed by a processor in an electronic device, causes the electronic device to perform the following operations: display a list comprising (i) a first group including one or more first graphical user interface (GUI) items and (ii) a second group including one or more second GUI items; display a title of the first group at at least one of the upper end or the lower end of a display area of ​​the one or more first GUI items; display a title of the second group at at least one of the upper end or the lower end of a display area of ​​the one or more second GUI items; and display a modified title of at least one of the first group or the second group by changing a title width of at least one of the first group or the second group based on a change in a list width corresponding to at least one of the first group or the second group in response to a scroll input to the list. BRIEF DESCRIPTION OF THE DRAWINGS

[0016] The above and other aspects, features and advantages of certain embodiments of the present disclosure will become more apparent from the following description taken in conjunction with the accompanying drawings, in which: Figure 1 is a diagram illustrating an electronic device according to one or more embodiments of the present disclosure; Figure 2a is a block diagram showing a configuration of an electronic device according to one or more embodiments of the present disclosure; Figure 2bis a block diagram specifically illustrating a configuration of an electronic device according to one or more embodiments of the present disclosure; Figure 3 is a flowchart illustrating a method of providing a user interface (UI) according to one or more embodiments of the present disclosure; Figure 4 is a diagram showing a method according to one or more embodiments Figure 3 A flowchart of a method for providing a UI screen; Figure 5 and Figure 6 is a diagram illustrating a method of providing a UI screen according to a movable focus method according to one or more embodiments of the present disclosure; Figure 7 and Figure 8 is a diagram illustrating a method of providing a UI screen according to a fixed focus method according to one or more embodiments of the present disclosure; Fig. 9 is a diagram illustrating a method of providing a UI screen according to cursor movement according to one or more embodiments of the present disclosure; Fig.10 is a diagram illustrating a method of providing a UI screen according to a touch method according to one or more embodiments of the present disclosure; Fig.11 is a diagram illustrating a method of providing a UI screen according to a reverse scroll input according to one or more embodiments of the present disclosure; Fig.12 is a diagram illustrating a method of providing a UI screen according to a scroll input according to one or more embodiments of the present disclosure; Fig.13 is a diagram illustrating a method of providing a UI screen according to a scroll input according to one or more embodiments of the present disclosure; and Fig.14 , Fig.15a and Fig.15b 2 is a diagram illustrating one or more examples of a UI screen providing method according to one or more embodiments of the present disclosure. DETAILED DESCRIPTION

[0017] Terms used in the present disclosure will be briefly described, and then one or more embodiments will be described in detail.

[0018] The terms used in the present disclosure and claims are general terms identified in view of the functions of the embodiments of the present disclosure. However, these terms may vary according to the intentions of technicians in the relevant fields, legal or technical interpretations, the emergence of new technologies, etc. In addition, in some cases, the applicant may select a term, in which case the term will be described in detail in the corresponding description of the present disclosure. Therefore, the terms used in the present disclosure need to be defined based on the meaning of the term and the overall content of the present disclosure, rather than the simple name of the term.

[0019] Expressions such as “have”, “may have”, “include”, “may include”, etc. indicate the existence of a corresponding number, function, operation, or component, and do not exclude the existence of additional features.

[0020] In the present disclosure, expressions such as "at least one of A [and / or] B" or "one or more of A [and / or] B" include all possible combinations of the listed items. For example, "at least one of A and B" or "at least one of A or B" includes any of the following items: (1) at least one A, (2) at least one B, or (3) at least one A and at least one B.

[0021] As used herein, terms such as “first” and “second” may identify corresponding components regardless of the order and / or importance of the components, and are used to distinguish one component from another rather than to limit the components.

[0022] Furthermore, the description that one element (e.g., a first element) is operably or communicatively “coupled with” / “coupled to” or “connected to” another element (e.g., the second element) should be interpreted as including the following two cases: the first element is directly coupled to the second element and the first element is indirectly coupled to the second element via a third element.

[0023] The expression "configured to" used in the present disclosure may be used interchangeably with other expressions such as "suitable for", "capable of", "designed to", "adapted to", "manufactured to", and "capable of" as appropriate. In addition, the term "configured to" does not necessarily mean that a device is "specifically designed to" in terms of hardware.

[0024] In contrast, in some cases, the expression "a device configured to..." may refer to, for example, a device that is "capable" of performing an operation together with another device or component. For example, the phrase "a processor configured to perform A, B, and C" may refer to, for example, a dedicated processor (e.g., an embedded processor) for performing the corresponding operations, or a general-purpose processor (e.g., a central processing unit (CPU) or an application processor) that can perform the corresponding operations by running one or more software programs stored in a memory device.

[0025] Unless otherwise specified, singular expressions include plural expressions. It should be understood that terms such as "including" or "consisting of" are used herein to specify the presence of a characteristic, quantity, step, operation, element, component, or combination thereof, and do not exclude the possibility of the presence or addition of one or more other characteristics, quantities, steps, operations, elements, components, or combinations thereof.

[0026] Terms such as "module", "unit", "component", etc. may be used to refer to an element that performs at least one function or operation, and such an element may be implemented as hardware or software, or a combination of hardware and software. In addition, except when each of a plurality of "modules", "units", "components", etc. needs to be implemented in separate hardware, the components may be integrated in at least one module and may be implemented in at least one processor.

[0027] It should be understood that the various elements and regions in the drawings may not be shown to scale. Therefore, the scope of the present disclosure is not limited by the relative sizes or intervals drawn from the drawings.

[0028] Hereinafter, with reference to the accompanying drawings, various exemplary embodiments will be described in more detail.

[0029] Figure 1 is a diagram illustrating an electronic device according to one or more embodiments of the present disclosure.

[0030] Reference Figure 1 , the electronic device 100 may be implemented with various types of display devices known to those of ordinary skill in the art. The electronic device 100 may be implemented with any device having a display function, such as a television (TV), a tablet personal computer (PC), a mobile phone, a desktop PC, a laptop PC, a personal digital assistant (PDA), a portable multimedia player (PMP), a large display (LFD), a digital signage, a digital information display (DID), a video wall, a projector, a refrigerator, an air conditioner, an air purifier, a medical device, or any other device known to those of ordinary skill in the art. According to one or more embodiments, the electronic device 100 may be remotely controlled based on a control signal received from a device having a remote control function, such as a remote control device or a user terminal for running a remote control application. However, as understood by those of ordinary skill in the art, according to an implementation example, the electronic device 100 may be controlled by a user input (e.g., a user's touch input).

[0031] According to one or more examples, the electronic device 100 may provide a UI screen including a plurality of GUI items, and control navigation operations among the plurality of GUI items based on a navigation input received from a remote control device.

[0032] According to one or more embodiments, the electronic device 100 may provide a UI screen including a plurality of GUI items having various sizes and / or various ratios and a focus item located on any one of the GUI items. In this case, the electronic device 100 may move and display a plurality of GUI items arranged on the same list in one direction based on a scroll input received from a remote control device.

[0033] According to one or more embodiments, Figure 1 As shown, different types of GUI items may be grouped. For example, GUI items corresponding to a plurality of groups may be provided in one list. In this case, a group title corresponding to each group may be set on one side of the list corresponding to each group. For example, a GUI item corresponding to an "Accessories & Music" group and a GUI item corresponding to an "Applications & Devices" group may be provided in one list 10, and the title of each group may be set aligned in the upper left corner. In this case, when a scroll input is recognized on the list 10, the width of the list corresponding to any one of the plurality of groups is shorter than the group title, and therefore, a phenomenon may occur where the titles of the plurality of groups are displayed overlapping each other.

[0034] Hereinafter, various embodiments will be described for enhancing user experience by adjusting the width of a group title by the changed width of each group list when the width of each group list is changed according to a scroll generated from a list including a plurality of groups.

[0035] Figure 2a is a block diagram illustrating a configuration of an electronic device according to one or more embodiments of the present disclosure.

[0036] Reference Figure 2a , the electronic device 100 may include a display 110 , a memory 120 , and one or more processors 130 .

[0037] The display 110 may be implemented as a display including a self-luminous element or a display including a non-self-luminous element and a backlight. For example, the display 110 may be implemented as various types of displays, such as, for example but not limited to, a liquid crystal display (LCD), an organic light emitting diode (OLED) display, a light emitting diode (LED), a micro LED, a mini LED, a plasma display panel (PDP), a quantum dot (QD) display, a quantum dot light emitting diode (QLED), or any other display known to a person of ordinary skill in the art. In the display 110, a backlight unit, a driving circuit that may be implemented as an a-si TFT, a low temperature polysilicon (LTPS) TFT, an organic TFT (OTFT), or any other suitable display structure known to a person of ordinary skill in the art may also be included. According to one or more examples, a touch film, a touch sheet, and a touch pad type touch sensor for sensing a touch operation provided in the front surface of the display 110 may be provided to sense various types of touch inputs. For example, the display 110 may sense various types of touch inputs, such as a touch input by a user's hand, a touch input by an input device (such as a stylus), a touch input by a specific electrostatic material, or any other touch input mechanism known to a person of ordinary skill in the art. In one or more examples, the input device may be implemented as a pen-type input device, which may be referred to by various terms, such as an electronic pen, a stylus pen, an S pen, or any other suitable pen known to those of ordinary skill in the art. According to one or more embodiments, the display 110 may be implemented with a flat display, a curved display, a foldable and / or rollable display, or any other display configuration known to those of ordinary skill in the art.

[0038] The memory 120 may store data required by various embodiments. Depending on the purpose of data use, the memory 120 may be implemented as a memory embedded in the electronic device 100', or may be implemented as a removable memory in the electronic device 100'. For example, data for driving the electronic device 100 may be stored in a memory embedded in the electronic device 100', and data for additional functions of the electronic device 100 may be stored in a removable memory of the electronic device 100. The memory embedded in the electronic device 100 may be a volatile memory (such as a dynamic random access memory (DRAM), a static random access memory (SRAM), a synchronous dynamic random access memory (SDRAM)) or a non-volatile memory (e.g., a one-time programmable ROM (OTPROM), a programmable ROM (PROM), an erasable programmable ROM (EPROM), an electrically erasable programmable ROM (EEPROM), a mask ROM, a flash ROM, a flash memory (e.g., a NAND flash memory or a NOR flash memory), a hard disk drive or a solid-state drive (SSD), or any other memory structure known to a person skilled in the art. In the case where the memory is detachably mounted to the electronic device 100', the memory may be implemented as a memory card (e.g., a compact flash (CF), a secure digital (SD), a micro secure digital (micro-SD), a mini secure digital (mini-SD), an extreme digital (xD), a multimedia card (MMC), etc.), an external memory connectable to a USB port (e.g., a USB memory), or any other type of memory known to a person skilled in the art.

[0039] The one or more processors 130 may control the operation of the electronic device 100. In one or more examples, the one or more processors 130 may be connected to each component of the electronic device 100 to control the overall operation of the electronic device 100. For example, the one or more processors 130 may be electrically connected to the display 110 and the memory 120 to control the overall operation of the electronic device 100. The processor 130 may be configured with one or more processors.

[0040] The one or more processors 130 may perform operations of the electronic device 100 according to various embodiments by executing at least one instruction stored in the memory 120 .

[0041] The one or more processors 130 may include one or more of a central processing unit (CPU), a graphics processing unit (GPU), an accelerated processing unit (APU), an integrated many-core (MIC), a digital signal processor (DSP), a neural processing unit (NPU), a hardware accelerator, or a machine learning accelerator. The one or more processors 130 may control one or any combination of other components of the electronic device and may perform operations related to communication or data processing. The one or more processors 130 may run one or more programs or instructions stored in the memory. For example, the one or more processors may execute the method according to one or more embodiments of the present disclosure by running one or more instructions stored in the memory.

[0042] When the method according to one or more embodiments of the present disclosure includes multiple operations, the multiple operations may be performed by one processor or multiple processors. For example, when the first operation, the second operation, and the third operation are performed by the method according to one or more embodiments, the first operation, the second operation, and the third operation may all be performed by the first processor, the first operation and the second operation may be performed by the first processor (e.g., a general-purpose processor), and the third operation may be performed by the second processor (e.g., an artificial intelligence dedicated processor).

[0043] The one or more processors 130 may be implemented as a single-core processor including one core, or may be implemented as one or more multi-core processors including multiple cores (e.g., homogeneous multi-cores or heterogeneous multi-cores). When the one or more processors 130 are implemented as a multi-core processor, each of the multiple cores included in the multi-core processor may include a processor internal memory (such as a cache memory and an on-chip memory), and a common cache shared by the multiple cores may be included in the multi-core processor. In addition, each of the multiple cores included in the multi-core processor (or a portion of the multiple cores) may independently read and execute program commands for implementing the method according to one or more embodiments of the present disclosure, and may read and execute program commands for implementing the method according to one or more embodiments of the present disclosure in conjunction with all or a portion of the multiple cores.

[0044] When the method according to one or more embodiments of the present disclosure includes multiple operations, the multiple operations may be performed by one of the multiple cores included in the multi-core processor, or may be performed by multiple cores. For example, when the first operation, the second operation, and the third operation are performed by the method according to one or more embodiments, the first operation, the second operation, and the third operation may all be performed by the first core included in the multi-core processor, the first operation and the second operation may be performed by the first core included in the multi-core processor, and the third operation may be performed by the second core included in the multi-core processor.

[0045] In an embodiment of the present disclosure, the processor may be a system on chip (SoC) in which one or more processors and other electronic components are integrated, a single-core processor, a multi-core processor, or a core included in a single-core processor or a multi-core processor, wherein the core may be implemented as a CPU, a GPU, an APU, a MIC, a DSP, an NPU, a hardware accelerator, or a machine learning accelerator. However, as will be appreciated by those of ordinary skill in the art, the embodiments of the present disclosure are not limited to these configurations. For ease of description, one or more processors 130 are referred to as processors 130.

[0046] Figure 2b is a block diagram specifically illustrating a configuration of an electronic device according to one or more embodiments of the present disclosure.

[0047] Reference Figure 2b , the electronic device 100' may include a display 110, a memory 120, one or more processors 130, a communication interface 140, a user interface 150, a speaker 160, and a sensor 170. Figure 2b The configuration will no longer be described with Figure 2a Overlapping configuration.

[0048] The communication interface 140 may be implemented with various interfaces according to one or more embodiments of the electronic device 100'. For example, the communication interface 140 may communicate with an external device, an external storage medium (e.g., a universal serial bus (USB) memory), an external server (e.g., a network hard disk) through a communication method (such as, for example, but not limited to, Bluetooth, Wi-Fi (wireless LAN network) based on an access point (AP), Zigbee, a wired / wireless local area network (LAN), a wide area network (WAN), Ethernet, IEEE 1394, a high-definition multimedia interface (HDMI), a universal serial bus (USB), a mobile high-definition link (MHL), an advanced encryption standard (AES) / European Broadcasting Union (EBU), an optical axis, a coaxial axis, or any other communication method known to a person of ordinary skill in the art). According to one or more embodiments, the communication interface 140 may communicate with a remote control device and / or a user terminal having a remote control function.

[0049] The user interface 150 may be implemented with devices such as buttons, a touch panel, a mouse, and a keyboard, or a touch screen capable of having a display function and an operation input function together.

[0050] The speaker 160 may output not only various audio data but also various notification sounds or voice messages. The processor 130 may control the speaker to output information corresponding to the UI screen or various notifications in an audio format.

[0051] The sensor 170 may include various types of sensors such as a touch sensor, a proximity sensor, an acceleration sensor, a geomagnetic sensor, a gyro sensor, a pressure sensor, a position sensor, an illumination sensor, or any other suitable sensor known to a person of ordinary skill in the art.

[0052] According to one or more embodiments, the electronic device 100 ′ may include a camera, a microphone, a tuner and a demodulator, or any other suitable component known to those of ordinary skill in the art.

[0053] The camera may perform capturing by being turned on according to a predetermined event. The camera may convert the captured image into an electrical signal and generate image data based on the converted signal. For example, an object may be converted into an electrical image signal by a charge coupled device (CCD) sensor, and the converted image signal may be converted into an amplified signal and a digital signal and then processed.

[0054] The microphone may be configured to receive a user voice or other sounds and convert the user voice or other sounds into audio data. According to one or more embodiments, the electronic device 100 ′ may receive a user voice input through an external device through the communication interface 140 .

[0055] The tuner may receive a Radio Frequency (RF) broadcast signal by tuning a channel selected by a user or all pre-stored channels among RF broadcast signals received through an antenna.

[0056] The demodulator may receive and demodulate a digital intermediate frequency (IF) signal and a digital IF (DIF) signal converted by the tuner and perform channel decoding or any other demodulator function known to those of ordinary skill in the art.

[0057] According to one or more embodiments, the processor 130 may provide a UI screen including GUI items of various sizes and / or various ratios. In one or more examples, the GUI items may include various types of images and / or text corresponding to various types of content (such as image content, video content, applications, advertising content, or any other suitable content). For example, the GUI items may be thumbnails, representative images, titles, descriptions, etc. representing the corresponding content, but may also include images and / or text that can identify the corresponding content.

[0058] According to one or more embodiments, the processor 130 may group and display the GUI items. In one or more examples, the term "grouping" may mean that the GUI items included in one group are displayed in different areas so as to be distinguished from the GUI items included in another group. In addition, the processor 130 may display the title of each group on at least one of the upper end or the lower end of each group. According to one or more embodiments, the processor 130 may display the group title in a left-aligned manner at the upper end of each group, but is not necessarily limited thereto. For example, it may be displayed in a left-aligned manner at the lower end of each group, or in a right-aligned manner at the upper end of each group.

[0059] According to one or more embodiments, multiple groups may be displayed on one list. For example, the GUI items included in each of the multiple groups may be moved in one direction in conjunction with a scroll input. In one or more examples, scrolling corresponds to moving the information displayed on the screen up and down or left and right, and if the amount of information displayed on the screen exceeds one screen size, the entire information displayed on the screen may move up and down or left and right. The scroll input may include various user commands for generating scrolling.

[0060] Figure 3 is a flowchart illustrating a method of providing a user interface (UI) according to one or more embodiments of the present disclosure.

[0061] according to Figure 3 In one or more embodiments shown in FIG. 1 , in operation S310, the processor 130 may control the display 110 to display a list of a first group that is identified or determined to include at least one first GUI item and a second group that includes at least one second GUI item. In addition, in operation S320, the processor 130 may display a title of the first group at at least one of the top or bottom of a display area of ​​the first group items, and display a title of the second group at at least one of the top or bottom of a display area of ​​the second group items. Although operation S310 and operation S320 are described separately for ease of description, the GUI items and the group title of each group may be displayed at the same time. For example, as Figure 1 As shown, a list 10 including GUI items corresponding to the “Accessories & Music” group and GUI items corresponding to the “Applications & Devices” group may be displayed, wherein the title of each group is aligned at the upper left of the group.

[0062] When a scroll input with respect to the list is recognized in operation S330, the processor 130 may recognize whether a width of a list corresponding to at least one of the first group or the second group is changed in operation S340.

[0063] According to one or more embodiments, the processor 130 may identify or determine whether the change in the list width corresponding to at least one of the first group or the second group is greater than or equal to the threshold width. In one or more examples, the threshold width may be set differently according to the list width corresponding to each group. For example, the threshold width may be determined differently according to the list width corresponding to each group displayed on the current screen. In one or more examples, the processor 130 may identify whether the difference between the title width of the first group (or the title width of the second group) and the list width of the first group (or the list width of the second group) is within a threshold width range. For example, the threshold width range may be a preset value, and the range may be determined as a value where the title width of the first group (or the title width of the second group) and the list width of the first group after the change (or the list width of the second group) are similar to each other.

[0064] If it is identified or determined in operation S340 that the list width corresponding to at least one of the first group or the second group is changed, in operation S350, the processor 130 may control the display 110 to change and display the title width of at least one of the first group or the second group based on the changed list width. According to one or more embodiments, when the change value of the list width corresponding to at least one of the first group or the second group is greater than or equal to the threshold width, the processor 130 may control the display 110 to change and display the title width of at least one of the first group or the second group. In one or more examples, if the difference between the title width of the first group (or the title width of the second group) and the list width of the first group (or the list width of the second group) is within the threshold width range, the processor 130 may control the display 110 to change and display the title width of at least one of the first group or the second group.

[0065] According to one or more embodiments, when the width of the list corresponding to the first group becomes shorter than the title width of the first group according to the left scroll input, the processor 130 may control the display 110 to change and display the title width of the first group. In addition, when the width of the list corresponding to the second group becomes shorter than the title width of the second group according to the right scroll input, the processor 130 may control the display 110 to change and display the title width of the second group.

[0066] Figure 4 is a diagram showing a method according to one or more embodiments Figure 3 A flowchart of a method for providing a UI screen.

[0067] exist Figure 4 In operation S420, according to a scroll input with respect to the list in operation S410, GUI items included in the list may be moved vertically or horizontally to one side, and a list width corresponding to the first group may be changed.

[0068] In this case, in operation S430, the processor 130 may identify or determine whether the difference between the width of the title of the first group and the width of the list of the first group after the change is within a threshold width range. In one or more examples, the threshold width range may be a preset value, and may be determined as a value at which the width of the title of the first group and the width of the list of the first group after the change are similar to each other. For example, the processor 130 may identify whether the difference between the width of the title of the first group and the width of the list of the first group after the change are similar to each other with a slight margin.

[0069] When it is identified or determined in operation S430 that the difference between the width of the title of the first group and the list width of the first group after the change is included in the threshold width range, in operation S440, the processor 130 may abbreviate (or omit) the end portion of the title of the first group. For example, the processor 130 may abbreviate the end portion of the title of the first group to include the title of the first group within the list width of the first group after the change. In one or more examples, the abbreviation may include a process using an ellipsis like "...", but is not limited thereto, and any mark indicating that the remaining portion is abbreviated (or omitted) may be used without limitation. For example, referring to Figure 1 , the title of the group “Accessories & Music” can be shortened to “Accessories & Music…”.

[0070] After abbreviating the end portion of the title of the first group, the processor 130 may identify or determine whether a list width of the first group is changed according to a reverse scroll input in operation S450.

[0071] Based on recognizing or determining that the list width of the first group is changed according to the reverse scroll input and recognizing or determining in operation S460 that the difference between the width of the title of the first group and the changed list width is not included in the threshold width range, in operation S470, the processor 130 may repeatedly display the text of the abbreviated portion. For example, when the list width of the first group is extended to be enough to display the last part of the text of the title of the first group according to the reverse scroll input, the processor 130 may display the text corresponding to the abbreviated portion again.

[0072] However, as will be appreciated by those of ordinary skill in the art, embodiments are not limited to these configurations, and according to one or more examples, when a group title needs to be abbreviated, the processor 130 may abbreviate the appropriate text portion based on the text type of the group title. For example, if the group title is a type that includes one word (e.g., sponsored), or a type that includes multiple consecutive words (e.g., recently played), the end portion of the title may be abbreviated. In one or more examples, when the group title is a type that combines multiple words by & and the width of the title words set on the front side is relatively long, the title words set on the front side may be abbreviated. Therefore, even if the group title is abbreviated, at least a portion of each of the multiple words may be identified.

[0073] According to one or more examples, when the group title needs to be changed, the processor 130 can replace the group title with a summarized text and display the summarized text. For example, the group title can be replaced with a summarized word instead of an abbreviation (such as ...). For example, if the group text is abc def ghi, the text can be replaced with a summarized text such as ADG, or can be replaced with a summarized text such as abc. However, this is merely exemplary, and the summarized text can have various types according to the type of the title. For example, in the case where the title is recently played, a summarized text (such as "recently played" or "recently") that can be recognized by the user can be used to replace the original title.

[0074] According to one or more examples, when a change process is required for the group title, the processor 130 may identify or determine whether to abbreviate an appropriate text portion or replace the summarized text based on the text type of the group title. For example, the group title may be abbreviated or replaced with the summarized text based on the recognition degree of the user according to the abbreviated process or the summarized process. The recognition degree may correspond to the likelihood that the abbreviated version of the title is recognized.

[0075] According to one or more embodiments, the scroll input may be input in various forms according to the implementation form of the electronic device 100, such as a pressing operation (e.g., long press input) of a specific button provided in a preset navigation input (e.g., a remote control device), a touch scroll operation, a scroll button operation, a continuous key input in a wheel input device, etc. In addition, the scroll control method of the list may include various types such as a movable focus method, a fixed focus method, a cursor (or pointer) movement method, or any other suitable scroll control. Hereinafter, a method for providing a UI corresponding to various types of scroll control methods will be described with reference to the accompanying drawings.

[0076] Figure 5 and Figure 6 is a diagram illustrating a method of providing a UI screen according to a movable focus method according to one or more embodiments of the present disclosure.

[0077] according to Figure 5 In one or more embodiments shown, in operation S510, the processor 130 may control the display 110 to display a movable focus item on one of at least one first GUI item included in the first group. The movable focus item may be an item for controlling scrolling of a list according to a movable focus method, and the movable focus item may be moved in one direction according to a scroll input, and the GUI items included in the list may be moved in the opposite direction.

[0078] According to one or more embodiments, the GUI items may be arranged in a specific direction (such as a horizontal direction, a vertical direction, a diagonal direction, or any other suitable direction), and may be a specific shape (e.g., a rectangle, a round rectangle, a circle, a diamond, etc.). According to one or more embodiments, the focus item may be highlighted in the edge of the GUI item, but is not necessarily limited thereto, and may be highlighted in the entire GUI item or in some edges.

[0079] When a scroll input for the list is recognized in operation S520, a list width corresponding to the first group may be changed by moving a movable focus item to one of at least one first GUI item included in the first group or at least one second GUI item included in the second group in operation S530.

[0080] In this example, in operation S540, the processor 130 may identify whether a difference between the title width of the first group and the changed list width is included in a threshold width.

[0081] When it is identified or determined in operation S540 that the difference between the width of the title of the first group and the changed list width of the first group is included in the threshold width range, in operation S550, the processor 130 may abbreviate or omit the end portion of the title of the first group.

[0082] According to one or more embodiments, the processor 130 may display Figure 6. The UI screen 600 may include various menu items 601, 602, 603, 604, 605 and a plurality of GUI item lists 610, 620, 630, 640. GUI items 631, 632, 633 included in the first group (Accessories & Music Group) and GUI items 634, 635, 636, 637, 638 included in the second group (Application & Device Group) may be provided on one list 630. According to one or more embodiments, the first group may be displayed on the left area in the list 630, and the second group (Application & Device Group) may be displayed on the right area in the list 630. The lists may correspond to items in the same row, the same column, or the same block in the display. In addition, the title of the first group, i.e., "Accessories & Music", may be displayed in a left-aligned manner at the upper end of the first group, and the title of the second group, i.e., "Application & Device", may be displayed in a left-aligned manner at the upper end of the second group. Furthermore, the movable focus item 20 may be displayed on the GUI items 633 included in the first group (Accessories & Music group).

[0083] According to the scroll input, according to one or more embodiments, the position of the movable focus item 20 may be moved to the GUI item 634 included in the second group (application & device group), and the GUI items included in the list 630 may be moved in the left or right direction. In this case, the frontmost GUI item 631 located in the list 630 may disappear on the screen, causing the width of the list corresponding to the first group (accessories & music group) to be shortened, while a new GUI item 639 is displayed, causing the width of the list corresponding to the second group (application & device group) to be extended.

[0084] In this case, the processor 130 may abbreviate the title of the first group. For example, the end portion of "Accessories & Music" may be abbreviated to "Accessories ...". Therefore, the display of the title of the first group does not conflict with the title of the second group (e.g., Applications & Devices). For example, the title of the first group may be prevented from overlapping with the title of the second group.

[0085] Figure 7 and Figure 8 is a diagram illustrating a method of providing a UI screen according to a fixed focus method according to one or more embodiments of the present disclosure.

[0086] according to Figure 7In one or more embodiments shown, the processor 130 may control the display 110 to display a fixed focus item in one of the at least one first GUI items included in the first group. The fixed focus item may be an item for controlling scrolling of a list according to a fixed focus method. According to a scroll input, the position of the fixed focus item may be fixed, the GUI items included in the list may be moved in the scrolling direction, and new GUI items that are not provided on the UI screen may be provided to the UI screen.

[0087] When a scroll input with respect to the list is recognized or determined in operation S720, one of the first GUI items included in the first group may be moved to a position of the fixed focus item so that a width of a list corresponding to the first group may be changed in operation S730.

[0088] In this example, in operation S740, the processor 130 may identify or determine whether a difference between the title width of the first group and the changed list width is included in a threshold width range.

[0089] When it is identified or determined in operation S740 that the difference between the width of the title of the first group and the changed list width of the first group is included in the threshold width range, in operation S750, the end portion of the title of the first group may be abbreviated (or omitted).

[0090] According to one or more embodiments, the processor 130 may display Figure 8 The UI screen 600 is shown on the upper side. Figure 8 The configuration of the UI screen displayed on the upper side is similar to that in Figure 6 Therefore, repeated description will be omitted. Figure 6 Different, in Figure 8 , the fixed focus item 30 may be located on GUI item 631, which is located in front of a list 630 including GUI items 631, GUI item 632, GUI item 633 of the first group and GUI items 634, GUI item 635, GUI item 636, GUI item 637 and GUI item 638 of the second group.

[0091] According to one or more embodiments of the present disclosure, according to one or more embodiments, the GUI items included in the list 630 may be moved in the left direction or the right direction, and another GUI item 632 belonging to the first group (Accessories & Music group) is moved to the position of the fixed focus item 30 according to the scroll input. In this case, the frontmost GUI item 631 located in the list 630 may disappear from the screen, so that the width of the list corresponding to the first group is shortened, and a new GUI item 639 is displayed, so that the width of the list corresponding to the second group (Application & Device group) is extended. Therefore, the width or length of the title corresponding to the first group (Accessories & Music group), that is, the title "Accessories & Music" may be shortened to be shorter than the list width of the first group after the change.

[0092] In this case, the processor 130 may abbreviate the title of the first group, for example, abbreviate the end of "Accessories & Music" to "Accessories..." Therefore, the title of the first group does not conflict with the title of the second group (i.e., applications & devices) and is displayed. For example, the title of the first group may be prevented from overlapping and being displayed with the title of the second group.

[0093] Fig. 9 is a diagram illustrating a method of providing a UI screen according to cursor movement according to one or more embodiments of the present disclosure.

[0094] according to Fig. 9 In one or more embodiments shown, the processor 130 may provide a cursor item 40 on the UI 600. In one or more examples, the cursor item 40 may be controlled by the remote control device 910, such as Fig. 9 As shown. However, the control of the cursor item is not limited to these configurations. The control function of the cursor item 40 can be implemented in various forms, but for ease of description, the moving direction of the cursor item 40 and the moving direction of the list are considered to be opposite directions. For example, when the cursor item 40 moves in the right direction, the list moves in the left direction.

[0095] According to one or more examples, such as Fig. 9 As shown, when the cursor item 40 is located on the GUI item 633 included in the first group (Accessories & Music group), the GUI items included in the list 630 may be moved in the left direction, and the cursor item 40 moves in the right direction to the GUI item 634 included in the second group (Application & Device group). In this case, the GUI item 631 located at the leftmost side (e.g., the beginning of the list) of the list 630 disappears on the screen, so that the width of the list corresponding to the first group (Accessories & Music group) is shortened, and a new GUI item 639 is displayed. Therefore, the width of the list corresponding to the second group (Application & Device group) is extended.

[0096] In this case, the processor 130 may abbreviate the end portion of the title of the first group. For example, "Accessories & Music" may be abbreviated to "Accessories ...". Therefore, the title of the first group does not conflict with the title of the second group (e.g., Applications & Devices). For example, the title of the first group may be prevented from overlapping with the title of the second group.

[0097] Fig.10 is a diagram illustrating a method of providing a UI screen according to a touch method according to one or more embodiments of the present disclosure.

[0098] according to Fig.10 In one or more embodiments, the UI screen 600 may be provided on a display screen on which touch input may be performed. For example, the UI screen 600 may be provided on a display screen of a tablet computer or any other device having a touch screen.

[0099] according to Fig.10 , when a touch scroll input in the left direction is recognized while the user's hand is located on the GUI item 633 included in the first group (Accessories & Music Group), the GUI items included in the list 630 may move in the left direction. In this case, the GUI item 631 located at the front of the list 630 disappears on the screen, so that the width of the list corresponding to the first group (Accessories & Music Group) is shortened, and a new GUI item 639 is displayed. Therefore, the width of the list corresponding to the second group (Accessories & Music Group) is extended.

[0100] In this case, the processor 130 may abbreviate the end portion of the title of the first group so that the title "Accessories & Music" is abbreviated to "Accessories ...". Thus, the title of the first group is displayed without overlapping with the title of the second group (e.g., Applications & Devices). For example, embodiments of the present disclosure help prevent the title of the first group from overlapping with the title of the second group.

[0101] Fig.11 is a diagram illustrating a method of providing a UI screen according to a reverse scroll input according to one or more embodiments of the present disclosure.

[0102] Fig.11 The upper side view can be compared with Figure 6 The same as the lower side figure. For example, Fig.11 The upper figure may be a state in which the GUI items included in the list 630 are moved in the left direction while the position of the movable focus item 20 is moved to the GUI item 634 included in the second group (Accessories & Music group) according to the scroll input. Therefore, the title of the first group, for example, the end portion of "Accessories & Music", may be abbreviated to "Accessories ...".

[0103] In this case, the processor 130 may move the GUI items included in the list 630 in the right direction while moving the position of the movable focus item 20 from the GUI item 634 included in the second group (Application & Device group) to the GUI item 633 included in the first group (Accessories & Music group) according to the reverse scroll input in the direction opposite to the previous scroll direction. In this case, when the GUI item 631 located at the front of the list 630 is displayed on the screen again, the width of the list corresponding to the first group (Accessories & Music group) is extended, and the GUI item 639 disappears from the screen, so that the width of the list corresponding to the second group (Application & Device group) is shortened.

[0104] In this case, the processor 130 may restore the abbreviated first group title to its original state. For example, the text corresponding to the abbreviated portion in the title of the first group that has been displayed as "Accessories ..." may be displayed as "Accessories & Music" again.

[0105] Fig.12 is a diagram illustrating a method of providing a UI screen according to a scroll input according to one or more embodiments of the present disclosure.

[0106] Fig.12 is a diagram showing another example of title abbreviation. In the above-described embodiment, it has been concluded that if group title abbreviation is necessary, the end portion is abbreviated, but the embodiment is not necessarily limited thereto.

[0107] According to one or more embodiments, Fig.12 In the scrolling case shown, when the title of the first group (the "Accessories & Music" group) needs to be abbreviated, the middle part of the title except the end part can be abbreviated. For example, the title "Accessories & Music" of the first group can be abbreviated to "Accessories & Music".

[0108] When the group title needs to be abbreviated in the scrolling situation, the processor 130 can abbreviate the appropriate text part based on the text type of the group title. For example, when the group title is a type that combines multiple words by &, and when the width of the title word arranged in the front is longer than the word threshold, the title word arranged in the front side can be abbreviated. Therefore, even if the group title is abbreviated, at least a part of each of the multiple words can be recognized.

[0109] Fig.13 is a diagram illustrating a method of providing a UI screen according to a scroll input according to one or more embodiments of the present disclosure.

[0110] Fig.13is a diagram showing another example of changing the group title. According to one or more embodiments, when the group title needs to be changed, the use of ellipsis such as "..." has been described. However, as understood by those of ordinary skill in the art, the embodiments are not limited to these configurations.

[0111] When a change process needs to be performed on the group title, the processor 130 may replace the group title with the summarized text.

[0112] According to one or more embodiments, if Fig.13 If you need to change the title of the first group ("Accessories & Music" group) under the scroll, you can replace the group title with the summarized title and display it.

[0113] For example, if the group title needs to be changed under scrolling, the group title can be replaced with a summary word instead of an abbreviation such as "..." For example, the title "Accessories & Music" of the first group can be replaced and displayed with a summary text such as "Accessories & Music".

[0114] Fig.14 , Fig.15a and Fig.15b 2 is a diagram illustrating one or more examples of a UI screen providing method according to one or more embodiments of the present disclosure.

[0115] according to Fig.14 When a list control is generated in operation S1405, the processor 130 may compare the group list width and the group title width in operation S1410.

[0116] In operation S1415, the processor 130 may identify whether the width of the group title is similar to the width of the group list or whether the width of the group title is shorter than the width of the group list. Here, the width of the group title being similar to the width of the group list may mean that the width difference is included in the threshold width range.

[0117] If the width of the group title is similar to the width of the group list, the processor 130 may abbreviate the end of the group title at the same time as the list scrolling starts in operation S1420. Fig.15a One or more examples are shown, in which a first group including a first GUI item 1511 and a first GUI item 1512 and a second group including a second GUI item 1521 and a second GUI item 1522 are included in one list, and the title width of the first group is similar to the list width of the first group. In this case, the processor 130 may abbreviate the end of the first group title at the same time as the list scrolling starts.

[0118] If the group title width is shorter than the group list width, the processor 130 may maintain the group title even when the list movement starts, and may abbreviate the end of the group title from the moment the group title width becomes similar to or smaller than the group list width in operation S1425. Fig.15b One or more examples are shown, in which a first group including the first GUI item 1511, the first GUI item 1512 and a second group including the second GUI item 1521, the second GUI item 1522 are included in one list, and the title width of the first group is shorter than the list width of the first group. In this case, even when the list movement starts, the processor 130 may maintain the first group of titles, and may abbreviate the end of the first group of titles from the moment the first group title width becomes similar to or smaller than the first group list width.

[0119] When the width of the group title is longer than the width of the group list, the processor 130 may abbreviate the group title before scrolling starts in operation S1430.

[0120] In operation S1435, when the width of the group list is changed by scrolling, the processor 130 may also change the width of the group title through the above-described process.

[0121] Furthermore, in operation S1440, the processor 130 may identify or determine whether the group list is scrolled and is outside the screen, that is, the group list is placed outside the screen.

[0122] When it is recognized or determined in operation S1440 that the group list is scrolled and disappears from the screen, the processor 130 may hide the group title from the screen in operation S1445. For example, the processor 130 may allow the group title to disappear from the screen.

[0123] In one or more examples, when it is identified in operation S1440 that at least a portion of the group list is retained within the screen, the processor 130 may retain at least a portion of the group title within the screen.

[0124] Meanwhile, after hiding the group title from the screen, when it is determined in operation S1445 that at least a portion of the group list disappeared from the screen re-enters the screen, at least a portion of the group title may be displayed again in operation S1460.

[0125] According to the various embodiments described above, when multiple groups of GUI items are provided in one list, the list width corresponding to any one of the multiple groups is shorter than the group title, thereby preventing the multiple group titles from being displayed in conflict with each other. Therefore, the user experience of the user on the UI screen can be improved.

[0126] The methods according to the various embodiments of the present disclosure described above can be implemented in the form of an application that can be installed in an existing electronic device. Optionally, an artificial intelligence model (deep neural network) based on deep learning (i.e., a learning network model) can be used to perform at least some of the methods according to the various embodiments of the present disclosure described above.

[0127] The methods according to the various embodiments described above may be implemented as a software upgrade or a hardware upgrade for an existing electronic device.

[0128] The various embodiments described above may be performed by an embedded server provided in an electronic device or an external server and a display device of at least one electronic device.

[0129] Various embodiments may be implemented in software including instructions stored on a machine-readable storage medium readable by a machine (e.g., a computer). A device including an electronic device (e.g., electronic device A) according to the disclosed embodiments may call instructions from a storage medium and execute the called instructions. When the instructions are executed by a processor, the processor may perform functions corresponding to the instructions directly or by using other components under the control of the processor. The instructions may include code generated by a compiler or code that can be executed by an interpreter. The machine-readable storage medium may be provided in the form of a non-transitory storage medium. Here, the term "non-transitory" only means that the storage medium is tangible, and does not distinguish between a case where data is semi-permanently stored in the storage medium and a case where data is temporarily stored in the storage medium.

[0130] According to one or more embodiments, the method according to the above-described embodiment may be included in a computer program product. The computer program product may be traded between a seller and a consumer as a product. The computer program product may be distributed online in the form of a machine-readable storage medium (e.g., a CD-ROM) or through an application store (e.g., PLAYSTORE). TM 、APPSTORE TM ) online distribution or direct online distribution. In the case of online distribution, at least a part of the computer program product may be at least temporarily stored or temporarily generated in a manufacturer's server, an application store's server, or a machine-readable storage medium (such as a memory of a relay server).

[0131] According to an embodiment, the above-mentioned elements (e.g., modules or programs) may include a single entity or multiple entities. According to an embodiment, at least one element or operation in the above-mentioned corresponding elements may be omitted, or at least one other element or operation may be added. Alternatively or additionally, multiple components (e.g., modules or programs) may be combined to form a single entity. In this case, the integrated entity may perform a function in at least one function of the corresponding element in the multiple elements in the same or similar manner as the manner in which each element in the multiple elements performs the function before integration. The modules, program modules or operations run by other elements according to various embodiments may be run continuously, in parallel, repeatedly or heuristically, or at least some operations may be run according to different orders, at least some operations may be omitted, or other operations may be added.

[0132] Although one or more embodiments of the present disclosure have been shown and described, the present disclosure is not limited to the aforementioned specific embodiments, and it is obvious that a person skilled in the art of the present disclosure may make various modifications without departing from the gist of the present disclosure as claimed in the appended claims. In addition, it is intended to interpret such modifications without departing from the technical ideas or prospects of the present disclosure.

Claims

1. An electronic device, comprising: monitor; a memory configured to store one or more instructions; as well as one or more processors connected to the display and the memory and configured to control the electronic device, The one or more processors are configured to perform the following operations by executing the one or more instructions: displaying a list on the display, the list comprising (i) a first group comprising one or more first graphical user interface (GUI) items and (ii) a second group comprising one or more second GUI items, displaying a title of the first group on at least one of an upper end or a lower end of a display area of ​​the one or more first GUI items on the display, displaying a title of the second group on at least one of an upper end or a lower end of a display area of ​​the one or more second GUI items on the display; Based on that a list width corresponding to at least one of the first group or the second group changes according to a scroll input to the list, a modified title of at least one of the first group or the second group is displayed on the display by changing a title width of at least one of the first group or the second group.

2. The electronic device according to claim 1, wherein: The one or more processors are configured to control the display to change a title width of the first group based on a change in a list width corresponding to the first group according to a scroll input to the list so that the title of the first group is displayed within the changed list width.

3. The electronic device according to claim 2, wherein: The one or more processors are configured to abbreviate the end portion of the title of the first group to include the title of the first group within the changed list width of the first group based on determining that a GUI item included in the list is moved to one side, determining that a list width corresponding to the first group is changed, and determining that a difference between a title width of the first group and the changed list width is within a threshold width range.

4. The electronic device according to claim 3, wherein: The one or more processors are configured to control the display to repeatedly display text of the abbreviation portion based on determining that a list width of the first group changes according to a reverse scroll input and determining that a difference between a title width of the first group and the changed list width is not within a threshold width range.

5. The electronic device according to claim 1, wherein: The one or more processors are configured to: controlling the display to display a movable focus item on a first GUI item among the one or more first GUI items, and Based on the fact that a list width corresponding to the first group is changed when the movable focus item is moved to another first GUI item among the one or more first GUI items or one of the one or more second GUI items according to the scroll input, the display is controlled to display the title of the modified first group based on the changed list width.

6. The electronic device according to claim 1, wherein: The one or more processors are configured to: controlling the display to display a fixed focus item on a first GUI item among the one or more first GUI items, and Based on a list width corresponding to the first group changing according to the scroll input, and based on moving another first GUI item among the one or more first GUI items to the position of the fixed focus item, controlling the display to display a title of the modified first group based on the changed list width.

7. The electronic device according to claim 1, wherein: The one or more processors are configured to: controlling the display to display a cursor item, and Based on a list width corresponding to the first group being changed according to the scroll input while the pointer item is located on one of the one or more first GUI items, the display is controlled to display a title of the modified first group based on the changed list width.

8. The electronic device according to claim 1, wherein: The one or more processors are configured to: based on the change in the list width corresponding to the first group according to the scroll input to the list, control the display to display the title of the first group through abbreviations based on the changed list width or the title type of the first group, or replace and display the title of the first group with a summarized title.

9. The electronic device according to claim 1, wherein: The one or more processors are configured to: controlling the display to abbreviate and display at least one word among a plurality of words included in the title of the first group based on a list width corresponding to the first group being shortened to be shorter than a title width of the first group based on a scroll input in a left direction, and Based on a list width corresponding to the second group being shortened to be shorter than a title width of the second group based on a scroll input in a right direction, the display is controlled to abbreviate and display at least one word among a plurality of words included in the title of the second group.

10. The electronic device according to claim 1, wherein: The one or more processors are configured to: controlling the display to replace and display the title of the first group with a summarized title based on a list width corresponding to the first group being shortened to be shorter than a title width of the first group based on a scroll input in a left direction, and Based on a list width corresponding to the second group being shortened to be shorter than a title width of the second group based on a scroll input in a right direction, the display is controlled to replace and display the title of the second group with a summarized title.

11. A method for providing a user interface UI of an electronic device, the method comprising: displaying a list, the list comprising (i) a first group comprising one or more first graphical user interface (GUI) items and (ii) a second group comprising one or more second GUI items; displaying a title of the first group on at least one of an upper end or a lower end of a display area of ​​the one or more first GUI items; displaying a title of the second group on at least one of an upper end or a lower end of a display area of ​​the one or more second GUI items; Based on a list width corresponding to at least one of the first group or the second group changing according to a scroll input to the list, a modified title of at least one of the first group or the second group is displayed by changing a title width of at least one of the first group or the second group based on the changed list width.

12. The method of claim 11, wherein: Displaying the modified title includes: based on a change in a list width corresponding to the first group according to a scroll input to the list, changing a title width of the first group so that the title of the first group is displayed within the changed list width.

13. The method of claim 12, wherein: Displaying the modified title includes: based on determining that the GUI item included in the list is moved to one side, determining that the list width corresponding to the first group is changed, and determining that the difference between the title width of the first group and the changed list width is within a threshold width range, abbreviating the end portion of the title of the first group to include the title of the first group within the changed list width of the first group.

14. The method of claim 13, further comprising: Based on determining that the list width of the first group changes according to the reverse scroll input and determining that a difference between a title width of the first group and the changed list width is not within the threshold width range, text of the abbreviation portion is repeatedly displayed.

15. A non-transitory computer readable medium having stored therein computer instructions, which when executed by a processor in an electronic device causes the electronic device to perform the following operations: displaying a list, the list comprising (i) a first group comprising one or more first graphical user interface (GUI) items and (ii) a second group comprising one or more second GUI items; displaying a title of the first group on at least one of an upper end or a lower end of a display area of ​​the one or more first GUI items; displaying a title of the second group on at least one of an upper end or a lower end of a display area of ​​the one or more second GUI items; and Based on a list width corresponding to at least one of the first group or the second group changing according to a scroll input to the list, a modified title of at least one of the first group or the second group is displayed by changing a title width of at least one of the first group or the second group based on the changed list width.

Images