Multi-panel user interface

• US 8,302,026 B2
• Filed: 11/28/2008
• Issued: 10/30/2012
• Est. Priority Date: 11/28/2008
• Status: Active Grant

• Current Assignee: Microsoft Technology Licensing LLC (Microsoft Corporation)
• Original Assignee: Microsoft Corporation
• Inventors: Wang, Min, Wang, Jian, Zhang, Haidong, Zhang, Chunhui, Zhu, Xiangwei, Yang, Xiao
• Primary Examiner(s): Lo, Weilun
• Assistant Examiner(s): Kujundzic, Dino
• Application Number:
  US12/324,975
• Publication Number:
  US 20100138767A1
• Time in Patent Office: 1,432 Days
• Field of Search: 715/769, 715/778, 715/781, 715/788, 715/790, 715/792, 715/798, 715/800
• US Class Current: 715/788
• CPC Class Codes: G06F 2203/04803 Split screen, i.e. subdividing the display area or the window area into separate subareas
• CPC Class Codes: G06F 3/0481 based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance

Abstract

A user interface and techniques for presenting content in a panel-based layout are described. The user interface has one or more demarcation bars to define multiple panels on a screen area. Different subject matter (e.g., data, content, programs, etc.) may be placed in the various panels. A bar navigation element facilitates navigation of the bar(s) among preset positions. With the bar navigation element, a user can intuitively resize the panels using just a single actuation (e.g., a single click of a mouse, or a stylus tap). The panels remain in their original orientation and relative positioning, and remain visible in the user interface so that the user can track their location.

Claims

1. A user interface provided by a computing device executing instructions, the user interface comprising:

multiple panels to define separate and distinct workspaces;

a first bar perpendicular to and intersecting with a second bar to demarcate the multiple panels, the first bar and the second bar being movable to alter sizes of the multiple panels such that movement of the first bar or the second bar enlarges a first panel while simultaneously reducing a second panel; and

a bar navigation element comprising a plurality of actuation zones facilitating movement of the one or more bars to resize the panels to one of at least three preset positions in response to a single actuation event generated by a user conducing a single interaction with a one of the plurality of actuation zones, wherein a relative size of resized panels corresponds to a one of the at least three preset positions that corresponds to the one of the plurality of actuation zones with which the user interacted.

2. The user interface of claim 1, wherein the workspaces defined by the panels hold different program interfaces.

3. The user interface of claim 1, further comprising drag-n-drop functionality to move subject matter to and from the workspaces defined by the panels.

4. The user interface of claim 1, further comprising moving the one or more bars to simultaneously resize the multiple panels while maintaining the orientation and relative positions of each of the multiple panels with respect to others of the multiple panels.

5. The user interface of claim 1, wherein:

the bar navigation element facilitates navigation among the at least three preset positions comprising a first position in which the first panel and the second panel are approximately equal size, a second position in which the first panel is enlarged and the second panel is reduced, and a third position in which the first panel is reduced and the second panel is enlarged, wherein in each of the three preset positions the orientation and relative position of the first panel and the second panel is retained and the first panel and the second panel both remain visible.

6. The user interface of claim 1, wherein:

the bar navigation element is overlaid at the intersection of the first and second bars.

7. The user interface of claim 6, wherein the bar navigation element facilitates navigation of the first and second bars among at least nine preset positions.

8. The user interface of claim 7, wherein the bar navigation element has nine actuation zones with associated visual cues that appear when a pointer is moved atop a one of the nine actuation zones and that indicate how the one or more bars will be moved upon actuation of the bar navigation element, the nine actuation zones corresponding to the nine preset positions such that a single actuation of one of the nine actuation zones causes the first and second bars to move to a one of the preset positions corresponding to the one of the nine actuation zones.

9. A method comprising:

presenting a user interface with a first demarcation bar perpendicular to, and intersecting with, a second demarcation bar to separate a screen area into four separate and distinct content panels, the first bar being movable in a first direction and the second bar being movable in a second direction perpendicular to the first direction, the content panels being configured to hold one or more types of subject matter;

presenting an actuatable element as part of the user interface, the actuatable element comprising a plurality of actuation zones within the actuatable element, each of the actuation zones corresponding to one of at least three preset positions of the first and second bars; and

