Category Archives: Interface Critique

foundling-voices-homepage

Georgia’s Interface Critique: Foundling Voices

Interface Critique, Foundling Voices

Georgia Gallavin

http://foundlingvoices.foundlingmuseum.org.uk

Foundling Voices is an online exhibition of oral histories created in 2008 and run by The Foundling Museum.  The oral histories record the lives of children sent to the Foundling Hospital, the oldest children’s home in the United Kingdom. A total of 74 participants, mostly former children in the care of the Foundling Hospital, were interviewed for the project. This online exhibition poses questions about the ability of online projects, specifically those using archival material, to effectively convey the emotional weight of a subject matter while also making the subject “digestible” for users. The interface of Foundling Voices allows the user to interact with the carefully curated narrative of individuals and simultaneously allows the user to feel in control of his or her experience.

Narratives are organized around key life experiences and are ordered chronologically: life events range from “Early Life,” as individuals recount how they came to Foundling Hospital, “Into the World,” which recounts their lives after leaving and follows the arc of their life as they look back on the Hospital’s impact on them in “Reflections.” For the purposes of this project, organizing information in this manner is both intuitive and appropriate. The site assumes that users who come to the site are using it primarily as a tool for discovery and exploration, rather than seeking data on a specific individual. This assumption also accounts for the use of only the first name of participants, instead of full names, and helps the user to feel on more intimate terms with participants. When explaining the full life story of someone, it is natural to chunk information in chronological periods starting from birth to death, and Foundling Voices takes advantage of this common organization but adjusts the life story to reflect the Hospital’s impact on the storytellers.

navigation-themes

However, when a user is listening to a specific story, having either bypassed the home page or dived into a specific life theme, the content also becomes grouped by the specific individual. For example, once a user decides to listen to one of “John’s memories,” a user will see other stories about John on the right hand side. The original theme menu of life events remains prominent. In this way, the interface gives users control over how information is viewed with multiple methods of navigation: users can either explore themes chronologically or focus on a specific individual’s story.

navigation-alice

These stories are obviously very personal; the Hospital is a home for children without parents, and consequently, narratives carry both elements of tragedy as well as inspiration. In order to convey a more intimate feel to the site to convey these elements, individuals are listed on a first name basis, stories are titled with direct quotes from the narrative itself instead of generic titles, and photographs complement the stories without overpowering the audio narrative. The interface does an excellent job in limiting the length of stories to create an enticing glimpse into the world of the storyteller without overwhelming the user or losing their attention. Content is curated into “digestible,” engaging pieces for the user who is lured in by catchy narrative titles and is able to immediately assess the length of a piece by the block of transcription text or the length of the audio file.

Aesthetically, the site uses a minimum color palette, focusing on red, white and various shades of black. Although color is minimal, it is used effectively to demarcate different sections. The monochromatic coloring complements many of the older black and white photos donated by participants as well as making color photos “pop” on the screen. The font is both legible and visible and consistently white, the contrasting red effectively highlights where the user is within the site, and shading keeps the site from looking too flat. As a personal observation, this monochromatic visual design reminds me of the Public Broadcasting System (PBS) website which lends the Foundling Voices site an air of authority, authenticity and maturity that would not be appropriate, for example, on a children’s site.

foundling-voices-homepage

 

The interface does an excellent job in curating the narratives of former Foundling Hospital residents using archival material. However, the link to the original material is weak. Users are directed to the website of the London Metropolitan Archives (LMA) to view the full transcripts and audio, however the link only takes the user to the home page of LMA instead of to the specific audio file. This creates extra steps for those interested in getting more information about the Hospital or an individual. Therefore, the online exhibition serves as an exemplary portal for users who wish to browse and explore, but is not for researching specific information on an individual. There are instructions for how to do so, but it is not prominent.

access

Despite a weak link to the archival material itself, as part of a museum exhibition, I believe the objective of enticing as wide of an audience as possible is appropriate. The interface of Foundling Voices does not have many “bells and whistles,” but its minimal aesthetic design and intuitive organization of information lets the user connect with the storyteller on a personal level and draws them into their stories.

 

 

Screen Shot 2014-04-09 at 1.58.01 AM

Ari’s Interface Critique: FindAGrave.com and User Group Activation

Screen Shot 2014-04-09 at 1.57.41 AMFor my interface critique I examined a purposefully rather outdated web archive called FindAGrave.com. This site is a massive database containing  location data, photographs, and basic biographical data of actual physical graves from cemeteries all over the world. Much of this data has been further enhanced with user-created additions, called “memorials” that contain even more biographical data and photographs of the person when living. Users may also “leave a flower,” usually an animated .GIF image chosen from a massive database of different signifiers available, including sparkle flowers, snowmobiles, and horses.

