Uniformity and overview
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:
- 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.
- 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.