DE102021109522A1 - Graphical user interfaces - Google Patents

Abstract

The disclosure relates to a graphical user interface (GUI) for selecting elements of a hierarchical data structure, wherein a first button encloses a second button and is adapted to refer to a first element of the hierarchical data structure by actuation, which first element corresponds to a second element of the hierarchical data structure referenced by the second button is hierarchically parent. Furthermore, the disclosure relates to a computer-implemented method for displaying the GUI, receiving an input operation and navigating the hierarchical data structure, as well as a computer program product of the method and a use of the GUI.

Description

Technical field of the invention

The present invention relates to graphical user interfaces (GUI), as well as computer-implemented methods, computer program products and use of the GUI.

Background of the Invention

Efforts are made to display data in its diverse type and scope and to present and make visible this data to a user in a suitable format and scope. For comparison, according to Michal Kosinski, associate professor of organizational behavior at Stanford University Graduate School of Business, IBM estimated in 2012 that an average human generates about 500 megabytes of digital data per day. Thus, this amount of data represents an almost unmanageable amount of information and thus substantiates the need for Big Data Analysis.

This data can be summarized in a data structure based on the information content, which is subject to a hierarchy. Examples of this are structuring/sorting of the elements of a data structure into generic and subordinate terms, into synonyms and/or hierarchy levels.

Elements of a hierarchical data structure can be DVDs or books, for example, which are sorted according to the year they were published, the genre and/or the protagonists or authors. Likewise, and not exclusively, products that are offered via an online shop, for example, can be subdivided according to product categories, price range and product use or product application.

Traditionally, the navigation takes place, for example on a screen, for example by means of a number of drop-down lists which represent a first hierarchical level. Each element of the multiple drop-down lists then represents a hierarchically subordinate element. In this way, the individual elements can be distinguished from their hierarchical point of view.

The items of the multiple drop-down lists may be associated with a textual representation representative of the items of the hierarchical data structure. By operating the representative textual representation, the reference to the corresponding element of the hierarchical data structure occurs regularly, in which, for example, a new GUI opens on the screen and displays this content therein.

As an alternative to the drop-down list, the representative textual representation can take place, for example, in a list box, tree control or multifunction bar (ribbon).

US2011/0202877A1 discloses an apparatus and method for controlling a display for content navigation. In one aspect, a multiplicity of graphic cascades are generated, with at least one of the graphic cascades being provided for the menu navigation and another of the graphic cascades being provided for the actual generation of content. New menus open automatically in the foreground of a cascade.

The background of the invention discloses the representation of elements of a hierarchical data structure by traditional GUI controls, in particular list boxes, scroll bars, tabs, drop down lists, tree controls or ribbon. Each list entry in the list box, each scroll element of the scroll bar, each tab element of the tabs, each expand element of the expand list, each tree element of the tree control or each multifunction element of the multifunction bar corresponds to an element of the hierarchical data structure. This in turn implies the disadvantage of the prior art that the physical perception of the plurality of hierarchical levels and/or the plurality of elements of the data structure is impaired in this respect and the appropriate use of the available screen space or virtual or extended environment (virtual or augmented / mixed reality) suffers from it.

For example, the content navigation disclosed in US2011/0202877A1 , due to the individual cascades for the menu navigation, a successive stepping through or wandering through the individual cascades is necessary until, for example, an element of a bottom cascade can be selected or appears.

Against the background mentioned, the present invention therefore sets itself the task of ensuring that the physical conditions of human perception and recording of information are no longer given or are diminished.

Description of the invention

This object is achieved by a graphical user interface (GUI) and a computer-implemented method, computer program product and use of the GUI according to the independent claims. The dependent claims describe preferred embodiments.

The invention solves the problem through an appropriate use of the available screen space, virtual or extended environment (virtual or augmented/mixed reality) for the automated display of elements of a hierarchical data structure within a graphical user interface GUI, as well as a computer-implemented method, computer program product and use of the GUI, so that the physical perception of the displayed elements of the hierarchical data structure is improved and the physical realities of human perception and absorption of information are taken into account.

In a first aspect, the invention relates to a graphical user interface (GUI) for selecting elements of a hierarchical data structure. The GUI includes a first button and one or more second buttons, with the first button enclosing the one or more second buttons. The first button is configured to refer to a first element of the hierarchical data structure when actuated. The one or more second buttons are set up to refer to a respective second element of the hierarchical data structure when actuated. The first element of the hierarchical data structure is hierarchically superior to the one or more second elements of the hierarchical data structure.

The GUI can be displayed, for example, on a screen surface and/or a touch-sensitive screen, in particular a tablet, mobile phone, smartwatch and/or laptop. This physical area of the screen can be limited by elements of an operating system. For example, the physical screen area can be reduced by the taskbar in Windows, grouping of the screen using other GUI and/or software and/or by status displays, in particular by displaying the time, connection status and battery display. Operating system can be understood as Windows, a Linux distribution, Mac OS, iOS, or Android, for example.

In turn, for example, the GUI may be displayed in a virtual or augmented environment so that the user can interact with the buttons of the GUI.

