Time Table Management System (Prototype)
Login Page
Experts note that the login form is like the “front door” to the system 1 . The Login Page is the first screen
an administrator sees. It contains just two simple text boxes – one for Username and one for Password –
and a big “Log In” button. This clean, uncluttered design (with minimal fields) helps authorized users sign
in quickly 2 . For example: - Username box: an input labeled “Username” where the admin types their
user name.
- Password box: an input labeled “Password” for the secret password.
- Log In button: a prominently colored button under the fields that the admin clicks to log in.
- (Optional: A “Forgot Password?” link below the password box can help recover a lost password.)
Only administrators with valid credentials can log in. If the admin enters the wrong username or password,
a clear error message appears and the system stays on the login page. The goal is a straightforward,
welcoming login screen so admins don’t get stuck at the entrance 1 2 .
Dashboard
The Dashboard is the home screen after login. It shows the main options as clearly labeled buttons or links.
A well-organized dashboard uses clear labels and logical grouping 3 , so the admin can find what they
need at a glance. For example, the Dashboard might display five main options: View Timetable, Add/Edit
Timetable, Manage Teachers, Manage Classes, and Logout. Each option is arranged in a grid or menu
with a short label (and maybe an icon) so it’s obvious where to click. The page may also show a welcome
message like “Hello, Admin!” at the top.
• View Timetable: Go here to see the full schedule.
• Add/Edit Timetable: Go here to create or change class entries.
• Manage Teachers: Open the teacher management page to add, remove or edit teacher details.
• Manage Classes: Open the class management page to add, remove or edit class groups or subjects.
• Logout: A button (often at the top right) to end the session.
All these options are grouped together on one screen with a consistent layout 3 . Clear headings and
spacing help the admin scan the choices quickly without confusion.
Timetable View
When the admin clicks View Timetable, the system shows the schedule in a table (grid) sorted by day and
time. This table has days of the week (Monday, Tuesday, etc.) as column headers and time slots (e.g. 9:00,
10:00, …) as row headers. Using a table is efficient for organizing complex data 4 , so the schedule is easy
to read. Each cell of the table shows the class that meets at that day and time (for example, “Math – Mr.
1
Smith” or “History – Room 204”). Color-coding can highlight different subjects or class groups to make it
visually clear.
• Columns = Days: Monday through Friday across the top.
• Rows = Times: 8:00, 9:00, 10:00, etc. down the side.
• Cells = Classes: Each intersection cell shows what class (subject and teacher) is scheduled then.
• Scrolling/Page: If the timetable is large, the admin can scroll or navigate pages.
Because tables organize information clearly, the admin can quickly find any class by scanning the right row
(time) and column (day) 4 . The Timetable View might also include a print or export button to generate a
paper or PDF copy of the schedule.
Add/Edit/Delete Entry
Clicking Add/Edit Timetable (or an Add button on the Timetable View) brings up a form to create or change
a class entry. The form follows common usability guidelines: keep it short and group related fields 5 6 .
In other words, the form only asks for the essential details and places related inputs together in a simple
layout. For example, the form might look like this:
• Class name: a text box or drop-down to choose the class or subject.
• Teacher: a drop-down or text box to select the teacher for this class.
• Day: a drop-down menu (Monday, Tuesday, etc.).
• Start Time / End Time: two time selectors (e.g. 10:00 AM start, 11:00 AM end).
• Location: (optional) a text box for room number or location.
Fields are stacked in one column with clear labels (no confusing instructions). For example, all time-related
fields are next to each other, and the teacher box is near the subject box, so the admin can fill in each group
easily 6 . The form includes two buttons at the bottom: Save (to submit or update the entry) and Cancel
(to go back without saving). Because the form is kept as short as possible 5 , the admin can complete it
quickly.
If editing an existing entry, the form opens with the current details filled in. The admin can change any field
and click Save. To delete an entry, there might be a Delete button either on this form or next to each row in
the timetable. If the admin clicks Delete, a confirmation pop-up asks “Are you sure?” to prevent mistakes. A
clean, simple form design makes it easy to add, update or remove classes without confusion.
Search or Filter
The system provides search and filter tools on the timetable pages so the admin can quickly find what they
need. For example, there might be a search box or filters at the top that let the admin narrow the timetable
by class or day. When filtering is well designed, the experience feels intuitive and users feel in control 7 .
• Search box: The admin can type a class name, teacher name, or keyword. As they type, matching
entries in the timetable can be highlighted or shown.
• Filter by day: A drop-down (or tabs) lets the admin select a day (e.g. “Monday”) so the table only
shows Monday’s schedule.
2
• Filter by class/teacher: If available, drop-down menus can let the admin choose a particular class or
teacher to view only those entries.
After entering search terms or selecting filters, the timetable updates (either automatically or after clicking
a “Search” button) to show only the relevant rows/columns. This is helpful if the admin has a long schedule
to sift through. Because the filters mirror the data (day, class, teacher, etc.), the admin easily understands
how to use them 7 . A well-placed search box and clear filter labels ensure the admin can find a specific
class or time without getting overwhelmed.
Logout
Throughout the system (for example, on the Dashboard and all main screens), there is a clearly labeled
Logout button or link. Following good navigation design 3 , this logout control is usually placed where
users expect it (often at the top right corner). Clicking “Logout” immediately ends the session and returns
the admin to the Login Page. This makes sure that only authorized users stay in the system.
• Logout button/link: Visible on every page (especially on the Dashboard), labeled “Logout” or with a
logout icon.
• Action: When clicked, the user is signed out and sees the Login Page again.
The logout feature is straightforward and easy to use, so the admin always has a quick way to securely exit
the system.
Sources: User interface guidelines and examples 1 2 3 4 5 6 7 were used to inform the
design recommendations above.
1 Building better logins: a UX and accessibility guide for developers | by Stacha_C | UX Collective
[Link]
2 Guide to Login UI Design (With Login Page Examples)
[Link]
3 Dashboard Design: best practices and examples - Justinmind
[Link]
4 Data Table Design UX Patterns & Best Practices - Pencil & Paper
[Link]
5 6 Website Forms Usability: Top 10 Recommendations - NN/G
[Link]
7 Filter UX Design Patterns & Best Practices - Pencil & Paper
[Link]