Using Focus Order

Establish your product's focus order sequences and focus items

Focus Order lets you annotate the sequences and focus elements in your product or websites, establishing the tabbing journey for individuals that can’t (or choose not to) use a mouse to ‘tab’ through your product. These clear and concise annotations remove any guesswork during the designer/developer handoff.

Focus Order ultimately ensures that users won’t get lost while navigating your page, forcing them to leave. Designing an easy-to-navigate experience can help keep your users engaged.

Using Focus Order with Figma and Sketch Plugins

Download: Stark for Figma, Stark for Sketch

To use Focus Order in your design tool, go to Plugins and choose Stark > Focus Order. The plugin can now be used to annotate your design file.

Creating Sequences

Creating multiple sequences with Focus Order.

Sequences are the group of focusable order items that you set. You'd typically set sequences per screen on applications or even per section of a website. Select the Sequences tab to create a new one, type in a title for that sequence, and click Create new.

Once a sequence has been created, you’ll be moved to the Focus items tab. You can return to the Sequences tab to create more sequences.

Adding Focus Items

Focus Items are the annotations used to identify the interactive elements within a sequence so that users can access interactive elements in an order that makes sense.

Editing the name of a Focus Item in Focus Order.

To add a new focus item, select an interactive element on your artboard and click Add item in the plugin. Interactive elements include buttons, input fields, and links (both text and image links). All of these items need to have a set order to give users a clear journey to follow.

Items will be named and numbered as you add them. An item will take on the name of a selected element by default (e.g., Navigation), but you can change the name of any item you add. Hover over the items to view the different organizational options.

It's important to create a logical order. For instance, if you have an iOS Splash screen with a Skip button and tutorial at the top, you'll want to annotate the Skip button first, giving users the option to bypass an experience without having to tab through a page’s full navigation menu.

Exporting your Focus Order annotations

Focus Order in Stark not only annotates your design by displaying numbered badges but also includes these annotations in your design tools layer tree. This makes exporting to your fellow designers, developers, PM’s, or any other stakeholders on your team much easier.

Using Focus Order in your browser

Download: Stark for Brave, Stark for Chrome, Stark for Edge

To get started using Focus Order, open Stark from your browser’s extension menu. Stark will automatically scan the live web page and surface the existing tabbing order on your page.

This enables you to scan your page for incorrect, unclear, or missing sequences and focus items, so that you can either share these findings with your wider team, or make the appropriate changes to your designs.

Using Focus Order for Mac

Download: Stark for Mac

“Focus Order display annotated focus items on an artboard in Stark for Mac.

Focus Order in Stark for Mac lets designers, developers, PMs, and anyone else on your team quickly establish, review, and implement the focus order sequences for your designs.

Stark for Mac’s Tools menu, with the cursor hovering over Focus Order.

To use Focus Order in Stark for Mac:

Open an imported project
Choose an artboard
Choose Focus Order from the right side panel.

Creating your sequence

A live cursor and editable field has appeared around the focus item’s existing name, allowing the user to edit the name of a focus item.

To create your sequence and add Focus Order items, click Add item and a new sequence will appear. Be sure to click the three dots in the upper right corner of your new sequence and rename your sequence.

Drawing your focus items

A cursor drags a dashed box around a focus item that reads “plants.co” to demonstrate how to annotate focus order items.

Begin drawing around your interactive elements to label focus items. These will be annotated with numbered badges, designating its place in your sequence.

Renaming your focus items

Right clicking a focus item lets you add a title to your Focus Order items, ensuring clarity among both your designers and engineers.

Deleting focus items

A cursor hovers over “Delete item,” which has appeared after clicking the focus item.

To delete a focus item, simply right-click the item and select from the menu.

Rearranging your Focus Order

A focus item being dragged up and down to rearrange its position in a sequence.

To rearrange the order of focus items in your sequence, click and drag the items to set the desired order. As you change the order, the numbered badges will update to reflect your changes.

Have any questions about using Focus Order? Don’t hesitate to reach out to us at support@getstark.co or via the support bubble in the lower right corner of this page.