The proportion of Internet traffic on mobile devices exceeds that of PC Internet traffic, so people use more Web services on mobile devices than on PCs

This change has also had an huge impact on the UI of web services, especially on Scroll and Carousel UIs.

Carousel means “baggage conveyor belt” and “carousel”. The Carousel UI is an UI that allows elements to circulate like a conveyor belt or carousel.

Scroll and carousel are popular UIs in PC environment, but are more important in mobile environment. Scroll and Carousel UI are very effective ways to provide a lot of contents on the screen within a small mobile devices.

UIs like Scroll and Carousel are very effective way providing a lot of contents in a small screen.

Furthermore, with touch experience on mobile devices, Scroll and Carousel allow users to consume contents more naturally.

Scroll UI

Carousel

NAVER, a popular portal service in South Korea, uses Scroll and Carousel UI in its services,

even the entire Naver mobile service are implemented by Carousel UI.

http://m.naver.com

Internally, most of the Scroll and Carousel interactions in Naver have been implemented using eg.Axes, a module of the egjs library.

The actual developments were implmented by eg.MovableCoord

eg.Axes was renewed based on eg.MovableCoord in egjs 2.0

In this article, we will cover the experience of how eg.Axes was developed, which is a library for “Responsive UI from user actions” such as Scroll and Carousel.

What is eg.Axes?

eg.Axes is a component that converts “user input” to “multiple axes with a range”.

eg.Axes Structure

Take a look the following demo.

“What is the eg.Axes?” demo:

https://naver.github.io/egjs-axes/#what-is-the-egaxes

On a PC, you can use the mouse and mouse wheel to move, zoom in and out the egjs logo. On a mobile device, you can move, zoom in and out the egjs logo by dragging your fingers or by pinching your fingers.

What is the eg.Axes?

By using eg.Axes, you can convert information from various input devices into axis information. Developers can easily create an “UI that responds to various input from the user” by controlling the DOM based on the axis information.

Why did we make eg.Axes?

Other Scroll and Carousel seem to be similar

The Scroll UI moves the content according to the user’s direction of input.

When the mouse pointer or the user’s finger moves from right to left, the position of the content also moves from right to left.

At this time, it is decided whether to move to animation or just to change the position of content according to the input time and moving distance of the user.

Likewise, the Carousel UI also moves the content according to the user’s input direction.

When the mouse pointer or the user’s finger moves from right to left, the position of the content also moves from right to left.

The difference from scrolling is that it is necessary to decide whether to move to the next content area (panel) or return to the current panel, depending on the position of the distance moved after the user’s input stopped.

When the panel to move is determined, it moves with animation.

Scroll and Carousel before the eg.Axes

If you look at the above operation in detail, you can see that Scroll and Carousel work in a very similar way.

The part that receives user’s input and moves, the contents for the animation are same. On the other hand, the behavior after the user’s action is slightly different.

Because of these slight differences, each component has been developed. However, there was a problem that it is very costly to maintain.

In case of browser fragmentation issues or functional problems, we repeatedly had to develop code to support different components for the same purpose.

The difference of requirements between Scroll and Carousel

Usually, a web service wants to bring a better user experience.

The scrolling UI provides brilliant effects like parallax scrolling, and provides features such as pull to refresh.

Scroll with pull-to-refresh

The Carousel UI provides features such as 3D effects and image rotation.

Carousel expressed in 3d

However, it is difficult to develop an UI that provides a variety of user experiences with existing Scroll and Carousel components.

Ultimately, in order to implement the UI of the new effects, we had to create new components or paste inconsistent options and features into existing components.

Various user inputs

The inputs on PC are the mouse and the keyboard only. However, the user inputs on mobile are very diverse. There are many inputs such as touch screen, keyboard, device orientation, device motion, GPS, etc.

There are so many ways of inputs from the touch screen to keyboard, device orientation, device motion, GPS, etc.

Moreover, it’s becoming harder and harder to handle because the device is continuously evolving and the way how user input to it, will continue to be added.

How did eg.Axes solve the problem?

There are three ways to solve this problem.

First, the same parts used in the Scroll and the Carousel components are shared with ‘the part recognizing the user input’ and ‘the animation part used in moving the content’. This solves the cost problems of development and maintenance..

Second, limitations of design in Scroll and Carousel UI are solved by expressing user ‘s input into axis information.

By changing the DOM based on the converted axis information, it is now possible to easily create various UIs that respond to user input.

Third, we provide an ‘inputType’ plugin that can receive various user’s input.

Input types, such as Device Orientation and Device Motion, can be created from the plugin as well as touch and mouse.

See How to create a custom InputType for how to use the inputType plugin.

What can you do with eg.Axes?

eg.Axes changes the various user’s inputs into multiple axes information.

Developers can control the DOM based axes information. This allows developers to easily create an UI that responds to user input.

The following example uses eg.Axes to change the mouse or touch input to a value between 0 and 360.

“Car 360º viewer” demo:

https://naver.github.io/egjs-axes/#car-360º-viewer

Car 360 degree viewer

Changes associated with the UI are handled by the eg.Axes “change” event.

// 1. Initialize eg.Axes

const axes = new eg.Axes({

angle: {

range: [0, 360],

circular: true

}

});



// 2. attach event handler

axes.on(“change”, ({pos}) => {

const index = Math.min(Math.round(pos.angle % 360 / ape), imagesNum — 1);

images.map((v, i) => {

v.style.display = i === index ? “inline-block” : “none”;

});

});



// 3. Initialize a inputType and connect it

axes.connect(“angle”, new eg.Axes.PanInput(“.car_rotate”));



Here’s an example of creating an UI for a rotating cube model using two axes.

“Rotate a Cube” demo:

https://naver.github.io/egjs-axes/#rotate-a-cube

a rotating cube

With the usage of three axes, you can easily create a subway map that can be zoomed in or out.

“Subway Map” demo:

https://naver.github.io/egjs-axes/#subway-map

Subway Map

For more information about eg.Axes, see eg.Axes site and GitHub repository.

- eg.Axes Website and demos: https://naver.github.io/egjs-axes

- GitHub Repository: https://github.com/naver/egjs-axes

- issues: https://github.com/naver/egjs-axes/issues

Wrapping up

There’re a lot of open source dealing with UI components.

iScroll is the typical Scroll component created by Matteo Spinelli and is loved by the community. In the category of Carousel there’re uncountable famous libraries more than Scroll category.

There are many open sources such as Bootstrap, jQuery Plugins, Slick and OwlCarousel, but these libraries have a lot of limitations in developing an UI that responds to user inputs.

However, eg.Axes is a different component in terms of being capable of specifying multiple input types and multiple axes.

Developers need only draw the UI without having to worry about the input types.

The hurdle is just your imagination!