InteractivePrototype-Group:Jigsaw
From CS160 User Interfaces Fa06
Members role in this assignment
- Scott Friedheim: Report, Presentation
- Patrick Rodriguez: Code Guru1
- Yen Pai: Code Guru2
- Siu Pang Chu: Code Guru3
- ALL: Researched JAVA, R3 Toolkit functionality; Code, Report, Presentation collaboration.
Contents |
Problem and solution overview
Problem
Some common problems and concerns among user interface designers for software/web applications (as discovered during our Contextual Inquiry) were found to be the following:
- After initial design sketches were produced with pen/paper, there is no quick method of integrating these sketches into the next steps of the design process (ie. digitizing, organizing, and cleaning up the sketches making them ready for presentation).
- All subsequent steps after the initial design sketching phase usually requires the use of many different software applications such as Photoshop, Illustrator, Visio, and Powerpoint.
- A source of error exists between designer and client in translation the designs into prototype. A method to provide instant feedback on a design during the initial design stage does not exist.
In summary, getting from the initial designs to the next level of the design process is fairly labor intensive requiring the use of multiple software packages and redrawing of the initial sketches in those packages.
Solution
Our solution, named Jigsaw, is a software application created to solve these complications by using the Anoto pen allowing software and/or Web UI designers to integrate their initial paper sketches of a design onto a computer and into a format ideal for presentations. Jigsaw will allow for the following functionality, solving the problems outlined above:
- Because initial sketches will be drawn using the Anoto system, designs can quickly and automatically be imported into Jigsaw allowing:
- designs to be easily digitized and imported.
- designs to be linked providing real time workflow visualization.
- designs to be output as a presentation to colleagues and/or clients wirelessly using the Anoto system.
- the ability to export designs as jpegs/eps files for work in other software applications that many UI designers currently work with.
- Becuase of the integrated nature of Jigsaw, there is no need to break the initial design process into using many different software applications. Jigsaw provides the ability to:
- give presentations just as PowerPoint does.
- automatically digitizes designs where links can be made creating animations simulating the functionality of the design. This makes Jigsaw even more useful than Visio.
- Because of the ability to rapidly develop a linked design in Jigsaw, designers can collaborate with their clients immediately after working with them in creating the initial sketches. This greatly reduces the number of errors that commonly occur as a result of miscommunication.
Jigsaw serves as an integrated application to quickly bring the initial design process into the higher levels of design without the time consuming complications that are currently observed using traditional methods.
Tasks
- easy - Export to other file formats, specifically jpeg format. Once wireframes, workflows, and flowcharts are input into Jigsaw as images, users will have the option to individually save each object as a jpeg image. This is useful because users will later be able to take the saved images and work with them further in other applications such as Photoshop, Illustrator, etc. Also, designers may want to make their prototype available for others to view remotely. Later efforts will be made to export to PowerPoint and possibly Flash. When exporting, users can choose which workflows to include. Users may also want to export individual wireframes to bitmap or vector files, so we will later provide an option for that.
- medium - Linking wireframes to workflows. When wireframes and workflows are input into Jigsaw, users will be able to create hotlinks on the workflows where upon clicking the hotlinks the respective wireframe will be shown in the wireframes tab. For example, from a list of imported workflows, users can choose a specific one to fill out. The workflow will be displayed on one half of the screen while a list of wireframes will be on the other side. Users can then drag a wireframe onto an item in the workflow to associate the two. This can repeated until each item in the workflow has an associated wireframe. However, workflows are not required to be associated with wireframes and vice versa.
- hard - Create wireframes and workflows. The users will use their Anoto pens to draw wireframes and workflows in any way that they choose (with one page per item). Users can use either preprinted sheets of blank digital paper or they can print digital paper specially made for our program. The latter sheets of paper will have special OCR-enabled boxes that allow users to title a page. The users can continue to work on their designs until they are ready to import the pages into our software. Once the wireframe and workflow is drawn with the Anoto pen, the data will be streamed into Jigsaw and rendered on screen. Thereafter the above functionality will be implemented.
Revised Interface Design
Changes as a result of low-fi testing
Issue: During the low-fi testing users because a bit confused when switching between views. It is important for our users to maintain context and never get lost.
Change: Adding Titles in the form of tabs at the top of each of the two panes now allows users to easily view what pane is active as well as switch between views.
Issue: Our test subjects during the low-fi testing expressed a desire to be able to link wireframes directly to the sitemap, as some wireframes were not part of complex interactions that would require a workflow.
Change: As a result of the previous change, implementing this task is doable. To implement this feature, we would allow the user to select the view for each of the two panes via the tabs we are now implementing.
Issue: During the low-fi testing some test subjects explained how taking notes during the initial design process was an important tool for them to rely on later on.
Change: We thought the suggestion to integrate a designer's notes into Jigsaw was a natural fit and inline with our mission of trying to integrate the many tools that a Web/Software UI designer uses in the initial concept and approval stages. This would expand the number of panes in Jigsaw to four, but would not add further complexity to the UI because we are now allowing users to select the view for each pane via tabs, instead of fixing the application to two views - a view being defined as a fixed set of panes.
Issue: It was confusing whether selecting "New Project" in the File menu was required before beginning to work or import drawings. One test subject asked whether or not the application opened with a new project or if he had to explicitly create one.
Change: This was an eye-opening observation since most of our team members and even test subjects more or less took it for granted that a project already existed before importing their work. We decided to have the application open without a new project instantiated and to have all import-related menu items inactive until a project existed. We felt that making the user explicitly create a new project would be less confusing and at the same time indirectly communicate that import functionality only worked when a project was open, without the need of some pop-up dialog.
Unimplemented portions of the interface
- Linking wireframe buttons to other wireframes - This has gone unimplemented due to time constraints but would function very similar to the linking that is already implemented.
- Editing diagrams - This would be a mode in the Jigsaw application, perhaps similar to MSPaint or Visio which would allow for editing of the workflow, wireframe, and sitmap diagrams. Due to the amount of work this would entail we feel it would be out of the scope of this project in terms of the amount of features to implement.
- Editing paper layout - This would allow users to print Anoto enabled paper in landscape/portrait styles. Once implemented this would simply be an option to select from the File menu.
- Batch processing of pen data -This would allow a user to sketch multiple diagrams on many different sheets of paper. The user would then dock the Anoto pen and import all sketches into Jigsaw as a batch. Currently the R3 Toolkit is in the early design stages and doesn't support this funcionality.
- Project Saving - Users are able to Create new projects and Open existing projects. However, due to time constraints, Saving of projects has been left to the final prototype of Jigsaw. Our reasoning behind this was that by not implementing Saving, users could still understand and work with the UI.
- Hotlinking - Hotlinks can be created and resized however, they cannot yet be moved and clicking them does not do anything. The code for this is completed, it is just not tied together into the Jigsaw interface due to time constraints.
Storyboards of tasks
- See Overview of UI implementation
Prototype Overview
Overview of UI implementation
The user interface that we implemented was created as a Java application interfaced with the R3 Toolkit. All figures that will be referenced in this section are displayed in the Prototype Screen Shots section.
- Displayed in Figure 1 is what a user would see after launching the Java application named Jigsaw. It only shows a blank workspace with the menu bar on top. This is meant to signal to the user that they cannot do anything until they start a new project. As you'll notice in Figure 1 when a user clicks on the File menu the only options to start working are to Create a New Project or to Open Project; of course the user can Exit Jigsaw at anytime.
- Figure 2 is what a user would see upon clicking the New Project File menu item. As you can see this brings up the familiar dialog box allowing a user to navigate through their files to select a location to save their new project. Additionally, a user can name the project by typing it into the File Name text bar in the dialog; the Figure shows that a user has entered the name My Project as their project name.
- After creating a new project a user would see what is shown in Figure 3. This is the workspace view showing two panes on the screen, each having the ability to display Sitemap/Workflows/Wireframes/Notes. The yellow highlighted buttons at the top of the screen indicate to the user that they are currently viewing the Workflows in the left pane and the Wireframes in the right. At this point in a users project there is no data (Sitemap/Workflows/Wireframes/Notes) because the Anoto pen data has not started streaming in the pen strokes. It is after this point a user would start to sketch with the Anoto pen to import data. Additionally, notice that a user always knows what project they are working on by looking at the top of the screen in the title bar; here is lists My Project as the project currently being worked on.
- After a user has started sketching with the Anoto pen, the data will instantly be streamed into Jigsaw and displayed in the workspace under the corresponding category. In Figure 4 below you can see that a user has sketched a workflow with the pen thereby creating a workflow diagram in Jigsaw. Jigsaw knows that the user sketched a workflow diagram because on the Anoto enabled paper the user had sketched on, the user checked the box labeled Workflow (see Figure 8). Also notice in Figure 4 that the project name at the top of the screen in the title bar indicates that the project has been changed and that the changes have not been saved. This allows users to keep close tabs on their work and leaves no guess work as to whether they have saved or not. You will also notice a large, semi-transparent number 2 on the workflow diagram. This is to indicate to the user which Anoto enabled page the users had drawn on; the number is actaully the page id.
- Similar to step 4 above, Figure 5 shows a new diagram, a wireframe, that has been imported into Jigsaw into the wireframes category. It appears in the right pane of the workspace because the button Wireframe is already highlighted; if the left pane Wireframe button had been highlighted the imported wireframe would have appeared there as well. Again notice the large, semi-transparent number 6 indicating to the user that they have drawn that cooresponding wireframe on page with id number 6. Also, as you can see in Figure 10, the button on the Anoto enabled paper has been checked Wireframe indicating that when imported into Jigsaw, that sketch should show up in the Wireframe category.
- In Figure 6 you'll see that another wireframe has been added to the wireframe category. As is demonstrated in Figure 6, when more wireframes are added to the project, Jigsaw starts creating thumbnails of the wireframes so that all wireframes in the project can be viewed. If more than 4 wireframes are in a project the wireframe view in Jigsaw will enable a scrollbar so that additional wireframes can be viewed. This functionality applies to workflows as well as notes. Notice that this new wireframe diagram was sketched on page with id number 5 and was checkmarked as a wireframe on the Anoto enabled paper as can be seen in Figure 9.
- Figure 7 shows a very important feature of Jigsaw, namly hotlinking. A user uses hotlinking to associate workflows, sitemaps, and wireframes with each other. A hotlink is created by double clicking on a full pane view of any diagram; this automatically creates a movable, re-sizeable green square. This square will then be moved over the portion of the diagram that you would like to associate with other diagrams; the square is also resized to fit the sketch as closely as possible. In Figure 7 you'll notice that the hotlinks are being created in the workflow diagram. You'll see two hotlinks created: one is created over the "Credit Card" portion of the diagram, the other over the "Confirm" portion of the diagram. Hotlinks are associated with other diagrams by simply draggin the diagram you'd like to associate onto the hotlink and then releasing the mouse. In this example, the wireframe number 6 was dragged onto the hotlink over "Credit Card" and wireframe number 5 was dragged over hotlink over "Confirm". Once hotlinking has been set up, a user can click on any hotlink and see all linked diagrams highlight in the opposite pane.
What was left out and why
- Linking wireframe buttons to other wireframes is a functionality that will be implemented in the final prototype. Because of time constraints and the number of features that do have to be implemented we felt that the ability to link between sitemap→wireframe, sitemap→workflow, and workflow→wireframe is sufficient for demonstrating our prototype.
- As noted above, batch processing of pen data was originally how we were planning to implement data transfer between Anoto pen into Jigsaw. But due to R3 Toolkit constraints we have instead worked with streaming for the time being.
- Project Saving was not implemented as noted above due to necessity in light of time constraints. It will be implemented in the final prototype of Jigsaw. Our reasoning behind this was that by not implementing Saving, users could still understand and work with the UI.
Wizard of oz techniques
- Partially wizard of oz'ed is the method in which we used to import pen data into Jigsaw. Originally we were planning to use batch processing to import pen data into Jigsaw; we are currently implementing streaming where pen data is streamed into Jigsaw immediately.
Prototype screen shots
Figure 1
Initial screen a user would see once opening Jigsaw. The only options available are to create a New Project or Open Project. Notice in the title bar at the top of the screen there is an indication that No Project is Open.
Figure 2
The new project dialog. Only directories are displayed because Jigsaw projects are defined as a collection of files organized within a directory. We used the word "Folder" because it is commonly understood and shorter (for GUI purposes) than "Directory".
Figure 3
Once the user has created a new project, he/she is presented with 2 panes containing buttons that control what the buttons are displaying. The highlighted button indicates the current mode of display - thus, the display mode is highlighted while presenting all available options at the same time: all state information is available to the user.
Figure 4
The user adds a workflow drawing, since we are currently using streaming mode, "batch import of pen data" is in a way being "wizard-of-oz-ed". Also notice that the main application window's title bar now indicates that changes have been made to the project which have not been saved.
Figure 5
The user adds a wireframe diagram to Jigsaw. Currently the diagram is automatically added to the project because streaming is implemented. Once R3 later supports batch processing this will change.
Figure 6
The user adds another wireframe diagram. This is done by simply sketching on another Anoto enabled page with a different page id than others already sketched on.
Figure 7
The user creates two "hotspots" on the workflows that are linked to the appropriate wireframes drawings. For this prototype, hot spots are not fully functional but a user should be able to move, resize (implemented), and click on a hotspot (single-click to highlight linked item on the opposite pane; double-click to zoom in on linked item on opposite pane).
Figure 8
The paper UI for the workflow drawing above. Notice that the page numbers are matched up with the GUI.
Figure 9 & 10
The paper UIs for the wireframe drawings above. Notice that the page numbers are matched up with the GUI.
Source Code
An included README has some installation details. In current state, best when run from within Eclipse. Paper UI PDFs may be generated on initial run of application: the application is designed to "ship" with pregenerated paper PDFs and PostScript files. We will have these on a CD for our presentation.
Source code is actually a RAR file.
Powerpoint Slides
jigsaw_prototype_presentation.zip
