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. 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.

  • do you have a mock to show your efforts so far? I will be more helpful to have something to show your efforts and constraints.
    – Mike M
    Nov 16, 2018 at 13:57
  • @MikeM i added some dummy data to my test system and took a screengrab. i also updated with som of my constraints.
    – JoSSte
    Nov 16, 2018 at 19:20

3 Answers 3


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?

  • Hi Natalie. thank you for your suggestion. I have updated my question with the reason for not attempting a bare list. the other reason is that with two classes comming in within the same 15-20 minutes, having to scroll through a list is not ideal. as long as the number of students registered is not varying too much, then the students will find their positions fairly quickly, or at least they do in the current setup.
    – JoSSte
    Nov 16, 2018 at 19:20

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.


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.

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.