MACROINVERTEBRATES.ORG
  • PROJECT
  • PEOPLE
  • PRODUCTS
  • Blog
  • Resources
    • Help
    • FAQ

Macro App Tasks This Semester

12/26/2020

0 Comments

 
By Dominique Aruede, CMU Cognitive Psychology
When I joined, the quiz section had not been developed at all in favor of refining and refreshing the ID key and field guide which are more directly interpreted from the original website. Consequently, it was important to gather human-centered data again in order to assess the efficiency of the current design and determine if we could branch out to the quiz or keep working on the current designs. 

First Task: Audubon Field Guide Walkthrough & Modeling
I spent a little time doing some exploration with a physical field guide and noting how it maps to real-world use and facilitation of citizen science. This step was particularly useful for getting my bearings on what the purpose of the Macroinvertabrates.com project is, how insect identification fits in, and how it works.

Second Task: User Testing
We conducted several user tests on insect ID experts and novices alike, with a focus on novice user experience from high schoolers and other young students.

The purpose of these usability tests was to gauge the design direction of our second iteration and to gather more user input to launch into the next iteration.

We reused the protocol from the first round of user testing and changed the questions to capture answers on our new inquiries:
  • Do novice users know what the app is about upon exploring for a short time?
  • Is the app flow easily browsable? Does it cause any confusion?
  • Can users find order information and how difficult is it to do so, especially when it comes to finding specific information (PTV, diagnostic characteristics, etc.)?
  • What is the feed forward afforded for the floating hamburger button? Is it noticeable?
  • Do users recognize the layers of insects within orders like the families and genera?
    • How clear is the distinction
    •  What is navigation within these layers like?
Picture
The results revealed to us that the field guide was indeed informative, but subsequently neglected some utilitarian features that would be helpful for novice users. This helped to inform the learning goals and first iterations of the quiz design. 

Below is an affinity diagram of the synthesized insights. It includes
  • There is a lack of clarity surrounding the distinction between the scientific and common names, so a direct typographic style change needed to be made
  • The design lacked context about how features worked and what all the labels mean
  • Users generally do not understand the significance and meaning of pollution tolerance values (PTVs) for each order, so we could include an info button that explains the components
Picture
Third Task: Quiz Design
The earliest version of the quiz was a rough sketch I drew up in Figma, but it did not have any learning goal or research claim behind it besides identifying some image as belonging to an order. These are the sketches below.
Picture
Picture
Picture
After further visualization, we wrote out the learning goals we thought would be the best to target in quiz mode based on the insights gleaned from the previous affinity diagram. The learning goals are summarized here:
  • Distinguish between orders
  • Learn the lookalikes (common mistakes) between orders
  • Learn which order survives at which PTV

After we gathered our quiz references, including Quizlet and Duolingo, we used our learning goals to consolidate designs for one flow of the quiz section. Users select their quiz type first, then their learning goal. An alternative flow that we are yet to explore involves switching those two options. Then we incorporated three quiz types: a flash card review, multiple choice quiz, and a matching quiz.

We drew this up on Figma and discovered a few issues/limitations
  • Common mistakes
    • It’s hard to provide an entire quiz section to the learning goal of distinguishing common mistakes for a multitude of reasons, and so we are leaning toward fleshing out a supplementary learning goal: “Learn to identify insect features and attribute common features to orders”
      • We predict this will aid novice learners in distinguishing common mistakes by proxy and we’ll also increase the concentration of families within each order included in the quizzes so that users can get a well-rounded understanding of each order
  • Content needs to be created in terms of how to appropriately phrase questions and what correct answers are
  • How can we get all our assets to be consistent in regards to the insect developmental stage and how will that affect our learning goals?
Picture
Picture
Picture
Afterwards we consulted our collaborator, who is an expert in aquatic macroinvertebrate education to give her opinion on the content and direction. From her insights, we decided to scrap learning PTV as a learning goal due to the inaccuracies of generalizing at the order level.