Screen Shot 2014-04-09 at 1.58.31 AM

FindAGrave.com is not a beautiful web site, or even one streamlined for simple use. They have a staff of seven. But they have millions of activated members who use the site regularly and have for years with only very basic functionality. How has FindAGrave.com managed to engage so many users to create and promote content without giving them the cushy plush design,  optimized for the modern web? Many archives yearn for this level of user engagement. What can we learn from the design and format of FindAGrave.com that we can apply to our projects with the digital humanities for use cases where we want to get our user involved with our content.

1. Find the personal (or famous) connection.

Screen Shot 2014-04-09 at 1.58.01 AM

A large part of what FindAGrave.com does is provide something like an online social media profile for the dead, with an open wall for the bereaved to post. One of the biggest reasons for posting on a friend’s wall on Facebook is their birthday; FindAGrave provides the post-mortem equivalent. It also allows fans to interact with people they never knew, but as every fan club leader knows, the illusion of knowing a famous person is often felt just as , if not more deeply than actually knowing them.

FindAGrave.com also allows users to collect groups of graves together and call them “virtual cemeteries,” giving users the opportunity to organize their lists by any sort of criteria they determine. Many people make lists that resonate with them personally or that they think might be popular with or useful for the informaton-seeking public, i.e. “Victims of the Deepwater Horizon Tragedy.”

How can other archives use this to their advantage? First of all, they could prioritize metadata as it relates to names of people, attempting to categorize that more fully, and making sure that objects are searchable by person name. In online platforms, people could also have a sort of landing page, even if they are connected to several different types of objects; these landing pages could be collected in a light box or other individual categorizing device.

2. Integrate text into navigation, especially for tools.

Screen Shot 2014-04-09 at 2.02.21 AM

Without directly contacting the people who run FindAGrave.com, I can’t know why they don’t update their look and feel. It’s possible that they would very much like to, but have focused their funds on server space and staff. Perhaps they don’t see a need to redesign: if people are still happily using the site, why does it need an update? The latter idea is rather counterintuitive to many professional web development teams today, who emphasize agile, lean, iterative development, where new features are introduced constantly, one at a time, all over the site, so that users can become accustomed to them.

What we can know is that the completely text-based navigation on the site works. There are no images or icons used for tools anywhere on the site. Every button is either a browser standard button or a slightly stylized tab. Text links are used to navigate from category to category.

It may seem obvious, but as we saw in the demonstrations of the New School’s Digital Archives site, icons can get easily lost in the shuffle. They can be too small, or blend in with other site features. Their functions can be unclear (“Does the magnifying glass make it zoom in, or does it show you the metadata?”).

The downside is that you have to be careful with word choice and make sure to choose words that will matter to your audience. Since both physical graves and FindAGrave.com have a rather limited set of actions, this isn’t as much of a problem, but in more complicated archives, finding these activating words should probably be a process in which user testing plays a significant role.

3. People create content with the hope that others will find it.

Screen Shot 2014-04-09 at 1.57.31 AM

Users can submit their own graves to FindAGrave.com, and on the page that allows this interaction, the administrators of the site have found it necessary to issue a pitch:

“Why submit names to Find A Grave? In a word: Exposure. Over 3 million people per month are searching our database so the names you submit will definitely be seen, visited and remembered for years to come.”

This promise, that the sites will be visited and seen by others, is inherent to the success of the site. It’s a rather empty promise; other people will only look at the new grave if their search sends them there.  But this small amount of encouragement is apparently all that some people need to put in massive amounts of legwork. Some of the top users of FindAGrave.com have created hundreds of thousands of memorials, apparently only in exchange for “exposure.” What these users also get is the opportunity to be a part of an online community that forms around the hobby of obtaining this specific type of exposure.

I don’t think that archives should promise that their users will obtain great notoriety and/or great riches simply  by interacting with the materials online. However, emphasizing in site copy that user-generated content will be seen by someone – even just a digital archivist or site administration – might persuade many people to curate, create, and submit content to digital archives.

Screen Shot 2014-04-08 at 1.53.02 PM

Samantha Briglio Interface Critique: Princeton University Library Finding Aid

