Managing Items in a User Interface

• US 20120084689A1
• Filed: 09/30/2010
• Published: 04/05/2012
• Est. Priority Date: 09/30/2010
• Status: Active Grant

• Current Assignee: Apple Inc.
• Original Assignee: Apple Inc.
• Inventors: Bernstein, Jeffrey Traer, Victor, B. Michael, Ledet, Raleigh Joseph, Cieplinksi, Avi E., Forster, Kristin, Federighi, Craig
• Granted Patent: US 9,323,442 B2
• Time in Patent Office: Days
• US Class Current: 715/769
• CPC Class Codes: G06F 3/0486 Drag-and-drop

Abstract

User interface changes related to moving items in a user interface are disclosed. An operation (e.g., a drag operation) can be initiated on selected items by moving a cursor or pointing device in the user interface, and an animation can be presented illustrating representations of the selected items moving from their respective original locations toward a current location of the cursor or pointing device and forming a cluster in proximity to the current location of the cursor or pointing device. As the cluster of items is moved over a container object in the user interface, the representations of the items can adopt the appearance style defined by that container object. The representations of the items can also be shown to depart from the cluster and move toward anticipated locations of the items in the container object as a preview of a drop operation into the container object.

Claims

1. A computer-implemented method performed by one or more processors of a device, comprising:

receiving input; and

in response to the input, moving representations of one or more selected items from the items'"'"' respective original locations in the user interface toward a current location of a pointer in the user interface and forming a cluster of the representations in proximity to the pointer.

2. The method of claim 1, further comprising:

arranging the representations in the cluster in a stack.

3. The method of claim 1, further comprising:

expanding the cluster to show individual representations of the selected items in response to a defined input command.

4. The method of claim 1, wherein motions of the items'"'"' representations in the user interface are asynchronous.

5. The method of claim 1, further comprising:

causing a count indicator to be presented in proximity to the cluster, the count indicator showing a count of item representations in the cluster.

6. The method of claim 1, wherein the pointer is a finger or stylus on a touch-sensitive display.

7. The method of claim 1, wherein respective locations of the items'"'"' representations are independently variable within a defined range in the cluster.

8. The method of claim 1, further comprising:

detecting continued movement of the pointer dragging the one or more selected items in the user interface; and

animating the cluster of the items'"'"' representations to follow the movement of the pointer in the user interface.

9. The method of claim 8, wherein each item representation in the cluster moves along a path that is independent of respective paths of other item representations in the cluster while following the continued movement of the pointer.

10. The method of claim 8, wherein each item representation in the cluster moves at a speed that is different than respective speeds of other item representations in the cluster while following the continued movement of the pointer.

11. The method of claim 1, wherein the one or more items were selected from a first container in the user interface and each item'"'"'s representation has a respective first appearance associated with the first container, and wherein the method further comprises:

detecting the current location of the pointer within a drop zone of a second container in the user interface; and

while the current location of the pointer remains within the drop zone of the second container, causing the representations of the selected items to adopt respective second appearances associated with the second container.

12. The method of claim 11, wherein each of the first container and the second container is one of a desktop or a window on the desktop, each of the first container and the second container is associated with one of a large icon view, a small icon view, a list view, a column view, or a picture view, respectively, and each of the views is in either a free-arranged state or a keep-arranged state.

13. The method of claim 11, wherein at least one of the first container and the second container is an application window and the application window is operable to present the representations of the selected items in an application-defined view.

14. The method of claim 11, wherein the application-defined view of the selected items are defined through an application programming interface (API) associated with the user interface.

15. The method of claim 11, further comprising:

detecting an input requesting a preview of the items'"'"' representations being dropped in the second container; and

in response to detecting the input, animating the representations of the selected items to depart from the cluster and move toward their respective anticipated locations in the second container.

16. The method of claim 15, wherein the input requesting the preview is a detected hovering of the pointer over the drop zone of the second container.

