WO2017074333A1

WO2017074333A1 - Adjusting presentation of a user interface

Info

Publication number: WO2017074333A1
Application number: PCT/US2015/057727
Authority: WO
Inventors: William J. Allen; Joshua Hailpern; Ronald CALVO ROJAS; Edison Josuee ROMERO UMANA; Mario Octavio JIMENEZ RIVAS; Sebastian ALVAREZ
Original assignee: Hewlett Packard Enterprise Development Lp
Priority date: 2015-10-28
Filing date: 2015-10-28
Publication date: 2017-05-04

Abstract

Example implementations relate to a user interface (UI). For example, different ranges of values of a variable of a constraint correspond to different templates of multiple templates each specifying a respective arrangement of the UI. Based on the received value of the variable, a template of the plurality of templates is selected. The UI is presented using an arrangement according to the selected template. After the presenting of the UI, in response to a variation in value of the variable that stays within the range of values of the variable for the selected template, the arrangement of the UI according to the selected template is maintained, and a presentation of the UI is adjusted according to the variation in value of the variable.

Description

ADJUSTING PRESENTATION OF A USER INTERFACE

Background

[0001 ] Program code that includes machine-readable instructions (e.g. an application, an operating system, firmware code, etc.) can present a user interface (Ul) through which a user can interact with the program code. The Ul can include various control elements that can be selected by the user to control operation of the program code. In addition, the Ul can present information related to the program code, such as information produced by the program code during operation, or other information.

Brief Description Of The Drawings

[0002] Some implementations are described with respect to the following figures.

[0003] Fig. 1 is a block diagram of an example electronic device, according to some implementations.

[0004] Figs. 2 and 3A-3D illustrate various different example arrangements of user interfaces (Uls) provided by an elastic Ul framework, according to some implementations.

[0005] Fig. 4 is a flow diagram of an example process, according to some implementations.

[0006] Fig. 5 is a block diagram of an example electronic device, according to further implementations.

Detailed Description

[0007] When a user interacts with a user interface (Ul), the context of the user interaction may change. For example, the user may resize a window in the Ul. As another example, the user may change devices, such as changing from using a desktop computer to display the Ul to using a smart phone to display the Ul. This change in electronic device can result in a change in a size of a display screen available to display the Ul. As a further example, the ambient light condition may change (e.g. the ambient light around the electronic device displaying the Ul may transition from a higher ambient light condition to a lower ambient light). The size of a Ul window, the type of electronic device, and the ambient light condition are examples of variables that can affect how a Ul is to be presented. "Presenting" a Ul can refer to rendering the Ul for display. There can be other variables that affect how the Ul is to be presented, as discussed further below.

[0008] In some cases, it may be possible to adjust a specific characteristic of a Ul in response to a change in a variable. For example, as the width of a Ul window narrows (where the width is an example of a variable), the layout (where the layout is an example of a characteristic of the Ul) of information content displayed in the Ul window can be changed (e.g. reflow the information content in a narrower column for display). However, as a value of a variable that may affect presentation of a Ul varies across a wider range, merely reflowing the information content of the Ul may not produce a desirable user experience, such as when a portion of the information content is cut off and becomes no longer visible.

[0009] In accordance with some implementations of the present disclosure, an elastic Ul framework is provided that accommodates changes in variables of a constraint across a wider range. The elastic Ul framework can include techniques and/or mechanisms that provide for elastic adjustment of a Ul in response to changes in the constraint. An elastic adjustment of a Ul can refer to a gradual or incremental change of the Ul in response to change in value of a variable, or alternatively, in response to changes in values of multiple variables.

[0010] A constraint can include a variable that affect presentation of a Ul in a display. In other examples, a constraint can include a set of variables that affect presentation of the Ul in the display. The constraint can be associated with multiple templates, where each template specifies a respective different arrangement of the Ul. An "arrangement" of a Ul can refer to an ordering of multiple components of the Ul, a visibility of the multiple components (which specifies whether each respective component is visible, hidden, or partially hidden), a characteristic of each component, and so forth.

[001 1 ] A component can refer to any separately definable portion of the window in which information content can be presented. As an example, a component can be a sub-window within a larger window of a Ul. As another example, a component can include a control button, a menu, a text element, an entry field, and so forth.

