(12) United States Patent (10) Patent No.: US 8,296,673 B2 Lipstein Et Al
Total Page:16
File Type:pdf, Size:1020Kb
USOO8296,673B2 (12) United States Patent (10) Patent No.: US 8,296,673 B2 Lipstein et al. (45) Date of Patent: Oct. 23, 2012 (54) COLLAPSIBLE TABBED USER INTERFACE OTHER PUBLICATIONS Moise, Wesner. “Ribbon UI”. Retrieved at <http://wesnerm.blogs. (75) Inventors: Shawn Allan Michael Lipstein, Seattle, com/net undocumented/2007/08/ribbon-ui.html>, Aug. 17, 2007. WA (US); Jonathan Fred Kern, Seattle, pp. 3. WA (US); Jeffrey Charles Dunn, "SharePoint 2010 Ribbon Customization—Server-Side Command Seattle, WA (US); Monica Estela Handling'. Retrieved at <http://www.projectserver2010blog.com/ Gonzalez Veron, Seattle, WA (US); Gail 2010/01/sharepoint-2010-ribbon-customization 06.html>>, Jan. 6. 2010, pp. 4. Borod Giacobbe, Seattle, WA (US); Rice, et al., “Customizing the 2007 Office Fluent Ribbon for Devel Jason Frank Morrill, Redmond, WA opers (Part 1 of 3)'. Retrieved at <<http://msdn.microsoft.com/en (US); Timothy Paul McConnell, us/librarylaa338202.aspx >>, May 2006, pp. 26. Kirkland, WA (US); John Spencer “Ultratoolbar RibbonGroup Scroll is not Present at Runtime'. Pruitt, Bothell, WA (US) Retrieved at <http://blogs.infragistics.com/forums/p/4897/22842. aspx >>, Mar. 17, 2008, pp. 2. (73) Assignee: Microsoft Corporation, Redmond, WA “Open Web Studio”. Retrieved at << http://lab.r2integrated.com/ Wiki.aspx?topic=Open Web Studio >>, Retrieved Date: Feb. 17. (US) 2010, pp. 3. "Elegant Ribbon'. Retrieved at <<http://www.prof-uis.com/elegant (*) Notice: Subject to any disclaimer, the term of this ribbon? controls-framework-overview. patent is extended or adjusted under 35 aspx?gclid=CNvv25yW958CFZAA4wod k98YA >>, Retrieved U.S.C. 154(b) by 201 days. Date: Feb. 17, 2010, pp. 3. (21) Appl. No.: 12/765,867 * cited by examiner (22) Filed: Apr. 23, 2010 Primary Examiner — Omar Abdul-Ali (74) Attorney, Agent, or Firm — Hope Baldauff Hartman, (65) Prior Publication Data LLC US 2011 FO265O27 A1 Oct. 27, 2011 (57) ABSTRACT (51) Int. Cl. A tab-based collapsible user interface includes selectable G06F 3/048 (2006.01) user interface tabs, a ribbon area, and an editing Surface. (52) U.S. Cl. ........................................ 715/777; 715/786 When a browse tab is selected, the ribbon area displays infor (58) Field of Classification Search .................. 715/777, mation and does not include any user interface controls for 715/786, 784 performing commands. When the browse tab is selected, a See application file for complete search history. vertical scroll bar is displayed adjacent to the ribbon area and the editing surface. When the vertical scroll bar is used, the (56) References Cited ribbon area and the editing surface are both scrolled. When a page tab or a contextual tab is selected, the ribbon area dis U.S. PATENT DOCUMENTS plays user interface controls for performing commands. 7,272,790 B2 * 9/2007 Fabritius ....................... 715,209 When a page tab or a contextual tab is selected, a vertical 2006.0036964 A1 2/2006 Satterfield et al. scroll bar is displayed adjacent to the editing Surface but not 2006/0036965 A1 2/2006 Harris et al. .................. 71.5/777 2006/0174214 A1* 8, 2006 McKee et al. ................. 71.5/8O2 adjacent to the ribbon area. When the vertical scroll bar is 2006/0236261 A1* 10, 2006 Forstall et al. ................ 715,784 used, the contents of the editing surface are scrolled but the 2007/0055943 A1 3/2007 McCormacket al. ribbon area is not scrolled. 2008/024444.0 A1 10/2008 Bailey et al. 2008/0244443 A1 10/2008 Schaw et al. 20 Claims, 15 Drawing Sheets -10 108 CONTENT MANAGEMENT AND COLLABORATION WEB SERVERAPPLICATION BROWSER WEBPAGES 110 CLIENT COMPUTER SERVER COMPUTER 104 U.S. Patent Oct. 23, 2012 Sheet 1 of 15 US 8,296,673 B2 U.S. Patent 296,673 B2 [X]?]]XISTTOET?TENTERESTETTE]<>@@ SELMON, U.S. Patent Oct 23, 2012 Sheet 10 of 15 US 8 9 296,673 B2 EWWN 6?928/06S/T-NETOTTEGOLHERTW •SINEWOOOOTTV(SINEWnOOGGEHVHS(HLIWS? Aff fffffffffff NI8ETOMOB}}g LNBLNOOELISTTV(5) U.S. Patent Oct 23, 2012 Sheet 11 of 15 US 8 9 296,673 B2 SNOISS[]OSIC] NOISS[\OSIC]WWEL NI8ETOÀOE}}g INHINOOELISTTV(5) U.S. Patent Oct 23, 2012 Sheet 12 of 15 US 8 9 296,673 B2 (90Z) vo,& NIGETOÀOE}}g INHINOOELISTTV(5) U.S. Patent Oct 23, 2012 Sheet 13 of 15 US 8 9 296,673 B2 N909 •STOOLALEHVSEÐwdES5) ?NERGIJDX] (90Z) |×]SINEWn00g|ESMO,J?T,SNOILOVELS {|09@IGg,?, MAE'NCECIVOTd[] EdÅLDI (80Z) MAE'N NIEETOXOE}}g LNHINOOELISTTV(5) U.S. Patent Oct. 23, 2012 Sheet 14 of 15 US 8,296,673 B2 - 500 COLLAPSIBLE TABBED USER INTERFACE DISPLAY TABS, RIBBON AREA, EDITING SURFACE 502 BROWSE TAB YES DISPLAY INFORMATION SELECTED? INRIBBON AREA 506 DISPLAY SCROLL BAR ADJACENT TOBOTH RIBBON AREA AND DISPLAY INFORMATIONYES PAGE OR EDITING SURFACE CONTEXTUAL TABS NRIBBON AREA 508 SELECTED? DISPLAY SCROLL BAR SCROLLONLY EDITING ADJACENT ONLY TO SURFACE IFPAGE OR THE EDITING SURFACE CONTEXTUAL TABS SELECTED: SCROLL SCROLL EDITING SURFACE AND BAR SELECTED? RIBBON AREAF BROWSE TAB SELECTED 514 CONTENT SELECTED IN EDITING YESSELECT PROPER PAGE SURFACE OR EDT OR CONTEXTUAL TAB MODE SELECTED? 518 Fig. 5 US 8,296,673 B2 1. 2 COLLAPSIBLE TABBED USER INTERFACE According to yet another aspect, when a second of the selectable user interface tabs (referred to herein as a “page BACKGROUND tab’ or a "contextual tab') is selected, the ribbon area is utilized to display user interface controls for performing com It can be difficult to port a software application from a 5 mands. Additionally, when a page tab or a contextual tab is traditional desktop application program to a World WideWeb selected, a vertical scroll bar may be displayed adjacent to the (“Web’) based application. One reason for this is that there editing surface but not adjacent to the ribbon area. When the is generally less space available within a Web browser appli vertical scroll bar is selected in order to scroll the contents of cation window than in a typical desktop application window. the editing Surface, the contents of the editing Surface are This is because a Web browser application window typically 10 scrolled but the ribbon area is not scrolled. In this manner, the includes navigation controls and possibly other toolbars. user interface controls for performing commands displayed These controls and toolbars can take up a considerable por in the ribbon area are continually displayed for use even when tion of the Web browser application window, thereby limiting the contents of the editing Surface are scrolled. the amount of window space that is usable for display by a 15 According to another aspect, the user interface controls for Web-based application. Standard desktop applications are performing commands that are displayed in the ribbon area typically not hampered by Such a limitation and, as a result, a may be customized based upon the contents of the editing direct conversion of the user interface of a desktop application Surface. In this manner, commands appropriate for the con to Web-based application may be difficult. tent displayed in the editing Surface may be made available, It is with respect to these and other considerations that the while inappropriate commands are hidden. Similarly, an disclosure made herein is presented. appropriate tab may be auto-selected in response to com mands performed in the editing surface or elsewhere. For SUMMARY instance, a tab with the appropriate commands for editing a document in the ribbon area may be auto-selected in response Technologies are described herein for providing a collaps 25 to receiving a command to edit the document. A tab might ible tabbed user interface. Through the utilization of the tech also be auto-selected in response to the occurrence of other nologies and concepts presented herein, a Web-based appli types of actions. cation can maximize the utilization of available space within It should be appreciated that the user interface controls a Web browser application window. In particular, a tab-based described herein are merely illustrative and that other types of user interface is provided that is capable of collapsing a 30 portion of the user interface when it is unnecessary to display user interface controls might be utilized in place of or in user interface controls for performing commands. In this addition to those described herein. For instance, although the manner, the available space within a Web browser application embodiments presented herein refer to a vertical scroll bar, window can be used more efficiently. other types of user interface controls such as arrows might be According to one aspect presented herein, a tab-based col 35 utilized for initiating a scroll operation. It should also be lapsible user interface is provided that includes two or more appreciated that the above-described subject matter may also selectable user interface tabs, an information/ribbon area (re be implemented as a computer-controlled apparatus, a com ferred to herein as the “ribbon area’’ or the “ribbon'), and an puter process, a computing system, or as an article of manu editing surface. The selectable user interface tabs may be facture Such as a computer-readable medium. These and vari adjacent to one another. The ribbon area may be displayed 40 ous other features will be apparent from a reading of the adjacent to and below the selectable user interface tabs. The following Detailed Description and a review of the associated editing Surface may be displayed adjacent to and below the drawings. ribbon area. The tabs, ribbon area, and editing Surface might This Summary is provided to introduce a selection of con also be displayed in other configurations. cepts in a simplified form that are further described below in The ribbon area is utilized to display information and to 45 the Detailed Description.