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) ;)
-
2Not an answer to your question, but I think it's not a good idea to make 0 and 1 unreachable once you're past them one time. I've never experienced a tabbing order like this.– virtualnobiMay 3, 2017 at 5:48
-
1Shift+tab lets you tab in reverse :)– Vitaly MijiritskyMay 3, 2017 at 15:15
-
Once 0 and 1 are entered they stay sticky. You add multiple HPs, but keep 0 and 1 the same. You submit the time card data with multiple HPs, and it starts over with new 0 and new 1. Hard to explain, but it's for a complex data entry app, this is just a part of the form...– janehMay 3, 2017 at 15:18
Add a comment
|
4 Answers
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.
answered May 2, 2017 at 20:14
-
I like the idea of trailing lines, reminds me of an eye tracker. Would you include numbering as well as trails? I am showing a simple form here, but this is for a complex "no-mouse" data entry application, tabbing order needs to change based on previous entries, context, time card type, etc. no way to get around it... Documenting tab order has been a head scratcher here.– janehMay 3, 2017 at 15:14
-
Yes, if it's complex, numbering can help your readers (the developers) to better find their way around the overall flow. May 3, 2017 at 15:18
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)
*Like this thrown-together example:
-
I think I would have to show both the "regular" wireframes document with screenshots, and duplicates with tabbing order and notes... ?– janehMay 2, 2017 at 20:18
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.
answered May 3, 2017 at 4:49
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?
