Multi-tiered content navigation provided by a graphical user interface

1 . A method of a graphical user interface (GUI) for content navigation on a screen, comprising:

displaying an image in a content area as a main subject and a plurality of arcs adjacent to the content area, the plurality of arcs including at least a first arc and a second arc, each of the first arc and the second arc presenting a plurality of icons thereon, wherein each icon on one of the first arc and the second arc identifies a viewable feature of the main subject, and each icon on the other of the first arc and the second arc identifies a visual effect on one or more viewable features of the main subject;

detecting a first scroll input on the first arc that positions a first icon at a first designated position on the first arc, wherein the first scroll input moves a first set of icons on the first arc out of the screen and a second set of icons on the first arc into the screen;

in response to the first scroll input on the first arc, displaying an automatic scrolling motion of the second arc to present a subset of the icons on the second arc that correspond to the first icon;

detecting a second scroll input on the second arc that positions a second icon at a second designated position on the second arc; and

displaying, according to at least the first icon and the second icon, a given visual effect on a given viewable feature of the main subject that is currently displayed in the content area.

2 . The method of claim 1 , further comprising:

detecting an input on a trigger point embedded in a selected viewable feature of the main subject in the content area;

in response to the input, displaying another automatic scrolling motion of one of the arcs to select a given icon that is associated with the selected viewable feature;

detecting one or more additional icons selected on one or more other arcs; and

displaying a selected visual effect on the selected viewable feature of the main subject currently displayed in the content area according at least the given icon and the one or more additional icons.

3 . The method of claim 1 , wherein the arcs are portions of concentric wheels displayed on the screen, each of the arcs having a first end, a second end, and a middle section that curves away from the content area.

4 . The method of claim 1 , further comprising:

displaying, in an information area of the GUI, information regarding displayed content in the content area, the information including a most recent user action that caused a most recent change in the content area.

5 . The method of claim 4 , further comprising:

removing the information area from the GUI after a predefined period of user inaction; and

enlarging the content area after removal of the information area.

6 . The method of claim 1 , further comprising:

detecting a swipe input on the arcs in a first direction away from the content area; and

expanding one or more of the arcs along the first direction.

7 . The method of claim 1 , further comprising:

detecting a swipe input on the arcs in a second direction toward the content area; and

partially closing one or more of the arcs along the second direction.

8 . The method of claim 1 , further comprising:

displaying one or more virtual buttons, which when selected, change viewing modes of the content area and keep displayed icons on the arcs unchanged.

9 . The method of claim 8 , wherein the viewing modes include a makeup look mode to show makeup effects on the main subject, and a makeup product mode to show makeup products used to create the makeup effects.

10 . The method of claim 1 , further comprising:

displaying a multi-function slider bar at a given location on the screen; and

in response to an input on the slider bar, presenting a result of executing an enabled function of a plurality of functions of the slider bar, wherein the enabled function is dependent on displayed content in the content area.

11 . The method of claim 10 , further comprising:

removing the slider bar from the given location after a predefined period of unuse; and

displaying the slider bar when detecting a tapping input on the given location.

12 . The method of claim 1 , further comprising:

detecting that the arcs are not in use for a predefined period of time; and

continuously increasing respective radiuses of the arcs while keeping a center of the arcs at a fixed location until the arcs disappear from the GUI.

13 . The method of claim 1 , further comprising:

enlarging the content area and the main subject therein in response to a determination that a user's gaze focuses on the main subject for a predefined period of time.

14 . The method of claim 1 , wherein a designated position on a given arc is marked by a marker, the method further comprising:

detecting a click-and-hold input on the marker of the given arc, wherein a first set of icons are currently presented on the given arc;

in response to the click-and-hold input, displaying a set of alternative options; and

in response to a selection of one of the alternative options, presenting a second set of icons on the given arc that are different from the first set of icons.

15 . A device comprising:

a screen;

one or more processors; and

a memory to store instructions, which when executed by the one or more processors, cause a graphical user interface (GUI) on the screen to:

display an image in a content area as a main subject and a plurality of arcs adjacent to the content area, each of the plurality of arcs including a first arc and a second arc presenting a plurality of icons thereon, wherein each icon on the first arc identifies a viewable feature of the main subject, and each icon on the second arc identifies a visual effect on one or more viewable features of the main subject;

detect a user input on a trigger point embedded in a given viewable feature of the main subject in the content area;

in response to the user input on the trigger point, display an automatic scrolling motion of the first arc that positions a given icon associated with the selected viewable feature at a designated position on the first arc, wherein the automatic scrolling motion moves a first set of icons on the first arc out of the screen and a second set of icons on the first are into the screen;

detect a second icon selected on the second arc; and

display, according to at least the first icon and the second icon, a given visual effect on the given viewable feature of the main subject that is currently displayed in the content area.

16 . The device of claim 15 , wherein the one or more processors further cause the GUI to:

superimpose the given visual effect on the given viewable feature of the main subject that is currently displayed in the content area.

17 . The device of claim 15 , wherein the one or more processors are further operative to:

receive an input on a virtual button in the GUI;

cause the GUI to change a first viewing mode into a second viewing mode of the content area in response to the input while keeping displayed icons on the arcs unchanged;

receive a swipe input in the content area to display a new content; and

cause the GUI to change the displayed icons on the arcs according to the new content.

18 . The device of claim 17 , wherein the one or more processors are further operative to cause the GUI to change the displayed icons on the arcs by displaying a second automatic scrolling motion on at least one of the arcs.

19 . The device of claim 15 , wherein the one or more processors are further operative to:

cause the GUI to display a multi-function slider bar on the screen;

display a plurality of functions of the slider bar in response to a click-and-hold input on a draggable button of the slider bar; and

enable one function of the plurality of functions of the slider bar according to an input that selects one of the plurality of functions.

20 . The device of claim 15 , further comprises a plurality of image sensors to detect a user's gaze, wherein the one or more processors are further operative to cause the GUI to enlarge the content area and the main subject therein in response to a determination that the user's gaze focuses on the main subject for a predefined period of time.