FinalPrototype-Group:Jigsaw

From CS160 User Interfaces Fa06

Jump to: navigation, search

1 Team Member Contribution
2 Problem and solution overview
- 2.1 Problem
- 2.2 Solution
3 Target User Group
4 Tasks
5 Design Evolution
- 5.1 UI Changes
- 5.2 Evaluation Techniques
6 Final Interface
7 Diagrams & Screen Shots
- 7.1 Powerpoint Presentation
- 7.2 Source Code (RAR file)

[edit]

Team Member Contribution

Scott Friedheim: Report, Presentation
Patrick Rodriguez: Report, Presentation
Yen Pai: Code Guru1
Siu Pang Chu: Report

[edit]

Problem and solution overview

[edit]

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.

[edit]

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:
1. designs to be easily digitized and imported.
2. designs to be linked providing real time workflow visualization.
3. designs to be output as a presentation to colleagues and/or clients wirelessly using the Anoto system.
4. 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:
1. give presentations just as PowerPoint does.
2. 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.

[edit]

Target User Group

Jigsaw is targeted toward web and software designers. It is a tool that is meant to be used during the initial design phase of a project where designers are: sketching out pages, designing the site map and page-to-page logic flow, designing process flows. Our application is targeted toward users whom are already familiar with applications such as Photoshop, Illustrator, Visio, PowerPoint, etc. They are medium to advanced computer users, internet savvy, and would have no reservations against using the Anoto pen as they would be familiar with peripherals such as scanners, digital cameras, web cameras, and printers.

[edit]

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. When exporting, users can choose which workflows to include. Because Jigsaw is a comprehensive application for designers to use during the initial design phase of a project, it is important to provide extend it's use beyond the initial phase of design. By this we allow for image export.
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. This is the central objective of Jigsaw which provides the designers a quick and easy method to edit, display, animate, and present their ideas.
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 (we have implemented such paper). 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. This is the boundary between a designers sketches and digitizing them. It is the ability for the user to sketch their designs and then have them automatically imported and organized (by use of the check boxes on the sheets) into Jigsaw.

[edit]

Design Evolution

[edit]

UI Changes

Initially, during our design sketches, our group didn't have a clear idea as to how the final application would look. Additionally, we were unsure as to what all the main features andfunctionalities would be. Our initial sketches only portrayed Jigsaw as being an application that links imported wireframe sketches together. Navigation was also under construction; at the time we were considering left and right mouse drags being the main source of navigation between panes on the screen. Since these initial designs our application functionality has changed considerably.

[edit]

Changes as a result of Low-Fi testing

Issue: During the low-fi testing, users became a bit confused when switching between panes on the screen via. The method for switching panes was to click one of two buttons at the bottom of the screen. The problem with these buttons was that they meant different things depending on what panes the user was actively viewing; effectively making the buttons modal. It is important for our users to maintain context and never get lost.
Change: To solve this problem we made window navigation easier by locking in two panes to fill the window at all times and adding a menu bar in the form of tabs at the top of each pane. This allowed users to easily view what pane is active as well as switch between views.

Issue: The test subjects 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. This was not a possible function because sitemap/wireframe view was not an option in the current design. This was a design implementation that we had overlooked and was indeed a good point.
Change: We made linking wireframes and workflows to sitemaps possible by allowing any two panes (Sitemap/Workflow/Wireframe) to be viewable at any one time.

Issue: During the low-fi testing some test subjects explained how taking notes during the initial design process was an important tool for them reference later. Our design did not allow for notes to be viewed because onlySitemaps, Workflows, and Wireframes were panes in the application
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 theUI 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: Users were confused about whether selecting "New Project" in the File menu was required before beginning to work or import sketches. One test subject asked whether or not the application opened with a new project or if they 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.

Issue: Some test subjects noted that Wireframes should be able to link to each other. This was not possible at the time because both panes on screen could not be Wireframe views.
Change: Again, with the new tabular menu at the top of each pane, a user would then be able to link Wireframes to Wireframes. This was a necessary change because many times in a web/software design, a few windows would feed each other; this was an essential interaction that need to be displayed in our application.

Issue: Our application did not support Project Saving at that time. It was a natural for a user to have the ability to save the project they were working on. We felt this functionality was necessary for an application such as ours where creating and opening projects were already implemented.
Change: Project saving was quickly implemented as a new feature under the File menu.

Issue: Users expressed concern about being able to resize the hotlinks. This was a valid concern because the hotlinks we used for the Lo-Fi testing was a one-size-fits-all block of paper. This made us realize that our design needed to be flexible to consider the many types of sketches that would be imported into Jigsaw.
Change: We made all hotlinks movable as well as re-sizable. They are now able to cover any area of a users sketches making them very versatile.

Issue: The Unlink and Update buttons that were attached to every thumbnail were a bit confusing to the user as to when they needed to be used. This seemed to be a classic issue of too many options and what to do with them.
Change: We decided to abandon these buttons not only because they were confusing to the users, but because they were a bit redundant and unnecessary.

[edit]

Changes as a result of Interactive Prototype testing

Issue: While sketching, users need to plan ahead where their sketch will end up in the Jigsaw application. Originally they were just handed a blank sheet, but this was terribly unorganized.
Change:Custom Jigsaw PDF sheets were created which included special check boxes labeled "Sitemap, Worflow, Wireframe, or Notes". By checking the appropriate box the user knows in which pane their sketch will end up in.

