Graphical user interface for mobile electronic device

• US 8,732,611 B2
• Filed: 09/04/2007
• Issued: 05/20/2014
• Est. Priority Date: 09/04/2007
• Status: Active Grant

• Current Assignee: Apple Inc.
• Original Assignee: Apple Inc.
• Inventors: Bull, William E., Wood, Policarpo
• Primary Examiner(s): Roswell, Michael
• Application Number:
  US11/849,923
• Publication Number:
  US 20090064057A1
• Time in Patent Office: 2,450 Days
• Field of Search: 715/810, 715/717, 715/777, 715/853, 715/748
• US Class Current: 715/810
• 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. The information displayed can include a menu of the hierarchical menu system along with other information. The menu can include selectable media items. The other information can be related to the menu being displayed. In one embodiment, the invention can use a display screen having at least first and second portions, with the first portion displaying selectable media items (e.g., menu) and with the second portion displaying media information (e.g., graphical image) that is dependent on media items in the first portion or resident on the portable electronic device.

Claims

1. A method for presenting a display screen on a display of a portable electronic device, said 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, wherein the size of the second pane is determined dynamically dependent on contextually relevant information to be displayed on the identified display screen;

displaying selectable menu items in the first pane of the identified display screen; and

displaying the contextually relevant information in the second pane of the identified display screen, wherein the contextually relevant information comprises at least a graphical image;

wherein the width of the second pane is smaller than the width of the graphical image, and

wherein the graphical image is horizontally compacted or clipped to correlate to the width of the second pane.

2. A method as recited in claim 1, wherein the graphical image is related to at least one of the selectable menu items in the first pane.

3. A method as recited in claim 1, wherein the graphical image is related to a designated one of the selectable menu items in the first pane.

4. A method as recited in claim 3, wherein the designated one of the selectable menu items is an album, and the graphical image is album artwork for the album.

5. A method as recited in claim 3, wherein within the second pane, the graphical image is displayed in a skewed fashion to provide a three-dimensional (3D) effect.

6. A method as recited in claim 5, wherein the 3D effect is a two-dimensional rendering but the graphical image is displayed such that it has a depth of field.

7. A method as recited in claim 1, wherein the graphical image is skewed to provide a depth of field.

8. A method as recited in claim 1, wherein the graphical image is related to a media item stored on the portable electronic device.

9. A method as recited in claim 1,

wherein said method further comprises determining a configuration for the first and second panes of the identified display screen,

wherein said displaying of the selectable menu items in the first pane is in accordance with the determined configuration, and

wherein said displaying of the contextually relevant information in the second pane is in accordance with the determined configuration.

10. A method for presenting media information on a display of a portable electronic device, said method comprising:

displaying a first menu in a first portion of a display screen on the display, the first menu including a plurality of selectable menu items;

determining a first media item to be displayed from a plurality of media items resident on the portable electronic device;

displaying a graphic corresponding to the first media item in a second portion of the display screen on the display, wherein the size of the second portion is determined dynamically dependent on the graphic;

subsequently determining a second media item to be displayed from the plurality of media items resident on the portable electronic device;

enlarging the first portion of the display screen and decreasing the second portion of the display screen; and

thereafter displaying a graphic corresponding to the second media item in the second portion of the display screen on the display, wherein the graphic corresponding to the second media item is modified to fit within the decreased second portion of the display screen.

11. A method as recited in claim 10, wherein the graphic is a graphical image.

12. A method as recited in claim 10, wherein said displaying of the graphic corresponding to the second media item is displayed by cross-fading out the graphic corresponding to the first media item and cross-fading in the graphic corresponding to the second media item.

13. A method as recited in claim 10, where while said displaying displays the graphic corresponding to the second media item, the graphic is at least partially automatically panned in the second portion of the display screen.

14. A method as recited in claim 10, wherein said method further comprises:

receiving a selection of one of the selectable menu items in the first menu; and

displaying, in response to said receiving of the selection of one of the selectable menu items, a second menu in the first portion of a display screen on the display, the second menu including a plurality of selectable menu items.

15. A method as recited in claim 14, wherein the plurality of selectable menu items of the second menu are hierarchically categorized under the selected media item from the first menu.

16. A method as recited in claim 15, wherein said method further comprises:

determining a third media item to be displayed based on the set of media items resident on the portable electronic device that correspond to the second menu; and

displaying a graphic corresponding to the third media item in the second portion of the display screen on the display.

17. A method as recited in claim 15, wherein said method further comprises:

visually identifying one of the media items in the second menu; and

displaying, in the second portion of the display screen on the display, a graphic corresponding to the visually identified media item in the second menu.

