For my project for the Student Originated Software program at The Evergreen State College, I have joined a small development team working on VISTAS, a 3-D scientific data visualization tool.  This project is taking place under the mentorship of Judy Cushing and is funded by the National Science Foundation.

My role in the project is to focus on learning user interface design & programming with the goal of enhancing the usability of the program.  I am also actively learning about modern source control methods as well as obtaining practice at collaborative development.  In addition to feature implementation, I am fulfilling additional developer responsibilities within the VISTAS team, including attending weekly online meetings and contributing to code reviews, bug fixes, and collaborative readings of select research papers.

Timeline of Feature Implementation

Successfully Implemented Features

• Ability to zoom in & out using the MouseWheel.
• Altered camera panning behavior to be more intuitive.
• Added mouse-hover tooltips to all appropriate static UI elements.
• Overhauled the icon image resources to be more intuitive and visually appealing.
• Created a new VISTAS icon.
• Added icons to the title bars of plugins window, spatial animator, and main program.
• Wrote methods to load bitmap and icon resources.
• Fixed a bug related to scene counting.

TO-DO List

Short term:

• Fix the “Add” buttons on the Data & Visualizations tabs. Right-clicking is not intuitive to a new user. This could be as simple as a small “+” or “Add” button next to Project Visualizations/Project Data.
• Tooltips/mouse hover context information need to be added to the Data and Visualization panel items.
• Add camera modes to viewer panels, with mouseover hotkey information.
• Update wx libraries to 3.0, to allow for toggle buttons.
• Add default string to scene selection dropdown.

Medium term:

• Add “Help” section with integrated quick start guide.
• Revamp the Tool Bar. Re-evaluate overall layout, icon choices and functionalities present.
• Revamp the Menu Bar. Right now there is a bare minimum of functionality here, and several existing buttons don’t work.
• “About” as its own item, and not nested under File — to be discussed.

Longer Term:

• Adding/removing Viewers could perhaps be done in a more intuitive way.
• Bundle a small sample data set with VISTAS so that a new user can experiment with the program without committing to downloading a large data set & going through all the steps of setting up the visualization. Ideally this would come in the form of a sample project include with VISTAS, so the ability to Save & Open projects needs to be implemented first.
• Ability to take a screenshot of the viewer window, either via right-click or perhaps a button in the toolbar. Ability to copy screengrabs to clipboard for easy insertion into documents/emails/whatever.
• Optional camera controls on the viewer window might be nice. At least a zoom control– Shift+mouse zooming is not always intuitive nor precise for fine camera movements.
• Ability to click on colors in Legend and change them.

Project-Related Links

• VISTAS Homepage
  
• VISTAS Source Code Repository (BitBucket)
  
• My Winter Status Report Presentation

Bibliography

• Current practice in measuring usability: Challenges to usability studies and research (Hornbaek, 2005)
• Representation Design Benchmarks: A Design-Time Aid for VPL Navigable Static Representations (Yang/Burnett/DeKoven/Zloof, 1997)

Previous Posts

• Week 9 – Icon Overhaul
• Week 8 – Tooling In Tooltips
• Week 7 – VISTAS Meeting At OSU
• Week 6 – Zooming Mice
• Week 5 – Cupid the Time Thief
• Week 4 – The Best Laid Plans…
• Week 3 – The State of the Union
• Week 2 – The Spy++ Who Loved Me
• Week 1 – Getting Set Up
• Project Proposal – User Interface Developer Immersion

I submitted my first phase of graphical UI polish to the VISTAS codebase.  This is an initial overhaul of icon choices.  It may seem a trivial thing to be spending much time on, but icons are actually very important cues to your users.  Subtle enhancements in iconography and color choice can greatly improve how intuitive an application feels to a novice user.  Additionally, better-looking icons can make a program more of a visual joy to use.

VISTAS has had a very prototype look to it thus far.  Behold, the application as I first came to it:

The VISTAS UI, before my changes.

There are some eyesores here.  The icon on the title bar is just a default filler icon.  The icons on the toolbar are difficult to parse, and some are not even fully relevant to what they do– for example, the camera icon takes you to the “Create Flythrough” window, and the lock icon is really to sync all of the viewer windows.  Futhermore, the overall lack of color makes it hard to distinguish some icons from their neighbors… i.e. the play button on the animation controls on the bottom.