A GUI per se can be designed to define or occupy an area, for example an area or a room. Controls are placed or arranged in this area or space. A control is an element of a GUI that, for example, establishes an interaction with a user, and this element of the GUI can cause the user to provide input and/or the user can see an output of a calculation or function. Controls can be, for example, a list box, tree control, ribbon, check box, command button, label box, drop-down list box, toolbar, and/or text box. For example, a GUI includes a command button, a check box, and a text field. The user can press the command button of the GUI so that depending on the checkbox, depending on the selection, is set or not set, for example the GUI can generate a text in the text field and display it there.

In order to be able to carry out and/or calculate an action, for example as a result of an input in a GUI, the GUI can contain functions. A function can include commands or instructions that can be executed by actions related to the GUI. For example, in the action of initializing the GUI, for example for the first use of this GUI, a drop-down list box can set or fill the elements of the drop-down list box according to a data structure, for example. Another example can relate to a function that performs a calculation when a command button positioned in a GUI is pressed and, for example, an output of this calculation in a plot control positioned in the GUI, so that the output is displayed as a graph or plot in the plot control can be.

For example, a GUI can be permanently or temporarily linked or connected to a hierarchical data structure and/or a hierarchical data structure can be implemented directly in the GUI. A hierarchical data structure can contain elements whose properties and/or the content of these elements can be grouped, summarized or classified in a hierarchy. A hierarchy, in turn, can have one or more hierarchy levels, with each of the elements being able to be assigned to at least one hierarchy level.

The GUI has first and second buttons. A button can be understood to mean a control element that can be structured in such a way that it can be activated and/or selected, for example, by actuation and thus, for example, implies the execution of a function. For example and not exclusively, toolbars and command buttons and/or checkboxes can be understood as meaning. The first button encloses the second button. The second button may be arranged or positioned within the GUI such that it is arranged or positioned within the first button. In other words, the second button can be wrapped or surrounded or enclosed by the first button.

In a further exemplary aspect, instead of (full) "enclosing" a "partial enclosing" can also be used to achieve the effect of the GUI. For example, in this aspect, the first button can be the same size or larger than the second button so that even if the buttons are partially enclosed, the hierarchical order of the referenced elements is clear. In this case, for example, the second button can be shifted in relation to the first button, so that the second button extends outside of the first button.

Clicking on a button of the GUI according to the invention refers to an element of a hierarchical data structure. Actuation can be understood to mean an input operation “actuation”, which can consist, for example, of a movement gesture tapping, for example on a touch-sensitive screen. In this case, typing can be carried out by touching a finger or using a stylus.

Alternatively or additionally, the movement gesture, for example tapping, can also be performed without contact, for example, by recording the movement gesture tapping, for example by sensors, for example a motion sensor, in particular an acceleration sensor, and/or by a camera. Another form of actuation can be a click of a peripheral input device, in particular a computer mouse. To do this, the pointer (cursor) is navigated to a button and the click is performed, in particular by clicking the left mouse button. Alternatively, an actuation may be performed by selecting a button (such as moving the pointer over it) and allowing a predetermined time to elapse. This allows barrier-free operation. Alternatively and additionally, a viewing direction and/or pupil direction and/or pupil focusing and/or accommodation of the eye lens, referred to collectively as eye tracking, can be understood as an actuation with it. For example, a button can be selected or targeted and/or actuated by means of eye tracking. This can be carried out, for example, by means of appropriate sensors in a headset suitable for this purpose or, for example, by means of a suitable peripheral camera, in particular an infrared camera, located in the room where the user of the GUI is located. In addition, in cooperation with the eye tracking, a button can be actuated by corresponding eye and/or eyelid and/or eyebrow movement. This can be understood to mean, for example, one or both eyes twitching or one or both eyes blinking or lifting of one or both eyelids and/or eyebrows or a combination thereof. Actuation by voice control is also possible. Yet another form of actuation can be through thought control and/or thought focus with the will or need to want to press the button. For example, this can be performed by non-invasive electroencephalography or, for example, by an invasive type of human-machine interface, such as a brain-computer interface or neuroprosthesis.

A further input operation "actuation" can also be the virtual touching or typing, for example using a hand ray, hand light ray or a controller light ray, going on and / or diving into a button and / or a switching area of a GUI, for example within a virtual or extended environment are understood.

The hierarchical levels are arranged or structured in such a way that they meet or are subject to a ranking, i.e. a hierarchy. For example, a hierarchy level is a parent of another hierarchy level, so the parent hierarchy level generalizes the members of the lower hierarchy level. The hierarchical level below concretizes or specifies properties of the elements of the higher hierarchical level.

As such, the hierarchical data structure can be in the form of a tree structure. This tree structure includes a root, which can representatively be construed as the topmost or highest hierarchical level, so that the remaining hierarchical levels are hierarchically subordinate to it. In addition, the tree structure can contain (inner) nodes and leaves, where the root, the nodes and the leaves are connected by edges or in be related. For example, the nodes and leaves directly connected to the root by an edge form a hierarchy level.

Alternatively, the hierarchical data structure can also be represented as a graph, which can consist of nodes and edges. An element of the hierarchical data structure can be assigned to each node and the nodes can be connected by the edges in such a way that one or more hierarchical levels can be mapped.

