UI Design Simplified with Circular UI

UI Design Simplified with Circular UI

BY Divya G K 28 Nov 2018 Tizen, Tizen Studio, Tizen .NET Application, Tizen .NET

Introduction

We are in an era where watches are being used for more than just an instrument to tell time.

Over the past decade, we have seen a radical transition of smart devices, and these smart devices have taken over in every sphere of our lives.

Wearable technology is booming in the market nowadays. Wearable devices are devices that can be integrated into clothing or devices that can be worn on the body as accessories. This blog focuses on wearable devices with a round shape.

It is estimated that the number of wearable devices, in the market will jump to almost 177 million by 2018. As shown in the following figure, the wearable sales number is predicted to scale up with increasing mobile users and high-speed internet connection:

(Image source: sitepronews)

Considering wearable as the most emerging trend in the future, Samsung has introduced the Circular UI to simplify app creation of wearable devices. With this feature, app developers can explore and create many different apps for wearable devices and be on par with the industry.

Why Circular UI?

According to research, the circle shape is considerably easier to pursue by human eyes. Our brains are capable of processing information within a circular shape a bit faster than an information inside a rectangle or a square shape. User experience enhances when we use comforting curves instead of sharp edges.

Current wearables typically consist of a touch screen, buttons, or both. Wearables with circular displays use interactive techniques such as swipes and multi-touch inputs.

Circular UI

Circular UI is a set of helpful extensions of Xamarin.Forms framework. Currently, circular UI works efficiently with Visual Studio 2017.     

Tizen Advanced UI Library (TAU) supports both rectangular and circular wearable devices. You need to add a media query to support a circular UI along with a rectangular UI. The following figure shows how the media query works on a rectangular and circular UI:


For a user-friendly experience, Samsung supports rotary events for user interaction on a wearable rotary device. The following figure shows the basic idea of a rotary event:

 

The circular UI along with the integration of the rotating bezel gives a user-friendly experience. Bezel interactions represent the rotation of the bezel to explore different available menu options on the wearable screen. Bezel interactions can adjust the values, answer or end calls, and check alerts. You can view this information by rotating the bezel clockwise or counterclockwise:                           

                                                                                        

 

The Tizen Wearable Web UI framework provides rich Tizen Wearable UI Components. You can use the UI Components for CSS animation and rendering purposes. The wearable UI components are designed to allow the user to interact with a small touchscreen-equipped wearable device with rotary component parts.

The following table shows the various circular UI components, both in Native and in Web application:

Native Application

 

Web Application

 

Few examples of Native application:

Circle Surface

The circle surface component manages and renders multiple circle objects to one single circle surface. This circle acts as candidates of an object to be rendered.

 

                                                 

Rotary selector

The rotary selector component is composed of a selector and multiple items surrounding the selector. The rotary selector can be used to select an item or to move to the next or previous page through a rotary event.

 

 

 

Few examples of Web application:

Expandable Headers

The expandable header offers events to support interactivity with other components.

Circle-shaped Progress Bar

This component shows the progress bar. You can create a circle-shaped progress bar component with the CircleProgressBar API.

 

In addition, UI components provide a wide range of UI controls to create an effective GUI. Following are the available UI controls:

  • Check
  • CircleDateTimeSelector
  • CircleListView
  • CirclePage
  • CircleProgressBarSurfaceItem
  • CircleSliderSurfaceItem
  • CircleScrollView
  • CircleStackLayout
  • CircleStepper
  • CircleSurfaceEffectBehavior
  • TwoButtonPopup
  • ContextPopupEffectBehavior
  • IndexPage
  • InformationPopup
  • IRotationReceiver
  • Radio 
  • PopupEntry
  • Toast
  • TwoButtonPage

Few examples of Tizen wearable circular UI controls:

CircleDateTimeSelector

This control helps to select date or time that fits in the circular screen.

 

CirclePage

This control shows a Circular ProgressBar, Circular Slider, and MenuItems on a circular menu.

 

 

Conclusion

Wearables will be the “the next big thing,” and wearable app development is what you must go with.

With all these components and controls discussed in this blog, you can make an effective circular control. When this circular control is integrated with a rotating bezel, it gives a user-friendly experience. 

Written by Divya G K
Keep Reading All Posts
Read More
Read More
Read More