In this tutorial, we are going to create a segmented control (a very well-known input control pattern) used in mobile or desktop UI. This type of control allows the user to switch to a specific option within a group. If you want to learn more about this control type, you can take a look at the Apple HIG.
Segmented controls are not very easy to tackle in prototyping. This is especially true when you have more than 2 segments. This article will show you how to create a segmented control with 3 segments in Axure RP in just 2 simple steps. The technique can be applied to any number of segments.
To make everything work (on the interaction part), we will use a bit of logic to respond to the Click or Tap event in order to change the selected option (but we will not be going to use global variables for this, instead we will take advantage of local variables).
The reason for not using a global variable to handle the selected state is because we want this component to be self-contained (without dependencies) to be easily reused across projects.
To follow along, you’ll need to be a little familiar with Axure RP and have some understanding of widgets, interactions, local variables and expressions. Also, if you haven’t done it yet, you can download Axure the latest version, from Axure Website.
The level of difficulty is easy to medium. Everything was broken into 2 steps, so you could follow along more easily.
In this step, we are going to create all the necessary shapes for our segmented control. To see an overview of the shapes and structure, take a look at the image below.
Basically, we have only one group called “Segmented Control” and inside we have:
If you don’t have too much experience with Axure shape widgets then you can read more about them here.
The "Options" group is actually made of Label Widgets and the way they are laid out is to overlap a bit the boundaries of the separator shapes. These boundaries are set up in such a way that can be used to determine the left and right limits for each segment.
Also, notice that the "Selector" sits under the "Options" group, and it has a wider length.
See all shapes properties below.
Shape properties (of course you can adjust these properties to fit your needs):
Options (+Option 1/+Option 2/+Option 3):
Separator (Separator 1/Separator 2):
Fill: #767680, Opacity: 12%
The only interaction that you are going to add is on the +Option(1/2/3) widgets on the Click or Tap event. Basically, what you need is to move the "Selector" shape on the horizontal axis to the left bound of the widget that triggered the event.
You are going to add this interaction only to one of the +Option widgets (in this case +Option 1) and use the copy/paste function to replicate this interaction on the rest of the widgets +Option 2, +Option 3.
As you can see, it is really easy to add the interaction to new segments. All you need is to copy/paste the existing one.
To achieve the required interaction (basically to move the "Selector" widget to the appropriate position) you will use some expressions inside one action with the following settings:
LVAR1 is a local variable, and it represents the current widget that triggered the event, in Axure is referred to as This widget.
If you are not really familiar with events, actions, and cases, you can read more about them on the Axure website.
All right, now that you have the interaction completed, all you need is to copy/paste it on the rest of the +Option widgets and that is it.
Creating a segmented control is relatively easy in Axure RP if you have the appropriate document structure. Now, you can use your new segmented control in future projects.
Written by: Lucian Dinu