Contributor: Nina Pagano, Yutao Wu, Zhihan Zhou, Sizhe Li
Task: The task that our group will be implementing in our P7 prototype is our final task scenario. This scenario is the results screen after the questionnaire portion of the career test is completed. The user will have to navigate from the results page that gives an overview of their scores to a broader, more in depth look at the results to find information on other potential careers and their descriptions, as well as links to resources based on the resulted careers.
Component: A component our group decided to use for this prototype is interactive data selection. We believe that this component is necessary for our prototype’s task scenario in terms of promoting links to resources regarding career and major opportunities based on the results.
Platform: Chrome
Based on this task, we included aspects of a couple Norman Design Principles. These principles are visibility, constraints, and consistency. First of all, our project includes visibility because we use visuals to explain the results and the key attributes that our questionnaire will be testing. The other design principle that we used is constraints. We made the prototype so that the only way a user can see a more detailed version of their results is by clicking on the summary results required. This limits where the user can click and access information. Furthermore, we made it so that our users would only be able to advance to through the task by clicking on the correct set of data in order to see expanded results. We also use the principle of consistency throughout this prototype. We make our user navigate through many pages in order to accomplish their task, so we make sure that the styling, fonts, and general layout of the pages are consistent.
Our prototype applies to the graphic design principles that were discussed in class. In the creation of our results reporting form, we effectively make use of the alignment and repetition principles. For the alignment, we align the result circle and corresponding text together, centralize all the result circle lizes remained the same throughout the page and that the spacing between fields and text-entry boxes were consistent. The size of the text-entry boxes also remained constant throughout the task. The repetition of these consistencies is necessary to keep the user on task and creates less of a chance that they get distracted or take too long while completing their registration.
We ensure the accessibility of our application in several ways. First, we use "blue", "white" and "gray" as the background color, which enables people with red-green colorblindness to be able to easily identify the content shown on the interface. Second, for blind people, we would take advantage of some third party applications, "screen reader" for example, to help them be aware of all the information shown on the interface. Besides, we always follow the design principle that making the headers as informative as we could. The combination of our effort and the support of the third party application would make sure that our application is very accessible for different people.
When testing our first prototype this past week, we encountered a few key observations that our users made. One big thing all users noticed was that when they were creating an account on the first registration page the password wasn’t hidden. The other thing people noticed was that the section labeled “location” was the only section they didn’t find quite intuitive. They thought it could be interpreted in many different ways like “school location” or “hometown.” Many also felt confused once the account was created as there was no feedback when the entire form was filled out. One user also noticed that you can continue on to the next portion of the registration without filling out any and all of the fields. The user also noticed that our form did not check for valid fields, e.g. letters can be put into the phone number textbox.
Based on these observations we have decided to make a few key changes to our first prototype. Some are easy, for example, changing the password textbox type to password so it hides the entered text. We are also going to make sure that our code is checking for valid inputs in each text entry box and that all the fields are filled in before moving to the next section. We are hoping to also have a way for users to feel that their accounts have been created correctly and that they know they are finished the task. Overall, we found that the colors may have made it harder for users to read and view the forms so we are hoping to restyle and choose different colors.