Multi-Pane Graphical User Interface for Mobile Electronic Device

• US 20090063972A1
• Filed: 09/04/2007
• Published: 03/05/2009
• Est. Priority Date: 09/04/2007
• Status: Active Grant

• Current Assignee: Apple Inc.
• Original Assignee: Apple Inc.
• Inventors: Ma, Jeffrey, Wood, Policarpo, Bull, William E.
• Granted Patent: US 8,930,845 B2
• Time in Patent Office: Days
• US Class Current: 715/716
• CPC Class Codes: G06F 16/44 Browsing; Visualisation therefor
• CPC Class Codes: G06F 3/048 Interaction techniques based on graphical user interfaces [GUI]
• CPC Class Codes: G06F 3/0482 Interaction with lists of selectable items, e.g. menus
• CPC Class Codes: G09G 5/14 Display of multiple viewports
• CPC Class Codes: G11B 19/025 'Virtual' control panels, e.g. Graphical User Interface [GUI]
• CPC Class Codes: G11B 27/34 Indicating arrangements indicating means incorporated in magazine or cassette G11B23/046 and G11B23/0875; indicating measured values in general G01D

Abstract

Improved approaches to display information on a portable computing device having a display with limited display area are disclosed. The information displayed can, for example, assist a user in navigating a hierarchical menu system operable on the portable computing device to browse, search or play media items. In one embodiment, the information displayed can be presented in a multi-pane display screen (or graphical user interface). One pane can present a list of selectable items, such as a list of selectable media items. The list can represent one menu in the hierarchical menu system. Another pane can present other information that can be related to the list being displayed. For example, the other information can be data contextually related to the list. In one embodiment, the size of the panes of a multi-pane display screen can adapt dependent on user interaction and/or characteristics of the data being display.

Claims

1. A method for presenting a display screen on a display of a portable electronic device, the method comprising:

identifying a display screen to be displayed on the display of the portable electronic device, the identified display screen being one of a plurality of display screens that are available to be displayed on the display of the portable electronic device, and the identified display screen having at least a first pane and a second pane;

displaying the display screen using a default presentation, with selectable menu items being displayed in the first pane of the identified display screen, and with contextually relevant information being displayed in the second pane of the identified display screen;

determining whether a user input has been received with respect to the first pane of the identified display screen;

determining, based on the user input, whether at least one of the selectable menu items being displayed in the first pane of the identified display screen should be displayed using an enlarged presentation; and

subsequently displaying the display screen using an enlarged presentation when the determining determines that at least one of the selectable menu items should be displayed in the enlarged presentation, with at least the identified one of the selectable menu items being displayed in the first pane of the identified display screen in an enlarged display area, and with the contextually relevant information being displayed in the second pane of the identified display screen in a reduced display area.

2. A method as recited in claim 1, wherein the determining whether a user input has been received with respect to the first pane of the identified display screen comprises determining whether the user input has identified one of the selectable menu items being displayed in the first pane of the identified display screen

3. A method as recited in claim 2, wherein the determining whether at least one of the selectable menu items being displayed in the first pane of the identified display screen should be displayed using an enlarged presentation comprises determining whether the identified one of the selectable menu items being displayed in the first pane of the identified display screen should be displayed using an enlarged presentation.

4. A method as recited in claim 1, wherein the selectable menu items are media items, and wherein the contextually relevant information being displayed in the second pane includes an image associated with at least the identified one of the selectable media items.

5. A mobile computing device, comprising:

a display device for displaying a graphic user interface; and

a processing device for operating to present the graphical user interface on the display device,

wherein the graphical user interface includes at least

a first portion that displays first data; and

a second portion that displays second data, the second data being associated with the first data, and

wherein the processing device is configured to determine whether the first data should be presented in an enlarged first portion, and update the graphical user interface being presented to enlarge the first portion and reduce the second portion when it is determined that the first data should be presented in an enlarged first portion.

6. A method for presenting a display screen on a display of a portable electronic device, the method comprising:

displaying the display screen using a default presentation, the display screen having at least a first pane and a second pane;

determining whether user input with respect to the first pane has been received; and

updating the display screen being displayed from the default presentation to the enlarged presentation of the first pane when the determining determines that the user input with respect to the first pane has been received, the enlarged presentation of the first pane having an enlarged first pane as compared to the first pane of the default presentation, and the enlarged presentation of the first pane having a reduced second pane as compared to the second pane of the default presentation.

