Interface issues for a spreadsheet.

Given a basic design "concept," we might next consider its implementation. How will the user interact with the basic design? How can we code the basic functionality we have in mind? What compromises in initial design may have to be made for implementation to be practical?

  Col1 Col2 Sums
Row1 2 3 5
Row2 5 7 12
Sums 7 10 1

basic layout/design

Desired functionality -- for each user action what should the response be?

One approach is to make a map of all different parts of the screen by all possible user-actions. What are the basic user actions? The user can click on a numeric cell; the user can type keys while a particular cell has focus; the user can click on a column name; the user can click on a row sum; the user can click somewhere off of the spreadsheet. Etc., etc. How important are all these things? 1 - crucial; 2 - very;  3 - nice; 4 - someday.

 

parts of the html (or SVG) page

 

Basic user actions

  numeric entries summing cells (not user-writable) row and column names (user-writable?) off the table
mousedown in new cell nothing? calculate sums of previous rows and columns? nothing nothing? load contents into variable? nothing - 1
mouseup in same cell as mousedown provide focus; 1
highlight current data?
highlight row or column? provide focus? N/A
mouseup in different cell than
mousedown
highlight for block copy? 4 highlight group of rows or colums? highlight group of rows or columns? erase cell? - 4
keydown&keyup
(numeric)
show keystroke-1;
calculate sums of previous rows and columns?
nothing 1 rename column or row? HELP screen?
keydown&keyup
(non-numeric)
nothing? HELP? nothing 1 rename column or row? HELP screen?
TAB key move to next active cell  2; leave current cell unaffected 1 ; move beyond inactive cell ? place cursor in first active cell? -2
load/reload page place cursor in first active cell? -2 nothing nothing nothing?

Implementation issues:

1. Given that the highest priorities (in red) seem to be to enable the user to use the mouse to choose a cell in which she may then begin to type; it is natural to ask what sorts of things can be clicked on and what sorts of things can be typed into?

Naturals are:

Clickable things: the page

the div

the table the
link
focusing "body onload" or "element onblur" ?? ?? some text


Herewith some random text.

And some other text.

Here is some code which handles some (but not all) of the above concerns. Extra credit if you can improve it.