Taking what we have discussed in class, and ruminating on elements which, a general user might consider, I approached this critique in a slightly colloquial and personal way.  And though there are several elements to consider, it is important to keep in mind the framing and context for which these interfaces are being considered.  Steven Johnson’s conjectures about interfaces speak about the way they serve as doorways between worlds, specifically between the world of the user and the world of the site.  There is a layering component to the interactivity that goes on, and this layering can be as concrete as the type of hardware being used, and as conceptual as the time it takes for a webpage to load.  Johnson says,  “the interface serves as a kind of translator, mediating between the two parties, making one sensible to the other.”

This reminded me strongly of Saussure and his philosophy of Semiotics, where a “signifier” is a material thing that represents something, like words on a page, or an image.  The “signified” is the concept to which the signifier is referring.  Together, the two make up a “sign,” something that we use to communicate an idea.  For example, if one reads the word “tree,” then the image of a tree is what the individual would picture in their mind.  Signs are generally arbitrary, meaning they are specific to a particular convention or culture.  This could not be more true not only in relation to Johnson, but for library finding aids specifically.  Finding Aids are the guide for which users use in order to navigate library (archival) material.

For my critique, I chose to examine Princeton University’s Library Finding Aid, which won the Frederic M. Miller Finding Aid Award in 2012.  To test it, I began with frivolous, fun searches like “Harry Potter” to see the kind of results that would be generated.  My search for Potter was rather rewarding, as it came back with a link that would allow one to to request access to an audio-cassette of a commencement speech where it (Harry Potter) was mentioned.  It showed where this tape was located and in which portion of the library I might find it in.  This alone demonstrated the specificity of the finding aid, and how much metadata there must be in order for it to retrieve this information.  I thought this would be a good way to start as it is an unbiased topic, something random which the library may or may not have had anything related to. Screen Shot 2014-04-08 at 10.03.24 AM.png

After browsing over the Style Manual for Archival Finding Aids from Carnegie Mellon University again, it seemed that Princeton’s finding aid followed their suggestions about formatting and visuality.  They describe the typical layout of a finding aid, beginning with minute details, such as the style for the ‘results’ page.  The elements which they talk about seemed quite prevalent when I first arrived at the Princeton’s finding aid, it felt inviting, clean, and professional.  As an Ivy League university, one would assume that the appearance would be straightforward and simple, given that is meant to be used by students and professors.  The reason I chose this finding aid was because of its clean layout and simple design.  Nothing was noisy or overbearing, and I felt that this was an appropriate and professional looking theme.  The front page of the site uses a plain, paper looking color as the background, with a slight texture to make it seemed as though it is raised.  A picture taken from the front edifice of the university library serves as the header.  Circling back to Johnson, interaction between user and interface is dependent upon several factors, and layout and appearance definitely influence that experience.

Another way I thought to test the finding aid’s abilities would be to see the kind of information that would be returned in a search where the university should have special ownership of that material.  Put simply, to search for a subject or category that Princeton should be in possession of those materials.  We discussed in class that museum exhibitions are at times developed with the interest of the donor (of the materials) as the focus.  I thought perhaps that this could be true also of libraries, the type of access to collections which they would be allowed.  I postulated that the university’s library would have worthwhile information for alumni who have graduated.  And to make the critique more realistic, I thought searching for a famous alum would be a substantiated test, one that garner more results.  Enter Jimmy Stewart.  Stewart enrolled in the university in 1928, excelling in architecture, and wrote an impressive thesis on airport design.  Impressed with his work, his professors awarded him with a scholarship for graduate studies.  However, it was not long before he was sway by the university’s drama and music clubs, including the Princeton Triangle Club.  I used Stewart as another neat way of of testing the finding aid, but also with the consideration that, as past graduate of the university, perhaps Princeton would have some special materials related to the classic star.  Screen shot 2014-04-01 at 1.31.54 PM.png

The finding aid also allows you to search by language or focus subject, and refine the search in a way that could lead to departments not only within the library, but in the university.  On the left hand side, the finding aid displayed various subcategories for the user to use in order to refine their endeavor.  Depending on the search, the results could be looked for in a different language, format, or collection.  Upon clicking on a result to view its location, it would not only give the library, but the box and call number if necessary.  Related materials were made visible on the left hand side, and that content would then be broken down by type, year it was published or grouped  along with a hunt about the subject matter. When I tried looking for actual books to see how the call numbers were arranged, it seemed that they were un-clickable, stagnant links.  They were also colored gray which made them somewhat difficult to see against the background of the page, and even though they were listed adjacent to the title, it made the page slightly more difficult to navigate quickly. True to any finding aid, many of the pages were very text heavy. And though the coloring and fonts were well selected, there was still difficulty reading and absorbing everything easily.  For comparison’s sake, I looked at another university’s finding aid just to see if they had done any better. I looked at Columbia University, and found that they too used the university’s colors like Princeton did, but the blending of the two was too drastic, and the font sizing was too small to be comfortably legible.  Though Princeton’s did strain the eyes after some time, it was more engaging and easily read initially.

