Graphical User Interface for Mobile Electronic Device

• US 20090064057A1
• 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: Wood, Policarpo, Bull, William E.
• Granted Patent: US 8,732,611 B2
• Time in Patent Office: Days
• US Class Current: 715/864
• 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;

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

displaying contextually relevant information in the second pane of the identified display screen.

2. A method as recited in claim 1, wherein the contextually relevant information is a graphical image that 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 contextually relevant information is a graphical image that 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 2, 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.

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

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

10. A method as recited in claim 1, wherein the first pane is larger than the second pane.

11. 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.

12. 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;

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

thereafter displaying a graphic corresponding to the second media item in the second potion of the display screen on the display.

13. A method as recited in claim 12, wherein the graphic is a graphical image.

14. A method as recited in claim 12, 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.

15. A method as recited in claim 12, 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.

16. A method as recited in claim 12, 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.

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

18. A method as recited in claim 17, 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.

19. A method as recited in claim 17, 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.

20. A method as recited in claim 16, 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.

21. A method as recited in claim 16, 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.

22. A method for presenting media items associated with a media collection, said method comprising:

(a) displaying a list of media collection designators corresponding to media collections;

(b) visually identifying one of the media collection designators within the list of media collection designators being displayed;

(c) receiving a user selection of one of the media collections that corresponds to the identified media collection designator;

(d) displaying a list of media item designators corresponding to media items within the selected media collection while no longer displaying the list of media collection designators;

(e) visually identifying one of the media items within the list of media item designators being displayed;

(f) displaying, while said displaying (d) also still displays the list of media item designators, a graphical image corresponding to the selected media collection or the identified media item;

(g) receiving a user selection of one of the media items that corresponds to the identified media item;

(h) displaying the graphical image corresponding to the selected media collection or the identified media item while no longer displaying the list of media item designators; and

(i) initiating playback of the selected media item.

23. A method as recited in claim 22, wherein said displaying (f) of the graphical image displays the graphical image skewed so as to have a depth of field.

24. A method as recited in claim 22, wherein the graphical image is horizontally compacted or clipped before displayed by said displaying (f).

25. A method as recited in claim 22, wherein the media collections are albums, and the graphical image is album artwork for a selected one of the albums.

26. 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;

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

computer program code for displaying contextually relevant information in the second portion of the identified display screen.

27. A computer readable medium as recited in claim 26, wherein the contextually relevant information is a graphical image that 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.

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

29. A computer readable medium as recited in claim 26, wherein the first portion is larger than the second portion.

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

a first portion that display 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.

31. 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 display 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.

32. A mobile computing device as recited in claim 31, wherein said mobile computing device is a handheld device.