A hierarchical alignment of the elements of the hierarchical data structure is to be understood if elements of the hierarchical data structure are in/on the same hierarchical level.

A hierarchical superposition of two elements of the hierarchical data structure is to be understood if two elements of the hierarchical data structure that are not on the same hierarchical level and are directly connected to one another by an edge or a direct path from edges. Then the element in the higher hierarchical level is hierarchically superior to the element in the lower hierarchical level. Conversely, the element in the hierarchy level below is hierarchically subordinate to the element in the hierarchy level above.

The elements of the hierarchical data structure can contain, for example, a pictorial and/or a textual representation. This pictorial and/or textual representation can be positioned on corresponding buttons of the GUI or on higher-level buttons of the GUI. The GUI comprises a first and a second button, and the first button can refer to the "media" element of the hierarchical data structure, for example. The first button can include a pictorial representation and/or the textual representation “media”. A pictorial representation can be understood to mean a symbolic, photo-realistic, pictographic and/or artistic representation by way of example.

A button can take place through an input operation “actuation” of a pictorial and/or textual representation. Alternatively or additionally, an input operation "actuation" can be performed on any point within the button.

Alternatively or additionally, the GUI can be displayed in a virtual or expanded environment, for example with two-dimensional buttons and/or three-dimensional switching areas. A hierarchically superordinate switching area can, for example, be displayed translucently, so that a hierarchically subordinate switching area can be visible within the superordinate switching area, or a plurality of hierarchically subordinate switching areas can be visible.

Alternatively or additionally, an input operation can "mark", for example by touching a point or a sub-area of a button, for example by moving the cursor to a point or sub-area of the button, by eye tracking, or by a mind control with the will/need the button touch and/or mark wanting to take place. The corresponding button can be highlighted in color or design or marked so that this button can differ from the rest.

Additionally or alternatively, the buttons can include a visual and/or textual representation. This pictorial and/or textual representation corresponds to the element of the hierarchical data structure that corresponds to the button. Alternatively, the pictorial representation can also be generated from a plurality of pictorial representations of hierarchically subordinate elements (for example by combining a plurality of product icons to form a combined category icon). For example, the input operation "actuation" can take place on a pictorial and/or textual representation of the button and/or the input operation "mark" for a corresponding marking on a pictorial and/or textual representation of the button.

The buttons of the GUI can be designed in such a way that they are in the form of command buttons. A command button can be distinguished, for example, in that it is configured in such a way that this configuration suggests a three-dimensional command button to the user of the GUI. For example, this can be produced by appropriate shading and/or color or design, so that this shading suggests a shadow cast, for example. A further embodiment of the GUI can, for example, contain an animation when the command buttons are actuated, for example that a keystroke can be displayed in animated form when it is actuated. This can be understood as a keystroke in a manner analogous to that of a computer or typewriter keyboard, which when a key is pressed by pressing on the surface of this key carries out a corresponding depression and thus, for example as the signal of an actuation can be generated.

Further embodiments of the GUI can cause the GUI to be enlarged and/or reduced by an input operation “enlarge/reduce”. The input operation “enlarge/reduce” can be understood to mean, for example, that this can be carried out by rotating a zoom wheel of a peripheral input device, in particular a computer mouse. For example, rotating the zoom wheel in one direction can incrementally zoom in on the GUI, and rotating the zoom wheel in a different direction can incrementally zoom out the GUI in individual zoom levels. In some embodiments, just placing a pointer (e.g., mouse cursor) can cause that portion of the GUI to zoom in. Alternatively or additionally, the input operation “enlarge/reduce” can be a movement gesture, for example spreading (pinch open), for example on a touch-sensitive screen or, for example, contactless by recording the movement gesture, for example by sensors, for example a movement sensor, in particular an acceleration sensor and/or by a camera. Likewise alternatively or additionally, a viewing direction and/or pupil direction and/or pupil focusing and/or accommodation of the eye lens, summarized as eye tracking, can be used. A corresponding eye and/or eyelid and/or eyebrow movement can also be combined in cooperation with the eye tracking. For example, enlarging the GUI by pulling up the eyebrows on one or both sides in combination with eye tracking can increase the size of the GUI in the area that can be determined by eye tracking and, for example, pulling down the eyebrows on one or both sides in combination with eye tracking can reduce the area GUI in the area that can be determined by eye tracking can be achieved. As an alternative or in addition, the input operation can be enlarged/reduced by thought control and/or thought focus with the will/need to enlarge or reduce the GUI, for example in a partial area or also as a whole. For example, this can be performed by non-invasive electroencephalography or, for example, an invasive type of human-machine interface, such as a brain-computer interface or neuroprosthesis. A further input operation “enlarge/reduce” can also be understood as touching and/or pulling towards oneself and/or walking onto a button and/or switching areas, for example within a virtual or expanded environment.

