Electronic device with image based browsers

• US 8,736,557 B2
• Filed: 06/26/2008
• Issued: 05/27/2014
• Est. Priority Date: 09/11/2006
• Status: Active Grant

• Current Assignee: Apple Inc.
• Original Assignee: Apple Inc.
• Inventors: Chaudhri, Imran
• Primary Examiner(s): Mengistu, Amare
• Assistant Examiner(s): LAM, VINH TANG
• Application Number:
  US12/215,651
• Publication Number:
  US 20090002335A1
• Time in Patent Office: 2,161 Days
• Field of Search: 345/173, 715700-863
• 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 touch screen display of an electronic device, the method comprising:

determining whether the electronic device is in a first orientation or a second orientation;

in accordance with a determination that the electronic device is in the first orientation, presenting, using a media player of the electronic device, a first graphical user interface on the touch screen display for scrolling through a list comprising one or more entries, wherein each entry in the list corresponds to a media item in the set of media items; and

in accordance with a determination that the electronic device is in the second orientation, presenting, using the media player of the electronic device, a second graphical user interface on the screen display, wherein presenting the second graphical user interface includes;

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

detecting a gesture input with said screen display;

determining that the gesture input comprises a navigational input, wherein the navigational input is a slide gesture of one or more of the user'"'"'s fingers on or over the touch screen display; and

in accordance with a determination that the detected gesture input is a navigational input;

characterizing the navigational input;

determining a second set of visual representations from the group of visual representations based on at least the characterized navigational input, the second set of visual representations including at least one visual representation not in the first set of visual representations;

determining a transition mode from a plurality of transition modes based on the characterized navigational input, wherein the plurality of transition modes includes at least a first traversal mode and a second traversal mode that is faster than the first traversal mode; and

dynamically transitioning from display of the first set of visual representations to the second set of visual representations in accordance with the determined transition mode based on the characterized navigational input.

2. The method as recited in claim 1, wherein said characterizing of the navigational input includes characterizing at least two of the group consisting of position, direction, speed, length, number of fingers used and duration of the slide gesture;

wherein the determined transition mode is based on the characterized at least two of the group consisting of position, direction, speed, length, number of fingers used and duration.

3. The 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. The 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. The method as recited in claim 1, wherein said characterizing the navigational input comprises determining an input direction of the navigational 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 screen display as the input direction.

6. The 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.

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

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

9. The method as recited in claim 8, wherein if another navigational input is received while said transitioning is slowing gradually to a stop, said transitioning is stopped.

10. The 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 other of the visual representations in the first set of visual representations being displayed.

11. The method as recited in claim 10, 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.

12. The method as recited in claim 10, 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 screen display.

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

14. The method as recited in claim 1, further comprising:

visually identifying one of the visual representations from the first set of visual representations, the identified one of the visual representations being a graphical representation of a collection of media items;

detecting a second gesture input with the touch screen display, the second gesture input requesting information about the collection of media items; and

shifting, subsequent to receiving second gesture input, 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.

15. The method as recited in claim 14, wherein said shifting is an animated transition from the graphical representation to the list representation.

16. The method as recited in claim 15, wherein the list representation is larger than the graphical representation, and wherein the graphical representation enlarges during the animated transition to the list representation.

17. The method as recited in claim 15, wherein the animated transition provides the visual effect of appearing as if the graphical representation is being flipped over.

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

19. The method as recited in claim 14, wherein said shifting is an animated rotation of the graphical representation, and wherein the direction of the animated rotation depends on a direction associated with the second gesture input.

20. The method as recited in claim 14, wherein said shifting 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.

21. The method as recited in claim 14, wherein the collection of media items pertains to an album, and wherein the media items are songs.

22. The method as recited in claim 14, 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 electronic device in response to the user selection.

23. A non-transitory computer readable storage medium including at least executable computer program code stored therein for browsing through a group of visual representations on a touch screen display of an electronic device, said computer readable medium comprising:

computer program code for determining whether the electronic device is in a first orientation or a second orientation;

computer program code for presenting a first graphical user interface on the touch screen display for scrolling through a list comprising one or more entries in accordance with a determination that the electronic device is in the first orientation, wherein each entry in the list corresponds to a media item in the set of media items; and

