All posts by Michael Riess

Screen Shot 2014-04-08 at 7.43.14 PM

Michael’s Interface Design Critique

For my interface design critique I decided to explore the interactive site for MoMA’s “Color Chart: Reinventing Color from 1950 to Today” exhibition that took place from March 2nd through May 12th in 2008. And while normally I would gravitate towards talking “conceptually” about this project, I’m going to instead step out of my comfort zone and discuss the website’s functional elements, namely how one navigates the site. Overall, I really enjoyed this interactive, and the continually orbiting circles on the homepage definitely hook users into entering the site. However, bright and beautiful colors don’t necessarily equate to well thought out functionality.

 Screen Shot 2014-04-08 at 12.32.23 AM

To begin with, once on the site’s homepage, the user is presented with one of two options: either click on “Read the introduction” or “View Works” (which will offer you the option of viewing the works based on either the medium, the artist, or a timeline). Upon clicking the “Read the introduction,” I was immediately “turned off” by the clunkiness of the 2 page introduction. Because there isn’t a lot of information provided within this section, either one body of text or a scroll option would have worked nicely here to avoid the awkward “page flip” of small text. This particular “seam” did not work in this particular instance.

Screen Shot 2014-04-08 at 12.38.02 AM

Bigger font and using more of the page’s real estate would have worked well, too, however this page of the site relies heavily on the constantly orbiting balls of bright and inviting colors to keep the user’s attention. It feels like a “cheap” way to keep the user’s attention (considering circles don’t necessarily mean anything to the overall exhibition). Regardless, this page definitely got my attention, so I decided to click through the works based on the artist this time around.

Screen Shot 2014-04-08 at 1.04.45 AM

As the page loads, a beautiful color chart with a variety of artists’ names in alphabetical order appears, each name associated with a different color (the colors and the artists’ works have absolutely nothing to do with one another). Next to each artist’s respective color, there are a varying number of gray circles based on the number of works each artist has represented within the exhibition. Though it wasn’t necessarily obvious at first glance, I did come to quickly associate the number of gray circles with amount of work each artist had represented. Aspects of the site such as these definitely reflect the designers’ beliefs that users would quickly come to draw these connections among different shapes. Screen Shot 2014-04-08 at 1.44.43 AM

Once an artist is clicked, the art work(s) appears above the color chart where you can easily navigate among them. Click on a particular piece and, depending on the work itself, you’re given a few options to explore further: audio (represented by an audio symbol), “Full Caption,” or “Extended Text.” And while the audio component is definitely an interesting aspect, the other two options hinder the work of art presented by blocking it with a text box. If there was a way to use the site’s space, so that text and image would compliment each other, that would definitely improve the site’s functionality. Resizing the image would work really well at this junction.

Screen Shot 2014-04-08 at 6.22.11 PM

Once an image is clicked “to enlarge,” the user might be confused as to how to exit this screen. My first reaction was to click the browser’s backspace option, however this led me to the homepage which was really irritating. Instead, the user needs to simply click on the image again to exit the enlarged image (only later did I realize that it tells you “click to close” but only for roughly 2 seconds before disappearing forever).

Screen Shot 2014-04-08 at 11.24.49 AM

Something else that could be improved on this site, is not only the size of the navigation tools (arrows) but also their placement. For example, once a particular work is chosen you can scroll to other works (by the artist, year, or medium) only within the larger category. For example, it’s not so easy to go from “medium” to “timeline.” These arrows within arrows tend to be confusing. Why not use the copious amounts of whitespace on the screen?

Screen Shot 2014-04-08 at 11.37.56 AM

Concerning the hierarchy of information that’s presented, nothing stands out more painfully than the menu option in the top right hand corner of the site, the only way that a user is able to move among the different categories. Once scrolled over the menu circle, you can either choose to “View Works” again (seems a bit redundant) or go to “Installation Videos.” As already stated in class, this particular option shouldn’t be on the same “level” as the works themselves; it feels completely out of place with the rest of the site.

Screen Shot 2014-04-08 at 11.32.40 AM

And while this represents the “behind the scenes” component of the site, which can sometimes make for an interesting addition, it definitely needs to be placed somewhere else on the site. Perhaps at the bottom of the site where you’re given the option to either see the credits, download a pdf of the exhibited works, go to MoMA’s homepage, or link to the for sale publication of the exhibition (no longer available).

Screen Shot 2014-04-08 at 1.07.02 PM

Overall the aesthetics of the site prove colorful and inviting. However, the site doesn’t necessarily use color to its fullest advantage considering this is the very topic the exhibition addresses (color simply acts as a way to keep the user’s attention), and there is an incredible amount of whitespace. And while I’m not advocating the use of color everywhere, the available white space could definitely be used as the backdrop/opportunity for larger navigation tools (perhaps placed on the right and left hand sides of the middle of the page) that allow the users to have a more seamless experience.