As a possible consequence of a partial or total enlargement or reduction of the GUI, an adaptive addition or removal of further buttons may imply. This can be understood to mean that according to the dimensions and/or the number of two-dimensional pixels or three-dimensional pixels (voxels) of the GUI on an output device, such as a screen, and/or the intensity of the enlargement or reduction, for example if there is sufficient space within the GUI and/or if physical conditions of human perception and reception of information are no longer available or reduced as a result, one or more buttons can be added or, for example, if there is insufficient space within the GUI and/or physical conditions of human perception and reception of information thereby are no longer given or diminished one or more buttons can be removed. For example, in one embodiment, the GUI may have a first button that encloses a second button and the first button references a first element of a hierarchical data structure and the second button references a second element of a hierarchical data structure, with the first element being a hierarchical parent of the second include. With appropriate enlargement in the area of the first button, the GUI can add a third button, where the first button borders the third button and the third button refers to a third element of a hierarchical data structure and the third element can be hierarchically equivalent to the second element. Alternatively, a corresponding enlargement in the area of the second button, the GUI can add another third button, where the second button borders the other third button, the other third button refers to another third element of a hierarchical data structure, and the other third element to the second element hierarchically is subordinate.

Another embodiment may include an additional first button in addition to the first and second buttons. The further first button can be arranged separately from the first button and, when actuated, refer to a further first element of the hierarchical data structure, which can be hierarchically equivalent to the first element of the hierarchical data structure.

Alternatively or additionally, further embodiments of the GUI can have a plurality of ers first and second buttons. The plurality of first buttons can be separate from each other, for example. When actuated, each button of the plurality of first buttons can refer to an element from a plurality of first elements of a hierarchy level of a data structure. For example, the plurality of first buttons can include three first buttons that refer to the elements “media”, “clothing” and “furniture” of a hierarchy level of the hierarchical data structure. The plurality of second buttons can be surrounded by the associated one of the first buttons, for example. The associated first button with regard to one or more second buttons can be understood to mean that first button whose (first) element of the hierarchical data structure is connected to the (second) element of the hierarchical data structure of the second button by an edge or a direct path. The (second) element of the hierarchical data structure of the second button is in a lower hierarchy level with respect to the (first) element of the hierarchical data structure of the first button, so that the (first) element of the hierarchical data structure of the first button is hierarchical to the (second) element of the hierarchical data structure is parent to the second button.
This hierarchical parent may be referred to as the parent (or grandparent, etc.) node. An example of the selection of second buttons that refer to the elements "DVDs" and "CDs" of the hierarchical data structure is the associated first button, the one that refers to the element "Media" of the hierarchical data structure.

By way of example, actuation can be understood to mean the input operation “actuation”. Additionally or alternatively, the input operation “mark” can mark the respective button.

In another embodiment, the GUI may include a fourth button in addition to the first and second buttons or in addition to the first, second, and third buttons. The fourth button can be arranged inside the first button. The fourth button can be embodied as Command Buttons and the second button can be arranged separately from the second button. The fourth button can refer to a fourth element of the hierarchical data structure when actuated.

Another embodiment, the GUI may include a fifth button in addition to the first and second buttons, or in addition to the first, second, and third buttons, or in addition to the first, second, third, and fourth buttons. The fifth button can be located inside the second button. In an analogous manner, the fifth button can be set up to refer to a fifth element of the hierarchical data structure when it is actuated, and the fifth element of the hierarchical data structure can be hierarchically subordinate to the second element of the hierarchical data structure.

• Das Verfahren umfasst ein Anzeigen einer GUI nach dem ersten Aspekt, wobei die GUI nicht durch die beschriebenen Ausführungsformen beschränkt ist, sondern vielmehr auf ein funktionsgemäßes Verständnis der Offenbarung gerichtet sein kann. Unter Anzeigen kann verstanden werden, dass die GUI beispielsweise auf einem Bildschirm, insbesondere einem berührungsempfindlichen Bildschirm, oder beispielsweise als Hologramm beispielsweise in einer virtuellen oder erweiterten Umgebung (virtual oder augmented/mixed reality) dargestellt wird.

In a second aspect, the invention relates to a computer-implemented method for performing the following steps:

• The method includes displaying a GUI according to the first aspect, where the GUI is not limited by the described embodiments but rather may be directed to a functional understanding of the disclosure. Displays can be understood to mean that the GUI is displayed, for example, on a screen, in particular a touch-sensitive screen, or for example as a hologram, for example in a virtual or augmented environment (virtual or augmented/mixed reality).

The method additionally includes receiving an input operation for actuating one of the buttons of the displayed GUI (input operation actuation) and/or an input operation for at least partially enlarging the GUI (input operation zoom in/out) and/or an input operation for marking one of the buttons of the displayed GUI (mark input operation) perform. Receiving can mean, for example, receiving machine commands (instructions), digital or analog control commands or assembler commands, for example for a microprocessor, a system-on-a-chip (SoC) or a processor with an application-specific instruction set (ASIP) or an application-specific integrated circuit (ASIC ) are understood.

The method includes navigating the hierarchical data structure to the element of the hierarchical data structure to which the pressed button refers.

The invention has the beneficial effect of expediently utilizing the available screen space, virtual or augmented environment (virtual or augmented/mixed reality) for the automated display of elements of a hierarchical data structure within a graphical user interface (GUI), as well as a computer-implemented method, computer program product and Using the GUI so that the physical perception and recording of Information of the shown elements of the hierarchical data structure is improved. The GUI makes it possible to display several cascades/hierarchy levels at once or to skip cascades/hierarchy levels.