computer program code for presenting a second graphical user interface on the touch screen display in accordance with a determination that the electronic device is in the second orientation, wherein the second graphical user interface is configured to;

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

detect a gesture input with said screen display;

determine that the gesture input comprises a navigational input, wherein the navigational input is a slide gesture of one or more of the user'"'"'s fingers on or over the touch screen display; and

in accordance with a determination that the detected gesture input is a navigational input;

characterize the navigational input;

determine a second set of visual representations from the group of visual representations based on at least the characterized navigational input, the second set of visual representations including at least one visual representation not in the first set of visual representations;

determine a transition mode from a plurality of transition modes based on the characterized navigational input, wherein the plurality of transition modes include at least a first traversal mode and a second traversal mode that is faster than the first traversal mode; and

dynamically transition, from display of the first set of visual representations to the second set of visual representations in accordance with the determined transition mode based on the characterized navigational input.

24. The non-transitory computer readable storage medium as recited in claim 23, wherein said characterizing of the navigational input includes characterizing at least two of the group consisting of position, direction, speed, length, number of fingers used and duration of the slide gesture;

and

wherein said determining the transition mode determines the transition mode based on the characterized at least two of the group consisting of position, direction, speed, length, number of fingers used and duration.

25. The non-transitory computer readable storage medium as recited in claim 23,

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.

26. The non-transitory computer readable storage medium as recited in claim 23,

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.

27. The non-transitory computer readable storage medium as recited in claim 23, wherein said characterizing the navigational input comprises determining an input direction of the navigational 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 display as the input direction.

28. The non-transitory computer readable storage medium as recited in claim 23, 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.

29. The non-transitory computer readable storage medium as recited in claim 23, wherein if said transitioning is put in motion based on the navigational input, then said transitioning is provided with an inertial effect.

30. The non-transitory computer readable storage medium as recited in claim 23, wherein if said transitioning is put in motion based on the navigational input, then after the navigational input is removed from the touch screen display, said transitioning continues such that the motion associated with the transitioning slows gradually to a stop.

31. The non-transitory computer readable storage medium as recited in claim 30, wherein if another navigational input is received while the transitioning is slowing gradually to a stop, the transitioning is stopped.

32. The non-transitory computer readable storage medium as recited in claim 23, wherein one of the visual representations in the first set of visual representations is distinctively displayed as compared to other of the visual representations in the first set of visual representations being displayed.

33. The non-transitory computer readable storage medium as recited in claim 32, wherein one of the visual representations in the second set of visual representations is distinctively displayed as compared to other of the visual representations in the second set of visual representations being displayed.

34. The non-transitory computer readable storage medium as recited in claim 32, 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 display.

35. The non-transitory computer readable storage medium as recited in claim 34, 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.

36. The non-transitory computer readable storage medium as recited in claim 23, wherein said computer readable storage medium further comprises:

computer program code for receiving a user selection of one of the media items in the list; and

computer program code for initiating playing of the selected media item by the electronic device in response to the user selection.

37. The non-transitory computer readable storage medium as recited in claim 23, further comprising:

computer program code for visually identifying one of the visual representations from the first set of visual representations, the identified one of the visual representations being a graphical representation of a collection of media items;

computer program code for detecting a second gesture input with the touch screen display, the second gesture input requesting information about the collection of media items; and

computer program code for shifting, subsequent to receiving the second gesture input, 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.

38. The non-transitory computer readable storage medium as recited in claim 37, wherein said shifting is an animated transition from the graphical representation to the list representation.

39. The non-transitory computer readable storage medium as recited in claim 38, wherein the list representation is larger than the graphical representation, and wherein the graphical representation enlarges during the animated transition to the list representation.

40. The non-transitory computer readable storage medium as recited in claim 38, wherein the animated transition provides the visual effect of appearing as if the graphical representation is being flipped over.

41. The non-transitory computer readable storage medium as recited in claim 38, wherein during the animated transition, the graphical representation is skewed such that the graphical representation appears to be moving between foreground and background.

42. The non-transitory computer readable storage medium as recited in claim 37, wherein said shifting is an animated rotation of the graphical representation, and wherein the direction of the animated rotation depends on a direction associated with the second gesture input.

43. The non-transitory computer readable storage medium as recited in claim 37, wherein said shifting 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.