facilitating movement of the demarcations bars among the at least three preset positions, the movement of the demarcation bars simultaneously resizing the panels relative to one another, wherein movement of the demarcation bars to a one of the at least three preset positions occurs in response to a single user actuation of a one of the plurality of actuation zones that corresponds to the one of the at least three preset positions.

10. The method of claim 9, wherein the at least three preset positions include a home position in which the content panels are approximately equal in size and the plurality of actuation zones includes a zone that, when actuated by the single user actuation, causes the demarcation bars and the content panels to move to the home position.

11. The method of claim 9, wherein the single user actuation comprises at least one of a mouse click or a screen tap.

12. The method of claim 9, further comprising:

enabling movement of the demarcation bars from a home position to one of the at least three preset positions responsive to a first single actuation event when a pointer is positioned over a one of the plurality of actuation zones of the actuatable element that corresponds to the one of the at least three preset positions and return of the demarcation bars to the home position responsive to a second single actuation event when a pointer is positioned over a different one of the plurality of actuation zones of the actuatable element that corresponds to home position.

13. The method of claim 9, further comprising presenting a data source region separate from the content panels, the data source region containing subject matter that may be moved to any one of the content panels.

14. The method of claim 9, wherein the facilitating movement further comprises enabling movement among at least nine preset positions including:

one home position in which the content panels are approximately equal in size, wherein a center of the actuatable element is an actuation zone that, when actuated, causes the content panels to move to the home position;

a first set of four preset positions in which two content panels are enlarged in size relative to the home position and approximately equal in size to one another, and two content panels are reduced in size relative to the home position and approximately equal in size to one another, wherein four actuation zones of the actuatable element are located in line with one of the demarcation bars and, when actuated, cause the content panels to move to a respective one of the first set of four preset positions; and

a second set of four preset positions in which one content panel is enlarged in size relative to the home position, two content panels are reduced in size relative to the home position and approximately equal in size to one another, and a remaining content panel is smaller in size relative to the home position and to the reduced second and third content panels, wherein four actuation zones of the actuatable element are located on a corner of a one of the content panels, the corner closer to the actuatable element than the other corners of the one of the content panels, and, when actuated, cause the content panels to move to a respective one of the second set of four preset positions.

15. The method of claim 14, wherein a one of the four actuation zones located in line with one of the demarcation bars, when actuated, causes the two content panels closest to the actuated one of the four actuation zones to enlarge and causes the other two content panels to shrink in size, and

wherein a one of the four actuation zones located on a corner of one of the content panels, when actuated, causes the one of the content panels to enlarge, causes the content panel positioned across the first demarcation bar and the content panel positioned across the second demarcation bar to shrink in size, and causes the content panel positioned across both the first and second demarcation bars to shrink to a smaller size than either of the content panel positioned across the first demarcation bar or the content panel positioned across the second demarcation bar.

16. A memory storing computer-executable instructions that, when executed, perform acts comprising:

presenting first and second bars to define four distinct and separate workspaces, the first bar being movable in a first direction and the second bar being movable in a second direction perpendicular to the first direction, the first and second bars intersecting one another;

presenting a bar navigation element to facilitate navigation of the first and second bars among at least five preset positions, the bar navigation element comprising at least five actuation zones and each of the actuation zones corresponds to a respective one of the preset positions; and

enabling navigation from any one of the at least five preset positions to any other of the at least five preset positions in response to a single actuation of the bar navigation element by a user conducing a single interaction with a one of the actuation zones which causes the first and second bars to move to the respective one of the preset positions that corresponds to one of the actuation zones.

17. The memory of claim 16, wherein the bar navigation element is overlaid at the intersection of the first and second bars.

18. The memory of claim 16, wherein the first and second bars slide in an animated fashion when moving among the five preset positions.

19. The memory of claim 16, further comprising computer-executable instructions that, when executed, perform the additional acts of presenting a source region that holds various types of subject matter that may be placed in the workspaces, and facilitating placement of the subject matter in the workspaces using drag-n-drop functionality to and from the source region.

20. The memory of claim 16, wherein the single interaction comprises a mouse click, a stylus tap, or a finger tap.