[0012] In some implementations, a template can include a style or a set of styles for a component, or alternatively, for multiple components of a window in the Ul. A window can refer to a region of the Ul in which information content can be displayed. A window can include a component, or alternatively, can include multiple

components. If the window of the Ul includes multiple components, then multiple styles are provided in the set of styles of each respective template.

[0013] In some examples, a style of a template can be according to a style sheet language, such as the Cascading Style Sheets (CSS) language, the Extensible Style sheet Language (XSL) language, or other language. A style sheet language expresses the presentation of a document, such as a document written according to a markup language that defines the various components of the Ul 1 10. Examples of markup languages include the Hypertext Markup Language (HTML), the Extensible Hypertext Markup Language (XHTML), and so forth.

[0014] Examples of characteristics of a component that can be adjusted using the elastic Ul framework can include any or some combination of the following: a component size, a brightness, a font of text, a size of an image, a size of a container in which information content is presented, a color, a layout of information content, and so forth. A component size can refer to a width, height, or other dimension of a component. A brightness can refer to how brightly information content in a component is displayed. A font can refer to a size and/or style of font of text in a container. A size of an image can refer to a size of an image element (e.g. size of an icon). A size of a container can refer to a size of a structure that is used to hold information content to be displayed (the container can have a width and/or height that can be adjusted as a component changes in size. A color can refer to a color scheme, including a color, or alternatively, multiple colors, used by a component. A layout of information content can refer to how the information content is presented (e.g. the information content is to be displayed within a column of a specified width, such that a change in the column width can cause the information content to be reflowed to fit within the changed column width). In further examples, there can be additional or alternative characteristics.

[0015] The multiple templates are associated with respective different ranges of values of at least one variable of the constraint. As the constraint changes (i.e. the value of a variable of the constraint changes or the values of multiple variables of the constraint change), the presentation of an elastic Ul can be modified accordingly. For example, if the change in the constraint causes the value of the at least one variable to transition from being in a first range of values (corresponding to a first template) to a second range of values (corresponding to a second template), then the presentation of the Ul can change from an arrangement according to the first template to an arrangement according to the second template.

[0016] However, if the constraint changes such that the value of the at least one variable stays within a given range that corresponds to a current template that governs presentation of the elastic Ul, then the elastic Ul can change at least one characteristic of the Ul within bounds specified by the current template, while maintaining the arrangement according to the current template. However, as the constraint changes in value to fall outside the given range, then the elastic Ul can be presented using another template.

[0017] Fig. 1 is a block diagram of an example electronic device 100 that includes a processor 102 that is coupled to a storage medium 104 and a display 106. Although just one processor 102 and one storage medium 104 is shown in Fig. 1 , it is noted that the electronic device 100 can include multiple processors and/or multiple storage media in other examples. A processor can refer to a

microprocessor, a core of a multi-core processor, a microcontroller, a programmable gate array (PGA), an application-specific integrated circuit (ASIC), or other processing hardware. The elastic Ul framework according to some implementations can be implemented using processing hardware, such as the processor(s) 102, or can be implemented as a combination of processing hardware and machine- readable instructions executable on the processing hardware.

[0018] Examples of the electronic device include a desktop computer, a notebook computer, a tablet computer, a smart phone, a game appliance, a television set-top box, a wearable device (e.g. smart watch, smart eyeglasses, etc.), a vehicle, or any other type of electronic device.

[0019] Although Fig. 1 shows the display 106 as being part of the electronic device 100, it is noted that in other examples, the display 106 can be external of the electronic device 100, and in some cases may be coupled to the electronic device 100 over a network, such as a local area network (LAN), a wide area network (WAN), the Internet, a wireless network, and so forth.

[0020] The storage medium 104 stores multiple templates 108 , where each template specifies a respective different arrangement of a Ul 1 10 that can be presented for display at the display 106.

[0021 ] As shown in Fig. 1 , the processor 102 can receive a constraint value 1 12. As noted above, a constraint can include one variable or alternatively, multiple variables. Thus, a "constraint value" can refer to a value of a variable of the constraint, or alternatively, values of multiple variables of the constraint. The constraint value 1 12 can be received from at least one source, where at least one source can refer to a source, or alternatively, to multiple sources.

[0022] The templates 108 are associated with respective different value ranges of the constraint value 1 12. A value range includes a collection of values of at least on variable of the constraint. A first template 108 corresponds to a first value range of the constraint value 1 12, a second template corresponds to a second value range of the constraint value 1 12, and so forth. In examples where the constraint includes multiple variables, each variable can be associated with respective different value ranges that correspond to the different templates. In such cases, the processor 102 considers the respective different values of the multiple variables of the constraint to select one of the templates 108 according to which value ranges the respective variables fall into.

[0023] Examples of a variable of a constraint can include any of the following: a size of a window of a U I, a size of a display screen, a type of electronic device, a location of the electronic device, a level of ambient light, a speed of the electronic device, a vibration level of the electronic device, a security level of information content, and a characteristic of a user of the electronic device.

[0024] For example, a monitoring agent can monitor a width or other dimension of a window of the Ul 1 10. The monitoring agent that is able to monitor the width or other dimension (e.g. aspect ratio) of the window of the Ul 1 10 can be part of a program code (including machine-readable instructions) that presents the Ul 1 10, such as an application, an operating system, firmware, and so forth.

[0025] The monitoring agent can also determine a size of a display screen, such as by accessing configuration data stored in the electronic device 100. The configuration data can include various configuration parameters, where one of the configuration parameters can indicate a size of the display screen. As another example, the monitoring agent can determine a type of the electronic device 100, which can be accomplished by accessing a configuration parameter of configuration data stored in the electronic device 100.

[0026] A location of the electronic device 100 can be determined from a locating agent in the electronic device 100, where the locating agent can include a global positioning system (GPS) receiver that can provide coordinates of the location of the electronic device, or a cellular network-based location mechanism that can determine the location of the electronic device 100 using triangulation with cellular base stations or wireless access network nodes. As an example, if the constraint value 1 12 indicates that the electronic device 100 is located at a work location of a user, then the processor 102 can present the elastic Ul 1 10 in a first manner (e.g. according to a first template). However, if the constraint value 1 12 indicates that the electronic device 100 is located outside a work location of a user, then the processor 102 can present the elastic Ul 1 10 in a different manner (e.g. according to a second template).

[0027] The level of ambient light around the electronic device 100 can be indicated by the output of a light sensor of the electronic device 100. If the ambient light is low, then the processor 102 can select a template or adjust a characteristic of the Ul 1 10 such that information content is more visible (e.g. select the template or adjust the characteristic to increase the brightness, increase the font size, reduce the number of visible components, etc.).

[0028] The speed of the electronic device 100 can be indicated using the output of a sensor, or alternatively, from multiple sensors of the electronic device 100.

Such sensor(s) can include an accelerometer, a locating agent such as a GPS receiver or a cellular network-based location mechanism, a gyroscope, a compass, and so forth. In some cases, a user may be stationary while using the electronic device 100. In other cases, the user may be moving at a higher speed, such as when the user is walking or jogging, which may make reading more difficult. If the electronic device 100 is stationary or has a speed less than a specified speed threshold, then the processor 102 can select a template or adjust a characteristic of the Ul 1 10 such that more information content is visible (e.g. select the template or adjust the characteristic to reduce the font size, increase the number of visible components, etc.). On the other hand, if the electronic device 100 is moving at a speed that exceeds the specified speed threshold, then the processor 102 can select a template or adjust a characteristic of the Ul 1 10 such that information content is more readable (e.g. select the template or adjust the characteristic to increase the brightness, increase the font size, reduce the number of visible components, etc.).

[0029] The vibration level of the electronic device 100 can be indicated using an accelerometer in the electronic device 100. If the electronic device 100 is vibrating, then that can indicate that the user is in an environment (such as in a car that is moving) that can make reading information content more difficult. A higher vibration level of the electronic device 100 can also indicate that the user of the electronic device 100 may have a disability. Thus, in response to detecting a higher vibration level (that exceeds a specified vibration threshold), the processor 102 can select a template or adjust a characteristic of the U I 1 10 such that information content is more readable.

[0030] The security level of information content presented by the U I 1 10 can be determined based on metadata (e.g. tags) associated with the information content. The metadata can indicate whether the associated information content has a higher security level (e.g. confidential business information of an enterprise, secret information of a government agency, personal information such as social security number, passwords, user names, and so forth of a user, etc.). In response to detecting that information content of a higher security level is being presented by the Ul 1 10, the processor 102 can select a template or adjust a characteristic of the Ul 1 10 such that information content is made less visible to other people who may be around the user (e.g. the processor 102 can select a template or adjust a

characteristic to reduce a font size, reduce a size of an image element, reduce a brightness, etc.).

[0031 ] The characteristic of a user of the electronic device 100 can be

determined based on login information of the user (entered by the user to log into the electronic device 100), biometric identification of the user based on a biometric sensor (e.g. fingerprint sensor, facial recognition application, etc.) of the electronic device 100. The electronic device 100 can store various user profiles for different users, where these profiles can specify preferences of the user with respect to the Ul 1 10. For a first user, the processor 102 can present the Ul 1 10 using a first template or a particular characteristic, and for a second user, the processor 102 can present the Ul 1 10 using a second template or a different characteristic.

[0032] Fig. 2 is a block diagram of components of a Ul window 200. The window depicted in Fig. 2 includes the following components: a navigation bar 202, a top menu bar 204, a list view 206, and a body 208. The navigation bar 202 can include various icons that are selectable by a user to navigate the user to different pages, for example. The list view 206 lists various items that can contain information content, where the items can include email messages, calendar events, tasks, files, and so forth. The top menu bar 204 can include menus that are selectable by a user to pull up respective menu items that can be selected by the user to cause the information content of the Ul window 200 to change.

[0033] The body component 208 can display information content, such as information of an item selected in the list view 206 selected by the user. For example, if an email message in the list view 206 is selected, then the body 208 can display the content of the email message. As another example, if a calendar event in the list view 206 is selected, then the body 208 can display the content of the calendar event. As a further example, if a file in the list view 206 is selected, then the content of the file (e.g. a word-processing document, a spreadsheet, etc.) can be displayed in the body 208.

[0034] The arrangement of the components depicted in Fig. 2 can be controlled differently by respective different templates (e.g. 108 of Fig. 1 ). Fig. 2 shows an example arrangement of the components 202, 204, 206, and 208 of the Ul window 200 in an example where a constraint value falls within a value range of a first template. In Fig. 2, the Ul window 200 has a first width W1 (where this Ul width is an example of a variable of the constraint).

[0035] As the Ul width changes from W1 to W2 (where both W1 and W2 remain in the value range for the first template), a characteristic of at least one of the components 202, 204, 206, and 208 can change, to the arrangement shown in Fig. 3A. In some examples, the top menu bar component 204 and the body component 208 are flexible components that can change in characteristic with a change in the constraint value (in this example, the Ul window width). In Fig. 3A, the width of the Ul window 200 is W2, which is less than W1 . In response to the reduction of the Ul window width, the top menu bar 204 and the body 208 are reduced in width, where,the width is an example of a characteristic of components (e.g. components 204 and 208 in this case that can be changed). Any information content displayed in the top menu bar 204 and the body 208 can be reflowed to fit within the reduced widths of the top menu bar 204 and the body 208. The reflowing of the information content can be performed by a rendering engine of an application, such as the rendering engine of a web browser or other rendering engine. In addition to reflowing content, a text font and/or an image size can be reduced in the top menu bar 204 and the body 208 as the Ul window width is reduced.

[0036] If the change in the constraint value causes the constraint value to transition from the first range corresponding to the first template to a second value range corresponding to a second template, then the second template is selected to present the Ul window 200. For example, the window width may have been reduced even further such that the first template is no longer applicable. This changing of the width can be caused by a user resizing the Ul window, or alternatively, the user using a different electronic device to display the Ul window. For example, the user may have initially been viewing the Ul on a notebook computer or desktop computer with a large display screen, and later, may decide to use a tablet computer to display the Ul, where the tablet computer has a display screen size that is smaller than that of the desktop computer or notebook computer.

[0037] Fig. 3B shows a modified Ul window 200-1 that has been reduced further in width to W3, which is less than W2. The width W3 falls within the second value range corresponding to the second template. As a result, the second template is selected to present the components 202, 204, 206, and 208. In the Ul window 200- 1 , the list view 206 can become a recessed list view, which is recessed to a narrow width as shown in Fig. 3B. A portion of the list view 206 is hidden when the list view 206 is recessed as shown in Fig. 3B. More specifically, in the example of Fig. 3B, the information items of the list view 206 may not be visible.

[0038] When a user selects the recessed list view 206 of Fig. 3B (such as by moving a pointer over the recessed list view 206 using an input device such as a mouse device or touch pad, or touching the recessed list view 206 on a

touchscreen), the list view 206 expands as shown in Fig. 3C, such that the information items of the list view 206 become visible. [0039] When the display width reduces even further and falls outside the value range for the second template and into a third value range for a third template, then the third template can be selected to present the Ul window, such as further modified Ul window 200-2 shown in Fig. 3D. The width of the Ul window 200-2 is W4, which is less than W3. The width W4 falls in the third value range for the third template. For example, the user may have changed to using a smart phone to view the Ul 1 10. The smart phone has a reduced display screen width which causes the Ul window 200-2 to be displayed with the reduced width W4. As another example, the user may have reduced the Ul window width further to W4. As shown in Fig. 3D, the Ul window 200-2 according to the third template has a different arrangement of the components. In Fig. 3D, the navigation bar 202 has become horizontal, rather than vertical as in Figs. 2 and 3A-3C. Also, the list view 206 (that is present in Figs. 2 and 3A-3C) becomes completely hidden in Fig. 3D. The top menu bar 204 can become a button or a reduced graphic element; when the user selects this button or graphic element, the full top menu bar 204 can appear.

[0040] Fig. 4 is a flow diagram of an example process according to some implementations. The process of Fig. 1 can be performed by an electronic device (e.g. 100), and more specifically, by elastic Ul presentation instructions executable in the electronic device, such as on the processor 102 of Fig. 1 .

[0041 ] The electronic device receives (at 402) a constraint value from a source. The received constraint value can include a value of a variable of the constraint, or values of multiple variables of the constraint. The electronic device selects (at 404) a template of multiple templates based on the received constraint value, where different value ranges of the constraint value map to different templates of the multiple templates, and where each template specifies a respective different arrangement of components of a Ul. The mapping between different value ranges of the constraint value and the respective templates can be provided in a mapping data structure, e.g. a mapping table, stored by the electronic device.

[0042] The electronic device causes (at 406) display of the Ul in a display according to an arrangement specified by the selected template. While displaying the Ul according to the selected template, the electronic device elastically adjusts (at 408) at least one component of the components in the Ul window according to a variation of the constraint value. An elastic adjustment of a Ul component can refer to a gradual or incremental change of the Ul component in response to change in value of a variable, or alternatively, in response to changes in values of multiple variables.

[0043] Fig. 5 is a block diagram of an example electronic device 500 according to some implementations. The electronic device 500 includes a non-transitory machine-readable or computer-readable storage medium (or storage media) 502 which stores machine-readable instructions that are executable by the electronic device 500. The machine-readable instructions include elastic Ul presentation instructions 504, where the window-presentation instructions 504 are executable to perform various tasks as discussed in the present disclosure, such as tasks according to Fig. 4 or other tasks.

[0044] The storage medium (or storage media) 502 can include any or some combination of different forms of memory including semiconductor memory devices such as dynamic or static random access memories (DRAMs or SRAMs), erasable and programmable read-only memories (EPROMs), electrically erasable and programmable read-only memories (EEPROMs) and flash memories; magnetic disks such as fixed, floppy and removable disks; other magnetic media including tape; optical media such as compact disks (CDs) or digital video disks (DVDs); or other types of storage devices. Note that the instructions discussed above can be provided on one computer-readable or machine-readable storage medium, or alternatively, can be provided on multiple computer-readable or machine-readable storage media distributed in a large system having possibly plural nodes. Such computer-readable or machine-readable storage medium or media is (are) considered to be part of an article (or article of manufacture). An article or article of manufacture can refer to any manufactured single component or multiple

components. The storage medium or media can be located either in the machine running the machine-readable instructions, or located at a remote site from which machine-readable instructions can be downloaded over a network for execution.

[0045] In the foregoing description, numerous details are set forth to provide an understanding of the subject disclosed herein. However, implementations may be practiced without some of these details. Other implementations may include modifications and variations from the details discussed above. It is intended that the appended claims cover such modifications and variations.

Claims

What is claimed is: 1 . An article comprising a non-transitory machine-readable storage medium storing instructions that upon execution cause an electronic device to:

receive a value of a variable, wherein different ranges of values of the variable correspond to different templates of a plurality of templates each specifying a respective arrangement of a user interface (Ul);

select, based on the received value of the variable, a template of the plurality of templates;

present the Ul using an arrangement according to the selected template; and after the presenting of the Ul, in response to a variation in value of the variable that stays within the range of values of the variable for the selected template, maintain the arrangement of the Ul according to the selected template, and adjust a presentation of the Ul according to the variation in value of the variable.

2. The article of claim 1 , wherein the variable is part of a constraint that includes a plurality of variables, and wherein the selecting of the template of the plurality of templates is further in response to a value of a second variable of the plurality of variables.

3. The article of claim 1 , wherein the Ul comprises a plurality of components, and wherein the adjusting of the presentation of the Ul comprises adjusting at least one of the plurality of components.

4. The article of claim 3, wherein the adjusting of the at least one of the plurality of components comprises adjusting a characteristic of the at least one of the plurality of components, the characteristic selected from among a component size, a brightness, a font of text, a size of an image, a size of a container in which

information content is presented, a color, and a layout of information content.

5. The article of claim 3, wherein, in response to the variation in value of the variable that stays within the range of values of the variable for the selected template, keeping another of the plurality of components unchanged.

6. The article of claim 3, wherein the selected template is a first template, and wherein the presenting of the Ul using the arrangement according to the first template causes the plurality of components to be visible to a user, the instructions upon execution causing the electronic device to further:

in response to a change in value of the variable that falls outside the range of values of the variable for the first template and falls within the range of values of the variable for a second template of the plurality of templates:

select the second template, and

present the Ul using an arrangement according to the second template.

7. The article of claim 6, wherein in the arrangement according to the second template, at least a portion of a first component of the plurality of components is hidden.

8. The article of claim 7, wherein the instructions upon execution cause the electronic device to further:

in response to user interaction with the Ul, cause the hidden portion of the first component to become visible.

9. The article of claim 1 , wherein the variable is selected from among a size of a window of the Ul, a size of a display screen, a type of the electronic device, a location of the electronic device, a level of ambient light, a speed of the electronic device, a vibration level of the electronic device, a security level of information content, and a characteristic of a user of the electronic device.

10. An electronic device comprising:

a storage medium to store a plurality of templates each specifying a respective arrangement of a user interface (Ul), wherein the plurality of templates are associated with respective different value ranges of at least one variable of a constraint; and

at least one processor to:

in response to the at least one variable changing in value from a first value that is in a first value range of the different value ranges to a second value that is in a second value range of the different value ranges, change from presenting the Ul according to a first template of the plurality of templates to presenting the Ul according to a second template of the plurality of templates; and

while presenting the Ul according to the second template, elastically change at least one characteristic the Ul in response to a further change in value of the at least one variable that is within the second range.

1 1 . The electronic device of claim 10, wherein the arrangement of the U I specified by each of the plurality of templates comprises an arrangement of a plurality of components of the Ul, wherein a first arrangement of the plurality of components of the Ul for the first template is different from a second arrangement of the plurality of components of the Ul for the second template.

12. The electronic device of claim 1 1 , wherein a first component of the plurality of components is visible in the first arrangement, and wherein at least a portion of the first component is hidden in the second arrangement.

13. The electronic device of claim 1 1 , wherein the elastic change of the at least one characteristic of the Ul comprises a change of a characteristic of a flexible component of the plurality of components while another component of the plurality of components is maintained as unchanged.

14. A method of an electronic device, comprising:

receiving a constraint value from at least one source;

selecting a template of a plurality of templates based on the received constraint value, wherein different value ranges of the constraint value map to different templates of the plurality of templates, and wherein each template specifies a respective different arrangement of components of a user interface (Ul);

causing display of the Ul in a display of the electronic device according to an arrangement specified by the selected template; and

while displaying the Ul according to the selected template, elastically adjusting at least one component of the components of the Ul according to a variation of the constraint value.

15. The method of claim 14, wherein the receiving of the constraint value comprises receiving values of a plurality of variables.