Introduction

Humans have been interacting with various technological interfaces for centuries in order to accomplish tasks and increase efficiencies.  Doorknobs, telephones, automobile cockpits, and microwave ovens are some of modern society’s ubiquitous objects that usually need little training in order to use, despite their complex affordances.  However, during the last sixty years, humans have been interacting more frequently with digital interfaces that have made some tasks increasingly easy, while making others difficult, even impossible.  Digital interfaces on televisions, satellite radios, and thermostats have all but replaced mechanical-based systems with the promise of more powerful options and ease of use.

At the time of this writing, 2015, a citizen in a modern, technically-networked society, can carry a digital device in their pocket that includes multiple interfaces to tell time, make a phone call, surf the web, do complex calculations, take a picture, and even shut the garage door on and turn on the lights at their house…from mostly anywhere in the world.  However, with complex functioning, comes complex interactions and in order for humans to understand the increasingly powerful technologies in which they are involved, simple and intuitive interfaces need to be designed.  Unfortunately, many digital interfaces are not designed well and can be frustrating to use.  As Donald Norman states, “Poorly designed objects can be difficult and frustrating to use.  They provide no clues – or sometimes false clues.  They trap the user and thwart the normal process of interpretation and understanding.”  This frustration can impede the intended use for the technology and may result in abandoning the tool altogether.  Although the interface is seen as an “…indispensable component of any project”, especially in a sophisticated digital project, it is often overlooked and can lack aesthetic components that make it easy for humans to navigate, learn from, engage with, and make sense of the information being offered through the interface.  The lack of attention to the interface also plagues the digital humanities where more and more content is be delivered in a virtual medium for the public as well as academics.  Whether the project is simply supplying content or inviting interaction, the interface should be easy to understand and use in order to allow the subject to properly consume and apply the content as well as leave the project having a learned experience.

The following essay will take a critical look at the graphical user interface (GUI) and how its design affects the usability of digital humanities projects.  After the GUI is defined and explained, GUIs from two well-known digital humanities projects will be compared and contrasted in order to gain a better perspective of how to create a digital humanities project that can be sustainable, usable, and properly engage the user.

HCI/GUI

The field of Human-Computer Interaction (HCI) studies the ways in which people work with technologies and employs computer engineers, psychologists, and graphic artists to research and design the space between user and machine so that expected results are achieved.  The space between human and digital machine is commonly referred to as the Graphical User Interface.  Since humans and computers communicate in different ways, the computer must “…represent itself to the user, in a language that the user understands.”  A well-designed GUI will be anonymous to the user and “…encourages an easy, natural, and engaging interaction between a user and a system, and it allows the user to carry out their required tasks.”  While the command line of a digital operating system is extremely powerful, the development and application of the GUI to computers is a seminal moment in human-computer interaction and stands at the vortex of the exploding use and democratization of digital technology and its effect on culture.

In 1968, Doug Engelbert, gave a presentation in San Francisco that showed how humans could organize and interact with digital information in a visual and metaphorical-way rather than rely on command lines.  Besides for describing what would eventually become the ubiquitous mouse, the event set the stage for coming decades of computing and was so important that Steven Johnson has said that “…historians a hundred years from now will probably accord it the same weight and significance we now bestow on Ben Franklin’s kite-flying experiments or Alexander Graham Bell’s accidental phone conversation with Watson.”  Engelbert’s ideas were influenced by Vannevar Bush’s Atlantic Monthly article “As We May Think” where Bush envisions a tool called the Memex that would hold vast amounts of connected information and be easily searchable.  Bush’s Memex was influential in the ideas that helped create early hypertext systems and is eerily similar to the modern World Wide Web.