The next steps we plan to take include developing all the content necessary for accurate quizzing, fleshing out the flashcard review, the between order quiz learning goal for all quiz types, the common features learning goal for all quiz types, the common mistakes learning goal for all quiz types, exploring a new learning goal: “learning life history and fun facts about insect orders” as a deck in the flashcard review, and testing the usability and flow of our current design.​​​​
0 Comments

Macro ID Personas

9/22/2020

 
Personas are a common design research consolidation technique to make sense of user research data.  Here findings from observations, interview transcripts, and organizational document analysis were synthesized and a set of representative user types were created to allow the design team an abstracted view of a range of user types, their needs, motivations and use cases to continually consider in decision-making as the design evolved .

Below are a fictionalized set of personas we created based on our data to characterize typical users of  Macroinvertebrates.org.  Personas developed by CMU design student Adrian Galvin.

Audobon Field Guide Walkthrough & Modeling

9/22/2020

 
By Dominique Aruede
Last week Dr. Louw tasked the design team with exploring the material design of the Audobon Society Field Guide and Pocket Guide and possibly perform a few insect identifications using the guides. The latter book was a smaller, simplified, more utilitarian version of the pocket guide.

In an effort to frame and understand the flow of a typical bug ID guide, we spent a week looking into the specific design choices of Audubon identification pocket guides and field guides. Alice, Estelle, and I each went though the Field Guide, noting down different features that added value or clarity or ease of use. We all agreed the field guide had general helpful features like annotated images and a glossary of all the common names.

Since I'm a very new member to the team I received another book, the pocket guide, which seemed to be for more novice audiences and was easy to digest for context purposes. The field guide was more advanced in technical information than the pocket guide, and that took away some of it's practicality. Below are our individual syntheses and visualizations of the insights produced from the objective.

Web App Development for Macroinvertebrates.org

8/28/2020

 
by Chelsea Aci and Ziqi Dong
This summer we began development of an innovative open educational resource with the aim of making the task of learning to identify macronvertebrates easier and more engaging by developing a new kind of tool for guiding scientific observation and inquiry.  The goal is to release a mobile version of Macroinvertebreates.org optimized for field use in low-no wifi conditions, and which supports learning to identify aquatic insects and water quality assessments. 

Watch a video demo'ing our prototype with supporting documentation. 

Mobile App Pt. III: Usability Testing, Iterations and Changes

8/20/2020

 
By Estelle Jiang and Alice Fang

🐞📱

Moving to a higher fidelity prototype by following the design system. 
After showing our low-fidelity prototype to the entire team and developers, we decided to move forward by applying a more detailed design and developing the visual + design system. We also figured out how to showcase the relationship between orders, family and genius on the mobile application, and the UI components for each type of 'page'. It was one of the biggest challenges we met previously. 

For the color theme, we followed the guidelines the project used on the website and applied the blue color to highlight actionable parts. To keep the app clean and concise, we used white for the major user interface design. As for the typography, the body font is Nunito Sans and the title font is Roboto Slab. Due to limitations with the database information, and in an effort to bring about the features of the specimen in photography, we also worked with the gigapan background color, creating a floating, borderless 'under a microscope' look [see image on the right].
Picture
Picture
Changes we made for the high fidelity prototype after discussion: 
Picture

Homepage - We thought the card view can be bigger to attract people’s attention and intrigue their interest. Since we only have 10 orders, we did not have too many concerns about accessibility at the very beginning. The ID key button is also replaced on the home page. 

The dropdown menu was also changed to help user easily navigate and get back to main page.


Picture

​We also added icons to explain the functionalities and applied color for the side menu to make it stand out more. As we mentioned on the previous post, we were struggling between a button to expand, and swiping up. Since we were worried about the experience of swiping up which is too hidden on the bottom of the screen. we iterated and created a button on the bottom for accessibility instead.
Planning and preparing first round usability testing
To conduct our first round of testing, we started with writing the testing protocol, thinking about the purpose of the testing and the goals we want to achieve. 

The purpose of our testing was to test the logic of the user flows, and to identify potential navigation and usability issues. We wanted to understand if the application is engaging to users, and is useful in identifying macroinvertebrates and learning their characteristics. 

We assigned a few small tasks for users to finish during the testing: 
Pre-task: Users will be given 30 seconds to get familiar with the application before doing task. 

