Connected Dual Interface

This application claims the benefit of co-pending U.S. provisional application Ser. No. 63/643,699, filed May 7, 2024, entitled CONNECTED DUAL INTERFACE.

The disclosure relates generally to systems and methods for user interfaces, and more particularly, to a connected dual interface.

User interfaces provide a mechanism for a user to interact with a computing device. The user interface receives input from the user in the form of clicks, taps, swipes, etc. using an input device such as a mouse, touchscreen, keyboard and the like. The user interface may display output on a display device such as a computer monitor or touchscreen display of a mobile device such as a smartphone.

In the following detailed description of example embodiments, reference is made to the accompanying drawings that form a part hereof, and in which is shown by way of illustration specific example embodiments in which the inventive subject matter may be practiced. These embodiments are described in sufficient detail to enable those skilled in the art to practice the inventive subject matter, and it is to be understood that other embodiments may be utilized, and that logical, mechanical, electrical and other changes may be made without departing from the scope of the inventive subject matter.

Some portions of the detailed descriptions which follow are presented in terms of algorithms and symbolic representations of operations on data bits within a computer memory. These algorithmic descriptions and representations are the ways used by those skilled in the data processing arts to most effectively convey the substance of their work to others skilled in the art. An algorithm is here, and generally, conceived to be a self-consistent sequence of steps leading to a desired result. The steps are those requiring physical manipulations of physical quantities. Usually, though not necessarily, these quantities take the form of electrical or magnetic signals capable of being stored, transferred, combined, compared, and otherwise manipulated. It has proven convenient at times, principally for reasons of common usage, to refer to these signals as bits, values, elements, symbols, characters, terms, numbers, or the like. It should be borne in mind, however, that all of these and similar terms are to be associated with the appropriate physical quantities and are merely convenient labels applied to these quantities. Unless specifically stated otherwise as apparent from the following discussions, terms such as “processing” or “computing” or “calculating” or “determining” or “displaying” or the like, refer to the action and processes of a computer system, or similar computing device, that manipulates and transforms data represented as physical (e.g., electronic) quantities within the computer system's registers and memories into other data similarly represented as physical quantities within the computer system memories or registers or other such information storage, transmission or display devices.

The description of the various embodiments is to be construed as examples only and does not describe every possible instance of the inventive subject matter. Numerous alternatives could be implemented, using combinations of current or future technologies, which would still fall within the scope of the claims. The following detailed description is, therefore, not to be taken in a limiting sense, and the scope of the inventive subject matter is defined only by the appended claims.

Described herein are techniques for a dual user interface that connects and presents data of a subject matter in both a page of data and visualized map graphical data. The dual user interface is a representation of same data in two different but connected user interface areas and presentation types. Disclosed herein are details regarding the interface method that triggers both the page of data and graphical map data areas to appear and disappear at the same time when a user taps, clicks, scrolls, gestures or swipes to a new data subject matter.

The dual user interface invention described herein connects and presents data of a subject matter in both a page of data and visualized map graphical data. For example, the dual UI provides different representations of the same data in two different but connected user interface areas and presentation types. The disclosure describes an interface method that triggers both the page of data and graphical map data areas to appear and disappear at the same time when a user taps, clicks, scrolls, gestures or swipes to a new data subject matter.

In some aspects, when a user selects the next tab or page/card in a series of data groups, the map layers/visuals on the map also change to reflect the new data in the next group of page data. This provides a way for a user to not only see more data about a point on the map in a data filled UI page or card, but also lets a user see a representation of that that data in graphical form on the map.

The disclosure describes techniques with respect to the functionality of the dual UI interface. The dual UI method and connection between both sets of visual map data and a page of connected data that can manifest itself in textual or visual ways on said page/card is also represented. Additionally, the disclosure describes techniques in which the dual UI is able to move between each group of connected data group.

is a block diagram of an operating environment for a systemthat injects credentials into a web browser request issued to a server application. In some embodiments, systemincludes a client deviceand a server devicecommunicatively coupled by a communications network. In some aspects the communications network may be one or more networks comprising the Internet.

Client devicecan be any type of computing device. For example, client devicecan be a smart phone, tablet computer, a laptop computer, a desktop computer, navigation device, media device, smart appliance, vehicle-based communication system, an IoT device etc. Client devicemay include a display device. Display device may be any type of display device that is either integrated with client device(e.g., as a smartphone display, laptop, or tablet computer) or a separate display device coupled with the client device, e.g., an LED display, OLED display, LCD display, a CRT, and the like.

Client device may include an applicationA. In some aspects applicationA may be a map application that is configured to display maps and associated information on display device. ApplicationA may utilize functions provided by dual UI moduleA. Dual UI moduleA may implement some or all of the techniques described herein to provide a dual UI. In some aspects dual UIA may maintain a first UI portionA and a second UI portion UIB. Each UI portionA andB may include data, data structures, and methods for providing a context based connection between one another. For example, UI portionA may include data, data structures, and methods for displaying a map on the display device. There may be a context associated with the map. UI portionB may include data, data structures, and methods for displaying an information card on display device, where the information provided on the information card has the same context as the context associated with the map. A user may provide input that causes the context to change, in which case both the UI portionA and UI portionB are concurrently updated to reflect the change in context such both UI portions are associated with the same context.

In some aspects servermay include an applicationB may be a map application. Like applicationA, applicationB may provide server side functionality for applicationB. Similarly, dual UI moduleB may provide server side functionality for providing a dual UI.

Further details on the operation of systemwill now be provided with reference to.

are conceptual diagrams illustrating a sequence of user interface interactions and displays of a mobile device according to embodiments. As an example, the mobile device may be a smartphone. In the description below, operations associated with the dual UI are described with reference labels for the operations positioned at relevant portions of the example screens shown in.