character list

• 1 schematic representation of a GUI according to an embodiment;
• 2 schematic representation of a hierarchical data structure;
• 3 schematic representation of a GUI according to an embodiment;
• 4 schematic representation of a hierarchical data structure;
• 5 schematic representation of a GUI according to an embodiment;
• 6 schematic representation of a hierarchical data structure;
• 7 schematic representation of a GUI according to the embodiment shown in 5 ;
• 8th schematic representation of a GUI according to an embodiment.

Description of exemplary embodiments

1 discloses an embodiment of a GUI 100 for selecting elements of a hierarchical data structure. This schematically illustrated embodiment includes three buttons 112 and 122 and 124 indicated by rectangles. These are enclosed by one another in such a way that a hierarchy is depicted on the basis of this arrangement of the rectangles relative to one another. That is, buttons enclosed by another button imply or suggest hierarchical subordination to the other hierarchically superior button. Specifically, the two (second) buttons 122 and 124 are surrounded by the (first) button 112 .

The GUI 100 is designed to be displayed and operated by a user. In an illustrative example, the GUI is used to navigate through the products in an online shop. For this purpose, the GUI 100 can be displayed on a website, for example. By pressing the buttons, the user can navigate through the products.

2 discloses a schematic representation of a hierarchical data structure 200. In the example shown, the hierarchical data structure is a structure in which the products of the online shop are stored. This hierarchical data structure is represented as a tree structure comprising a root 202, an interior node 212, and two leaves 222 and 224. Elements 202, 212, 222 and 224 are connected by edges reflecting their hierarchy.

The elements of the hierarchical data structure in this embodiment are "Products", "Media", and "DVDs". These are assigned to the root 202, the inner node 212 and the leaves 222 and 224 as follows: the root 202 corresponds to the "Products" element, the node 212 corresponds to the "Media" element, the leaf 222 corresponds to the "DVDs" element and that Sheet 224 corresponds to the "Books" element of the hierarchical data structure. Further elements (not shown) can represent, for example, the individual products of the online shop, for example a large number of DVDs on offer, which are subordinate to element 222 as leaves.

Three hierarchical levels are identified from this tree structure. The hierarchically uppermost and highest hierarchical level 201 includes the element 202 “products” of the hierarchical data structure. The hierarchy level 211, which is arranged hierarchically below the hierarchy level 201, includes the element 212 “media”. The hierarchy level 221, which is arranged hierarchically below the hierarchy level 211, includes the elements 222 “DVDs” and 224 “books”. For example, element 212 is connected to element 202 by an edge. Element 202 is hierarchically superior to element 212 such that element 212 is hierarchically superior to element 202 . For example, elements 222 and 224 are each connected by an edge to the same hierarchically superior element 212, so that elements 222 and 224 are hierarchically siblings.

In a synopsis of 1 and 2 these illustrate the links between the buttons in 1 and the elements of the hierarchical data structure 200 in 2 . In detail, button 112 references element 212 of the hierarchical data structure, button 122 references element 222 of the hierarchical data structure, and button 124 references element 224 of the hierarchical data structure.

Hierarchical data structure element 212 is hierarchically superior to element 222 and element 224 of the hierarchical data structure. Likewise, button 112 encloses buttons 122 and 124.

The GUI 100 of the 1 with the hierarchical data structure 200 of 2 is used for navigating in the online shop with the elements "media", "DVDs" and "books". By pressing the button 112, a corresponding website from the online shop is displayed, which shows the user all the products in the “media” elements, such as “DVDs” and “books”. Alternatively, the user may directly actuate button 122 such that element "media" is referenced and a web page of products associated with that element "media" is displayed accordingly. Again alternatively, in the same GUI 100, the user can directly actuate the button 124, so that the "Books" element is referred to and accordingly a web page of products associated with this "Books" element is displayed. This allows space-saving use of the screen area and simple navigation with just a few input operations to the desired element or product.

3 discloses an embodiment of a GUI 300 for selecting elements of a hierarchical data structure comprising a plurality of first buttons and a plurality of second buttons; each of the second buttons being surrounded by one of the first buttons. The first buttons are set up to refer to a first element of the hierarchical data structure when actuated. The second buttons are designed to refer to a second element of the hierarchical data structure when actuated. The first elements of the hierarchical data structure are hierarchically superior to the one or more second elements of the hierarchical data structure.

This schematically illustrated embodiment includes eight buttons 302, 312, 314, 316, 318, 322, 324, 326 and 328, each represented by rectangles. In detail, this embodiment includes four first buttons 312, 314, 316 and 318 and four second buttons 322, 324, 326 and 328.

4 discloses a schematic representation of a hierarchical data structure 400. This hierarchical data structure is represented as a tree structure comprising a root 402, two interior nodes 412, 416, six leaves 422, 424, 426, 414, 428, 418, and edges. The elements of the hierarchical data structure in this embodiment are "Products", "Media", "Clothes", "Furniture", "Stationery", "DVDs", "Books", "CDs" and "Sofas". These are assigned to the root 402, the two inner nodes 412, 416 and the five leaves 424, 426, 414, 428, 418 as follows: The root 402 corresponds to the "Products" element, the node 412 to the "Media" element, the leaf 414 to the item "Clothing", node 416 to the item "Furniture", leaf 418 to the item "Stationery", node 422 to the item "DVDs", leaf 424 to the item "Books", leaf 426 to the item "CDs". ' and sheet 428 to the 'sofas' element.