First task: Users are asked to browse the different orders though different ways. This way, we can then tell whether the design makes sense, and take note of how users navigate through the different levels of information.  

Second task: This task was focused on the detailed Order & Family page designs, users are asked to find out more detailed order and family information, as well as specific diagnostic characters for a specific family. By asking the users how difficult the task is, we can evaluate the slider design idea we had, and how accessible / noticeable the actionable button is. 

We also asked additional questions at the end of testing to check whether they can have a clear understanding about our application throughout the testing process, including:
  1. Any challenges or issues you want to highlight? 
  2. Any opportunities areas we should consider?
  3. If you were going to tell a friend / colleague about this app what would you say?
Synthesize the findings to guide our next iterations.
Overall, we conducted five user interviews, with macroinvertebrate experts, people familiar with the site, and a novice user; I also got feedback from my friend who knew nothing about the concept or field in order to get additional novice learner’s insights.  
​

Rather than use the normal user research method - affinity diagramming to synthesize the testing findings, Alice made the excel sheet to list out the key points the interviewee made for each task. It helped us highlight the common suggestions and feedback. 
Picture
Here are the findings that guided our next iterations:
  • There is a difference between experts’ needs and novice learners’ needs. The user experience of the application needs to cater the needs of both parties. Experts want to quickly access the specific order/family information but novice learners want to understand the relationship and be guided to learn. 
  • Although the card looks nice, the homepage is not accessible and it’s hard to guess the usage of the application by looking at the homepage. 
  • Users did not expect to find more information from the bottom button and it will take an extra step to access. 
  • The dropdown menu can help them easily navigate within orders and families; although different users navigated the app in different ways, including the drop-down and the hamburger menu; no one selected the back button.
  • There was also a slight gap between ages of users and expectations with swiping through different pages.
Iterations we made.
Since the first version of high fidelity prototypes are hard for novice learners to learn and understand the additional information, I quickly brainstormed two other versions to display the information and hierarchy between orders and families. 
Picture
The first version allows users to swipe and learn along the way. The experience is more immersive and easy to follow if the users have no idea about the insect and the order. However, it doesn’t give enough freedom and choices for users to explore themselves, and quickly becomes repetitive for more experienced users. 

Picture
The second version can cater the needs of both experienced users and novice learners since it allows them to quickly switch between various levels of information. The structure of the insects are also easy to tell and discover. The homepage was also iterated from showing only one order to display multiple orders at once. 

The developers moved forward with this version, and worked to develop a beta version. It was interesting and difficult figuring out how to work in parallel; they were focused on setting up the database and structure, while we were iterating through the designs, but we couldn't progress too far or change too many things after they began developing the pages.


Macroinvertebrate Bandanas!

8/12/2020

 
By Alice Fang
New 🐞 bandanas! I designed a bandana that highlights the insect illustrations done by Morgan Summerlin, inverted on black. The illustrations are placed on a diagonal for optimal bandana-folding-wearing! :-). Handy for working in wet settings, and promote Macroinvertebrates.org when you have to maskup, 
Picture

Mobile App Pt. II: New Team, New Ideas!

8/12/2020

 
By Alice Fang

🐞📱

Re-framing with a new team!
Chelsea and I were joined by Estelle (Yi Cheng) Jiang and Dakota (Zi Qi) Dong in late May. Moving forward, Chelsea and Dakota will be working on development, while Estelle and I will be working on the design and user-testing of the app. There was an adjustment period as we introduced the project to the new members and got everyone acquainted while figuring out how to work collaboratively in a remote wfh environment. 

Through this process, we've been utilizing google docs and spreadsheets, as well as Figma, but coordinating between design and development has been tricky. Accommodating and synching the design and development timelines was difficult, and it was a bit touch-and-go.
Spreadsheets and Organizing Data
Previously, I struggled with establishing a structure to the app that allowed for navigation in and out of orders/families. To make the taxonomy clear (as we are non-scientists and non-bug experts), and to organize the information for design purposes, I created a spreadsheet with the following:​
Picture
1. Inventory of functions that exist on the website​
In order to figure out the minimum viable product that can be developed by students within a summer, and to compare what needs to change from Order to Family, I listed all of the functions for Order/Family/Genus.
Picture
 2. List of insect orders, the families in each order, and the number of specimen (genera) in each family, and the number of diagnostic characters for each family and order 

