Uniformity and overview

Question

I have a system to register attendance, displayed on a screen on the premises. First the user chooses his/her class, and then his/her name, which results in an "attendance registered" screen, which closes after 5 seconds, if no other input is given.

The class detail screen is agrid with three columns, with a "button" with the student's name in the center.

My issue is that some people with long names require very wide buttons. My interim solution is to display a "button" wide enough to display the longest names. This gives me a couple of issues:

1. There is not very much space left over. Since the buttons are the same length and colour, in big classes (~35 students) the overview is lost, and the kids who are slow readers, and the older grown-ups have trouble finding their name in time.
2. There is not enough screen real-estate left for displaying a starting letter or group (e.g. A, B, C or A-C, D-F, etc.)

How can I reduce the size of the buttons, without losing the uniquenes of the name? I considered replacing middle names with initials, but I am worried that for some names the uniqueness will disappear.

Any suggestions are much appreciated

EDIT: This is my current layout. I forgot to mention that I have some restrictions. This is running in a Chrome browser in Kiosk Mode, and gestures do not work, which means that scrolling/gestures are out of the question. I am trying to fix that issue, but given my timeframe, it is not viable to wait for that.

Answer 1

Could you use just first name and initial?

Could you widen the button to span the three columns?

From the way you describe it, it seems like the student is choosing their name from a list of all names in the class. Couldn't this be just that - a list instead of a grid?

Answer 2

Users need to orient themselves on the screen without having to read individual names.

Ordering names alphabetically in columns, rather than rows, would allow the user to get to the right area more quickly. In rows, eyes have to go back and forth 11 times across the width of the screen, in columns, they need only 2 back and forth across the height.

Considering you can't include headers for letters or group of letters, I would emphasize the first letter of each name visually (last name if alphabetical order is based on last name). If the letter stand out enough, the user can find their way through the screen without having to read each name.

Answer 3

When screen space is limited and shared, nobody's extra long name should abuse this common resource. Therefore let it be, say, first name and last name and possibly some middle, or its initials. For groups of up to 35 probability of name collision is very small. In this case a student should be able to choose their screen name.

So, keep students' screen names in separate field and edit them when needed. And by default generate them from full names according to some algorithm.

Shorter versions of names may also increase readability.