I have this widget which will be widely used. It takes quite a few click to perform a relatively small action.
Thus, I've decided to implement keyboard navigation, but I'm having trouble laying it out on paper.
Implement (i.e. provide UX specifications) keyboard shortcuts for the widget in the image above.
- Both panels are scrollable
- The buttons on the left are checkable, and use colour coding.
- The tiles on the right show up depending on the selection state of its associated button on the left
- Each tile contains specific widgets (e.g. one may contain hyperlink, whilst the other combo boxes)
- The user may add/remove widgets by pressing the
Rbuttons in the tile (well, these will eventually be
My First Solution
At first, when the widget is presented, the
Left Panel and the first toggle button are "selected". The user moves between the buttons with UP and DOWN and at the same time between panels with LEFT and RIGHT. To toggle a button, user presses ENTER or SPACE.
Intuitively, if the
Right Panel is selected, you may traverse between tiles. If you press ENTER whilst on a tile, the widgets inside gain focus, and you may move between them with the arrows. To "escape" a tile, user presses ESC.
Finally, widgets are added with CTRL++ and CTRL+- combinations.
I don't like this solution because you constantly have to pay attention to the scope of the selection (whether you're now moving in a tile, or between panels)
My Second Solution
Associate keyboard shortcuts all over. Each button in the
Left Panel will have a unique letter, and tiles will be shown using CTRL plus those letters.
If a certain tile was already added, it will gain some sort of focus, so that the user knows which UI element currently receives keyboard events.
I don't like this one because there are many shortcuts to remember, and I'll have to put hint widgets all over.
With that being said...
I'm open to new soltions, as well as improvements to the current ones.
This widget is in protoype stage, so huge changes can (and will) be made. I'm aiming for top notch UI and UX at the same time.
The widget is used in a desktop application, built in Java with SWT+JFace. All coding (shortcuts etc.) will be implemented by myself. Hopefully not from scratch.