InteractivePrototype-Group:Blujay
From CS160 User Interfaces Fa06
Contents |
Blujay Digital Flash Card Interactive Prototype
Product Presentation Power Point
Java source files
Design Team
Bowen Li:
- Develop the user interface for the software
- Program different modes of the software
Jonathan Yen
- Develop the user interface for the software
- Program different modes of the software
Yimin Yao
- Design the user interface windows and tabbed navigation
- Program import software for flashcards
- Work on presentation
David Hoffman
- Design of the paper UI
- Report Writing and documentation
Problem and solution overview
The BluJay Digital Flashcard system that we are currently developing is targeted towards students who study subjects in which flashcard making is frequently used as an effective tool, such as chemistry, math, biology, and various foreign languages. Through our contextual inquiries in the previous part of the project, we have found many regular flash card users recognize the difficulties in trying to efficiently organize and study their flash cards; for example, the tediousness of randomizing and sorting the cards to facilitate studying. Several users who make flashcards for more than one class have also expressed their desire to better distinguish and organize their cards among different subjects. Consequently, we have decided to design a digital flashcard system to provide flash card users with a system that helps them efficiently organize and study their flash cards, and perform quick assessment on their familiarity with the cards, without compromising the functionality of the original paper flash cards and users’ flashcard making habits.
Tasks
For our first iteration on the interactive prototype, we set three tasks and their anticipated difficulty level for the users. The difficulty levels of the tasks have been readjusted after reassessing the tasks with our improved knowledge of the hardware systems and user behaviors.
Task 1
Easy: Use the software package to study the flashcards.
In a study task users are to study the cards through the software interface by selecting the folder of their interest, choosing the words of desired difficulty level, and traversing through the list with a few basic buttons such as previous, next, flip(to see the other side). In addition, uesrs can modify difficulty levels of cards as they master new information; they can also choose of mode of display so that the reverse side or both sides can be studies first. The task is rated as easy because it does not involve any discomfort caused by digital pen system, and its layout is meant to mimic the windows image previewer (familiar to most of computer users).
Task 2
Medium: Use the software to organize flashcards of different subjects (or chapters)
Although this task does not involve the digital pen system either, the steps to complete the task are less explicit on the interface compared to the studying task. The users are supposed to select the cards they wish to relocate, and choose the new destination folder in the lower left dropdown menu, then click the move button to transfer the cards. The task is designed to allow users to move their previously made cards around to different folders so users can organize their cards by subjects, chapters or whatever organization that helps them best keep track of their cards.
Task 3
Hard: Create Paper flashcards and import them into the computer
The difficulty of this task has been elevated to hard due to the technical difficulty inherited in the Anoto digital pen system and the unfamiliarity caused by required adaptation of special pen and paper. At the import screen, the user needs to choose destination folder, the way he/she flips cards to see the reverse side, then click import to start make new cards. Unlike the ordinary flashcard making process, the user must click DONE button on the paper UI by using the anoto pen after making each flash card (This would not be necessary if the batched data retrieval is functional.)
Revised Interface Design
Revision to Paper Interface
- Specifying front side and back side
One problem observed from lo-fi prototype experiments was that given a blank sheet of index card, the users would often write on either side of the card first due to the random facings of cards resulted from casual handling. Thus to organize the cards in a reasonably uniform orientation, a BluJay logo as well as "front" and "back" letters are added to the card (fig.1). The fonts also help ensure the landscape orientation of the cards, which is the orientation used by all of our interviewees.
fig.1 Paper UI
- Addition of "Done" button
The "done" button borrowed from the design of the 5*8 mead notebook is added because we were forced to use streaming mode for data input due to technical limitations. After user completes writing on front side and back side, "done" button is clicked to initiate the creation of the flashcards (jpegs).
Revision to Software Interface
- Elimination of left panel subject directory for import, study and quiz screens
Another frequently encountered problem during lofi prototyping was the confusion in the steps to begin study or quiz sessions. Two interviewers clicked on the directory on the left first, then move to study, while others clicked on study tab directly. Since the directory are idle on the side most of the time, we decided to eliminate it for all screens except for browse, in order to reduce confusion to minimum.(see figure 4)
fig.2a. import without subject directory
fig.2b. study without subject directory
- Addition of streaming feedback for import
The use of streaming as import mode restricted the making flash card process to be next to your computer, compromising some mobility of the paper UI; however this should be acceptable because most of our interviewees from contextually inquiries or lo-fi prototyping make their flash cards at home or at library where they have access to reference books. One pros with streaming is that we can provide live feedback on the strokes made by the users to ensure the quality of the flashcards. Thus the import interface was re-designed to accommodate the new feature: after user clicks "start import", a streaming screen would be displayed:
fig.3. streaming feedback during import
- Relocation of move buttons in browse panel
Some interviewees during the lo-fi prototyping was confused by the set comfort level immediately followed the "move" button. Thus we moved the "move" button to the right end of the interface, and left enough space between "set comfort level" and "move" panels.
fig.4 relocated "move" button;
There are also a few modifications made to the quiz interface, however the quiz mode was left out of this version of the prototyping for several reasons. One reason is that we want to make sure that the user has found the basic program features usable before adding high-level program features. Furthermore, during the early qualitative evaluation of this product, we did not want our users to get hung up on the details of the quiz. Without a large database of cards, which has come from importing many flashcards, the multiple-choice portion of the quiz will seem highly repetitive. The options include three distracters and one correct solution. The correct solution is the reverse side of the flash card, and the three distracters are randomly selected backs from other flashcards. One restriction on the randomly selected distracters is that we want them to be from the same group as the card. It would be frustrating and counterproductive to mix categories such as offer a Korean character as a distracter on a chemistry question. At this time, it is more important for us to use our evaluator’s time to ensure that the program layout satisfies their needs to effectively make the flashcard content, organize it and study from it.
Prototype Overview
Overview of implementation
In this prototype of the Blujay flashcard system, we have implemented the basic functionality for a user to use the Anoto digital pen to make flashcards on our digital paper flashcards. We have also implemented the process by which the cards will be imported into the software and the user will be taken to a browse screen. At this screen the user will have the opportunity to identify cards and organize them according to various subject groups. From this browse screen the user will also be able to identify their comfort level with each card which can be used to optimize the presentation order of the flashcards to make the learning process more efficient (by maximizing the users' study of the less familiar material). Finally, we have implemented the study aspect of the program where selected flashcards can be sent to the study part of the program and be presented to the user, in a fashion of their choice.
In the most critical part of the program, we need to build the digital flashcard content based on the strokes of the digital pen. Our goal is to make the flashcard production as similar as possible to regular flashcard production. We decided that we would print the front and back of the flashcard adjacent to each other on a piece of paper. After printing it out, we use scissors to cut out the card and then fold it in half so that the paper has digital pattern on both sides. (Please see Figure 1) Some key features to note in our paper UI is that we have separate active regions for the front and back of the paper. This will facilitate our segregation of the front and back of the card contents in the software. Also, we have clearly labeled the front and back of the paper. This is slightly different from standard index cards where either face can be the front or back of the paper, however, we determined that this small user concession of orienting the card before making the cards, saves more time during the organization later. The alternative of mimicking traditional cards without orientation cues would lead to greater effort on the part of the user to organize the cards after it was imported into the software, particularly because the gulf of execution is larger compared to working with physical flash cards.
One other feature to note is that we included a "done" button on the rear of the card. For this implementation, we switched to a streaming acquisition of the pen data. This was done primarily because it was easier to implement, however, it also provides a chance to provide the user with feedback that the digital pen is working. Furthermore, our original idea of using batch processing of the cards requires a unique Anoto pattern on every flashcard. This would cause a greater hassle in producing the paper, and the system would ultimately be self-limiting, because it would be difficult to design an open-ended system based on unique paper UIs. This streaming solution offers the benefit of potentially mass producing these cards and allowing the user to continue to expand the flashcard library indefinitely. Once each card is imported, it is immediately converted to a JPEG image format. This format offers several advantages over storing the original stroke data. The JPEG format’s largest advantage is the number of image manipulation tools available so that the software can quickly perform rescaling and rotation without implementing the specific algorithms needed to modify the stroke data. Furthermore, the JPEGs are easy to store and backup using traditional systems the user is comfortable with.
On the browse screen the user has the opportunity to view all the cards just imported and begin the task of organizing the cards into different folders. (See Script 1) In the script, a hypothetical user is trying to separate flashcards into two categories and set his comfort level with the cards. We have elected use a check box system at the corner of each card because of its convenience in selecting and sorting several cards at a time. We have not fully implemented some additional tools such as the "select all" and "select none" buttons, however, in a future refinement we believe these buttons will be valuable in dealing with a large number of flash cards imported in one session. The browse screen also offers the user the chance to set their comfort level for different flash cards. This information can be used in study mode to show the less known cards with greater frequency than the well known cards, and thus improve study efficiency. This was one of the program features that the subjects in the Lo-Fi experiment were most excited about.
The browse screen is valuable for organizing the flashcard data prior to moving on to the study phase of the program use. By clicking on the third tab (see figure 2) the user will be taken to a menu where there are several study options. At the study screen the user will have the option to select a course that he/she would like to study for, and how they would like to study. This means that they will have the opportunity to set if they would like difficult or easy flashcards, and the presentation order. These setting satisfy two of the key thoughts from our evaluators that surfaced during our contextual inquiry. The flashcard users felt that a constant card order during study time after time, harmed their effectiveness at learning the cards later in the deck, and they often reported that they would occasionally remove cards from the deck as they became very confident with them. The comfort level options, and classification essentially allows the user to pull a digital flashcard from the deck. The order options, allow the user to ensure that he will not be exposed to the same flash card first every study session. (See figures 3a and 3b)
The first iteration of our interactive prototype aims to provide a overall look and feel of the real software interface, and allows users to step through a few tasks with the help of Wizard of Oz techniques. The paper interface is designed to mimic the traditional flashcard making experience of our target users. The paper is currently presented as front and back sides of the card residing side by side on the same page; the real paper UI would have the dotted patterns back to back (this can be accomplished by a simple folding of the current paper UI). Once the stroke data for each card is imported, the cards are rendered into two separate JPEG files (one for the front, one for the back). A directory file is kept to keep track of the total number of cards, what cards belong to their respective subjects, and the difficulty levels for each of the cards.
Once the import is complete, the user can maneuver through the interface by pressing the tabs (import, browse, or study). We chose a tab system to allow the user to move between different program functions quickly and easily. Furthermore, the program will only sometimes require interacting with the digital pen, so there should be a quick and smooth transition from import mode to study or browse mode. As shown in figure 2, we ordered the tabs from the left to right, so that an inexperienced user of the software will naturally work his/her way through the program and find the useful program elements in an order in which they will most enjoy their digital flashcard experience.
What's Implemented & What's Not
Import
- Implemented:
The import panel supports the selection of destination subject folder from a list of existing subject choices based on information provided by the directory file. If streaming is working, the clicking of done on the paper interface would result in the creation of two jpeg files with the name "card_<cardID>front.jpg" and "card_<cardID>back.jpg".
- Not Implemented:
Due to the fact that our pen has been having trouble recognizing the dot patterns on the printout paper, the feedback for the streaming has not been implemented. The images created now has been created by pseudo strokes rather than real-time streaming, and creation of image is initiated by the "start import" because "done" on the paper UI are not able to be tested yet.
Browse
- Implemented:
The browse panel allows users to browse all the flash cards, as well as the ability to select and de-select cards. The "select all" and "select none" buttons provide additional features to the user. Users can also view the list of subject folders on the left side of the browse tab.
- Not Implemented:
Currently, all of the flash cards and file information is statically generated, as there were some difficulties in generating the JPEG files for the digital replicas of the flash cards. The study feature has not been integrated with the study mode component, and the quiz mode has been omitted for this phase of the project development. Since the program is currently not interacting with the filesystem, the file manipulation features (delete, move, copy, set comfort level) have not been implemented.
Study
- Implemented:
The study panel provides a way for users to select a group of cards based on available cards in the file system (specified by a metafile), presented as a list. The user can also functionally choose which level of difficulty to include for the study list. They are then shown the "study" screen with the correct interface for study mode.
- Not Implemented:
Currently, the study screen does not graphically load (although the data structures load) or traverse through the list of cards to be studied. This means the 'study from' and 'comfort level' radio buttons do not actually reflect the state of the card. Also, the navigation buttons at the bottom are not functional. However, since one screen looks very, very similar to another in study mode, this should not be a great hindrance. Additionally, the mode does not reset itself upon tab change, so there is no way to get back to the study 'options' screen.
Wizard of Oz
When we planned our interactive prototype, we had very ambitious goals for the functionality of the software. We have since considerably downgraded those goals, after discovering the difficulty of implementing some of these program features. One of the largest obstacles has been effective data management. While we had hoped for a robust folder sorting system in this first iteration, we found that implementing this was taking too long, and for the most part wouldn't be too visible to a user trying to learn the software. We have had to rely extensively on wizard of oz techniques.
We used a number of pre-generated jpeg flashcards to demonstrate the program layout because the software is currently not effectively saving jpeg images. Also, the file system is not fully implemented because we do not have the files to sort and organize.
Screen Captures and Scripts
Figure 1: Paper UI
- The user produces a flash card using an Anoto pen on a paper printed with an Anoto pattern, writing the desired information on both the front and the back. Upon completion, the user marks the region labeled as "Done" to finish the task.
Step 1: Select Destination Folder & Flipping Style & Click Import
Step 2: make your flash card by writing on the anoto flashcard
Step 3: your writing should be displayed on the import screen, click done to exit import when you are done with all the cards
Figure 2: Navigation through program using tabs
- When the program loads it initializes to tab 1, where the user can import flashcards.
- The user can then click tab 2, which will start the browsing and sorting frame.
- By pressing tab 3, the program will go to the study mode where the user can study the flashcards.
- The tab navigation system allows the user to switch to a different display at any time while using the program.
- We intentionally made the tabs the only way to switch between frames in the program.
Script 1: Here is an example of the organizational process:
Charlie has two exams that he needs to study for: a calculus class, and also a vocabulary building GRE prep course. He has just finished using the BluJay flashcard paper to write out some flashcards and now he needs to organize them now that they are on the computer.
He first wants to place the math questions in a folder. He will use the mouse to check the box next to each of the calculus flash cards.
Then he goes to the drop down menu for subject selection and selects math.
After specifying a group, he clicks the move button to classify those cards with that subject.
Charlie can then specify his current comfort level with these math cards.
After setting this to his comfort level, he presses the set comfort level button.
He can perform a similar procedure to the GRE vocabulary words when he is finished.
Figure 3a and 3b: Study Mode
Figure 4: This figure shows the windows version of browse tab (the screen shots of figure2 were taken from mac) with newest update on the control buttons.
