Electronic device with image based browsers

• US 20090002335A1
• Filed: 06/26/2008
• Published: 01/01/2009
• Est. Priority Date: 09/11/2006
• Status: Active Grant

• Current Assignee: Apple Inc.
• Original Assignee: Apple Inc.
• Inventors: Chaudhri, Imran
• Granted Patent: US 8,736,557 B2
• Time in Patent Office: Days
• US Class Current: 345/173
• CPC Class Codes: G06F 16/44 Browsing; Visualisation therefor
• CPC Class Codes: G06F 16/904 Browsing; Visualisation therefor for navigating the web G06F16/954; browsing optimisation for the web G06F16/957
• CPC Class Codes: G06F 3/04815 Interaction with a metaphor-based environment or interaction object displayed as three-dimensional, e.g. changing the user viewpoint with respect to the environment or object
• CPC Class Codes: G06F 3/0482 Interaction with lists of selectable items, e.g. menus
• CPC Class Codes: G06F 3/04883 for inputting data by handwriting, e.g. gesture or text

Abstract

Methods and systems that improve the way media is played, sorted, modified, stored and cataloged on a portable media player are disclosed. One aspect relates to an image based browser that allows a user to navigate through and select images that are related to media items.

Claims

1. A method for browsing through a group of visual representations on a display of a portable electronic device having a touch screen, said method comprising:

displaying a first set of visual representations from the group of visual representations;

receiving a navigation input via the touch screen;

characterizing the navigation input;

determining a second set of visual representations from the group of visual representations based on at least the characterized navigation input;

determining transition characteristics based on the characterized navigation input; and

dynamically transitioning from display of the first set of visual representations to the second set of visual representations.

2. A method as recited in claim 1, wherein said characterizing of the navigation input is based on at least two of position, direction, speed and duration of the navigation input.

3. A method as recited in claim 1,

wherein at least a plurality of the first set of visual representations are displayed in a skewed manner to give the appearance of being displayed in a tilted arrangement, and

wherein at least a plurality of the second set of visual representations are displayed in a skewed manner to give the appearance of being displayed in a tilted arrangement.

4. A method as recited in claim 1,

wherein at least a plurality of the first set of visual representations are displayed with a three-dimensional appearance, though displayed in two-dimensions, and

wherein at least a plurality of the second set of visual representations are displayed with a three-dimensional appearance, though displayed in two-dimensions.

5. A method as recited in claim 1, wherein said dynamically transitioning from display of the first set of visual representations to the second set of visual representations comprises visually depicting a flipping action through a plurality of visual representations such that the second set of visual representations are traversed to and displayed.

6. A method as recited in claim 5, wherein the group of visual representations has a sequential order, and wherein said transitioning dynamically transitions from display of the first set of visual representations to the second set of visual representations in accordance with the sequential order.

7. A method as recited in claim 1, wherein the group of visual representations has a sequential order, and wherein said transitioning dynamically transitions from display of the first set of visual representations to the second set of visual representations in accordance with the sequential order.

8. A method as recited in claim 1, wherein said characterizing the navigation input comprises determining an input direction of the navigation input, and wherein said transitioning from display of the first set of visual representations to the second set of visual representations is performed in the same direction relative to the touch screen as the input direction.

9. A method as recited in claim 1, wherein said traversing is performed in a fast traversal mode or a slow traversal mode based on the navigation input.

10. A method as recited in claim 9, wherein the visual representation of a plurality of the visual representations being displaying during said transitioning are visually presented differently in the slow traversal mode than they are in the fast traversal mode.

11. A method as recited in claim 1, wherein said transitioning from display of the first set of visual representations to the second set of visual representations comprises:

compressing or uncompressing one or more of the visual representations; and

skewing or unskewing one or more of the visual representations.

12. A method as recited in claim 1, wherein if said transitioning is put in motion based on the navigation input, then said transitioning is provided with an inertial effect.

13. A method as recited in claim 1, wherein if said transitioning is put in motion based on the navigation input, then after the navigation input is removed from the touch screen, said transitioning continues such that the motion associated with said transitioning slows gradually to a stop.

14. A method as recited in claim 13, wherein if another navigation input is received while said transitioning is slowing gradually to a stop, said transitioning is stopped.

15. A method as recited in claim 1, wherein one of the visual representations in the first set of visual representations is distinctively displayed as compared to the other of the visual representations in the first set of visual representations being displayed.

16. A method as recited in claim 15, wherein one of the visual representations in the second set of visual representations is distinctively displayed as compared to the other of the visual representations in the second set of visual representations being displayed.

17. A method as recited in claim 15, wherein the one of the visual representations in the first set of visual representations being distinctively displayed is displayed approximately in the center of the touch screen.

18. A method as recited in claim 17, wherein the other of the visual representations in the first set of visual representations are displayed in a skewed fashion arranged side by side at both sides of the one of the visual representations in the first set of visual representations being distinctively displayed.

19. A method as recited in claim 1,