While many of the families have similar numbers of specimen, there were a lot of outlier cases we needed to keep an eye on, and account for while designing. The length of names, both common and scientific, impacts the typographic system, and the number of diagnostic characters affects how we visually set up that information. Some of the cases are as follows:
  • Greatest number of diagnostic characters in a family is 8 (most families range 2-4)
  • In comparison, the range of Order diagnostic characters is 1–3
  • Longest scientific name: Polycentropodidae
  • Shortest scientific name: Dixidae
  • Longest common name: Broad-Shouldered Water Striders, Shortlegged Water Striders, Riffle Bugs
  • Shortest common name: Darners​

*Dev team has to set up the database (I don’t know the exact details). We ran into a challenge late in the summer [early August] where the Gigapan database had to be moved, and there was no way to extract some of the family traits and text information, requiring manual copy and pasting
Collecting References and Resources for Ideation Round II
Getting the design team on the same page.

I showed Estelle the previous mockups and ideas that I had for the mobile app, but in order to refresh and sort of create a mutual visual language, we took the time to research and look at other apps. We compared and discussed field guide apps, quiz apps, and other text-based apps like news/media.
Picture
Estelle's feedback + insights
Picture
Picture
*Referencing Headspace, AirBnB, Medium, WWF Together
Alice’s Points:
  • Organizing info: list vs. grid (text vs. image)
  • Switching back from family to order (internal navigation)
  • Making clear important areas of app (use as field guide) and what information to highlight (ie. pollution tolerance vs. life history; diagnostic characters as learning tool)​
Picture
*Referencing Twitter, Google Maps, Medium Merlin ID, Audubon
Lo-fi Version 2
New Ideas and Changes

Estelle quickly mocked some basic page structures, and documented user stories. This allowed us to see possible entry points and user profiles for the app. What are possible ways people would use the app? What would they be looking for? And how do we prioritize that development at the same time?
Picture
User Stories
Picture
She also created this flow diagram of entry in the app and access points to different functions; however, it didn't include navigation and returning to previous pages, or other major functions we hope to implement in the future, like a quiz.
Picture
Home Page and Order Page Templates that Estelle created
  • High level navigation → broad view of orders with the drop-down menu!
  • Actually designing a home page! :-) that is visually interesting and hopefully incites curiosity
Picture
Scroll-up Popup for additional information, as well as an 'introduction' to the Order Page
Picture
Picture
*Comparing what a bottom pop-up that scrolls up, and a button on the bottom, would look like.

Between a button to expand, and swiping up, we originally decided on a swiping up action, but were worried about the screen experience that it would be too hidden on the bottom of the screen. As we moved into user testing, we created a button on the bottom for accessibility instead. It stood out more, and for someone holding a phone, was located in a position that was easy to access.
Picture
Through this process, we also started to get into the look and feel of the application. As the focus and beauty of the collection is the high definition images and close-up thumbnails, I really wanted typography to play a role in the visual style while staying close to what the desktop site looks like.

Mobile App Pt. I: Beginning a Mobile Macroinvertebrates.org!

5/25/2020

 
by Alice Fang
🐞📱
A little after spring break, Chelsea and I started on conceptualizing and developing a mobile app version of Macroinvertebrates.org, which we will continue to work on into the summer.
​

The original question we started with was what should the app do? (and what can we do to create a minimum viable product as a 2 person group?) The primary functions of the site that could be reflected in a mobile app were:
  • ID Key
  • Traits/Characteristics
  • Practice Quiz

Primary Goals for mobile: learning orders! and providing access when you don't have internet connectivity (creating a lighter weight, downloadable version)