There were also certain forums that were built for student response and feedback. It was very surprising to see share buttons for Facebook and Twitter, given that it is a prestigious institution. This makes sense however, seeing as it is a student population, and these are the easiest and frequently used forms of commenting and posting. Also, it is not forcing the students to be limited to their university identities, they can interact with one another more easily and even give the university some attention if they post a link on their personal page. It also helps promotes interactivity and institutional community.  There was also a WordPress login as a tool that could be used for response. WordPress is used non professionally and professionally, so this was also a wise addition to the networks enabled for sharing.  As far as “seams,” I did not find many, which would be expected for a university of this stature and reputation.  I believe I ran into one error page, where there was some link rot.

Overall, for a university library finding aid, I found it to be useful, specific, and moderately easy to use.  Detailed for sure.

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.

photo 1

Stanley Kubrick at LACMA (App for iPad)

photo 1

To begin this interface critique, I would like to start by considering just what we are trying to talk about when we discuss the “interface”.  Earlier in the semester, we were assigned a reading that I think can point us toward a good starting point for thinking about a given interface.  Shannon Mattern’s short essay/blog post, “Interface Critique, Revisited: Thinking About Archival Interfaces” begins, after a short introduction, with a section called “Identifying Interfaces”, which refers to Stephen Johnson’s idea that the interface is more semantic than concretely technological.

 

Thinking about interfaces in this manner is useful in that it places the burden on the interface to meet its users in a place that belongs more to the user and his or her expectations, rather than having the user learn new languages and logic structures in order to engage with a given interface.  This semantic layer is not essential to the creation of an archival body, but I would argue that it is necessary for that archival body’s use by people: the items and information in the archive exist separately from any interface (as proven by interface upgrades and redesigns) but it is the interface that allows for the archive to be accessed and used in a meaningful way.  Put simply, the interface is the outward face of the archive- the part that we not only can touch and manipulate, but which allows us to construct meaning from the archive’s often-disparate elements.  These are the goals of our own projects in this class: interaction (touching, manipulating) and construction of meaning (or perhaps, on a more simple level, just placing the objects into some wider context).

 

In my research, I became interested in how such interfaces were being developed (if at all) for tablet/phone/touchscreen devices, as opposed to the more “traditional” mouse-and-keyboard style of human-to-computer interaction.  Both modes of interaction have their advantages and drawbacks as well as different capabilities.  While these differences could be enumerated, what I think is important to note for this essay- and which, in a way, precludes discussion of those differences – is the fact that most online archival interfaces were designed explicitly for the mouse-and-keyboard type of interaction and not for the touchscreen-type.  There may be technological reasons for this, associated with hardware or software concerns that are beyond my technological knowledge, but I would surmise, for now, that this discrepancy is more due to resource allocation: most institutions are still in the process getting their digital collections (and accompanying interfaces) on solid footing (see the New School archives) and simply have prioritized the mouse-and-keyboard approach, which is logical.  The result is that many archives are very frustrating to interact with on a touchscreen device, and some fail to even be fully functional.  This nicely illustrates Johnson’s idea of interface-as-semantics: the underlying technology – the structure of the archive – might be the same, but the interface is more or less useful depending on what kind of device you are using.

 

I decided that perhaps a suitable type of interface to look at would be one based on/intended to be used in conjunction with an art exhibit (I say suitable because the goal of this class is not to design an over-arching interface-experience for an entire archival collection, but to fashion an exhibition of sorts).

 

In looking at several examples, I found that this exhibition-based model usually followed one of two paths: the directed (what one could call a narrative-based presentation) and the dissembled (which could maybe be referred to as a free-associative presentation).  The main app that I considered was developed by the Los Angeles County Museum of Art (LACMA) for part of its expansive exhibition about Stanley Kubrick, his films, his set designs, scripts, and process of directing and crafting films.  This app, for the most part, chooses the dissembled approach to presenting its content, which allows the user to determine their own “narrative”, so to speak (within certain confines that, of course, could be construed to imply some sense of narrative or at least narrative-selection on the part of the curators/designers).

 