wherein at least a plurality of the first set of visual representations are displayed in a skewed manner to have a trapezoidal format, and

wherein at least a plurality of the second set of visual representations are displayed in a skewed manner to have a trapezoidal format.

20. A method as recited in claim 19,

wherein each of the at least the plurality of the first set of visual representations are presented by lowering a top right corner and raising the bottom right corner of such representations, and

wherein each of the at least the plurality of the second set of visual representations are presented by lowering a top left corner and raising the bottom left corner of such representations.

21. A method for displaying a user interface on a display of a portable electronic device, said method comprising:

displaying an image associated with a group of digital media assets in accordance with a first graphical user interface configuration;

determining whether orientation of the portable electronic device has changed; and

displaying an arrangement of images in accordance with a second graphical user interface configuration when said determining determines that the orientation of the portable electronic device has changed,

wherein each of the images in the arrangement of images is associated with a different group of digital media assets, and

wherein one of the images in the arrangement of images being displayed in accordance with the second graphical user interface is the same image as the image being displayed in accordance with the first graphical user interface.

22. A method as recited in claim 21, wherein said method further comprises:

transitioning from the first graphical user interface configuration to the second graphical user interface configuration when said determining determines that the orientation of the portable electronic device has changed.

23. A method as recited in claim 22, wherein said transitioning is animated.

24. A method as recited in claim 22, wherein said transitioning is animated such that the second graphical user interface configuration result from morphing from the first graphical user interface to the second graphical user interface.

25. A method as recited in claim 22, wherein said transitioning comprises:

rotating the image associated with a group of digital media assets in accordance with a first graphical user interface configuration; and

animating transition from the first graphical user interface configuration to the second graphical user interface configuration,

wherein said rotating and animating are performed concurrently.

26. A method as recited in claim 25, wherein said rotating is approximately ninety degrees.

27. A method as recited in claim 25,

wherein said determining determines a device rotation direction in which the orientation of the portable electronic device is changed, and

wherein said rotating has an image rotation direction that is opposite the device rotation direction.

28. A method as recited in claim 25, wherein said animating transition from the first graphical user interface configuration to the second graphical user interface configuration comprises:

reducing the size of the image displayed in the first graphical user interface; and

fading in additional ones of the images of an arrangement of images in accordance with the second graphical user interface configuration.

29. A method as recited in claim 28, wherein the additional ones of the images of the arrangement of images are displayed in a skewed manner.

30. A method as recited in claim 25,

wherein the first graphical user interface configuration presents a media playback graphical user interface,

wherein the second graphical user interface configuration presents a browser graphical user interface,

wherein the first graphical user interface configuration includes at least one playback control and at least a status indicator, and

wherein said animating transition from the first graphical user interface configuration to the second graphical user interface configuration includes at least:

reducing the size of the image displayed in the first graphical user interface;

fading out the at least one playback control and the at least a status indicator; and

fading in additional ones of the images of an arrangement of images in accordance with the second graphical user interface configuration.

31. A method as recited in claim 21, wherein the first graphical user interface configuration presents the image associated with a group of digital media assets in a portrait graphical user interface, and wherein the second graphical user interface configuration presents the arrangement of images associated with different groups of digital media assets in a landscape graphical user interface,

32. A method as recited in claim 31, wherein the first graphical user interface configuration presents a media playback graphical user interface, and wherein the second graphical user interface configuration presents a browser graphical user interface.

33. A method for presenting representations of one or more media items on a display of a portable electronic device, said method comprising:

displaying a graphical representation of a collection of media items;

receiving a user input with respect to the portable electronic device, the user input requesting information about the collection of media items; and

transitioning from displaying of the graphical representation of the collection of media items to displaying a list representation of the collection of media items, the list representation presenting a list of at least a plurality of the media items within the collection of media items.

34. A method as recited in claim 33, wherein the graphical representation and the list representation are images.

35. A method as recited in claim 33, wherein said transitioning is an animated transition from the graphical representation to the list representation.

36. A method as recited in claim 35, wherein the list representation is larger than the graphical representation, and wherein the graphical representation enlarges during the animated transition to the list representation.

37. A method as recited in claim 35, wherein the animated transition provides the visual effect of appearing as if the graphical representation is being flipped over.

38. A method as recited in claim 35, wherein during the animated transition, the graphical representation is skewed such that the graphical representation appears to be moving between foreground and background.

39. A method as recited in claim 33, wherein said transitioning is an animated rotation of the graphical representation, and wherein the direction of the animated rotation depends on a direction associated with the user input.

40. A method as recited in claim 33, wherein said transitioning is an animated rotation of the graphical representation to the list representation which is presented as being on a back surface of the graphical representation.

41. A method as recited in claim 33, wherein the collection of media items pertains to an album, and wherein the media items are songs.

42. A method as recited in claim 33, wherein the user input is a touch input with the display of the portable electronic device.

