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.

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

  1. Search for the "Epic of Gilgamesh" on Google. 
  2. Add links of interest to the Refocus.io Progress List.
  3. Navigate to the 3rd Result on Google
  4. Activate the Refocus.io functionality to start reading the article.
  5. 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


  • No labels

1 Comment

  1. Sarah E Lehmann

    Prototype: Your photos were clear and showed interesting states of the prototype-however I wish I would have seen an example of how to use the select text functionality. It was very clear where all of your prototype changes came from, but I'd caution you to make sure that all of your changes will be appropriate for your intended audience.
    Briefing & scenario tasks: Not all of your tasks are very high level-""Search for $foo on Google"" and ""Navigate to the 3rd result on Google"" aren't very high level and aren't even specific to your UI.
    User testing observations: You have aggregated a good number of high level observations about your first round of testing, but there's no evidence that you had a second iteration of testing.
    Overall: You added a lot more functionality in your second iteration that could possibly be distracting to your primary user class. In particular, I'm concerned about the potential increased interactions with the progress list. Make sure your changes will benefit your intended user class.