Published on | Prototyping: From UX to Front End — Medium Erkan Kerti

What is tunneling and how to use it as a UI element in your product

Pikes Peak, USA

Imagine that you are driving into a mountain tunnel. As fast as you enter it, you headed to the exit without doing anything. Tunnel curls to left, right again and again. Inthe end, you see the light and the course is completed.

Let’s investigate the course environment: You only rode the car, there weren’t important distractions like crossroads, pedestrian strips or traffic lights. There wasn’t much anything to do, there was no scenery rather than the walls of the tunnel and no place to stay. Actually, from this point of view, you seem to have given up on self-determination in order to smoothly follow a flow, which was designed a long time before you even reach there. It is a course that is designed just for passing mountain. They tunnel you from the point A to point B without any distraction coming from unnecessary things. Luckily same can be used in user interfaces, as tunneling.

Selective attention is one of the basic human instincts that makes us survive. Imagine that you are surrounded by a predator in wild. You cannot easily see it, yet you feel it there, and when it starts to attack, you pay attention only to the things that matter, like which way you can use to run, not the fruits of the tree on your left or flying birds. Your focus makes you see only the things that are important for you to escape for survival.

Let’s apply this logic to the user interface that you make. If there are too many things on the page, user cannot select the relevant one quickly enough. It is boring to seek and find the relevant content when a web page is suffering too much banner. Or too many options, controls, or features within the same UI will create a crowded interface while user only wants to complete the process and escape. Users don’t have time to wrestle with the options (at least they think they don’t have).

So you need to remove the unnecessary things from the set you are dealing with and provide tunneling. This way user’s attention couldn’t distract easily. Selective attention makes people be focused on a certain area or an object.

Wizards (Step-by-Step process)

Tunneling can be a good method when there are many steps and actions that should be taken. Assume that you provide a form to your users to fill. If this form has a few elements, it would be easy. But how about a form with 20+ elements? Designers can control the pathway inside a tunnel by providing an easy, simple and concentrated environment, wizards. A wizard can help you divide form elements into divisions/steps. There are no distractions around, and user is only allowed to do certain actions. This way, user focuses on the necessary items only.

Insure Landing by Eleken

Do these:

Always start with small; any element you add increases the complexity. Remove all unrelated tasks/form elements/actions. You should start with basic elements and easily completed tasks. Soft start with easy access to relevant elements would create satisfaction in users and give them a fast start. This way user doesn’t get frustrated and give up.
Reduce decision time and emphasize the achievements at each cornerstone to create the feeling of progress. For example, when a step is completed, turn its bullet/border/title into green.
If there are a large number of steps, user should be able to save and edit the previous steps even if the operation is not completed. If the progress made by users would be gone once they have to pause for a while, there is nearly no chance that they would come back and start the process all over again.
Elements should be grouped meaningfully. Remember the gestalt rule of similarity and grouping. Think about the stories, you can not easily jump between different parts of it. This breaks the flow.

Don’t do these:

Don’t use any links that take user to another page unless you want to create an interruption on purpose, such as providing a guideline that is always reachable with the completed actions.
Avoid using complex structures and bonds between steps. For example, if the third step requires some information that was used or demonstrated at the first step, this makes user go back and come forth, breaks the tunneling effect that you want to achieve.
Don’t make steps longer than they should be. If you provide too many elements in one step, it will be hard to be achieved easily and delay the success feeling coming from completion of the step.

Benti — Creating A New Project Wizard by Jakub Dziedzic

Simplify the tunnel and provide inline feedbacks

Even if tunnels are concentrated environments, only necessary items should be placed in them. But this is only one side of the coin, the other side is about simplifying. Simplifying the task that the user deals with, provides clarity.

Clarity is fragile. If you don’t give enough feedback, user can get stuck on the form element.

Designer should reduce the response time and errors by adding feedbacks for each element for the user. These feedbacks should be suggested at the right time. Inline validation method is important for reducing response time (See Luke Wroblewski’s gorgeous work, Inline Validation in Web Forms).

Feedbacks should be clever, if you show error messages when user doesn’t know how to fill the forms you gave, there is a high chance user will give up. Making the task easier for the people who already want to achieve is the primary objective of creating effective tunnels. Leading the user behavior with right methods like above can create seamless experience that your users love.

In order to get the user’s focus, designer should break the forms/actions into smaller and more easily achievable steps. These steps should be designed carefully to include only necessary elements and should be grouped meaningfully. Gaining and forwarding the user’s attention to the next step is the key for completing a task.

Follow the rules, and don’t make assumptions. Assuming that the user can hold a long step easily is wrong. Stay on the basic and keep designing easily accomplishable steps.

❤ Do you like my article? Here are some others:

Also you can find me on Twitter as twitter.com/erkankerti, on Dribbble as dribbble.com/erkankerti, and on Behance as behance.net/erkankerti

<a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a>

Designing Effective Step-by-Step Process was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

Designing Effective Step-by-Step Process

Cool stuff, every week

More Articles