43. A method as recited in claim 42, wherein said transitioning is an animated rotation of the graphical representation, wherein the touch input is a sliding gesture, and wherein the direction of the animated rotation depends on a direction associated with the sliding gesture.

44. A method as recited in claim 33, wherein said method further comprises:

receiving a user selection of one of the media items in the list; and

initiating playing of the selected media item by the portable electronic device in response to the user selection.

45. A portable electronic device, comprising:

a display;

a processing device configured to present an image based browser on display; and

a user input device for receiving user input for controlling said image based browser,

wherein the image based browser includes at least

a front primary image displayed in a primary position; and

a plurality of secondary images displayed in secondary positions, the secondary images being displayed is a skewed manner to give the appearance of being displayed in a tilted manner.

46. A portable electronic device as recited in claim 45, wherein said user input device is a touch-sensitive user input device.

47. A portable electronic device as recited in claim 46, wherein said touch-sensitive user input device is affixed to or integral with said display.

48. A portable electronic device as recited in claim 47, wherein on receiving a certain touch input with said touch-sensitive user input device, said processing device performs an animated rotation of the front primary image so as to present a rear primary image in its place.

49. A portable electronic device as recited in claim 48, wherein the certain touch input is a sliding gesture, and wherein the direction of the animated rotation depends on a direction associated with the sliding gesture.

50. A portable electronic device as recited in claim 45,

wherein the first primary image pertains to a particular collection of media items, and

wherein the rear primary image presents a list of selectable media items associated with the particular collection of media items.

51. A portable electronic device as recited in claim 50, wherein said user input device is configured to receive a user selection of one of the selectable media items in the list, and wherein playback of the selected media item is initiated by said processing device in response to the user selection.

52. A portable electronic device as recited in claim 50, wherein the particular collection of media items pertains to a particular album, and wherein the media items are songs of the particular album.

53. An image based browser configured to be displayed on a display of a portable electronic device, said image based browser comprising:

a front primary image displayed in a primary position; and

a plurality of secondary images displayed in secondary positions, the secondary images being displayed is a skewed manner to give the appearance of being displayed in a tilted arrangement.

54. An image based browser as recited in claim 53, wherein the secondary images have a three-dimensional appearance, though displayed in two-dimensions.

55. An image based browser as recited in claim 53, wherein on receiving user input, the front primary image transitions to a rear primary image.

56. An image based browser as recited in claim 55, wherein the transition from the front primary image to the rear primary image is animated.

57. An image based browser as recited in claim 56, wherein the animated transition appears as a flipping sequence from the front primary image to the rear primary image.

58. An image based browser as recited in claim 56, wherein the user input indicates a direction of the transition.

59. An image based browser as recited in claim 56,

wherein the first primary image pertains to a particular collection of media items, and

wherein the rear primary image presents a list of selectable media items associated with the particular collection of media items.

60. An image based browser as recited in claim 59, wherein the particular collection of media items pertains to a particular album, and wherein the media items are songs of the particular album.

61. An image based browser as recited in claim 53, wherein the secondary images are horizontally compressed and arranged in a horizontal stack on first and/or second sides of the front primary image.

62. An image based browser as recited in claim 53, wherein one or more of said primary image and the secondary images are displayed with a visual effect.

63. An image based browser as recited in claim 62, wherein the visual effect is a reflection or shadow.

64. A computer readable medium including at least executable computer program code stored therein for browsing through a group of visual representations on a display of a handheld electronic device having a touch-sensitive surface, said computer readable medium comprising:

computer program code for displaying a first set of visual representations from the group of visual representations;

computer program code for receiving a navigation input via the touch screen;

computer program code for characterizing the navigation input;

computer program code for determining a second set of visual representations from the group of visual representations based on at least the characterized navigation input;

computer program code for determining transition characteristics based on the characterized navigation input; and

computer program code for dynamically transitioning from display of the first set of visual representations to the second set of visual representations.

65. A computer readable medium including at least executable computer program code stored therein for displaying a user interface on a display of a portable electronic device, said computer readable medium comprising:

computer program code for displaying an image associated with a group of digital media assets in accordance with a first graphical user interface configuration;

computer program code for determining whether orientation of the portable electronic device has changed; and

computer program code for displaying an arrangement of images in accordance with a second graphical user interface configuration when said determining determines that the orientation of the portable electronic device has changed,

wherein each of the images in the arrangement of images is associated with a different group of digital media assets, and

wherein one of the images in the arrangement of images being displayed in accordance with the second graphical user interface is the same image as the image being displayed in accordance with the first graphical user interface.

66. A computer readable medium including at least executable computer program code stored therein for presenting representations of one or more media items on a display of a portable electronic device, said computer readable medium comprising:

computer program code for displaying a graphical representation of a collection of media items;

computer program code for receiving a user input with respect to the portable electronic device, the user input requesting information about the collection of media items; and

computer program code for transitioning from displaying of the graphical representation of the collection of media items to displaying a list representation of the collection of media items, the list representation presenting a list of at least a plurality of the media items within the collection of media items.