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:
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.
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.
An interdisciplinary team