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.
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.
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 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.
To use Focus Order in Stark for Mac:
- Open an imported project
- Choose an artboard
Focus Orderfrom the right side panel.
Creating your sequence
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
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
To delete a focus item, simply right-click the item and select from the menu.
Rearranging your Focus Order
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 firstname.lastname@example.org or via the support bubble in the lower right corner of this page.