Product News Resources & Tools

A Sneak Peek at eFront: User Interface

eFrontPRO

The user interface (UI) of eFront is based on Bootstrap-3. This means that, by default, eFront has a fluid interface and unified UI and animation elements. But this is only the tip of iceberg as eFront comes with a vast number of additional interface improvements that you will find handy. Let’s find out what’s new and noteworthy in this post.

Responsive design

eFront uses a Web design approach aimed to provide an optimal viewing experience – easy reading and navigation with a minimum of resizing, panning, and scrolling – across a wide range of devices (from mobile phones to desktop computer monitors).

By default, eFront adapts the layout to the viewing environment by using fluid, proportion-based grids, flexible images and CSS3 media queries.

Throughout the transition we had to move from tables, that traditionally eFront used, to a DIV based page structure. eFront always had a simple way to divide the screen’s real estate by using a two columns structure. With the new DIV structure, columns can now be folded under the same column providing a better experience for small screens.

eFront Admin Dashboard in full size

Mobile view

Retina Ready

eFrontPRO uses Scalabe Vector Graphics (SVG) icons. Those icons can scale indefinitely with no quality lose and are a natural match for high resolution (retina) screens.

SVG offers a truly resolution-independent technique for presenting graphics on the Web. SVG is a vector graphics format that uses XML to define basic properties such as paths, shapes, fonts and colors, and more advanced features such as gradients, filters, scripting and animation. Create the file once and use it anywhere, at any scale and resolution.

We have opted to transcode all SVG icons to a CSS based, inline image format using a tool called Grumpicon. This provides freedom from hard to maintain sprite-images while at the same time keeps page hits and overall bandwidth consumption low.

eFront-SVG-1

eFront-SVG-2

Reduced Clutter

Throughout eFront we have either merged functionality or reduced clutter.

eFront has grown in depth and breadth through time. We felt that a simplification phase was needed in order to make it intuitive again for new users. The simplifications span the full product breadth and depth but as an example check the following 2 screenshots that illustrate the new way to present form tips (visible only when needed) and the toggle for advanced settings.

Form tips visible only when needed

eFront-reduced-clutter-1

Hidden Advanced settings

eFront-reduced-clutter-2

UI elements

As we transitioned to Jquery from Prototype we invested time on selecting new visual elements; for example, eFront uses modern date-time selectors. An important new UI element you will come across a lot is the “Quick info” widget. This element presents bits of interesting information (the gist) in a visually appealing way.

eFront-widget

Redesigns

On eFront

we redesigned several key pages and tools to make them more effective and more personalized. Take for example the end-user dashboard, the reports pages and the content creation screens. These 3 tools are among the most often used ones and all of them have a new look-and-feel. Check below for a screenshot from each one of them.

Dashboard

eFront-Dashboard

Reports

 

eFront-Reports

Content creation

eFront-Content-Creation

Release schedule

In this post we covered a number of UI changes coming with eFront. We will keep improving things for the next couple of months (until the official release), but stay tuned for a public beta in the next few weeks.

Until then, have fun and keep learning!


Improve your employee, partner and customer training with our enterprise-ready learning management system. Book a demo now and see why our diverse portfolio of customers consistently give us 5 stars (out of 5!)

Book a demo