US20110302516A1 - Mobile design patterns - Google Patents

Abstract

A mobile design pattern. In an example embodiment, the design pattern includes a first user interface display screen that depicts a list of user interface controls organized in rows. Each row in the list includes a different set of one or more controls. Each different set of one or more controls is associated with a different set of functionality provided by one or more additional user interface display screens. The example design pattern further includes a second user interface display screen that is accessible via the different sets of one or more controls. The second user interface display screen includes a navigation bar, which includes one or more navigation controls and a title or header identifying a set of functionality associated with the different set of one or more controls. The second user interface display screen further includes an information-display region adapted to display data associated with the set of functionality.

Description

CROSS REFERENCES TO RELATED APPLICATIONS
• This application is a continuation-in-part of the following application, U.S. patent application Ser. No. 12/792,571, entitled SEARCH-SORT TOGGLE, filed on Jun. 2, 2010, which is hereby incorporated by reference, as if it is set forth in full in this specification.
BACKGROUND
• The present application relates to software development and more specifically to systems, methods, and patterns for facilitating designing software applications for use in mobile computing environments.
• Software design methods for developing applications for mobile computing applications are faced with several challenges due in part to limited screen space for displaying user interfaces and limited computing resources, including memory, processor speeds, and network bandwidth limitations.
• Limited screen space is a particularly limiting requirement for mobile software applications. Furthermore, mobile computing applications often run on mobile communications devices, such as cellular telephones, which often subject the user to multiple frequent distractions, including distractions from calls, text messages, changes in physical environment, and so on.
• Mobile enterprise computing applications are particularly demanding, as mobile enterprise application users often must maintain connectivity with multiple computing resources and applications available via a corporate network.
• Design methodologies and accompanying solutions that are generally applicable to desktop computing environments are often incompatible with mobile computing environments. As developers and project managers move their desktop applications to mobile devices, a comprehensive design approach is needed to create efficient and compelling user interfaces that account for mobile computing environment limitations and distractions.
• In general, existing mobile application systems and methods facilitate designing software applications for specific mobile platforms, such as the iPhone®, Android™, Microsoft Windows Mobile®, BlackBerry®, and Symbian™ platforms. Unfortunately, existing mobile application development methodologies often fail to facilitate comprehensive design solutions suitable for a wide range of mobile platforms.
SUMMARY
• An example design pattern for facilitating design of mobile computing applications includes a first user interface display screen that depicts a list of user interface controls organized in rows. Each row in the list includes a different set of one or more controls. Each different set of one or more controls is associated with a different set of functionality provided by one or more additional user interface display screens. The example design pattern further includes a second user interface display screen that is accessible via one or more of the different sets of one or more controls. The second user interface display screen includes a navigation bar. The navigation bar includes one or more navigation controls for navigating between user interface display screens and further includes a title or header identifying a set of functionality associated with the different set of one or more controls. The second user interface display screen further includes an information-display region that is adapted to display data associated with the set of functionality.
• In a more specific example embodiment, the second user interface display screen further includes a second band of controls that is below or above the navigation bar, which stretches horizontally across a display of a mobile computing device, such as a cellular telephone. The second band of controls includes one or more icons that are associated with one or more functions of the set of functionality provided by the second user interface display screen.
• The present example user interface pattern may include functionality to selectively change, add, or omit an icon from the second band of controls according to a status of a function associated with the icon. The one or more icons may include a search icon and a sort icon, which are adapted to change appearance in response to user selection thereof. The second band of controls includes a search field for searching data and displaying search results in the information-display region in response thereto. The second band of controls may include, for example, a favorites icon for selectively marking displayed data as a user favorite.
• The second user interface display screen may further include a notification band that is adapted to provide status information pertaining to functionality accessible to a user. The status information may include an indication that information has been updated or that an object has been created, deleted, or updated.
• In the present example embodiment, the first user interface display screen further includes a personalization control and a sign-out control for providing a personalization option and a sign-out option, respectively. The first user interface display screen includes a first row with a control for accessing a worklist. The first user interface display screen further includes a second row with a control for accessing functionality for managing information pertaining to opportunities and a third row with a control for accessing functionality for managing information in association with a calendar. In the specific example embodiment, the information in association with a calendar may include information pertaining to scheduled meetings, expenses, deal closings, sales information, and so on.
• Certain embodiments disclosed herein may facilitate rapid design of mobile computing applications that work well on various mobile platforms, including iPhone®, BlackBerry®, Symbian™, Android™, and Windows Mobile® devices. Mobile design patterns (also called templates) disclosed herein adhere to various principles for facilitating usability and efficiency in mobile computing applications. Some of the design principles may include, but are not limited to: elimination of non-essential tasks, use of a flattened navigation model, usability in short spurts, efficient incorporation of business intelligence, access to simple searching and sorting, efficient access to collaboration mechanisms, minimization of screen real estate required to display relevant information and controls for accessing functionality, and suitability for browser or native implementation, such that applications may be browser-accessible or may run as native applications on a mobile device.
• Certain embodiments disclosed herein may provide a comprehensive set of interworkable design patterns or templates and accompanying development software, which provide a framework for development of mobile computing applications. The framework facilitates conceptualization of solutions and designs, and is particularly useful for development of enterprise mobile applications and accompanying functionality. Various key areas of mobile software development are addressed, including page layout; example actions (e.g., search; navigation); personalization, and so on. Use of design patterns disclosed herein may facilitate increasing developer productivity and quality and may be particularly useful for developers using middleware to build mobile applications for enterprise applications, where the applications may run in a mobile browser or as native client-side applications.
• A further understanding of the nature and the advantages of particular embodiments disclosed herein may be realized by reference of the remaining portions of the specification and the attached drawings.
BRIEF DESCRIPTION OF THE DRAWINGS
• FIG. 1 is a diagram illustrating an example software development system for employing one or more mobile design patterns to construct applications for mobile computing devices.
• FIG. 2ais a diagram illustrating a first example primary display screen of a first embodiment of a mobile design pattern.
• FIG. 2bis a diagram illustrating a second example display screen that is accessible via the first display screen ofFIG. 2a.
• FIG. 2cis a diagram illustrating a third example display screen that is accessible via the second example display screen ofFIG. 2b.
• FIG. 3ais a diagram illustrating a first example display screen implementation of the mobile design pattern ofFIG. 2aon an iPhone®.
• FIG. 3bis a diagram illustrating a second example display screen implementation of the mobile design pattern ofFIG. 2aon a BlackBerry® device.
• FIG. 4ais a diagram illustrating a fourth example display screen that is accessible via the first display screen ofFIG. 2a.
• FIG. 4bis a diagram illustrating a fifth example display screen that is accessible via the fourth example display screen ofFIG. 4a.
• FIG. 5ais a diagram illustrating a sixth example display screen that is accessible via the second example display screen ofFIG. 2bafter create functionality is activated therefrom.
• FIG. 5bis a diagram illustrating a seventh example display screen resulting from the sixth example display screen ofFIG. 5aand illustrating a notification band that provides status information pertaining to creation of an object.
• FIG. 5cis a diagram illustrating an eighth example display screen resulting from the sixth example display ofFIG. 5aafter a note has been created and illustrating a corresponding notification band.
• FIG. 6ais a diagram illustrating a ninth example display screen that is accessible via the first example display screen ofFIG. 2aand further illustrating a band of icons, including a favorites icon.
• FIG. 6bis a diagram illustrating a tenth example display screen resulting after selection of the favorites icon from the ninth example display screen ofFIG. 6aand illustrating a corresponding notification and adjustment to the band of icons.
• FIG. 6cis a diagram illustrating an eleventh example display screen for facilitating documenting and marking objects as favorites, which is accessible from the first example display screen ofFIG. 2a.
• FIG. 7 is a diagram illustrating a twelfth example display screen for implementing a search according to object-type, wherein the twelfth example display screen is accessible from the second example display screen ofFIG. 2bafter selection of a search control.
• FIG. 8ais a diagram illustrating a thirteenth example display screen accessible via the first display screen ofFIG. 2aillustrating sorted search results of items available for purchase.
• FIG. 8bis a diagram illustrating a fourteenth example display screen accessible via the thirteenth example display ofFIG. 8a, wherein the fourteenth example display illustrates a product object.
DETAILED DESCRIPTION OF EMBODIMENTS
• Although the description has been described with respect to particular embodiments thereof, these particular embodiments are merely illustrative, and not restrictive.
• While certain embodiments are discussed herein with respect to implementations involving use of mobile computing devices, applications are not limited thereto. For example, any computing device with a limited display screen area, such as a tablet computing device, may benefit from organizations of functionality and user interface controls in accordance with one or more design patterns or templates disclosed herein.
• For clarity, certain well-known components, such as hard drives, operating systems, routers, power supplies, and so on, have been omitted from the figures. However, those skilled in the art with access to the present teachings will know which components to implement and how to implement them to meet the needs of a given application.
• FIG. 1 is a diagram illustrating an examplesoftware development environment10 for employing one or moremobile design patterns14 to constructapplications12 for mobile computing devices34-42. Theenvironment10 includes asoftware development system12 runninguser interface software16. User interface display screens produced by theuser interface software16 are accessible to users viauser interface hardware18, which may include a display, keys, mouse, and so on.
• Thesoftware development system12, which may run on a computer system, such as a Personal Computer (PC), further includes acode generator20 in communication with theuser interface software16. A set ofmobile design patterns14, also called templates, are accessible to theuser interface software16 and thecode generator20. Thecode generator20 includes machine-readable instructions for selectively incorporating mobile design patterns from the template set14 into a generatedsoftware application22 in response to user input via theuser interface software16, as discussed more fully below. A generatedsoftware application22 is accessible to theuser interface software16. A user may employ theuser interface hardware18 and theuser interface software16 to both provide input to the code generator specifying details of a software application to be generated with reference to the template set14 and to test features of the generatedapplication22.
• For illustrative purposes, an optional use-case simulator24 is shown in communication with the generatedapplication22 and theuser interface software16. The use-case simulator24 includes descriptions corresponding to differentmobile personas26. In the present example embodiment, theuse case simulator24 includes machine-readable instructions, i.e., computer code, for testing the generatedapplication22 in accordance with predetermined criteria corresponding to differentmobile personas26 and to provide feedback in response thereto to theuser interface software16. The feedback may be analyzed by a user to facilitate making adjustments to the generatedapplication22 via thecode generator20 and theuser interface software16. Exact details of the use-case simulator24 are application specific. The feedback provided from the user-case simulator24 to theuser interface software16 may include ratings organized in accordance with predetermined criteria associated with each of themobile personas26.
• Those skilled in the art with access to the present teachings may readily determine and implement appropriate details to meet the needs of a given application without undue experimentation. For example, the use-case simulator24 may generate an overall rating or score for the generatedapplication22, where the score indicates how the application meets predetermined criteria associated with each of themobile personas26. Example mobile personas include field sales representative, field service technician, retail merchandiser, manager, generation Y, and so on.
• Thesoftware development system12 further includes aweb interface30 for making the generatedapplication22 available to mobile computing devices34-42 via anetwork32, such as the Internet. The generatedapplication22 may be made available as a web service or other browser-accessible application. Theapplication22 may be accessible via one or more browsers running on the mobile computing devices34-42. For the purposes of the present discussion, a web service may be any functionality, such as represented by a program, function, process, or other functionality, that is accessible or otherwise may be activated via a message sent over a network. An example message includes a Uniform Resource Locator (URL) sent over a network via HyperText Transfer Protocol (HTTP). Another example message includes an eXtensible Markup Language (XML) message sent in accordance with Simple Object Access Protocol (SOAP). Web services may be written in various languages, such as Web Services Description Language (WSDL), Java, and so on.
• Alternatively, the generatedapplication22 may be made available for download to the mobile computing devices34-42 (also called mobile devices) or for upload to another server. When a generated application is to be run client-side, i.e., as a native application running on one or more of the mobile devices34-42, thecode generator20 may make certain adjustments to theapplication22 so that the application can run as an executable or as a plug-in on the mobile devices34-42.
• For illustrative purposes, the mobile devices34-42 are shown including aniPhone®34, aBlackBerry®36, aSymbian™38, anAndroid™40, and aWindows Mobile®42 device. Note that applicable mobile computing devices34-42 are not limited to those shown inFIG. 1. Other examples of applicable mobile computing devices include tablets, such as the iPad, and other mobile computers, such as an OQO. In general, use of the novel template set14 facilitates generation of applications that are readily usable and that work efficiently on all of the different mobile devices34-42, as discussed more fully below.
• In certain implementations, it may be desirable to selectively format the generatedapplication22 for use by each of the different types of devices34-42. In this case, aformat converter28 may be employed to selectively adjust the format of the generatedapplication22 in accordance with the type of device34-42 that is requesting use of theapplication22. The mobile devices34-42 may access the generatedapplication22, such as for download or use as a browser-based application, via theweb interface30.
• FIG. 2ais a diagram illustrating a first exampleprimary display screen50 of a first embodiment of a mobile design pattern, also called a user interface template or simply template. For the purposes of the present discussion, a user interface template may be any pattern or layout used to describe or depict how data and/or functionality is displayed via an application and/or accessed by a user via the application. The terms “pattern” and “template” are employed interchangeably herein. A mobile design pattern may be any pattern or template that is specifically adapted for use with a mobile computing device, such as a wireless phone and/or pocket Personal Computer (PC). Note that a particular component of a design pattern, such as a component defining the layout or organization of data and functionality on a single user interface screen, may also be considered a design pattern, as may a collection of such components that are designed to work together.
• In the present example embodiment, theprimary display screen50 illustrates functionality implemented via an example application, which organizes functionality in accordance with an underlying pattern. Thedisplay screen50 includes a list52 of user interface controls58-70,86 organized in rows. Aheader bar56 indicates a name of the application, e.g., “Mobile Sales,” and is positioned above the uppermost row of interface controls58. Each set of user interface controls interface controls58-70,86 is associated with a different set of functionality.
• For example, for illustrative purposes, the first set of controls58 facilitates access to worklist functionality. A first set of controls58 is shown including an icon80 and accompanyingidentifier82, also called a category label. The icon80 and/or theidentifier82 may be selected to access other related user interface screens that form part of an underlying design pattern discussed herein. The remainder of the sets of controls60-70,86 also include corresponding icons and identifiers.Optional chevrons78 are provided for accessing sub-lists or other related sets of controls and/or display screens.
• A second example set of controls60 facilitate user access to opportunities, such as functionality for organizing, documenting, and contacting persons associated with certain specified opportunities. A third set of controls62 facilitates user access to calendar-based functionality. A fourth set of controls64 facilitates user access to analytics functionality, such as functionality used to analyze data, plot graphs, depict sales patterns, and so on. Note that analytics may also include certain calendar-based, map-based, and other types of functionality to facilitate analysis of data. A fifth set of controls66 facilitates user access to customer functionality, such as functionality used to organize, augment, document, etc., information about customers. A sixth set of controls68 facilitates user access to favorites functionality, such as functionality for enabling a user to mark certain objects, such as customer profiles, product descriptions, and so on, as favorites. A seventh set ofcontrols70 includes settings functionality, such as functionality for enabling a user to selectively affect or adjust functionality of the underlying application. An eighth set of controls86 includes access to search functionality for searching and/or sorting and displaying results. Additional user options for adjusting settings or other characteristics or features of the underlying application may be accessed via apersonalization control72 positioned in anoptional footer84.
• Note that the various sets of functionality58-70,86 are merely illustrative. More, fewer, and/or different sets of functionality may be employed other than the set58-70,86 shown inFIG. 2a, without departing from the scope of the present teachings. For example, a search field, search control, and/or sort control may be provided in theheader bar56 for facilitating cross-object searches and/or sorting operations. Furthermore, thescreen50 may have a scroll bar to enable scrolling to view additional sets of controls. Additional example sets of functionality may include shopping functionality for searching for and purchasing products or services; pictures functionality for cataloging and documenting photographs, and so on.
• For the purposes of the present discussion, a cross-object search may be any search that queries different types or classes of objects. An object may be any grouping of functionality and/or data. Different types of objects may be associated with different types of functionality, such as functionality implemented by different modules of an application.
• Thefirst display screen50 further includes sign-outoptions74,76, which are preferably positioned in the upper and lower right corners of thedisplay screen50. One or more of the sign-outoptions74,76 may be omitted without departing from the scope of the present teachings.
• FIG. 2bis a diagram illustrating a secondexample display screen90 that is accessible via thefirst display screen50 ofFIG. 2a. The second example userinterface display screen90 may be accessed via selection of one or more of the opportunities controls60 ofFIG. 2a.
• Thesecond display screen90 includes aheader bar92 extending horizontally across thescreen90. Theheader bar92 optionally specifies the title of the underlying software application and includes additional controls, such as asearch control94 for conducting global searches, and ashopping control96 for accessing shopping functionality. Note that additional or fewer controls (or types thereof) may be included in theheader bar92 without departing from the scope of the present teachings.
• Thesecond display screen90 further includes a navigation bar98, which includes a category title “Opportunities,” aback button100 for returning to theprevious display screen50 ofFIG. 2a, and a createbutton118. User selection of the createbutton118 may activate one or more additional display screens with functionality for enabling a user to create a new entry, i.e., object, to be categorized as an opportunity.
• Additional navigation controls, such as a forward button, an edit-list button, and so on, may be provided in the navigation bar98. The navigation bar98 preferably extends horizontally across thesecond display screen90 and is vertically adjacent to theheader bar92. For the purposes of the present discussion, a first bar or row is said to be vertically adjacent to a second bar or row if the first bar is positioned directly above or below and adjacent to the second bar or row.
• An additional row of controls102 is positioned below and vertically adjacent to the navigation bar98. For illustrative purposes, the additional row of controls102 is shown including asearch button104, asort button106, asearch field108, and anenter button110. Note that thebuttons104,106 may also be called icons or controls. For the purposes of the present discussion, a user interface control may be any mechanism, such as a graphical representation or field, used to facilitate access to functionality via a graphical user interface display screen. An icon represents a specific type of control implemented as graphical representation corresponding to a user-selectable region of a user interface display screen, where user selection of the icon may enable user access to functionality associated therewith. Note that if thesearch button104 or thesort button106 are selected, the appearance of the selected button changes (e.g., appears recessed or depressed) to indicate that the button has been selected.
• Aninformation display region116 is shown including a list ofexample opportunities114, which are organized inpages122. Different pages ofopportunities114 may be changed via a page-control bar112, which includes page-navigation controls. The page-control bar112 is positioned above the list ofopportunities114.
• In operation, a user may select thesearch button104 and then enter data to be searched for, i.e., a query, in thesearch field108. After entering search criteria (query) in thesearch field108 and selecting theenter button110, search results (such as opportunities114) are displayed. The returned search results may be sorted in accordance with predetermined sorting options in response to user selection of thesort button106. Note thesearch button104 and thesort button106 represent so-called search-sort toggle functionality, which is discussed more fully in co-pending U.S. patent application Ser. No. 12/792,571, entitled “SEARCH-SORT TOGGLE”, filed Jun. 2, 2010, which is incorporated by reference herein.
• FIG. 2cis a diagram illustrating a thirdexample display screen120 that is accessible via the secondexample display screen90 ofFIG. 2b. Thethird display screen120 may be accessed, for example, by selecting one of theopportunities114 shown in thesecond display screen90 ofFIG. 2b.
• Thethird display screen120 includes theheader92 and an augmented navigation bar132. The augmented navigation bar132 is similar to the navigation bar98 ofFIG. 2bwith the exception of anadditional edit button122 for editing information pertaining to a displayed opportunity object.
• Selected opportunity objectcontents124 appear in an object-information display region134. Theoptional footer84 is provided below and vertically adjacent to the object-information display region134. For illustrative purposes, thefooter84 is shown including thepersonalization option72 and sign-outoption76.
• In the present specific embodiment, when a user selects theback button100, thesecond display screen90 ofFIG. 2bis displayed in response thereto. If a user selects theedit button122 followed by “Save” in a subsequent display screen (not shown), thefirst display screen50 ofFIG. 2ais then displayed. Selection of theedit button122 activates an additional screen that is adapted to facilitate user modification of theinformation124, i.e., object, corresponding to the selected opportunity.
• FIG. 3ais a diagram illustrating a first exampledisplay screen implementation140 of the mobile design pattern underlying thedisplay screen50FIG. 2aapproximately as might appear on an iPhone® display. Note that the software application used to generate thedisplay screen140 ofFIG. 3arepresents a different implementation than the software application used to generate thedisplay screen50 ofFIG. 2a. However both applications adhere to an underlying design pattern involving a list of functionality and one or more header and footer bars as disclosed herein.
• The example iPhone® display screen140 includes a browser bar142, which is adapted to enable a user to enter a Uniform Resource Locator (URL) in aURL field146 to access the underlying application via the Internet. The browser bar142 further includes anInternet search button144 for facilitating conducting Internet-based searches. Various design elements, e.g., thesearch button144 andURL field146, shown in the browser bar142, may currently exist in certain software products used by Apple Inc., such as the iPhone® mobile web browser.
• A header bar148 extending across thescreen140 includes the optional sign-out control74 and header indicia indicating that person-gallery functionality is being accessed. Asearch bar150 is positioned below the header bar148. Thesearch bar150 includes thesearch field108 and anadjacent enter button110, also called a “go” button. An advanced-search-options link152 for accessing advanced search options is also shown in thesearch bar150.
• A list offunctionality156 is provided in an information-display region154 below thesearch bar150. A browser footer158 is also shown.
• Note that while thedisplay screen implementation140 is generated by a browser-based implementation of underlying software in accordance with design patterns discussed herein, other types of implementations are possible. For example, the underlying software may be adapted to run outside of a browser as a stand-alone client-side application.
• FIG. 3bis a diagram illustrating a second example display screen implementation170 (of the mobile design pattern used by the person-gallery application ofFIG. 2a) on a BlackBerry® device display. Thedisplay screen170 ofFIG. 3bis similar to the display screen ofFIG. 3awith respect to the display of application content, with the exception that a scroll bar172 is provided for use with thesmaller display screen170 on a BlackBerry® device. For illustrative purposes, variousBlackBerry® icons174 are shown at the top of thedisplay screen170. Furthermore, the scroll bar172 is a preexisting feature of the mobile web browser used in various BlackBerry® devices.
• Note that the design patterns discussed herein, and exemplified by various display screens discussed herein, work to facilitate efficient access to information regardless of the mobile computing device used. In general, each design pattern will be implemented on each device to ensure a desired user experience. Specific implementation details may be implementation specific. Note, for example, when using an iPhone®, a back button may appear in the display of a given pattern implementation, whereas when using a BlackBerry®, a hard key could be used in place of the back button. Certain key functionality discussed herein resides in the patterns and associated layouts depicting a framework for rendering user interfaces and underlying functionality.
• FIG. 4ais a diagram illustrating a fourthexample display screen180 that is accessible via thefirst display screen50 ofFIG. 2aby selecting one of the calendar controls62 thereof. The fourthexample display screen180 includes theheader92 andfooter84. A calendar-meetings navigation bar182 indicates that thedisplay screen180 is adapted to facilitate user access to functionality for organizing, documenting, and accessing information pertaining to meetings with reference to calendar information, as indicated by the title “Calendar: Meetings” specified in thenavigation bar182.
• Thenavigation bar182 further includes theback button100 for returning to thedisplay screen50 ofFIG. 2a, and a createbutton118 for facilitating creation of a new meetings object. Note that the createbutton118 may be replaced with an edit button; an edit button may be provided in addition to the createbutton118; the createbutton118 and edit button may be omitted; the createbutton118 may be replaced with a drop down menu with additional options for creating objects, editing objects; and so on. The exact functionality to be provided in a given implementation is implementation specific and depends upon the needs of a given application. Those skilled in the art with access to the present teachings may readily determine, without undue experimentation, appropriate functionality to provide in accordance with one or more design patterns disclosed herein.
• Acalendar navigation bar186 is positioned below the calendar-meetings navigation bar182. Thecalendar navigation bar186 provides various controls for adjustingcontent188 to be displayed in an information-display region192 in accordance with a particular day, week, or month.
• Additional drop-down menu controls190 are provided below thecalendar navigation bar186. The drop-down menu controls190 are adapted to enable a user to further adjust the displayedcontent188 based on display criteria provided in the drop-down menu controls190, as discussed more fully below.
• In the presentexample display screen180, thecontent188 lists scheduled meetings displayed in combination with contact information for meeting attendees.
• FIG. 4bis a diagram illustrating a fifthexample display screen200 that is accessible via the fourthexample display screen180 ofFIG. 4a. The fifthexample display screen200 is similar to the fourthexample display screen180 with the exception that the drop-down menu controls190 have been adjusted to display meeting information in accordance with meeting location information.
• For illustrative purposes, the information-display region192 is shown includingmeeting information202, which is graphically displayed, such as bylocations204 on a map in combination with listings of locations and corresponding addresses. Displayedmeeting locations204 may be color coded to corresponding listed meeting-location information.
• Note that additional options for displaying, sorting, and augmenting meeting information may be provided without departing from the scope of the present teachings. For example, the drop-down menu controls190 may include further options to display meeting information in accordance with predetermined tags; in accordance with scheduled meeting duration, and so on. Furthermore, additional calendar-related information other than meetings may be displayed using similar underlying design patterns. For example, the drop-down menu controls190 may be adjusted to display expense information categorized by associated employee; deal closings may be displayed according to dates associated with the deal closings, and so on.
• FIG. 5ais a diagram illustrating a sixthexample display screen210 that is accessible via the secondexample display screen90 ofFIG. 2bafter create functionality is activated therefrom, e.g., via selection of the createbutton118 thereof.
• The sixthexample display screen210 includes theheader92. Although a footer is not shown, a footer may also be provided without departing from the scope of the present teachings. The sixthexample display screen210 is adapted to provide user access to functionality for entering information pertaining to an opportunity, i.e., opportunity-object information.
• Various fields and controls218 are provided for facilitating entering opportunity-object information in an information-display region of the sixthexample display screen210. After desired information is entered in thevarious controls218, asave button214 in a navigation bar212 may be selected, thereby saving the associated opportunity object. Subsequently, with reference toFIG. 5b, a corresponding notification band232 is displayed along with an updatedversion230 of thesixth example display210 ofFIG. 5a. Theexample display230 ofFIG. 5bis called the seventh example display screen herein.
• With reference toFIG. 5a, additional controls are provided below theinformation display region216, such as amore bar220 and accompanyingchevron224 and a notes bar222 with an accompanyingadd icon226 and note-count indicator228. Themore bar220 may facilitate user access to additional controls, e.g., fields, for entering additional information pertaining to an opportunity or otherwise selecting additional predetermined options. Themore bar220 may be omitted without departing from the scope of the present teachings.
• Upon creation of a given opportunity, and before a note pertaining to an opportunity is created, the note-count indication228 will indicate zero. Theadd icon226 may be selected to activate an additional user interface screen for adding a note.
• With reference toFIG. 5c, after the corresponding note is saved, a corresponding notification bar252 is displayed along with an updatedversion250 of thesixth example display210 ofFIG. 5a. A note added in association with a given opportunity object is considered to be a child object of the given opportunity object.
• Theexample display screen250 ofFIG. 5cis called the eighth example display screen herein. The note-count indication228 has been updated inFIG. 5cto show that a note has been added. Furthermore, for illustrative purposes, theadd icon226 is replaced with achevron256 for facilitating access to the associated note. However, theadd icon226 may persist in combination with thechevron256 without departing from the scope of the present teachings.
• In the present embodiment, when a user selects thechevron256, an additional user interface display screen appears, which lists notes and provides one or more controls (and/or additional display screens) for adding additional notes, i.e., child objects, to one or more opportunity objects as desired. The note-count indication228 is adjusted as additional notes are added and/or removed.
• FIG. 6ais a diagram illustrating a ninthexample display screen260, which is accessible via the firstexample display screen50 ofFIG. 2aand further illustrating a band of icons264, including afavorites icon274. Note that the band of icons264, which may also be called a header toolbar, may include controls other than icons without departing from the scope of the present teachings.
• The ninthexample display screen260 may be accessed, for example, via selection of an employee control (not shown) in the list of controls52 ofFIG. 2a. The optional footer is provided84 with thepersonalization option72 and the sign-outoption76. Theexample header92 is also shown.
• The band of icons264 is positioned below and vertically adjacent to an employee navigation bar262. The so-called employee navigation bar262 indicates that employee functionality is provided via thedisplay screen260, i.e., functionality for documenting, augmenting, editing, adding, and so on, information pertaining to employees, i.e., employee objects. The navigation bar262 includes theback button100 for returning to thedisplay screen50 ofFIG. 2aor another display screen as desired.
• The navigation bar262 further includes anedit button122. Theedit button122 of the navigation bar262 is adapted to activate (in response to user selection thereof) one or more additional display screens with one or more controls for editing information, such asemployee information268 displayed in an employee information-display region266 of thedisplay screen260.
• For illustrative purposes, the band of icons264 is shown further including anemail icon270, for facilitating accessing email functionality and composing emails to send to a given employee; amap icon272, for facilitating accessing mapping functionality, such as to map an address associated with a given employee; and thefavorites icon274, for facilitating enabling a user to selectively mark an employee object as a favorite. For example, user selection of thefavorites icon274 facilitates marking theemployee object268 corresponding to Raja Patel, as a favorite, as discussed more fully below with reference toFIG. 6b.
• FIG. 6bis a diagram illustrating a tenthexample display screen280 resulting after selection of thefavorites icon274 from the ninthexample display screen260 ofFIG. 6aand illustrating a corresponding favorites notification282 andadjustment288 to the band of icons264 ofFIG. 6a.
• With reference toFIGS. 6aand6b, upon user selection of thefavorites icon274 ofFIG. 6a, theemployee object268 is marked as a favorite via the addition of afavorites symbol286 adjacent to the “Employee” indicia in the navigation bar292 ofFIG. 6b. Furthermore, the favorites notification band282 appears in thedisplay screen280 indicating that the displayedemployee object268 has been marked as a favorite, i.e., that a favorite employee has been added to the favorites category. In general notification bands, such as the notification band282 may indicate when an object or information associated therewith had been created, deleted, updated, market, and so on.
• The band of icons264 ofFIG. 6ais replaced with the band of icons284 ofFIG. 6b. The band of icons284 ofFIG. 6bis similar to the band of icons264 ofFIG. 6awith the exception that thefavorites icon274 ofFIG. 6ais removed inFIG. 6b, leaving anempty space288. Hence, thefavorites icon274 ofFIG. 6ais selectively omitted according to the status of the displayedobject268. In the present example, since theemployee object268 has been marked as a favorite, thefavorite icon274 ofFIG. 6ais no longer needed. The disappearance of thefavorites icon274 is considered to represent an example of a changing of appearance of an icon in response to or based on user selection thereof. Note that theemployee object268 may be removed from a favorites list, such as via functionality that appears in response to selection of theedit button214 or functionality accessible by selecting one of the favorites controls68 of the first userinterface display screen50 ofFIG. 2a.
• FIG. 6cis a diagram illustrating an eleventhexample display screen300. The eleventhexample display screen300 is accessible from the firstexample display screen50 ofFIG. 2a, such as via selection of one of the favorites controls68 thereof. After an object, such as an employee object or an opportunity object, is marked as a favorite, functionality associated with the object may be further accessible via favorites functionality associated with the favorites controls68 ofFIG. 2a. The eleventhexample display screen300 illustrates an example set of controls for facilitating access to favorites functionality.
• The eleventhexample display screen300 includes an example favorites navigation bar302 with theback button100, a title indicating “Favorites,” and afavorites indicator286.Various controls304 are provided in adisplay region306. Thecontrols304 include afirst link308 for facilitating access to a listing of all objects that have been marked as favorite. The favorites may also be accessible by object type. For example, favorite employees may be accessed via afavorite employee link310; favorite appraisals may be accessed via a favorite appraisals link312; and favorite approvals may be accessed via an approvals link314.
• For example, upon selection of theemployee link310, another screen (not shown) may appear that provides a list of links associated with different employees that have been marked as favorites. The screen may have search/sort toggle functionality. Each listed employee link may facilitate activation of a corresponding screen. The activated employee screen may be similar to thedisplay screen280 ofFIG. 6b, with the exception that the notification bar282 ofFIG. 6bmay be removed.
• With reference toFIGS. 6band6c, after theemployee object268 has been marked as a favorite, it will then appear among the favorites accessible via the favorites link308 and the favorite employees link310 ofFIG. 6c.
• FIG. 7 is a diagram illustrating a twelfthexample display screen330 for implementing a search according to object-type. The twelfthexample display screen330 may be accessible (for example) from the secondexample display screen90 ofFIG. 2b, such as via selection of thesearch control94 thereof.
• The twelfthexample display screen330 includes a search navigation bar332, with anoptional back button100, gobutton334, and display screen title indicating “Search.” In the present example embodiment, thedisplay screen330 is adapted to facilitate an object search. Thedisplay screen330 provides anoptional object picker336. The particular object that is selected via theobject picker336 may affect various search fields and controls188 displayed in response thereto.
• For illustrative purposes, theobject picker336 has been used to select “Employee.” Accordingly, various fields and controls188 facilitate entering search criteria, such as name, department, work location, and title to facilitate implementing a query limited to employee objects.
• Note that theobject picker336 may include a “cross-object” option for facilitating implementing cross-object searches, i.e., searches among all objects that are accessible via the software underlying the userinterface display screen330.
• FIG. 8ais a diagram illustrating a thirteenthexample display screen350, which may be accessible after execution of a search after activation of search functionality from one of the display screens ofFIGS. 1-7. For example, the search controls86 ofFIG. 2a(and/or the search controls94 ofFIGS. 2-8) may be selected to facilitate access to functionality provided via the thirteenthexample display screen350 ofFIG. 8a.
• The thirteenthexample display screen350 illustratessearch results358 of items in response to a shopping query for products available for purchase. The search results358 may be sorted in accordance with a predetermined criterion via thesearch button106. The criterion for sorting may be entered in thefield108. Thesearch button104,toggle button106, andfield108, and enterbutton110 are provided in the row of controls102.
• Thedisplay screen350 includes aheader352, which includes thesearch control94 and ashopping cart control354 for accessing a shopping cart, as discussed more fully below. Thedisplay screen350 further includes a shopping search results navigation bar356 entitled “Results(8)” indicating that eight search results for a given shopping query were returned and displayed among theresults358. The navigation bar356 is positioned between theheader352 and the row of controls102 and is vertically adjacent thereto.
• An additional row of controls102 includes thesearch toggle button104, thesort toggle button106, thesearch field108, and anenter button110. Thesort toggle button106 may be used to selectively sort the displayedresults358 in accordance with predetermined criteria, as may be entered in thefield108. Upon user selection of one of theresults358, thefourteenth display screen370 ofFIG. 8bis displayed.
• FIG. 8bis a diagram illustrating a fourteenthexample display screen370, which is accessible via the thirteenthexample display screen350 ofFIG. 8a. The fourteenthexample display screen370 illustrates aproduct object378, which includes information descriptive of a selected product. Thedisplay screen370 includes theheader92, a shopping-item navigation bar372, a band of icons376, and information pertaining to the selectedproduct378, which is displayed in a shopping-iteminformation display region380.
• A user may mark the shopping object as a favorite; may select theproduct378 for an express order; may email the product information, and so on, via one or more of the icons376. The shopping-item navigation bar372 includes theback button100 for returning to one or more previously displayed screens and further includes an add-to-cart button374. The add-to-cart button374 is adapted to place the displayedproduct378 to a shopping cart upon selection of thebutton374. A subsequently displayed shopping cart may include similar headers, navigation bars, and/or icons arranged similarly to thefourteenth display screen370. Similarly, a notification band may be displayed indicating that a given product has been added to a shopping cart.
• An example generalized method that may be employed to facilitate implementing embodiments of software in accordance with various design patterns discussed herein includes: investigate information pertaining to the intended use of the software and those likely to use the software; define essential mobile task(s); eliminate or minimize non-essential tasks; employ conceptual design using available technologies, such as GPS; minimize time necessary to complete tasks; employ business intelligence as needed, e.g., analytics, while minimizing unnecessary analytics; if search options are desired, implement simple search options, i.e., search options that are quickly accessible; embed collaboration tools as needed, e.g., a control for sending email, placing calls, providing access to social networks, etc.; consider providing progressive disclosure of information and limiting information displayed at once, while concisely stating or summarizing information; and leverage the mobile platform, e.g., by providing the ability to offer browser-accessible and/or native applications and associated functionality.
• While certain design patterns and accompanying example layouts are discussed with reference to certain rows that extending across a user interface display, embodiments are not limited thereto. For example, rows may be replaced with segments, columns, partial rows, or partial columns in certain implementations without departing from the scope of the present teachings. Furthermore, the term “row” is taken to include user interface features that are included in a horizontal partition of a user interface display screen. Note however, that contents of a row need not extend entirely across a display for the contents to be considered as forming a row or being included in a row. For example, a set of buttons may be included in a row, but the buttons need not occupy all of the horizontal space in a given horizontal partition of the display area. Furthermore, a row need not have a visible line or other graphical boundary delineating a horizontal partition comprising the row boundaries.
• Any suitable programming language can be used to implement the routines of particular embodiments including C, C++, Java, assembly language, etc. Different programming techniques can be employed such as procedural or object oriented. The routines can execute on a single processing device or multiple processors. Although the steps, operations, or computations may be presented in a specific order, this order may be changed in different particular embodiments. In some particular embodiments, multiple steps shown as sequential in this specification can be performed at the same time.
• Particular embodiments may be implemented in a computer-readable storage medium for use by or in connection with the instruction execution system, apparatus, system, or device. Particular embodiments can be implemented in the form of control logic in software or hardware or a combination of both. The control logic, when executed by one or more processors, may be operable to perform that which is described in particular embodiments.
• Particular embodiments may be implemented by using a programmed general purpose digital computer, by using application specific integrated circuits, programmable logic devices, field programmable gate arrays, optical, chemical, biological, quantum or nanoengineered systems, components and mechanisms may be used. In general, the functions of particular embodiments can be achieved by any means as is known in the art. Distributed, networked systems, components, and/or circuits can be used. Communication, or transfer, of data may be wired, wireless, or by any other means.
• It will also be appreciated that one or more of the elements depicted in the drawings/figures can also be implemented in a more separated or integrated manner, or even removed or rendered as inoperable in certain cases, as is useful in accordance with a particular application. It is also within the spirit and scope to implement a program or code that can be stored in a machine-readable medium to permit a computer to perform any of the methods described above.
• As used in the description herein and throughout the claims that follow, “a”, “an”, and “the” includes plural references unless the context clearly dictates otherwise. Also, as used in the description herein and throughout the claims that follow, the meaning of “in” includes “in” and “on” unless the context clearly dictates otherwise.
• Thus, while particular embodiments have been described herein, latitudes of modification, various changes, and substitutions are intended in the foregoing disclosures, and it will be appreciated that in some instances some features of particular embodiments will be employed without a corresponding use of other features without departing from the scope and spirit as set forth. Therefore, many modifications may be made to adapt a particular situation or material to the essential scope and spirit.

