First Iteration Prototype
Google page when Refocus.io is open.
Going to one of the articles before reading.
The page is seen with all of its content before it gets separated into smaller "chunks."
Reading the article after it has been "chunked."
The progress list is hidden to avoid distractions for the user.
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.
...
- Search for the "Epic of Gilgamesh" on Google.
- Add links of interest to the Refocus.io queueProgress List.
- 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.
...
- 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 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.
- Many people were curious to know what commonly visited pages would look like, such as Wikipedia.
Design Iterations
Fixes from First Iteration
...
- In addition to clicking, users can use keyboard arrows to navigate through chunks.Informed user that they were able to use the keyboard to navigate. People used this to navigate chunks
- Changed Select Text Icon to an Icon that said Select Text.
- Website is shown before being chunked, to give user an idea of what the page looks like before Refocus works it's magic.
- Added feature for being able to see, dimly, the text before the actual chunk.
- Allowed user to click on articles in their queue to skip to them.
- Added Wikipedia, as it was the first thing most users wanted to go to
Second Iteration
- briefly for a second so that the user can see the actual webpage before going into reading mode.
- Users can escape reading mode and view entire page at any time.
- Make articles in the progress list clickable so that users can move between articles.
- Users can pull out Progress List in the middle of reading to switch to another article.
Second Iteration Additions
- Created a mock-up for Wikipedia articles to be more useful for users. Most users do not read entire Wikipedia articles and only want to see a specific section. For example, this new format would allow Created more specific chunking for certain websites. For example, wikipedia. This allows a user to go to an article like "World War II", but only read the part on the Pacific Front.
- Instead of a gray background, text will be grayed out. This will allow the user to have reference to the page, without it being actively distracting.
- First time users will be prompted with hover over text messages on the main components of the UI, which will act as a non-intrusive tutorial.