44. The non-transitory computer readable storage medium as recited in claim 37, wherein the collection of media items pertains to an album, and wherein the media items are songs.

45. An electronic device, comprising:

one or more processors;

a touch screen display; and

memory storing one or more programs to be executed by the one or more processors, the one or more programs comprising instructions for;

determining whether the electronic device is in a first orientation or a second orientation;

in accordance with a determination that the electronic device is in the first orientation, presenting, using a media player of the electronic device, a first graphical user interface on the screen display for scrolling through a list comprising one or more entries, wherein each entry in the list corresponds to a media item in the set of media items; and

in accordance with a determination that the electronic device is in the second orientation, presenting, using the media player of the electronic device, a second graphical user interface on the screen display, wherein presenting the second graphical user interface includes;

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

detecting a gesture input with said screen display;

determining that the gesture input comprises a navigational input, wherein the navigational input is a slide gesture of one or more of the user'"'"'s fingers on or over the screen display; and

in accordance with a determination that the detected gesture input is a navigational input;

characterizing the navigational input;

determining a second set of visual representations from the group of visual representations based on at least the characterized navigational input, the second set of visual representations including at least one visual representation not in the first set of visual representations;

determining a transition mode from a plurality of transition modes based on the characterized navigational input, wherein the plurality of transition modes includes at least a first traversal mode and a second traversal mode that is faster than the first traversal mode; and

dynamically transitioning from display of the first set of visual representations to the second set of visual representations in accordance with the determined transition mode based on the characterized navigational input.

46. The electronic device as recited in claim 45, wherein said characterizing of the navigational input includes characterizing at least two of the group consisting of position, direction, speed, length, number of fingers used and duration of the slide gesture;

wherein the determined transition mode is based on the characterized at least two of the group consisting of position, direction, speed, length, number of fingers used and duration.

47. The electronic device as recited in claim 45,

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.

48. The electronic device as recited in claim 45,

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.

49. The electronic device as recited in claim 45, wherein said characterizing the navigational input comprises determining an input direction of the navigational 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 screen display as the input direction.

50. The electronic device as recited in claim 45, 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.

51. The electronic device as recited in claim 45, wherein if said transitioning is put in motion based on the navigational input, then said transitioning is provided with an inertial effect.

52. The electronic device as recited in claim 45, wherein if said transitioning is put in motion based on the navigational input, then after the navigational input is removed from the screen display, said transitioning continues such that the motion associated with said transitioning slows gradually to a stop.

53. The electronic device as recited in claim 52, wherein if another navigational input is received while said transitioning is slowing gradually to a stop, said transitioning is stopped.

54. The electronic device as recited in claim 45, wherein one of the visual representations in the first set of visual representations is distinctively displayed as compared to other of the visual representations in the first set of visual representations being displayed.

55. The electronic device as recited in claim 54, 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.

56. The electronic device as recited in claim 54, 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 screen display.

57. The electronic device as recited in claim 56, 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.

58. The electronic device as recited in claim 45, wherein the one or more programs further comprise instructions for:

visually identifying one of the visual representations from the first set of visual representations, the identified one of the visual representations being a graphical representation of a collection of media items;

detecting a second gesture input with the screen display, the second gesture input requesting information about the collection of media items; and

shifting, subsequent to receiving second gesture input, 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.

59. The electronic device as recited in claim 58, wherein said shifting is an animated transition from the graphical representation to the list representation.

60. The electronic device as recited in claim 59, wherein the list representation is larger than the graphical representation, and wherein the graphical representation enlarges during the animated transition to the list representation.

61. The electronic device as recited in claim 59, wherein the animated transition provides the visual effect of appearing as if the graphical representation is being flipped over.

62. The electronic device as recited in claim 59, wherein during the animated transition, the graphical representation is skewed such that the graphical representation appears to be moving between foreground and background.

63. The electronic device as recited in claim 58, wherein said shifting is an animated rotation of the graphical representation, and wherein the direction of the animated rotation depends on a direction associated with the second gesture input.

64. The electronic device as recited in claim 58, wherein said shifting 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.

65. The electronic device as recited in claim 58, wherein the collection of media items pertain to an album, and wherein the media items are songs.

66. The electronic device as recited in claim 58, wherein the one or more programs further comprise instructions for:

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

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