In my overhaul, I not only selected new representations but also introduced more color, so that neighboring icons stand apart from each other.  The “Create Flythrough” icon is now just a picture of a plane, and “Sync Viewers” is properly a picture of a split screen with sync arrows between them, mirroring what it actually does in the application.  There are a lot of other little graphical embellishments throughout the program, but this main program window shot gives you a good idea.  Note that my blog substantially scales down screenshots, but hope this gives you a good sense of the style of my update:

The VISTAS UI, after my changes.

Note that I have not yet addressed icon placement; only image choice.  I still plan to overhaul the menu bar and icon placement in a later update.

While I was at it, I updated the main program icon.  The old icon was functional, but had pixellation around the edges and was just generally not too easy on the eyes.  So, I created a more colorful version in the spirit of the original.  Here they are, sitting side-by-side on my desktop:

Finally, I also created a new pair of methods to ease loading icons and bitmaps from file.  Previously, when creating a new control with a graphical element, you had to embed a big long resource string in your function call and pass it the type of the image.  Now, with my GetBitmapFromImage() method, you can just call gApp->GetBitmapFromImage(“legend.png”) and it’ll handle the rest.  Here’s the source code; it’s short, but sweet.

A pair of methods to load external resources.

Still being a rookie to the project and source control, it took me a lot of revisions to get an update of this size pushed through and approved by the other devs… but I’m already feeling a lot more excited to use VISTAS!

Last weekend, I drove down to Corvallis to meet up with the VISTAS project team for a set of meetings with our scientific collaborators.  I had the pleasure of driving an official State of Washington vehicle, which made me feel like a Senator or something.

We managed to cover a lot of ground in the span of two days worth of meetings.  Of primary interest to my UI-enhancement project was a user session we ran with Bob McKane from the EPA.  Bob is a major collaborator on the project, and a big part of what the application does is support creating visualizations for a hydrology model he helped develop called VELMA.  Observing him using the application gave me a good sense of the sticking points & hurdles to a casual VISTAS user.  Specifically, there are two main sticking points:

• Correctly loading data files is tricky.
• Creating a visualization requires too many steps.

We also had a consultation session with Dr. Margaret Burnett from OSU.  Margaret gave us some great insights on user perspective.  One point she brought up that I found particularly interesting was the notion of “information foraging.”  This is the theory that humans evolved to have built-in “foraging” behavior to enable sifting through quantities of information in order to find the cues most likely to lead to food.  You can think of a user of an application as being a predator, searching for prey in the form of desirable usage outcomes. So when a user looks at a new application interface or website they’ve never visited before, where is the eye drawn?  What stands out to the user as being most likely to lead them to their prey?  Right now, in VISTAS, it is difficult to find the prey without preexisting knowledge, and I hope to change this.

I just submitted my very first Pull Request on bitbucket, for my very first new feature — mousewheel zoom!  Check it out:

My very first pull request! Hope it gets approved…

Previously, to zoom in in a scene, you had to hold down the SHIFT key and then move the camera in or out.  This is not the most intuitive thing to a user!  Part of what I want to revamp in the program is the intuitiveness of the camera controls, so I implemented a MouseWheel event handler which zooms the camera in or out depending on whether the user rolls the mousewheel forwards or backwards.  This gives users with the right hardware a much easier way to control zooming.

It’s really a simple piece of code, but it’s a start, and signifies that I’m beginning to understand how to successfully add new functionality to VISTAS.

View the source code:

Just a few small updates this week…

The team had a fantastic in-person set of meetings arranged for last weekend.  The plan was to meet with our scientific collaborators, as well as hold a consultation session with  Margaret Burnett, an OSU professor & UI expert, about the direction of VISTAS’ UI work.  Unfortunately at the last minute a snowstorm hit Corvallis, so the retreat was cancelled.

The VISTAS reading group read and discussed a really interesting paper called Storytelling: The Next Step for Visualization (Robert Kosara).  The author discusses the use of visualization imagery to compose an overall story to stakeholders, as well as the role of visualization in exploration of data relations.  Oftentimes the quality of a visualization is judged only atomically, so it was interesting to get a more holistic view of presentations and how they can compose visualizations to present an argument.

I sent the development team my rough roadmap of UI feature implementation, and got some really good feedback from the lead developer.  A couple of things that I thought were low-hanging fruit really aren’t, so I’m having to revise a bit.

Not much else going on… just need to buckle down and code!

This week was mostly spent on further research into UI.  I thought I’d take this opportunity to present a screenshot of where the VISTAS UI is at today.  It is currently a “bare metal” design; functionality has been kept at a minimum while the rendering engine has been worked on.

The Vistas UI, as it stands today.

