A7: Final Presentation#
Overview#
Assignment Details#
For this assignment you will be building a functional prototype of the program you envisioned for your scenario story. Your program will build upon the work you completed in A4. Since our emphasis for the course is on novel interaction, your prototype can focus on how your program will function on a web or mobile device.
You are not required to build an end to end product that incorporates many of the common features across applications. User flows like registration, profile management, and checkout, already have fairly standardized user interface and interaction paradigms. Instead, your focus should be on the core features of your program and the interactions required to implement those features. The goal of this assignment is not to copy existing UI patterns, but rather create innovative and original interface elements.
Your first priority should be to iterate on your initial vision by integrating the feedback you received from your peer evaluations. You will bring together any changes you made based on peer feedback with the artifacts that you have created to develop medium-fidelity prototypes. You will then use these prototypes to develop a functional implementation of your scenario using the framework you identified in A3.
Part 1: Medium Fidelity Prototype#
For part 1, you will be creating medium fidelity prototypes of your program. As a team, you should decide how you prefer to communicate the intended functionality of your program and user interface. Since this will be your first attempt at a prototype, we would encourage you to avoid spending too much time perfecting every aspect of your interface as you would in a high fidelity prototype. Rather, you should focus on the basics like content, arrangement, and interaction. Remember you are not graded on visual design in this course.
If you would like to use a prototyping tool like Figma or Sketch for this part of the assignment, feel free. Although, you can also create medium-fidelity prototypes in other tools such as presentation software or drawing programs.
Your medium fidelity prototype will demonstrate the intended functionality of your program. You will explore the novel ways you envision your users interacting with your interface. If your team has different visions on how a particular widget or set of widgets should be implemented. You should create a prototype for each vision and elicit feedback from your peers during the class critique.
Features#
Most of the user interface patterns you interact with today have evolved over time through iterative cycles of the design, deploy, and evaluative process. Interaction paradigms like the cascading menu, cover flow, the collapsible scroll bar, and many others were not always as ubiquitous as they are today. Although many of these interactions now seem natural and expected, they were at one point considered ground breaking and novel.
For this assignment your goal will be to extend and improve existing interaction paradigms or envision something entirely new. In addition to the widgets and interactions common across user interfaces today, you must create two new ways to interact with content in your user interface. Unlike the widget toolkit you created for A2, you are not required to build your interface elements from primitives. Rather, you are free to make use of existing widgets (e.g., HTML, Bootstrap, etc.) as necessary.
For example, for a drone burrito delivery service, you might create an aggregate widget that lets you guide the drone to your exact location using only your thumb.
Scope#
As we have discussed, the output of this assignment is not supposed to be a fully featured program. You are only required to create enough user interfaces to satisfy the requirements of your scenario. It may be possible to build out your entire prototype in a single page. However, you may find that your prototype is better suited to exist across several individual pages. If your scope is too small, we will ask you to add additional features. Conversely, if your scope is too large, we will encourage you to scale down a bit so that you have enough time to build a robust functional prototype.
We will settle on final scope during in-class critiques.
Class Critique#
During week 8 (Tuesday 5/21 and Thursday 5/23) we will use class time to hold critiques where your team will present your medium fidelity prototypes to the class. Although there is no official due date for Part 1 in Canvas, you will be incentized to present your work to date through bonus points (see below). A sign-up sheet will be distributed by the end of week 7 (likely using Ed Discussion).
Part 2: Functional Prototype#
For part 2 of the assignment you will be required to develop a functional prototype from the work completed in part 1. Your functional prototype will be programmed using your desired framework. If you have decided not to use your previously selected framework, you may pick something else as long as you discuss with the instructor first.
The functional prototype must be functional! You do not have to provide a back-end or create middleware to support your interface, but a user should be able to interact with your prototype sufficiently enough to evaluate its functionality.
For example, the aforementioned drone burrito delivery control widget does not have to literally control a drone, but the interactor used by the thumb and any corresponding response from the user interface should be functional.
A user should be able to freely explore your interface without having to perform certain actions in a particular order to achieve an outcome. If you need to support elements of your interface with data, you should use facilities like web storage or javascript data objects rather than a server database.
Your interface should appear as realistic as possible. All placeholders, lorem ipsum text, joke data, etc., should be replaced with the type of content you would expect to see during real world use of your product.
Once your functional prototypes are complete, you are ready to conduct your final evaluation.
Class Critique#
During week 10 (Tuesday 6/04 and Thursday 6/06) we will use class time to hold critiques. Your team will present your functional prototypes to the class. Although there is no official due date for Part 2 in Canvas, you will be incentized to present your work to date through bonus points (see below). A sign-up sheet will be distributed by the end of week 9 (likely using Ed Discussion).
Part 3: User Evaluation#
For the user evaluation you will be assessing the usability of the interface that you designed by conducting a study using the Think Aloud protocol discussed in lecture. Your study should be designed such that participants have an opportunity to interact with at least one aspect of your user interface.
Each team member is responsible for arranging at least one participant for the study. All team members should participate in each study. Regardless of the size of your team, you should target a minimum of 3 participants for evaluation.
For each participant you will collect the following demographics:
Age
Experience with software interfaces (novice, intermediate, or expert)
Preferred web browser, computer operating system, and mobile operating system
Recruiter (team member name)
Task Planning#
You will plan a series of tasks for your user to complete using your program. Each task should have a clear description, goal, and end-point. You should write as many tasks as you feel are necessary to adequately evaluate the usability of your interface. Since this number will vary greatly depending on your scenario, it is difficult to predict how many each team will need. In general, if you have a sufficiently complex user interface and only prepare 1 or 2 tasks, then it is safe to say that you have not fully evaluated your user interface.
Data Collection#
With your testing plan in hand, you will start conducting your usability tests. Present each participant with the exact same introduction (scope, purpose, session detail, etc.) and tasks. If you discover an error with your first participant, do not fix it for the remaining participants unless it is critical to the success of your study (more on this below).
For each user evaluation session, you will collect the following data:
Task completion results:
Did the user successfully complete the task? If not, what happened?
Errors:
Did the user make any mistakes during the task?
Did the user encounter errors in the prototype during the task? If so, what happened?
Time per task:
How long did it take the user to complete the task?
Notes from user reflection:
Likes
Dislikes
Suggestions or recommendations for improving interface
Any other subjective data you would like to collect from your user.
Finally, before you conduct your first study, be sure to run at least 1 pilot evaluation with your group. You want to be absolutely sure that everything will work as intended and consistently across all of your participants. A good approach is to pick a member to act as participant and guide them through each task. Try to think about the different ways that someone new to your work might interact with your prototype to ensure that all interactions work properly.
Analysis of Results#
For your analysis, you will divide your results into two categories: quantitative and qualitative. Your quantitative results will include task completion results, errors, and time per task. These should fit nicely within a table or spreadsheet so that you can get a holistic view of your results across all participants. Once your data is aggregated, you will summarize the results using the following metrics:
Average time per task
Task completion rate per user
Average user error per task
Your qualitative results will include your observation notes and reflection with each participant. Since this is qualitative data, you will need to use your expertise to develop insights about your user interface. Were there common points in your interface where participants stumbled? Was there a feature that participants liked or disliked? Did you observe any unexpected participant behavior that could be improved through changes to your UI? If so, summarize your qualitative analysis in one or two paragraphs and list out the changes you have decided to make. NOTE: You do not have to make these changes!
Submission#
For this assignment you will submit your materials in two ways:
All materials developed in part 1, 2, and 3 combined into a single PDF document divided into three sections:
- Medium Fidelity Prototypes
This section should include screenshots of all the materials you created. Each screenshot should have a caption that describes the interface. The section should conclude with a summary of the feedback you received during class critique.
- Functional Prototype
This section should include a screenshot of your function prototype in the browser accompanied by a link to the live version of your prototype.
- User Evaluation
This section should include all requirements outline in part 3.
You must also include a cover page with the name of your team, scenario description, and team member names.
You will submit this document to Canvas.
Your functional prototype must be hosted on a public web server that is accessible to the class.
Grading#
Note
Some portion of your team must participate during the critique and presentation class activities to get bonus credit for this assignment. A critique must include a demonstration and walkthrough of at least 1 key feature of your project.
The following criteria will be used to grade your final assignment:
Submission format requirements met: 1 pt
All requirements for part 1 met: 2 pts
All requirements for part 2 met: 5 pts
All requirements for part 3 met: 2 pts
The following bonus points will be awarded to teams who participate in class critiques:
Week 8 critique: 1 pt
Week 10 critique: 1 pt
Two critique bonus (weeks 8 & 10): 1 pt
Total: 13/10 pts
You will also be required to individually complete a peer review survey to evaluate the contributions of each of your group members. If you receive a particularly low score, it will effect your participation grade for the course. So make sure that you are effectively contributing to all aspects of this assignment.