17. The method of claim 15, wherein the representations of the selected items are displayed at or in proximity to the items'"'"' respective anticipated locations as respective semi-transparent overlays.

18. The method of claim 15, wherein the anticipated location of at least one of the selected items is in an area of the second container that is not currently visible in the user interface, and the representation of the at least one item departs from the cluster and moves into the invisible area of the second container along a respective path in the user interface.

19. The method of claim 15, further comprising:

detecting an input releasing the one or more selected items into the drop zone of the second container; and

in response to the releasing input, causing the one or more selected items to be inserted at the respective anticipated locations of the selected items in the second container.

20. The method of claim 19, wherein, for item representations having their respective anticipated locations within a visible area of the second container, the item representations change from a semi-transparent state to an opaque state upon completion of the items'"'"' insertion into the item'"'"'s respective anticipated locations.

21. The method of claim 15, further comprising:

detecting a movement of the pointer exiting the second container; and

in response to the movement exiting the second container, animating the respective representations of the one or more selected items to move from the items'"'"' respective anticipated locations in the second container toward the current location of the pointer and rejoin the cluster in proximity to the current location of the pointer.

22. The method of claim 11, further comprising:

monitoring a motion characteristic of the pointer for dragging the representations of the one or more selected items in the user interface; and

causing the representations of the selected items to adopt the respective second appearances upon determination that the motion characteristic of the pointer over the drop zone of the second container satisfies a defined criterion.

23. The method of claim 22, wherein the motion characteristic of the pointer is one or more of a speed and an acceleration of the pointer in the user interface, and the defined criterion specifies characteristic values of the speed or the acceleration that would cause the items'"'"' representations to adopt their respective second appearances.

24. The method of claim 23, wherein the characteristic values of the speed or the acceleration are user-specified values.

25. A computer-implemented method performed by one or more processors of a device, comprising:

receiving an input dragging respective representations of one or more selected items from a first container into a drop zone of a second container, the respective representation of each item having a respective first appearance associated with the first container; and

while the respective representations of the one or more selected items are at least partially within the drop zone of the second container, causing the representations of the selected items to adopt respective second appearances associated with the second container.

26. The method of claim 25, wherein the respective first appearance of each item is defined through an application programming interface (API) by the first container and the respective second appearance of each item is defined through the API by the second container.

27. The method of claim 25, wherein the representation of each item includes two or more layers for at least one of the item'"'"'s first and second appearances, and the method further comprising:

animating the respective representations of the one or more selected items to illustrate a respective transition from the items'"'"' first appearances to the items'"'"' second appearances, wherein a respective animation is performed on each of the two or more layers to illustrate the transition.

28. The method of claim 27, wherein each of the two or more layers is associated with a respective animation style for the respective animation performed on the layer.

29. The method of claim 25, further comprising:

while the respective representations of the one or more selected items are at least partially within an area of an ineligible drop target, causing the representations of the selected items to adopt respective third appearances associated with the first container.

30. The method of claim 29, wherein the respective third appearances are defined through an application programming interface (API) by the first container.

31. The method of claim 25, wherein the respective representations of the selected items are in a first formation when shown in their respective first appearances, and the respective representations of the selected items are in a second formation when shown in their respective second appearances, and wherein the first formation is defined by the first container and the second formation is defined by the second container through an application programming interface (API).

32. A computer-readable storage medium having instructions stored thereon, which, when executed by one or more processors, cause the one or more processors to perform operations comprising:

receiving input; and

in response to the input, moving representations of one or more selected items from the items'"'"' respective original locations in the user interface toward a current location of a pointer in the user interface and forming a cluster of the representations in proximity to the pointer.

33. A system, comprising:

one or more processors; and

memory having instructions stored thereon, which, when executed by the one or more processors, cause the one or more processors to perform operations comprising;

receiving input; and

in response to the input, moving representations of one or more selected items from the items'"'"' respective original locations in the user interface toward a current location of a pointer in the user interface and forming a cluster of the representations in proximity to the pointer.