I have never designed user interface before. And I have very little experience with front end technologies. This is my first opportunity where I have to make an interface for a mobie web app where the user could input about the students who are present and absent in a particular class on a given day.(Number of students is less than 30)

I want to just use HTML and CSS and avoid libraries. What is the best interface I could provide?

This is what I have been thinking:

The first idea was of course to give the list of all students and a check box, but it looked very boring and prone to human errors.

The second idea was to have list of student names in blocks and the user could tap on the student name to mark them as present and the rest will be absent. It looked better for me but still prone to human errors.

The third idea is the modified second idea. I still have students' names in block but the user have to swipe right to mark it present and swipe left to mark it absent. (no idea how to implement it). Am I over thinking?


2 Answers 2


If I understand you right, this is an app for the teacher, to record attendance of students at each lesson.

Put yourself into the teacher's shoes (or better, interview a few teachers) and think about the entire process:

  1. What is the teacher's motivation? A requirement by the school? The need to factor attendance into grading? You may identify opportunities for increasing motivation (such as automatic upload into school system, or summary information useful for grading).
  2. Teacher enters classroom, sees who's there. Does he know the students by name? Does he have to call out every name on the list?
  3. Are there patterns of attendance? (This is where teacher experience is important!) Is it useful to propose the attendance list from last lesson (or the average attendance), so that only changes need to done?
  4. How many classes does a teacher have? Is the schedule available in your app, so that you can present the class that is in session right now (without the teacher needing to select it)? Would the teacher want to enter attendance in front of the class (teacher motivations)?
  5. Do students always sit at the same place (again, teacher experience is needed!)? Would that help for recording (e.g., by representing the place arrangement in the attendance list)?
  6. Should there be a count of registered students, to check whether all have been registered?
  7. What about late-comers or early-leavers? Does the teacher have to change attendance information for them? (Maybe there are school regulations what counts as "attended"?)
  8. What device are you designing for? A list of 30 people is hard to see on a smartphone, but easy to organize on a tablet.

Once you have this information, you're ready to start design.

I guess I would - without all this information, which can only result by chance in a good design - go for a list of students, with a proposal of who's attending, ordered by frequency of attendance (to allow quick skimmming of those who are likely attending today again).

As a note to your swiping idea and Gustav's answer: I think the swiping idea is good since tapping is so easy: It's easy to tap the wrong student, or tap twice (assuming the entry is deselected again). Swiping is easy on the thumb (assuming smartphone!) and allows for simple corrections (teacher sees the wrong student moves, and stops swipe before it's completed).

If you add some more information, we might be able to give more specific advice.


I think your beginning is a good way.

I recommend you to read a short introduction into user-centered design. First you need to get your user requirements (who does what and why, what is the environment, life cycle, ...). You started already, but in your post the requirements are too generic, too formal - I guess that humans will using the app? If you have a good sense of the needs you can create ideas. And test your ideas with the user, early and often. As a thumb rule on each iteration (2-5 days) show the UI to 2-5 users, ask them what they think when they are in their situation, do they understand it, give them eventually a short task.

The third idea seems a bit burdening as the user interaction cost is higher than a simple tap (and why would be a swipe more intuitive in that case?).

  • +1 for prototyping. This is extremely important, and provided useful feedback, will make the tester feel helpful. :) Commented May 8, 2015 at 11:04

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.