A mobile version of the ID Key was already prototyped by Jaclyn last year, so the majority of the focus will be working on integrating Order and Family level information. Based on how far concept/prototyping goes, we may also integrate a practice quiz as well.
Picture
Different ways of showing 'additional information'
The first issue we ran into while refining the ID Key was the number of cases that the original design couldn’t accommodate for. For example, in the ID Key on the site, there were a few questions that examined/compared two different physiological traits ("wings OR wing pads", instead of just "wings"). How could the gallery of characteristics show images of both, and how should the help button appear to show both text explanations as well? 

This was the first (and definitely not the last) time where I struggled designing for mobile, instead of desktop or 'website on mobile.' I don't have much experience in designing a purely mobile app product, so I'm excited for the challenge and learning experience.

​Areas that need resolving as we move forward!:

  • Level of detail/information? Order to Family; genus is too specific, but how to show family-level information without genus? 
  • Information architecture
  • Working on mobile flow and interaction
​
Looking at Mobile Interactions
Picture
Google Maps|Twitter|Medium
​I took note of some common features of mobile apps to help structure our app as well. These are some references that could help with structure/organization.
​
  • Menu bar on the bottom of the screen, to direct to different functions of the app. Trying to incorporate this to separate viewing the images of the specimen from diagnostic characteristics and order/family overview. [consistent on many mobile apps]
  • How to display diagnostic characters + additional information? Is the bottom bar the way to go, or should the information overlay on top of the actual images? [Google Maps]
  • High-level menu from the left of the screen, to lead back to the ID Key, or a menu of just insect orders (see all the orders at once). [Twitter]​​
  • Scrolling down to see more content (eg. families in an order) and scrolling horizontally to see within the content (eg. genura within a family) [Medium]

​
Organization + Hierarchy
Picture
Trying to figure out how everything fits together
Once a user selects an order, the organization from Order > Family > Zoomable Image (Genus) becomes a little confusing. Should the user be able to select into a family page (option 1) or does it lead directly to the zoomable image? At what level is family-specific information displayed then?

*We established early on that Genus-level information was probably too specific for mobile, trying to keep the app more general
Picture
High-Level Menu
Picture
Bottom bar; popup additional information?

Practice Quiz Development

7/24/2019

 
By Emily Chan, Summer 2019 NSF REU
One of my main projects this summer was designing a practice game that leveraged our large collection of high resolution images for volunteers to practice identifying macroinvertebrates.

BACKGROUND 


A tool for practicing macroinvertebrate ID has been one of the most requested features by volunteers and educators alike. Before getting started developing a game, we took a look at the current resources available online. While there are an abundance of identification-based practice games on the internet (though hardly any for macroinvertebrates specifically), many of these games have similar designs that use low resolution images or generic illustrations, have little possibility for user visual interaction, and use a handful of example specimens that never change, meaning users can usually only play the game once or twice before being able to memorize the answers. In addition, usually only four choices of answers are provided, multiple choice style. Examples below:
In contrast, when conducting ID activities in authentic citizen science practice, volunteers need to be able to identify a large number of macroinvertebrates that may be sampled from a stream, to work around variations in size, shape, and color, and to be able to choose the right identifier from a large list of choices.
Our goal in creating this game was to simulate authentic practice, so our design for this practice game was informed by the identification process for water quality monitoring, and the biotic indices used by volunteers to classify macroinvertebrates. ​
PAPER PROTOTYPE

One of my goals was to keep the game as similar to the actual website as possible, so that it’d be easy for Chris to actually implement. Therefore, my first prototype mimicked the panel design developed by Alice. Every mystery specimen would be a genus-level page, with the text in the panel replaced by a question panel. The key ideas in the paper prototype were: the game goes on indefinitely until you choose to stop (in order to take advantage of our large collection); after you finish, it compares the water quality rating you would have calculated based on your identifications with the actual water quality rating; it uses the diagnostic characters as hints; when you get an answer wrong, it provides information about the differences between the answer you chose and the correct answer; and it has all the same zooming and changing view functionality as the regular site.

