由于一些机缘巧合,我得到了英孚教育的一个设计小课题:教师线上管理系统中考勤模块改版设计。时间是一周,由于工作日还是要上班,所以只有晚上和周末才能做一下这个设计,考虑的问题可能不够全面,设计部分也略粗糙,但是整个过程中我逐渐形成了一种系统的思维方式。
(拿到的需求用的英文描述,以下的中文是我自己翻译的)
背景
英孚为3到17岁的学生提供英语课程。每个课程最多会有15位学生,并且每两周上一节小课,课程总共有60节小课。
教师有中国籍和外籍,外籍教师不懂中文,所以学生在课堂上都使用英文名字。
为了记录课程信息,例如学生信息、出勤情况和作业得分,教师会使用线上管理系统,系统也会把这些信息分享给学生家长来查看。
痛点
目前的线上管理系统不够优化,课堂上教师使用纸质文件来记录出勤情况,并在课后把这些信息输入到线上管理系统中。教师经常不能及时地将信息输入到系统中,甚至有些时候会忘记输入。
系统只允许教师将学生标记为“出勤“和”缺席“两种状态,没有”迟到“的选项。
由于以上两条的原因,家长们无法收到孩子们出勤状况的实时信息,并且无法得知孩子是准时出勤还是迟到了。
项目目标
减少教师的手动操作过程
确保学生的考勤在课堂上及时的被记录好,而不是在课后。
出勤情况中要包含“迟到”的选项
向家长传达实时可靠的信息。
用户需求
教师
在课堂上使用教室的触摸屏或平板设备来快速轻易的记录学生出勤情况。
可以看到整个课程中学生的出勤记录。
课后可以用修改出勤错误,主要使用笔记本电脑或者智能手机。
所有的功能在包含了电脑、平板、手机之内的所有设备上均可以使用。
家长
能够每天观察孩子的出勤情况;可以看到孩子整个课程的出勤情况。
开始着手设计
开始着手设计之前,为了定好此次设计的重心,我提出了两个问题:
1. 为什么要记录学生的出勤情况?
2. 记录学生的出勤情况对教师和家长都有什么好处?
我向一些教师朋友和有送孩子参加补习班的妈妈们问了这两个问题,他们的回答大多是为了确保学生按时参加课程、了解学生缺了哪部分的内容、了解学生的的行踪防止逃课外出玩耍......
总结下来主要是有两点:
1. 根据出勤记录,教师和家长可以知道学生是否错过了某些教学内容,错过了多少内容,从而可以想办法将错过的内容补起来,从而达到更好的教育质量。
2. 好的出勤记录可以让家长对孩子的学习和安全问题都放心。
基于这以上两点,我决定设计一个简单的、可用的、易用的考勤系统,每当我想要在界面总增加一些东西或者是遇到一些困难,我就会回过头来看看设计目标,问题就会自然而然的迎刃而解。
此次设计主要包含三个模块:记录出勤、出勤情况概览、传递信息给家长。
UI1 记录出勤
设计要点
为了清楚的了解到缺席和迟到的学生错过的课程内容,出勤应和每一节课建立联系。
教师在课堂上应该关注教学内容,记录出勤要尽可能的简单快速,不花费时间精力来选择各种状态。
系统会自动根据老师的标记来记录学生迟到的时间。
工作流程
对于出勤状态,出勤和缺席的情况都是很简单的,迟到的情况就很复杂了,系统要记录迟到的时间从而了解学生错过了多少的课程内容,但迟到的时间长度的准确性取决于老师点名的时刻和操作的及时性。理想状态下老师在上课前点名,并且课程中有学生迟到时可以立刻标记,但是实际情况却往往不如意,老师可能会忘了上课前点名,课程过了一半才想起来,或者是有迟到的学生到教室时,老师正好讲到重要地方不愿打断只能稍后再做标记......
关于这些情况,我找到了一些解决办法:
假设上课时间是14:-16:00,在时间接近课程时间时,向老师发送点名提醒;
A. 课前点名,则在课间标记保存的学生均为“迟到”状态,计算迟到时间起始点为课程的开始时间,即为14:00至学生到达时刻之间的时间差为学生迟到时间。假设学生14:21到达,则迟到时间为21分钟。
B. 课间点名,第一次点名保存时,已到的学生为为“出勤”状态,从此时起直至课程结束期间,若有标记保存的操作,均为“迟到”状态,并以课程起始时间为起点计算迟到时间。例:老师14:30第一次进行点名,此次保存的学生状态为“出勤”,某学生15:00到教室,则状态为“迟到”,迟到时间为60分钟。
网格布局
布局上采用左侧边栏定款,根绝不同的屏幕尺寸设置不同的宽度;
右侧页面采用12栏的网格响应式布局。
主要界面
交互演示
我将记录考勤的过程用axure做了个简单的交互动作来模拟实际情景,可以点击链接 http://zbod5p.axshare.com 查看,加载速度可能稍微有些慢, 请见谅!
UI2 出勤概览
教师不仅可以看到每个学生在整个课程中的出勤状况统计,还可以看到每个小节课中所有学生的出勤情况。
主要界面
交互演示
UI3 向父母提供数据
家长可以看到孩子的实时状态,
家长可以看到还在在整个课程中的出勤状况,并可查看到缺课时长,并在补齐缺课部分后将其标注为“已补课”。
工作流程
主要界面
交互演示