Blogs

Blogs

Lexicon update in Liferay 7.1 from 7.0

Lexicon team has brought a set of changes for Liferay 7.1 for both CE and DE versions. We believe that this set of changes play a key role in the product usability and bring some certain improvements towards increasing the user experience. This set of changes is only a part of those we have in our roadmap and that will appear in 7.2 and will continue evolving in forthcoming versions of portal. Please find below the set of changes and their benefits from different perspectives:

Typography

Several reasons and their benefits drove us to a change from Source Sans Pro to System font:

  1. System fonts are always more legible as they are designed more consciously and they are designed to work in all languages.

  2. Using a non-system-font introduces extra size in the CSS that each user has to download.

  3. Source Sans Pro does not support for example Chinese, Japanese or Arabic. Therefore the browser will select the first font-face available to show the language.

  4. Using system-font we can use more font weight and variations as they are included in the system. Otherwise, we have to download them to use them. This would increase the CSS weight, download time, slower font load, etc.

  5. Source Sans Pro is Open Source but it is hosted in CDN and there are many countries where accessing CDN is not allowed, for example in China. On the other hand, system fonts are 100% reliable.

 

Color Palette

An improvement in our color palette plays a key role for accessibility. Our new colors, an evolution on the previous color palette, introduce more contrast what allow us to improve the user experience for users who have different visual problems.


 

 

On the left you can see Lexicon 1 color palette (7.0) and on the right Lexicon 2 color palette (7.1).

 

Alerts

Alerts have suffer small variations that turn in the following facts:

 

Alerts have been reinforced with an icon to clearly differentiate success, warning, error and info states. In addition, the new color palette has been applied to them what results in a better accessibility level.

 

 

A better placement in order to reduce the number of blocking actions in the user path. For this, we have placed general alerts (session expiration, language change among, server answers, among others) to the bottom left corner of the screen. Also, every success message, even if it is application specific, will appear there. In this way, the user is blocked less times and it is only blocked when we think something is not going right and it must be changed which is the target of application specific alerts.

Management toolbar

The new management toolbar has been introduced in portal. It is important to highlight the importance of the “toolbar” word. The previous version of this component was lacking two key actions add/create and search.

 

New management toolbar with search field, plus button and visualization dropdown button (7.1)

 

Search was placed in the navigation bar. This bar could have several navigation tabs and could mislead the user on the search action context. Therefore, the search bar that is a tool over a certain dataset has been included in the toolbar.

 

Old management toolbar was not containing the search field, it was placed in the navbar (7.0)

 

A similar case happens with the plus button. This button used to be sticked to the bottom right corner of the screen, a place that was hard to realize for the user. This main action was to far away from the main focus attention area for the user, which is the left area and the top area of the screen.

 

Old management toolbar was not containing the plus button (7.0)

 

Moreover, the previous version of this toolbar was forcing you to introduce not necessary functionality or promises in some cases. You don’t have to include those tools your users are not going to need. The visualization selector is under a dropdown menu now and it only appears when there is more than one visualization type.

 

Old management toolbar had a visualization switcher that was occupying lot of space (7.0).

Navigation bar

The navigation bar, placed below the top bar, has been reinforced with changes that improve its use in context and that make application parts more relevant.

The first change is related to removing the search bar from the navigation bar and placing it in the management toolbar, as mentioned in the previous section.

The second change is a bit more complex. Application parts are taken out from the actions menu in the top bar and placed in the navigation bar, which makes them easier to discover. Navigation bars containing application parts must be in dark background so a strong relation is created between the application and its parts.

 

 

Moreover, there were occasions where the navigation bar had only one navigation tab which had the same name as the application title. That bar was not needed and it is removed.

 

Forms

Numerous changes has been introduced in forms and more changes are yet to come in following releases so the experience can be improved much more.

Form layout

Two new form layouts have been created to reduce part of the complexity. These changes have not been applied entirely in portal. But changes are being done progressively.

 

Not all forms can be 12 columns width. This is acceptable for forms that focus its attention on emulating the final result. For the rest of forms we are facilitating a smaller form box of 8 columns width. The reason behind this is that narrower areas help the user to focus much more the attention.

 

In addition, we have included a layout with a sidebar to include a vertical navigation. This pattern allows you to navigate through different forms for the same set. Our aim with this navigation is to break down long forms into smaller ones that reduce the task complexity and that allow users to complete them and find information faster.

Form hierarchy

A stronger form hierarchy has been applied to those old forms that has been translated into new forms. This improvement results into a better and quicker scanning.

Form inputs

Form inputs have been restyled to make the inputs easier to identify. Line fields are not wrong in certain context as mobile applications but in bigger screens and large forms they can suppose an extra complexity level to our users.

 

Old input styles on the left hand and new input styles on the right hand.

 

All these changes applied with rigor and consistency result in a better user experience and the visual results is:

 


 

Localizable fields

Localizable fields are now identified with a language selector next to it. In this version we leave behind tabs to select languages and fields with tiny flags below in something that helps identifying faster what is and what is not localizable.

 

 

Sites’ Widgets

We are also involved in a revision work of the site visualization environment, the part of the Portal that we commonly call “Sites”.

 

This work consists basically of an improvement of the way the content is shown trying to favor its understanding and its use. These changes have begun to be introduced in some applications and will be gradually applied to the entire suite

 

The three main aspects on which the work has been oriented are:

1. Reconsideration of the widget structure.

An attempt to provide a  better identification of the main structural parts of the widget and the tools associated to each.


 

 

 


 

2. Review of the information architecture of the asset as a basic unit of content.

A way to establish a versatile pattern that helps clear identification of the content blocks within the asset, that is able to adapt to different types of assets and facilitates the configuration of their different visualizations in the form of Application Display Templates.

 


 

3. Adaptation of Lexicon patterns to specific applications in Sites environment.

A work of adaptation of patterns and templates that we can find both in administration and that of sites, to the specific characteristics of this environment.

 

Future work

Our work on improving the user experience doesn't stop here. More changes will come in future versions not only with new interaction patterns or accessibility, but also by providing a better information architecture.