Though every single practice game I looked at provided four choices you could choose from, it seemed that this might not make sense for our game--if the choices were randomly selected, we might end up in a situation where the user is asked to identify a mayfly, and the choices are clam, leech, beetle, and mayfly. Having choices that don't actually look similar to the specimen isn't particularly helpful for the user's learning, but if we wanted to only show visually similar choices, someone would have to manually create the choices available for each specimen, which seemed excessive. In addition, in the actual scenario, volunteers need to choose the right identifier from a very large number of choices. Therefore, I sketched a multiple choice version as well as a version with a dropdown menu.
XD PROTOTYPE 1
We collected feedback on this first XD prototype at the Macroinvertebrates.org site launch event, allowing educators and trainers to play around with the mockup and asking them about their thoughts. Their main concern was whether the game would be leveled--suggestions included student, volunteer, and expert levels. Who the target audience is turned out to be a central question that the game still struggles to fully address. We chose to focus on volunteers, and get a  working version of the game for that audience first. I also considered whether it'd be useful to separate by region or ecosystem (like the Cornell Bird Quiz does), but I didn't have enough information about who'd be using the game and what they'd want from it to make a judgement about that. We made some additional minor changes to the design based on suggestions, such as bringing the diagnostic characters back on the correct/incorrect page, including an illustration of the wrong answer as well (i.e. a small illustration of stoneflies next to "This is not a stonefly"), and trying alternatives to "incorrect" (e.g. "try again", "sorry", etc.).
XD PROTOTYPE 2

After getting feedback on the first XD prototype at the Macroinvertebrates.org site launch event, we made the following changes:
​
XD PROTOTYPE 4
For the next prototype, we decided to make use of the annotated illustrations that we had available (with the text enlarged) to replace or complement the informational text. 
XD PROTOTYPE 5
After consulting with Chris, our developer, we shifted towards a tab-panel design, to maintain consistency with the genus level pages and to make developing the game easier. The hints were shifted to the second tab, similar to the genus-level page, and the third tab would either be an "About this Game" tab, or a score-keeping tab. 
SPLASH SCREEN
Chris also informed us that the instructions and results would have to be shown on a splash screen. Below are examples of splash screens we considered:
XD PROTOTYPE 7
After getting more feedback from Tara, we decided to add a list of the ones you'd gotten incorrect in the third tab, with pictures of the specimen and the correct identifier. She also advised us to shift away from having the game be a simulated stream dump (i.e. calculating a water quality rating at the end), and rather focus simply on identification, since there were so many different systems and standards used to measure water quality. 
ICONS
 Examples of different icons we considered for the tabs:
Picture

FINAL PROTOTYPE
Minor changes for the final prototype included simplified icons and adjustment of the correct/incorrect screen.
FEEDBACK + RECOMMENDATIONS FOR FUTURE CHANGES

As it stands, the current game live on the site still needs to have the list and images of the incorrect specimens added, as well as small changes such as adjusting the category names (i.e. "Net-Spinning Caddisfly Larva" to "Caddisfly Larva (Net Spinning) "), swapping in illustrations with larger text, etc. Another major challenge is finding a more elegant way of dealing with the "None of the Above" category. User said that they enjoyed the challenge of identifying uncommon specimens, so I don't think that omitting specimens that would fall into that category is the solution. Since most of the "None of the Above" specimens were either true bugs or fly larva, one user suggested a "True Bugs" category. If future changes are to be made, I would recommend adding a "True Bugs" and a "Fly Larva (Other)"  category. Other user suggestions included adding scientific names, since many who used the game were more familiar with scientific names over common names.

However, the majority of user feedback centered around the lack of levelling in the practice game. Since the users were recruited from a broad base of experience levels, many wished that there was an expert version for identifing to family or genus; while others noted that they hadn’t been taught the distinction between particular taxa levels of macroinvertebrates, and felt such categories could be confusing. Future work includes producing a “student” (order-level) and an “expert" (genus) level game.

Users praised the custom-written informational text and illustrations on the correct/incorrect screen as well as the zoom and hint functionality. In our sample, no users expressed issues with the tab structure, start screen instructions, or the indefinite nature of the game, which were design choices we sought to validate. 

​
EXAMPLE EXPERT-LEVEL PROTOTYPE

Site Changes–Panel Redesign

