Site Changes–View Changer

By Alice Fang, Summer 2019 NSF REU

Another major Macroinvertebrates.org site feature that we iterated on was the dorsal/ventral/lateral view changer function, that existed as a rotating icon on the order and family pages, but also as a click-through menu on the genus pages. From prior usability tests, people failed to recognize the rotation icon was there, or that the function existed across the order/family level pages. Dezudio provided some solutions using a bar on the bottom left of the page, that had a blue triangle indicating which view was open.

However, several issues arose with that solution:

• In the case of an order like Caddisflies, there are five separate views; how can we show the total number of views without taking up too much real estate on the pate?
• Not every macroinvertebrate has an image for every view; how can we account for the original web display once someone starts clicking through the different view cases?
• ​How can whatever solution we create translate onto the genus pages, where a thumbnail and zoom function also rest in the bottom left?

Looking at how fashion websites addressed multiple views

So many different thumbnail attempts...

Trying out thumbnails on the family level page, with limited success.

Originally, I looked at different fashion and clothing sites, because those webpages had to find ways to display multiple views of items for customers. A common thread in every fashion site was the use of thumbnail images; that way someone could see all the possible images (and therefore all the views), but also know which image is in focus or zoomed in. I explored using thumbnail images of different views, but at a small scale, it became difficult to tell between dorsal or ventral views. There was also no way to implement this at the order/family level.

Instead, I returned to the Dezudio design, and looked at how sites like Netflix presented numerous shows all at once, and the small visual cues they used for scrolling and clicking through the choices. I played around with different click-through, infinite scrolling of views; this method of displaying information failed to account for a ‘total view’, so someone would have no idea how many total views existed for a macroinvertebrate unless they actually clicked through every single option. To workaround this, I added what Marti likes to call a “cookie-crumb trail” where small icons show the total number of views, and as each view is scrolled through, the “crumbs” also scroll through. ​

A mockup of greying out a macroinvertebrate if it didn't have the specific view. The actual images don't match up, I was just prototyping based on the total number of views each macroinvertebrate had.

A family level page, using Caddisflies as the prototype because of the numerous views.

Translating the same function to a genus level page. A little redundant having infinite scroll with only three views, but it keeps the action consistent between pages.

Chris implemented this differently on the live site. The triangle icon is grey when on hover, and blue when selected, and re-clicking the view returns it to its default; this reduces the copy/written information needed. If a view is selected, and a specific macroinvertebrate doesn't have that image, it is greyed out entirely, which I think looks really nice on the live site.

This eliminates the scrolling function; in hindsight, most macroinvertebrates didn't have so many views that the scroll was entirely necessary.