Parts of the interface design are somewhat at odds with communicating a sense of both the breadth of material available as well as giving the user (semantic) clues as to how best to navigate the interface.  The user is presented with an initial screen dominated by a still from one of Kubrick’s films and laid out beneath it in rows, the titles of each of the films featured on the app (in chronological order, though that is not necessarily made apparent; also not apparent is the fact that a handful of films – his earliest – are not included in this list).  When one touches the title of a given film, the app reacts in a way that is both predictable but also somewhat confusing: the image on the screen slides away and we are seemingly now in another level of the app interface (and thus a “deeper” level of the exhibit).  That we have moved “deeper” is an appropriate feeling, though it is unclear at first where exactly we have gone.  After a moment, we realize that the interface has now taken on the functions and characteristics of a slideshow of images and documents associated with the film which we selected initially.  While the images of movie posters, on-set photographs, script notes, storyboards and other ephemera are quite interesting to peruse (assuming, of course, an interest in, and knowledge of, Kubrick’s films) there is an overwhelming sense of randomness that accompanies these slideshows.  All images are grouped under their related film, but there is little sense of any kind of narrative order, despite the fact that one can only view the slides in the linear order in which they have been laid out (in a seemingly arbitrary fashion).  Each slide does have a corresponding caption that relates the image’s provenance and copyright information, but there is little in the way of broader context made available.

 

photo 3At a certain point, a user may become aware of a second means of navigation that the app presents: along the bottom of the screen are a series of icons named “Home”; “Interviews”; “Timeline”; “Browse” and “About”.  This alternate set of access points into the collected materials of the exhibition makes some of the frustrations with the slideshow approach somewhat more understandable and palatable, especially the “Browse” button.  The “Browse” feature makes it evident that the “dissembled” approach has been adopted in order to allow one to view materials within a variety of contexts (or it at least allows you a couple of different approaches to finding or discovering particular items in the exhibit).  Instead of breaking the materials into categories based on the particular film with which they are associated, the “Browse” portion of the interface breaks the materials down into groups based on type: “Correspondence”; “Pre-Production”; “Press”; “Scripts” and so on.  While it is somewhat helpful to be able to see this material grouped in a different way than its arrangement via the “Home” portion, the experience of perusing the material is just as frustrating and devoid of context as before.

photo 4

The other two buttons along the bottom of the screen – “Interviews” and “Timeline” – are more promising and yet also serve to frustrate in their own ways.  The “Interviews” portion, like much of the rest of the app, houses a good amount of fascinating material, but again, it seems both slightly dissembled and too far removed from broader context.  It is only when one accesses the “Timeline” portion that some of these frustrations subside.  The timeline is an elegant interface that gives a simple overview of the major events in Kubrick’s career and personal life, which is helpful in contextualizing, to some degree, the other materials presented in the exhibit.  Unfortunately, even this timeline is sealed off from much of the rest of the content; while touching the name of a film allows one to access an image of that film’s poster, it does not allow access to the rest of the material related to that film.  This inability to traverse the different portions of the app can be frustrating and makes it all the more difficult for a user to grasp the breadth of the exhibit’s materials.

photo 2

To some degree, I think that these limitations evident in this interface are due, as I mentioned above, to resource allocation as well as to, potentially, the overall newness of this mode (touchscreen) of interacting with digital materials.  This app is mainly crude and simple, yielding only a certain kind of experience (browsing or perusing, mainly); it has little functionality as a tool for research, and the design even seems to work to obscure the breadth of its own content to a certain degree.  This is somewhat ironic because the visual interface seems laid out in such a way as to at first seem comprehensive and dynamic in allowing users to access its materials.  However, this clean, “seamless” design only obscures the app’s shortcomings, as its seemingly simple, open, minimal design actually serves to close off portions of the exhibit from each other; instead of being a dynamic interface as it might first appear to be, it is in fact very restricted and allows access in only very specific, curated ways – the lack of an ability to “traverse” the different parts or constructed hierarchies of the app is the best illustration of this.

 

With all of this in mind, I return to the notion of the interface as being something of a semantic, rather than strictly technological, nature.  The app adheres to the expected semantic interpretations in its basic functions – the GUI behaves in ways the user expects: buttons open new layers; the timeline slides in response to one’s finger, etc. – but it fails to adopt the semantics of either the museum exhibit or the archive (if “archive” is the incorrect word to describe the items in the exhibit, then we can at least say that the items and their associated information form a database).  We have come to expect an exhibit to be directed in some specific way (often through some form of narrative) and for an archive (or database) to be malleable, searchable, fliterable, etc.

 