6/20/2019

 
Hi! I'm Alice, a rising junior at Carnegie Mellon University studying communication design with a minor in professional writing. I joined the macroinvertebrates team this summer as a design/research assistant, and I’ve been working on some site iterations for macroinvertebrates.org the past three weeks—namely, building stronger relationships between icon navigation and the actual informational content. I’ve learned a lot about prototyping quickly and keeping my work organized, in order to present solutions that have to rapidly be pushed to development. Having learned some basic web design and HTML/CSS, it was also a good learning opportunity in working with a developer to figure out what can or should be coded.

On the previous version of the site, navigational icons floated above the panels that held important and interesting content. We wanted to change the structure for organizing the content without creating a major overhaul of the previous system. 
Picture
The original structure for information, with four icons floating above.
Some of the questions I had to figure out for creating a side panel:
  • How can we group all of the information, and make it clear to users that more information is nested inside and that certain functions can expand?
  • How can we build a relationship between the icons at the top and the content in the panels?
  • How can we build the function of the first and last icons into the structure of the information?

One major issue was having a system where all of the content (order/family overview, media, iNaturalist photos, life history, characteristics) could be visible together but still consolidated. The original site had some strange floating/scrolling rules in order to fit all of the information. To address this, I explored different ‘drawer’, or side-panel, designs.
Picture
Sketches of tab functions, and existing navigation panels on other platforms.
In the end, we took the ‘Media’ content and the iNaturalist photos and grouped them into their own separate category, which was then referred to as the Media Tab. The panel thus had three tabs at the top: Information, Diagnostic Characteristics, and Media.

​In trying to incorporate the ‘clear all’ function, to show the macroinvertebrates without any identifying information, we took advantage of the structure of the panel; when the panel closed, it also cleared all information, leaving just the images of the macroinvertebrates. The default then became having the panel open to the diagnostic characteristics tab.
Picture
Three tabs organizing the information in the panel.
Picture
Closing the panel clears the information.
I also played around with different hover cues for the diagnostic characteristics. Clicking on a characteristic opened up a gallery that compared that characteristic for the selected macroinvertebrate with others that had the same feature.
  • Is the folded corner indicative enough of more information nested underneath? Do people know to click on it?
  • Wanted to take advantage of hover states, but not available on tablet (and tablet is a popular device for this site)
  • Should the icon mimic what’s already established in the interactive key? If Jaclyn’s re-designed key is implemented, does it matter?
Picture
Playing with different hover states.
Picture
Exploring different icons and color indicators.
<<Previous

    Project Team

    An interdisciplinary team
    ​of entomologists, learning scientists, software engineers and designers collaborating to improve macroinvertebrate identification training and technologies with volunteer biomonitoring organizations.

    Categories

    All
    Broader Impacts
    By Clemson
    By CMU
    By Educators
    By Powdermill
    By Stroud
    Design Studies
    Educator Innovations
    Entomology
    Imaging
    Learning Research
    Mobile App
    NSF REU
    User Research

    Archives

    January 2021
    December 2020
    September 2020
    August 2020
    July 2020
    May 2020
    November 2019
    August 2019
    July 2019
    June 2019
    May 2019
    April 2019
    March 2019
    February 2019
    January 2019
    October 2018
    September 2018
    August 2018
    June 2018
    May 2018
    March 2018
    December 2017
    August 2017
    June 2017
    May 2017
    April 2017
    March 2017
    December 2016
    November 2016
    October 2016
    September 2016
    August 2016
    July 2016
    June 2016
    May 2016
    April 2016
    March 2016

    RSS Feed

Project INFO

ABOUT
www.ept.macroinvertebrates.org
NSF Award  Listing

Partners

Learning Media Design Center@CMU
CREATE Lab @CMU
​
Clemson University 
Stroud Water Research Center
Carnegie Museum of Natural History

Collaborators

ALLARM
MD Streamwaders
Senior Environmental Corp
Pittsburgh Parks Conservancy

Trout Unlimited
Picture
This material is based upon work supported by the National Science Foundation under Grant #1623969.
Any opinions, findings, and conclusions or recommendations expressed in this material are those of the author(s) and do not necessarily reflect the views of NSF. ​​

  • PROJECT
  • PEOPLE
  • PRODUCTS
  • Blog
  • Resources
    • Help
    • FAQ