A6: Ready for testing – DUE Friday, Nov. 16 @ 12:30am
It's crunch time! Your interactive webpage prototype needs to be ready for user testing by this deadline.
Step 1: Complete App's Functionality
By this deadline, your app should be completely finished and functional in terms of interactions (don't worry about finalizing detailed visual styles). If you're not on track to finishing, it's time to step up the pace.
Your app should have several webpages where users can submit and view their own data, which can be stored in their browser's localStorage (or on a real database in a server backend if you prefer). Use the feedback you received in studio to help determine what changes or improvements to implement.
Remember, we are not at the "making it look good" phase yet, so don't spend time on aesthetics unless all other components are already complete. Your user testing results next week will be much less insightful if your interface is still half-finished and buggy. So focus on finishing the interactions.
If you are creating a mobile web app, now is also the time to make sure your app fits into a mobile form factor, use Google device mode to help with this, or test on your own mobile devices.
Step 2: Develop a Protocol
For A7, you will be testing your app with real users. In preparation for next week, you will develop a protocol for testing your app. You will be using this protocol to do user testing throughout next week.
Protocols, or "usability scripts," help keep tests consistent across testers and facilitators. It gives exact, step-by-step instructions on how to test a user, often down to the exact words that the facilitator will say. Write a user testing protocol that covers:
Your protocol should be ~1-2 pages.
Step 3: Update Development Plan
Follow the development plan you created last week, and update it as you go. Mark tasks that have been completed and add new ones if you need to. Make sure that your next week is planned out with goals and who is responsible for each task. Be sure to add tasks for future weeks as well.
Here are some examples of development plans. If you want, use File -> Make a copy... to copy over the formatting for each spreadsheet to form the basis for your own plan.
GradeSource++: This example project abstracts away GradeSource for you and works with the data to show you where you are in a class.
Balancr: This app helps people balance their time between work and play. This team has done a wonderful job making the app functional-- you can create a sign-up, add activities, and see it reflected on the pie chart.
Submit a single well-formatted PDF file for your entire team with the following items concatenated within it:
Note: since we may grade your assignment up to a few days after submission, per the honor code, we expect that the prototype URL show the state of your prototype at the time of submission. You will very likely be updating your prototype after submission, but please do so on a separate URL.
Submit your single formatted PDF in Gradescope to the bin for your studio section. Only one team member needs to submit on behalf of the entire team.
Evaluation criteria & Grading rubric
The rubric below contains criteria that are worth one point each and will be graded independently and in a binary fashion.
Due In Studio: Teammate Assessment
Frequently Asked Questions
Q: What web frameworks or open-source tools can we use?
A: Anything you want, as long as you can meet the requirements of each assignment's rubric. Note that the teaching staff may not be able to help you beyond what is covered in the labs, so choose wisely (i.e., make sure the entire group is comfortable with the stack and none of you is burdened to handle things alone). We will only officially support the web stack that we teach in labs, so if you go above and beyond this basic stack, then make sure your team is fully comfortable using your chosen tools.
Q: Where can I find more web development tutorials and resources?
A: As a starting point, check out our web dev resources section.