7. A method as recited in claim 6, wherein the method further comprises:

determining whether no subsequent user input with respect to the first pane has been received for a predetermined amount of time; and

updating the display screen being displayed from the enlarged presentation to the default presentation when no subsequent user input with respect to the first pane has been received for a predetermined amount of time.

8. A method as recited in claim 7, wherein selectable menu items are displayed in the first pane of the display screen in either the default presentation or the enlarged presentation, and contextually relevant information to one or more of the selectable menu items is displayed in the second pane of the display screen in either the default presentation or the enlarged presentation.

9. A method as recited in claim 6, wherein the method further comprises:

determining whether user input with respect to the second pane has been received; and

updating the display screen being displayed to the enlarged presentation of the second pane when the determining determines that the user input with respect to the second pane has been received, the enlarged presentation of the second pane having an enlarged second pane as compared to the second pane of the default presentation, and the enlarged presentation of the second pane having a reduced first pane as compared to the first pane of the default presentation.

10. A method as recited in claim 6, wherein selectable menu items are displayed in the first pane of the display screen in either the default presentation or the enlarged presentation, and contextually relevant information to one or more of the selectable menu items is displayed in the second pane of the display screen in either the default presentation or the enlarged presentation.

11. A mobile computing device, comprising:

a display device for displaying a graphic user interface; and

a processing device for operating to present the graphical user interface on the display device,

wherein the graphical user interface includes at least

a first portion that displays first data; and

a second portion that displays second data, the second data being associated with the first data, and

wherein the processing device is configured to determine whether a user input with respect to the first pane has been received, and update the graphical user interface being presented to enlarge the first portion and reduce the second portion when it is determined that a user input with respect to the first pane has been received.

12. A mobile computing device as recited in claim 11, wherein the processing device is further configured to determine whether no subsequent user input with respect to the first portion has been received for a predetermined amount of time, and update the graphical user interface being presented to reduce the previously enlarged first portion and enlarge the previously reduced second portion when it is determined that no subsequent user input with respect to the first portion has been received for the predetermined amount of time.

13. A mobile computing device as recited in claim 11, wherein the processing device is further configured to determine whether a user input with respect to the second pane has been received, and update the graphical user interface being presented to enlarge the second portion and reduce the first portion when it is determined that a user input with respect to the second pane has been received.

14. A method for presenting a display screen on a display of a portable electronic device, the method comprising:

identifying a display screen to be displayed on the display of the portable electronic device, the identified display screen being one of a plurality of display screens that are available to be displayed on the display of the portable electronic device, and the identified display screen having a display screen area divided amongst at least a first pane and a second pane;

identifying first data to be presented in the first pane of the identified display screen;

allocating a portion of the display screen area to present the first pane of the identified display screen based on at least the first data to be presented in the first pane of the identified display screen; and

presenting the identified display screen on the display with at least a portion of the first data being presented in the first pane,

wherein the first pane is sized in accordance with the determined portion of the display screen area that is allocated to present the first pane of the identified display screen.

15. A method as recited in claim 14, wherein the method further comprises:

identifying second data to be presented in the second pane of the identified display screen;

allocating a remaining portion of the display screen area to present the second pane of the identified display screen, and

wherein the presenting of the display screen further concurrently presents the second data in the second pane.

16. A method as recited in claim 14, wherein the method further comprises:

identifying second data to be presented in the second pane of the identified display screen, and

wherein the presenting of the display screen further concurrently presents the second data in the second pane.

17. A method as recited in claim 14, wherein the first data comprises selectable menu items being displayed in the first pane, and wherein the second data comprises contextually relevant information being displayed in the second pane.

18. A method as recited in claim 14, wherein the method further comprises:

allocating a remaining portion of the display screen area to present the second pane of the identified display screen;

identifying second data to be presented in the second pane of the identified display screen; and

determining a display arrangement for the second pane based on the second data to be presented in the second pane of the identified display screen,

wherein the presenting of the display screen further concurrently presents the second data in the second pane in accordance with the display arrangement.

19. A method as recited in claim 14, wherein the method further comprises:

allocating a remaining portion of the display screen area to present the second pane of the identified display screen;

identifying second data to be presented in the second pane of the identified display screen; and

determining a display arrangement for the second pane based on the remaining portion of the display screen area allocated to the second pane of the identified display screen,