Upon recommendation from Judy, I took a look at another visualization program called VisIt.  VisIt has been under development for many years by the Department of Energy, and in that time has become very feature-rich.  As you can see from the following screenshot, it is anything BUT “bare metal”:

A screenshot of VisIt, another visualization program.

As the scope of VisIt is presently much larger than VISTAS, I highly doubt VISTAS will ever need anything close to that many UI elements.  Nonetheless, I thought VisIt had some interesting features.  Namely:

• Separate windows for loading/project management & visualization
• Axis locking and zoom controls
• Ability to change colors used dynamically via color table
• Camera views – ability to lock, save & load
• Save/Print Window for easy export of imagery

I also read an interesting paper: Current practice in measuring usability: Challenges to usability studies and research, Kasper Hornbaek, International Journal of Human-Computer Studies, Int. J. Human-Computer Studies 64 (2006) 79–102.  In it, Hornbaek acknowledges and evaluates the efficiency of various metrics for usability.  Particularly, he identifies the following measures of usability which can prove useful to my work on VISTAS:

• Binary Task Completion — did the user finish their task?
• Accuracy — how many errors did the user make while working towards their task?
• Recall — how much information can the user remember after using the program?
• Completeness — how complete of a solution did the user achieve?
• Quality of Outcome — the user’s subjective satisfaction with the end result of program use

The differences between Accuracy, Completeness, and Quality of Outcome are subtle but very important.

In other project news, we are having a VISTAS teem meeting in Corvallis next week.  I am excited to visit with everyone, and am looking forward to the opportunity to talk to Margaret Burnett, an OSU professor who is an expert on UI and does some really cool research into machine learning techniques applied to UI.

I spent this week cloning the latest VISTAS build off of the bitbucket repo and making sure that my Visual Studio can successfully build it.  This was a bit tricky, as large open source software projects inevitably gather a lot of dependencies, but I believe that I have my workflow in place.

I also set up this blog, submitted my project proposal (see previous post) and did some online resource hunting.  I’ll list these resources here for me to come back to…

VISTAS Related:

VISTAS Project Blog
VISTAS Source Repository

wxWidgets Related:

wxWidgets Alphabetical Class Reference
wxWidgets Guides & Tutorials
wxFormBuilder – Open Source wx Designer

Research Papers of Interest:

User Interface Design with Visualization Techniques – A pretty basic paper, but introduces an interesting scoring rubric for UI analysis
Current practice in measuring usability: Challenges to usability studies and research – More interesting thoughts on UI quality heuristics

Summary & Learning Objectives

For my senior project, I will be working collaboratively on a small development team working on VISTAS, a 3-D scientific data visualization tool.  This project is taking place under the mentorship of Judy Cushing and is funded by the National Science Foundation.  VISTAS has already been under development for several years, so a big challenge of my project will be learning my way around an existing large C++ codebase.  The rendering engine in the application is mostly complete; however, the tool is currently slightly buggy and can be somewhat unintuitive to use.

My role will be to focus on learning user interface design & programming with the goal of enhancing the usability of the program.  I also hope to learn about modern source control methods as well as obtain practice at working on collaborative software projects.  Throughout the course of my project, I will also be fulfilling additional developer responsibilities within the VISTAS team, including attending weekly online meetings and contributing to code reviews, bug fixes, and collaborative readings of select research papers.

Resources

The existing VISTAS UI uses a cross-platform library called “wxWidgets” for all of its graphical UI elements.  There are official wxWidgets tutorials as well as a reference page online– these will be my primary resources for this project.

VISTAS-related resources can all be found at the project’s webpage.

Implementation Plan

My plan initially is to target making addition and removal of visualization scenes more intuitive.  I also hope to add context-driven mouseover tooltips for user interface elements and a basic in-application help menu complete with a quick-start guide.

When it comes to exactly what I mean by “making addition and removal of scenes and visualizations more intuitive”, I had in mind:

• Add ability to delete items from Data & Visualizations tabs.  Currently, removing a scene requires rebooting VISTAS.
• Add “Add” buttons to the Data & Visualizations tabs.  Right-clicking is not intuitive to a new user.  This could be simple as a small “+” or “Add” button next to Project Visualizations/Project Data.

Beyond this, I’ve compiled a list of some user quality-of-life features that I think would be good additions.  The big two in my mind are the ability to Save/Open/Close projects and the ability to add annotations/pins to visualizations, but I’d like to work up to these.

Evaluation of Work

All of my code commits to the project can be viewed at my bitbucket profile (https://bitbucket.org/jmangue/profile/activity).  Furthermore, I will be keeping weekly online journals detailing my work on VISTAS.