This website allows users to input class names and IDs, and extracts from the IDs the class level. It then adds to or edits a list of classes, IDs, and levels, and reports to the same page of the website a list of the classes and their information. This list is reprinted every time a new change is made to the data.
In order to use the application, one must input the class name and number into their respective fields and press the sunmit button. If the class number is unique, a new class will be added to the list. If the class number is the same as one already in the list of classes, the older class name will be replaced with this new name.
I used flexbox for the title ("Class Data Manager" in blue) and the description of the website in orange, lining them up next to each other.
- Tech Achievement 1: I have made this application single-page. There are two fields in which the user can enter class names and class numbers, and every time the submit button is pressed, the updated list of classes and numbers is re-printed on the same webpage. The user can still press the button and continue to reprint the list on the page after it is initially printed.
- Design Achievement 1: I tested my UI with two individuals; My tasks and notes for each of them are listed below.
User 1 Task: First, add the class “Webware” with ID 4241. Then, update the class name to “Webware: Computational Technology”
User 1 Last Name: Smith
User 1 problems the user had: She wished that the text in the input fields would disappear when she went to input information.
User 1 comments that were surprising: The text was a little too small and the orange was a little hard to read.
User 1 changes I would make based on feedback: I would make the text in the input fields be something that disappeared when the user went to click on it. I would also change the font, color, and size of the text on the website to be easier to read.
User 2 Specific task: First, add the class “Bean Time” with ID 2326. Then, update the class name to “BEAN TIME”
User 2 last name: Goldinger
User 2 problems the user had: She neglected to read the instructions for updating and got confused on how to do so until she saw the instructions. She also didn’t like that the text in the input fields didn’t disappear when they
User 2 comments that were surprising: It was very simple but she didn’t notice that there were instructions at the top of the page. She thinks the font was too small.
User 2 changes I would make based on feedback: Make the directions more obvious and add the word “DIRECTIONS:” to them. I would also increase the font size somewhat.