18. A method as recited in claim 14, wherein the first menu is part of a display screen having a first layout,

wherein said method further comprises:

determining whether the second menu is part of a display screen having a second layout different than the first layout; and

transitioning from the first layout to the second layout by visually sliding out the first menu while sliding in the second menu, such that during transitioning a portion of the first menu is displayed while a portion of the second menu is displayed.

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

transitioning from displaying the first menu to the second menu by visually sliding out the first menu while sliding in the second menu, such that during transitioning a portion of the first menu is displayed while a portion of the second menu is displayed.

20. A computer readable medium including at least executable computer program code tangibly stored thereon for presenting a display screen on a display of a portable electronic device, said computer readable medium comprising:

computer program code for 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 portion and a second portion, wherein the size of the second portion is determined dynamically dependent on contextually relevant information to be displayed on the identified display screen;

computer program code for displaying selectable menu items in the first portion of the identified display screen; and

computer program code for displaying the contextually relevant information in the second portion of the identified display screen, wherein the contextually relevant information comprises at least a graphical image;

wherein the width of the second portion is smaller than the width of the graphical image, and

wherein the graphical image is horizontally compacted or clipped to correlate to the width of the second portion.

21. A computer readable medium as recited in claim 20, wherein the graphical image is related to a designated one of the selectable menu items in the first portion or that is related to a media item stored on the portable electronic device.

22. A computer readable medium as recited in claim 20, wherein within the second portion, the graphical image is displayed in a skewed fashion so as to have a depth of field.

23. A graphical user interface for a portable electronic device, comprising:

a first portion that displays a particular menu from a plurality of menus that form a hierarchical menu system, the particular menu including a plurality of selectable items; and

a second portion that displays at least a portion of a particular graphical image, the particular graphical image being chosen from a plurality of graphical images based on (i) a designated one of the selectable menu items in the first portion or (ii) a media item stored on the portable electronic device, wherein the size of the second portion is determined dynamically dependent on the graphical image,

wherein the width of the second portion is smaller than the width of the particular graphical image, and

wherein the particular graphical image is horizontally compacted or clipped to correlate to the width of the second portion.

24. 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 said display device,

wherein the graphical user interface includes at least

a first portion that displays a particular menu from a plurality of menus that form a hierarchical menu system, the particular menu including a plurality of selectable items; and

a second portion that displays at least a portion of a particular graphical image,

wherein the second portion is determined dynamically dependent on the graphical image, the particular graphical image being chosen from a plurality of graphical images based on (i) a designated one of the selectable menu items in the first portion or (ii) a media item stored on the portable electronic device,

wherein the width of the second portion is smaller than the width of the particular graphical image, and

wherein the particular graphical image is horizontally compacted or clipped to correlate to the width of the second portion.

25. A mobile computing device as recited in claim 24, wherein said mobile computing device is a handheld device.

26. A system for presenting a display screen on a display of a portable electronic device, said system comprising:

one or more processors;

memory storing instructions, which, when executed by the one or more processors, causes the one or more processors to perform operations 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, wherein the size of the second pane is determined dynamically dependent on contextually relevant information to be displayed on the identified display screen;

displaying selectable menu items in the first pane of the identified display screen; and

displaying the contextually relevant information in the second pane of the identified display screen, wherein the contextually relevant information comprises at least a graphical image;

wherein the width of the second pane is smaller than the width of the graphical image, and

wherein the graphical image is horizontally compacted or clipped to correlate to the width of the second pane.

27. A system as recited in claim 26, wherein the graphical image is related to at least one of the selectable menu items in the first pane.

28. A system as recited in claim 26, wherein the graphical image is related to a designated one of the selectable menu items in the first pane.

29. A system as recited in claim 28, wherein the designated one of the selectable menu items is an album, and the graphical image is album artwork for the album.

30. A system as recited in claim 28, wherein within the second pane, the graphical image is displayed in a skewed fashion to provide a three-dimensional (3D) effect.

31. A system as recited in claim 30, wherein the 3D effect is a two-dimensional rendering but the graphical image is displayed such that it has a depth of field.

32. A system as recited in claim 26, wherein the graphical image is skewed to provide a depth of field.

33. A system as recited in claim 26, wherein the graphical image is related to a media item stored on the portable electronic device.

34. A system as recited in claim 26,

wherein said method further comprises determining a configuration for the first and second panes of the identified display screen,

wherein said displaying of the selectable menu items in the first pane is in accordance with the determined configuration, and

wherein said displaying of the contextually relevant information in the second pane is in accordance with the determined configuration.