US20170329464A1 - Dynamic button with sub-buttons - Google Patents
Dynamic button with sub-buttons Download PDFInfo
- Publication number
- US20170329464A1 US20170329464A1 US15/348,166 US201615348166A US2017329464A1 US 20170329464 A1 US20170329464 A1 US 20170329464A1 US 201615348166 A US201615348166 A US 201615348166A US 2017329464 A1 US2017329464 A1 US 2017329464A1
- Authority
- US
- United States
- Prior art keywords
- dynamic button
- user interface
- interface element
- sub
- buttons
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Abandoned
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
- G06F3/04817—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance using icons
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
- G06F3/0482—Interaction with lists of selectable items, e.g. menus
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
- G06F3/04842—Selection of displayed objects or displayed text elements
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
- G06F3/04845—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range for image manipulation, e.g. dragging, rotation, expansion or change of colour
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0487—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
- G06F3/0488—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures
- G06F3/04883—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures for inputting data by handwriting, e.g. gesture or text
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0487—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
- G06F3/0488—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures
- G06F3/04886—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures by partitioning the display area of the touch-screen or the surface of the digitising tablet into independently controllable areas, e.g. virtual keyboards or menus
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T13/00—Animation
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T13/00—Animation
- G06T13/80—2D [Two Dimensional] animation, e.g. using sprites
Definitions
- This document generally relates to methods and systems for use with graphical user interfaces on computing devices. More particularly, this document relates to a dynamic button with sub-buttons.
- GUIs are interfaces that allow users to interact with computing devices through graphical icons and visual indicators displayed on a computing display. User interactions may be performed via various user input devices, such as keyboards, mice, or even the computing display itself in the case of touchscreen displays, but the depictions of the elements the user interacts with are graphical in nature.
- buttons are often provided by software/operating system designers to allow users to perform simple tasks or actions. For example, a button labeled “delete” may be provided which allows the user to delete some object or file that is currently selected or is simply in view.
- buttons there are follow-up elements displayed in the graphical user interface upon selection of certain important buttons. For example, in the case where the button is a “delete” button, selection of this button by the user does not automatically cause deletion of the selected element or file, lest the user accidentally erases valuable data due to selecting the button inadvertently or without knowledge of what it would do.
- a confirmation dialog is opened, which explains the potential results of the user's action (e.g., “this will delete file XYZ”) and prompts the user for a confirmatory action before completing the selected process (“Select YES if you wish to proceed”).
- One or more buttons for the confirmatory action also appears in the confirmation dialog, allowing the user to select to proceed or to cancel the operation.
- the confirmation dialog typically is presented as a pop-up window that appears over the previous screen in which the user selected the initial button (e.g., DELETE). To the extent the pop-up window does not cover an area of the previous screen, the previous screen appears as faded in the background. Because of this, the user is separated from the contextual information associated with the content on which the action is being triggered. This can be a problem, as the user is then asked to confirm the action without being able to refer to the contextual information that led to the selection of the button in the first place.
- the initial button e.g., DELETE
- opening a confirmation dialog is not always an option given available screen real estate and the computing device. In such cases, a completely new page is served to the user containing the confirmation dialog. In addition to making the lack of contextual information more pronounced, this has the added effect of slowing down the user interface flow by creating additional steps for the user. This is even more pronounced if the user needs to perform the operation many times a day, as most professional business users would. The workflow becomes tedious and inefficient.
- the confirmation dialog can often appear far away from where the initial button was selected, or even in a background window not visible on any display, resulting in the user missing the confirmation dialog, leading to confusion and misunderstandings about whether the operation was or was not performed.
- FIG. 1 is a block diagram illustrating a system including a web browser in accordance with an example embodiment.
- FIGS. 2A-2L are screen captures depicting different frames of a sequence of interacting with a dynamic button in accordance with a first example embodiment.
- FIGS. 4A-4F are screen captures depicting different frames of a sequence of interacting with a dynamic button in accordance with a second example embodiment.
- FIG. 5 is a flow diagram illustrating a method for providing a dynamic button in a user interface in accordance with the second example embodiment.
- FIGS. 6A-6M are screen captures depicting different frames of a sequence of interacting with a dynamic button in accordance with a third example embodiment.
- FIG. 7 is a flow diagram illustrating a method for providing a first dynamic button in a user interface in accordance with the third example embodiment.
- FIGS. 8A-8F are screen captures depicting different frames of a sequence of interacting with a dynamic button in accordance with a fourth example embodiment.
- FIG. 9 is a flow diagram illustrating a method for providing a dynamic button in a user interface in accordance with the fourth example embodiment.
- FIG. 11 is a diagram illustrating a lifecycle of a dynamic button in accordance with an example embodiment.
- FIGS. 14A-14E are diagrams illustrating development of an iOSTM application (also known as an “app”) with a dynamic button, in accordance with an example embodiment.
- FIG. 15 is a block diagram illustrating a hybrid mobile app including a dynamic button control in accordance with an example embodiment.
- FIGS. 16A and 16B illustrate an example flow and code sample for such an embodiment.
- FIGS. 17A-17D are screen captures illustrating deployment of a watch application containing the dynamic button, in accordance with an example embodiment.
- FIG. 18 is a screen capture illustrating activation of multiple dynamic buttons simultaneously in accordance with an example embodiment.
- FIG. 20 is a block diagram illustrating components of a machine, according to some example embodiments, able to read instructions from a machine-readable medium (e.g., a machine-readable storage medium) and perform any one or more of the methodologies discussed herein.
- a machine-readable medium e.g., a machine-readable storage medium
- a dynamic button is provided as a graphical user interface (GUI) element that combines action, data content, action confirmation, and action status in one in-place GUI element.
- GUI graphical user interface
- FIG. 1 is a block diagram illustrating a system 100 including a web browser 102 in accordance with an example embodiment.
- the system 100 represents one example system that can be used to implement the dynamic button.
- the dynamic button is implemented as a Javascript or similar scripting language element, executed in a web browser 102 on a computing device 104 .
- Other example systems on which the dynamic button may be implemented will be discussed in more detail later.
- many of the aspects of the dynamic button will be discussed in terms of this Javascript or similar scripting language implementation. Nevertheless, these aspects could also be implemented on the other example systems described later, and nothing in this disclosure should be interpreted as limiting these aspects to the Javascript or similar scripting language implementation.
- the computing device 104 may be, for example, a desktop computer, laptop computer, tablet computer, smart phone, smart watch or any other computing device capable of displaying a graphical user interface via a scripting language and web browser combination. It should be noted, however, that in fact the further systems described later need not be limited to those computing devices capable of displaying a graphical user interface via a scripting language and web browser combination and can, in fact, extend to any computing devices capable of displaying a graphical user interface.
- the system 100 includes computing device 104 as well as a web server 106 .
- Web server 106 delivers a web page to the computing device 104 . upon request. This request may either be explicit by the user of the computing device 104 , such as navigating the web browser 102 to a specific web address, or may be implicit or automatic.
- the web page may, for example, be in the form of Hypertext Markup Language (HTML) code or other markup language code, which may incorporate various calls and/or scripts through languages such as Cascade Style Sheets (CSS) and Javascript.
- HTML Hypertext Markup Language
- CSS Cascade Style Sheets
- An operating system 108 on the computing device 104 controls interactions between the web browser 102 and a user input device 110 .
- the operating system 108 can detect when a user interacts with the web browser 102 via input to the user input device 110 and transmits such interactions to the web browser 102 .
- user input devices 110 include mice, keyboards, touchpads, touchscreens, microphones, and any other device capable of receiving user input.
- the web browser 102 can output rendered GUI elements on a display device 112 of the computing device 104 .
- the display device 112 and the user input device 110 are the same device, such as in the case of a touchscreen.
- the web browser 102 contains its own user interface 114 (which may display, for example, an address bar, back/forward button, bookmaking menu, etc.).
- a browser engine 116 marshals actions between the user interface 114 and a rendering engine 118 .
- the rendering engine 118 is responsible for rendering content (e.g., web pages).
- the rendering engine 118 may contain one or more specialized parsers (e.g., HTML parser, CSS parser) for this purpose.
- a networking component 120 handles calls such as Hypertext Transfer Protocol (HTTP) to and from the web server 106 , using different implementations based on the platform, typically behind a platform-independent interface.
- HTTP Hypertext Transfer Protocol
- a user interface backend 122 handles drawing basic web page components such as buttons and windows.
- a Javascript interpreter 124 is used to parse and execute Javascript code found in a web page parsed by the rendering engine 118 .
- a data persistence layer 126 allows the web browser 102 to save various types of data locally, such as cookies.
- specialized Javascript code is provided to the Javascript interpreter 124 , either via a downloaded web page or by directly modifying one or more Javascript libraries utilized by the Javascript interpreter 124 , which causes modification of a button GUI in the user interface backend 122 .
- This modification causes the corresponding button element to, when displayed, act in a dynamic manner in response to a user interface to modify visual aspects of the button.
- These modifications may include, or precede, depiction of a confirmation area within the dynamic button, in lieu of launching a separate confirmation dialog window. This allows the user to maintain understanding of the full context of the web page, web browser 102 , or other visual elements on the computing device 104 when deciding whether to confirm the action initiated by selection of the button.
- buttons should be construed to mean buttons in a graphical user interface, also known as virtual buttons.
- Such an act of removal or deletion may require a confirmatory action on the part of the user to confirm that the indicated action should be taken.
- selection of such a button would launch a separate confirmation dialog that may cover up relevant contextual information, such as the attachment list in area 202 may be hidden, or may otherwise create problems for the user.
- selection of the dynamic button 206 A- 206 D causes a sequence of operations, including operations causing the selected dynamic button 206 A- 206 D to morph into a different shape that provides the opportunity for the user to execute the confirmation action from within the dynamic button 206 A- 206 D itself.
- transition animations may be used to convey to the user that selection of the button has occurred as well as to indicate that the button is not being removed but is actually just changing into a different shape.
- a ripple effect may be depicted around dynamic button 206 A to indicate that selection has occurred. This selection may have occurred, for example, by the user depressing a mouse button while the cursor hovered over dynamic button 206 A.
- FIG. 2B the selection of the dynamic button 206 A is further indicated by the depiction of a “ripple” effect around the button 206 A
- FIG. 2B depicts an early frame in the ripple effect sequence.
- a concentric circle 210 is depicted around dynamic button 206 A.
- FIG. 2C depicts how the concentric circle 210 expands further outwards from the dynamic button 206 A and begins to fade, like a ripple in a pond caused when someone throws a rock.
- the dynamic button 206 A then begins to expand, pushing neighboring button 212 towards the left as the dynamic button 206 A enlarges to the left.
- FIG. 2E the dynamic button 206 A continues to grow, and the “X” in the dynamic button 206 A begins to fade. Also fading is the neighboring button 212 .
- the sub-buttons 214 A, 214 B are both part of the UI element dedicated to the dynamic button 206 A, and thus are not independent UI elements from the dynamic button 206 A, such as would be the case if sub-buttons 214 A, 214 B had replaced dynamic button 206 A or been overlaid on top of dynamic button 206 A.
- FIG. 2J this figure begins a sequence where the user selects dynamic button 206 B to delete product 204 B, but then elects not to confirm this deletion.
- the user selects sub-button 214 D, indicating a desire to cancel the earlier deletion request.
- a similar ripple effect as performed earlier may be performed here in response to the user's selection of sub-button 214 D.
- the sub-buttons 214 C, 214 D also fade out, and the dynamic button 206 B then begins to shrink horizontally, as depicted in FIG. 2L .
- the sequence ultimately returns to FIG. 2J , with the dynamic button 206 B shrinking more horizontally, and the return of the “X” inside the dynamic button 206 B and the neighboring button 212 .
- FIG. 3 is a flow diagram illustrating a method 300 for providing a dynamic button in a user interface in accordance with the first example embodiment.
- the dynamic button is rendered as a dynamic button user interface element in the user interface.
- This rendering may include rendering the dynamic button in a manner that an application action caused by selection of the dynamic button is conveyed. This may include, for example, placing the title of the application action (e.g., delete, add, etc.) in the rendering of the dynamic button, but could also or alternatively include using symbols to indicate the application action (e.g., an “X” with a circle to denote deletion).
- the first of these sub-buttons may confirm the application action if selected, while the second of these sub-buttons may deny the application action if selected.
- the application action is executed. This may include, for example, the user interface sending a request to the underlying application to execute the action, or alternatively the user interface may be able to directly execute the action (such as, for example, in the case of a browser rendering a web page containing scripting elements that can be triggered by the user interface).
- the dynamic button shrinks.
- the first and second sub-buttons disappear. In some example embodiments, the dynamic button may also disappear, such as where the application action is a delete action and the dynamic button no longer has relevance Oven the deletion (e.g., its corresponding line in the user interface has been removed).
- the application action is not executed (this may include, in some example embodiments, cancelling the application action if it has not executed yet).
- the dynamic button shrinks. It should be noted that this shrinking may occur in a different manner than the shrinking of operation 316 .
- operation 316 may shrink the dynamic button in a manner suggesting it will disappear completely (such as may be in the case of a delete application action, such as by shrinking the dynamic button vertically when it had expanded horizontally in operation 308 )
- operation 322 may shrink the dynamic button in a manner suggesting it will not disappear completely (such as by shrinking the dynamic button horizontally in the opposite direction of how it expanded horizontally in operation 308 ).
- the first and second sub-buttons disappear. The method 300 may then loop back to operation 302 .
- application action shall be interpreted broadly to mean any action in any application located on any device that is triggered by the dynamic button. This may include, as described above, an action executed in a script of a web page in a web browser, but may also include any other type of application action, such as execution of an action in a stand-alone (e.g., non-browser) application, or execution of an action on a remote server, such as a web server or application server.
- a stand-alone e.g., non-browser
- FIGS. 4A-4F are screen captures depicting different frames of a sequence of interacting with a dynamic button in accordance with a second example embodiment. Unlike the first embodiment described above, in the second embodiment, no confirmatory or denial sub-buttons are presented in the dynamic button user interface element. Rather, the dynamic button user interface is used to communicate results of the underlying application action.
- a window 400 may depict a user interface where various products 402 A- 402 G are depicted in a list form, each of the various products 402 A- 402 G having a corresponding dynamic button 404 A- 404 G.
- the user navigates a cursor 406 over dynamic button 404 A and selects it. Selection can occur in the same or similar manner as described above with respect to the first embodiment.
- the size of button 404 A may first slightly enlarge in size, then slightly shrink to a size smaller than the original size, then finally enlarge again to the original size while at the same time the text and text color within the button 404 A may alter to confirm that the application action has been executed.
- dynamic button 404 A now depicts the results of the application action.
- the application action is “add to cart”, which attempts to add the corresponding product 402 A to an electronic shopping cart.
- this action has been successful
- dynamic button 404 A now depicts that the action has been successful (by, for example, indicating that the product 402 A has been “Added” to the cart and a check sign being displayed.
- Coloring may also be used to indicate success, such as by using green for success for the color of the dynamic button 404 A, check mark, and text).
- FIG. 4C the user has now moved the cursor to and selected dynamic button 404 B, which corresponds to product 402 B.
- the displayed text in the button may first change from “add to cart” to “error” which may be in red text along with an exclamation mark in a circle followed by an animation that slightly moves the button toward the right and back again indicating that the product 402 B, is out of stock and cannot be moved to the cart.
- the application action triggered by the dynamic button 404 B cannot be completed.
- FIG. 4D shows how the dynamic button 404 B changes to display that an error has occurred in the application action (by, for example, having the word “error” appear in the dynamic button 404 B along with an exclamation point inside a circle. Coloring may also be used to indicate an error, such as by using red for error for the color of the dynamic button 404 B, exclamation point, and text).
- FIG. 4E following the dynamic button actions as described in FIG. 4D additional information about the cause of the error is displayed in a separate explanation window 410 . More information can be displayed by selecting a “show more” button 412 , which reveals modified explanation window 414 in FIG. 4F .
- FIG. 5 is a flow diagram illustrating a method 500 for providing a dynamic button in a user interface in accordance with the second example embodiment.
- the dynamic button is rendered as a dynamic button user interface element in the user interface.
- This rendering may include rendering the dynamic button in a manner such that an application action caused by selection of the dynamic button is conveyed. This may include, for example, placing. the title of the application action (e.g., delete, add, etc.) in the rendering of the dynamic button, but could also or alternatively include using symbols to indicate the application action (e.g., an “X” with a circle to denote deletion).
- the method 500 it is determined if selection of the button through user input to the user interface is detected. If not, then the method 500 loops until such a selection is detected.
- an application action is executed.
- the dynamic button changes to indicate that the application action is not successful. This may include morphing the inside of the dynamic button to, for example, display text and/or symbols indicating that the application action was not successful.
- FIGS. 6A-6M are screen captures depicting different frames of a sequence of interacting with a dynamic button in accordance with a third example embodiment.
- a user interface screen 600 includes an area 602 where multiple messages 604 A- 604 C are displayed. Some of these messages 604 B, 604 C have multiple dynamic buttons 606 A- 606 D. Specifically, message 604 B has dynamic buttons 606 A and 606 B and message 604 C has dynamic buttons 606 C and 606 D.
- Dynamic buttons 606 A, 606 C correspond to a first application action, here an “approve all” command to approve requests that are subjects of the corresponding messages 604 B, 604 C, while dynamic buttons 6069 , 606 D correspond to a second application action, here a “reject all” command to reject requests that are subjects of the corresponding message 604 B, 604 C.
- dynamic button 6064 causes dynamic button 6064 to change color or shading. Then the user selects dynamic button 606 A. Selection of dynamic button 6064 causes a ripple effect to start (not pictured), similar to that as described earlier. Once the ripple effect is complete, in FIG. 6B , dynamic button 606 B begins to fade, and dynamic button 606 A begins to grow horizontally in the direction of the dynamic button 606 B. In FIG. 6C , dynamic button 606 A has grown to completely replace dynamic button 606 B. Notably, dynamic button 606 A has an outer perimeter that lines up exactly with three of the four sides of previously displayed dynamic button 606 B.
- dynamic button 606 A now includes two sub-buttons 612 A, 612 B, separated not by a space but by a dividing line 613 .
- the sub-buttons 612 A, 612 B are both part of the UI element dedicated to the dynamic button 606 A, and thus are not independent UI elements from the dynamic button 606 A, such as would be the case if sub-buttons 612 A, 612 B had replaced dynamic button 606 A or been overlaid on top of dynamic button 606 A.
- Sub-button 612 A corresponds to a confirmatory action for the underlying application action of dynamic button 606 A
- sub-button 612 B corresponds to a denial action for the underlying application action of dynamic button 606 A.
- a looping effect 616 begins to circle dynamic button 606 A.
- This looping effect 616 may signify that the underlying application action is being performed. As such, it may be presented in such a way to signify this fact, such as by being displayed in green.
- This looping effect 616 may include redrawing the perimeter of the dynamic button 606 A in a counterclockwise animated fashion, replacing the original color of the perimeter with another color (such as green).
- the looping effect 616 has now completely encircled the perimeter of dynamic button 606 A.
- an indication that the underlying application action has been completed may be displayed inside the dynamic button 606 A, This may include presenting, for example, text and/or symbols indicating that the underlying application action has completed successfully. In some example embodiments, if the underlying application action was not successful, an error message or other negative indicator could be displayed inside the dynamic button 606 A at this stage.
- the looping effect 616 may continue until the user interface has received some sort of indication that the underlying application action has completed. In other words, the looping effect 616 may continue to go around and around the dynamic button 606 A, only stopping when the application action has completed.
- the looping effect 616 may be timed based on intermediate updates based on the stages of completion of the application action. For example, if the underlying application action involves approving four different travel requests, as each travel request approval is completed, the looping effect 616 may be timed to advance another quarter-way around the perimeter of the dynamic button 606 A. In this way, the looping effect 616 indicates to the user how close the entire application action is to completion.
- dynamic button 606 D Another ripple effect may occur in response to this selection.
- dynamic button 606 C fades out and dynamic button 606 D begins to grow horizontally in the direction of the dynamic button 606 C.
- dynamic button 606 D has grown to completely replace dynamic button 606 C.
- dynamic button 606 D has an outer perimeter that lines up exactly with three of the four sides of previously displayed dynamic button 606 C. This allows the remainder of the area 602 , and indeed the user interface screen 600 , to remain exactly as it was in FIG. 6H .
- dynamic button 606 D now includes two sub-buttons 620 A, 620 B, separated not by a space but by a dividing line 622 .
- the sub-buttons 620 A, 6209 are both part of the UI element dedicated to the dynamic button 606 D, and thus are not independent UI elements from the dynamic button 606 D, such as would be the case if sub-buttons 620 A, 620 B had replaced dynamic button 606 D or been overlaid on top of dynamic button 606 D.
- Sub-button 620 A corresponds to a confirmatory action for the underlying application action of dynamic button 606 D
- sub-button 620 B corresponds to a denial action for the underlying application action of dynamic button 606 D.
- FIG. 6J the user has hovered the cursor 608 over sub-button 620 A, and this hovering is depicted visually by changing the color or shading of sub-button 620 A.
- This looping effect 630 may include redrawing the perimeter of the dynamic button 606 D in a counterclockwise animated fashion, replacing the original color of the perimeter with another color (such as red).
- FIG. 6L the looping effect 630 has now completely encircled the perimeter of dynamic button 606 D.
- FIG. 6M an indication that the underlying application action has been completed may be displayed inside the dynamic button 606 D. This may include presenting, for example, text and/or symbols indicating that the underlying application action has completed successfully. In some example embodiments, if the underlying application action was not successful, an error message or other negative indicator could be displayed inside the dynamic button 606 D at this stage.
- FIG. 7 is a flow diagram illustrating a method 700 for providing a first dynamic button in a user interface in accordance with the third example embodiment.
- the first dynamic button is rendered as a dynamic button user interface element in the user interface.
- This rendering may include rendering the first dynamic button in such a manner that a first application action caused by selection of the first dynamic button is conveyed. This may include, for example, placing the title of the first application action (e.g., delete all, approve all, etc.) in the rendering of the first dynamic button, but could also or alternatively include using symbols to indicate the first application action (e.g., an “X” with a circle to denote deletion).
- a second dynamic button is rendered as a dynamic button user interface element in the user interface.
- This rendering may include rendering the second dynamic button in a manner that a second application action caused by selection of the second dynamic button is conveyed.
- the second application action may be, in some example embodiments, opposite of the first application action (e.g., if the first application action is to accept a request, the second application action may be to deny the request). This may include, for example, placing the title of the second application action (e.g., delete all, approve all, etc.) in the rendering of the second dynamic button, but could also or alternatively include using symbols to indicate the second. application action (e.g., an “X” with a circle to denote deletion).
- the second dynamic button is rendered near, but not touching, the first dynamic button.
- the method 700 it is determined if selection of the first dynamic button through user input to the user interface is detected. If not, then the method 700 loops until such a selection is detected. Once the selection is detected, at operation 708 a ripple animation effect is overlaid on the first dynamic button in the corresponding dynamic button user interface element in the user interface.
- the first dynamic button expands in the direction of the second dynamic button, until the first dynamic button has a perimeter that includes at least a portion of a perimeter of the second dynamic button. In some example embodiments, this portion may include three of four sides of the second dynamic button.
- the second dynamic button is removed from the user interface.
- two or more sub-buttons are rendered in the dynamic button user interface element corresponding to the first dynamic button in the user interface.
- the first of these sub-buttons may confirm the first application action if selected, while the second of these sub-buttons may deny the first application action if selected.
- the first application action is executed. This may include, for example, the user interface sending a request to the underlying application to execute the action, or alternatively the user interface may be able to directly execute the action (such as, for example, in the case of a browser rendering a web page containing scripting elements that can be triggered by the user interface).
- the first dynamic button shrinks.
- the first and second sub-buttons disappear.
- the second dynamic button reappears.
- the results of the first application action being executed are displayed in the first dynamic button.
- the first application action is not executed (this may include, in some example embodiments, cancelling the first application action if it has not been executed).
- the first dynamic button shrinks.
- the method 700 may then proceed to operation 722 .
- FIGS. 8A-8F are screen captures depicting different frames of a sequence of interacting with a dynamic button in accordance with a fourth example embodiment.
- a browser window 800 includes a dynamic button 802 .
- the dynamic button 802 is initially depicted as an “X” with a circle around it. This indicates to the user that selecting the dynamic button 802 will cause removal or deletion of some item in the browser window 800 . Such an act of removal or deletion may require a confirmatory action on the part of the user to confirm that the indicated action should be taken. In prior art solutions, selection of such a button would launch a separate confirmation dialog that may cover up relevant contextual information, or may otherwise create problems for the user.
- selection of the dynamic button 802 causes a sequence of operations, including operations causing the selected dynamic button to morph into a different shape that provides the ability for the user to execute the confirmation action from within the dynamic button 802 itself.
- transition animations may be used to convey to the user that selection of the button has occurred as well as to indicate that the button is not being removed but is actually just changing into a different shape.
- dynamic button 802 begins to grow horizontally towards the right. This selection may have occurred, for example, by the user depressing a mouse button while the cursor 804 hovered over dynamic button 802 .
- dynamic button 802 continues to grow, and the “X” in the dynamic button 802 begins to fade.
- new text (“Delete”) fades in in what is now a first sub-button 808 A in the dynamic button 802 .
- dynamic button has almost finished growing and the new text “Delete” has completely faded in, and new text “Cancel” begins to fade in in what is now a second sub-button 808 B in the dynamic button 802 .
- the sub-buttons 808 A, 808 B have both formed within the area of the dynamic button 802 .
- the sub-buttons 808 A, 808 B are both part of the UI element dedicated to the dynamic button 802 , and thus are not independent UI elements from the dynamic button 802 , such as would be the case if sub-buttons 808 A, 808 B had replaced dynamic button 802 or been overlaid on top of dynamic button 802 .
- the dynamic button has finished growing and the text “Cancel” has now completely faded in.
- the user selects sub-button 808 A, indicating a desire to confirm the deletion operation.
- This also causes the dynamic button 802 to begin to shrink, beginning with sub-button 808 B.
- the shrinking of dynamic button 802 continues while the text in the dynamic button 802 also fades and is replaced by confirmation text 810 (e.g., “Success!”) in FIG. 8F .
- Confirmation text 810 indicates successful operation of the underlying application action. Of course, if the underlying application action was not successfully performed, then an error or other denial message could be displayed here. Notably, this confirmation text 810 appears inside the dynamic button 802 .
- the dynamic button 802 may then begin to shrink back down to its original form, replacing the confirmation text 810 with the original “x” symbol.
- FIG. 9 is a flow diagram illustrating a method 900 for providing a dynamic button in a user interface in accordance with the fourth example embodiment.
- the dynamic button is rendered as a dynamic button user interface element in the user interface.
- This rendering may include rendering the dynamic button in such a manner that an application action caused by selection of the dynamic button is conveyed. This may include, for example, placing the title of the application action delete, add, etc.) in the rendering of the dynamic button, but could also or alternatively include using symbols to indicate the application action (e.g., an “X” with a circle to denote deletion).
- the method 900 it is determined if selection of the button through user input to the user interface is detected. If not, then the method 900 loops until such a selection is detected. Once the selection is detected, at operation 906 , the dynamic button expands. At operation 908 , two or more sub-buttons are rendered in the dynamic button user interface element in the user interface.
- the first of these sub-buttons may confirm the application action if selected, while the second of these sub-buttons may deny the application action if selected.
- the application action is executed. This may include, for example, the user interface sending a request to the underlying application to execute the action, or alternatively the user interface may be able to directly execute the action (such as, for example, in the case of a browser rendering a web page containing scripting elements that can be triggered by the user interface).
- the dynamic button shrinks.
- the first and second sub-buttons disappear. In some example embodiments, the dynamic button may also disappear, such as where the application action is a delete action and the dynamic button no longer has relevance given the deletion (e.g., its corresponding line in the user interface has been removed).
- the first dynamic button displays an indication that the application action has been executed.
- the indication that the application action has been executed is removed, and the first dynamic button is rendered at operation 902 .
- the application action is not executed (this may include, in some example embodiments, cancelling the application action if it has not been executed).
- the dynamic button shrinks.
- the first and second sub-buttons disappear.
- the first dynamic button displays an indication that the application action has not been executed.
- the indication that the application action has not been executed is removed, and the first dynamic button is rendered at operation 902 .
- FIG. 10 is a flowchart depicting a dynamic button flow 1000 in accordance with an example embodiment.
- the dynamic button flow 1000 begins. This may include rendering the dynamic button in a graphical user interface.
- a click command is received from a user via the graphical user interface. This click command indicates selection of the dynamic button. Notably, for purposes of this disclosure, any command indicating a selection of the dynamic button will be considered a click, even if the action does not involve pressing a mouse button, such as by tapping a touchscreen.
- morphing is performed to change the dynamic button into two sub-buttons, an action sub-button and a cancel sub-button.
- operation 1008 is performed to change the dynamic button into two sub-buttons, an action sub-button and a cancel sub-button.
- the user has selected the cancel sub-button and the dynamic button flow 1000 returns to operation 1002 .
- the user has selected the action sub-button, and at operation 1012 , the action sub-button morphs and is traced (the looping effect described earlier) while the underlying application action is executed.
- FIG. 11 is a diagram illustrating lifecycle 1100 of a dynamic button in accordance with an example embodiment.
- the lifecycle 1100 is depicted as a timeline from left to right, with the visual depiction of the dynamic button shown at the bottom of the figure.
- the single icon dynamic button is clicked.
- the dynamic button begins morphing, here growing.
- a delay 1106 occurs while the dynamic button morphs into two sub-buttons.
- the dynamic button icon has morphed into split buttons with literals to confirm the action or cancel to reset.
- the user has clicked on the action sub-button.
- FIG. 12 is a diagram illustrating an alternative lifecycle 1200 of a dynamic button in accordance with another example embodiment.
- no action confirmation is used.
- the dynamic button is clicked.
- the dynamic button starts morphing, shaking, and having border tracing performed.
- the dynamic button is in its final state with semantic colors indicating (1) success; (2) error; or (3) warning.
- a time has elapsed e.g., 5 seconds
- a new application session begins, at time 1208 , the dynamic button resets to the original state.
- the animation transition follows a mathematical pattern of a cubic Bezier curve.
- a Bezier curve is a parametric curve. When used in the time domain, it tends to smooth cursor trajectory in eye gaze-controlled interfaces.
- a Bezier curve can be used to specify the velocity over time of an object such as an icon moving from A to B, rather than simply moving at a fixed number of pixels per step.
- a cubic Bezier curve is defined by four points in a plane. The curve starts at the first point, going towards the second point, and arrives at the fourth point coming from the direction of the third point. Typically it will not pass through the second or third points as these points provide directional information. The distance between the first and the second points determines “how far” and “how fast” the curve moves towards the second point before turning towards the third point.
- the dynamic button is not limited to Javascript or other web browser implementations.
- Embodiments are foreseen for any type of graphical user interface.
- Example uses include inline actions, table row level actions, simplified workflows, user interfaces where space is a concern (e.g., mobile applications).
- Example graphical user interfaces include stand-alone application graphical user interfaces, where the methods described above may be designed into the application graphical user interface itself.
- non-Javascript browser implementations are also foreseen where, for example, the dynamic buttons are integrated into the web page itself or are part of a plug-in or other component of the web browser as opposed to being implemented in a scripting language.
- FIGS. 13A-13C are diagrams illustrating code for a dynamic button control applied in a web application in accordance with example embodiments.
- UI5 also sometimes known as OpenUI5 or SAPUI5
- SAPUI5 is a Javascript UI library comprising a feature-rich core and a large number of UI controls organized into libraries.
- the Core includes aspects such as data bindings and models for different data sources, an efficient engine for creating and updating the code of the controls, support for a Model-View-Controller concept, support for declarative UI construction and templates, and automatic loading of appropriate language resources.
- Bootstrapping UI5 is provided, specifying the desired UI library (“sap.m” containing the desired UI controls, the theme of the controls (“sap_bluecrystal”)), and configuring the process of bootstrapping to run asynchronously.
- the core fires an trot event to signal that the library is ready and can be used.
- the UI5 controls are used.
- the code provided in this step actually performs function calls using the UI5 control that has been defined for the dynamic button.
- XML is used to separate the view declaration from the controller logic.
- the declarative definition of the dynamic button is added with the same properties as in the second step 1302 .
- the XML tags are mapped to controls and the attributes are mapped to the properties of the control.
- the controllers of the view are defined.
- the fifth step 1308 illustrated in FIG. 13C .
- data binding a model instance and a binding instance are used.
- the model instance holds the data and provides methods to set the data or to retrieve the data from a server. It also provides a method for creating bindings to the data. When this method is called, a binding instance is created, which contains the binding information and provides an event, which is fired whenever the bound data changes. An element can listen to this event and update its visualization according to the new data.
- the UT uses data binding to bind controls to the model which holds the application data, so that the controls are updated automatically whenever application data changes.
- FIGS. 14A-14E are diagrams illustrating development of an iOSTM application (also known as an “app”) with a dynamic button, in accordance with an example embodiment.
- the iOSTM app can be developed using Swift in Xcode.
- the app can be run in either a device simulator or in an actual connected device. In both cases, Xcode automatically configures the app and desired extension bundles and their initial resources. These bundles are then delivered on the App StoreTM.
- a hybrid mobile app can be developed with dynamic button control using SAPUI5 Framework.
- This hybrid mobile app may include a native app wrapper (e.g., PhoneGap) and an HTML viewer to display the content on the user interface.
- Hybrid apps have the benefit of allowing publication in app stores; also, by embedding the application code in the hybrid app and the library files in the hybrid container, the user needs to install the files only once and does not need to download them every time the application is started.
- the library size is important, whereas in web applications the library is deployed on the server and the user device only needs to download the desired parts of the library at runtime.
- FIG. 15 is a block diagram illustrating a hybrid mobile app 1500 including a dynamic button control in accordance with an example embodiment.
- the hybrid mobile app 1500 includes a device native HTML container 1502 , such as PhoneGap, an adaptation layer 1504 , and multiple apps 1506 A- 1506 D that all utilize an OpenUI5 Framework 1508 that includes a dynamic button control 1510 .
- FIGS. 16A and 16B illustrate an example flow 1600 ( 16 A) and code sample 1602 ( 16 B) for such an embodiment. Similar processes can be used for other frameworks.
- the metadata definition including properties, events, and aggregations, can be controlled.
- the parent class (button) methods can be extended.
- control properties such as button animation parameters, can be defined.
- focus handling including Web Content Accessibility Guidelines (WCAG) compliances, can be controlled.
- RTL right-to-left (RTL) support, including RTL, CSS, HTML, and RU tags, may be supported.
- a watch application can be deployed that contains the dynamic button.
- a watch app target can be, for example, added to an existing iOSTM target, or a new iOSTM project can be created that includes a watch app.
- Xcode automatically configures the watch app and WatchKit extension bundles and their initial resources. Those bundles are then delivered as part of the iOSTM app on the App Store.
- FIGS. 17A-17D are screen captures illustrating deployment of a watch application containing the dynamic button, in accordance with an example embodiment.
- a developer selects target 1700 as a target application for the dynamic button control 1702 .
- a template is selected for the target application.
- watchOS Application 1704 is selected.
- options 1706 for the new target 1700 may be selected.
- a dynamic button demo 1708 may be previewed.
- FIG. 18 is a screen capture illustrating activation of multiple dynamic buttons simultaneously in accordance with an example embodiment.
- User interface 1800 includes an area including checkboxes 1802 A- 1802 E, each corresponding to a different product 1804 A- 1804 E, respectively, and each also corresponding to a different dynamic button 1806 A- 1806 E.
- the user has an option to select a dynamic button corresponding to a line item one at a time, or select one or more of the checkboxes 1802 A- 1802 E and then press a joint activation button 1808 (here indicating “add selected to cart”).
- each of the state types display different animation sequences and durations that end in a staggered fashion. For example:
- the morphing of multiple selected dynamic buttons may result in some of the dynamic buttons performing completely different actions or types of actions than other of the dynamic buttons. Additionally, the buttons may complete their actions at different times.
- a hybrid application comprising:
- Example 1 wherein the dynamic button control is further configured to, in response to detection of selection of the dynamic button by the user via the graphical user interface, cause a ripple effect animation to appear prior to the dynamic button user interface element changing from the first shape to the second shape, the ripple effect animation including one or more concentric circles expanding outwards from a selection area of the dynamic button until fading.
- Example 3 The hybrid application of Example 3, wherein the looping animation is timed so that the looping animation completes one revolution around the dynamic button user interface element at the time the application action has completely finished executing.
- Example 3 The hybrid application of Example 3, wherein the looping animation is depicted using a first color if the first of the sub-buttons corresponds to an approval command.
- Example 5 wherein the dynamic button control is further configured to, in response to detection of selection of a second of the sub-buttons by the user via the graphical user interface, cause a second looping animation around the dynamic button user interface element, the second looping animation including a visual element encircling the dynamic button user interface element.
- a method comprising:
- Example 8 further comprising, in response to detection of selection of the dynamic button by the user via the graphical user interface, causing a ripple effect animation to appear prior to the dynamic button user interface element changing from the first shape to the second shape, the ripple effect animation including one or more concentric circles expanding outwards from a selection area of the dynamic button until fading.
- Example 8 further comprising, in response to detection of selection of a first of the sub-buttons by the user via the graphical user interface, causing a looping animation around the dynamic button user interface element prior to causing the dynamic button user interface element to change from the second shape to the first shape, the looping animation including a visual element encircling the dynamic button user interface element.
- Example 10 The method of Example 10, wherein the looping animation is timed so that the looping animation completes one revolution around the dynamic button user interface element at the time the application action has completely finished executing.
- Example 10 The method of Example 10, wherein the looping animation is depicted using a first color if the first of the sub-buttons corresponds to an approval command.
- Example 12 further comprising, in response to detection of selection of a second of the sub-buttons by the user via the graphical user interface, causing a second looping animation around the dynamic button user interface element, the second looping animation including a visual element encircling the dynamic button user interface element.
- Example 13 The method of Example 13, wherein the second looping animation is depicted using a second color if the second of the sub-buttons corresponds to an approval command.
- a non-transitory machine-readable storage medium comprising instructions, which when implemented by one or more machines, cause the one or more machines to perform operations comprising:
- Example 15 The non-transitory machine-readable storage medium of Example 15, wherein the operations further comprise, in response to detection of selection of the dynamic button by the user via the graphical user interface, causing a ripple effect animation to appear prior to the dynamic button user interface element changing from the first shape to the second shape, the ripple effect animation including one or more concentric circles expanding outwards from a selection area of the dynamic button until fading.
- Example 15 The non-transitory machine-readable storage medium of Example 15, wherein the operations further comprise, in response to detection of selection of a first of the sub-buttons by the user via the graphical user interface, causing a looping animation around the dynamic button user interface element prior to causing the dynamic button user interface element to change from the second shape to the first shape, the looping animation including a visual element encircling the dynamic button user interface element.
- Example 17 The non-transitory machine-readable storage medium of Example 17, wherein the looping animation is timed so that the looping animation completes one revolution around the dynamic button user interface element at the time the application action has completely finished executing.
- Example 17 The non-transitory machine-readable storage medium of Example 17, wherein the looping animation is depicted using a first color if the first of the sub-buttons corresponds to an approval command.
- Example 19 The non-transitory machine-readable storage medium of Example 19, wherein the operations further comprise, in response to detection of selection of a second of the sub-buttons by the user via the graphical user interface, causing a second looping animation around the dynamic button user interface element, the second looping animation including a visual element encircling the dynamic button user interface element.
- Modules may constitute either software modules (e.g., code embodied on a machine-readable medium) or hardware modules.
- a “hardware module” is a tangible unit capable of performing certain operations and may be configured or arranged in a certain physical manner.
- one or more computer systems e.g., a standalone computer system, a client computer system, or a server computer system
- one or more hardware modules of a computer system e.g., a processor or a group of processors
- software e.g., an application or application portion
- a hardware module may be implemented mechanically, electronically, or any suitable combination thereof.
- a hardware module may include dedicated circuitry or logic that is permanently configured to perform certain operations.
- a hardware module may be a special-purpose processor, such as a Field-Programmable Gate Array (FPGA) or an Application Specific Integrated Circuit (ASIC),
- a hardware module may also include programmable logic or circuitry that is temporarily configured by software to perform certain operations.
- a hardware module may include software executed by a general-purpose processor or other programmable processor. Once configured by such software, hardware modules become specific machines (or specific components of a machine) uniquely tailored to perform the configured functions and are no longer general-purpose processors. It will be appreciated that the decision to implement a hardware module mechanically, in dedicated and permanently configured circuitry, or in temporarily configured circuitry (e.g., configured by software) may be driven by cost and time considerations.
- hardware module should be understood to encompass a tangible entity, be that an entity that is physically constructed, permanently configured (e.g., hardwired), or temporarily configured (e.g., programmed) to operate in a certain manner or to perform certain operations described herein.
- “hardware-implemented module” refers to a hardware module. Considering embodiments in which hardware modules are temporarily configured (e.g., programmed), each of the hardware modules need not be configured or instantiated at any one instance in time. For example, where a hardware module comprises a general-purpose processor configured by software to become a special-purpose processor, the general-purpose processor may be configured as respectively different special-purpose processors (e.g., comprising different hardware modules) at different times. Software accordingly configures a particular processor or processors, for example, to constitute a particular hardware module at one instance of time and to constitute a different hardware module at a different instance of time.
- Hardware modules can provide information to, and receive information from, other hardware modules. Accordingly, the described hardware modules may be regarded as being communicatively coupled. Where multiple hardware modules exist contemporaneously, communications may be achieved through signal transmission (e.g., over appropriate circuits and buses) between or among two or more of the hardware modules. In embodiments in which multiple hardware modules are configured or instantiated at different times, communications between such hardware modules may be achieved, for example, through the storage and retrieval of information in memory structures to which the multiple hardware modules have access. For example, one hardware module may perform an operation and store the output of that operation in a memory device to which it is communicatively coupled. A further hardware module may then, at a later time, access the memory device to retrieve and process the stored output. Hardware modules may also initiate communications with input or output devices, and can operate on a resource (e.g., a collection of information).
- a resource e.g., a collection of information
- processors may be temporarily configured (e.g., by software) or permanently configured to perform the relevant operations. Whether temporarily or permanently configured, such processors may constitute processor-implemented modules that operate to perform one or more operations or functions described herein.
- processor-implemented module refers to a hardware module implemented using one or more processors.
- the methods described herein may be at least partially processor-implemented, with a particular processor or processors being an example of hardware.
- a particular processor or processors being an example of hardware.
- the operations of a method may be performed by one or more processors or processor-implemented modules.
- the one or more processors may also operate to support performance of the relevant operations in a “cloud computing” environment or as a “software as a service” (SaaS).
- SaaS software as a service
- at least some of the operations may be performed by a group of computers (as examples of machines including processors), with these operations being accessible via a network (e.g., the Internet) and via one or more appropriate interfaces (e.g., an API).
- processors or processor-implemented modules may be located in a single geographic location within a home environment, an office environment, or a server farm). In other example embodiments, the processors or processor-implemented modules may be distributed across a number of geographic locations.
- FIGS. 1-18 are implemented in some embodiments in the context of a machine and an associated software architecture.
- the sections below describe representative software architecture(s) and machine (e.g., hardware) architecture(s) that are suitable for use with the disclosed embodiments.
- Software architectures are used in conjunction with hardware architectures to create devices and machines tailored to particular purposes. For example, a particular hardware architecture coupled with a particular software architecture will create a mobile device, such as a mobile phone, tablet device, or so forth. A slightly different hardware and software architecture may yield a smart device for use in the “internet of things,” while yet another combination produces a server computer for use within a cloud computing architecture. Not all combinations of such software and hardware architectures are presented here, as those of skill in the art can readily understand how to implement the inventive subject matter in different contexts from the disclosure contained herein.
- FIG. 19 is a block diagram 1900 illustrating a representative software architecture 1902 , which may be used in conjunction with various hardware architectures herein described.
- FIG. 19 is merely a non-limiting example of a software architecture, and it will be appreciated that many other architectures may be implemented to facilitate the functionality described herein.
- the software architecture 1902 may be executing on hardware such as a machine 2000 of FIG. 20 that includes, among other things, processors 2010 , memory/storage 2030 , and I/O components 2050 .
- a representative hardware layer 1904 is illustrated and can represent, for example, the machine 2000 of FIG. 20 .
- the representative hardware layer 1904 comprises one or more processing units 1906 having associated executable instructions 1908 .
- the executable instructions 1908 represent the executable instructions of the software architecture 1902 , including implementation of the methods, modules, and so forth of FIGS. 1-18 .
- the hardware layer 1904 also includes memory and/or storage modules 1910 , which also have the executable instructions 1908 .
- the hardware layer 1904 may also comprise other hardware 1912 , which represents any other hardware of the hardware layer 1904 , such as the other hardware illustrated as part of the machine 2000 .
- the software architecture 1902 may be conceptualized as a stack of layers where each layer provides particular functionality.
- the software architecture 1902 may include layers such as an operating system 1914 , libraries 1916 , frameworks/middleware 1918 , applications 1920 , and a presentation layer 1944 .
- the applications 1920 and/or other components within the layers may invoke API calls 1924 through the software stack and receive responses, returned values, and so forth, illustrated as messages 1926 , in response to the API calls 1924 .
- the layers illustrated are representative in nature and not all software architectures have all layers. For example, some mobile or special purpose operating systems may not provide a layer of frameworks/middleware 1918 , while others may provide such a layer. Other software architectures may include additional or different layers.
- the operating system 1914 may manage hardware resources and provide common services.
- the operating system 1914 may include, for example, a kernel 1928 , services 1930 , and drivers 1932 .
- the kernel 1928 may act as an abstraction layer between the hardware and the other software layers.
- the kernel 1928 may be responsible for memory management, processor management (e.g., scheduling), component management, networking, security settings, and so on.
- the services 1930 may provide other common services for the other software layers.
- the drivers 1932 may be responsible for controlling or interfacing with the underlying hardware.
- the drivers 1932 may include display drivers, camera drivers, Bluetooth® drivers, flash memory drivers, serial communication drivers (e.g., Universal Serial Bus (USB) drivers), Wi-Fi® drivers, audio drivers, power management drivers, and so forth depending on the hardware configuration.
- USB Universal Serial Bus
- the libraries 1916 may provide a common infrastructure that may be utilized by the applications 1920 and/or other components and/or layers.
- the libraries 1916 typically provide functionality that allows other software modules to perform tasks in an easier fashion than by interfacing directly with the underlying operating system 1914 functionality (e.g., kernel 1928 , services 1930 , and/or drivers 1932 ).
- the libraries 1916 may include system libraries 1934 (e.g., C standard library) that may provide functions such as memory allocation functions, string manipulation functions, mathematic functions, and the like.
- libraries 1916 may include API libraries 1936 such as media libraries (e.g., libraries to support presentation and manipulation of various media formats such as MPEG4, H.264, MP3, AAC, AMR, JPG, PNG), graphics libraries (e.g., an OpenGL framework that may be used to render 2D and 3D graphic content on a display), database libraries (e.g., SQLite that may provide various relational database functions), web libraries (e.g., WebKit that may provide web browsing functionality), and the like.
- the libraries 1916 may also include a wide variety of other libraries 1938 to provide many other APIs to the applications 1920 and other software components/modules.
- the frameworks 1918 may provide a higher-level common infrastructure that may be utilized by the applications 1920 and/or other software components/modules.
- the frameworks 1918 may provide various graphic user interface (GUI) functions, high-level resource management, high-level location services, and so forth.
- GUI graphic user interface
- the frameworks 1918 may provide a broad spectrum of other APIs that may be utilized by the applications 1920 and/or other software components/modules, some of which may be specific to a particular operating system or platform.
- the applications 1920 include built-in applications 1940 and/or third-party applications 1942 .
- built-in applications 1940 may include, but are not limited to, a contacts application, a browser application, a. book reader application, a location application, a media application, a messaging application, and/or a game application.
- the third-party applications 1942 may include any of the built-in applications 1940 as well as a broad assortment of other applications.
- the third-party application 1942 e.g., an application developed using the AndroidTM or iOSTM software development kit (SDK) by an entity other than the vendor of the particular platform
- the third-party application 1942 may be mobile software running on a mobile operating system such as iOSTM, AndroidTM, Windows® Phone, or other mobile operating systems.
- the third-party application 1942 may invoke the API calls 1924 provided by the mobile operating system such as the operating system 1914 to facilitate functionality described herein.
- the applications 1920 may utilize built-in operating system 1914 functions (e.g., kernel 1928 , services 1930 , and/or drivers 1932 ), libraries 1916 (e.g., system libraries 1934 , API libraries 1936 , and other libraries 1938 ), and frameworks/middleware 1918 to create user interfaces to interact with users of the system.
- libraries 1916 e.g., system libraries 1934 , API libraries 1936 , and other libraries 1938
- frameworks/middleware 1918 e.g., system libraries 1934 , API libraries 1936 , and other libraries 1938
- frameworks/middleware 1918 e.g., frameworks/middleware 1918 to create user interfaces to interact with users of the system.
- interactions with a user may occur through a presentation layer, such as the presentation layer 1944 .
- the application/module “logic” can be separated from the aspects of the application/module that interact with a user.
- Some software architectures utilize virtual machines.
- this is illustrated by a virtual machine 1948 .
- a virtual machine creates a software environment where applications/modules can execute as if they were executing on a hardware machine (such as the machine 2000 of FIG. 20 , for example).
- a virtual machine is hosted by a host operating system (e.g., operating system 1914 in FIG. 19 ) and typically, although not always, has a virtual machine monitor 1946 , which manages the operation of the virtual machine 1948 as well as the interface with the host operating system (e.g., operating system 1914 ).
- a host operating system e.g., operating system 1914 in FIG. 19
- a virtual machine monitor 1946 typically, although not always, has a virtual machine monitor 1946 , which manages the operation of the virtual machine 1948 as well as the interface with the host operating system (e.g., operating system 1914 ).
- a software architecture executes within the virtual machine 1948 , such as an operating system 1950 , libraries 1952 , frameworks/middleware 1954 , applications 1956 , and/or a presentation layer 1958 . These layers of software architecture executing within the virtual machine 1948 can be the same as corresponding layers previously described or may be different.
- FIG. 20 is a block diagram illustrating components of a machine 2000 , according to some example embodiments, able to read instructions from a machine-readable medium (e.g., a machine-readable storage medium) and perform any one or more of the methodologies discussed herein.
- FIG. 20 shows a diagrammatic representation of the machine 2000 in the example form of a computer system, within which instructions 2016 (e.g., software, a program, an application, an applet, an app, or other executable code) for causing the machine 2000 to perform any one or more of the methodologies discussed herein may be executed.
- the instructions 2016 transform the general, non-programmed machine into a particular machine programmed to carry out the described and illustrated functions in the manner described.
- the machine 2000 operates as a standalone device or may be coupled (e.g., networked) to other machines.
- the machine 2000 may operate in the capacity of a server machine or a client machine in a server-client network environment, or as a peer machine in a peer-to-peer (or distributed) network environment.
- the machine 2000 may comprise, but not be limited to, a server computer, a client computer, a PC, a tablet computer, a laptop computer, a netbook, a set-top box (STB), a personal digital assistant (PDA), an entertainment media system, a cellular telephone, a smart phone, a mobile device, a wearable device (e.g., a smart watch), a smart home device (e.g., a smart appliance), other smart devices, a web appliance, a network router, a network switch, a network bridge, or any machine capable of executing the instructions 2016 , sequentially or otherwise, that specify actions to be taken by the machine 2000 .
- the term “machine” shall also be taken to include a collection of machines 2000 that individually or jointly execute the instructions 2016 to perform any one or more of the methodologies discussed herein.
- the machine 2000 may include processors 2010 , memory/storage 2030 , and I/O components 2050 , which may be configured to communicate with each other such as via a bus 2002 .
- the processors 2010 e.g., a Central Processing Unit (CPU), a Reduced Instruction Set Computing (RISC) processor, a Complex Instruction Set Computing (CISC) processor, a Graphics Processing Unit (GPU), a Digital Signal Processor (DSP), an ASIC, a Radio-Frequency Integrated Circuit (RFIC), another processor, or any suitable combination thereof
- the processors 2010 may include, for example, a processor 2012 and a processor 2014 that may execute the instructions 2016 .
- processor is intended to include multi-core processors that may comprise two or more independent processors (sometimes referred to as “cores”) that may execute instructions 2016 contemporaneously.
- FIG. 20 shows multiple processors 2010
- the machine 2000 may include a single processor with a single core, a single processor with multiple cores (e.g., a multi-core processor), multiple processors with a single core, multiple processors multiples cores, or any combination thereof.
- the memory/storage 2030 may include a memory 2032 , such as a main memory, or other memory storage, and a storage unit 2036 , both accessible to the processors 2010 such as via the bus 2002 .
- the storage unit 2036 and memory 2032 store the instructions 2016 embodying any one or more of the methodologies or functions described herein.
- the instructions 2016 may also reside, completely or partially, within the memory 2032 , within the storage unit 2036 , within at least one of the processors 2010 (e.g., within the processor's cache memory), or any suitable combination thereof, during execution thereof by the machine 2000 .
- the memory 2032 , the storage unit 2036 , and the memory of the processors 2010 are examples of machine-readable media.
- machine-readable medium means a device able to store instructions and data temporarily or permanently and may include, but is not limited to, random-access memory (RAM), read-only memory (ROM), buffer memory, flash memory, optical media, magnetic media, cache memory. other types of storage (e.g., Erasable Programmable Read-Only Memory (EEPROM)), and/or any suitable combination thereof
- RAM random-access memory
- ROM read-only memory
- buffer memory flash memory
- optical media magnetic media
- cache memory other types of storage
- EEPROM Erasable Programmable Read-Only Memory
- machine-readable medium should be taken to include a single medium or multiple media (e.g., a centralized or distributed database, or associated caches and servers) able to store the instructions 2016 .
- machine-readable medium shall also be taken to include any medium, or combination of multiple media, that is capable of storing instructions (e.g., instructions 2016 ) for execution by a machine (e.g., machine 2000 ), such that the instructions, when executed by one or more processors of the machine (e.g., processors 2010 ), cause the machine to perform any one or more of the methodologies described herein.
- a “machine-readable medium” refers to a single storage apparatus or device, as well as “cloud-based” storage systems or storage networks that include multiple storage apparatus or devices.
- the term “machine-readable medium” excludes signals per se.
- the I/O components 2050 may include a wide variety of components to receive input, provide output, produce output, transmit information, exchange information, capture measurements, and so on.
- the specific I/O components 2050 that are included in a particular machine will depend on the type of machine. For example, portable machines such as mobile phones will likely include a touch input device or other such input mechanisms, while a headless server machine will likely not include such a touch input device. It will be appreciated that the I/O components 2050 may include many other components that are not shown in FIG. 20 .
- the I/O components 2050 are grouped according to functionality merely for simplifying the following discussion and the grouping is in no way limiting. In various example embodiments, the I/O components 2050 may include output components 2052 and input components 2054 .
- the output components 2052 may include visual components (e.g., a display such as a plasma display panel (PDP), a light emitting diode (LED) display, a liquid crystal display (LCD), a projector, or a cathode ray tube (CRT)), acoustic components (e.g., speakers), haptic components (e.g., a vibratory motor, resistance mechanisms), other signal generators, and so forth.
- a display such as a plasma display panel (PDP), a light emitting diode (LED) display, a liquid crystal display (LCD), a projector, or a cathode ray tube (CRT)
- acoustic components e.g., speakers
- haptic components e.g., a vibratory motor, resistance mechanisms
- the input components 2054 may include alphanumeric input components (e.g., a keyboard, a touch screen configured to receive alphanumeric input, a photo-optical keyboard, or other alphanumeric input components), point based input components (e.g., a mouse, a touchpad, a trackball, a joystick, a motion sensor, or another pointing instrument), tactile input components (e.g., a physical button, a touch screen that provides location and/or force of touches or touch gestures, or other tactile input components), audio input components (e.g., a microphone), and the like.
- alphanumeric input components e.g., a keyboard, a touch screen configured to receive alphanumeric input, a photo-optical keyboard, or other alphanumeric input components
- point based input components e.g., a mouse, a touchpad, a trackball, a joystick, a motion sensor, or another pointing instrument
- tactile input components e.g., a physical button,
- the I/O components 2050 may include biometric components 2056 , motion components 2058 , environmental components 2060 , or position components 2062 , among a wide array of other components.
- the biometric components 2056 may include components to detect expressions (e.g., hand expressions, facial expressions, vocal expressions, body gestures, or eye tracking), measure biosignals (e.g., blood pressure, heart rate, body temperature, perspiration, or brain waves), identify a person voice identification, retinal identification, facial identification, fingerprint identification, or electroencephalogram based identification), and the like.
- the motion components 2058 may include acceleration sensor components (e.g., accelerometer), gravitation sensor components, rotation sensor components (e.g., gyroscope), and so forth.
- the environmental components 2060 may include, for example, illumination sensor components (e.g., photometer), temperature sensor components (e.g., one or more thermometers that detect ambient temperature), humidity sensor components, pressure sensor components (e.g., barometer), acoustic sensor components (e.g., one or more microphones that detect background noise), proximity sensor components (e.g., infrared sensors that detect nearby objects), gas sensors (e.g., gas detection sensors to detect concentrations of hazardous gases for safety or to measure pollutants in the atmosphere), or other components that may provide indications, measurements, or signals corresponding to a surrounding physical environment.
- illumination sensor components e.g., photometer
- temperature sensor components e.g., one or more thermometers that detect ambient temperature
- humidity sensor components e.g., pressure sensor components (e.g., barometer)
- the position components 2062 may include location sensor components (e.g., a Global Position System (GPS) receiver component), altitude sensor components (e.g., altimeters or barometers that detect air pressure from which altitude may be derived), orientation sensor components (e.g., magnetometers), and the like.
- location sensor components e.g., a Global Position System (GPS) receiver component
- altitude sensor components e.g., altimeters or barometers that detect air pressure from which altitude may be derived
- orientation sensor components e.g., magnetometers
- the I/O components 2050 may include communication components 2064 operable to couple the machine 2000 to a network 2080 or devices 2070 via a coupling 2082 and a coupling 2072 , respectively.
- the communication components 2064 may include a network interface component or other suitable device to interface with the network 2080 .
- the communication components 2064 may include wired communication components, wireless communication components, cellular communication components, Near Field Communication (NFC) components, Bluetooth® components (e.g., Bluetooth® Low Energy), Wi-Fi® components, and other communication components to provide communication via other modalities.
- the devices 2070 may be another machine or any of a wide variety of peripheral devices (e.g., a peripheral device coupled via a USB).
- the communication components 2064 may detect identifiers or include components operable to detect identifiers.
- the communication components 2064 may include Radio Frequency Identification (RFID) tag reader components, NFC smart tag detection components, optical reader components (e.g., an optical sensor to detect one-dimensional bar codes such as Universal Product Code (UPC) bar code, multi-dimensional bar codes such as Quick Response (QR) code, Aztec code, Data Matrix, Dataglyph, MaxiCode, PDF417, Ultra Code, UCC RSS-2D bar code, and other optical codes), or acoustic detection components (e.g., microphones to identify tagged audio signals).
- RFID Radio Frequency Identification
- NFC smart tag detection components e.g., an optical sensor to detect one-dimensional bar codes such as Universal Product Code (UPC) bar code, multi-dimensional bar codes such as Quick Response (QR) code, Aztec code, Data Matrix, Dataglyph, MaxiCode, PDF417, Ultra Code, UCC RSS-2D bar code, and other optical codes
- RFID Radio Fre
- IP Internet Protocol
- Wi-Fi® Wireless Fidelity
- NFC beacon signal a may indicate a particular location, and so forth.
- one or more portions of the network 2080 may be an ad hoc network, an intranet, an extranet, a virtual private network (VPN), a local area network (LAN), a wireless LAN (WLAN), a WAN, a wireless WAN (WWAN), a metropolitan area network (MAN), the Internet, a portion of the Internet, a portion of the Public Switched Telephone Network (PSTN), a plain old telephone service (POTS) network, a cellular telephone network, a wireless network, a Wi-Fi® network, another type of network, or a combination of two or more such networks.
- VPN virtual private network
- LAN local area network
- WLAN wireless LAN
- WAN wireless WAN
- MAN metropolitan area network
- PSTN Public Switched Telephone Network
- POTS plain old telephone service
- the network 2080 or a portion of the network 2080 may include a wireless or cellular network and the coupling 2082 may be a Code Division Multiple Access (CDMA) connection, a Global System for Mobile communications (GSM) connection, or another type of cellular or wireless coupling.
- CDMA Code Division Multiple Access
- GSM Global System for Mobile communications
- the coupling 2082 may implement any of a variety of types of data transfer technology, such as Single Carrier Radio Transmission Technology (1xRTT), Evolution-Data Optimized (EVDO) technology, General Packet Radio Service (GPRS) technology, Enhanced Data rates for GSM Evolution (EDGE) technology, third Generation Partnership Project (3GPP) including 3G, fourth generation wireless (4G) networks, Universal Mobile Telecommunications System (UMTS), High Speed Packet Access (FISPA), Worldwide Interoperability for Microwave Access (WiMAX), Long Term Evolution (LTE) standard, others defined by various standard-setting organizations, other long range protocols, or other data transfer technology.
- 1xRTT Single Carrier Radio Transmission Technology
- GPRS General Packet Radio Service
- EDGE Enhanced Data rates for GSM Evolution
- 3GPP Third Generation Partnership Project
- 4G fourth generation wireless (4G) networks
- FISPA High Speed Packet Access
- WiMAX Worldwide Interoperability for Microwave Access
- LTE Long Term
- the instructions 2016 may be transmitted or received over the network 2080 using a transmission medium via a network interface device (e.g., a network interface component included in the communication components 2064 ) and utilizing any one of a number of well-known transfer protocols (e.g., HTTP). Similarly, the instructions 2016 may be transmitted or received using a transmission medium via the coupling 2072 (e.g., a peer-to-peer coupling) to the devices 2070 .
- the term “transmission medium” shall be taken to include any intangible medium that is capable of storing, encoding, or carrying the instructions 2016 for execution h the machine 2000 , and includes digital or analog communications signals or other intangible media to facilitate communication of such software.
- inventive subject matter has been described with reference to specific example embodiments, various modifications and changes may be made to these embodiments without departing from the broader scope of embodiments of the present disclosure.
- inventive subject matter may be referred to herein, individually or collectively, by the term “invention” merely for convenience and without intending to voluntarily limit the scope of this application to any single disclosure or inventive concept if more than one is, in fact, disclosed.
- the term “or” may be construed in either an inclusive or exclusive sense. Moreover, plural instances may be provided for resources, operations, or structures described herein as a single instance. Additionally, boundaries between various resources, operations, modules, engines, and data stores are somewhat arbitrary, and particular operations are illustrated in a context of specific illustrative configurations. Other allocations of functionality are envisioned and may fall within a scope of various embodiments of the present disclosure. In general, structures and functionality presented as separate resources in the example configurations may be implemented as a combined structure or resource. Similarly, structures and functionality presented as a single resource may be implemented as separate resources. These and other variations, modifications, additions, and improvements fall within a scope of embodiments of the present disclosure as represented by the appended claims. The specification and drawings are, accordingly, to be regarded in an illustrative rather than a restrictive sense.
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
Description
- This application is a Non-Provisional of and claims the benefit of priority under 35 U.S.C. §119(e) from U.S. Provisional Application Ser. No. 62/334,651, entitled “DYNAMIC BUTTON,” filed on May 11, 2016 which is hereby incorporated by reference herein in its entirety.
- This document generally relates to methods and systems for use with graphical user interfaces on computing devices. More particularly, this document relates to a dynamic button with sub-buttons.
- Graphical user interfaces (GUIs) are interfaces that allow users to interact with computing devices through graphical icons and visual indicators displayed on a computing display. User interactions may be performed via various user input devices, such as keyboards, mice, or even the computing display itself in the case of touchscreen displays, but the depictions of the elements the user interacts with are graphical in nature.
- One commonly used graphical element in GUIs is a virtual button, or simply a button (although as distinguished from a physical button on the computing device itself). Buttons are often provided by software/operating system designers to allow users to perform simple tasks or actions. For example, a button labeled “delete” may be provided which allows the user to delete some object or file that is currently selected or is simply in view.
- Oftentimes there are follow-up elements displayed in the graphical user interface upon selection of certain important buttons. For example, in the case where the button is a “delete” button, selection of this button by the user does not automatically cause deletion of the selected element or file, lest the user accidentally erases valuable data due to selecting the button inadvertently or without knowledge of what it would do. Typically a confirmation dialog is opened, which explains the potential results of the user's action (e.g., “this will delete file XYZ”) and prompts the user for a confirmatory action before completing the selected process (“Select YES if you wish to proceed”). One or more buttons for the confirmatory action (and typically a denial action) also appears in the confirmation dialog, allowing the user to select to proceed or to cancel the operation.
- The confirmation dialog typically is presented as a pop-up window that appears over the previous screen in which the user selected the initial button (e.g., DELETE). To the extent the pop-up window does not cover an area of the previous screen, the previous screen appears as faded in the background. Because of this, the user is separated from the contextual information associated with the content on which the action is being triggered. This can be a problem, as the user is then asked to confirm the action without being able to refer to the contextual information that led to the selection of the button in the first place.
- Additionally, opening a confirmation dialog is not always an option given available screen real estate and the computing device. In such cases, a completely new page is served to the user containing the confirmation dialog. In addition to making the lack of contextual information more pronounced, this has the added effect of slowing down the user interface flow by creating additional steps for the user. This is even more pronounced if the user needs to perform the operation many times a day, as most professional business users would. The workflow becomes tedious and inefficient.
- Additionally, on large displays (or in systems where the user is operating multiple displays simultaneously), the confirmation dialog can often appear far away from where the initial button was selected, or even in a background window not visible on any display, resulting in the user missing the confirmation dialog, leading to confusion and misunderstandings about whether the operation was or was not performed.
- The present disclosure is illustrated by way of example and not limitation in the figures of the accompanying drawings, in which like reference numbers indicate similar elements and in which:
-
FIG. 1 is a block diagram illustrating a system including a web browser in accordance with an example embodiment. -
FIGS. 2A-2L are screen captures depicting different frames of a sequence of interacting with a dynamic button in accordance with a first example embodiment. -
FIG. 3 is a flow diagram illustrating a method for providing a dynamic button in a user interface in accordance with the first example embodiment. -
FIGS. 4A-4F are screen captures depicting different frames of a sequence of interacting with a dynamic button in accordance with a second example embodiment. -
FIG. 5 is a flow diagram illustrating a method for providing a dynamic button in a user interface in accordance with the second example embodiment. -
FIGS. 6A-6M are screen captures depicting different frames of a sequence of interacting with a dynamic button in accordance with a third example embodiment. -
FIG. 7 is a flow diagram illustrating a method for providing a first dynamic button in a user interface in accordance with the third example embodiment. -
FIGS. 8A-8F are screen captures depicting different frames of a sequence of interacting with a dynamic button in accordance with a fourth example embodiment. -
FIG. 9 is a flow diagram illustrating a method for providing a dynamic button in a user interface in accordance with the fourth example embodiment. -
FIG. 10 is a flowchart depicting a dynamic button flow in accordance with an example embodiment. -
FIG. 11 is a diagram illustrating a lifecycle of a dynamic button in accordance with an example embodiment. -
FIG. 12 is a diagram illustrating an alternative lifecycle of a dynamic button in accordance with another example embodiment. -
FIGS. 13A-13C are diagrams illustrating code for a dynamic button control applied in a web application in accordance with example embodiments. -
FIGS. 14A-14E are diagrams illustrating development of an iOS™ application (also known as an “app”) with a dynamic button, in accordance with an example embodiment. -
FIG. 15 is a block diagram illustrating a hybrid mobile app including a dynamic button control in accordance with an example embodiment. -
FIGS. 16A and 16B illustrate an example flow and code sample for such an embodiment. -
FIGS. 17A-17D are screen captures illustrating deployment of a watch application containing the dynamic button, in accordance with an example embodiment. -
FIG. 18 is a screen capture illustrating activation of multiple dynamic buttons simultaneously in accordance with an example embodiment. -
FIG. 19 is a block diagram illustrating a representative software architecture, which may be used in conjunction with various hardware architectures herein described. -
FIG. 20 is a block diagram illustrating components of a machine, according to some example embodiments, able to read instructions from a machine-readable medium (e.g., a machine-readable storage medium) and perform any one or more of the methodologies discussed herein. - The description that follows includes illustrative systems, methods, techniques, instruction sequences, and computing machine program products that embody illustrative embodiments. In the following description, for purposes of explanation, numerous specific details are set forth in order to provide an understanding of various embodiments of the inventive subject matter. It will be evident, however, to those skilled in the art, that embodiments of the inventive subject matter may be practiced without these specific details. In general, well-known instruction instances, protocols, structures, and techniques have not been shown in detail.
- In an example embodiment, a dynamic button is provided as a graphical user interface (GUI) element that combines action, data content, action confirmation, and action status in one in-place GUI element. This allows the dynamic button to address one or more issues which cannot be addressed by conventional buttons. It allows for use of the button for both input and output to bring data forward with natural streamlined interactions. This allows the dynamic button to dramatically simplify workflow and improve user experience.
-
FIG. 1 is a block diagram illustrating asystem 100 including aweb browser 102 in accordance with an example embodiment. Thesystem 100 represents one example system that can be used to implement the dynamic button. Specifically, in this embodiment, the dynamic button is implemented as a Javascript or similar scripting language element, executed in aweb browser 102 on acomputing device 104. Other example systems on which the dynamic button may be implemented will be discussed in more detail later. For ease of discussion, many of the aspects of the dynamic button will be discussed in terms of this Javascript or similar scripting language implementation. Nevertheless, these aspects could also be implemented on the other example systems described later, and nothing in this disclosure should be interpreted as limiting these aspects to the Javascript or similar scripting language implementation. - The
computing device 104 may be, for example, a desktop computer, laptop computer, tablet computer, smart phone, smart watch or any other computing device capable of displaying a graphical user interface via a scripting language and web browser combination. It should be noted, however, that in fact the further systems described later need not be limited to those computing devices capable of displaying a graphical user interface via a scripting language and web browser combination and can, in fact, extend to any computing devices capable of displaying a graphical user interface. - The
system 100 includescomputing device 104 as well as aweb server 106.Web server 106 delivers a web page to thecomputing device 104. upon request. This request may either be explicit by the user of thecomputing device 104, such as navigating theweb browser 102 to a specific web address, or may be implicit or automatic. The web page may, for example, be in the form of Hypertext Markup Language (HTML) code or other markup language code, which may incorporate various calls and/or scripts through languages such as Cascade Style Sheets (CSS) and Javascript. - An
operating system 108 on thecomputing device 104 controls interactions between theweb browser 102 and auser input device 110. In other words, theoperating system 108 can detect when a user interacts with theweb browser 102 via input to theuser input device 110 and transmits such interactions to theweb browser 102. Examples ofuser input devices 110 include mice, keyboards, touchpads, touchscreens, microphones, and any other device capable of receiving user input. Theweb browser 102 can output rendered GUI elements on adisplay device 112 of thecomputing device 104. In some example embodiments, thedisplay device 112 and theuser input device 110 are the same device, such as in the case of a touchscreen. - The
web browser 102 contains its own user interface 114 (which may display, for example, an address bar, back/forward button, bookmaking menu, etc.). Abrowser engine 116 marshals actions between the user interface 114 and arendering engine 118. Therendering engine 118 is responsible for rendering content (e.g., web pages). Therendering engine 118 may contain one or more specialized parsers (e.g., HTML parser, CSS parser) for this purpose. - A
networking component 120 handles calls such as Hypertext Transfer Protocol (HTTP) to and from theweb server 106, using different implementations based on the platform, typically behind a platform-independent interface. A user interface backend 122 handles drawing basic web page components such as buttons and windows. AJavascript interpreter 124 is used to parse and execute Javascript code found in a web page parsed by therendering engine 118. Finally, adata persistence layer 126 allows theweb browser 102 to save various types of data locally, such as cookies. - In an example embodiment, specialized Javascript code is provided to the
Javascript interpreter 124, either via a downloaded web page or by directly modifying one or more Javascript libraries utilized by theJavascript interpreter 124, which causes modification of a button GUI in the user interface backend 122. This modification causes the corresponding button element to, when displayed, act in a dynamic manner in response to a user interface to modify visual aspects of the button. These modifications may include, or precede, depiction of a confirmation area within the dynamic button, in lieu of launching a separate confirmation dialog window. This allows the user to maintain understanding of the full context of the web page,web browser 102, or other visual elements on thecomputing device 104 when deciding whether to confirm the action initiated by selection of the button. - What follows are examples of dynamic buttons in accordance with various example embodiments.
- It should be noted that as used throughout this disclosure, the term “button” should be construed to mean buttons in a graphical user interface, also known as virtual buttons.
-
FIGS. 2A-2L are screen captures depicting different frames of a sequence of interacting with a dynamic button in accordance with a first example embodiment. Referring first toFIG. 2A , abrowser window 200 includes an area. 202 where fourproducts 204A-204D have been attached. Adynamic button 206A-206D is provided for each of the fourproducts 204A-204D. Here, thedynamic button 206A-206D is initially depicted as an “X” with a circle around it. This indicates to the user that selecting thedynamic button 206A-206D will cause removal or deletion of thecorresponding product 204A-204D from the attachment list (e.g., area 202). Such an act of removal or deletion may require a confirmatory action on the part of the user to confirm that the indicated action should be taken. In prior art solutions, selection of such a button would launch a separate confirmation dialog that may cover up relevant contextual information, such as the attachment list inarea 202 may be hidden, or may otherwise create problems for the user. - In an example embodiment, rather than a separate confirmation dialog, selection of the
dynamic button 206A-206D causes a sequence of operations, including operations causing the selecteddynamic button 206A-206D to morph into a different shape that provides the opportunity for the user to execute the confirmation action from within thedynamic button 206A-206D itself. Additionally, transition animations may be used to convey to the user that selection of the button has occurred as well as to indicate that the button is not being removed but is actually just changing into a different shape. - When the user selects
dynamic button 206A, as will be depicted in subsequent figures, first a ripple effect may be depicted arounddynamic button 206A to indicate that selection has occurred. This selection may have occurred, for example, by the user depressing a mouse button while the cursor hovered overdynamic button 206A. - Referring to
FIG. 2B , the selection of thedynamic button 206A is further indicated by the depiction of a “ripple” effect around thebutton 206A,FIG. 2B depicts an early frame in the ripple effect sequence. As can be seen, aconcentric circle 210 is depicted arounddynamic button 206A.FIG. 2C depicts how theconcentric circle 210 expands further outwards from thedynamic button 206A and begins to fade, like a ripple in a pond caused when someone throws a rock. - Referring now to
FIG. 2D , thedynamic button 206A then begins to expand, pushing neighboringbutton 212 towards the left as thedynamic button 206A enlarges to the left. InFIG. 2E . thedynamic button 206A continues to grow, and the “X” in thedynamic button 206A begins to fade. Also fading is theneighboring button 212. - Referring to
FIG. 2F . twosub-buttons dynamic button 206A. InFIG. 2G , the sub-buttons 214A, 214B have completely faded in, revealing the text “Delete” and “Cancel”, respectively, indicating the functions of the sub-buttons 214A, 214B. Notably, the sub-buttons 214A, 214B have both formed within the area of thedynamic button 206A. In the underlying user interface, the sub-buttons 214A, 214B are both part of the UI element dedicated to thedynamic button 206A, and thus are not independent UI elements from thedynamic button 206A, such as would be the case if sub-buttons 214A, 214B had replaceddynamic button 206A or been overlaid on top ofdynamic button 206A. - Referring now to
FIG. 2H , the user has now selected sub-button 214A, indicating a desire to confirm the deletion of the selectedproduct 204A from the attachments list. This also causes aripple effect 216 to begin, similar to the ripple effect described earlier. Thisripple effect 216 continues while beginning to fade. - Referring now to
FIG. 21 , once theripple effect 216 has completely faded, thedynamic button 206A as well as the wholerow containing product 204A begins to shrink in the vertical direction, until disappearing completely. - Referring now to
FIG. 2J . this figure begins a sequence where the user selectsdynamic button 206B to deleteproduct 204B, but then elects not to confirm this deletion. InFIG. 2K , the user selects sub-button 214D, indicating a desire to cancel the earlier deletion request. A similar ripple effect as performed earlier may be performed here in response to the user's selection of sub-button 214D. Once this ripple effect has faded out, the sub-buttons 214C, 214D also fade out, and thedynamic button 206B then begins to shrink horizontally, as depicted inFIG. 2L . The sequence ultimately returns toFIG. 2J , with thedynamic button 206B shrinking more horizontally, and the return of the “X” inside thedynamic button 206B and the neighboringbutton 212. -
FIG. 3 is a flow diagram illustrating amethod 300 for providing a dynamic button in a user interface in accordance with the first example embodiment. Atoperation 302, the dynamic button is rendered as a dynamic button user interface element in the user interface. This rendering may include rendering the dynamic button in a manner that an application action caused by selection of the dynamic button is conveyed. This may include, for example, placing the title of the application action (e.g., delete, add, etc.) in the rendering of the dynamic button, but could also or alternatively include using symbols to indicate the application action (e.g., an “X” with a circle to denote deletion). - At
operation 304, it is determined if selection of the button through user input to the user interface is detected. If not, then themethod 300 loops until such a selection is detected. Once the selection is detected, at operation 306 a ripple animation effect is overlaid on the dynamic button in the dynamic button user interface element in the user interface. Atoperation 308, the dynamic button expands. Atoperation 310, two or more sub-buttons are rendered in the dynamic button user interface element in the user interface. - The first of these sub-buttons may confirm the application action if selected, while the second of these sub-buttons may deny the application action if selected. At
operation 312, it is determined if the first or second sub-button is selected, or if neither is selected. If neither is selected, themethod 300 loops until a selection is detected. - If the first sub-button is selected, then at
operation 314 the application action is executed. This may include, for example, the user interface sending a request to the underlying application to execute the action, or alternatively the user interface may be able to directly execute the action (such as, for example, in the case of a browser rendering a web page containing scripting elements that can be triggered by the user interface). Atoperation 316, the dynamic button shrinks. At operation 318, the first and second sub-buttons disappear. In some example embodiments, the dynamic button may also disappear, such as where the application action is a delete action and the dynamic button no longer has relevance Oven the deletion (e.g., its corresponding line in the user interface has been removed). - If, at
operation 312, it is determined that the second sub-button is selected, then atoperation 320, the application action is not executed (this may include, in some example embodiments, cancelling the application action if it has not executed yet). At operation 322, the dynamic button shrinks. It should be noted that this shrinking may occur in a different manner than the shrinking ofoperation 316. Whereasoperation 316 may shrink the dynamic button in a manner suggesting it will disappear completely (such as may be in the case of a delete application action, such as by shrinking the dynamic button vertically when it had expanded horizontally in operation 308), operation 322 may shrink the dynamic button in a manner suggesting it will not disappear completely (such as by shrinking the dynamic button horizontally in the opposite direction of how it expanded horizontally in operation 308). At operation 324, the first and second sub-buttons disappear. Themethod 300 may then loop back tooperation 302. - It should be noted that the ordering of many of the operations is not strict and indeed portions of these operations may be performed simultaneously with other portions, especially when effects are being presented (e.g., the ripple animation effect occurring while the dynamic button is growing).
- It should also be noted that the term “application action” shall be interpreted broadly to mean any action in any application located on any device that is triggered by the dynamic button. This may include, as described above, an action executed in a script of a web page in a web browser, but may also include any other type of application action, such as execution of an action in a stand-alone (e.g., non-browser) application, or execution of an action on a remote server, such as a web server or application server.
-
FIGS. 4A-4F are screen captures depicting different frames of a sequence of interacting with a dynamic button in accordance with a second example embodiment. Unlike the first embodiment described above, in the second embodiment, no confirmatory or denial sub-buttons are presented in the dynamic button user interface element. Rather, the dynamic button user interface is used to communicate results of the underlying application action. - Referring first to
FIG. 4A , awindow 400 may depict a user interface wherevarious products 402A-402G are depicted in a list form, each of thevarious products 402A-402G having a correspondingdynamic button 404A-404G. InFIG. 4A , the user navigates acursor 406 overdynamic button 404A and selects it. Selection can occur in the same or similar manner as described above with respect to the first embodiment. Once selection of thebutton 404A occurs, the size ofbutton 404A may first slightly enlarge in size, then slightly shrink to a size smaller than the original size, then finally enlarge again to the original size while at the same time the text and text color within thebutton 404A may alter to confirm that the application action has been executed. - Referring now to
FIG. 4B ,dynamic button 404A now depicts the results of the application action. Here, the application action is “add to cart”, which attempts to add thecorresponding product 402A to an electronic shopping cart. Here, this action has been successful, anddynamic button 404A now depicts that the action has been successful (by, for example, indicating that theproduct 402A has been “Added” to the cart and a check sign being displayed. Coloring may also be used to indicate success, such as by using green for success for the color of thedynamic button 404A, check mark, and text). - Referring now to
FIG. 4C , the user has now moved the cursor to and selecteddynamic button 404B, which corresponds toproduct 402B. As shown inFIG. 4D upon selectingdynamic button 402B the displayed text in the button may first change from “add to cart” to “error” which may be in red text along with an exclamation mark in a circle followed by an animation that slightly moves the button toward the right and back again indicating that theproduct 402B, is out of stock and cannot be moved to the cart. As such, the application action triggered by thedynamic button 404B cannot be completed.FIG. 4D shows how thedynamic button 404B changes to display that an error has occurred in the application action (by, for example, having the word “error” appear in thedynamic button 404B along with an exclamation point inside a circle. Coloring may also be used to indicate an error, such as by using red for error for the color of thedynamic button 404B, exclamation point, and text). - Referring now to
FIG. 4E , following the dynamic button actions as described inFIG. 4D additional information about the cause of the error is displayed in aseparate explanation window 410. More information can be displayed by selecting a “show more”button 412, which reveals modifiedexplanation window 414 inFIG. 4F . -
FIG. 5 is a flow diagram illustrating amethod 500 for providing a dynamic button in a user interface in accordance with the second example embodiment. Atoperation 502, the dynamic button is rendered as a dynamic button user interface element in the user interface. This rendering may include rendering the dynamic button in a manner such that an application action caused by selection of the dynamic button is conveyed. This may include, for example, placing. the title of the application action (e.g., delete, add, etc.) in the rendering of the dynamic button, but could also or alternatively include using symbols to indicate the application action (e.g., an “X” with a circle to denote deletion). - At
operation 504, it is determined if selection of the button through user input to the user interface is detected. If not, then themethod 500 loops until such a selection is detected. At operation 506, an application action is executed. At operation 508, it is determined if the application action is successful. If so, then at operation 510 the dynamic button changes to indicate that the application action is successful. This may include morphing the inside of the dynamic button to, for example, display text and/or symbols indicating that the application action was successful. - If at operation 508 it is determined that the application action was not successful, then at
operation 512 the dynamic button changes to indicate that the application action is not successful. This may include morphing the inside of the dynamic button to, for example, display text and/or symbols indicating that the application action was not successful. - It should be noted that the ordering of many of the operations is not strict and indeed portions of these operations may be performed simultaneously with other portions, especially when effects are being presented (e.g., the ripple animation effect occurring while the dynamic button is changing its text).
-
FIGS. 6A-6M are screen captures depicting different frames of a sequence of interacting with a dynamic button in accordance with a third example embodiment. Referring first toFIG. 6A , auser interface screen 600 includes anarea 602 wheremultiple messages 604A-604C are displayed. Some of thesemessages dynamic buttons 606A-606D. Specifically,message 604B hasdynamic buttons message 604C hasdynamic buttons Dynamic buttons messages dynamic buttons 6069, 606D correspond to a second application action, here a “reject all” command to reject requests that are subjects of thecorresponding message - In
FIG. 6A , the user has hoveredcursor 608 over dynamic button 6064, which causes dynamic button 6064 to change color or shading. Then the user selectsdynamic button 606A. Selection of dynamic button 6064 causes a ripple effect to start (not pictured), similar to that as described earlier. Once the ripple effect is complete, inFIG. 6B ,dynamic button 606B begins to fade, anddynamic button 606A begins to grow horizontally in the direction of thedynamic button 606B. InFIG. 6C ,dynamic button 606A has grown to completely replacedynamic button 606B. Notably,dynamic button 606A has an outer perimeter that lines up exactly with three of the four sides of previously displayeddynamic button 606B. This allows the remainder of thearea 602 and indeed theuser interface screen 600 to remain exactly as it was inFIG. 6A . Referring toFIG. 6D , rather than two separate buttons separated by a space,dynamic button 606A now includes twosub-buttons dividing line 613. - In the underlying user interface, the sub-buttons 612A, 612B are both part of the UI element dedicated to the
dynamic button 606A, and thus are not independent UI elements from thedynamic button 606A, such as would be the case if sub-buttons 612A, 612B had replaceddynamic button 606A or been overlaid on top ofdynamic button 606A. -
Sub-button 612A corresponds to a confirmatory action for the underlying application action ofdynamic button 606A, whereas sub-button 612B corresponds to a denial action for the underlying application action ofdynamic button 606A. - When the user has selected sub-button 612A, indicating a desire to confirm the application action corresponding to
dynamic button 606A, another ripple effect will occur (also not pictured). Once this ripple effect is complete, inFIG. 6E , the text insidesub-buttons FIG. 6E , a loopingeffect 616 begins to circledynamic button 606A. This loopingeffect 616 may signify that the underlying application action is being performed. As such, it may be presented in such a way to signify this fact, such as by being displayed in green. This loopingeffect 616 may include redrawing the perimeter of thedynamic button 606A in a counterclockwise animated fashion, replacing the original color of the perimeter with another color (such as green). InFIG. 6F , the loopingeffect 616 has now completely encircled the perimeter ofdynamic button 606A. InFIG. 6G , an indication that the underlying application action has been completed may be displayed inside thedynamic button 606A, This may include presenting, for example, text and/or symbols indicating that the underlying application action has completed successfully. In some example embodiments, if the underlying application action was not successful, an error message or other negative indicator could be displayed inside thedynamic button 606A at this stage. - It should be noted that in sonic example embodiments, the looping
effect 616 may continue until the user interface has received some sort of indication that the underlying application action has completed. In other words, the loopingeffect 616 may continue to go around and around thedynamic button 606A, only stopping when the application action has completed. In another example embodiment, the loopingeffect 616 may be timed based on intermediate updates based on the stages of completion of the application action. For example, if the underlying application action involves approving four different travel requests, as each travel request approval is completed, the loopingeffect 616 may be timed to advance another quarter-way around the perimeter of thedynamic button 606A. In this way, the loopingeffect 616 indicates to the user how close the entire application action is to completion. - Referring now to
FIG. 6H , here themessage 604B has disappeared (as action has been taken on its underlying need, namely the travel requests have been approved), andmessage 604C has been moved up inarea 602. The user has navigated thecursor 608 overdynamic button 606D, causingdynamic button 606D to appear in a different color or shading. - Then the user selects
dynamic button 606D. Another ripple effect may occur in response to this selection. InFIG. 6I ,dynamic button 606C fades out anddynamic button 606D begins to grow horizontally in the direction of thedynamic button 606C. InFIG. 6J .dynamic button 606D has grown to completely replacedynamic button 606C. Notably,dynamic button 606D has an outer perimeter that lines up exactly with three of the four sides of previously displayeddynamic button 606C. This allows the remainder of thearea 602, and indeed theuser interface screen 600, to remain exactly as it was inFIG. 6H . InFIG. 6J , rather than two separate buttons separated by a space,dynamic button 606D now includes twosub-buttons dividing line 622. - In the underlying user interface, the sub-buttons 620A, 6209 are both part of the UI element dedicated to the
dynamic button 606D, and thus are not independent UI elements from thedynamic button 606D, such as would be the case if sub-buttons 620A, 620B had replaceddynamic button 606D or been overlaid on top ofdynamic button 606D. -
Sub-button 620A corresponds to a confirmatory action for the underlying application action ofdynamic button 606D, whereas sub-button 620B corresponds to a denial action for the underlying application action ofdynamic button 606D. InFIG. 6J . the user has hovered thecursor 608 oversub-button 620A, and this hovering is depicted visually by changing the color or shading ofsub-button 620A. - The user then selects selected sub-button 620A, indicating a desire to confirm the application action corresponding to
dynamic button 606D. This is indicated through another ripple effect (not pictured), Once the ripple effect has completed, the text insidesub-buttons 620A and 6209 fades, and a loopingeffect 630 begins to circledynamic button 606D, as depicted inFIG. 6K . This loopingeffect 630 may signify that the underlying application action is being performed. As such, it may be presented in such a way to signify this fact, such as by being displayed in red (indicating that a rejection is occurring), This loopingeffect 630 may include redrawing the perimeter of thedynamic button 606D in a counterclockwise animated fashion, replacing the original color of the perimeter with another color (such as red). InFIG. 6L , the loopingeffect 630 has now completely encircled the perimeter ofdynamic button 606D. InFIG. 6M , an indication that the underlying application action has been completed may be displayed inside thedynamic button 606D. This may include presenting, for example, text and/or symbols indicating that the underlying application action has completed successfully. In some example embodiments, if the underlying application action was not successful, an error message or other negative indicator could be displayed inside thedynamic button 606D at this stage. -
FIG. 7 is a flow diagram illustrating amethod 700 for providing a first dynamic button in a user interface in accordance with the third example embodiment. Atoperation 702, the first dynamic button is rendered as a dynamic button user interface element in the user interface. This rendering may include rendering the first dynamic button in such a manner that a first application action caused by selection of the first dynamic button is conveyed. This may include, for example, placing the title of the first application action (e.g., delete all, approve all, etc.) in the rendering of the first dynamic button, but could also or alternatively include using symbols to indicate the first application action (e.g., an “X” with a circle to denote deletion). - At
operation 704, a second dynamic button is rendered as a dynamic button user interface element in the user interface. This rendering may include rendering the second dynamic button in a manner that a second application action caused by selection of the second dynamic button is conveyed. The second application action may be, in some example embodiments, opposite of the first application action (e.g., if the first application action is to accept a request, the second application action may be to deny the request). This may include, for example, placing the title of the second application action (e.g., delete all, approve all, etc.) in the rendering of the second dynamic button, but could also or alternatively include using symbols to indicate the second. application action (e.g., an “X” with a circle to denote deletion). In some example embodiments, the second dynamic button is rendered near, but not touching, the first dynamic button. - At operation 706, it is determined if selection of the first dynamic button through user input to the user interface is detected. If not, then the
method 700 loops until such a selection is detected. Once the selection is detected, at operation 708 a ripple animation effect is overlaid on the first dynamic button in the corresponding dynamic button user interface element in the user interface. Atoperation 710, the first dynamic button expands in the direction of the second dynamic button, until the first dynamic button has a perimeter that includes at least a portion of a perimeter of the second dynamic button. In some example embodiments, this portion may include three of four sides of the second dynamic button. - At operation 712, the second dynamic button is removed from the user interface. At
operation 714, two or more sub-buttons are rendered in the dynamic button user interface element corresponding to the first dynamic button in the user interface. - The first of these sub-buttons may confirm the first application action if selected, while the second of these sub-buttons may deny the first application action if selected. At
operation 716, it is determined if the first or second sub-button is selected, or if neither is selected. If neither is selected, themethod 700 loops until a selection is detected. - If the first sub-button is selected, then at
operation 718 the first application action is executed. This may include, for example, the user interface sending a request to the underlying application to execute the action, or alternatively the user interface may be able to directly execute the action (such as, for example, in the case of a browser rendering a web page containing scripting elements that can be triggered by the user interface). Atoperation 720, the first dynamic button shrinks. At operation 722, the first and second sub-buttons disappear. Atoperation 724, the second dynamic button reappears. Atoperation 726, the results of the first application action being executed are displayed in the first dynamic button. - If at
operation 716 it is determined that the second sub-button is selected, then atoperation 728, the first application action is not executed (this may include, in some example embodiments, cancelling the first application action if it has not been executed). Atoperation 730, the first dynamic button shrinks. - The
method 700 may then proceed to operation 722. - It should be noted that the ordering of many of the operations is not strict, and indeed portions of these operations may be performed simultaneously with other portions, especially when effects are being presented (e.g., the ripple animation effect occurring while the first dynamic button is growing).
-
FIGS. 8A-8F are screen captures depicting different frames of a sequence of interacting with a dynamic button in accordance with a fourth example embodiment. Referring first toFIG. 8A , abrowser window 800 includes adynamic button 802. Here, thedynamic button 802 is initially depicted as an “X” with a circle around it. This indicates to the user that selecting thedynamic button 802 will cause removal or deletion of some item in thebrowser window 800. Such an act of removal or deletion may require a confirmatory action on the part of the user to confirm that the indicated action should be taken. In prior art solutions, selection of such a button would launch a separate confirmation dialog that may cover up relevant contextual information, or may otherwise create problems for the user. - In an example embodiment, rather than a separate confirmation dialog, selection of the
dynamic button 802 causes a sequence of operations, including operations causing the selected dynamic button to morph into a different shape that provides the ability for the user to execute the confirmation action from within thedynamic button 802 itself. Additionally, transition animations may be used to convey to the user that selection of the button has occurred as well as to indicate that the button is not being removed but is actually just changing into a different shape. - Referring now to
FIG. 8B , here the user has now selecteddynamic button 802, which begins to grow horizontally towards the right. This selection may have occurred, for example, by the user depressing a mouse button while thecursor 804 hovered overdynamic button 802. - In
FIG. 8C ,dynamic button 802 continues to grow, and the “X” in thedynamic button 802 begins to fade. As the “X” fades, new text (“Delete”) fades in in what is now afirst sub-button 808A in thedynamic button 802. InFIG. 8D dynamic button has almost finished growing and the new text “Delete” has completely faded in, and new text “Cancel” begins to fade in in what is now asecond sub-button 808B in thedynamic button 802. - Notably, the sub-buttons 808A, 808B have both formed within the area of the
dynamic button 802. In the underlying user interface, the sub-buttons 808A, 808B are both part of the UI element dedicated to thedynamic button 802, and thus are not independent UI elements from thedynamic button 802, such as would be the case if sub-buttons 808A, 808B had replaceddynamic button 802 or been overlaid on top ofdynamic button 802. - Referring now to
FIG. 8E , the dynamic button has finished growing and the text “Cancel” has now completely faded in. The user then selects sub-button 808A, indicating a desire to confirm the deletion operation. This also causes thedynamic button 802 to begin to shrink, beginning withsub-button 808B. The shrinking ofdynamic button 802 continues while the text in thedynamic button 802 also fades and is replaced by confirmation text 810 (e.g., “Success!”) inFIG. 8F .Confirmation text 810 indicates successful operation of the underlying application action. Of course, if the underlying application action was not successfully performed, then an error or other denial message could be displayed here. Notably, thisconfirmation text 810 appears inside thedynamic button 802. - After a preset time period, the
dynamic button 802 may then begin to shrink back down to its original form, replacing theconfirmation text 810 with the original “x” symbol. -
FIG. 9 is a flow diagram illustrating amethod 900 for providing a dynamic button in a user interface in accordance with the fourth example embodiment. Atoperation 902, the dynamic button is rendered as a dynamic button user interface element in the user interface. This rendering may include rendering the dynamic button in such a manner that an application action caused by selection of the dynamic button is conveyed. This may include, for example, placing the title of the application action delete, add, etc.) in the rendering of the dynamic button, but could also or alternatively include using symbols to indicate the application action (e.g., an “X” with a circle to denote deletion). - At
operation 904, it is determined if selection of the button through user input to the user interface is detected. If not, then themethod 900 loops until such a selection is detected. Once the selection is detected, atoperation 906, the dynamic button expands. Atoperation 908, two or more sub-buttons are rendered in the dynamic button user interface element in the user interface. - The first of these sub-buttons may confirm the application action if selected, while the second of these sub-buttons may deny the application action if selected. At
operation 910, it is determined if the first or second sub-button is selected, or if neither is selected. If neither is selected, themethod 900 loops until a selection is detected. - If the first sub-button is selected, then at
operation 912 the application action is executed. This may include, for example, the user interface sending a request to the underlying application to execute the action, or alternatively the user interface may be able to directly execute the action (such as, for example, in the case of a browser rendering a web page containing scripting elements that can be triggered by the user interface). Atoperation 914, the dynamic button shrinks. At operation 916, the first and second sub-buttons disappear. In some example embodiments, the dynamic button may also disappear, such as where the application action is a delete action and the dynamic button no longer has relevance given the deletion (e.g., its corresponding line in the user interface has been removed). - At
operation 918, the first dynamic button displays an indication that the application action has been executed. Atoperation 920, after a preset time period, the indication that the application action has been executed is removed, and the first dynamic button is rendered atoperation 902. - If at
operation 910 it is determined that the second sub-button is selected, then atoperation 922, the application action is not executed (this may include, in some example embodiments, cancelling the application action if it has not been executed). At operation 924, the dynamic button shrinks. At operation 926, the first and second sub-buttons disappear. Atoperation 928, the first dynamic button displays an indication that the application action has not been executed. At operation 930, after a preset time period, the indication that the application action has not been executed is removed, and the first dynamic button is rendered atoperation 902. - It should be noted that the ordering of many of the operations is not strict, and indeed portions of these operations may be performed simultaneously with other portions, especially when effects are being presented (e.g., the ripple animation effect occurring while the dynamic button is growing).
-
FIG. 10 is a flowchart depicting adynamic button flow 1000 in accordance with an example embodiment. Atoperation 1002, thedynamic button flow 1000 begins. This may include rendering the dynamic button in a graphical user interface. Atoperation 1004, a click command is received from a user via the graphical user interface. This click command indicates selection of the dynamic button. Notably, for purposes of this disclosure, any command indicating a selection of the dynamic button will be considered a click, even if the action does not involve pressing a mouse button, such as by tapping a touchscreen. Atoperation 1006, morphing is performed to change the dynamic button into two sub-buttons, an action sub-button and a cancel sub-button. Atoperation 1008. the user has selected the cancel sub-button and thedynamic button flow 1000 returns tooperation 1002. Alternatively, atoperation 1010 the user has selected the action sub-button, and atoperation 1012, the action sub-button morphs and is traced (the looping effect described earlier) while the underlying application action is executed. - There are three possible outcomes of the execution of the underlying action: success, error, and warning. At
operation 1014, if the underlying action is successful, a success message is displayed in the dynamic button, followed by adelay 1016. Then thedynamic button flow 1000 returns tooperation 1002. Atoperation 1018, if the underlying action produces an error, then an error message is displayed in the dynamic button, atoperation 1020 the user accesses the application, and atoperation 1022 corrects the error. Then thedynamic button flow 1000 returns tooperation 1002. Atoperation 1024, if the underlying action produces a warning, then the warning is displayed in the dynamic button, followed by adelay 1026. Then thedynamic button flow 1000 returns tooperation 1002. -
FIG. 11 is adiagram illustrating lifecycle 1100 of a dynamic button in accordance with an example embodiment. Thelifecycle 1100 is depicted as a timeline from left to right, with the visual depiction of the dynamic button shown at the bottom of the figure. Attime 1102, the single icon dynamic button is clicked. Attime 1104, the dynamic button begins morphing, here growing. Then adelay 1106 occurs while the dynamic button morphs into two sub-buttons. Attime 1108, the dynamic button icon has morphed into split buttons with literals to confirm the action or cancel to reset. Attime 1110, the user has clicked on the action sub-button. Which causes the button to begin to morph, shake, and also have border tracing (looping effect) while the action is performing. Adelay 1112 occurs while all these animations are occurring. Attime 1114, the dynamic button is in its final state with semantic colors indicating (1) success; (2) error; or (3) warning. After a time has elapsed (e.g., 5 seconds) or a new application session begins, attime 1116, the dynamic button resets to the original state. -
FIG. 12 is a diagram illustrating analternative lifecycle 1200 of a dynamic button in accordance with another example embodiment. In this embodiment, no action confirmation is used. Attime 1202, the dynamic button is clicked. Attime 1204, the dynamic button starts morphing, shaking, and having border tracing performed. Attime 1206, the dynamic button is in its final state with semantic colors indicating (1) success; (2) error; or (3) warning. After a time has elapsed (e.g., 5 seconds) or a new application session begins, attime 1208, the dynamic button resets to the original state. - In various example embodiments, the animation transition follows a mathematical pattern of a cubic Bezier curve. A Bezier curve is a parametric curve. When used in the time domain, it tends to smooth cursor trajectory in eye gaze-controlled interfaces. For example, a Bezier curve can be used to specify the velocity over time of an object such as an icon moving from A to B, rather than simply moving at a fixed number of pixels per step. A cubic Bezier curve is defined by four points in a plane. The curve starts at the first point, going towards the second point, and arrives at the fourth point coming from the direction of the third point. Typically it will not pass through the second or third points as these points provide directional information. The distance between the first and the second points determines “how far” and “how fast” the curve moves towards the second point before turning towards the third point.
- As described briefly above, the dynamic button is not limited to Javascript or other web browser implementations. Embodiments are foreseen for any type of graphical user interface. Example uses include inline actions, table row level actions, simplified workflows, user interfaces where space is a concern (e.g., mobile applications). Example graphical user interfaces include stand-alone application graphical user interfaces, where the methods described above may be designed into the application graphical user interface itself. Additionally, non-Javascript browser implementations are also foreseen where, for example, the dynamic buttons are integrated into the web page itself or are part of a plug-in or other component of the web browser as opposed to being implemented in a scripting language.
-
FIGS. 13A-13C are diagrams illustrating code for a dynamic button control applied in a web application in accordance with example embodiments. Here, an embodiment of the web application using UI5 is provided. UI5 (also sometimes known as OpenUI5 or SAPUI5) is a Javascript UI library comprising a feature-rich core and a large number of UI controls organized into libraries. The Core includes aspects such as data bindings and models for different data sources, an efficient engine for creating and updating the code of the controls, support for a Model-View-Controller concept, support for declarative UI construction and templates, and automatic loading of appropriate language resources. - Here the code includes five
different steps FIG. 13A , in thefirst step 1300, Bootstrapping UI5 is provided, specifying the desired UI library (“sap.m” containing the desired UI controls, the theme of the controls (“sap_bluecrystal”)), and configuring the process of bootstrapping to run asynchronously. Once the core and the corresponding resources have been loaded, the core fires an trot event to signal that the library is ready and can be used. - In the
second step 1302, the UI5 controls are used. The code provided in this step actually performs function calls using the UI5 control that has been defined for the dynamic button. - Referring now to
FIG. 13B , in thethird step 1304, XML is used to separate the view declaration from the controller logic. Inside the view tax, the declarative definition of the dynamic button is added with the same properties as in thesecond step 1302. The XML tags are mapped to controls and the attributes are mapped to the properties of the control. - In the
fourth step 1306, the controllers of the view are defined. Then, in thefifth step 1308, illustrated inFIG. 13C , data binding of two data or information sources together is performed. In this way, all changes in one source are also reflected in the other one. In data binding, a model instance and a binding instance are used. The model instance holds the data and provides methods to set the data or to retrieve the data from a server. It also provides a method for creating bindings to the data. When this method is called, a binding instance is created, which contains the binding information and provides an event, which is fired whenever the bound data changes. An element can listen to this event and update its visualization according to the new data. The UT uses data binding to bind controls to the model which holds the application data, so that the controls are updated automatically whenever application data changes. -
FIGS. 14A-14E are diagrams illustrating development of an iOS™ application (also known as an “app”) with a dynamic button, in accordance with an example embodiment. The iOS™ app can be developed using Swift in Xcode. The app can be run in either a device simulator or in an actual connected device. In both cases, Xcode automatically configures the app and desired extension bundles and their initial resources. These bundles are then delivered on the App Store™. - In another example embodiment, a hybrid mobile app can be developed with dynamic button control using SAPUI5 Framework. This hybrid mobile app may include a native app wrapper (e.g., PhoneGap) and an HTML viewer to display the content on the user interface. Hybrid apps have the benefit of allowing publication in app stores; also, by embedding the application code in the hybrid app and the library files in the hybrid container, the user needs to install the files only once and does not need to download them every time the application is started. Of course, since the library is installed on the user device, the library size is important, whereas in web applications the library is deployed on the server and the user device only needs to download the desired parts of the library at runtime.
-
FIG. 15 is a block diagram illustrating a hybridmobile app 1500 including a dynamic button control in accordance with an example embodiment. The hybridmobile app 1500 includes a devicenative HTML container 1502, such as PhoneGap, anadaptation layer 1504, andmultiple apps 1506A-1506D that all utilize anOpenUI5 Framework 1508 that includes adynamic button control 1510. - In another example embodiment, a dynamic button control may be developed to extend the UI5 framework.
FIGS. 16A and 16B illustrate an example flow 1600 (16A) and code sample 1602 (16B) for such an embodiment. Similar processes can be used for other frameworks. At operation 1604, the metadata definition, including properties, events, and aggregations, can be controlled. Atoperation 1606, the parent class (button) methods can be extended. At operation 1608, control properties, such as button animation parameters, can be defined. Atoperation 1610, focus handling, including Web Content Accessibility Guidelines (WCAG) compliances, can be controlled. Atoperation 1612, right-to-left (RTL) support, including RTL, CSS, HTML, and RU tags, may be supported. - In another example embodiment, a watch application can be deployed that contains the dynamic button. A watch app target can be, for example, added to an existing iOS™ target, or a new iOS™ project can be created that includes a watch app. In both cases, Xcode automatically configures the watch app and WatchKit extension bundles and their initial resources. Those bundles are then delivered as part of the iOS™ app on the App Store.
-
FIGS. 17A-17D are screen captures illustrating deployment of a watch application containing the dynamic button, in accordance with an example embodiment. Referring first toFIG. 17A , a developer selectstarget 1700 as a target application for thedynamic button control 1702. Referring toFIG. 17B , a template is selected for the target application. Here,watchOS Application 1704 is selected. Referring toFIG. 17C ,options 1706 for thenew target 1700 may be selected. Referring toFIG. 17D , adynamic button demo 1708 may be previewed. -
FIG. 18 is a screen capture illustrating activation of multiple dynamic buttons simultaneously in accordance with an example embodiment.User interface 1800 includes anarea including checkboxes 1802A-1802E, each corresponding to adifferent product 1804A-1804E, respectively, and each also corresponding to a differentdynamic button 1806A-1806E. The user has an option to select a dynamic button corresponding to a line item one at a time, or select one or more of thecheckboxes 1802A-1802E and then press a joint activation button 1808 (here indicating “add selected to cart”). The result is that thedynamic buttons 1806A-1806E corresponding to the selectedcheckboxes 1802A-1802E are all selected simultaneously and proceed through their dynamic morphing and/or alerting functionality (as described in, for example, any of the preceding embodiments) simultaneously. - In a use case whereby multiple dynamic buttons are selected and different types are ultimately displayed, at about halfway through the morphing (when the dynamic button state text changes from Add to Cart to any one of Error, Warning, or Added, which is fully displayed inside the button), each of the state types display different animation sequences and durations that end in a staggered fashion. For example:
-
- Error Type—The “Error” button, the first to start animating, rocks back and forth (right, back to level, then left, then back to its level resting place) in a seesaw fashion, bringing the user's attention to that critical state first.
- Yarning Type—Then after the “Error” button has rocked right then level, the “Warning” button animation starts by initially shrinking then enlarging to the default button size, ending just after the Error button animation sequence stops.
- Added Type—As with the “Warning” button (after the “Error” Button has rocked right then level), the “Added” button animation starts in opposition with the Warning button animation. The Added button initially enlarges, then shrinks, then enlarges again, then finally shrinks to the default size. Because this animation sequence is two times greater than that of the Warning button, it is the last button to stop animating, which draws the user's attention to the “Add” actions last.
- It should be appreciated that these subtle differences effectively provide the user with unique subliminal visual affordances for each of the button types that enable the user to differentiate between dynamic button types even though they were all initially triggered at the same time.
- In some example embodiments, the morphing of multiple selected dynamic buttons may result in some of the dynamic buttons performing completely different actions or types of actions than other of the dynamic buttons. Additionally, the buttons may complete their actions at different times.
- A hybrid application comprising:
-
- a device native container;
- an adaptation layer;
- one or more web applications; and
- a framework including a library of controls, the library of controls including a dynamic button control configured to:
- render a dynamic button as a dynamic button user interface element in a graphical user interface, the dynamic button corresponding to an application action when selected by a user via the graphical user interface;
- in response to detection of selection of the dynamic button by the user via the graphical user interface, cause the dynamic button user interface element to change from a first shape to a second shape and display two or more sub-buttons within the dynamic button user interface element;
- in response to detection of selection of a first of the sub-buttons by the user via the graphical user interface:
- cause the application action to be executed;
- cause the two or more sub-buttons to disappear from within the dynamic button user interface element; and
- cause the dynamic button user interface element to change from the second shape to the first shape.
- The hybrid application of Example 1, wherein the dynamic button control is further configured to, in response to detection of selection of the dynamic button by the user via the graphical user interface, cause a ripple effect animation to appear prior to the dynamic button user interface element changing from the first shape to the second shape, the ripple effect animation including one or more concentric circles expanding outwards from a selection area of the dynamic button until fading.
- The hybrid application of Examples 1 or 2, wherein the dynamic button control is further configured to, in response to detection of selection of a first of the sub-buttons by the user via the graphical user interface, cause a looping animation around the dynamic button user interface element prior to causing the dynamic button user interface element to change from the second shape to the first shape, the looping animation including a visual element encircling the dynamic button user interface element.
- The hybrid application of Example 3, wherein the looping animation is timed so that the looping animation completes one revolution around the dynamic button user interface element at the time the application action has completely finished executing.
- The hybrid application of Example 3, wherein the looping animation is depicted using a first color if the first of the sub-buttons corresponds to an approval command.
- The hybrid application of Example 5, wherein the dynamic button control is further configured to, in response to detection of selection of a second of the sub-buttons by the user via the graphical user interface, cause a second looping animation around the dynamic button user interface element, the second looping animation including a visual element encircling the dynamic button user interface element.
- The hybrid application of claim Example 6, wherein the second looping animation is depicted using a second color if the second of the sub-buttons corresponds to an approval command.
- A method comprising:
-
- rendering a dynamic button as a dynamic button user interface element in a graphical user interface, the dynamic button corresponding to an application action when selected by a user via the graphical user interface;
- in response to detection of selection of the dynamic button by the user via the graphical user interface, causing the dynamic button user interface element to change from a first shape to a second shape and display two or more sub-buttons within the dynamic button user interface element;
- in response to detection of selection of a first of the sub-buttons by the user via the graphical user interface:
- causing the application action to be executed;
- causing the two or more sub-buttons to disappear from within the dynamic button user interface element; and
- causing the dynamic button user interface element to change from the second shape to the first shape.
- The method of Example 8, further comprising, in response to detection of selection of the dynamic button by the user via the graphical user interface, causing a ripple effect animation to appear prior to the dynamic button user interface element changing from the first shape to the second shape, the ripple effect animation including one or more concentric circles expanding outwards from a selection area of the dynamic button until fading.
- The method of Example 8, further comprising, in response to detection of selection of a first of the sub-buttons by the user via the graphical user interface, causing a looping animation around the dynamic button user interface element prior to causing the dynamic button user interface element to change from the second shape to the first shape, the looping animation including a visual element encircling the dynamic button user interface element.
- The method of Example 10, wherein the looping animation is timed so that the looping animation completes one revolution around the dynamic button user interface element at the time the application action has completely finished executing.
- The method of Example 10, wherein the looping animation is depicted using a first color if the first of the sub-buttons corresponds to an approval command.
- The method of Example 12, further comprising, in response to detection of selection of a second of the sub-buttons by the user via the graphical user interface, causing a second looping animation around the dynamic button user interface element, the second looping animation including a visual element encircling the dynamic button user interface element.
- The method of Example 13, wherein the second looping animation is depicted using a second color if the second of the sub-buttons corresponds to an approval command.
- A non-transitory machine-readable storage medium comprising instructions, which when implemented by one or more machines, cause the one or more machines to perform operations comprising:
-
- rendering a dynamic button as a dynamic button user interface element in a graphical user interface, the dynamic button corresponding to an application action when selected by a user via the graphical user interface:
- in response to detection of selection of the dynamic button by the user via the graphical user interface, causing the dynamic button user interface element to change from a first shape to a second shape and display two or more sub-buttons within the dynamic button user interface element;
- in response to detection of selection of a first of the sub-buttons by the user via the graphical user interface:
- causing the application action to be executed;
- causing the two or more sub-buttons to disappear from within the dynamic button user interface element; and
- causing the dynamic button user interface element to change from the second shape to the first shape.
- The non-transitory machine-readable storage medium of Example 15, wherein the operations further comprise, in response to detection of selection of the dynamic button by the user via the graphical user interface, causing a ripple effect animation to appear prior to the dynamic button user interface element changing from the first shape to the second shape, the ripple effect animation including one or more concentric circles expanding outwards from a selection area of the dynamic button until fading.
- The non-transitory machine-readable storage medium of Example 15, wherein the operations further comprise, in response to detection of selection of a first of the sub-buttons by the user via the graphical user interface, causing a looping animation around the dynamic button user interface element prior to causing the dynamic button user interface element to change from the second shape to the first shape, the looping animation including a visual element encircling the dynamic button user interface element.
- The non-transitory machine-readable storage medium of Example 17, wherein the looping animation is timed so that the looping animation completes one revolution around the dynamic button user interface element at the time the application action has completely finished executing.
- The non-transitory machine-readable storage medium of Example 17, wherein the looping animation is depicted using a first color if the first of the sub-buttons corresponds to an approval command.
- The non-transitory machine-readable storage medium of Example 19, wherein the operations further comprise, in response to detection of selection of a second of the sub-buttons by the user via the graphical user interface, causing a second looping animation around the dynamic button user interface element, the second looping animation including a visual element encircling the dynamic button user interface element.
- Certain embodiments are described herein as including logic or a number of components, modules, or mechanisms. Modules may constitute either software modules (e.g., code embodied on a machine-readable medium) or hardware modules. A “hardware module” is a tangible unit capable of performing certain operations and may be configured or arranged in a certain physical manner. In various example embodiments, one or more computer systems (e.g., a standalone computer system, a client computer system, or a server computer system) or one or more hardware modules of a computer system (e.g., a processor or a group of processors) may be configured by software (e.g., an application or application portion) as a hardware module that operates to perform certain operations as described herein.
- In some embodiments, a hardware module may be implemented mechanically, electronically, or any suitable combination thereof. For example, a hardware module may include dedicated circuitry or logic that is permanently configured to perform certain operations. For example, a hardware module may be a special-purpose processor, such as a Field-Programmable Gate Array (FPGA) or an Application Specific Integrated Circuit (ASIC), A hardware module may also include programmable logic or circuitry that is temporarily configured by software to perform certain operations. For example, a hardware module may include software executed by a general-purpose processor or other programmable processor. Once configured by such software, hardware modules become specific machines (or specific components of a machine) uniquely tailored to perform the configured functions and are no longer general-purpose processors. It will be appreciated that the decision to implement a hardware module mechanically, in dedicated and permanently configured circuitry, or in temporarily configured circuitry (e.g., configured by software) may be driven by cost and time considerations.
- Accordingly, the phrase “hardware module” should be understood to encompass a tangible entity, be that an entity that is physically constructed, permanently configured (e.g., hardwired), or temporarily configured (e.g., programmed) to operate in a certain manner or to perform certain operations described herein. As used herein, “hardware-implemented module” refers to a hardware module. Considering embodiments in which hardware modules are temporarily configured (e.g., programmed), each of the hardware modules need not be configured or instantiated at any one instance in time. For example, where a hardware module comprises a general-purpose processor configured by software to become a special-purpose processor, the general-purpose processor may be configured as respectively different special-purpose processors (e.g., comprising different hardware modules) at different times. Software accordingly configures a particular processor or processors, for example, to constitute a particular hardware module at one instance of time and to constitute a different hardware module at a different instance of time.
- Hardware modules can provide information to, and receive information from, other hardware modules. Accordingly, the described hardware modules may be regarded as being communicatively coupled. Where multiple hardware modules exist contemporaneously, communications may be achieved through signal transmission (e.g., over appropriate circuits and buses) between or among two or more of the hardware modules. In embodiments in which multiple hardware modules are configured or instantiated at different times, communications between such hardware modules may be achieved, for example, through the storage and retrieval of information in memory structures to which the multiple hardware modules have access. For example, one hardware module may perform an operation and store the output of that operation in a memory device to which it is communicatively coupled. A further hardware module may then, at a later time, access the memory device to retrieve and process the stored output. Hardware modules may also initiate communications with input or output devices, and can operate on a resource (e.g., a collection of information).
- The various operations of example methods described herein may be performed, at least partially, by one or more processors that are temporarily configured (e.g., by software) or permanently configured to perform the relevant operations. Whether temporarily or permanently configured, such processors may constitute processor-implemented modules that operate to perform one or more operations or functions described herein. As used herein, “processor-implemented module” refers to a hardware module implemented using one or more processors.
- Similarly, the methods described herein may be at least partially processor-implemented, with a particular processor or processors being an example of hardware. For example, at least some of the operations of a method may be performed by one or more processors or processor-implemented modules. Moreover, the one or more processors may also operate to support performance of the relevant operations in a “cloud computing” environment or as a “software as a service” (SaaS). For example, at least some of the operations may be performed by a group of computers (as examples of machines including processors), with these operations being accessible via a network (e.g., the Internet) and via one or more appropriate interfaces (e.g., an API).
- The performance of certain of the operations may be distributed among the processors, not only residing within a single machine, but deployed across a number of machines. In some example embodiments, the processors or processor-implemented modules may be located in a single geographic location within a home environment, an office environment, or a server farm). In other example embodiments, the processors or processor-implemented modules may be distributed across a number of geographic locations.
- The modules, methods, applications, and so forth described in conjunction with
FIGS. 1-18 are implemented in some embodiments in the context of a machine and an associated software architecture. The sections below describe representative software architecture(s) and machine (e.g., hardware) architecture(s) that are suitable for use with the disclosed embodiments. - Software architectures are used in conjunction with hardware architectures to create devices and machines tailored to particular purposes. For example, a particular hardware architecture coupled with a particular software architecture will create a mobile device, such as a mobile phone, tablet device, or so forth. A slightly different hardware and software architecture may yield a smart device for use in the “internet of things,” while yet another combination produces a server computer for use within a cloud computing architecture. Not all combinations of such software and hardware architectures are presented here, as those of skill in the art can readily understand how to implement the inventive subject matter in different contexts from the disclosure contained herein.
-
FIG. 19 is a block diagram 1900 illustrating arepresentative software architecture 1902, which may be used in conjunction with various hardware architectures herein described.FIG. 19 is merely a non-limiting example of a software architecture, and it will be appreciated that many other architectures may be implemented to facilitate the functionality described herein. Thesoftware architecture 1902 may be executing on hardware such as amachine 2000 ofFIG. 20 that includes, among other things,processors 2010, memory/storage 2030, and I/O components 2050. Arepresentative hardware layer 1904 is illustrated and can represent, for example, themachine 2000 ofFIG. 20 . Therepresentative hardware layer 1904 comprises one ormore processing units 1906 having associatedexecutable instructions 1908. Theexecutable instructions 1908 represent the executable instructions of thesoftware architecture 1902, including implementation of the methods, modules, and so forth ofFIGS. 1-18 . Thehardware layer 1904 also includes memory and/orstorage modules 1910, which also have theexecutable instructions 1908. Thehardware layer 1904 may also compriseother hardware 1912, which represents any other hardware of thehardware layer 1904, such as the other hardware illustrated as part of themachine 2000. - In the example architecture of
FIG. 19 , thesoftware architecture 1902 may be conceptualized as a stack of layers where each layer provides particular functionality. For example, thesoftware architecture 1902 may include layers such as anoperating system 1914,libraries 1916, frameworks/middleware 1918,applications 1920, and apresentation layer 1944. Operationally, theapplications 1920 and/or other components within the layers may invoke API calls 1924 through the software stack and receive responses, returned values, and so forth, illustrated asmessages 1926, in response to the API calls 1924. The layers illustrated are representative in nature and not all software architectures have all layers. For example, some mobile or special purpose operating systems may not provide a layer of frameworks/middleware 1918, while others may provide such a layer. Other software architectures may include additional or different layers. - The
operating system 1914 may manage hardware resources and provide common services. Theoperating system 1914 may include, for example, a kernel 1928,services 1930, anddrivers 1932. The kernel 1928 may act as an abstraction layer between the hardware and the other software layers. For example, the kernel 1928 may be responsible for memory management, processor management (e.g., scheduling), component management, networking, security settings, and so on. Theservices 1930 may provide other common services for the other software layers. Thedrivers 1932 may be responsible for controlling or interfacing with the underlying hardware. For instance, thedrivers 1932 may include display drivers, camera drivers, Bluetooth® drivers, flash memory drivers, serial communication drivers (e.g., Universal Serial Bus (USB) drivers), Wi-Fi® drivers, audio drivers, power management drivers, and so forth depending on the hardware configuration. - The
libraries 1916 may provide a common infrastructure that may be utilized by theapplications 1920 and/or other components and/or layers. Thelibraries 1916 typically provide functionality that allows other software modules to perform tasks in an easier fashion than by interfacing directly with theunderlying operating system 1914 functionality (e.g., kernel 1928,services 1930, and/or drivers 1932). Thelibraries 1916 may include system libraries 1934 (e.g., C standard library) that may provide functions such as memory allocation functions, string manipulation functions, mathematic functions, and the like. In addition, thelibraries 1916 may includeAPI libraries 1936 such as media libraries (e.g., libraries to support presentation and manipulation of various media formats such as MPEG4, H.264, MP3, AAC, AMR, JPG, PNG), graphics libraries (e.g., an OpenGL framework that may be used to render 2D and 3D graphic content on a display), database libraries (e.g., SQLite that may provide various relational database functions), web libraries (e.g., WebKit that may provide web browsing functionality), and the like. Thelibraries 1916 may also include a wide variety ofother libraries 1938 to provide many other APIs to theapplications 1920 and other software components/modules. - The frameworks 1918 (also sometimes referred to as middleware) may provide a higher-level common infrastructure that may be utilized by the
applications 1920 and/or other software components/modules. For example, theframeworks 1918 may provide various graphic user interface (GUI) functions, high-level resource management, high-level location services, and so forth. Theframeworks 1918 may provide a broad spectrum of other APIs that may be utilized by theapplications 1920 and/or other software components/modules, some of which may be specific to a particular operating system or platform. - The
applications 1920 include built-inapplications 1940 and/or third-party applications 1942. Examples of representative built-inapplications 1940 may include, but are not limited to, a contacts application, a browser application, a. book reader application, a location application, a media application, a messaging application, and/or a game application. The third-party applications 1942 may include any of the built-inapplications 1940 as well as a broad assortment of other applications. In a specific example, the third-party application 1942 (e.g., an application developed using the Android™ or iOS™ software development kit (SDK) by an entity other than the vendor of the particular platform) may be mobile software running on a mobile operating system such as iOS™, Android™, Windows® Phone, or other mobile operating systems. In this example, the third-party application 1942 may invoke the API calls 1924 provided by the mobile operating system such as theoperating system 1914 to facilitate functionality described herein. - The
applications 1920 may utilize built-inoperating system 1914 functions (e.g., kernel 1928,services 1930, and/or drivers 1932), libraries 1916 (e.g.,system libraries 1934,API libraries 1936, and other libraries 1938), and frameworks/middleware 1918 to create user interfaces to interact with users of the system. Alternatively, or additionally, in some systems, interactions with a user may occur through a presentation layer, such as thepresentation layer 1944. In these systems, the application/module “logic” can be separated from the aspects of the application/module that interact with a user. - Some software architectures utilize virtual machines. In the example of
FIG. 19 , this is illustrated by avirtual machine 1948. A virtual machine creates a software environment where applications/modules can execute as if they were executing on a hardware machine (such as themachine 2000 ofFIG. 20 , for example). A virtual machine is hosted by a host operating system (e.g.,operating system 1914 inFIG. 19 ) and typically, although not always, has avirtual machine monitor 1946, which manages the operation of thevirtual machine 1948 as well as the interface with the host operating system (e.g., operating system 1914). A software architecture executes within thevirtual machine 1948, such as anoperating system 1950,libraries 1952, frameworks/middleware 1954,applications 1956, and/or apresentation layer 1958. These layers of software architecture executing within thevirtual machine 1948 can be the same as corresponding layers previously described or may be different. -
FIG. 20 is a block diagram illustrating components of amachine 2000, according to some example embodiments, able to read instructions from a machine-readable medium (e.g., a machine-readable storage medium) and perform any one or more of the methodologies discussed herein. Specifically,FIG. 20 shows a diagrammatic representation of themachine 2000 in the example form of a computer system, within which instructions 2016 (e.g., software, a program, an application, an applet, an app, or other executable code) for causing themachine 2000 to perform any one or more of the methodologies discussed herein may be executed. Theinstructions 2016 transform the general, non-programmed machine into a particular machine programmed to carry out the described and illustrated functions in the manner described. In alternative embodiments, themachine 2000 operates as a standalone device or may be coupled (e.g., networked) to other machines. In a networked deployment, themachine 2000 may operate in the capacity of a server machine or a client machine in a server-client network environment, or as a peer machine in a peer-to-peer (or distributed) network environment. Themachine 2000 may comprise, but not be limited to, a server computer, a client computer, a PC, a tablet computer, a laptop computer, a netbook, a set-top box (STB), a personal digital assistant (PDA), an entertainment media system, a cellular telephone, a smart phone, a mobile device, a wearable device (e.g., a smart watch), a smart home device (e.g., a smart appliance), other smart devices, a web appliance, a network router, a network switch, a network bridge, or any machine capable of executing theinstructions 2016, sequentially or otherwise, that specify actions to be taken by themachine 2000. Further, while only asingle machine 2000 is illustrated, the term “machine” shall also be taken to include a collection ofmachines 2000 that individually or jointly execute theinstructions 2016 to perform any one or more of the methodologies discussed herein. - The
machine 2000 may includeprocessors 2010, memory/storage 2030, and I/O components 2050, which may be configured to communicate with each other such as via a bus 2002. In an example embodiment, the processors 2010 (e.g., a Central Processing Unit (CPU), a Reduced Instruction Set Computing (RISC) processor, a Complex Instruction Set Computing (CISC) processor, a Graphics Processing Unit (GPU), a Digital Signal Processor (DSP), an ASIC, a Radio-Frequency Integrated Circuit (RFIC), another processor, or any suitable combination thereof) may include, for example, aprocessor 2012 and aprocessor 2014 that may execute theinstructions 2016. The term “processor” is intended to include multi-core processors that may comprise two or more independent processors (sometimes referred to as “cores”) that may executeinstructions 2016 contemporaneously. AlthoughFIG. 20 showsmultiple processors 2010, themachine 2000 may include a single processor with a single core, a single processor with multiple cores (e.g., a multi-core processor), multiple processors with a single core, multiple processors multiples cores, or any combination thereof. - The memory/
storage 2030 may include amemory 2032, such as a main memory, or other memory storage, and astorage unit 2036, both accessible to theprocessors 2010 such as via the bus 2002. Thestorage unit 2036 andmemory 2032 store theinstructions 2016 embodying any one or more of the methodologies or functions described herein. Theinstructions 2016 may also reside, completely or partially, within thememory 2032, within thestorage unit 2036, within at least one of the processors 2010 (e.g., within the processor's cache memory), or any suitable combination thereof, during execution thereof by themachine 2000. Accordingly, thememory 2032, thestorage unit 2036, and the memory of theprocessors 2010 are examples of machine-readable media. - As used herein, “machine-readable medium” means a device able to store instructions and data temporarily or permanently and may include, but is not limited to, random-access memory (RAM), read-only memory (ROM), buffer memory, flash memory, optical media, magnetic media, cache memory. other types of storage (e.g., Erasable Programmable Read-Only Memory (EEPROM)), and/or any suitable combination thereof The term “machine-readable medium” should be taken to include a single medium or multiple media (e.g., a centralized or distributed database, or associated caches and servers) able to store the
instructions 2016. The term “machine-readable medium” shall also be taken to include any medium, or combination of multiple media, that is capable of storing instructions (e.g., instructions 2016) for execution by a machine (e.g., machine 2000), such that the instructions, when executed by one or more processors of the machine (e.g., processors 2010), cause the machine to perform any one or more of the methodologies described herein. Accordingly, a “machine-readable medium” refers to a single storage apparatus or device, as well as “cloud-based” storage systems or storage networks that include multiple storage apparatus or devices. The term “machine-readable medium” excludes signals per se. - The I/
O components 2050 may include a wide variety of components to receive input, provide output, produce output, transmit information, exchange information, capture measurements, and so on. The specific I/O components 2050 that are included in a particular machine will depend on the type of machine. For example, portable machines such as mobile phones will likely include a touch input device or other such input mechanisms, while a headless server machine will likely not include such a touch input device. It will be appreciated that the I/O components 2050 may include many other components that are not shown inFIG. 20 . The I/O components 2050 are grouped according to functionality merely for simplifying the following discussion and the grouping is in no way limiting. In various example embodiments, the I/O components 2050 may includeoutput components 2052 and input components 2054. Theoutput components 2052 may include visual components (e.g., a display such as a plasma display panel (PDP), a light emitting diode (LED) display, a liquid crystal display (LCD), a projector, or a cathode ray tube (CRT)), acoustic components (e.g., speakers), haptic components (e.g., a vibratory motor, resistance mechanisms), other signal generators, and so forth. The input components 2054 may include alphanumeric input components (e.g., a keyboard, a touch screen configured to receive alphanumeric input, a photo-optical keyboard, or other alphanumeric input components), point based input components (e.g., a mouse, a touchpad, a trackball, a joystick, a motion sensor, or another pointing instrument), tactile input components (e.g., a physical button, a touch screen that provides location and/or force of touches or touch gestures, or other tactile input components), audio input components (e.g., a microphone), and the like. - In further example embodiments, the I/
O components 2050 may includebiometric components 2056,motion components 2058,environmental components 2060, orposition components 2062, among a wide array of other components. For example, thebiometric components 2056 may include components to detect expressions (e.g., hand expressions, facial expressions, vocal expressions, body gestures, or eye tracking), measure biosignals (e.g., blood pressure, heart rate, body temperature, perspiration, or brain waves), identify a person voice identification, retinal identification, facial identification, fingerprint identification, or electroencephalogram based identification), and the like. Themotion components 2058 may include acceleration sensor components (e.g., accelerometer), gravitation sensor components, rotation sensor components (e.g., gyroscope), and so forth. Theenvironmental components 2060 may include, for example, illumination sensor components (e.g., photometer), temperature sensor components (e.g., one or more thermometers that detect ambient temperature), humidity sensor components, pressure sensor components (e.g., barometer), acoustic sensor components (e.g., one or more microphones that detect background noise), proximity sensor components (e.g., infrared sensors that detect nearby objects), gas sensors (e.g., gas detection sensors to detect concentrations of hazardous gases for safety or to measure pollutants in the atmosphere), or other components that may provide indications, measurements, or signals corresponding to a surrounding physical environment. Theposition components 2062 may include location sensor components (e.g., a Global Position System (GPS) receiver component), altitude sensor components (e.g., altimeters or barometers that detect air pressure from which altitude may be derived), orientation sensor components (e.g., magnetometers), and the like. - Communication may be implemented using a wide variety of technologies. The I/
O components 2050 may includecommunication components 2064 operable to couple themachine 2000 to anetwork 2080 ordevices 2070 via acoupling 2082 and acoupling 2072, respectively. For example, thecommunication components 2064 may include a network interface component or other suitable device to interface with thenetwork 2080. In further examples, thecommunication components 2064 may include wired communication components, wireless communication components, cellular communication components, Near Field Communication (NFC) components, Bluetooth® components (e.g., Bluetooth® Low Energy), Wi-Fi® components, and other communication components to provide communication via other modalities. Thedevices 2070 may be another machine or any of a wide variety of peripheral devices (e.g., a peripheral device coupled via a USB). - Moreover, the
communication components 2064 may detect identifiers or include components operable to detect identifiers. For example, thecommunication components 2064 may include Radio Frequency Identification (RFID) tag reader components, NFC smart tag detection components, optical reader components (e.g., an optical sensor to detect one-dimensional bar codes such as Universal Product Code (UPC) bar code, multi-dimensional bar codes such as Quick Response (QR) code, Aztec code, Data Matrix, Dataglyph, MaxiCode, PDF417, Ultra Code, UCC RSS-2D bar code, and other optical codes), or acoustic detection components (e.g., microphones to identify tagged audio signals). In addition, a variety of information may be derived via thecommunication components 2064, such as location via Internet Protocol (IP) geolocation, location via Wi-Fi® signal triangulation, location via detecting an NFC beacon signal a may indicate a particular location, and so forth. - In various example embodiments, one or more portions of the
network 2080 may be an ad hoc network, an intranet, an extranet, a virtual private network (VPN), a local area network (LAN), a wireless LAN (WLAN), a WAN, a wireless WAN (WWAN), a metropolitan area network (MAN), the Internet, a portion of the Internet, a portion of the Public Switched Telephone Network (PSTN), a plain old telephone service (POTS) network, a cellular telephone network, a wireless network, a Wi-Fi® network, another type of network, or a combination of two or more such networks. For example, thenetwork 2080 or a portion of thenetwork 2080 may include a wireless or cellular network and thecoupling 2082 may be a Code Division Multiple Access (CDMA) connection, a Global System for Mobile communications (GSM) connection, or another type of cellular or wireless coupling. In this example, thecoupling 2082 may implement any of a variety of types of data transfer technology, such as Single Carrier Radio Transmission Technology (1xRTT), Evolution-Data Optimized (EVDO) technology, General Packet Radio Service (GPRS) technology, Enhanced Data rates for GSM Evolution (EDGE) technology, third Generation Partnership Project (3GPP) including 3G, fourth generation wireless (4G) networks, Universal Mobile Telecommunications System (UMTS), High Speed Packet Access (FISPA), Worldwide Interoperability for Microwave Access (WiMAX), Long Term Evolution (LTE) standard, others defined by various standard-setting organizations, other long range protocols, or other data transfer technology. - The
instructions 2016 may be transmitted or received over thenetwork 2080 using a transmission medium via a network interface device (e.g., a network interface component included in the communication components 2064) and utilizing any one of a number of well-known transfer protocols (e.g., HTTP). Similarly, theinstructions 2016 may be transmitted or received using a transmission medium via the coupling 2072 (e.g., a peer-to-peer coupling) to thedevices 2070. The term “transmission medium” shall be taken to include any intangible medium that is capable of storing, encoding, or carrying theinstructions 2016 for execution h themachine 2000, and includes digital or analog communications signals or other intangible media to facilitate communication of such software. - Throughout this specification, plural instances may implement components, operations, or structures described as a single instance. Although individual operations of one or more methods are illustrated and described as separate operations, one or more of the individual operations may be performed concurrently, and nothing requires that the operations be performed in the order illustrated. Structures and functionality presented as separate components in example configurations may be implemented as a combined structure or component. Similarly, structures and functionality presented as a single component may be implemented as separate components. These and other variations, modifications, additions, and improvements fall within the scope of the subject matter herein.
- Although an overview of the inventive subject matter has been described with reference to specific example embodiments, various modifications and changes may be made to these embodiments without departing from the broader scope of embodiments of the present disclosure. Such embodiments of the inventive subject matter may be referred to herein, individually or collectively, by the term “invention” merely for convenience and without intending to voluntarily limit the scope of this application to any single disclosure or inventive concept if more than one is, in fact, disclosed.
- The embodiments illustrated herein are described in sufficient detail to enable those skilled in the art to practice the teachings disclosed. Other embodiments may be used and derived therefrom, such that structural and logical substitutions and changes may be made without departing from the scope of this disclosure. The Detailed Description, therefore, is not to be taken in a limiting sense, and the scope of various embodiments is defined only by the appended claims, along with the full range of equivalents to which such claims are entitled.
- As used herein, the term “or” may be construed in either an inclusive or exclusive sense. Moreover, plural instances may be provided for resources, operations, or structures described herein as a single instance. Additionally, boundaries between various resources, operations, modules, engines, and data stores are somewhat arbitrary, and particular operations are illustrated in a context of specific illustrative configurations. Other allocations of functionality are envisioned and may fall within a scope of various embodiments of the present disclosure. In general, structures and functionality presented as separate resources in the example configurations may be implemented as a combined structure or resource. Similarly, structures and functionality presented as a single resource may be implemented as separate resources. These and other variations, modifications, additions, and improvements fall within a scope of embodiments of the present disclosure as represented by the appended claims. The specification and drawings are, accordingly, to be regarded in an illustrative rather than a restrictive sense.
Claims (20)
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
US15/348,166 US20170329464A1 (en) | 2016-05-11 | 2016-11-10 | Dynamic button with sub-buttons |
Applications Claiming Priority (2)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
US201662334651P | 2016-05-11 | 2016-05-11 | |
US15/348,166 US20170329464A1 (en) | 2016-05-11 | 2016-11-10 | Dynamic button with sub-buttons |
Publications (1)
Publication Number | Publication Date |
---|---|
US20170329464A1 true US20170329464A1 (en) | 2017-11-16 |
Family
ID=60294631
Family Applications (2)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
US15/348,166 Abandoned US20170329464A1 (en) | 2016-05-11 | 2016-11-10 | Dynamic button with sub-buttons |
US15/348,227 Active 2037-07-14 US10921952B2 (en) | 2016-05-11 | 2016-11-10 | Dynamic button with visual indication of application action result |
Family Applications After (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
US15/348,227 Active 2037-07-14 US10921952B2 (en) | 2016-05-11 | 2016-11-10 | Dynamic button with visual indication of application action result |
Country Status (1)
Country | Link |
---|---|
US (2) | US20170329464A1 (en) |
Cited By (9)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
USD835671S1 (en) | 2016-09-22 | 2018-12-11 | Sap Se | Display screen or portion thereof with a graphical user interface having a transitional icon |
USD835669S1 (en) | 2016-09-22 | 2018-12-11 | Sap Se | Display screen or portion thereof with a graphical user interface having a transitional icon |
USD835670S1 (en) | 2016-09-22 | 2018-12-11 | Sap Se | Display screen or portion thereof with a graphical user interface having a transitional icon |
USD836134S1 (en) | 2016-09-22 | 2018-12-18 | Sap Se | Display screen or portion thereof with a graphical user interface having a transitional icon |
CN109725807A (en) * | 2018-12-29 | 2019-05-07 | 山东浪潮商用***有限公司 | A kind of control method and intelligent appliance of network switching |
USD889501S1 (en) | 2018-04-26 | 2020-07-07 | Google Llc | Display screen with graphical user interface |
US10921952B2 (en) | 2016-05-11 | 2021-02-16 | Sap Se | Dynamic button with visual indication of application action result |
USD941877S1 (en) * | 2018-04-26 | 2022-01-25 | Google Llc | Display screen with animated graphical user interface |
US11914668B2 (en) * | 2022-01-04 | 2024-02-27 | Truist Bank | Loading animation with shape that grows from within from central point |
Families Citing this family (33)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US10564939B2 (en) * | 2017-06-05 | 2020-02-18 | Devfactory Fz-Llc | Method and system for arbitrary-granularity execution clone detection |
US10524010B2 (en) * | 2017-11-07 | 2019-12-31 | Facebook, Inc. | Social interaction user interface for videos |
USD870742S1 (en) | 2018-01-26 | 2019-12-24 | Facebook, Inc. | Display screen or portion thereof with animated user interface |
USD865786S1 (en) * | 2018-03-12 | 2019-11-05 | Google Llc | Display screen with animated graphical user interface |
USD878405S1 (en) * | 2018-03-12 | 2020-03-17 | Google Llc | Display screen with animated graphical user interface |
USD1005334S1 (en) | 2018-04-10 | 2023-11-21 | Google Llc | Display screen with icon |
CN109739591B (en) * | 2018-11-09 | 2022-09-20 | 深圳壹账通智能科技有限公司 | Transition animation making method, device and equipment |
JP7286967B2 (en) * | 2019-01-08 | 2023-06-06 | 京セラドキュメントソリューションズ株式会社 | Display device and display control program |
USD914049S1 (en) | 2019-04-22 | 2021-03-23 | Facebook, Inc. | Display screen with an animated graphical user interface |
USD914058S1 (en) | 2019-04-22 | 2021-03-23 | Facebook, Inc. | Display screen with a graphical user interface |
USD912693S1 (en) | 2019-04-22 | 2021-03-09 | Facebook, Inc. | Display screen with a graphical user interface |
USD913313S1 (en) | 2019-04-22 | 2021-03-16 | Facebook, Inc. | Display screen with an animated graphical user interface |
USD930695S1 (en) | 2019-04-22 | 2021-09-14 | Facebook, Inc. | Display screen with a graphical user interface |
USD913314S1 (en) | 2019-04-22 | 2021-03-16 | Facebook, Inc. | Display screen with an animated graphical user interface |
USD914051S1 (en) | 2019-04-22 | 2021-03-23 | Facebook, Inc. | Display screen with an animated graphical user interface |
USD912697S1 (en) | 2019-04-22 | 2021-03-09 | Facebook, Inc. | Display screen with a graphical user interface |
US10817142B1 (en) | 2019-05-20 | 2020-10-27 | Facebook, Inc. | Macro-navigation within a digital story framework |
US10757054B1 (en) | 2019-05-29 | 2020-08-25 | Facebook, Inc. | Systems and methods for digital privacy controls |
US11388132B1 (en) | 2019-05-29 | 2022-07-12 | Meta Platforms, Inc. | Automated social media replies |
USD914739S1 (en) | 2019-06-05 | 2021-03-30 | Facebook, Inc. | Display screen with an animated graphical user interface |
USD914705S1 (en) | 2019-06-05 | 2021-03-30 | Facebook, Inc. | Display screen with an animated graphical user interface |
USD912700S1 (en) | 2019-06-05 | 2021-03-09 | Facebook, Inc. | Display screen with an animated graphical user interface |
USD924255S1 (en) | 2019-06-05 | 2021-07-06 | Facebook, Inc. | Display screen with a graphical user interface |
USD918264S1 (en) | 2019-06-06 | 2021-05-04 | Facebook, Inc. | Display screen with a graphical user interface |
USD917533S1 (en) | 2019-06-06 | 2021-04-27 | Facebook, Inc. | Display screen with a graphical user interface |
USD916915S1 (en) | 2019-06-06 | 2021-04-20 | Facebook, Inc. | Display screen with a graphical user interface |
USD914757S1 (en) * | 2019-06-06 | 2021-03-30 | Facebook, Inc. | Display screen with an animated graphical user interface |
US11074122B2 (en) * | 2019-08-08 | 2021-07-27 | International Business Machines Corporation | Graceful degradation of user interface components in response to errors |
USD962972S1 (en) * | 2019-12-12 | 2022-09-06 | Bottomline Technologies, Inc | Display screen with graphical user interface in table formation |
US11397567B2 (en) | 2020-01-28 | 2022-07-26 | Salesforce, Inc. | Integrated system for designing a user interface |
US11403079B2 (en) * | 2020-01-28 | 2022-08-02 | Salesforce, Inc. | Integrated system for designing a user interface |
US11271929B1 (en) * | 2020-09-28 | 2022-03-08 | BIZZ dot BUZZ, LLC | Dynamic display control application for controlling graphical user interface elements based on activity data |
USD1012117S1 (en) * | 2021-03-19 | 2024-01-23 | Illumina, Inc. | Display screen or portion thereof with animated graphical user interface |
Citations (7)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US1673204A (en) * | 1924-07-16 | 1928-06-12 | Western States Machine Co | Driving mount for centrifugal machines |
US5909678A (en) * | 1996-09-13 | 1999-06-01 | International Business Machines Corporation | Computer systems, method and program for constructing statements by dragging and dropping iconic representations of subcomponent statements onto a phrase template |
US20150205511A1 (en) * | 2014-01-17 | 2015-07-23 | Apple Inc. | Systems And Methods For An Animated Graphical User Interface |
US20150312180A1 (en) * | 2014-04-25 | 2015-10-29 | Jordan H. Taler | Expandable Graphical Icon for Response to Electronic Text Transmission |
US20150370444A1 (en) * | 2014-06-24 | 2015-12-24 | Google Inc. | Computerized systems and methods for rendering an animation of an object in response to user input |
US9369333B1 (en) * | 2013-05-10 | 2016-06-14 | Google Inc. | System and method for centralizing outbound communications between an email system and a third party service |
US9798450B1 (en) * | 2011-12-02 | 2017-10-24 | Google Inc. | Multi-function graphical user interface button |
Family Cites Families (64)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
USD454574S1 (en) | 2000-01-04 | 2002-03-19 | Apple Computer, Inc. | User interface for computer display |
USD446790S1 (en) | 2000-03-17 | 2001-08-21 | Wells Fargo Bank N.A. | Icon for a computer display |
USD521521S1 (en) | 2004-07-16 | 2006-05-23 | Xerox Corporation | Progress indicator for a touch-based user interface for an image processing office machine |
US7954064B2 (en) * | 2005-10-27 | 2011-05-31 | Apple Inc. | Multiple dashboards |
US8095565B2 (en) * | 2005-12-05 | 2012-01-10 | Microsoft Corporation | Metadata driven user interface |
WO2007134265A2 (en) * | 2006-05-12 | 2007-11-22 | Captaris, Inc. | Workflow data binding |
US9298684B2 (en) * | 2008-06-18 | 2016-03-29 | Microsoft Technology Licensing, Llc | Implementing custom user interface forms in a personal information manager |
US20110119637A1 (en) | 2009-11-13 | 2011-05-19 | Nokia Corporation | Method and apparatus for interacting with a content object |
USD641372S1 (en) | 2010-06-11 | 2011-07-12 | Microsoft Corporation | Display screen with animated user interface |
USD644662S1 (en) | 2010-06-11 | 2011-09-06 | Microsoft Corporation | Display screen with an animated user interface |
JP5147087B2 (en) * | 2010-07-22 | 2013-02-20 | シャープ株式会社 | Display operation device and image processing device |
USD766252S1 (en) | 2010-09-06 | 2016-09-13 | Sony Corporation | Graphical user interface for a display screen or portion thereof |
US20120096383A1 (en) | 2010-10-15 | 2012-04-19 | Sony Network Entertainment Inc. | Loader animation |
USD671136S1 (en) | 2011-02-03 | 2012-11-20 | Microsoft Corporation | Display screen with transitional graphical user interface |
USD669497S1 (en) | 2011-03-21 | 2012-10-23 | Microsoft Corporation | Display screen with animated graphical user interface |
US9104296B2 (en) * | 2012-03-09 | 2015-08-11 | Apple Inc. | Rocket effect in a progress bar |
US9015608B2 (en) * | 2012-07-16 | 2015-04-21 | Sap Se | Regenerating a user interface area |
USD726214S1 (en) | 2012-11-05 | 2015-04-07 | Microsoft Corporation | Display screen with animated graphical user interface |
US9218188B2 (en) * | 2012-11-14 | 2015-12-22 | Facebook, Inc. | Animation sequence associated with feedback user-interface element |
USD758394S1 (en) | 2012-11-27 | 2016-06-07 | Ringcentral, Inc. | Display screen with a graphical user interface |
KR102091848B1 (en) | 2013-01-04 | 2020-03-20 | 삼성전자주식회사 | Method and apparatus for providing emotion information of user in an electronic device |
KR102076773B1 (en) | 2013-01-04 | 2020-02-12 | 삼성전자주식회사 | Method for obtaining video data and an electronic device thereof |
USD739872S1 (en) | 2013-02-22 | 2015-09-29 | Samsung Electronics Co., Ltd. | Display screen with animated graphical user interface |
AP00894S1 (en) | 2013-02-23 | 2017-03-20 | Samsung Electronics Co Ltd | Display screen or portion thereof with animated graphical user interface |
USD737310S1 (en) | 2013-02-23 | 2015-08-25 | Samsung Electronics Co., Ltd. | Display screen or portion thereof with graphical user interface |
JP5739002B2 (en) * | 2013-03-08 | 2015-06-24 | 株式会社東芝 | Communication device and communication system |
USD731529S1 (en) | 2013-06-09 | 2015-06-09 | Apple Inc. | Display screen or portion thereof with animated graphical user interface |
USD749626S1 (en) | 2013-09-03 | 2016-02-16 | Samsung Electronics Co., Ltd. | Display screen or portion thereof with animated graphical user interface |
USD776124S1 (en) | 2013-09-03 | 2017-01-10 | Samsung Electronics Co., Ltd. | Display screen or portion thereof with animated graphical user interface |
USD750098S1 (en) | 2013-09-27 | 2016-02-23 | Tencent Technology (Shenzhen) Company Limited | Display screen with animated graphical user interface |
USD740835S1 (en) | 2013-09-27 | 2015-10-13 | Tencent Technology (Shenzhen) Company Limited | Display screen with an animated graphical user interface |
USD740834S1 (en) | 2013-09-27 | 2015-10-13 | Tencent Technology (Shenzhen) Company Limited | Display screen with an animated graphical user interface |
USD758420S1 (en) | 2013-11-15 | 2016-06-07 | Tencent Technology (Shenzhen) Company Limited | Display screen portion with animated graphical user interface |
USD750125S1 (en) | 2013-12-30 | 2016-02-23 | Beijing Qihoo Technology Co., Ltd. | Display screen or portion thereof with animated icon for optimizing computer device resources |
USD768185S1 (en) | 2014-02-11 | 2016-10-04 | Samsung Electronics Co., Ltd. | Display screen or portion thereof with animated graphical user interface |
USD753676S1 (en) | 2014-02-21 | 2016-04-12 | Samsung Electronics Co., Ltd. | Display screen or portion thereof with transitional graphical user interface |
USD766318S1 (en) | 2014-03-07 | 2016-09-13 | Apple Inc. | Display screen or portion thereof with animated graphical user interface |
US9916082B2 (en) * | 2014-03-28 | 2018-03-13 | Kyocera Document Solutions Inc. | Display input apparatus and computer-readable non-transitory recording medium with display input control program recorded thereon |
USD773502S1 (en) | 2014-06-24 | 2016-12-06 | Google Inc. | Display screen with animated graphical user interface |
USD789976S1 (en) | 2014-06-24 | 2017-06-20 | Google Inc. | Display screen with animated graphical user interface |
USD798334S1 (en) | 2014-09-01 | 2017-09-26 | Apple Inc. | Display screen or portion thereof with animated graphical user interface |
USD762226S1 (en) | 2014-09-02 | 2016-07-26 | Samsung Electronics Co., Ltd. | Display screen or portion thereof with transitional graphical user interface |
US20160110085A1 (en) | 2014-10-20 | 2016-04-21 | Leeo, Inc. | Presenting environmental conditions using visual perception information |
USD780769S1 (en) | 2014-10-24 | 2017-03-07 | Dexcom, Inc. | Display screen or portion thereof with graphical user interface |
US20160188171A1 (en) * | 2014-12-31 | 2016-06-30 | Microsoft Technology Licensing, Llc. | Split button with access to previously used options |
USD759677S1 (en) | 2015-01-08 | 2016-06-21 | Google Inc. | Portion of a display panel with an animated computer icon |
USD784366S1 (en) | 2015-02-25 | 2017-04-18 | Lg Electronics Inc. | Display panel with animated graphical user interface |
USD782503S1 (en) | 2015-04-27 | 2017-03-28 | Lg Electronics Inc. | Display screen of a navigation device for a vehicle with a graphical user interface |
USD760746S1 (en) | 2015-06-04 | 2016-07-05 | Apple Inc. | Display screen or portion thereof with animated graphical user interface |
KR20170011583A (en) * | 2015-07-23 | 2017-02-02 | 삼성전자주식회사 | Operating Method For Contents Searching Function and electronic device supporting the same |
USD771653S1 (en) | 2015-07-29 | 2016-11-15 | Apple Inc. | Display screen or portion thereof with animated graphical user interface |
USD773531S1 (en) | 2015-10-22 | 2016-12-06 | Gamblit Gaming, Llc | Display screen with animated graphical user interface |
USD783657S1 (en) | 2015-11-20 | 2017-04-11 | Open Text Sa Ulc | Display screen or portion thereof with animated computer generated dialog GUI |
USD806093S1 (en) | 2015-12-24 | 2017-12-26 | Samsung Electronics Co., Ltd. | Display screen or portion thereof with animated graphical user interface |
USD819043S1 (en) | 2015-12-26 | 2018-05-29 | Sony Corporation | Display panel or screen with an animated graphical user interface |
USD798898S1 (en) | 2016-04-15 | 2017-10-03 | Nasdaq, Inc. | Display screen or portion thereof with animated graphical user interface |
US20170329464A1 (en) | 2016-05-11 | 2017-11-16 | Sap Se | Dynamic button with sub-buttons |
USD814504S1 (en) | 2016-06-01 | 2018-04-03 | Samsung Electronics Co., Ltd. | Display screen or portion thereof with transitional graphical user interface |
USD835669S1 (en) | 2016-09-22 | 2018-12-11 | Sap Se | Display screen or portion thereof with a graphical user interface having a transitional icon |
USD835670S1 (en) | 2016-09-22 | 2018-12-11 | Sap Se | Display screen or portion thereof with a graphical user interface having a transitional icon |
USD835671S1 (en) | 2016-09-22 | 2018-12-11 | Sap Se | Display screen or portion thereof with a graphical user interface having a transitional icon |
USD836134S1 (en) | 2016-09-22 | 2018-12-18 | Sap Se | Display screen or portion thereof with a graphical user interface having a transitional icon |
USD809006S1 (en) | 2016-10-13 | 2018-01-30 | Google Llc | Display screen with animated graphical icon |
USD820307S1 (en) | 2016-11-16 | 2018-06-12 | Airbnb, Inc. | Display screen with graphical user interface for a video pagination indicator |
-
2016
- 2016-11-10 US US15/348,166 patent/US20170329464A1/en not_active Abandoned
- 2016-11-10 US US15/348,227 patent/US10921952B2/en active Active
Patent Citations (7)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US1673204A (en) * | 1924-07-16 | 1928-06-12 | Western States Machine Co | Driving mount for centrifugal machines |
US5909678A (en) * | 1996-09-13 | 1999-06-01 | International Business Machines Corporation | Computer systems, method and program for constructing statements by dragging and dropping iconic representations of subcomponent statements onto a phrase template |
US9798450B1 (en) * | 2011-12-02 | 2017-10-24 | Google Inc. | Multi-function graphical user interface button |
US9369333B1 (en) * | 2013-05-10 | 2016-06-14 | Google Inc. | System and method for centralizing outbound communications between an email system and a third party service |
US20150205511A1 (en) * | 2014-01-17 | 2015-07-23 | Apple Inc. | Systems And Methods For An Animated Graphical User Interface |
US20150312180A1 (en) * | 2014-04-25 | 2015-10-29 | Jordan H. Taler | Expandable Graphical Icon for Response to Electronic Text Transmission |
US20150370444A1 (en) * | 2014-06-24 | 2015-12-24 | Google Inc. | Computerized systems and methods for rendering an animation of an object in response to user input |
Non-Patent Citations (1)
Title |
---|
https://tympanus.net/codrops/2014/04/09/how-to-create-a-circular-progress-button/ "How to create a circular progress button" Mary Lou "Lou" 4-9-2014 (Pages 1-4) * |
Cited By (10)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US10921952B2 (en) | 2016-05-11 | 2021-02-16 | Sap Se | Dynamic button with visual indication of application action result |
USD835671S1 (en) | 2016-09-22 | 2018-12-11 | Sap Se | Display screen or portion thereof with a graphical user interface having a transitional icon |
USD835669S1 (en) | 2016-09-22 | 2018-12-11 | Sap Se | Display screen or portion thereof with a graphical user interface having a transitional icon |
USD835670S1 (en) | 2016-09-22 | 2018-12-11 | Sap Se | Display screen or portion thereof with a graphical user interface having a transitional icon |
USD836134S1 (en) | 2016-09-22 | 2018-12-18 | Sap Se | Display screen or portion thereof with a graphical user interface having a transitional icon |
USD889501S1 (en) | 2018-04-26 | 2020-07-07 | Google Llc | Display screen with graphical user interface |
USD937851S1 (en) | 2018-04-26 | 2021-12-07 | Google Llc | Display screen with graphical user interface |
USD941877S1 (en) * | 2018-04-26 | 2022-01-25 | Google Llc | Display screen with animated graphical user interface |
CN109725807A (en) * | 2018-12-29 | 2019-05-07 | 山东浪潮商用***有限公司 | A kind of control method and intelligent appliance of network switching |
US11914668B2 (en) * | 2022-01-04 | 2024-02-27 | Truist Bank | Loading animation with shape that grows from within from central point |
Also Published As
Publication number | Publication date |
---|---|
US20170329465A1 (en) | 2017-11-16 |
US10921952B2 (en) | 2021-02-16 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
US10921952B2 (en) | Dynamic button with visual indication of application action result | |
US11676319B2 (en) | Augmented reality anthropomorphtzation system | |
US20230244375A1 (en) | Application control using a gesture based trigger | |
US11036347B2 (en) | Standardizing user interface elements | |
US20140279025A1 (en) | Methods and apparatus for display of mobile advertising content | |
US20120081389A1 (en) | Manipulating graphical objects | |
KR102547894B1 (en) | Dynamic Context Media Filter | |
US10891045B2 (en) | Application inspector | |
US11663723B2 (en) | Image segmentation system | |
US10579220B2 (en) | Method and system for story development with a dynamic grid | |
US11153239B2 (en) | Media enhancement system | |
US11625255B2 (en) | Contextual navigation menu | |
US20180039398A1 (en) | Interaction mechanisms for range slider control | |
US11144181B2 (en) | Graphical user interface magnetic panel | |
US11494052B1 (en) | Context based interface options |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
AS | Assignment |
Owner name: SAP SE, GERMANY Free format text: ASSIGNMENT OF ASSIGNORS INTEREST;ASSIGNOR:HONG, RICHARD;REEL/FRAME:040344/0085 Effective date: 20161107 |
|
AS | Assignment |
Owner name: SAP SE, GERMANY Free format text: ASSIGNMENT OF ASSIGNORS INTEREST;ASSIGNOR:HONG, RICHARD;REEL/FRAME:040368/0018 Effective date: 20161107 |
|
STPP | Information on status: patent application and granting procedure in general |
Free format text: NON FINAL ACTION MAILED |
|
STPP | Information on status: patent application and granting procedure in general |
Free format text: RESPONSE TO NON-FINAL OFFICE ACTION ENTERED AND FORWARDED TO EXAMINER |
|
STPP | Information on status: patent application and granting procedure in general |
Free format text: FINAL REJECTION MAILED |
|
STCB | Information on status: application discontinuation |
Free format text: ABANDONED -- FAILURE TO RESPOND TO AN OFFICE ACTION |