This description generally relates to user-computer interfaces and user experiences. The description, in particular, relates to systems and techniques for providing a user experience in viewing data and information related to one or more software applications on a computing device.
Computer applications (e.g., business applications, scientific applications, web applications, etc.) can display large data objects in text or graphics on a computer display, window, or viewport (“computer screen”) of a computing device. A data object (e.g., a table, a spreadsheet, a news item, a report, etc.) can have a full display size that is larger than a size of the computer screen of the computing device so that only a portion of the data object is visible on the computer screen at a given time. The remainder portions of the data object can remain invisible to a viewer at the given time. To navigate to the remainder portions of the data object, the viewer may use traditional “scrolling” techniques (e.g., using scroll bars, page up or page down buttons, etc.) to move the data object on the computer screen up, down, or sideways, with new information appearing as the old information disappears from view.
A problem with the traditional scrolling techniques in navigating from a view of a first portion of the data object content to a view of a second portion of the data object content on the computer screen is that the user can loose the focus and context of the second portion of the data object content. For example, when the displayed data object is row-column table, the displayed first portion of the table may include a table header (e.g., column header) listing names of columns of the table. Scrolling to the second portion of the table may result in the table header being moved out of view on the computer screen. Thus, the viewer may not be able to visually reference the column header names for the rows and columns in the displayed view of the second portion of the table.
Consideration is now given to user experience in interacting with displays of a large data object that can be viewed only small portion-by-small portion on a computer screen.
A system includes a processor and a memory. In a general aspect, the processor executes instructions stored in the memory to create a rendering engine. The rendering engine renders a document as a page in a scroll container in a user interface (UI) on a computing device. The document contains one or more content header components associated with respective document contents. The rendered document page is scrollable through the scroll container. In operation, at least one content header component can be scrolled out of view in the scroll container when a first portion of the document is scrolled out of the scroll container bringing a second portion of the rendered document in view in the scroll container after scrolling. The rendering engine snaps the one content header component that has been scrolled out of view back into the scroll container so that the one content header component is in view along with second portion of the rendered document that is in view in the UI after scrolling.
The details of one or more implementations are set forth in the accompanying drawings and the description below. Further features of the disclosed subject matter, its nature and various advantages will be more apparent from the accompanying drawings, the following detailed description, and the appended claims.
The accompanying drawings, in which like numerals indicate like components, illustrate embodiments of the disclosed subject matter.
A user interface (UI) renderer enables “content” header snapping to provide reading context in a document (or other data object) rendered in a UI container (e.g., display window) of the computing device, in accordance with the principles of the present disclosure. The document may be so large that that only a portion of the content of the document is visible in the display window of the computing device at a given time, and a viewer may have to scroll through the document to bring other portions of the content of the document into view. The UI renderer can snap (or stick) a top level “content” header into the rendered document in the display window to provide context to the scrolled document content that is being presently displayed in the display window of the computing device. The UI renderer can also snap one or more lower level sub content header elements to provide context to the scrolled document content that is being presently displayed in the display window of the computing device. This feature of the UI renderer can provide a viewer with a viewing experience that is intuitive and not jarring when scrolling through a document that has, for example, multiple hierarchical levels of document content.
A document author may choose or select which portions or components of the document are snappable and which portions or components are not snappable. In example implementations, portions or components of the document that are not snappable can be scrolled through the display window of the computing device without content header snapping. In the example implementations, portions or components of the document that are snappable may have a content header snapped in, for example, when the portions or components are scrolled to the top of the display window of the computing device. This snapping experience can be extended over multiple columns or sections in cases where the document has multiple columns or sections. The snapping experience can also be extended over multiple columns or sections in the document where different columns or sections in the document have different snappable and non-snappable content headers.
The UI renderer may, for example, based on a standard Dynamic Page class implementation in which the document is displayed as a Dynamic Page on the UI. The UI renderer may be constructed by a “Snap-enabled” Dynamic Page implementation that is obtained by sub classing the standard Dynamic Page class implementation, in accordance with the principles of the present disclosure. A Dynamic Page can have multiple components. Each component contained in the Dynamic Page may be a “snappable” component, or alternatively, a “not snappable” component. The Snap-enabled Dynamic Page implementation enables all components contained in the Dynamic Page that declare themselves as snappable to be snapped by the UI renderer to the right geometry in the UI display.
From another perspective, a computer application may have a front end, which visually displays the content of a data object (e.g., a table, a report, a document, etc.) as a page (e.g., a dynamic page) on a user interface (UI) (e.g., a display screen) of a computing device (e.g., a desktop computer, a laptop computer, a smart phone, a mobile phone, etc.). A displayed page may be displayed on the UI, for example, with a page header (e.g., a page title) adjoining a content area. The page header may have snapping (or sticking) characteristics such that the page header is always visible (e.g., on the top or a side of the page) whenever the page is displayed on the UI. The page's displayed content area may be displayed, for example, below the page header that is displayed on the top of the page.
One or more content separators (e.g., toolbars, section headers, section sub-headers, or ribbons, etc.) (collectively “content headers”) may be included in the displayed content area of the page. These content headers may include informational UI control elements and actionable UI control elements. An actionable UI control element may, for example, be a navigation links container that includes actionable links or tabs to help navigation within the page content (e.g., from one section of the page content to another section of the page content). A content header of a displayed data object may, for example, include one or more of a title with actions, a toolbar, a filter bar, a search bar in lists, a shell bar, notifications, navigation controls (e.g., breadcrumb, multi instance, section links or tabs), and other optional information on a page (e.g., dynamic/object page).
For convenience in description, the terms “content header,” “content header component,” and “content separator” may be used interchangeably herein. Further, the terms “UI” and “display window” may be used interchangeably herein. Further, the “data object” being displayed may be interchangeably referred to as the “page” herein.
In traditional displays, the content header of the displayed data object is attached to a first portion of the data object content. The content header is visible on the computer screen only when the first portion of the data object content is visible on the computer screen. When the first portion of the displayed data object content is scrolled out of view (e.g., by a viewer wanting to view other portions of the data object content), the content header attached to the first portion is also moved out of view and may not be viewable by, or accessible to, the viewer. For example, in a case where the data object content is multi-sectioned content, the displayed first portion data object may include a section navigation links container, which includes links that can be used to navigate to the different sections of the data object content. Back and forth navigation between the different sections may not be possible because the section navigation links container may be scrolled out of view and not accessible when the viewer is viewing another portion of the data object that is not adjacent to the section navigation links container.
This disclosure is directed to the behavior, properties and characteristics of objects (e.g., tables or sections) inside the page content. In particular, this disclosure describes the “snapping” behavior, properties and characteristics of parts of these objects (headers, toolbars, column headers, etc.) (hereinafter “snapping” “content header components”). A snapping content header component may snap into place at a target location in the displayed content area of the page so that it (i.e. the snapping content header component) is visible in the displayed content area of the page on the UI (e.g., like the page header that is visible adjoining the content area) when the data object content is scrolled in the UI, in accordance with the principles of the present disclosure.
More than one snapping content header components may snap into place at respective target locations in the displayed content area as the data object content is scrolled in the UI. The snapping content header components may, for example, correspond to a hierarchy of content separators (e.g., section header, a first level section sub header, a second level section sub header, etc.).
In example implementations, a target location for a first snapping content header component may be an uppermost part of the page's displayed content area. A target location for a next snapping content header component may be just below the location of the lowest snapping content header component (e.g., the first snapping content header) that has been already snapped in place. One or more of the “snapped-in” content header components may be released (i.e., unsnapped or removed from view) from the respective target locations as the data object content is further being scrolled through the UI. A snapped-in content header component may be released, for example, when the snapped-in content header component is no longer relevant to the scrolled content being displayed in the UI.
Each snapping content header component may have its own snap point (or snap time) and its own release point (or release time) relative to the scrolling action that moves the page content up or down through the UI.
A snap point for a snapping content header component may correspond to the point in the scrolling action at which the snapping content header component reaches the uppermost part of the page's displayed content area that is below any other snapping content header component that may be already snapped in view in the displayed page content in the UI. In other words, the target location for the snapping content header component on the UI may be just below the lowest snapped-in content header components presently in view in the displayed page content in the UI.
A release point for a snapped-in content header component may depend on the page content being displayed below the snapped-in content header component in the UI. A release point for the snapped-in content header component may correspond to the point in the scrolling action at which the snapped-in content header component is no longer relevant to the page content being displayed in the UI. For example, a snapped-in table header (of a displayed table) may have a release point in the scrolling action when the last row of the table reaches the lowest snapped-in content header component presently in view in the displayed page content in the UI, because the snapped-in table header is not relevant when no part of the table (e.g., rows) is on display in the UI. Similarly, for example, a snapped-in section header may have a release point corresponding to the point in the scrolling action when the section bottom reaches the lowest snapped-in content header component presently in view in displayed page content in the UI.
In other words, a snapped-in content section header may remain snapped-in as long as a part of its corresponding object (e.g., section content, sub section content, etc.) is visible in the UI. For example, a snapped-in content section header may be released when all of the section content is scrolled up out of the UI and is no longer visible in the UI. If the scrolling action is later reversed (e.g., to scroll the page down) the previously scrolled out section content may reappear in the UI. In such instance, the previously released content section header may be again snapped in the UI to be visible along with the reappearing section content visible in the UI.
From a perspective of the sizes or dimensions of objects displayed in the UI, a displayed snapping content header component may have a display height (or width) in the scrolling direction. In an example implementation, as the data object is scrolled up through the UI (e.g., by moving a scroll bar downward), a first snapping point for the snapping content header component may occur when the snapping content header component reaches the lowest snapped-in header component that may be already on display in the UI. A first release point for the snapping content header component may occur when the bottom of the corresponding content object (e.g., section content object) reaches the bottom of the snapped-in header component on display in the UI. If the data object is then reverse scrolled down through the UI (e.g., by moving a scroll bar upward), content corresponding to the previously released snapping content header component may reappear in the UI. A second snapping point for the snapping content header component may occur when the reappearing content reaches the first release point plus the display height (or width) of snapping content header component in the scrolling direction. Further, a second release point for the snapping content header component may occur when may occur when the top of the corresponding content object (e.g., section content object) being scrolled down reaches the bottom of the snapped-in header component on display in the UI. The released snapped-in content header component may thereafter scroll down together with the top of the corresponding content object (e.g., section content object) that is being scrolled down through the UI.
In some instances, a snapping content header component (e.g., a navigation links container) may be relevant to all subsequent content in the data object. Such a snapping content header component (e.g., a navigation links container) may, like any other snapping content header component, have a snapping point, but may not have a release point because the snapping content header component (e.g., the navigation links container) remains relevant to all subsequent content in the data object as the data object is scrolled through the UI.
System 100 may include a computer application 140 coupled to a database 120. Computer application 140 may, for example, be hosted or launched on a computer 110. Computer 110, which includes an O/S 11b, a CPU 12b, a memory 13b, and I/O 14b, may further include a user interface (UI) or display 15. Computer 110, may include a rendering engine 142 which includes an O/S 11b, a CPU 12b, a memory 13b, and I/O 14b, may further include a user interface (UI) or display 15.
Although computer 110 is illustrated in the example of
Computer application 140 may generate or receive data (e.g., a data object 122) stored in database 120 and/or may consume the data stored in database 120. In an example implementation, computer application may data (e.g., a data object 122) on display 15.
Rendering engine 142 (which may be included or coupled to computer application 140) may configured to display data object 122 or portions thereof in a display window 148 of an interactive frontend (e.g., front end UI 144) of the computer application. UI 144 may, for example, be constructed using standard components (e.g., generic user interface building blocks (UIBBs)) and/or custom-developed components for UI display entities (e.g., graphics, charts, lists, forms, trees, etc.), which can be used to display data. UI 144 may, for example, include a scroll bar 146 (
An example data object 122 may, for example, be a table, a document, a business report, etc.
One or more of content separators (e.g., navigation links container 124a, content header component 124b, and subheading component 124c, content header component 125b, etc.) may be configured or designated to be reusable by rendering engine 142, for display (e.g., as snapping content headers) at positions other than their original positions in data object 122/page 123.
Often data object 122/page 123 may include more content than can be fit and displayed at one time in display window 148 on UI 144.
A content separator (e.g., content header component 124b) scrolled out of display window 148 may leave “orphaned” content (e.g., orphaned content 124d) in view in display window 148 for which the moved out content separator (e.g., content header component 124b) is not available to visually guide the viewer.
In the example implementations described herein, rendering engine 142 may be recognize an event of one or more content separators (e.g., navigation links container 124a, content header component 124b, and subheading component 124c, content header component 125b, etc.) in first portion 123A (or a currently displayed portion) being moved out of view from display window 148. Rendering engine 142 may recognize that a content separator scrolled out of view from display window 148 can have “orphaned” associated content (e.g., orphaned content 124d) that still remains in view in display window 148. However, the scrolled out content separator (e.g., content header component 124b) is not available to visually guide the viewer to the orphaned associated content that still remains in view in display window 148. If the content separator associated with the orphaned content has been designated as being snappable, rendering engine 142 may reintroduce the content separator (that has been moved out of view) back into the display as a visual guide to the orphaned content (e.g., orphaned content 124d) in view in display window 148.
Data object 122/page 123 may be further scrolled up (or down) through display window 148 on UI 144 by the viewer. Rendering engine 142 may leave the snapped-in header components (e.g., snapped-in navigation links container 124aS and snapped-in content header component 124bS snapped to the respective target areas in display window 148 (as shown in
In the foregoing example scenarios of
In example implementations, rendering engine 142 may include or be coupled to event listeners that can detect scrolling events (e.g. scroll start, and scroll stop) and other events (e.g. snap designation or registration of UI components, etc.). Rendering engine 142 may snap or release snapped in content headers in display window of UI 144 in response to the detected events. Rendering engine may, for example, snap or release a content header in display window 148 after an event of scroll stop.
In an example implementation, rendering engine 142 may be configured to provide a common UI (e.g., front end UI 144) for the multiple and diverse applications (e.g., computer application 140) under a unified UI framework designed to provide a common, same or unified user experience (UX) to the user when launching, accessing or interacting with computer application 140 from any type of computing devices (e.g., laptops, smartphones, desktop computers, etc.). The size of, and the UI elements included in, front end UI 144 displayed on a computing device may depend on the size of the display screen of the client computer device available for display.
In example implementations, rendering engine 142/UI 144 may be implemented, for example, on HTML5/CSS/JS technology platform using a SAPUI5 framework. Construction of rendering engine 142/UI 144 may adhere to a consistent, responsive design that allows users to seamlessly experience UI 144 across interaction channels—desktop, tablet, mobile, etc.
In the example shown in
A document (e.g., data object 122/page 123), which is rendered in a display window (e.g., display window 148/UI 144) by rendering engine 142, may include multiple hierarchical levels of document content. The multiple hierarchical levels of document content may correspond to a number of different levels of content separators (e.g., snappable content header components) that can be possibly snapped back into the display window by rendering engine 142 as the document is scrolled in the display window. In a scrolling scenario in which a large number of the different levels of the content separators are concurrently snapped into the display window (at corresponding target areas), the snapped-in content separators may consume a significant amount of the display area of the display window leaving little of the display area for actually displaying the document content. To avoid such situations and to keep a reasonable amount of the display area available for visually displaying the document content, in example implementations, a threshold or limit (e.g., 45% of screen height) may be set to limit the area that is available to display the snapped-in content separators. The threshold or limit may depend on the size of the display screen of the client computer device on which the document is rendered.
The snapped-in content separators may form a hierarchical stack (see e.g., hierarchical stack: snapped-in navigation links container 124aS/snapped-in content header component 124bS/snapped-in subheading component 124cS,
Example display window 900 may include a static shell bar 901, a summary line 902, and a static footer bar 907 that remain stationary as the rendered document is scrolled through display window (e.g., by finger touch-screen scrolling). Summary line 902 may, for example, include the object page header of a page displayed in display window 900. Rendering engine 142 may snap in content headers (e.g., anchor bar 903 (navigation links), section header 904, list header 905, and column header 906, etc.) in display window of UI 144 in response to detected scrolling events. Anchor bar (navigation links) may, for example, change to a dropdown (arrow on the right) in a phone mode (or if the window gets narrow).
In the scenario in which there are more snapped-in content headers than can be accommodated in area 93 (that is available for snapped-in content separators in display window 900), rendering engine 142 may contain the overflow of snapped-in content separators from area 93 in a summary line (e.g., summary line 902) in display window 900. A viewer may access the overflowed snapped-in content separators by expanding summary line 902 in display window 900.
The document may contain controls or components (e.g., column headers, table toolbars, tab containers, navigation controls, etc.) (hereinafter “content header components”) that relate to, or are associated with, document content that may be displayed, for example, underneath the content header components in the rendered document. The content header components may serve as a guide to associated document content or provide actions. A content header component may be sticky header component or a non-sticky header component. A non-sticky header component may scroll out of view when a first portion of the document is scrolled out of the scroll container and thus is not available to the viewer for reference or for actions on a portion (e.g. a second portion) of the rendered document that may be in view after scrolling.
Method 1000 may include snapping a non-sticky content header component that has been scrolled out of view back into a scrolled document rendered in the UI so that the non-sticky content header component is in view along with the second portion of the rendered document that is in view in the UI after scrolling (1010).
Method 1000 may include registering the non-sticky content header components of the document as being snappable content header components or non-snappable content header components (1011). Method 1000 may include attaching event listeners to, and monitoring scrolling events in, the UI in which the document is rendered to determine if a snappable content header component of the rendered document has been scrolled out of view (1012). Monitoring scrolling events may include determining scrolling start events and scrolling stop events. Further, method 1000 may include determining if content associated with the scrolled-out-of-view snappable content header component is present in the second portion of the rendered document that is in view in the UI after scrolling (1013), and accordingly snapping the scrolled-out-of-view snappable content header component back into the UI to be displayed along with the second portion of the rendered document that is in view in the UI after scrolling (1014).
In some instances, the document may have different levels of content headers (e.g., content headers and sub-content headers). In such instances, content associated in common with two scrolled-out-of-view snappable content header components may be present in the second portion of the rendered document that is in view in the UI after scrolling. In such instances, method 1000 may include snapping the two scrolled-out-of-view snappable content header components back into the UI to be displayed along with the second portion of the rendered document that is in view in the UI after scrolling (1015).
Method 1000 may include designating an area or location in the UI as a target area to receive the scrolled-out-of-view snappable content header component that is snapped back into the UI (1016).
After the scrolled-out-of-view snappable content header component is snapped back into the UI and a further scrolling event, method 1000 may include determining if content associated with the scrolled-out-of-view snappable content header component is still present in a current portion of the rendered document that is in view in the UI after scrolling (1017). If the associated content is not present, method 1000 may include removing or releasing the scrolled-out-of-view snappable content header component (10110).
In some cases, the document may contain content that is extended over multiple columns and different columns may have different snappable and non-snappable content headers. In such cases, method 1000 may include snapping different snappable content headers for the different columns in the rendered document after it is scrolled (1019).
The techniques and methods (e.g., method 1000) for reintroducing scrolled-out-of-view content header components in a document may be implemented, for example, using rendering engine 142 of system 100 (
Rendering engine 142 may be constructed using, for example, UI-related JavaScript functionality. An example implementation of rendering engine 142 may be based on SAP's Dynamic Page class implementation of a UI that is sub classed to build a Snap-enabled Dynamic Page UI. A Dynamic Page can have multiple components. A component may be a snappable component or a not-snappable component. The Snap-enabled Dynamic Page implementation may enable all components contained in the page that have declared themselves as snappable to be considered for snapping to a pre-defined target geometry in the UI.
An example rendering engine 142 (as shown in
Rendering engine 142 may be configured to render the data object (e.g., a document 1110) on a user interface (e.g., UI 1120) of a computing device as a web page (e.g., a Dynamic Page). Dynamic Page Control 1104 may include a layout control, representing a generic web page (e.g., Dynamic Page), consisting, for example, of a page title, a content area, and one or more content headers with dynamic behavior, etc. A generic layout control implementation may be extended to create a “Dynamic Page Snappable” object using a Snap Engine object created by Snap Engine 1107. The Snap Engine object may be created just before the Dynamic Page Snappable object is rendered on UI 1120. After rendering the Dynamic Page Snappable object, rendering engine 142 may register Snap Engine 1107 for callbacks on Scroll events recognized on event bus 1106.
In rendering engine 142, Table 1102 may provide an interface (e.g., Snapping Component Interface 1101) where document 1110 may register the individual snappable components of the document. Table 1102 may subclass a Table object class and register a table header as a snappable component on rendering. Table 1102 may publish registration (and changes in registration) of snappable components of the document on an event bus (event bus 1106).
Caching API 1105 may be configured to store a list of components that have registered themselves as snappable. The list can be used (e.g., by Snap Engine 1107) at a later time to identify components that need to be snapped into a target area (e.g., Title) in the rendered Dynamic Page Snappable object.
Snap Engine 1107 when created may store a root level UI component that it is created for (i.e., the Dynamic Page Snappable object). Snap Engine 1107 may also store a snap target area (e.g., Title) in the Dynamic Page Snappable object that is available for components to be snapped into. Snap Engine 1107 may be configured to listen on event bus 1106 to see if any component that is a child of the root UI component is registered as being snappable (e.g., via Snapping Component Interface 1101 and Table 1102).
Snap Engine 1107 may use Caching API 1105 to remember the components that have registered themselves as being snappable components (e.g., via Snapping Component Interface 1101 and Table 1102).
Rendering engine 142/Snap Engine 1107 may be configured to deploy or utilize event listeners 1122 on UI 1120 (e.g., a scroll container) to listen for scrolling events (“Scroll events”) related to the Dynamic Page rendered in UI 1120. Rendering engine 142/Snap Engine 1107 may be configured to recognize when a non-sticky control or component in the rendered document is scrolled out of view on UI 1120 of the computing device, and if the non-sticky control or component happens to be a snappable component, snap the non-sticky component back into view on UI 1120 as may be needed.
Rendering engine 142/Snap Engine 1107 may, for example, be configured to implement callbacks for scroll events. When a user scrolls, the scrolled Dynamic Page will newly render in UI 1120, but the callbacks for the scroll events will enable Snap Engine 1107 to snap the snappable components back into the Snap target (e.g. Title) of the scrolled Dynamic Page.
Example snippets of javascript code (e.g., DynamicPageSnapEnabled.js, SnapEngine.js, TableSnapEnabled.js, and CachingAPI.js) that may be used to implement components of rendering engine 142 are shown below.
DynamicPageSnapEnabled.js
SnapEngine.js
TableSnapEnabled.js
CachingAPI.js
The various systems and techniques described herein may be implemented in digital electronic circuitry, or in computer hardware, firmware, software, or in combinations of them. The various techniques may implemented as a computer program product, i.e., a computer program tangibly embodied in an information carrier, e.g., in a machine readable non-transitory storage device, for execution by, or to control the operation of, data processing apparatus, e.g., a programmable processor, a computer, or multiple computers. A computer program, such as the computer program(s) described above, can be written in any form of programming language, including compiled or interpreted languages, and can be deployed in any form, including as a standalone program or as a module, component, subroutine, or other unit suitable for use in a computing environment. A computer program can be deployed to be executed on one computer or on multiple computers at one site or distributed across multiple sites and interconnected by a communication network.
Processors suitable for the execution of a computer program include, by way of example, both general and special purpose microprocessors, and any one or more processors of any kind of digital computer. Generally, a processor will receive instructions and data from a read only memory or a random access memory or both. Elements of a computer may include at least one processor for executing instructions and one or more memory devices for storing instructions and data. Generally, a computer also may include, or be operatively coupled to receive data from or transfer data to, or both, one or more mass storage devices for storing data, e.g., magnetic, magnetooptical disks, or optical disks. Information carriers suitable for embodying computer program instructions and data include all forms of nonvolatile memory, including by way of example semiconductor memory devices, e.g., EPROM, EEPROM, and flash memory devices; magnetic disks, e.g., internal hard disks or removable disks; magnetooptical disks; and CDROM and DVD-ROM disks. The processor and the memory may be supplemented by, or incorporated in special purpose logic circuitry.
Implementations may be implemented in a computing system that includes a backend component, e.g., as a data server, or that includes a middleware component, e.g., an application server, or that includes a frontend component, e.g., a client computer having a graphical user interface or a Web browser through which a user can interact with an implementation, or any combination of such backend, middleware, or frontend components. Components may be interconnected by any form or medium of digital data communication, e.g., a communication network. Examples of communication networks include a local area network (LAN) and a wide area network (WAN), e.g., the Internet.