There are some important lessons that can be learned from examining this app, especially in light of this class’ ambition to create digital exhibits based on a wider archival collection (I haven’t delved into the app’s lack of addressing any wider collection of materials from which these particular images were drawn, but this should be a central concern when curating items from a larger body).  The main lesson is this one of semantics: this app confuses the user not just by having a conflicted nature (part-narrative, part-dissembled collection; little context provided; no sense of a dynamic database driving the exhibit’s presentation) but by not giving proper semantic clues to the user.  While openness (in terms of not having a specific order in which one must view the materials) can be a great asset to communicating and to learning about a subject, it can also be a hinderance if it is not fully developed in expected ways.

 

Bookshelf

Ariana Lujan Interface Critique: Melville’s Marginalia

I chose to critique Melville’s Marginalia Online.  I chose this online exhibition because of its interesting use of archival materials and the way the site allows the user to interact with originally analog objects in a digital space.  This site’s primary function is to provide access to Herman Melville’s personal book collection, where 25 out of 800 surviving books are digitized and accessible online.  I focused on the site’s navigation, aesthetics, and the way in which it engages its materials.

Home Page Melville's Marginalia

Home Page

 

 

 

 

The composition/structure of the home page is pretty self-explanatory, you know where to “enter” the site, a hint is given by the word browse on the left-hand side of the page.   Although the reds, browns, and grays are stark, the user is aware that they will be exploring Melville’s marginalia, due to the photo of Melville superimposed over his books.   The categories on the left-hand side of the home page brighten when hovering the mouse over them, making them obviously clickable and accessible.

"Browse Volumes" section

“Browse Volumes” section

One of the biggest critiques I have of this interface as a whole is  that each page seems overwhelmed with information.  For example, let us take the “Browse Volumes” section. This section has many things going on at once which gives the space a visual hierarchy.  You see: the virtual bookshelf’s skueomorphic design, the websites branding/menu options, the twitter stream, and finally the Boise State University Branding.   Although this visual hierarchy is helpful for locating Melville’s bookshelf, the other aspects of the page get lost.  However, this sort of layout makes it clear that there are many routes to take while exploring the site.

The most noticeable feature on this page is a skeuomorphic Bookshelfdesign displaying the spines of each digitized book.  This design element is not necessarily “useful,” however, many users may want to look at the “real” spines of Melville’s books, which gives this specific design choice material appeal.  Although the images of the spines themselves have aesthetic appeal, the way the books are organized is confusing.  The entire alphabet appears on the top of page, but only 11 letters are highlighted in white: this archive only has books digitized by authors whose names begin with these letters.  This type of organization is distracting and unnecessary.  It would only make sense to organize the books alphabetically if MM had more digitized books to include.  Therefore, this organizational structure is unsuccessful, as it makes it obvious that they are missing many, many books.

example of marganalia

A snippet of one way to delve into Melville’s Marginalia from the home page, complete with citation.

 

There are three ways to access Melville’s Marginalia.  The first is on the home page at the bottom right.  Every couple of seconds a random inscribed page flashes on the screen.  A user can click on it in order to get users directly into the digitized copies of Melville’s library without any arduous searching.   This is a very smart choice because it allows users to jump right into the content.

Metadata

The second way to access Melville’s marginalia is through the previously mentioned “Browse Volumes” section. After clicking upon the spine of a book, the metadata pops up which allows the user to “dig deeper.”  However, this covers up the navigational tools needed to access the inside of the book.  This structure is not intuitive because you cannot just click on the spine and you are inside the book, instead you need to close out the metadata box, then click on one of the three options the left hand side of the page, which read : display all, marked and inscribed, and inscribed.

Scanned pages After clicking one of these three options and a page number, the user can see the scanned page of the book itself, while also seeing a transcriptions of what is handwritten on the page. The inscriptions are an effective component to the interface because it is very hard to read some of the erased words had written or erased, and by including the transcriptions Melville’s Marginalia has made it easily accessible for users to read.  This specific section of Melville’s Marginalia is interactive by allowing the user to engage with the material in what ever order they please.  However, one thing that detracts from the overall setup of the page navigation is that all of the pages are underlined, which again crowds the space, making it visually unappealing.

The second way to navigate through the book is much less intuitive. In the center above the scanned text there is a drop down box with  page numbers, then the terms: image, volume, marginalia, mirrored at either side.  When a user clicks on the Marginalia tab it takes you over to the left hand side of the page, to what seems to be a random page. This second option does not provide easier access, instead it crowds the page and has the potential to confuse the user.  Unfortunately, whenever you click on a book to look in it, it pops out in another tab, so on one hand you can easily toggle between books, but you may end up with 20 tabs open.

