Progress Tracker Featured Image

By Alexis Allen

Advanced, UX

This post is about the progress tracker design pattern. A progress tracker is a user interface pattern that breaks down a multi-step process into parts in order to simplify it for the user. Buttons are easy to create in FileMaker, but what if you want a custom shape and donā€™t have Photoshop? Here are step-by-step instructions for how to build one for FileMaker Pro, including hover effects, using the online graphics tool Canva in combination with Preview on the Mac.

*****************

A progress tracker is a design pattern that helps users navigate through a complex, multi-step process. Youā€™ve probably seen it used in web booking or checkout procedures. A progress tracker tells the user a number of useful things: how long the whole process is, what steps are required to complete it, where they currently are, and what is still left to fill in. Hereā€™s an example of the finished product:

Progress Step 1

Skip directly to the tutorial

Design Pattern

A progress tracker improves your design because it gives the user important feedback about the size and scope of the task, especially if the task is relatively complicated. The user should be able to see the whole process laid out along the top of the screen, and itā€™s also helpful to number the steps for further reinforcement. Five or six steps is about the maximum that youā€™ll want to use, otherwise it starts to defeat the purpose. Three or four steps is ideal.

Sometimes users donā€™t have all the information they need to finish, or they need to stop the process because something else comes up, so there should be a way for them to cancel the process without losing everything theyā€™ve done to that point. You should also provide a way for them to resume again later, as well as go back to earlier steps if they wish.

The easiest way to do this is to just allow them to navigate freely between the steps, provided that the only critical step is at the end (i.e. something happens at the end that you wouldnā€™t want to duplicate, like entering a payment, or performing a script that creates or permanently alters records.) If each step is dependent on the previous one (i.e. you canā€™t let them go to the next step until they have completed the earlier step, and they canā€™t go back), then youā€™ll have to track their progress and enforce rules more closely.

Finally, itā€™s wise to provide some kind of summary validation at the end, that lets the user know if theyā€™ve left something critical out, and a link back to where they can input the missing information. Make sure they know what the final result is, and whether it was successful (ā€œPayment successfully completed!ā€ or ā€œTimeline created!ā€).

That covers the general requirements for the progress tracker pattern itself, but this article is really about how to use Canva to create the interface buttons that guide the user through the process. This is assuming, of course, that you donā€™t have Photoshop and a library of already-created buttons at your disposal, and you want to create something a little more stylish and interactive than a series of plain olā€™ FileMaker buttons.

Style

There are a number of ways you can design the visuals for this, the simplest being a series of text boxes along the top of the layout. It doesnā€™t have to be too complicated to be effective.

2014-03-27_Progress_Boxes

Or, you could get a little fancy and use a number lineā€¦

2014-03-27_Progress_NumberLine

You also might be tempted to dispense with graphics and use a strictly text-based treatment using greater-than symbols as ā€œarrows,ā€ but this ends up looking like a breadcrumb pattern instead of a progress tracker.

2014-03-27_Progress_Text

I prefer not to use tabs for this, as tabs donā€™t provide the same clues of ā€œyou are hereā€ that we need for tracking progress, and making sure the user understands they canā€™t skip steps.

To further reinforce the sense of directional progress, I decided I wanted to make my buttons higher-contrast, and to look more like arrows. I wanted an easy way to do this, without fussing too much drawing the shapes from scratch. I also wanted blank buttons, so that I could overlay my own text on top in FileMaker. Hereā€™s the final product again:

Progress Step 1

Tools

Canva is a super-easy-to-use online graphic design tool. You can do a lot with their free graphics and some imagination, or you can choose from a selection of paid images or design elements, each $1.

There are limitations, and itā€™s primarily geared towards creating marketing images, but, with a little tweaking, I found it helpful for creating the progress tracker indicators. Certainly, you can find images elsewhere online (try a Google search for ā€œfree buttonā€), or draw them yourself, as an alternative. The button style I used was free, and only requires creating an account.

Youā€™ll also use Preview, which is already installed on the Mac.

Overview

First, youā€™ll create the graphics in Canva and save them to your computer. Next, youā€™ll open them in Preview and tweak them a bit, and save the different versions youā€™ll need. Last, youā€™ll insert the buttons into FileMaker, attach the scripts, and organize them on your layouts. Letā€™s go!

Steps

1. Create your graphic

On the Your Designs page of Canva, click ā€œUse custom dimensions.ā€ I used 300 x 300 but it doesnā€™t matter too much what you use, as long as the area is big enough for you to work with.

On the leftmost toolbar, Click ā€œSearch.ā€ Click ā€œBanners.ā€

Canva Sidebar

Scroll down until you see an area with pink buttons. Drag the button onto the canvas area.

Canva Banners

Highlight and remove the text, then resize the button to the approximate height and width you want. If youā€™re unsure of the dimensions, Iā€™d make it a little larger than you think you might need.

Canva Button

Change the colour (unless you want it pink) using the colour wheel or by entering a hexadecimal colour code. You can use the Mac utility Digital Color Sampler to hover over any object on your screen and pick up its hexadecimal value; make sure you select ā€œDisplay Native Valuesā€ and View > Display Values > as Hexadecimal. Write down the R, G, and B values that appear after the ā€œ0xā€, thatā€™s your hex code. I used blue for this one.

If youā€™re not on Mac, here are some other colour sampling tools for different platforms.

Canva Colour Wheel

This button is good for the first step in our progress tracker, but we want the next steps to have the same shape cut out on the left side, so that the arrows visually nest into one another neatly.

Hereā€™s how: Select and Copy the button you just created. Then copy it a second time. Select the second copy, change the colour to white, and drag it over the left edge of the first copy, lining the two buttons up carefully. This creates a nice, perfectly matched cut-out.

