What is the Wizard of Oz Technique? The Basics.

Written by: bnjmnjackson

Reading: Universal Methods of Design by Bella Martin and Bruce Hanington.

The Wizard of Oz (WoZ) technique, at it’s core, is a way for testing the feasibility, functionality, and general effectiveness of a UI without requiring all the time and effort into making a prototype. This is done by creating a mock-up interface for the user to ‘use’, where someone(s) on the team (the ‘Wizard(s)’) manually implement the interface. For example, say I wanted to design a smartphone banking app, which has a few functions, and a few different pages. If I wanted to gauge how a customer was feeling about this using WoZ, I may preemptively draw out all the possible pages the user could access on small whiteboards, and when the user ‘clicks’ (in this case, points and tells me “I would like to click this”) on something, I would swap out the whiteboards and adjust any numbers, as needed. The whole point is to get a general sense from the user. ie. “Man, it’s annoying that I cant get from here to there in one click.”

“Just keep a running list through Amazon’s Wish List service (here is mine).”

Written by: Rajen Tandel

“Just keep a running list through Amazon’s Wish List service (here is mine).”

I think you meant to include a link in this sentence.

“When I start a book, I almost always go straight to Wikipedia (or Amazon or a friend) and ruin the ending.”

Just to be clear, you are talking about nonfiction books in this right? I don’t see the point in doing this for fiction or stories.

Great article.

Written by: Rajen Tandel

Great article. I’ve been guilty of reading as a form of procrastination before. But if you like autobiographies, I really liked Arnold Schwarzenegger's Total Recall. To go from a small Austrian town, to a professional bodybuilder, to an actor, to the governor of California is incredible. It’s pretty long but its worth it. The Glass Castle is another memoir that I really liked.

I also haven’t read many from your recommended list. I’ll check them out. I also like the last bullet: “For something beautiful”.

Collabanno Progress Report 6/21/2018

Written by: Rajen Tandel

I continued working on the CORS proxy today. It’s still not completed but I am getting close. It’s formatting the request correctly, but the interaction between React Components has been a bit strange. It’s updating state, but not rerendering the component correctly.

Tomorrow I plan to continue working through this issue as well as refactoring the code in the project. A lot of the code up until this point has been just to get the project working. Now that the project is beginning to work, I feel like continued work will be easier if the code is more well written.

Collabanno Progress Report

Written by: Rajen Tandel

This week, I worked through a section of the React Course and learned about using SASS within React. I also got PDF highlighting over multiple clients working. The user can now add highlights/annotations and have those changes reflected in other clients’ windows.

The PDF Component can render PDF files dynamically via a text box now. Currently there are two separate components/windows. The first being the PDF view itself. The second is the search box that selects the PDF to be opened in the viewer. While the application can open these PDFs, some URLs do not work at the moment due to some permissions. I still need to hook it up to Socket.IO after to have the selected PDF show up in all client pages.

The next step is to learn how to hook up React Router to allow the application to transition from component to component like pages on a website.

Progress Report — 5/22/2018

Written by: Rajen Tandel

I spent the majority of the day working through part of an online ReactJS course. I spent a little bit of time looking at how Socket.io and pdf.js work in React. Both have libraries within React to make the implementation easier.

I learned about React Components, properties and state.

Today, I plan to work through more of the course. After working through a good portion of the course, I plan on trying to implement the PDF Viewer Component of the project.

This week we have the working prototype due. At this point, it seems like an ambitious goal considering I am still trying to learn the front end framework. I am going to try to get a working prototype by Friday though.

Progress Report 5/17/2018

Written by: Rajen Tandel

I forgot to write this yesterday. We decided on using ReactJS for the Collabanno Application. I spent some time looking over the HighlightJS library and PDF Annotate. I found that PDF Annotate has more of the features needed for Collabanno, but lacks solid documentation. HighlightJS has fewer of the features but is well documented.

Today I plan to get through a few tutorials using React to gain an understanding of the framework. Then I will look into how Socket.io works within React.

Progress Report — 5/16/2018

Written by: Rajen Tandel

I attempted to implement a feature that allows synchronized scrolling. When the host is scrolling through the web page, the changes in the view will be reflected in all of the clients. This proved to be quite challenging. At the moment, I have the pages synchronized. Meaning when a user scrolls to a certain page number, the other windows also show that page number. When using scrollTop offsets, there is a ton of back and forth that makes all the windows jittery. For now, I have left it to only scroll based on page numbers.

The next step is to implement the annotation functions/features. I will start with highlighting. Basically add a button that will change the background color of the selected text.

Collaborative PDF Progress Report — 5/15/2018

Written by: Rajen Tandel

Today, I added functionality that allows the host to open a PDF file and have that same file open in all of the client’s windows. I thought the next step should be to find a way to have synchronized scrolling. As in, when the host is scrolling up and down the document, the same scrolling is reflected in each of the client’s windows. This proved to be really difficult. The way we decided to tackle this issue is by working directly with the PDF.js viewer files.

We ended up using the following functions:

PDFViewerApplication.store.get(‘scrollTop’).then(function (a) {console.log(a);})

This function logs the distance the scroll is from the top of the page. This is useful because it allows the host to pass along this value to the other clients and scroll the other pages accordingly.

PDFViewerApplication.store.get('page').then(function (a) {console.log(a);})

This function returns the page that is currently under the hash. This means that this will return the same page value until the hash/scrollTop reaches 0, or the bottom of the page.

Now that we have these functions. All we need to do is emit a signal when the host is scrolling, the signal will contain the hash/scrollTop and the page that the host is currently on. Then the signal will be sent to every client and each client will jump, or scroll, to that portion of the document.

To Do Tomorrow:

  1. Implement the signal to allow for shared scrolling.
  2. Once that is done using the viewer’s current code, try to implement it without the existing code.