When working on wireframes, how do you show tabbing order? I have a process/template for my wireframes, but I am still looking for ideas on how to show to devs tabbing order... I am playing with dong it this way, but if anybody has any suggestions, please show me your way... I also have to show the "cycling" order (no.7) ;)
You can take a screenshot of the wireframes and draw the tabbing path on top.
More importantly, if your tabbing order is too complicated to be described in a few words by a main guiding principle, it might be worth to look into it a second time. It's something that should be relatively easy to predict, and if it jumps all over the place, it can probably be improved.
Depending on how you're making your wireframes, and assuming it isn't as easy as indicating right on the wireframes themselves, I'd say you have a few options:
- a separate copy specifically used to indicate tab order
- an overlay for that purpose*
- an accompanying document listing tabbed items and their order (developers can handle documentation)
If I was to put my developer's hat on (and this is an assumption since I am not a developer), the easiest way is to have a list of the tab order and the UI element/component in a table, because that reflects the order or sequence that you want to represent in the clearest way. The wireframe simply puts it in a different order than what they want to achieve. Maybe they have a list of UI components, and they simply need to know what the index that they have to assign to each component is, so it might be an alphabetical listing of components with the corresponding tab order. As long as you have a consistent and unambiguous naming convention I think it won't cause any major issues.
It might sound a bit obvious, but different devs might need this shown in different ways. I would take your drawing and ask them what they think of it, since it would matter more than the opinions of designers. In the end, it is about translating the requirements to code, and how they code this is probably how they want to see it, but it might not make much sense for you.
you are using a 2 col template. This is compact and it was important to save screen space when pixels/ paging memory was limited in the old days. but now you do not have those restrictions. Why not use a 1 col template and avoid ambiguities?