Claims (20)

1. A user interface template, the template comprising:

a first user interface display screen depicting a list of user interface controls organized in rows, wherein each row in the list includes a different set of one or more controls, wherein each different set of one or more controls is associated with a different set of functionality provided by one or more additional user interface display screens;

a second user interface display screen accessible via one or more of the different sets of one or more controls, wherein the second user interface display screen includes:

a navigation bar that includes one or more navigation controls and a title identifying a set of functionality associated with the different set of one or more controls; and

an information-display region adapted to display data associated with the set of functionality.

2. The template ofclaim 1, wherein the second user interface display screen further includes a second band of controls vertically adjacent to the navigation bar, which is adapted to extend across a display of a mobile computing device.

3. The template ofclaim 2, wherein the second band of controls includes one or more icons or buttons associated with one or more functions of the set of functionality.

4. The template ofclaim 3, wherein the user interface template is adapted to selectively change, add, or omit an icon from the second band of controls according to a status of a function associated with the icon.

5. The template ofclaim 3, wherein the one or more icons includes a search icon and a sort icon.

6. The template ofclaim 5, wherein the search icon and the sort icon are adapted to change appearance in response to user selection thereof.

7. The template ofclaim 5, wherein the second band of controls includes a search field adapted to facilitate searching data and displaying search results in the information-display region in response thereto.