Canva Button 2

Finally, create the ā€œendā€ button. This one will have a cut-out on the left and a straight right edge. Make another copy of the blue button. Using the rotation handle at the bottom, rotate the button 180 degrees, so that the flat end is now on the right instead of the left.

Rotate Button

Copy the white button, and once again place it over the left edge of the blue button. The pointy part of the blue button will still be showing, so drag the left handle of the blue button to the left, to hide it under the white shape. (I highlighted the white shape here for clarity.)

Canva Button 3

At this point, save the buttons to your computer by clicking ā€œLink and Publishā€ and then ā€œImageā€ as the format (youā€™ll get a PNG file).

2014-03-26_Canva_Final

Then, still in Canva, select the blue buttons and change them to gray, and save the file to your computer again. These buttons will be to show the steps in their ā€œnon-activeā€ state.

2014-03-26_Canva_FinalGray

You should now have two files, one containing button graphics for the active state, and one containing button graphics for the inactive state. Unless you changed the title or button text, the files will likely be named TITLE.png and TITLE(1).png.

2. Tweak and crop the buttons

Open the first file in Preview. Now, youā€™ll need to do a bit of tweaking here, since the graphic as created from Canva has two one-pixel vertical, lighter lines in it, one at the beginning and one at the end. You could just live with them as-is, but I like to take a little extra care to make my graphics as nice as possible.

If youā€™re on Windows, you might try an image editor such as IrfanView with the IrfanPaint plugin.

Click on the ā€œShow edit toolbarā€ button (the pencil in a box). Then click the Text Tools (I knowā€¦bear with me hereā€¦). This will bring up some font options, including a colour selector just to the left of the Typeface name. Click ā€œShow colorsā€¦ā€ to get the Apple colour palette up.

Preview Choose Colour

Use the magnifying glass to select the buttonā€™s main blue colour. Select the line tool (see below). Zoom in so you can see what youā€™re doing. Draw over the light line with the line tool. You can use a slightly thicker line so you donā€™t have to be so precise. Do the same thing with the line on the left side. Make sure you avoid drawing right to the edge, destroying the anti-aliasing effect. (I also tried achieving the same effect by copying/pasting a rectangular selection of the blue colour, but I found that resizing the pasted colour was a little unpredictable.)

Preview Line Tool

Select the magic wand tool, then click and drag across the blue part of the button to select it. (Maybe Iā€™m dumb, but this took me a bit to figure outā€¦just clicking doesnā€™t select anything, you have to click and drag.) Once it’s selected, copy it to the clipboard.

Preview Magic Wand

From the File menu, choose ā€œNew from Clipboard.ā€ Then, save the file in PNG format. You did it!

Draw over the remaining lines in the other two buttons, and likewise save them. Save your changes and close the file. Open the file with the gray buttons and repeat.

3. Insert into FileMaker

Remember that the active button should be blue, the others gray with a blue hover effect. So youā€™ll be creating five separate button styles:

  1. A blue ā€œactiveā€ button for the first step
  2. A gray button with a blue hover effect for middle, inactive steps
  3. A gray button with a blue hover effect for the last step (inactive)
  4. A blue ā€œactiveā€ button for the last step
  5. A gray button with blue hover effect for the first step

To begin, letā€™s create the first button, which is blue, with no hover effect. Start by creating a new button object. Make sure itā€™s a little larger than your button graphic. Select it. In the Graphic section of the Appearance tab in the Inspector, set the Line attribute to ā€œNone.ā€ Under Fill, select ā€œImage,ā€ then ā€œChoose.ā€ Select your first blue button file. Adjust the object handles so that they are about the same size as the graphic.

FileMaker Image Fill

Next, weā€™ll create the second button. This one will be gray, with a blue hover effect. Start by duplicating the first button. Select it and replace the blue graphic with the gray graphic that has the cutout on the left and an arrow on the right. Next, choose ā€œHoverā€ under the Style section, then select the corresponding blue graphic for the Image fill.

FileMaker Hover Options

If you need to resize the buttons, you can choose ā€œScale to fitā€ instead of ā€œOriginal Sizeā€ just under the image in the Fill options before you adjust the object handles.

All thatā€™s left is to attach your scripts and arrange the buttons on the layouts themselves. Because the transparency is preserved, you can nest the buttons quite close together, and FileMaker respects the custom shape when you hover over the button (Update: I previously said ā€œwhen the button is pressed,ā€ but this was incorrect, sigh). It creates a nice, slick progress tracker.

Progress Step 1Progress Step 2Progress Step 3Progress Step 4

Writing out all the instructions makes it seem long, but in reality creating the buttons should only take about half an hour or less, once you know the procedure.

I hope you enjoyed this tutorial! If you found it useful, let me know in the comments below.

Alexis Allen

About the author

I'm a certified FileMaker developer based in Toronto with over 20 years of experience. I've designed solutions for desktop publishing, signmaking, packaging design, marketing and advertising. I have presented several times at the FileMaker Developer's Conference in the US on the topic of design. As a lifelong student, I enjoy all creative pursuits.

Leave a Reply

Your email address will not be published. Required fields are marked

  1. Hi Alex – thank you for the description of your process and for taking the time to provide the details – much appreciated – Canva looks interesting and I look forward to experimenting with your approach – Cheers, Nick

  2. Thank you! This is exactly what I was looking for!!! Your instructions were very well written and I appreciated all the links to helper apps, too. Regards from Snowy Minnesota. (A bit jealous of the Howard, the previous reply) šŸ˜‰

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}

Subscribe to our newsletter now!