A. High-Fidelity Prototypes
For this section of the Milestone, We turned our Mockups from the previous milestone into Prototypes using Figma. The mockups we prototyped were the ones selected for part C of Milestone 3 as they were the ones we agreed was the best fit for our problem of study. For more Informaion, see Part A.2 of Milestone 3
Prototype 1: Rotate an image
User Story 1: How might we as note-takers, accomplish being able to create an image so that we don't have to open another window.
For Prototype 1, the goal was to add a menu for the user to use that would hold all the relevant information about formatting and dealing with images in Google Docs. When the user clicks on an image, the dropdown menu will appear and will give the user access to many different options. For this specific prototype, we had the user's goal be to rotate the image using the added dropdown menu. By adding this menu, we are accomplishing our overall goal of making using images in Google Docs simpler. Having a dropdown menu that only requires two mouse clicks to accomplish this goal is much much simpler than the current way in Google Docs. On top of this, dropdown menus are a simple and user-friendly way to organize a UI for both novice and advanced users [1].
Demo Video of Prototype 1
Prototype 2: Draw an image
User Story 2: How might we as note-takers, accomplish being able to create an image so that we don't have to open another window.
Prototype 2 adds functionality for a user to add a drawing via a small whiteboard in the right side margin. One of our big issues with the existing google docs interface is that to insert a drawing you have to go through this very long and invasive procedure of pulling a whiteboard up on the entire screen before you make a drawing and it is formatted and inserted as an image, making it very difficult to align and modify if necessary. So we came up with a way to keep a similar interface, but make it much less invasive. You click the annotations tab in the nav bar and then select drawing in the dropdown. The whiteboard will appear in the right side margin, and you may use your trackpad, mouse, or touchscreen to add a drawing to it. Once you hit save and close, the drawing is automatically added as a layer on top of your document. This makes use cases such as signing a document, circling a word, or writing an equation in notes much simpler.
Demo Video of Prototype 2
Prototype 3: Annotate an image
User Story 3: How might we as note-takers, accomplish being able to annotate an image without having to use another app.
For Prototype 3, the goal of the prototype was to include a new menu on Google Docs that would allow users more options to format and deal with images in in the interface. In order to use the dropdown menu called “Annotations”, the user must first select the image that they wish to annotate. After selecting the image, the user can then press the “Annotations” tab in the dropdown menu and will be shown several different options for formatting the image. For this specific prototype, the user wishes to add text to their image using the “Annotations” menu which is then allowed by pressing the “Text” button. This will allow users to include and place text wherever they wish layered on top of the image that they selected. Through this menu, annotating text onto images that users want to edit becomes much easier and accessible than Google Docs by only having to make two clicks.
Demo Video of Prototype 3
For our Prototypes, the only asset we did not create was the screenshot of Google Docs used as the background. All the rest were created by us, including the picture of the car which was phoographed by Daniel.
B. Testing Protocol
The leading research question that drove the user testing protocol for revisions on Google Docs is “Do our proposed changes to Google Doc’s system of adding, creating, and editing images and tables allow for a more efficient and streamlined user experience?" Essentially, our group implemented functionalities for relevant user stories as alternative design solutions to various problems we identified existing in the current Google Docs editor. Therefore, it was necessary to allocate methodologies in order to test our solutions. We chose “Participant Observation” as one method to effectively test our procedures for our design prototypes. Participant observation provides a deeper understanding of the dynamic between users and our updated Google Docs system by closely observing the response users have to the new additions. Secondly, using surveys will help strengthen research by providing concrete feedback users have on the Google Docs system. Using observational and participant study methodologies are important as it “provides researchers with unique opportunities to explore the study informants’ unanticipated types of behavior or activities” [2]. Furthermore this “allows researchers to investigate these types of behavior or activities and reframe the research questions with a deeper understanding of the research problem” [2]. Essentially, measuring user satisfaction with our prototypes can be sufficiently measured due to the advantageous insight in the participant’s behaviors.
In order to test our research question, we will conduct two surveys and an observational experiment to find out if our proposed changes to Google Doc’s system might lead to a more efficient and streamlined user experience. All the information that we would need to collect could be done so through the safety of the internet using platforms like Google Forms, Zoom, and other collaborative platforms to help us communicate with the participants. First, we will get the consent of participants in the study. This can be assured by starting off with a pre-observation survey that will contain a disclaimer that informs any participants of what they will be required to do and what information they will share and how it will be used. The pre-observation survey will then ask participants about Google Docs and their experience and views of the system.
There will be multiple pieces of data that will be sought from the performance of participants on both the current Google Docs and our updated version of the system. The time it takes to complete the task as well as the number of steps, user satisfaction/frustration/expectations, measure if the task was completed (if at all), and a user rating of which system/method they preferred. The users will time themselves with a start/stop timer during the task. The number of steps will be calculated later by watching the recording of the user’s interactions with each system. The rest of the information will be collected through the use of an online survey like Google Forms. All of the information recorded in the survey will then be stored in an Excel sheet to organize all of the data according to the different categories of data we are collecting.
To collect the data, the participants will get to try using both Google Docs and our proposed system at two different intervals. While using both systems, participants will be timed and asked to complete three different tasks using either system. Tasks will be assigned to the participants by prompting users to use the added functionality in the above prototypes. Potentially, users could be utilizing the added Formatting tab, utilizing the added canvas option that allows for live drawing within the document, or simply testing the ability to annotate, draw, or add text on existing images in the document.
After completing the tasks, the participants will fill out a post-observation survey in which they will share their own emotional responses and analysis of the observation as well as how they feel about either of the systems. Our data will then be analyzed according to several different factors regarding each of the tasks in order to better predict which system (Google Docs or our proposed system) provides a better user experience. For the numerical data (time to complete, number of steps, completed/not completed), we would do a statistical analysis of the control group (regular google docs) and our experimental group (our proposed changes) to test for a statistically significant decrease in time and steps to complete. For the participants’ emotional response (User satisfaction/frustration/expectations, which version they preferred), we will analyze their responses in a user perception survey to see which version has a higher mean satisfaction rate. These results will, if our proposed changes are better, reinforce our view and give us the statistical answer to our research question.
Pre-Observation Google Form Survey Mockup
Post-Observation Google Form Survey Mockup
C. Final Summary Video
Sources
- (1)
-
Nick Babich. “The 4 Golden Rules of Ui Design: Adobe XD Ideas.” 7 Oct. 2019
- (2)
-
Zhao, Meng, and Yingchun Ji, "Challenges of Introducing Participant Observation to Community Health Research." ISRN nursing vol. 2014 802490. 15 Jan. 2014, doi:10.1155/2014/802490
Relevant Links
Fair Use Notice
Human-Computer Interaction by Michael E. Cotterell (“we” or “us” or “our”), including any other media form, media channel, mobile website, or mobile application related or connected thereto (collectively, the “Site”), may contain copyrighted material, the use of which may not have been specifically authorized by the copyright owner. This material is available in an effort to explain material relevant to students studying Human-Computer Interaction (HCI), User Experience (UX), User Interfaces (UIs), and related subjects or to illustrate the use and benefits of related tools.
Site content is distributed without profit for research and educational purposes. Only small portions of original, copyrighted works are being used without explicit authorization and those could not be used easily to duplicate the original works. This should constitute a “fair use” of any such copyrighted material (referenced and provided for in section 107 of the US Copyright Law). If a user (“user” or “you”) wishes to use any copyrighted material from this site for purposes of their own that go beyond “fair use”, then they must obtain expressed permission from the current copyright owner.
Contact Information
If you have questions or comments about this notice, please contact us at:
Dr. Michael E. Cotterell415 Boyd Graduate Studies Research Center
University of Georgia
Athens, GA 30602-7404
mepcott@uga.edu
https://t.uga.edu/5kT