wherein the presenting of the display screen further concurrently presents the second data in the second pane in accordance with the display arrangement.

20. A method for presenting a display screen on a display of a portable electronic device, the method comprising:

identifying a multi-pane display screen to be displayed on the display of the portable electronic device, the identified display screen being one of a plurality of display screens that are available to be displayed on the display of the portable electronic device, and the identified display screen having a display screen area divided amongst at least a first pane and a second pane;

identifying first data to be presented in a first pane of a multi-pane display screen;

determining a display format for the multi-pane display screen based on at least the first data to be presented in the first pane; and

presenting the multi-pane display screen on the display in accordance with the determined display format and with at least a portion of the first data being presented in the first pane.

21. A method as recited in claim 20, wherein the display format determines a size for each of the panes of the multi-pane display screen.

22. A method as recited in claim 20, wherein the method further comprises:

identifying second data to be presented in a second pane of a multi-pane display screen,

wherein the presenting of the multi-pane display screen on the display further presents at least a portion of the second data in the second pane.

23. A method as recited in claim 22, wherein the first data comprises selectable menu items being displayed in the first pane, and wherein the second data comprises contextually relevant information being displayed in the second pane.

24. A method as recited in claim 22,

wherein the display format determines a display arrangement for the second data within the second pane of the multi-pane display screen, and

wherein the presenting of the multi-pane display screen on the display further presents at least a portion of the second data in the second pane in accordance with the display arrangement.

25. A method as recited in claim 24,

wherein the display format determines a size for each of the panes of the multi-pane display screen, and

wherein the display arrangement for the second data within the second pane of the multi-pane display screen is dependent on the size of the second pane.

26. A method as recited in claim 25, wherein the display arrangement can cause the second data to be modified to fit within the size of the second pane.

27. A method as recited in claim 25, wherein the first data comprises selectable menu items being displayed in the first pane, and wherein the second data comprises contextually relevant information being displayed in the second pane.

28. A mobile computing device, comprising:

a display device for displaying a graphic user interface; and

a processing device for operating to present the graphical user interface on the display device,

wherein the graphical user interface includes at least

a first portion that displays first data; and

a second portion that displays second data, the second data being associated with the first data,

wherein the processing device is configured to dynamically size the first portion of the graphical user interface based on at least the first data, and

wherein as the size of the first portion of the graphical user interface enlarges, the size of the second portion of the graphical user interface gets smaller.

29. A mobile computing device as recited in claim 28, wherein the mobile computing device is a handheld device.

30. A method for presenting a display screen on a display of a portable electronic device, the method comprising:

displaying the display screen having at least a first pane and a second pane;

displaying a list of selectable items in the first pane;

receiving an identification of one of the selectable items being displayed in the first pane;

determining whether contextual content pertaining to the identified item is available at the portable electronic device;

displaying the contextual content in the second pane if it is determined that the contextual content is available to the portable electronic device; and

displaying default content in the second pane if it is determined that the contextual content is unavailable to the portable electronic device.

31. A method as recited in claim 30, wherein the method further comprises:

subsequently displaying the contextual content in place of the default content when it is later determined that the contextual content pertaining to the identified item is available at the portable electronic device.

32. A method as recited in claim 30,

wherein the determining whether contextual content pertaining to the identified item is available at the portable electronic device comprises determining whether the contextual content is only partially available to the portable electronic device, and

wherein the displaying of the contextual content in the second pane comprises displaying the available portion of the contextual content when the contextual content is only partially available.

33. A method as recited in claim 30, wherein the selectable items in the first pane pertain to albums of audios tracks, and wherein the contextual content for an album can include a plurality of:

title, artist, image, genre, track listing, rating, label, copyright, release date or play counts.

34. A mobile computing device, comprising:

a display device for displaying a graphic user interface; and

a processing device for operating to present the graphical user interface on the display device,

wherein the graphical user interface includes at least

a first portion that displays a list of selectable items; and

a second portion that displays contextual content pertaining to one or more of the selectable items displayed in the first portion, and

wherein the processing device is configured to receive an identification of one of the selectable items being displayed in the first pane;

determine whether contextual content pertaining to the identified item is available at the mobile computing device;

display the contextual content in the second pane to the extent determined to be available; and

display default content in the second pane if the contextual content is determined to be unavailable at the mobile computing device.