Online Catalog

Online Catalog

The third way to access Melville’s Marginalia is through the “Online Catalog.”  Once a user clicks on “Online Catalog” the page enters a space where you can search for books in Melville’s personal library.  There is a search box where a user can search by keyword, which is standard, but it also gives many different drop down boxes.  In the drop down boxes you can select from very specific criteria, for example, you can select “poems” “ fiction” and “essays” in three separate drop down boxes.  Or, even more specifically, the library Melville borrowed a book from.  At first glance it is extremely overwhelming aesthetically, though if you want to know what each search term means,  there is a guide at the bottom of the page but it is very text heavy.   Although many of Melville’s books are “accessible,” not many of them have been digitized, and are instead scattered around the world in special collections.  Another issue with this sort of in depth search criteria, is that it seems the user needs to be “in the know” and done previous research to search with this criteria.
social media

There are several aspects that make the website successful.  For starters the metadata is very thorough.  It tells you where book is located, if it is lost, who scanned it, how he acquired the book, call number, etc., which definitely gives user the option to dig deeper if they wanted to.  The content is contextualized well: it gives the user everything needed about the book, while  still allowing the user to read and interpret the inscriptions themselves.  There are also options to share on social media platforms,  which can provide access to user that may not have actively searched for such content.  However, when a page is shared on social media platforms it does not lead to a specific page but instead the book itself, which could use improvement.

Overall, what we learn from Melville’s Marginalia is that context is important to the exhibit, yet too much data on the page can be distracting.

Displaced persons refugge card from the International Refugee Committee. My grandfather, now named Bernard Kristall is listed here alongside my grandmother Klara, and my mother Malla (Molly). This was an ID card in a displaced persons camp outside Berlin a few years after the war ended.

Ryan’s Interface Critique: United States Holocaust Museum

For my interface design critique, I selected the United States Holocaust Museum. I selected this site because it functions within the fields of exhibitions, scholarly research, education, and advocacy which I thought would be an inspiring tool for us as we attempt to design a holistic interface for our class project.

Homepage of the USHMM site that shows strong photos, clear actions, and non-linear engagement.

Homepage of the USHMM site that shows strong photos, clear actions, and non-linear engagement.

When examining the interface design what strikes the viewer first is a relatively conservative website that is designed to serve a wide range of users, both young and old. The first picture one sees is a commemoration of the Rwandan genocide that occurred 20 years ago in 1994. The intention here is to broaden the visitor’s understanding of genocide, and draw parallels of human behavior within a larger historical arc from the Holocaust to the present day.  What I take from this approach to think about our class project holistically by making connections to each tributary that draws back to The New School. The UX principle of organization allows for any user to navigate throughout the site and engage into different tributaries at any time. There is always a means to dig deeper into the site.

When examining the USHMM site I look for clarity of design, key points of interaction, where my attention is drawn, and how the composition supports the narrative organization. At the top of the page, the navigation starts with: Site (to allow users to select from 15 different languages), Events, Hours, Directions, Support the Museum, Connect, and Donate. This top nav is one of the weakest aspects of the page. Hours and directions could have easily been integrated into one section, and it is not clear why the ‘Support the Museum’ link is different from the ‘Donate’ link.

Overall, the site holds a strong consistency in form and function. Each item remains fixed and users can always engage with another element without having to use the back button. In this way, the site feels like a journey that allows the user experience and user interface to flow.

Social media section that allows users to share content at any time to 5 of the major social platforms.

Social media section that allows users to share content at any time to 5 of the major social platforms.

Social media has a presence on the site, but it is not a core feature, and tends to be downplayed for the most part. Each page on the upper portion of the left-hand navigation has a button that is colored in periwinkle blue that says ‘Share’, where the options are email, Facebook, Twitter, LinkedIn, and Yahoo.

What first strikes me is the dark background that allows the top navigation to separate the eye from the main focus of the page. Photographs are changed weekly focusing on specific ideas or topics, and the dark gray background in this central space pops most effectively. Beneath the photos there are arrows pointing left and right that allow the user to cycle through each photo. Each images is also connected to a specific story, and serves as a way to enter into the larger narrative of issues pertaining to genocide and Holocaust studies. There is nice balance between title text that highlights a current story at the museum, with a very legible paragraph that is laid out in the only serif font that pulls to eye to read.

