GR3

First Iteration Prototype

Overview

Our solution is in the form of a Browser (Chrome/Firefox) Extension that has 2 distinct modes: a Browse Mode and a Read Mode. Browse Mode is when the user interacts normally with their Browser, until they find an article they want to read, and can then go into Read Mode on the article. The user can enter Read Mode in two ways: by choosing to read the entire article or selecting a part of it to read. The workflow below outlines interaction with the Prototype.

6.813/6.831 User Interface Design and Implementation > Refocus.io GR3 > Flowchart.jpeg

Figure 1: Workflow for Protoype

Prototype Screenshots

Action	Prototype Screenshot
Open Browser, Open Refocus.io extension Google Search Topic of Interest, in this case the "Epic of Gilgamesh"
Click on link of interest. In this case, click on the 3rd Link
Go into Read Mode for this article by clicking on the Focus button The resulting page is the chunked version of the article. It shows the previous chunk (grey text) and the current chunk (black text). Users can exit Read Mode by clicking on the small X on the top right Users can go to the next or previous chunk using the arrow buttons or arrow keys on the keypad Notice that the Progress Pane is collapsed in Read Mode to prevent distractions.

Briefing

You are a High School Student who has ADHD. You have been assigned to research "The Epic of Gilgamesh" for a school, but you have a lot of trouble focusing. You have installed Refocus.io to help you with this task.

Scenario Tasks

Search for the "Epic of Gilgamesh" on Google.
Add links of interest to the Refocus.io Progress List.
Navigate to the 3rd Result on Google
Activate the Refocus.io functionality to start reading the article.
Read through the article using Refocus.io.

Observations

Interacting with Buttons

Users thought the idea was good, and many commented they would probably be interested in using this in their day to day reading of articles.
Users tried to switch between articles in the Progress List, but found that the articles were not clickable.
The "Select Text" icon and functionality were unintuitive. When it was described to users, they actually felt it was the most useful feature.
After clicking "Select Text," many people were not sure how to proceed. We attempted to make this more intuitive by changing the cursor, but that proved to also be unintuitive.
When reading "chunks" of an article, clicking the "next" arrow was distracting. Some people were tempted to keep clicking the "next" arrow until they reached the end.

Viewing Content

When doing searches on Google, users wanted to be able to skim each article, instead of reading them entirely.
Users liked that they could see the previous section read. Graying out the previous section was a good idea.
Some people would have liked to know where the specific "chunk" of text was, relative to the rest of the article.
Some people expressed frustration that they weren't able to switch to view other pages from the Progress List. This occurred because we did not make a mock-up of every page that Google showed.
When articles chunked immediately, it was not obvious what the page looked like before being chunked.

Second Design Iteration

Improvements based on User Testing

We incorporated the observations from user testing our first iteration (listed in the Observations section above)

Problem from First Iteration	How it is addressed in Second Iteration
Articles in progress list not clickable	Made articles in progress list clickable so that users can move between articles they wish to read
Select text icon/functionality non-intuitive	Changed Select Text icon to an Icon that simply had the words "Select Text" on it Notify the user that the app is in Select Text Mode by adding a text panel on the top of the page that explains what to do
Don't know where the chunk is located in the page (context)	Everything else (except the current, previous and next chunk) on the page is visible, but it very low-contrast and dark - the user can figure out what is going on but does not read those parts of the page.
Hard to learn	Hover over icons for hover-text explanations. First time users prompted to hover over icons for instructions and tool-tips.

Additional Points:

We added the functionality that links clicked on in Read Mode get added to the Progress List.
Links can be added to the Progress List by either right clicking and selecting the "Add to Progress List" option, or Clicking and Dragging a link onto the Progress List.
We changed the name of the Focus button to READ ALL since it is more intuitive

Images of Second Iteration Prototype

We made the changes above and worked on a second iteration. Here are some screenshots that highlight a difference from the First Iteration.

N.B. : These Screenshots still show the "Focus" button instead of replacing it with a "Read All" button, which was the change we made later.

Action	Prototype Screenshot
Open Browser, Open Refocus.io extension Google Search Topic of Interest, in this case the "Epic of Gilgamesh"
Add a Link of Interest to the Progress List using Drag and Drop
Click on the Select Text button to go into Read Mode after Selecting Text
In Read Mode we can expand or Collapse the Progress Pane by clicking on the panel with the arrow in the far right of the browser Collapsed Progress Pane
Expanded Progress Pane