Based on this tree structure, three hierarchical levels can be identified. The hierarchically uppermost and highest hierarchical level 401 includes the “products” element of the hierarchical data structure. The hierarchy level 411, which is arranged hierarchically below the hierarchy level 401, includes the elements of the hierarchical data structure “media”, “clothing”, “furniture” and “stationery”. The hierarchy level 421, which is arranged hierarchically below the hierarchy level 411, includes the elements of the hierarchical data structure “DVDs”, “books”, “CDs”, and “sofas”. For example, element 426 is connected to element 412 of hierarchical data structure 400 by an edge, and elements 426 and 412 are on different hierarchical levels such that element 426 is hierarchically subordinate to element 412 . In contrast, element 428 is not hierarchically subordinate to element 412 because there is no edge or direct path of edges connecting these two elements.

In a synopsis of 3 and 4 these illustrate the links between the buttons in 3 and the elements of the hierarchical data structure 400 in 4 . In detail and analogous to the synopsis of the 1 and 2 , buttons 302, 312, 314, 316, 318, 322, 324, 326, and 328 refer to elements 402, 412, 414, 416, 418, 422, 424, 426, and 428 of the hierarchical data structure, in that order.

The GUI 300 is designed to be displayed and operated by a user. In an illustrative example, the GUI is used to navigate through the elements “media”, “clothing”, “furniture”, “stationery”, “DVDs”, “books”, “CDs” and “sofa” in an online shop. For this purpose, the GUI 300 can be displayed on a website, for example. With a single touch of a button of the GUI 300, the user can select all products of the online store of the elements "media", "clothing", "furniture", "stationery" and with the same GUI 300 the products of the category "DVDs", " Books", "CDs" in the "Media" category and the products in the "Sofas" category in the "Furniture" category, so that the majority of elements of the data structure enable the physical conditions of human perception and information absorption.

Compared to the GUI 100 shown in 1 and the GUI 300 shown in 3 , points the GUI 300 has several first buttons. Likewise, the GUI 300 includes two hierarchical levels. Corresponding to the hierarchical data structure, the first buttons of the GUI 300 may include one or more second buttons.

5 discloses an embodiment of a GUI 500 for selecting elements of a hierarchical data structure, which in addition to the GUI 300 further comprises: one or more third buttons that are configured to refer to a respective third element of the hierarchical data structure when actuated; and wherein each of said third buttons is surrounded by one of said second buttons whose second element is hierarchically superior to said third element.

In detail, the GUI includes a third button 332 that is surrounded by the (second) button 322 . This implies a further hierarchical level. The referenced item of the third button 332 is hierarchically subordinate to the referenced item of the button 322 .

6 discloses a schematic representation of a hierarchical data structure 600. This hierarchical data structure corresponds to the hierarchical data structure 400 of FIG 4 , with one more element, namely 432, added. Overall, the tree structure includes a root 402, three nodes 412, 416, 422, seven leaves 424, 432, 426, 414, 428, 418, 432 and edges. The elements of the hierarchical data structure are "Products", "Media", "Clothes", "Furniture", "Stationery", "DVDs", "Books" . . . in this ^embodiment . "CDs", "Sofas" and "Documentaries". These are assigned to the root 402, the three inner nodes 412, 416, 422 and the six leaves 424, 432, 426, 414, 428, 418 as follows: The root 402 corresponds to the "Products" element, the node 412 to the "Media" element ', leaf 414 to the element 'clothes', node 416 to the element 'furniture', leaf 418 to the element 'stationery', node 422 to the element 'DVDs', leaf 424 to the element 'books', leaf 426 the element "CDs", sheet 428 corresponds to the element "sofas" and sheet 432 corresponds to the element "documentation".

Four hierarchical levels can be identified using this tree structure. The hierarchically uppermost and highest hierarchical level 401 includes the element 402 "products" of the hierarchical data structure 600. The hierarchical level 411, which is arranged hierarchically below the hierarchical level 401, includes the elements 412, 414, 416, 418 "media", "clothing". , "furniture" and "stationery" of the hierarchical data structure. The hierarchy level 421, which is arranged hierarchically below the hierarchy level 411, includes the elements 422, 424, 426, 428 “DVDs”, “books”, “CDs”, and “sofas” of the hierarchical data structure. The hierarchy level 431, which is arranged hierarchically below the hierarchy level 421, includes the element 432 “documentation” of the hierarchical data structure.