Selection pointindicates a point on the dual UI where the dual UI receives a selection of a point on a map layer. The selection may be performed by tapping or clicking on the map.

Map layermay be displayed by the dual UI. A map layer is a visual representation of data in graphical form. Examples include, but are not limited to, boundaries of properties, water features, roads, zoning information, and the like.

The dual UI displays cardin response to the receiving the indication of the selection of selection point. Cardmay be displayed in addition to the map layers. In the example of, the cardshows a row of button tabs. The first tab is shown as being selected (e.g., the tab labeled “Map Point Overview”). The selected tab may be connected to data that relates to selection pointthat the user clicked on the map, and the various map layersthat are visible. In other words, cardand map layermay have the same context.

In the example shown in, the selection pointand the selected tab are connected to the cardA shown below the tab of card. Carddisplays information about the point on the map that is selected (e.g., selection point). In this example the information is an initial set of information about the area on the map that is selected, and information about the initial layers on the map that are visible.

In addition to the selected tab, other UI elementssuch as button tabs and more pages/cards (e.g., cardB) may be seen on the display device. These UI elementsindicate that more information about the area the user has selected on the map is available to be discovered.

is a conceptual diagram illustrating further aspects of the example presented in. In some aspects a user has two ways to navigate to the next tab or page/card in the dual UI of this example. The user can swipe (illustrated by the motion of hand) to the second page/card.

The user can also tap (illustrated by hand) the second button tab at the top of the page/card to advance to the second page/card below.

As the page/card transitions to the next selected page/card, the map as seen here, starts to change to a new set of map layers. This new set of map layersthat starts to become visible on the map, are new sets of visual map data that include different graphical elements having the same context that will be displayed in associated cards.

The map layers that are becoming visible on the map are connected to the newly selected cardand tab as seen here.

As seen in this example, first tabis now deselected.

In this example new tabhas been selected and is causing a transition to the second page/card.

As can be seen in, the original selection pointon the map is still selected, but the data pertaining to the point is being changed visually on the map by turning off the previous map layers and turning new ones on. The new group of layers and data is now being represented and connected to the next page/card that was just selected.

is a conceptual diagram illustrating further aspects of the example presented in. The selected pointon the map is still the same, even though the new card and the new map layers are now fully visible and transitioned because the user has chosen a new set of data via the dual UI system.

The new set of map layershave fully become visible.

The new tab and page/cardand its data are now fully settled and are connected to the map layers data. I.e., the map layer data and page/card data share the same context.

The button tabthat represents the selected page/card and set of map layers is now fully settled and displays as a representation of the data group selected.

Another feature of the dual UI described herein is that a map layer that is part of a set of selected layers, and represented on the currently selected card and map, are also controllable via the page/card via a UI element. The user can do things to the layer but not limited to, toggling on and off various map layers and represented visual and or textual data while in said card.

If a user chooses to select a new pointon the map, this current set of map layers and connected page/cards and tabs would disappear, and a new set of page/cards and tabs pertaining to newly selected point on map would appear, and the UI would then change data and map layers to reflect the newly selected point. The same UI paradigm would then be able to let the user browse through the same dual UI quickly again, but with new data pertaining to the new point on map selected.

are conceptual diagrams illustrating a sequence of user interface displays of a computing device according to embodiments. This invention not only covers a swiping and tappable UI devices, but also covers the same invention under other various devices that have other UI input and response methods such as but not limited to phones, tablets, traditional computers, augmented reality, virtual reality and any device where a user gestures, taps, clicks, scrolls, uses a keyboard, mouse, eye gestures or brain gestures to accomplish this dual connected UI of visualized map data and page data. Below is one representation example showing how the techniques described herein may be implemented in various current and future devices, and showing how the same method of dual UI can be accomplished with any type of device and UI platform.

is a conceptual diagram illustrating a dual UI on a display of a computing device. In this example, pointon the map has been selected by using a method of UI selection such as click, tap, blink or other.

On this map certain map layersare visible. As noted above, a map layer is a visual representation of data in graphical form. Examples would include, but are not limited to, boundaries of properties, water features, roads, zoning information, etc.

A card also appears that shows a row of button tabs. The first tabis seen as selected. The tabthat is selected may be connected to data that relates to the point the user clicked on the map (e.g., point), and the various map layers that are visible and on.

In this scenario example, the point that is selected on the map and the tab that is selected in the card, are connected to a cardnext to the tab, and that cardmay display information about the point on the map that is selected. In this example it shows an initial set information about the area on the map that is selected, and information about the initial layers on the map that are visible.

As seen in the UI element, more button tabs and more pages/cards can be seen. This indicates that more information about the area the user has selected on the map is available to be discovered.

is a conceptual diagram illustrating further aspects of the example presented in.

The user has various ways to navigate to the next tab or page/card in the UI in this example. The user can use a scroll as indicated by scroll bar, click, or use other gestures to move to the second card.

The user can also select the second button tabnext to the page/card to advance to the second group of data/card/page.

As the page/card transitions to the next selected page/card, the map as seen here, starts to change to a new set of map layers. This new set of map layersthat starts to become visible on the map, are new sets of visual map data.

The map layers that are becoming visible on the map are connected to the newly selected page/cardand tab as seen here.

The first tabis now deselected.

A new tabhas been selected and is transitioning to the second page/card.

The original pointon the map is still selected, but the data pertaining to the point is being changed visually on the map by turning off the previous map layers and turning new ones on. The new group of layers and data is now being represented and connected to the next page/card that was just selected.

is a conceptual diagram illustrating further aspects of the example presented in.

The selected pointon the map is still the same, even though the new cardand the new map layers are now fully visible and transitioned because the user has chosen a new set of data via the dual UI system.