|Publication number||US7432928 B2|
|Application number||US 11/151,790|
|Publication date||Oct 7, 2008|
|Filing date||Jun 14, 2005|
|Priority date||Jun 14, 2005|
|Also published as||US20060282786|
|Publication number||11151790, 151790, US 7432928 B2, US 7432928B2, US-B2-7432928, US7432928 B2, US7432928B2|
|Inventors||Han-Yi Shaw, Shavinder S. Multani|
|Original Assignee||Microsoft Corporation|
|Export Citation||BiBTeX, EndNote, RefMan|
|Patent Citations (28), Non-Patent Citations (2), Referenced by (26), Classifications (12), Legal Events (4)|
|External Links: USPTO, USPTO Assignment, Espacenet|
Many electronic devices make use of a graphical user interface (also referred to as a GUI). For example, personal computers use a GUI that may employ one or more windows. Handheld devices, cellular telephones and other devices can also use a GUI.
Many of these graphical user interfaces employ tools to perform various functions. For example, some systems may make use of formatting palettes and toolbars. The size of the tools on the display device (e.g., monitor or other device) is typically chosen to match the largest area needed to display any of the functions of the tool. As more functions are added to existing tools, the size of the tool on the GUI can become large and unwieldy.
Tools that include multiple functions typically include some means for selecting one of the functions. For example, function selection may made by selecting a tab, selecting a button, interacting with a menu, using a dial, using a slider, etc. Once the function is selected, the tool may adapt its appearance to provide the necessary user interface items associated with the tools. For example, consider a tool that provides various functions such as document formatting and configuration selection. The tool may operate as a window with a set of tabs. If the user wants to use the document formatting function, then the user will choose the document formatting tab which causes the window to display the items associated with the document formatting (e.g., buttons to change font, color, size, etc.). If the user wants to change configuration information, then the user may select the options tab which causes the window to display the items associated with selecting configuration (e.g., selection tools to indicate configuration settings). As the complexity of the functions increases, the switching between displays of the various functions can become confusing to a user.
The size and content of a tool can be dynamically adjusted based on the current needs of the tool. When the user chooses a new function to perform using the tool, the tool's size and appearance is adjusted to an interface tailored for the selected function. Because the interface is customized for the selected function, the user interface for the tool need not be any larger than necessary. To minimize confusion to the user, these dynamic adjustments can be performed using animation effects so that one state of the user interface for the tool appears to morph into another state of the user interface for the tool.
One embodiment includes displaying a user interface in a first state associated with a first function. The user interface includes multiple function selectors (e.g., tabs) and a first set of one or more items (e.g., buttons, sliders, menus, etc.) associated with the first function. The items are used to perform actions associated with the functions (e.g., a font selector may be used with a document formatter). After displaying the user interface, a request is received to change the user interface to a second state associated with a second function. In response to the request, the user interface is changed from the first state to an intermediate stage using animation to remove the first set of items. While in the intermediate stage, the number, size, placement, or other property of the function selectors may optionally change. This change can also be animated. After any changes to the function selectors, the user interface changes from the intermediate stage to the second state using animation to add a second set of one or more items to the user interface.
For example, a row of equally distributed tabs displays several options for a user to select. When the user selects an option, in addition to taking the user to the corresponding user interface represented by each tab, the row of tabs themselves reconfigure to show a possibly different number of available tabs, while readjusting the size of each tab for the appropriate appearance. For example, each of the tabs may shrink or expand in size, some tabs may be eliminated, and/or new tabs may be added. Animation is used to add/remove items to/from the tool bar and to expand/shrink the toolbar from the single row of tabs to the size needed to display the new items associated with the destination toolbar.
The technology described herein can be accomplished using hardware, software, or a combination of both hardware and software. The software used is stored on one or more processor-readable storage devices including hard disk drives, CD-ROMs, DVDs, optical disks, floppy disks, tape drives, RAM, ROM, flash memory or other suitable storage devices. In alternative embodiments, some or all of the software can be replaced by dedicated hardware including custom integrated circuits, gate arrays, FPGAs, PLDs, and special-purpose processors. In one embodiment, software is used to program one or more processors. The one or more processors can be in communication with one or more storage devices, peripherals and/or communication interfaces.
This Summary is provided to introduce a selection of concepts in a simplified form that are further described below in the Detailed Description. This Summary is not intended to identify key features or essential features of the claimed subject matter, nor is it intended to be used as an aid in determining the scope of the claimed subject matter.
A consolidated multi-purpose tool is provided that reconfigures itself to accommodate different types of functionality. When the user chooses a new function to perform using the tool, the tool's size and appearance is adjusted to an interface tailored for the selected function. Animation is used to reconfigure the tool in order to minimize confusion and disorientation caused by abrupt transitions or flashes during which a graphical element switches from one visual configuration to another, provide instant visual feedback of the user interaction thereby reducing the need for users to rely on repeated exposure and deductive ability to interpret causal changes on the screen, and elevate the user interface element from a mere picture on the screen to a tangible entity which provides a more realistic interaction.
The user interface is operational with numerous other general purpose or special purpose computing system environments or configurations. Examples of well known computing systems, environments, and/or configurations that may be suitable for use include, but are not limited to, personal computers, server computers, hand-held or laptop devices, personal digital assistants, telephones (wired, wireless, or cellular), multiprocessor systems, microprocessor-based systems, set top boxes, programmable consumer electronics, network PCs, minicomputers, mainframe computers, distributed computing environments that include any of the above systems or devices, and the like.
The system may be described in the general context of computer-executable instructions, such as program modules, being executed by a computer. Generally, program modules include routines, programs, objects, components, data structures, etc., that perform particular tasks or implement particular abstract data types. The system may also be implemented in distributed computing environments where tasks are performed by remote processing devices that are linked through a communications network. In a distributed computing environment, program modules may be located in both local and remote computer storage media including memory storage devices.
With reference to
Computer 110 typically includes a variety of computer readable media. Computer readable media can be any available media that can be accessed by computer 110 and includes both volatile and nonvolatile media, removable, and non-removable media. By way of example, and not limitation, computer readable media may comprise computer storage media and communication media. Computer storage media includes both volatile and nonvolatile, removable and non-removable media implemented in any method or technology for storage of information such as computer readable instructions, data structures, program modules or other data. Computer storage media includes, but is not limited to, RAM, ROM, EEPROM, flash memory or other memory technology, CD-ROM, digital versatile disks (DVD) or other optical disk storage, magnetic cassettes, magnetic tape, magnetic disk storage or other magnetic storage devices, or any other medium which can be used to store the desired information and which can accessed by computer 110. Communication media typically embodies computer readable instructions, data structures, program modules or other data in a modulated data signal such as a carrier wave or other transport mechanism and includes any information delivery media. The term “modulated data signal” means a signal that has one or more of its characteristics set or changed in such a manner as to encode information in the signal. By way of example, and not limitation, communication media includes wired media such as a wired network or direct-wired connection, and wireless media such as acoustic, RF, infrared and other wireless media. Combinations of the any of the above should also be included within the scope of computer readable media.
The system memory 130 includes computer storage media in the form of volatile and/or nonvolatile memory such as read only memory (ROM) 131 and random access memory (RAM) 132. A basic input/output system 133 (BIOS), containing the basic routines that help to transfer information between elements within computer 110, such as during start-up, is typically stored in ROM 131. RAM 132 typically contains data and/or program modules that are immediately accessible to and/or presently being operated on by processing unit 120. By way of example, and not limitation,
The computer 110 may also include other removable/non-removable, volatile/nonvolatile computer storage media. By way of example only,
The drives and their associated computer storage media discussed above and illustrated in
The computer 110 may operate in a networked environment using logical connections to one or more remote computers, such as a remote computer 180. The remote computer 180 may be a personal computer, a server, a router, a network PC, a peer device or other common network node, and typically includes many or all of the elements described above relative to the computer 110, although only a memory storage device 181 has been illustrated in
When used in a LAN networking environment, computer 110 is connected to LAN 171 through a network interface or adapter 170. When used in a WAN networking environment, computer 110 typically includes a modem 172, network interface or other means for establishing communications over the WAN 173, such as the Internet. The modem 172, which may be internal or external, may be connected to the system bus 121 via the user input interface 160, or other appropriate mechanism. In a networked environment, program modules depicted relative to the computer 110, or portions thereof, may be stored in the remote memory storage device. By way of example, and not limitation,
Each function selector is associated with a set of action selectors that are used to performs actions for the selected function.
Looking back at
In response to the request received in step 202, the system changes the user interface from the initial state to an intermediate stage using animation. The intermediate stage is a temporary stage between the initial state and the target state. In one embodiment, the intermediate stage includes multiple intermediate states for performing additional animations. For example, in step 206, the system changes the user interface from the first intermediate state to the second intermediate state using animation. In other embodiments, more or less than two intermediate states can be used. In step 208, the system changes the user interface from the second intermediate state to the target state.
In the example of
Intermediate stage 260 includes two intermediate states 260 and 264. In this example, the initial state uses six function selectors while the target state only uses five function selectors. Additionally, the user interface is wider in the target state than in the initial state. Therefore, in step 206, the user interface changes from intermediate state 260 to intermediate state 264 by animating function selector 232 to slide off the user interface and animating the remaining function selectors to become wider. For example, 6 tab controls morph into 5 tab controls. Note that in other implementations, function selectors can be added, narrowed, or otherwise changed.
In step 208, the user interface changes from intermediate state 264 to target state 280 using the animation depicted by reference numeral 270. In one embodiment, the animation makes the action items looked stretched as they slide on the user interface to their final positions, Once in the target state 280, the user can select a function selector and transform the user interface to another state using the same steps described above. Note that in one example implementation, the entire set of animations for changing the user interface from the initial state to the target state take less than one second.
There are various methods for performing the animation of step 204. In one embodiment, the animation for removing the action items is performed in a non-linear fashion. That is, all of the action items are not animated at the same time, at the same rate. A first subset of action items are animated first. The remaining action items wait their turn to be removed using the animation.
In step 302, the next slice of the user interface to be processed is accessed. If this is the first time that step 302 is being performed, then the first slice is accessed. In some embodiments, the first slice to be processed is that slice closest to the edge that the slices will slide into. In one implementation, the slices will slide into the the function selectors; therefore, slice 0 (see
In step 304, the first slice is made to look stretched (e.g., blurred). For example, animation 256 of
If the slice being accessed is not the last slice to be accessed (step 308), then the system will wait (step 312) until the slice being accessed passes a threshold sliding distance. For example, the system may wait until the slice has been slid 25% (or other percentage) of the total amount it needs to slide to be removed from the user interface. In other, embodiments, the threshold can be an absolute distance. The threshold distance can be zero (which would mean no waiting), 100% of the total distance (which would mean waiting until the slice is removed), or an amount in between. After step 312, the process loops back to step 302 and the next slice is accessed.
If (step 308) the slice being accessed is the last slice to be accessed (e.g., slice 10 of
If the current slice being accessed is not the last slice to be removed, then the process (at step 354) continues at step 360. In step 360, the current slice being accessed slides to the edge of the user interface so that it appears to slide off the user interface. After the slice slides off the user interface in step 360, the process continues at step 352 and the next slice is accessed.
If the current slice being accessed is the last slice to be removed (e.g., slice 10 of
Looking back at
In step 430 of
In step 480 of
There are various methods for performing the animation of step 208 of
A visual representation is created for the slice accessed in step 542. In one embodiment, this visual representation appears to be stretched (e.g., blurred) such as depicted in animation 270 of
In step 600 of
In some embodiments, when action items are added or removed, the speed at which they slide may change. For example, after an action item begins to slide, its speed of siding may increase. In some implementations, the speed may decrease as the action item reaches the end of the sliding process.
Although the subject matter has been described in language specific to structural features and/or methodological acts, it is to be understood that the subject matter defined in the appended claims is not necessarily limited to the specific features or acts described above. Rather, the specific features and acts described above are disclosed as example forms of implementing the claims. It is intended that the scope of the invention be defined by the claims appended hereto.
|Cited Patent||Filing date||Publication date||Applicant||Title|
|US5204947 *||Oct 31, 1990||Apr 20, 1993||International Business Machines Corporation||Application independent (open) hypermedia enablement services|
|US5615384 *||Aug 29, 1995||Mar 25, 1997||International Business Machines Corporation||Personal communicator having improved zoom and pan functions for editing information on touch sensitive display|
|US5914717 *||Jul 21, 1995||Jun 22, 1999||Microsoft||Methods and system for providing fly out menus|
|US6049336 *||Aug 12, 1998||Apr 11, 2000||Sony Corporation||Transition animation for menu structure|
|US6549220 *||Jun 10, 1999||Apr 15, 2003||International Business Machines Corporation||Method, system, and program for providing pages of information with navigation and content areas|
|US6956574 *||Feb 9, 2000||Oct 18, 2005||Paceworks, Inc.||Methods and apparatus for supporting and implementing computer based animation|
|US6980200 *||Mar 31, 2003||Dec 27, 2005||Michael Goren||Rapid entry of data and information on a reduced size input area|
|US7017122 *||Mar 23, 2000||Mar 21, 2006||Lg Electronics Inc.||Method for displaying menu screen of video apparatus|
|US7124373 *||Jan 9, 2002||Oct 17, 2006||International Business Machines Corporation||System and method for rearranging run-time ordering of open tasks|
|US7134095 *||Oct 20, 1999||Nov 7, 2006||Gateway, Inc.||Simulated three-dimensional navigational menu system|
|US20020101450 *||Jan 26, 2001||Aug 1, 2002||Chad Magendanz||System and method for browsing properties of an electronic document|
|US20030151633 *||Apr 23, 2002||Aug 14, 2003||David George||Method and system for enabling connectivity to a data system|
|US20030169298 *||Mar 6, 2002||Sep 11, 2003||Bas Ording||Animated menu bar|
|US20030237043 *||Jun 21, 2002||Dec 25, 2003||Microsoft Corporation||User interface for media player program|
|US20040070629 *||Aug 18, 2003||Apr 15, 2004||Hewlett-Packard Development Company, L.P.||Graphical user computer interface|
|US20040177319 *||Jul 16, 2003||Sep 9, 2004||Horn Bruce L.||Computer system for automatic organization, indexing and viewing of information from multiple sources|
|US20040196313 *||Feb 26, 2003||Oct 7, 2004||Microsoft Corporation||Ink repurposing|
|US20040210849 *||May 10, 2004||Oct 21, 2004||Apple Computer, Inc.||Combined menu-list control element in a graphical user interface|
|US20040233201 *||Oct 24, 2003||Nov 25, 2004||Microsoft Corporation||System supporting animation of graphical display elements through animation object instances|
|US20040268259 *||Jul 23, 2004||Dec 30, 2004||Microsoft Corporation||Task-sensitive methods and systems for displaying command sets|
|US20040268260 *||Jul 23, 2004||Dec 30, 2004||Microsoft Corporation||Task-sensitive methods and systems for displaying command sets|
|US20050177801 *||Feb 11, 2004||Aug 11, 2005||Vronay David P.||Collapsible container with semi-collapsed view|
|US20050231512 *||Apr 16, 2004||Oct 20, 2005||Niles Gregory E||Animation of an object using behaviors|
|US20050283765 *||Jun 19, 2004||Dec 22, 2005||Apple Computer, Inc.||Software performance analysis using data mining|
|US20060031776 *||Aug 3, 2004||Feb 9, 2006||Glein Christopher A||Multi-planar three-dimensional user interface|
|US20060253801 *||Sep 23, 2005||Nov 9, 2006||Disney Enterprises, Inc.||Graphical user interface for electronic devices|
|US20070226204 *||Dec 5, 2005||Sep 27, 2007||David Feldman||Content-based user interface for document management|
|US20070250899 *||Aug 1, 2006||Oct 25, 2007||Veotag, Inc.||Nondestructive self-publishing video editing system|
|1||*||Massimo Guccione; "Microsoft Outlook bar;" Oct. 12, 1999; http://web.archive.org/web/19991012185520/http://dynamicdrive.com/dynamicindex1/outbar/index.htm.|
|2||*||Microsoft Office Outlook 2003, Help File "About the Navigation Pane," (http://office.microsoft.com/en-us/outlook/HP010378651033.aspx).|
|Citing Patent||Filing date||Publication date||Applicant||Title|
|US8127239 *||Jun 8, 2007||Feb 28, 2012||Apple Inc.||Object transitions|
|US8453057 *||Dec 22, 2008||May 28, 2013||Verizon Patent And Licensing Inc.||Stage interaction for mobile device|
|US8519964||Jan 4, 2008||Aug 27, 2013||Apple Inc.||Portable multifunction device, method, and graphical user interface supporting user navigations of graphical objects on a touch screen display|
|US8519972||May 10, 2011||Aug 27, 2013||Apple Inc.||Web-clip widgets on a portable multifunction device|
|US8558808||May 10, 2011||Oct 15, 2013||Apple Inc.||Web-clip widgets on a portable multifunction device|
|US8564544||Sep 5, 2007||Oct 22, 2013||Apple Inc.||Touch screen device, method, and graphical user interface for customizing display of content category icons|
|US8584031||Nov 19, 2008||Nov 12, 2013||Apple Inc.||Portable touch screen device, method, and graphical user interface for using emoji characters|
|US8619038||Sep 4, 2007||Dec 31, 2013||Apple Inc.||Editing interface|
|US8788954||Jan 6, 2008||Jul 22, 2014||Apple Inc.||Web-clip widgets on a portable multifunction device|
|US8799806 *||Dec 31, 2008||Aug 5, 2014||Verizon Patent And Licensing Inc.||Tabbed content view on a touch-screen device|
|US8839127||Feb 17, 2012||Sep 16, 2014||Apple Inc.||Object transitions|
|US9081498 *||Jul 16, 2012||Jul 14, 2015||Blackberry Limited||Method and apparatus for adjusting a user interface to reduce obscuration|
|US9223483||Jul 16, 2012||Dec 29, 2015||Blackberry Limited||Method and apparatus for providing a user interface on a device that indicates content operators|
|US9335924||Oct 17, 2013||May 10, 2016||Apple Inc.||Touch screen device, method, and graphical user interface for customizing display of content category icons|
|US9355073 *||Jun 18, 2013||May 31, 2016||Microsoft Technology Licensing, Llc||Content attribute control interface including incremental, direct entry, and scrollable controls|
|US9367232||Aug 27, 2013||Jun 14, 2016||Apple Inc.||Portable multifunction device, method, and graphical user interface supporting user navigations of graphical objects on a touch screen display|
|US9395864 *||Nov 10, 2011||Jul 19, 2016||Microsoft Technology Licensing, Llc||Animation for expanding/collapsing content and for sorting content in an electronic document|
|US9619143 *||Sep 30, 2008||Apr 11, 2017||Apple Inc.||Device, method, and graphical user interface for viewing application launch icons|
|US20080276200 *||Apr 30, 2008||Nov 6, 2008||Drew Bamford||Method for disposing a menu layout and related device|
|US20080307365 *||Jun 8, 2007||Dec 11, 2008||Apple Inc.||Object transitions|
|US20090138827 *||Feb 2, 2009||May 28, 2009||Van Os Marcel||Portable Electronic Device with Interface Reconfiguration Mode|
|US20100169772 *||Dec 31, 2008||Jul 1, 2010||Verizon Data Services Llc||Tabbed content view on a touch-screen device|
|US20110099494 *||Oct 22, 2009||Apr 28, 2011||Microsoft Corporation||Dynamic graphical user interface layout|
|US20130055123 *||Nov 10, 2011||Feb 28, 2013||Microsoft Corporation||Animation for Expanding/Collapsing Content and for Sorting Content in an Electronic Document|
|US20130227470 *||Jul 16, 2012||Aug 29, 2013||Simon Martin THORSANDER||Method and Apparatus for Adjusting a User Interface to Reduce Obscuration|
|US20140372949 *||Jun 18, 2013||Dec 18, 2014||Microsoft Corporation||Content Attribute Control Interface Including Incremental, Direct Entry, and Scrollable Controls|
|U.S. Classification||345/473, 715/818, 715/820, 715/864, 715/817, 715/819|
|International Classification||G06T13/00, G06F3/14, G06F3/048, G06T15/70|
|Jun 22, 2005||AS||Assignment|
Owner name: MICROSOFT CORPORATION, WASHINGTON
Free format text: ASSIGNMENT OF ASSIGNORS INTEREST;ASSIGNORS:SHAW, HAN-YI;MULTANI, SHAVINDER S.;REEL/FRAME:016175/0538;SIGNING DATES FROM 20050611 TO 20050613
|Mar 7, 2012||FPAY||Fee payment|
Year of fee payment: 4
|Dec 9, 2014||AS||Assignment|
Owner name: MICROSOFT TECHNOLOGY LICENSING, LLC, WASHINGTON
Free format text: ASSIGNMENT OF ASSIGNORS INTEREST;ASSIGNOR:MICROSOFT CORPORATION;REEL/FRAME:034543/0001
Effective date: 20141014
|Mar 23, 2016||FPAY||Fee payment|
Year of fee payment: 8