8. The template ofclaim 5, wherein the second band of controls includes a favorites icon that is adapted to associate displayed data with indicia indicating a user favorite.

9. The template ofclaim 1, wherein the second user interface display screen further includes a notification band that is adapted to provide status information pertaining to functionality accessed by a user.

10. The template ofclaim 9, wherein the status information includes an indication that information has been updated or that an object has been created, deleted, or updated.

11. The template ofclaim 1, wherein first user interface display screen further includes a personalization control and a sign-out control for providing a personalization option and a sign-out option, respectively.

12. The template ofclaim 1, wherein the first user interface display screen includes a first row with a control for accessing a worklist.

13. The template ofclaim 1, wherein the first user interface display screen includes a second row with a control for accessing functionality for managing information pertaining to opportunities.

14. The template ofclaim 1, wherein the first user interface display screen includes a second row with a control for accessing functionality for managing information in association with a calendar.

15. The template ofclaim 14, wherein the information in association with a calendar includes information pertaining to scheduled meetings.

16. The template ofclaim 14, wherein the information in association with a calendar includes information pertaining to expenses.

17. The template ofclaim 14, wherein the information in association with a calendar includes deal closings.

18. The template ofclaim 14, wherein the information in association with a calendar includes sales information.

19. An apparatus for providing a design pattern for a software application, the apparatus comprising:

a digital processor coupled to a display screen and to a processor-readable storage device, wherein the processor-readable storage device includes one or more instructions executable by the digital processor to perform the following acts:

displaying a first user interface display screen depicting a list of user interface controls organized in rows, wherein each row in the list includes a different set of one or more controls, wherein each different set of one or more controls is associated with a different set of functionality provided by one or more additional user interface display screens;

illustrating a second user interface display screen accessible via the different sets of one or more controls, wherein the second user interface display screen includes:

a navigation bar that includes one or more navigation controls and a title identifying a set of functionality associated with the different set of one or more controls; and

an information-display region adapted to display data associated with the set of functionality.

20. A processor-readable storage device including instructions executable by a digital processor for providing a design pattern, the processor-readable storage device including one or more instructions for:

displaying a first user interface display screen depicting a list of user interface controls organized in rows, wherein each row in the list includes a different set of one or more controls, wherein each different set of one or more controls is associated with a different set of functionality provided by one or more additional user interface display screens;

illustrating a second user interface display screen accessible via the different sets of one or more controls, wherein the second user interface display screen includes:

a navigation bar that includes one or more navigation controls and a title identifying a set of functionality associated with the different set of one or more controls; and

an information-display region adapted to display data associated with the set of functionality.

Images