Use of typography is very dynamic, and at times I find slightly confusing, but becomes more useful the more I engage with the site. To the right of the central images a clear navigation with tasteful typography and color that is gently highlighting specific words to draw attention without being garish. The menu to the right shows the following informational flows: Museum Information (that contains specific data about exhibitions and programs), Resources for Academics and Research, Resources for Educators, Resources for Professionals and Student Leaders. Each item has a clear arrow to the right of each word to engage the view to click.

Below the central images the words are much bigger and clue into how the museum organizes their core principles. Each word is punctuated by highlights of color in orange to bring attention to specific classifications within the period known as ‘the Holocaust.’ USHMM breaks up ways in which visitors can enter into this world with the words “Learn About” in white,  and “The Holocaust” in all-cap, colored in orange. “Remember” is marked in the same method, with the words “Survivors and Victims” in orange. Lastly, the words “Confront” are in white, and the words “Genocide and Antisemitism” are marked in orange.

Learn about "the Holocaust" as a specific period in history from 1933-1945.

Learn about “the Holocaust” as a specific period in history from 1933-1945.

This logic flow is very intentional and jars the mind at first in terms of how and why the museum chose to break up these distinctions into these three chunks. Then I thought about the target audiences and how these keywords challenge the visitor to make a choice in how to engage with the content.

Tributary covering the Genocide section of of the "Confront" portion of the site.

Tributary covering the Genocide section of of the “Confront” portion of the site.

Why would I want to confront genocide or antisemitism? Do these things still exists? If the user clicks on the words they will quickly discover that the site is not linear allowing any user to engage with contemporary issues surrounding conflicts in Syria in 2013-14, and draw connections to Darfur in 2003, Bosnia in 1992, or Poland in 1939.

Video detail section that is available from anywhere within the site.

Video detail section that is available from anywhere within the site.

Detail view of specific videos showing testimony from survivors of the Rwandan genocide 20 years ago.

Detail view of specific videos showing testimony from survivors of the Rwandan genocide 20 years ago.

Tributary covering the anti-Semitism section of of the "Confront" section of the site.

Tributary covering the anti-Semitism section of of the “Confront” section of the site.

What I find most appealing about this site is that primary actions, secondary actions, and next steps are all closely connected by how the typography and color work together to communicate direction. The site’s archival resources are the most transcendent, and the most personal for anyone struggling with putting the pieces of their family’s past together. The transcendence is less to do with the interface, but the effect that occurs when one finds what they are looking for. In my own experience researching using the archive, I found records that I never knew existed.

Victims database search engine at the USHMM site.

Victims database search engine at the USHMM site.

Resources for educators from the main site right hand navigation.

Resources for educators from the main site right hand navigation.

There are resources here that include records from a wide array of databases. Unfortunately, most databases are scattered throughout the world, and most research has to be conducted directly with the museum librarians. USHMM site makes it very easy to submit requests and often replies occur within a least a month directly those who inquire.

An example of a scanned document from the USHMM archives that I was provided directly from the archivists at the museum while researching my grandfather, Bernard Kristall. This is a  page from a list of prisoners who arrived at Mittelbau’s subamp Dacha 4 on February 1, 1945. This was after my grandfather had spent over 3.5 years in Auschwitz in southern Poland. My grandfather is listed as prisoner number 108260, Berek Krysztal after number 358 on this page. The red lines are marking those who perished in the camp.

An example of a scanned document from the USHMM archives that I was provided directly from the archivists at the museum while researching my grandfather, Bernard Kristall. This is a page from a list of prisoners who arrived at Mittelbau’s subamp Dacha 4 on February 1, 1945. This was after my grandfather had spent over 3.5 years in Auschwitz in southern Poland. My grandfather is listed as prisoner number 108260, Berek Krysztal after number 358 on this page. The red lines are marking those who perished in the camp.

In conclusion, I think that the lessons our class can learn from this site is to have a clear sense of what our core topics are and to build a strong narrative around each tributary.  We should pick simple colors that draw the eye, not to overwhelm, but to focus. We should also choose clean and clear fonts that engage the viewer and limit the selection to two with creative balance in size, weight, leading, and kerning.

Screen Shot 2014-04-07 at 2.18.01 PM

Interface Critique – Presentation

Hello all!  This is a PDF file of my Keynote presentation of my Interface Critique.  I also plan to post my written report.  This presentation was what I had for class last week.   The presentation ends somewhat abruptly, but I wanted to save more of my dialogue for the written portion.  The Keynote was more meant as a guide for me as I spoke, but I thought that sharing with the class would be a good idea.  So, without further ado, my Interface Critique – Presentation.