Milestone 4
Milestone 4
A. High-Fidelity Prototype
1. Prototype
Check it out here.
2. Demos
User Story 2
User Story 2: As a CS student in the classroom, I want to easily navigate the list of post thumbnails so that I can find the discussion prompt that I intend to respond to.
This is accomplished through a tabbed menu of posts thumbnails that are labeled by title and have a large icon depicting the type of post (Discussions, Questions, Private Messages). The tabbed menu allows for the user to filter out only posts of a given type which in our problem of study would be discussions. We diluted the information on each post thumbnail so that even if users choose not to use the tabbed menu, they would still have an easier time finding the type of post they are looking for. This is because icons are fast to recognize when they use standard design. [2]
By lowering the amount of post thumbnails available to the user and simplifying the post thumbnails, the user would be able to make a decision on what discussion to enter more quickly. This is based on Hick’s Law which states that the reaction time for a user decreases logarithmically as the number of stimuli decreases. [1]
- Soegaard, Mads. “Hick's Law: Making the Choice Easier for Users.” The Interaction Design Foundation, https://www.interaction-design.org/literature/article/hick-s-law-making-the-choice-easier-for-users#:~:text=Hick's%20Law%20(or%20the%20Hick%2DHyman%20Law)%20states%20that,can%20be%20vital%20for%20safety.
- World Leaders in Research-Based User Experience. “Icon Usability.” Nielsen Norman Group, https://www.nngroup.com/articles/icon-usability/.
User Story 5
User Story 5: As a CS student in the classroom, I want to have an area to input a follow up response or discussion reply so that I can review and revise what I write as I contribute to the discussion.
Our goal with the design decisions related to this user story was to increase the findability of the input response box, which is defined by researchers at the University of British Colombia as, “the speed of accessing a specific set of functions.” [1] We accomplished this goal by designing the area for the user to input a response as a sticky box that stays at the bottom of the screen in order to address our problem of study by lowering the amount of scrolling needed to access that set of functions. According to UX Booth, using sticky design elements can effectively allow the user to navigate the page while also keeping another set of functions accessible. [2] This would allow a user to simultaneously explore the discussion and craft their response, leading to less time taken to navigate to and from an input box located in a single place on the screen.
- Findlater, Leah, and Joanna McGrenere. "Evaluating reduced-functionality interfaces according to feature findability and awareness." IFIP Conference on Human-Computer Interaction. Springer, Berlin, Heidelberg, 2007.
- Babich, Nick. “Best Practices for Scrolling.” UX Booth, https://www.uxbooth.com/articles/best-practices-for-scrolling/.
User Story 6
User Story 6: As a CS student, I want to be able to post my response so that I can contribute to the discussion.
In order to make the affordances of the post box easier to understand and find, we translated all of the actions of the original Piazza that were simple text links into high contrast buttons. With these big and color coordinated buttons, users have the option to either post a response publicly or anonymously, save the response, or delete the response. This change addresses better accessibility because “the correct use of color makes content more perceivable to all users and the websites become more inclusive for people with disabilities.” [1] Additionally we created the buttons with rounded corners because “research suggests rounded corners make information easier to process by drawing our attention to the contents of an element.” [2] By making the buttons easily accessible and easier to process, we enable them to be more easily available to users when posting a response resulting in less time spent searching for them and therefore a more efficient Piazza interface.
- “Contrast and Accessibility.” Aditus, https://www.aditus.io/contrast-and-accessibility/.
- Alaniz, Graciela. “3 Simple Tips on UX Button Design.” Kalamuna, https://www.kalamuna.com/blog/3-simple-tips-ux-button-design#:~:text=Size,tactile%20sense%20for%20the%20user.
User Story 7
User Story 7: As a CS student, I want to be able to filter discussion posts so that I can view only specific topics of discussion that I find relevant.
In order to cut down on the time students spent figuring out how to properly use Piazza’s folders bar and filter bar, we decided to redesign these into a single filter menu. This menu was accessible through a filter button at the end of the search bar area. An article from Uxplanet.org described contrast as, “..one of the key factors influencing scannability and visual hierarchy of the page. It enables the designer to present the layout in a way that informs users which points of interaction are vital and which ones are secondary.” [1] The filter button is an essential button for the user interface which is why we chose to make it high contrast. We also decided to make the filter button contain a collapsible floating menu in order to declutter the page. An article from nngroup.com backs up this design choice by saying that collapsible elements “...are an essential tool because they collapse content and make page length manageable, but even on desktop, they mitigate visual complexity and allow users to focus on the content most relevant for the task at hand (and are particularly appropriate in complex applications).” [2] By consolidating the various filter options into a single menu that is emphasized through the high contrast filter button, students will be able to save time while working in Piazza helping the interface to be more efficient.
- Tubik. “3C Of Interface Design: Color, Contrast, Content.” Medium, UX Planet, 1 Dec. 2017, https://uxplanet.org/3c-of-interface-design-color-contrast-content-235b68fbd9a1.
- World Leaders in Research-Based User Experience. “Accordion Icons: Which Signifiers Work Best?” Nielsen Norman Group, https://www.nngroup.com/articles/accordion-icons/.
B. Testing Protocol
1. Testing Protocol
Our team’s research question is how to design Piazza's interface so that the features are less cluttered and the website is more time efficient for users. From the original Piazza interface, we redesigned specific features so that they are more noticeable and easier to use, as well as improving the overall flow of the website. Based on our research question, the methodology we use for testing is a combination of Observation/Participant Observation and Experiment. This is because we are conducting a testing procedure where it will be an experiment format where we have a group of non-Piazza participants use the old Piazza interface, while the others use our new designed interface. We will observe the participants’ time on how long they take to interact with each interface, and the results of this experiment will be compared and analyzed to see if our new designed Piazza interface is more time efficient.
2. Testing Procedure
Once again, our testing procedure is testing to see if our modifications to piazza’s user interface has made it more efficient to use.
In order to evaluate whether or not our final solution is a success or failure, we must develop a way to quantitatively measure how long it
takes for students to complete specific tasks on our updated user interface vs the original piazza user interface. Our testing procedure will
have the following steps. We would first send out a survey to all students at UGA asking 3 questions. The first question would be whether or not
they have used piazza before. We ask this because we only want to select from students who have not used piazza before, so that they don't have
any biases during the experiment. We will then ask if they would like to participate in an observed experiment where we would also explain the
fine details of the experiment. Our final question is where we would ask the student for informed consent, and have them look over our informed
consent letter that will also mention that we will store their first name, last name, UGA ID and email when the survey is submitted.
From these results we will randomly select 20 participants who qualified to take part in the survey by giving the answers that they did. In the next part
of our procedure we will split the group of 20 in half where one group will be testing a prototype of the original piazza interface and the other
will be testing a prototype of our modified user interface. In order to do this safely during the pandemic we will bring participants into a room
one at a time over the span of several days where inside will be one of us giving the tester instructions on what to do while also standing from
a distance 6 feet away and wearing a mask. This will mitigate any potential risk to all participants. Each participant will be instructed to
complete certain tasks using the prototype assigned to them. Each task will be timed and recorded. After all tasks have been completed the
participant will be free to leave. These times will be aggregated and averaged under the task name for each prototype. These averages will all
be placed in a spreadsheet where we can compare the modified prototype times to the original. We finally will take the tasks and compare the average
times. Whichever prototype has the faster completion time for the given task will be given a point. At the end, whichever prototype has more points
will be declared the more efficient one. This will act as a Mechanistic analysis because we are saying that our changes in the user interface of piazza
had a direct affect on the efficiency of task completion on the platform. If our modified prototype is determined to be faster than we will have
successfully achieved our goal.
C. Summary Video
Fair Use Statement
“Team H.A.C.K” (referred to as either “The Team”, “We”, “US, or “Our”) refers to our Spring 2022 Human Computer Interaction group whose members consist of: Heeju Kim, Aviel Sabbag, Caroline Umila, and KJ Ogundimu.
While every asset in our Human Computer Interaction Term Project Prototype was created by hand in Figma, we have used copyrighted design material as a base for our own additional design suggestions. These have not been specifically authorized by the copyright owner, but we are using this material for educational purposes within the context of learning the design process for User Interfaces.
The Team believes this constitutes a "fair use" of any such copyrighted material as provided for in section 107 of the United States Copyright law.
If you wish to use copyrighted material from our Term Project for your own purposes that go beyond fair use, you must obtain permission from the copyright owner.
*Our Fair Use Disclaimer is based on a template found at:
https://www.termsfeed.com/blog/sample-disclaimer-template/#Download_Sample_Disclaimer_Template