Abstract:
A method for providing a graphical user interface (GUI) and an electronic device using the method are provided. The method includes forming one or more groups of GUI items other than a GUI item selected by a user, moving the GUI items in the one or more groups, and enlarging and displaying the selected item on an area formed by movement of the GUI items. Therefore, it is possible to provide a GUI which enables easy manipulation and which is displayed with superior visual effect on a screen that is relatively small in size.

Description:
CROSS-REFERENCE TO RELATED APPLICATIONS 
       [0001]    This application claims priority from Korean Patent Application No. 10-2008-0125905, filed on Dec. 11, 2008, in the Korean Intellectual Property Office, the disclosure of which is incorporated herein by reference in its entirety. 
       BACKGROUND OF THE INVENTION 
       [0002]    1. Field of the Invention 
         [0003]    Apparatuses and methods consistent with the present invention relate to providing a graphical user interface (GUI), and more particularly, to providing a GUI comprising a plurality of GUI items which are capable of being selected by a user. 
         [0004]    2. Description of the Related Art 
         [0005]    Recently, the range of functions of electronic devices has increased, which has enabled the implementation of multimedia devices with remarkably developed digital technologies. 
         [0006]    Because electronic devices have many functions, methods for using electronic devices are diverse and complicated. Additionally, a large number of items are provided through screens for users due to having so many functions. 
         [0007]    However, since portable or remote control electronic devices have small screens, it is important to more efficiently provide diverse and complicated items. In addition, there is a need for graphical user interfaces (GUIs) which can be easily manipulated by a user and which have excellent visual effects. 
       SUMMARY OF THE INVENTION 
       [0008]    Exemplary embodiments of the present invention overcome the above disadvantages and other disadvantages not described above. Also, the present invention is not required to overcome the disadvantages described above, and an exemplary embodiment of the present invention may not overcome any of the problems described above. 
         [0009]    Exemplary embodiments of the present invention provide a method for providing a graphical user interface (GUI) and an electronic device applying the method which moves GUI items, which are not selected by a user, to a predetermined area of a screen and which enlarges and displays a GUI item selected by the user on an area formed by movement of the non-selected GUI items, in order to provide the user with a GUI which enables easy manipulation and which is displayed with superior visual effect on a screen that is relatively small in size. 
         [0010]    According to an aspect of the present invention, there is provided a method for providing a graphical user interface (GUI) comprising a plurality of GUI items, the method comprising a first operation for moving GUI items in a first group among GUI items other than a GUI item selected by a user, to a first area of a screen; a second operation for moving GUI items in a second group among the GUI items other than the selected GUI item, to a second area of the screen; and enlarging and displaying the selected GUI item on a third area of the screen formed by the first and second operations. 
         [0011]    The GUI items in the first group may be displayed with a depth higher than the selected GUI item, and the GUI items in the second group may be displayed with a depth lower than the selected GUI item. 
         [0012]    The first operation may comprise moving the GUI items in the first group to the first area while increasing the transparency of the GUI items in the first group. 
         [0013]    The first operation may comprise moving the GUI items in the first group to the first area so that one of the GUI items in the first group partially disappears from the screen. 
         [0014]    The method may further comprise displaying either 1) a plurality of sub-items contained in the selected GUI item or 2) a window formed as a result of activating the selected GUI item, after the selected GUI item disappears from the screen. 
         [0015]    The first area may be an area containing a first corner of the screen, the second area may be an area containing a second corner of the screen, the first operation may comprise moving the GUI items in the first group to the first corner, and the second operation may comprise moving the GUI items in the second group to the second corner. 
         [0016]    The first area may be an area containing a first corner of the screen, the second area may be an area containing a second corner of the screen, the first corner and the second corner may be symmetrical about the center of the screen. The first operation may comprise moving the GUI items in the first group from the second corner to the first corner, and the second operation may comprise moving the GUI items in the second group from the first corner to the second corner. 
         [0017]    The first operation may comprise moving the GUI items in the first group to the first area while increasing or reducing the size of the GUI items in the first group, and the second operation may comprise moving the GUI items in the second group to the second area while increasing or reducing the size of the GUI items in the second group. 
         [0018]    The first area may be an area containing a first corner of the screen, the second area may be an area containing a second corner of the screen, the GUI items in the first group may be placed closer to the first corner than the second corner, and the GUI items in the second group may be placed closer to the second corner than the first corner. 
         [0019]    The first area may be an area containing a first corner of the screen, the second area may be an area containing a second corner of the screen, and the third area may be an area other than the first corner and second corner. 
         [0020]    The first corner and the second corner may be symmetrical about the center of the screen. 
         [0021]    Overlapping areas between the GUI items in the first group may be increased in size while the GUI items in the first group move to the first area, and overlapping areas between the GUI items in the second group may be increased in size while the GUI items in the second group move to the second area. 
         [0022]    The GUI items in the first group may overlap one another while moving to the first area, and the GUI items in the second group may overlap one another while moving to the second area. 
         [0023]    The enlarging and displaying may comprise enlarging the selected GUI item while moving the selected GUI item. 
         [0024]    The plurality of GUI items may comprise a menu, an icon, a folder and contents, and the contents may comprise a moving image, a still image, music and text. 
         [0025]    According to another aspect of the present invention, there is provided an electronic device comprising a graphical user interface (GUI) generator which generates a GUI comprising a plurality of GUI items which a user is able to select; and a controller which controls the GUI generator, so that GUI items in a first group among GUI items other than a GUI item selected by the user move to a first area of a screen, GUI items in a second group among the GUI items other than the selected GUI item move to a second area of the screen, and the selected GUI item is enlarged and displayed on a third area of the screen formed by movement of the GUI items in the first group and GUI items in the second group. 
         [0026]    The GUI items in the first group may be displayed with a depth higher than the selected GUI item, and the GUI items in the second group may be displayed with a depth lower than the selected GUI item. 
         [0027]    The controller may control the GUI generator so that the GUI items in the first group may move to the first area while the transparency of the GUI items in the first group is increased. 
         [0028]    According to another aspect of the present invention, there is provided a method for providing a graphical user interface (GUI) comprising a plurality of GUI items, the method comprising displaying the plurality of GUI items which a user is able to select on a screen; and moving GUI items displayed with a depth different from a GUI item selected by the user among the plurality of displayed GUI items to a predetermined area of the screen while changing the transparency of the GUI items with the depth different from the selected GUI item. 
         [0029]    The moving may comprise moving GUI items displayed with a depth higher than the selected GUI item to the predetermined area of the screen while increasing the transparency of the GUI items with the depth higher than the selected GUI item. 
         [0030]    The method may further comprise enlarging and displaying the selected GUI item on an area of the screen formed by the moving operation. 
         [0031]    According to another aspect of the present invention, there is provided a method for providing a graphical user interface (GUI), the method comprising a first operation for moving GUI items displayed with a depth higher than a GUI item selected by a user, to a first area of a screen; a second operation for moving GUI items displayed with a depth lower than the selected GUI item, to a second area of the screen; and enlarging and displaying the selected GUI item on a third area of the screen formed by the first and second operations. 
         [0032]    As described above, according to aspects of the present invention, the non-selected GUI items may be moved to a predetermined area of the screen, and the selected GUI item may be enlarged and displayed on an area formed by movement of the non-selected GUI items. 
         [0033]    Therefore, it is possible to provide a GUI which enables easy manipulation and which is displayed with superior visual effect on a screen that is relatively small in size. 
     
    
     
       BRIEF DESCRIPTION OF THE DRAWINGS 
         [0034]    The above and/or other aspects of the present invention will be more apparent by describing certain exemplary embodiments of the present invention with reference to the accompanying drawings, in which: 
           [0035]      FIG. 1  is a view illustrating an example of a graphical user interface (GUI) displayed on a touch liquid crystal display (LCD) screen according to an exemplary embodiment of the present invention; 
           [0036]      FIG. 2  is a view illustrating a process of changing the display state of non-selected GUI items according to an exemplary embodiment of the present invention; 
           [0037]      FIG. 3  is a view illustrating a process of changing the display state of a GUI item selected by a user according to an exemplary embodiment of the present invention; 
           [0038]      FIGS. 4 and 5  are views illustrating examples of a window displayed when the selected GUI item is activated according to exemplary embodiments of the present invention; 
           [0039]      FIGS. 6 and 7  are views illustrating other processes of changing the display state of non-selected GUI items according to exemplary embodiments of the present invention; 
           [0040]      FIGS. 8 and 9  are views illustrating other processes of changing the display state of a GUI item selected by a user according to exemplary embodiments of the present invention; 
           [0041]      FIG. 10  is a view illustrating another example of a GUI displayed on the touch LCD screen according to an exemplary embodiment of the present invention; 
           [0042]      FIG. 11  is a block diagram of an electronic device to which the present invention may be applicable; and 
           [0043]      FIG. 12  is a flowchart explaining a method for providing a GUI according to an exemplary embodiment of the present invention. 
       
    
    
     DETAILED DESCRIPTION OF EXEMPLARY EMBODIMENTS 
       [0044]    Certain exemplary embodiments of the present invention will now be described in greater detail with reference to the accompanying drawings. 
         [0045]    In the following description, the same drawing reference numerals are used for the same elements even in different drawings. The matters defined in the description, such as detailed construction and elements, are provided to assist in a comprehensive understanding of the invention. Thus, it is apparent that the exemplary embodiments of the present invention can be carried out without those specifically defined matters. Also, well-known functions or constructions are not described in excessive detail since they would obscure the invention unnecessarily. 
         [0046]      FIGS. 1 to 5  are views provided to explain a concept of a graphical user interface (GUI) to which the present invention may be applicable.  FIG. 1  exemplarily illustrates a GUI displayed on a touch liquid crystal display (LCD) screen  100 . 
         [0047]    A GUI typically comprises a plurality of GUI items, for example, menus, icons, folders or contents, such as moving images, still images, music or text. 
         [0048]    The GUI shown in  FIG. 1  comprises a first GUI item  110  to fifth GUI item  150 . The first to fifth GUI items  110  to  150  may be moving images, but moving images are merely examples. Accordingly, the present invention is also applicable to GUI items other than moving images. 
         [0049]    A user may select a desired GUI item from among the plurality of GUI items of the GUI. When the GUI is displayed on the touch LCD screen  100  in an exemplary embodiment of the present invention, the user may touch the touch LCD screen  100  with his or her fingertips to select a desired GUI item. 
         [0050]      FIGS. 2 to 5  exemplarily illustrate processes of changing the display state of the GUI on the touch LCD screen  100  when a user touches the third GUI item  130 . 
         [0051]    If the user touches the third GUI item  130  with his or her fingertips, the first GUI item  110  and second GUI item  120  may move to a lower right corner of the screen  100  and the fourth GUI item  140  and fifth GUI item  150  may move to an upper left corner of the screen  100 , as shown in  FIG. 2 . 
         [0052]    Accordingly, the first GUI item  110  and second GUI item  120  are placed near the lower right corner of the screen  100 , and the fourth GUI item  140  and fifth GUI item  150  are placed near the upper left corner of the screen  100 . 
         [0053]    In this situation, the first GUI item  110  and second GUI item  120  moving to the lower right corner of the screen  100  have a (visual) depth higher than the third GUI item  130  selected by the user. Herein, ‘GUI items with a depth higher than the third GUI item  130 ’ may appear to be above the third GUI item  130 . 
         [0054]    Additionally, the fourth GUI item  140  and fifth GUI item  150  moving to the upper left corner of the screen  100  have a depth lower than the third GUI item  130  selected by the user. Herein, ‘GUI items with a depth lower than the third GUI item  130 ’ may appear to be below the third GUI item  130 . 
         [0055]    As shown in  FIG. 1 , the first to fifth GUI items  110  to  150  are arranged diagonally from the upper left corner to the lower right corner of the screen  100 . 
         [0056]    Additionally, the first GUI item  110 , second GUI item  120 , fourth GUI item  140  and fifth GUI item  150  move diagonally, as shown in  FIG. 2 . In more detail, the first and second GUI items  110  and  120  move from the upper left corner to the lower right corner on the screen  100 , but the fourth and fifth GUI items  140  and  150  move from the lower right corner to the upper left corner on the screen  100 . 
         [0057]    Referring to  FIG. 2 , the transparency of the first and second GUI items  110  and  120  moving to the lower right corner of the screen  100  (namely, the GUI items with a depth higher than the third GUI item  130  selected by the user) is increased, so the first and second GUI items  110  and  120  are displayed semitransparently. 
         [0058]    A portion of the first GUI item  110  which has the highest depth and moves to the lowest rightmost corner of the screen  100  may be not displayed on the screen  100 . Accordingly, the user may be provided with a visual effect showing that the first GUI item  110  partially disappears from the screen  100 . 
         [0059]    The process of changing the display state of GUI items other than the third GUI item  130  selected by the user on the screen  100  has been described above in detail with reference to  FIG. 2 . 
         [0060]    Hereinafter, a process of changing the display state of the third GUI item  130  selected by the user on the screen  100  is now described in detail with reference to  FIGS. 3 to 5 . 
         [0061]    In  FIG. 3 , the third GUI item  130  selected by the user is enlarged and displayed on the screen  100 . In this situation, the third GUI item  130  is enlarged and displayed on an area of the screen  100  which has been formed by movement of the first GUI item  110 , second GUI item  120 , fourth GUI item  140  and fifth GUI item  150 . 
         [0062]    Although the size of the third GUI item  130  becomes larger than other GUI items, the third GUI item  130  may not cover the other GUI items on the screen  100 , so that a user may view all of the GUI items displayed on the screen  100 . However, the third GUI item  130  may be enlarged to cover at least one of the first GUI item  110 , second GUI item  120 , fourth GUI item  140  and fifth GUI item  150 , if necessary. For example, the third GUI item  130  may be enlarged to partially cover the second and fourth GUI items  120  and  140 . 
         [0063]    The third GUI item  130  selected by the user may be played back, as shown in  FIG. 4 . In  FIG. 4 , the third GUI item  130  disappears from the screen  100 , and instead a media player window and a playback indication            131  are displayed. 
         [0064]    To display the media player window larger than the third GUI item  130 , the first GUI item  110  and a portion of the second GUI item  120  may disappear from the screen  100  while moving to the lower right corner of the screen  100 . 
         [0065]    If the third GUI item  130  is contents other than the moving image (for example, a still image, music or text) or an icon, the third GUI item  130  may disappear from the screen  100  and instead a program execution window for activating the contents or icon may be displayed on the screen  100 . 
         [0066]    Alternatively, if the third GUI item  130  is a menu or folder, a window showing sub-menus of the menu, or files of the folder may be displayed on the screen  100  after the third GUI item  130  disappears. 
         [0067]    As shown in  FIG. 5 , when the third GUI item  130  is a moving image folder, a window showing a plurality of moving image files  130 - 1  to  130 - 4  contained in the moving image folder may be displayed on the screen  100  after the third GUI item  130  disappears. 
         [0068]    The process of moving the non-selected GUI items to the corners of the screen to create space in the center of the screen, enlarging and displaying the selected GUI item on the center of the screen, and displaying a result of activating the selected GUI item or displaying sub-menus or files contained in the selected GUI item has been described above in detail in accordance with exemplary embodiments of the present invention. 
         [0069]    Only the positions of non-selected GUI items are changed without any change in the size or the area overlapping between the non-selected GUI items in the exemplary embodiment of the present invention, but this is merely an example for convenience of description. 
         [0070]    As shown in  FIG. 6 , the fourth and fifth GUI items  140  and  150  which are not selected by the user may move to the upper left corner of the screen  100  so that an overlapping area between the fourth and fifth GUI items  140  and  150  may become larger. Similarly, the first and second GUI items  110  and  120  which are not selected by the user may move to the lower right corner of the screen  100  so that an overlapping area between the first and second GUI items  110  and  120  may become larger. 
         [0071]    As shown in  FIG. 7 , the fourth and fifth GUI items  140  and  150  which are not selected by the user may move to the upper left corner of the screen  100  so that the size of the fourth and fifth GUI items  140  and  150  may become smaller. Similarly, the first and second GUI items  110  and  120  which are not selected by the user may move to the lower right corner of the screen  100  so that the size of the first and second GUI items  110  and  120  may become smaller. 
         [0072]    However, these non-selected GUI items may move to the corners of the screen  100  so that the size of the non-selected GUI items may become larger, if necessary. 
         [0073]    When the GUI shown in  FIG. 1  is currently displayed, if the user selects the forth GUI item  140 , the GUI items may be displayed as shown in  FIG. 8 . 
         [0074]    In  FIG. 8 , the first GUI item  110  moves to the lower right corner of the screen  100  so as to disappear from the screen  100 , and the second and third GUI items  120  and  130  move to the lower right corner of the screen  100 . 
         [0075]    Additionally, the fifth GUI item  150  moves to the upper left corner of the screen  100 , and a sixth GUI item  160  is newly displayed on the screen  100 . 
         [0076]    Furthermore, the fourth GUI item  140  selected by the user moves to the center of the screen  100  so that the size of the fourth GUI item  140  becomes larger than the non-selected GUI items. 
         [0077]    Alternatively, if the user selects the forth GUI item  140  when the GUI shown in  FIG. 1  is currently displayed, the GUI items may be displayed as shown in  FIG. 9 . 
         [0078]    In  FIG. 9 , the first, second and third GUI items  110  to  130  move to the lower right corner of the screen  100 , and the fifth GUI item  150  moves to the upper left corner of the screen  100 . 
         [0079]    There is no change in the GUI items appearing on the screen  100  as shown in  FIG. 9 , whereas some of the GUI items disappear from the screen  100  and the new GUI item appears on the screen  100  as shown in  FIG. 8 . Accordingly, the GUI of  FIG. 9  differs from the GUI of  FIG. 8 . 
         [0080]    Additionally, in  FIG. 9 , the forth GUI item  140  selected by the user is enlarged and displayed on an area of the screen  100  which is formed by movement of the first GUI item  110 , second GUI item  120 , third GUI item  130  and fifth GUI item  150 . 
         [0081]    While the first to fifth GUI items  110  to  150  of the GUI shown in  FIG. 1  overlap partially, this is merely an example for convenience of description. 
         [0082]    Accordingly, the first to fifth GUI items  110  to  150  may be displayed so as not to overlap one another, as shown in  FIG. 10 . However, the GUI shown in  FIG. 10  is also merely an example, and thus the present invention may be also applicable to a GUI comprising a plurality of GUI items of which the number, the arrangement, the size or the shape differ from the GUI items of the GUI shown in  FIG. 10 . 
         [0083]    If the user selects the third GUI item  130  from among the first to fifth GUI items  110  to  150  of the GUI shown in  FIG. 10 , the first to fifth GUI items  110  to  150  may be displayed as shown in  FIG. 3 . 
         [0084]    In this situation, the first and second GUI items  110  and  120  partially overlap while moving to the lower right corner of the screen  100 , and the fourth and fifth GUI items  140  and  150  also partially overlap while moving to the upper left corner of the screen  100 . 
         [0085]    According to an exemplary embodiment of the present invention described above, the GUI items with a depth higher than the selected GUI item move to the lower right corner of the screen  100 , and the GUI items with a depth lower than the selected GUI item move to the upper left corner of the screen  100 . 
         [0086]    In more detail, the GUI items with a depth higher than the selected GUI item move to an area containing the lower right corner of the screen  100 , and the GUI items with a depth lower than the selected GUI item move to an area containing the upper left corner of the screen  100 , but this is merely an example for convenience of description. Accordingly, the GUI items may move to areas of the screen  100  other than the area containing the upper left corner and area containing the lower right corner, for example, an area containing an upper right corner of the screen  100  or an area containing a lower left corner of the screen  100 . 
         [0087]    The GUI item selected by the user may desirably be enlarged and displayed on areas other than the areas containing the corners of the screen  100 , but may be displayed on areas containing the corners of the screen  100  if necessary. 
         [0088]    Additionally, the non-selected GUI items form one or more groups and each of the formed groups moves diagonally between the upper left corner and the lower right corner of the screen  100  in exemplary embodiments of the present invention. However, this is merely an example for convenience of description, and accordingly, the present invention is equally applicable to a situation in which each of the formed groups moves in any direction other than diagonally. 
         [0089]    For example, the non-selected GUI items may form one or more groups and each of the formed groups may move to the upper right corner of the screen  100  or the lower right corner of the screen  100 . In this situation, the GUI item selected by the user may be enlarged on the left side of the screen  100 . 
         [0090]    While the direction in which the non-selected GUI items move has been determined according to the depth level, this is also an example for convenience of description. Accordingly, the present invention is also applicable to a situation in which GUI items placed near the upper left corner of the screen  100  move to the upper left corner, and GUI items placed near the lower right corner of the screen  100  move to the lower right corner. 
         [0091]    Furthermore, only the GUI items with the depth higher than the selected GUI item have been shown to become transparent in exemplary embodiments of the present invention, but this is merely an example for convenience of description. Accordingly, the present invention is also applicable to a situation in which the transparency of the GUI items with the depth higher than the selected GUI item is reduced. Additionally, the transparency of the GUI items with the depth lower than the selected GUI item may be changed. 
         [0092]      FIG. 11  is a block diagram of an electronic device capable of providing the GUI that has been described above. In  FIG. 11 , the electronic device comprises a multimedia function block  1110 , a GUI generator  1120 , a touch LCD  1130 , a controller  1140  and a remote communicator  1150 . 
         [0093]    The multimedia function block  1110  performs various functions provided by the electronic device, for example playback of contents such as a moving image, a still image, music or text, recording, document preparation, gaming or other functions. 
         [0094]    The GUI generator  120  generates a GUI under the control of the controller  1140 , and adds the generated GUI to an image output from the multimedia function block  1110 . 
         [0095]    The touch LCD  1130  displays the image to which the GUI output from the GUI generator  1120  is added. Additionally, the touch LCD  1130  may be used to receive user operations by touching or dragging. 
         [0096]    The controller  1140  controls the operation of the multimedia function block  1110  according to the user operations received through the touch LCD  1130  or other possible manipulating means such as a button (not shown). 
         [0097]    The remote communicator  1150  is capable of performing remote communication with other home devices (for example, a television (TV) or a digital versatile disk (DVD) player). In this situation, the remote communication may be performed via infrared rays or radio frequency (RF). 
         [0098]    If a user enters a command to remotely control a desired home device (for example, a TV or a DVD player) using the touch LCD  1130  or other possible manipulating means, the controller  1140  sends the command to the desired home device through the remote communicator  1150 . 
         [0099]    Additionally, the controller  1140  controls the GUI generator  1120  so that a GUI provided in response to the user operation is displayed on the touch LCD  1130 . Hereinafter, a method for providing a GUI is now described in detail with reference to  FIG. 12 . 
         [0100]    In  FIG. 12 , the controller  1140  controls the GUI generator  1120  so that a GUI showing a plurality of GUI items which a user may select is displayed on the touch LCD  1130  (S 1210 ). 
         [0101]    After operation S 1210 , the GUI of  FIG. 1  or the GUI of  FIG. 10  may be displayed on the touch LCD  1130 . 
         [0102]    Subsequently, if the user selects a desired GUI item from among the plurality of GUI items (S 1220 -Y), the controller  1140  controls the GUI generator  1120  so that GUI items with a depth lower than the selected GUI item move to an upper left corner of the touch LCD  1130  (S 1230 ). Additionally, the controller  1140  controls the GUI generator  1120  so that GUI items with a depth higher than the selected GUI item move to a lower right corner of the touch LCD  1130  and become transparent or semitransparent (S 1240 ). 
         [0103]    The controller  1140  also controls the GUI generator  1120  so that the selected GUI item is enlarged and displayed on an area formed by the moving of GUI items in operations S 1230  and S 1240  (S 1250 ). Operations S 1230  to S 1250  have been described above in detail with reference to  FIGS. 2 and 3 . 
         [0104]    After operation S 1250 , the display state of the selected GUI item may be changed as shown in  FIGS. 4 and 5 . Additionally, operations S 1230  and S 1240  may be performed so that the GUI items may be displayed as shown in  FIGS. 6 and 7 . Moreover, operations S 1230  to S 1250  may be performed so that the display state of the GUI items may be changed as shown in  FIGS. 8 and 9 . 
         [0105]    While the electronic device shown in  FIG. 11  is capable of providing a multimedia content playback function and remotely controlling a home device such as a TV, this is merely an example. 
         [0106]    Accordingly, the present invention is also applicable to any electronic device capable of performing functions other than the multimedia content playback function, for example a portable multimedia device which does not require the remote communicator  1150 . 
         [0107]    The foregoing exemplary embodiments and advantages are merely exemplary and are not to be construed as limiting the present invention. The present teaching can be readily applied to other types of apparatuses. Also, the description of the exemplary embodiments of the present invention is intended to be illustrative, and not to limit the scope of the claims, and many alternatives, modifications, and variations will be apparent to those skilled in the art.