Issue: Similar to the previous issue, users need a method to uniquely track their sketches, especially when working on very large projects. There was currently no other method, other than users identifying their sketches, to track their sketches.
Change: The addition of unique page id numbers were added to the PDF pages that the users sketched on as well as added to the imported sketches where the id numbers were displayed as semi-transparent numbers on the digitized page. This effectively created a one-to-one mapping between sketches and digitized pages.

Issue: After adding multiple sketches into Jigsaw, the thumbnails are automatically re-sized smaller to accommodate the newly imported sketches. But this restricts the user in being able to view their full size sketches.
Change: The functionality was added to allow a user to double click on any thumbnail an have that image be zoomed to 100%. This was important because a user needs to be able to see their sketch clearly in order to link them to other sketches.

[edit]

Changes as a result of Pilot Usability testing

Issue: Users were very confused with the current file functionality where users would create, open, and save directories rather than a single file. This was especially confusing to users when opening a project where users would have to open a directory rather than a file.
Change: This was a must to fix because working with files is essential to Jigsaw. Also, because every tester had trouble with this functionality, it meant we had a serious design flaw. We changed our file structure so that Jigsaw now works with a file, just like most applications.

Issue: Users also expressed that a presentation mode would be very useful in presenting their designs to others.
Change: We created a presenation mode in which users would be able to click their hotlinks to view other parts of their design while all animation occurs in the same pane. We decided to restrict the animation to one pane because it would be less confusing during a presentation simply because a viewer wouldn't have to worry about all the other interactions and images.

Issue: Users explained to us that they were very confused when selecting some options such as "Exporting to JPEG" because after selecting the option there was no feedback indicating that any changes had been made.
Change: This was a critical error in the design because feedback is very important to a user stand point. It makes for an overall better user experience when there is conformation of a users actions. We added popup dialog boxes that appear after certain user actions occur.

[edit]

Evaluation Techniques

As can be seen from the previous sections, the Low Fidelity prototype was the most useful to our design process. First, this was the first major design of our application. Previously, we didn't have a clear picture as to how the application would look and function. Building the Lo-Fi prototype forced us to think of a clean design as well as how a user would interact with the design (ie. single click does X, while a double click does Y). It was at this stage of the design process that we worked out majority of the functionality details. This was important because it laid the ground work to be able to cleanly implement an interactive prototype in Java. Had we not spend as much time as we did during the Low Fidelity prototype, designing the interactive prototype would have taken many times longer.

Secondly, the Lo-Fi testing was the most successful of all the testing because this was where we received the most feedback as well as error discoveries. We found many design flaws and realized that some of our functionalities were implemented wrongly or not far enough to meet the users needs. Also, during this testing we were able to observe how users interacted with our application. During this process we learned much more about the users needs and their work process. By better understanding the users we were able to think more like them when considering our revisions.

The interactive and pilot prototype testing was not as revealing in terms of our design flaws. It did reveal a few issues but majority of the fixes and complaints were technical issues having to do with the code rather than the functionality or design.

[edit]

Final Interface

[edit]

Functionality

File operations - Creating new project files as well as saving and opening them.
Capturing pages - Draw on specially formatted sheets of paper and stream this data to application.
Organize by type - On paper, check Sitemap, Workflow, Wireframe, or Notes. This will move drawing into correct category in application for easy browsing.
Hotlinking - Any two items can be linked together in the application to represent an association.
Lock mode - Hotlink navigation is constrained to a single pane.
Editing capabilities - Pages can be deleted after they are added. Hotlinks can be moved, resized, and deleted.
Zooming and panning - User can navigate through the pages using an intuitive zooming system as well as using the scrollbars for panning.
Export Pages- Pages can be exported to JPEG files.

[edit]

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 Diagrams & 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.
After a user has created or opened a project and 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 3 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. Also notice in 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 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.
Figures 3-5 show 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. Hotlinks are associated with other diagrams by simply dragging the diagram you'd like to associate onto the hotlink and then releasing the mouse. Once hotlinking has been set up, a user can click on any hotlink and see all linked diagrams highlight in the opposite pane.
Figures 6-7 demonstrate Lock mode. If the Lock button of a pane is toggled, any navigation due to double click on a hotlink is constrained to a single pane. In this mode, no updates to hotlinks may be made.
Figures 11-13 demonstrate the Export to JPEG feature. After selecting a page, click on the export menu item will allow the user to save that page in the popular JPEG file format for use in other applications.

[edit]

Implementation

We used Java 6 with the R3 API and the Piccolo graphics toolkit.

The hardest part to implement was getting our application to interface with our pen and paper. After that, utilizing the functionalities of the Piccolo toolkit was a challenge, since none of us were familiar with it.

Two features that we would have implemented had we had more time are batch mode and remote control mode. We did not think that the batch processing capabilities of the R3 API was developed enough for our application. In addition, our test subjects seemed to like the instant update of our streaming mode. Finally, remote control would have been a nice addition when presenting. However, our test subjects did not share our enthusiasm since they thought presenting entirely with the computer wouldmake the most sense.

[edit]

Diagrams & Screen Shots

Figure 1
Initial startup screen. User can create a new project or open an existing one. Status in titlebar indicates that no project is currently opened.