Re-designing the interactions for complex tools and functions

Summer 2019
4 weeks

UI/UX
Interaction Design
Science communication

Learning Media Design Center, HCII
PI: Marti Louw

NSF Project
Learning to See, Seeing to Learn

How can we highlight the importance of tools and features on the site that are buried under multiple levels of interaction and make them more accessible? 


Macroinvertebrates.org is a teaching and learning collection designed to support freshwater insect identification, for both expert users, and novices. The site tackles the complexity of taxonomic identification, and aims to help with training a visual lexicon to  get people to think and observe like an entomologist. 

I was tasked with re-designing the tools panel, in order to create organization, establish hierarchy, and build stronger relationships between icons and the content. I worked closely with the developer and collaborated with entomologists to make informed decisions. 

More detailed process: side panel + view changer




01. Redesigned Site






Problem


How do you tell when a function is nested and can expand to show more information?



01. Original Side Panel


From prior usability tests, users failed to interact with the clustered information, despite the value of content nested. They did not recognize the function associated with the rotation icon, and did not interact with the ‘Media’ and ‘iNaturalist’ resources that were collapsed at the bottom of the panel. The team wanted to change the structure without creating a major overhaul of the previous system, while staying consistent across Order, Family and Genus pages.

- How can I show that information is nested and certain functions can expand?
- How can I build a stronger relationship between the icons and the content?






Process

Expanding and collapsing—designing the side panel


I explored different ways to show and hide a panel, and how the groups would collapse and affect each other. The volume of content in the information tab suffered from this the most; every group was (too) responsive to another, and it made interacting with expanding text or closing a panel very difficult—you would have to constantly adjust the vertical positioning of where you click.
02. First Iterations

Sketches: designing side panel / looking at view changers / panel collapsing

Panel iterations, demo-ing greying out on view changer

How many views are there? looking at view changers


I also explored different conventions for showing multiple views of an object. The use of thumbnail images was interesting, so that someone could see all the possible images (and therefore all the views) at once.

03. View changers


However, at a small scale, it became especially difficult to tell the difference between dorsal or ventral views. There was also no way to implement this at the order/family level—there would be too many insects, with no ‘generic’ isotype!





04. Information Diagram
This diagram shows how all of the content ended up categorized. The images/videos and iNaturalist gallery became categorized into a third group, which we called ‘Media,’ in order to separate it from the information group. The rotation icon was also separated from the right side panel; instead, it became grouped as part of the view finder function on the bottom left. Generally, Order/Family/Genus had similar content, with slight differences from page to page. 

05. Side Panel Prototype
I took advantage of the structure of the panel to incorporate the ‘clear all’ function, which shows the macroinvertebrates without any identifying information. 




06. Final Redesigned Side Panel and View Changer







Takeaways

Science communication is hard, even though citizen science is super cool.


It’s tricky designing for a learning/teaching tool, but entering the project as a non-expert myself provided valuable insight in how novices interacted with all of the information.

Things I learned on this project:
  • working on a tight timeline, in order to make a project launch! 
  • working alongside a developer to test usability and accesibility—a lot of the target audiences don’t have the same internet resources as CMU, so the site has to be able to work fast on any browser
  • dipped my toe into the difficulty of science communication, and a lot of things we worked on didn’t have a digital precedent or a field guide equivalent
  • got to look at a bunch of super hi-res photos of bugs, and I gained a greater appreciation for them! My favorite is Empheroptera Baetiscidae Baetisca 

︎ Other things I did for Macroinvertebrates.org:
    Print AssetsHamburger Nav Restructuring | Training Resources