In a synopsis of 5 and 6 this reveals a correlation between the referenced elements of the buttons in 5 and the elements of the hierarchical data structure 600 in 6 , as already mentioned in the synopsis of 3 and 4 was shown. In addition to the overview of 3 and 4 the button 332 refers to the element 432 of the hierarchical data structure 600. The navigation takes place, as already mentioned above in connection with 1 and 2 described, for example by clicking the buttons to navigate through the online shops. The nesting of the buttons from a large number of hierarchical levels enables the user to improve the physical conditions of human perception and the absorption of information due to the large number of hierarchical levels of the data structure and/or the large number of elements in the data structure. In this way, the user can jump over several hierarchical levels in the same GUI 500 with a single operation and all elements of the hierarchical data structure 600 are displayed to the user.

Compared to the GUI 100 shown in 1 and the GUI 500 shown in 5 , the GUI 500 has several first buttons and another hierarchical level.

In addition to the GUI 500, a further embodiment that is not shown comprises a further button 302 which refers to the element 402 of the hierarchical data structure 600. The button 302 thus directly encloses the buttons 312, 314, 316 and 318 so that they are directly adjacent to the button 302.

7 discloses an embodiment of a GUI 700. This comprises a total of five buttons 712, 724, 726, 722 and 732. These five buttons correspond to buttons 312, 324, 326, 322 and 323 in 5 and are in this embodiment, 7 , executed as command buttons. Command button 712 encloses the remaining four command buttons 724, 726, 722, and 732. In addition, command buttons 722, 726, and 724 are directly adjacent to command button 712. FIG. Command button 722 encloses command button 732.

7 FIG. 11 further discloses for the five command buttons 712, 724, 726, 722 and 732 a respective textual representation 712B, 724B, 726B, 722B and 732B. This is disclosed in conjunction with the embodiments in FIGS 5 , 6 and 7 as follows: 712B includes the textual representation "Media", 724B includes the textual representation "Books", 726B includes the textual representation "CDs", 722B includes the textual representation "DVDs" and 732B includes the textual representation "Documentation".

The synopsis with the embodiments disclosed in 5 , 6 and 7 further shows that the element "media" 412 of the hierarchical data structure 400, the elements "DVDs" 422, "CDs" 424, "books" 426 and "documentation" 432 of the hierarchical data structure 400 are hierarchically superordinate. In addition, the hierarchy level 421 includes the elements “DVDs” 422, “CDs” 424, “books” 426 of the hierarchical data structure 400, with this hierarchy level 421 being directly or directly hierarchically subordinate to the hierarchy level 411. The hierarchy level 431 includes the element “documentation” 432 of the hierarchical data structure, with the hierarchy level 431 being directly or directly hierarchically subordinate to the hierarchy level 421 . The hierarchy level 411 includes the "media" element 412 of the hierarchical data structure, so that the button 712 that refers to the "media" element 412 of the hierarchical data structure, the remaining buttons 722, 726, 724 and 732 of the embodiment in FIG 7 encloses. The close proximity of buttons 726, 724, and 732 enclosed by button 712 reflects the hierarchical data structure. The button 732 that refers to the "Documentation" 432 element of the hierarchical data structure is surrounded by the button 722 that refers to the "DVDs" 422 element of the hierarchical data structure, which is defined by the hierarchical subordination of the element "Documentation" 432 of the hierarchical Data structure is implied with respect to the element "DVDs" 422 of the hierarchical data structure.

7 further discloses a pictorial representation 724C, 726C, 722C and 732C for the four command buttons 724, 726, 722 and 732, which pictorial representations are shown in FIG 7 are to be understood as placeholders. These pictorial representations correspond to the elements of the hierarchical data structure. For example, 722C includes a pictorial representation, symbol, pictorial representation, and/or photograph of a “DVD” and/or multiple “DVDs”. Another embodiment, not shown, includes a pictorial representation for the command button 712 as well. Alternatively, instead of one of the pictorial representation 722C in the form of a generic "DVD", a combined representation of several specific products from this category (eg an arrangement of a plurality of popular DVD products) can also be used.

8th discloses another embodiment of a GUI 800 for selecting elements of a hierarchical data structure. The GUI 800 includes several first buttons 801, 802, 803 and 804.

The first button 801 encloses several second buttons 811, 812, 813. Likewise, the further first buttons 802, 803 and 804 can enclose further second buttons (not shown). As in the exemplary embodiments described above, each of the buttons shown is set up to refer to a corresponding element of the hierarchical data structure when it is actuated.

According to the embodiment of 8th , the GUI 800 is configured so that an enlargement or reduction of the GUI can be effected by an input operation “enlarge/reduce”.

In the example shown, the input operation "zoom in/out" can be performed, for example, by rotating a zoom wheel of a peripheral input device (e.g. computer mouse). Thus, by rotating the zoom wheel in one direction, the GUI can be incrementally enlarged in individual zoom levels, and by rotating the zoom wheel in another direction, the GUI can be incrementally reduced in individual zoom levels.

Specifically, the input operation “enlarge” can be used to enlarge the GUI 800 such that instead of the full GUI 800 only the partial GUI 891 is displayed.

According to the GUI 800, the sub-GUI 891 only includes the first button 801 with its second buttons 811, 812, 813 and a marginal portion of the button 802.

After performing the “enlarge” input operation on the partial GUI 891, this is displayed as GUI 810. The GUI 810 also has one or more first buttons, namely the button 801 and part of the button 802 . The first button 801 encloses the second buttons 811, 812, 813.

