7

I'm working on the front end for a sudoku program I wrote for fun. I'm debating which interface is most logical: an interface entirely click-based, or a standard keyboard entry method.

Click Based: The pro to this method is that you don't have to switch between the mouse and the keyboard (granted most people do have two hands...). You could click on the desired square, and click a value from a list that would appear. This would also make it easy to port this over to mobile devices.

Keyboard Based: With this method, the user could click the desired square, or use the tab key to navigate between squares. I've found that this makes entering values initially (e.g. when filling the board with starting values) easier, however makes it more tedious after that as I find myself moving my eyes from the monitor to the keyboard.

What are your opinions on this problem? Is one way better than the other?

2
  • i play sudoku and I think keyboard based is better, because its faster. when you play sudoku on time you want to get the best time possible and clicks are slow(however i play sudoku only on mobile phone, its the best mobile game for me).
    – 0101
    Jan 30, 2011 at 20:27
  • I have just finish building my client-side Sudoku game: sudokubum.com
    – vsync
    Jun 26, 2011 at 7:16

5 Answers 5

8

General

You basically have two operations:

  • Select cell
  • Change value of selected cell

each should be possible with keyboard or with mouse, and I should be able to select a cell with the mouse, then enter the value by keyboard.

While switching between mouse and keyboard is expensive and should not be necessary for an experienced user, it is common during learning the mechanics of an app: mouse for exploration, then trying obvious keyboard methods to speed things up.

Mouse only
Click on a cell, then click on the number.
In this particular case I would avoid a popup near / around the cell clicked, because it can cover the surrounding cells which contain the hints for which value to pick.

A separtre "values well" (i.e. to the right or bottom of the sudoku field) is bad for mouse, but ok for touch.

An interesting method would be putting the choices into the cell e.g. as a small 3x3 matrix. But even with a non.hiding popout or a "fisheye" effect for the selected cell, the targets are probably to small for fingers. That could be "saved" by making the neighboring cell the click target - which would require some visual cues, but might mix the "cell-centered popup" with "don't hide".

alt text

[edit] Note: I do not recommend to implement both wells, I just put both option into one picture. [/edit]

Keyboard
Select cell with arrow keys (or the "4-way-controller"), enter digit (if available), or press enter/space to access the "values well" and 4-way-controller to select value.

Mixed Mode A typical method might be selecting the cell by mouse (click on it), then enter the valeu by keyboard (type the number). Works perfectly for mouse-lefties with the numeric block - but be aware that there are tow orientations of the numeric block are common.

2
  • Wow. Amazing answer!! I really like the idea of putting the matrix INSIDE of the cell. Brilliant. I will have to deal with the size issue, but I'll figure something out. Thanks so much!
    – williamg
    Jan 22, 2011 at 20:42
  • P.S.: great diagram!
    – williamg
    Jan 22, 2011 at 20:42
12

How about giving both options? I think some users prefer using the keyboard and some don't, and as you said, even the same user may prefer the keyboard some times, and the mouse another times (for example, when using a trackpad instead of a mouse, I would choose the keyboard option, but if I had a physical mouse, I'd choose the mouse option).

If you allow them to enter the numbers using the keyboard and also allow them to select a number with the mouse (maybe a virtual numpad could appear after you click the cell?), you'll cover a larger number of users, and I think the extra effort of giving both options is worth it.

4
  • 1
    This isn't a bad idea. I could allow them to have it mouse based, and provide the list of numbers, but allow them to select the numbers with the keyboard. I like this idea...
    – williamg
    Jan 12, 2011 at 22:40
  • This is a bad idea. Make a decision. Test it. Change it if it does not work. Jan 13, 2011 at 10:09
  • 1
    @Vincent Robert: Keyboard vs. Mouse is a user choice, not a decision the developer makes.
    – peterchen
    Jan 22, 2011 at 21:25
  • Why not prefill the field with a number on click and allow them to change the number with the scroll wheel? Jan 27, 2011 at 4:58
2

If you have to choose, mouse-based. But instead of a list, offer a 3x3 matrix to choose the number.

5
  • Interesting point about the 3x3 matrix. Why do you suggest that? Jan 12, 2011 at 14:31
  • Because it's a good fit for the overall look&feel of a sudoku, and it reduces mouse movements and (vertical) space requirements.
    – ammoQ
    Jan 12, 2011 at 14:49
  • I'll consider this, as it would reduce mouse movement. However, it would INCREASE vertical space requirements, as opposed to providing a horizontal list of the numbers. Thanks for the input!
    – williamg
    Jan 12, 2011 at 22:39
  • How would it increase vertical space? I think you should use overlays, so the matrix just appears on top of the rest. Then there isn't much need to use more space.
    – Inca
    Jan 13, 2011 at 11:09
  • Oh ok, I wasn't thinking about an overlay. Thanks for the idea!
    – williamg
    Jan 13, 2011 at 22:00
2

Typing the numbers will require a lot of moving from mouse to keyboard and vise versa, or loads of tab clicks.

Selecting from combos can be frustrating.

I'd go with a different approach - either mouse only, or keyboard only.

  1. Mouse only: Offer a 1..9 range of numbers at the sides, which can be dragged over squares. Also, for beginners, you can reduce the drag and drop options, to fit the legal possibilities for each target cell.

  2. Keyboard only: Use qweasdzxc as arrows for navigation and the number pad for inputs (even if numlock is off). That way, only the keyboard is required.

1

I think the best way is using the keyboard, but if you use the keyboard: does it makes sense to build a 3x3 panel (and eraser)? The answer is: "Simulate"

In your place, I would strive to make an application to these two implementations:

  1. If you use the keyboard: Simulate keystrokes in the 3x3 panel.
  2. If you use the mouse: Use the 3x3 panel.

In this way you would have both, and customer's comfort.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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