4

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.

enter image description here

Short Version

Implement (i.e. provide UX specifications) keyboard shortcuts for the widget in the image above.

Long Version

  • 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 A or R buttons in the tile (well, these will eventually be + and - images)

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.

Technical Stuff

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.

Improve this question
6
  • what's the correlation between the coloured tiles and the type of widget you receive?
    – DarrylGodden
    Apr 28, 2015 at 10:15
  • @DarrylGodden Irrelevant. In my example, colours are random, as well as the widgets. I've excluded the business logic, as it is quite complex. In the purple tile, for example, you may add as many combo boxes as you wish.
    – Georgian
    Apr 28, 2015 at 10:24
  • So how do users makes an informed decision on which title to select?
    – DarrylGodden
    Apr 28, 2015 at 10:26
  • @DarrylGodden Well imagine the buttons (subsequently the tiles) are car names, and the widgets in each tile are the car features. They will select exactly what they need, so they know where to go.
    – Georgian
    Apr 28, 2015 at 10:29
  • 4
    My advice is to re-do your example wire frame with real world controls/data, it's very difficult to understand place-holder text in a real world scenario when we don't know your business or the use case for this app.
    – DarrylGodden
    Apr 28, 2015 at 10:33

1 Answer 1

Reset to default
4

I would put this on a comment but I don't have enough reputation.

In your case I believe the problem is you don't have a good UI for the small actions defined and want to solve it through keyboard shortcuts.

Maybe you could rethink the whole process, simplify it an then think again about the shortcuts?

Why does it take so many clicks? How many panels can there be on the left? Maybe you could have a quick actions search? For me it makes more sense to rethink the whole interface before patching it with keyboards.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.