By a further actuation of the "enlarge" input operation, the GUI 810 can be enlarged in such a way that instead of the full Gen GUI 810 only the partial GUI 892 is displayed. According to the GUI 810, the sub-GUI 892 only includes the second button 811 and marginal sub-areas of the buttons 812, 813.

After performing the “enlarge” input operation on the partial GUI 892, this is displayed as GUI 820. In the GUI 820, the (second) button 811 encloses several (third) buttons 821, 822, 823.

Alternatively, in this embodiment of the GUI 820, the button 811 can be construed as a "first" button that encloses multiple "second" buttons.

These buttons 821, 822, 823 were not yet displayed in the (not enlarged) representation of the GUI 800. The successive enlargement (or reduction) starting from the GUI 800 thus allows an adaptive addition (or removal) of further buttons. This allows the amount of buttons displayed to be adapted to the physical realities of human perception, taking into account the available screen space.

With a corresponding enlargement in the area of the first button 801, the GUI 800, 810, 820 can thus add one or more third buttons 821, 822, 823, the third buttons being surrounded by corresponding first/second buttons. The third buttons refer to corresponding third elements of the hierarchical data structure.

In this way, it is possible to navigate through data structures with a large number of hierarchical levels.

Furthermore, user interfaces such as those described above allow the buttons displayed to be individualized: For example, the buttons 821, 822, 823 can each refer to a corresponding element on the relevant hierarchy level of the data structure, with these elements being selected from a large number of a large number of elements. The selection can be predetermined (e.g. by fixed programming), can be determined dynamically (e.g. the currently most popular or best-selling product from a category) and/or can be user-individualized (e.g. a product suggestion from this category based on previous purchases by the user) .

QUOTES INCLUDED IN DESCRIPTION

This list of documents cited by the applicant was generated automatically and is included solely for the better information of the reader. The list is not part of the German patent or utility model application. The DPMA assumes no liability for any errors or omissions.

Patent Literature Cited

• US 2011/0202877 A1 [0008, 0010]

Claims (14)

Comprising a graphical user interface, GUI, for selecting elements of a hierarchical data structure a first button; one or more second buttons; whereby the first button encloses the one or more second buttons; the first button configured to refer to a first element of the hierarchical data structure when actuated; the one or more second buttons are arranged to refer to a respective second element of the hierarchical data structure when actuated; and the first element of the hierarchical data structure is hierarchically superior to the one or more second elements of the hierarchical data structure. GUI after claim 1 , wherein the plurality of second buttons are arranged separately from one another and the one or more second elements are hierarchically siblings. GUI after claim 1 or 2 , wherein the hierarchical data structure is in the form of a tree structure comprising a plurality of interior nodes, a plurality of leaves, a root and a plurality of edges, the first element being one of the interior nodes or the root and/or each of the second elements being one of the leaves or one of the interior nodes is. GUI after one of the Claims 1 until 3 , wherein the elements of the hierarchical data structure are each linked to a pictorial and/or textual representation, wherein a button has the pictorial and/or textual representation which is linked to the element to which the respective button refers. GUI after claim 4 , wherein the buttons include the corresponding images and/or the texts from the hierarchical data structure. GUI after one of the Claims 1 until 5 , actuation of the buttons being an input operation, the input operation being a movement gesture tap and/or a click of a peripheral input device, in particular a computer mouse; and/or line of sight and/or thought control. GUI after one of the Claims 1 or 6 , where the buttons are command buttons. GUI after one of the Claims 1 until 7 , wherein the GUI has one or more other first buttons each with one or more other second buttons in addition to the first button. GUI after one of the Claims 1 until 8th , further comprising: one or more third buttons configured to refer to a respective third element of the hierarchical data structure when actuated; and wherein each of the third buttons is surrounded by one of the second buttons, the second element of which is hierarchically superior to the respective third element of the hierarchical data structure. GUI after one of the Claims 1 until 9 , wherein the GUI is set up for an at least partial enlargement by an input operation, in particular wherein the input operation comprises: a rotation of a zoom wheel of a peripheral input device, in particular a computer mouse; a movement gesture spreading, pinch open; or a line of sight or a mind control; and the GUI is arranged to present, in response to the enlargement, one or more further buttons arranged to refer to one or more further hierarchical children of the hierarchical data structure when actuated. A computer-implemented method for displaying a GUI according to any of Claims 1 until 10 on a screen, in particular a touch-sensitive screen, or in a virtual or augmented environment, virtual or augmented/mixed reality; - receiving an input operation for actuating one of the buttons of the displayed GUI and/or an input operation for at least partially enlarging the GUI; and - navigating, in the hierarchical data structure, to the element of the hierarchical data structure to which the activated button refers. procedure after claim 11 , further comprising: - displaying, in response to the navigating, another GUI after one of the Claims 1 until 10 , based on the element of the hierarchical data structure navigated to. Computer program product comprising program code adapted to, when executed in a computing device, which Steps of a method according to claim 11 or 12 to perform. Using the GUI after one of the Claims 1 until 10 for displaying buttons on a screen, in particular a touch-sensitive screen of a portable electronic device, in a virtual or augmented environment, virtual or augmented/mixed reality.

Images