[youtube https://www.youtube.com/watch?v=c539cK58ees&w=420&h=315]

The initial operating system interfaces that allowed users to navigate and access information via a terminal were developed during the 1970’s at the Xerox Research Center in Palo Alto (PARC).  The first commercially-available personal computer with a GUI was created by Silicon Graphics (SGI).  The Lisa was Apple’s first implementation of a GUI onto a personal computer and eventually the Macintosh become the company’s first computers to utilize a visually-based metaphorical interface that included modern mainstay elements like “….menus, icons, folders, [and] trash cans.”   Early interface designers thought that “…if the interface presents representations of real-world objects, people will naturally know what to do with them.”  The application of a representational or metaphorical interface not only helped to organize digital information, but it also enabled users not familiar with computer code to use the technology with greater ease and efficiency, leading to widespread adoption of the personal computer.  The GUI, Stevens feels, “…had more to do with popularizing the digital revolution than any other software advance on record” and can now be found on everything from ATM machines, parking meters, and even in public bathrooms.

While digital interfaces are pervasive in a modern society, they can sometimes do more harm than good and some researchers like Donald Norman think interfaces “…get in the way” and furthermore, some interfaces have tragic places in history.  For example, the “…Therac-25, a machine employed for cancer radiation therapy in the mid-1980s, whose cumbersome software interface contributed to several patient deaths from overexposure.”  A less fatal example is how poorly designed interfaces can lead to frustration and abandonment of a product no matter how useful or popular it may be.  Take Microsoft Windows™ 8 for example.  The desktop user interface seems to be optimized for a tablet and when using it on a non-mobile device is not only difficult, but does not rely on any previous notions of the Windows interface environment.  The lack of consistency, expectations, and usability has hindered Windows™ 8, which has had lower adoption numbers than Windows Vista, which is often acknowledged as a failure.   A well-designed interface enhances both the functionality of the tool and also user’s experience.  Proper functionality and a productive relationship between human and computer is the result of understanding what the user would like to accomplish by using a tool or software.  While the intentions of the user are one important component of interface design, so are the intentions of the tool.  A user wouldn’t open up Microsoft Word to develop a spreadsheet – therefore, it is important for user and tool expectations to match.  For example, if the user will simply need to quickly download content and move on, a simple, utilitarian interface like Craigslist would probably suffice.  It would be probably frustrating and distracting for the user to have to go through a series of clicks to simply download an image.  However, if the intention of the site is to keep users interested and teach the public about a topic and users will be drawn to a particular project to either learn new information or expand on previous knowledge, an interface on the site Florida Memory that displays content in a visually pleasing manner and utilizes various media to engage users would be better.

While functionality and user/tool expectations are the first-level of concern for developing a stable, useful GUI, an often-overlooked aspect are the aesthetic qualities of the interface.  While the beauty of an interface does not guarantee it will function properly, the “look and feel” of an interface can impact the experience for the user hindering the impact of the project.  Take for example the William Blake Archive digital humanities project.  Last updated in May 2015, it won the 2003 Modern Languages Association Prize for a Distinguished Scholarly Edition and is a “…dazzling combination of hypertextually organized texts, bibliographical and historical commentaries, and beautifully reproduced visual images, including thousands of plates of Blake drawings, watercolors, and manuscripts.”  Although the site is an impressive repository of works that one can peruse, the interface is significantly lacking.  There is no consistent navigation structure (see screenshot below), there is not an easy way to tell where one is at, and where one has been in the project.  Some of the pages open up in new pages, while others do not.  The help documentation is at the bottom of the home page and it not prominent.  The static site tour is not very helpful and would be greatly enhanced with a short video of a user navigating the site.  Finally, it takes three clicks to learn who William Blake was – this information should be first and foremost prominent on the home page.  The William Blake Archive is a good example of a site with a vast amount of content, but its lack of aesthetic layout actually hinders the usability of the site and leads to frustration.

GUI/D_H

Creating an interface for a Digital Humanities (D_H) project is not terribly different from creating human-computer interaction for operating systems or ATMs.  The user needs to interact with data of some form, complete a task, or consume content via an easy, understandable interface. Unfortunately, as Kirschenbaum points out, D_H interfaces are “…often put together as the final phase of a project under a tight deadline and even tighter budget…”  However, Digital Humanities projects usually employ a vast array subject matter expertise in technology, art, literature, history, philosophy, music, religion, theatre, and linguistics and naturally embody the ability to creatively marry function with form and create effective virtual projects.  D_H projects may not only offer vast amounts of organized data (text, photographs, maps, etc) at the user’s fingertips, but can also display the data in an aesthetically pleasing manner.  As Kirschenbaum states, “…just as interface cannot…be decoupled from functionality, neither can aesthetics be decoupled from interface.”  Creating an experience for a user that is not only easy, but also useful and enjoyable should be of paramount concern for teams creating D_H projects.  While creating both a functional and visually pleasing digital project may seem like a tall order for the humanist, it is worth noting that the main academic form of the field, the book, is in fact, a type of interface that humanists have helped develop over time.  The pages, binding, cover, table of contents, font-types, columns, page numbers, indices, and bibliography are simply components of a tacit (non-hypertext) interface that “…has become transparent to us only through long familiarity.”  All the information or data on a subject would mean little if it were not presented via an consumable interface like a book and laid out with visually-appealing elements to be able to read and navigate through – the same attention to function and form should be given to D_H projects by the humanist.  A digital project with confusing, bad, or completely non-existent navigation would be like printing a book with no table of contents, no page numbers, and no index – which would be a very frustrating “read” and most likely result in user abandoning the text.

GUI Analysis – Valley of the Shadow/Photogrammer

Moving from the tacit to the virtual, two interfaces of digital humanities projects will be examined now – the groundbreaking collection of materials presented in The Valley of the Shadow, and the breathtaking visual display of photos of the Farm Security Administration via Photogrammer.  While each project presents data and content in different ways, they are good comparisons to show how far the digital humanities have come and how important an interface can be to a project.

Valley of the Shadow

The Valley of the Shadow was developed from 1993-2007 by the Virginia Center for Digital History at the University of Virginia and is a vast digital archive of documents that illuminates the lives of people living in Augusta County, Virginia and Franklin County, Pennsylvania before, during, and after the civil war.

At first glance, Valley of the Shadow is similar to the William Blake Archives in that there is an astonishing amount of content and data presented.  However, it is difficult, and at times frustrating, to navigate through.  Taking the project’s age into consideration, the interface is in need of updating and reworking to make using the site a better experience.  In general, the splash page is unnecessary and the user should be brought immediately to the site without having to click the ‘Enter the Valley Archive’ button.

The site is intuitively divided by the three time periods; ‘The Eve of War’, ‘The War Years’, and ‘The Aftermath’ and the main navigation is based on a metaphor, which resembles architectural plans to a building, perhaps even a library, but the site does not make it apparent if the navigation represents anything symbolic to the project.  While the navigation is consistent, it is outdated and the usability of the site would benefit from a modern vertical or horizontal menu structure that visually/textually displayed submenus.

Once you access a certain time period, while the layout is consistent throughout, the navigation gets slightly confusing as the user is presented with sub-navigation of the time period, a graphic related to the area, navigation to content like maps, newspapers, and databases, as well as access to the main navigation – which is consistently presented at the bottom of each page.  The highlighted area, ‘Reference Center’ in the graphic below, gives the user feedback as to where they are located within the site, however, a site of this size would be enhanced with a “breadcrumb” trail of activity to make moving around the site easier.

One downside of using a metaphor like the one used on The Valley for navigation is it lacks flexibility and forces content to be placed in unexpected places.  For example, a constant in most well-functioning modern digital projects is the footer at the bottom of the page that holds static information like copyright, privacy, and site map.  The information is important, but should not mingle with the main content of the project.  For example, below is screenshot from the Veterans Empathy Project which is a digital project out of Lehigh University.

The bottom of each page has information about why the project has been created as well as an institutional footer that holds all of Lehigh’s administrative and legal information.  However, in The Valley, the link to the site map has been placed in the ‘Eve of the War’ section, probably because there was space.  The site map is functional and does not necessarily have anything to do with the content and it should be in a footer along with information about the project and University of Virginia.  This change would make updating the content of the site easier.

While it is a daunting task to organize the amount of content offered via The Valley in a visually appealing way, the site lacks aesthetic characteristics that would give it depth and a personality.  The site currently feels “flat” which is difficult to get past while navigating the project.  Rich artifacts, like images, should be displayed in a more prominent way and the database search capabilities should be better integrated with the site.  In fact, the table search results are antiquated and would be easier to use if the thumbnails revealed a pop-up on rollover with the larger image and metadata rather than a new page loading when the user clicks the thumbnail.

The Valley interface would greatly benefit from an overhaul and it is a good example of the need for digital humanities project teams to develop plans to make born-digital projects sustainable and flexible so they can be updated as technology changes.  Although the massive amount of content is impressive, it alone cannot support by a digital humanities project.  For user and project expectations to match, the content has to supported by a functional, easy to use, aesthetically appealing interface.

Photgrammer

Released in 2014, Photogrammer has the benefit of being designed during a time when digital humanities projects are becoming increasingly popular and advances in technology and design are allowing for the visually appealing display of digitized content.  Supported by the National Endowment for the Humanities and designed by a cross-disciplinary team at Yale, the project is a vast repository of a 170,00 photos taken by photographers from the Farm Security Administration – Office of War Information during the Great Depression.

While the amount of content is staggering, Photogrammer is very easy to use and intuitive.  The project relies on a map to organize and give spatial significance to the photographs and it is easy to figure out how to navigate and experiment with the settings.  The user can search by photographer by using a dropdown, the time period by adjusting the slider, or by region by clicking on the map.  While there is no key explaining the color codes, it becomes quickly obvious that the darker the color signifies the higher amount of pictures taken in that particular region.

The project is a perfect blend of form and function and keeps the user engaged while examining not only the pictures, but also the tags from the lot number and classification tags systems developed by Paul Vanderbilt.  The additional data like original captions, date created, location, and similar photos are encapsulated in a consistent layout that is clean, visually appealing, and easy to use.

Another important aspect of Photogrammer is it is difficult to get lost in the project.  At any given time, the user can use the navigation bar on the top of the page and get to the homepage, to the metadata search page, to the map, or to an experimental page that shows visualization tools that are under construction.

Having all of this data at the push of the button is an amazing feat for the digital humanities and shows how far the field has come.  It also shows how creating a project that is full of content is not enough, but needs to be created along with an appealing and easy-to-use interface.  Photogrammer is aesthetically pleasing and informative and the user is sure to walk away with new information without being frustrated by an interface that gets in the way.

Creating an intuitive user interface is not a one-size-fits-all application.  What works in Photogrammer may not necessarily work when applied to Valley of the Shadow.  The project’s intention has to match the intention of the user so that the interface does not get in the way and cause the user to walk away with learning something.  Some digital humanities projects will have a “lean” or “minimalist” interface, but if the expectation is for the user to have a unique experience, considerations of form will be paramount.  The application of the GUI democratized the operating system and now machines doing complex tasks are almost everywhere.  The application of the GUI to the digital humanities should have a similar impact.  As D_H projects become packaged with better interfaces, they will permeate the culture and offer learning experiences not just for the academy, but also for the public.

Omeka – Video Usability Study – me looking at the interfaces of a couple projects