Month: November 2014

I learned a lot from reviewing the presentation by Jess James Garrett about the elements of user experience. He relays the information in a very concise and structured manner that makes it easy to digest. Furthermore, the way he unveils each layer and places them on a spectrum from abstract to concrete stuck out to me because I’ve never considered these elements connected in that fashion. However the concept of dividing each component into ‘product as technology’ and ‘product as information’ is not new to me since I’ve learned at least from a computer science point of view that websites are composed of a front-end interface and an equally important back-end that controls the function and the look. Yet, this presentation as a whole successfully illustrates the amount of detail that goes behind what the general public sees.

Afterwards, I used Garrett’s presentation as well as Schneiderman’s “Eight Golden Rules of Interface Design” to analyze Bissel and Loyer’s projects. To reiterate, Garrett’s definition of user experience design is, “the design of anything with human experience as an explicit outcome and human engagement as an explicit goal.” Although ‘The Knotted Line’ had a very interactive experience for the user, which accomplishes the first half of the definition, I felt like I quickly lost my interest in the interface because of how difficult it was to navigate the line and get to the informational dots hidden behind it. What actually kept my engagement from wavering was reading other people’s answers to the changing questions along the bottom of the screen. On the other hand, ‘Freedom’s Ring’ was a beautiful compilation of Martin Luther King Jr.’s iconic “I Have a Dream” speech. It not only dissected the speech into comprehensive snippets that linked to outside sources, but also displayed background images which flowed across the screen and brought the speech to life. In this sense, the site required minimal user interaction, but did a better job in keeping me engaged for a longer period of time than the previous project.

Personally, this past week marked the subtle end of my research work for my professor and Shneiderman’s article allowed me to reflect on what I’ve learned in terms of asking the right questions to create the best way to display information for optimal user experience and to analyze a program’s interface that would facilitate both components. I feel like there are definitely more things to consider outside of the eight rules such as graphical implications and placements of certain functions, knowing who the audience is, and clearly conveying the intent of the project, which Garrett briefly describes as the ‘product’s personality.’ After working on the VSim project for over a year, I can proudly say that the prototype manages to accomplish many of those elements. And even though I wasn’t part of the decision-making process in designing the interface, the program had allowed me to compile a large amount of data in an efficient way, albeit an occasional bug or two, while presenting them using a relatively new method. Being able to critically analyze the software from the perspective of a user while having insight on why certain decisions were made, gave me a better appreciation for the amount of effort and consideration it takes to develop a piece of software.

In his essay, “’So the Colors Cover the Wires:’ Interface, Aesthetics, and Usability” Matthew Kirschenbaum argues that today many users think of computer-aided interactivity in binary terms through the separation of application and appearance. According to Brena Laurel, the interface is what humans “talk” with, it is the thing that mediates humans and the inner workings of the machine. Although Laurel was arguing against this prevailing viewpoint, Kirschenbaum reminds readers that interfaces are both conceptually and computationally distinct from the applications they allow users to navigate.

Aliah Magdalena Dark’s “I’m So Glad You Came,” at the 2014 MFA exhibition.

In line with this view, I was reminded of a work of art I saw at this year’s DMA MFA exhibition, “.CALM.” If user interfaces are traditionally thought of as the medium through which an observer or user navigates a physical or digital environment, what happens when that medium becomes a piece of the application itself? The piece by Aliah Magdalena Dark, entitled “I’m So Glad You Came” invites observers to control the digital space on the screen by touching what appears to be a ceramic penis and pushing two white circular buttons to the right of the object. As the user becomes more comfortable with the idea of using this phallic object to navigate the space in front of them, it becomes clear that the ceramic penis in the interface is actually translated on to the monitor, and the buttons produce sperm, which “fill up” a variety of different objects on the screen. Regardless of the artist’s intended message, the piece brings up an interesting question of using interfaces design directly as an artistic component with the application or artwork itself. I think part of the reason which makes Dark’s piece so fascinating is the fact that application and appearance are blurred.

“Sneaky Cactus, Cactical Espionage,”at the 2014 International Games Day in Powell Library.

Another similar piece of interactive artwork reminded me of the possibility of artistic overlap between the interface and the application at the 2014 International Games Day at Powell Library entitled “Sneaky Cactus, Cactical Espionage.” This game requires that the player use actual cacti to navigate the virtual environment. As I was taking photos I watched numerous participants touch their fingers, seemingly worried about getting needles stuck in their palms. I think this game raises wonderful questions about the very nature of tactility in interfaces.

Dark’s piece and the Sneaky Cactus game take Kirschenbaum’s view that “computers compute, of course, but computers today, from most users’ points of view, are not so much engines of computation as venues for representation,” a step further by expanding the “venue of representation” to include the user interface.

In Shneiderman’s “Eight Golden Rules of Interface Design” he explains the elements that are necessary in creating a visually appealing interface. His rules are as follows: (1) Strive for consistency; (2) enable frequent users to use shortcuts; (3) offer informative feedback; (4) design dialog to yield closure; (5) offer simple error handling; (6) permit easy reversal of actions; (7) support internal locus of control; (8) reduce short-term memory load (Shneiderman). These rules function almost as commandments and greatly help “to improve the usability of an application.” To examine these rules in real time I looked at the website Nasty Gal—an online clothing retail website.

Starting with (1), Nasty Gals functions highly on consistency. The controlled vocabulary on the website is blatantly apparent. Each item page has the same format where is lists the sizes, colors, quantity, etc. available, all in the same area for every item. For (2) shortcuts, frequent users of the site will notice that each clothing item image on the main page offers a “quick view” where a user can add an item to their “tote” without loading a new page, which allows a quicker shopping experience.

For (3) informative feedback, at the bottom of each clothing item page, there is a section that says “other users bought”, which suggests other items of clothing or accessories that would work well with the item you just viewed. This form of feedback helps users create trendy and unique outfits. Whenever you add a new item to your “tote”, a bubble will pop up on the screen that says, “item successfully added to tote.” This satisfies rule (4) yield closure—it lets the user know that their action was successfully completed. Nasty Gal’s system is also well designed so the user cannot make a serious error (5). When filling out information on sizing, quantity, etc, if a user forgets to mark a category, then they will let you know something went wrong. The system also alerts users when there is an error in their credit card data, shipping information, or any other aspect involved in the checkout process. If a user does make a mistake, Nasty Gal allows you to easily reverse your actions (6).

When looking at your tote, you can change the size and quantity of any item there. The users shopping on the website are in control of every action that they make (7). And finally (8), the website is created with short term memory in mind, by creating an easily accessible website, without too much clutter, and visually pleasing displays. Nasty Gal passes the “Eight Golden Rules”.

Works Cited:

Ben Shneiderman, Eight Golden Rules

http://www.nastygal.com

Shneiderman’s “Eight Golden Rules of Interface Design”

After reading Shneiderman’s eight rules about what makes up a good or effective user interface, I am drawn to the rule on consistency and how it makes the users’ lives so much simpler. If your primary goal in creating your interface is to have it be easy to use and to have it get used by many people, then consistency is key. Actions are faster, recurring visits or loyalty to your site are all higher, while the learning curve to use your site or program is much lower. This concept also links up well with issues of standard vocabulary and metadata in terms of consistency. Craigslist is a great example of a less-than-wonderful interface with consistency issues and a shocking lack of standardized vocabulary. People posting on Craigslist have full autonomy in the title of their item, its location, and the format of its price. This leads to unfruitful searches, wherein a search for “dresser” will not provide you with items such as “chest” or “bureau,” and the price is often misrepresented as very low when in fact it is a starting point for negotiation. This lack of consistency spills over into a not always user friendly interface as the post screens are often incredibly disparate in form as well.

• Kirschenbaum, Matthew G. “‘So the Colors Cover the Wires’: Interface, Aesthetics, and Usability,” in A Companion to Digital Humanities, edited by Susan Schreibman, Ray Siemens, and John Unsworth, 523–42. (Malden, MA: Blackwell, 2004).
• http://dlib.etc.ucla.edu/projects/Karnak/

The Kirschenbaum piece, especially towards the end when he discusses the future of user interfaces and even of screens themselves, made me think of the Digital Karnak project. He believes that the future of screens are outside of the 13 inch box of today’s average laptop screen, and that this fact alone will drastically effect the way interfaces are designed and interacted with but their users. In much the same way, the Digital Karnak project has great potential for operation outside of the laptop screen. At Brown University, there is a small visualization lab (basically a tiny IMAX dome) where for instance planetary geology students were taken to experience a Google Earth-esque trip to Mars and Olympus Mons. This kind of technological resource would be incredible in both educational and museum settings to provide people with a phenomenological, literal walk-through of archaeological sites such as Karnak. In this situation, not only is the interface an entire space rather than a screen, but it is an interface with physical human experience as well.

 

David Mccandless, much on theme with what we have been discussing over the past few lectures, suggests that the best way to navigate our information overloaded world may just be to change the way we see the world. This change might come in the form of visualizations—“beautiful, simple diagrams that tease out unseen patterns and connections”.

Visualizations allow audiences to digest and actually make meaning out of massive amounts of data. They allow you to make comparisons, understand numbers, tell a story, and just look really cool. Data visualizations allow new patterns to be revealed. The audience is prompted to ask different kinds of questions, and allows everyone to digest large amounts of information. Mccandless says: “If you ask the right kind of question or work it [the data] in the right way, interesting things can emerge”, and I couldn’t agree more. Visualizations are extraordinarily powerful and very well could be the future of the way our information is presented and absorbed. In this week’s readings, I was especially interested in The Knotted Line and Freedom’s Ring. Both of these artistic and interpretive timelines inspired me to create a similar visualization, on a smaller scale, for a case study on Coca Cola’s role as a sponsor of the Olympic Games. After a little research, I found a timeline creation tool that allows you to input timeline data and connect those data points to multimedia. The tool pulls all of the data from a google doc spreadsheet, and creates an interactive timeline!

 

In our world, we are bombarded with information: we have access to it, can collect our own and are constantly being presented with new facts and figures. This information a lot of the time, is difficult to digest and is often reported out of context. Mccandless stressed, “Absolute figures, in an interconnected world don’t actually give you the full picture”. Data visualizations, if more widely implemented, can be the solution to misinterpretation or misunderstanding of data. Data can shape and change perspectives. And if presented in the right way, becomes fun to engage with. What is important is that designers of visualizations collect and utilize only the data necessary for a story to be told or for an argument to be made.

 

Visualizations might be the solution to our overwhelming exposure to information. But they must incorporate the right data, and present it in context. It must be well thought-out and designed. They must have a user-friendly interface otherwise the data will remain obsolete. Generally, visualizations should probably also follow the Eight Golden Rules–guidelines that help to design and execute a great user interface.

 

Mccandles closed his TED Talk by saying, “Design is about solving problems and providing elegant solutions. And information design is about solving information problems.” It’s exciting to be learning about these tools that are on the cutting edge of information design, and to be a part of a new information age.

http://tumblr.com

As I was reading through Shneiderman’s “Eight Golden Rules of Interface Design”, I wondered weather these rules were applicable to all websites. One comparative example is Tumblr, which is mostly used by teenagers. One of the things that makes Tumblr valuable is its highly customizable format. Although it is probably not an appropriate platform for a scholarly project, Tumblr is a nice, simple gateway into the cyber world, and the user believes they have complete control over the site. All of Schneider’s points basically hold up except, to same extent, number 1.

Sure, I admit there are icons and word repeated in the official help screen and dashboard literature (the stuff that’s written by the Tumblr staff). We all know the mail icon means message, for example. The quote, photo, and text icons are recognizable as well. It’s in the metadata where Tumblr becomes a veritable mess. Rarely are the hashtags used to classify and make it easy to find a picture. To be honest, it’s only bloggers who are thirsty for followers who use hashtags in the traditional way, for classification and simple retrieval. Most bloggers use the hashtags to comment on a picture they have posted, even talk to themselves about it. For example, no reputable blogger who posts about Harry Styles is going to tag their posts as #HarryStyles #OneDirection #1D. They’re more likely to write “#after all ive done for him #i named your nipples” (http://lust-truth.tumblr.com/post/103429129212/ok-honestly-do-you-see-what-taylor-does-for-all) And you can be sure that the more authoritative the source is, the less trackable their hashtags will be. Metadata gives way to musings, and although these hashtags can be endearing, funny, and overall good material, there is no way you’ll be able to find what you’re really looking for by typing a tag into the Tumblr search bar. In a way, it makes the website more fun and exciting, but I can understand why many people say they don’t “understand” Tumblr in light of these ridiculous tagging practices.

And finally, I’d also like to comment on Shneiderman’s 7th pillar, “Support internal locus of control.” This certainly occurs on Tumblr. Not only are the themes, etc highly customizable, but with Tumblr extensions like x-kit, you can even change the way your dashboard is displayed. You can change certain given labels (for example, you can change every instance of the word “followers” to “chickens” if you so desire (also overwriting the first pillar of consistency). On the site, you are God, and none of the traditional website constraints really apply. This is why Tumblr works so well for some, and is a horror show for others. In this way, most of Schneiderman’s points fall at the feet of the seventh, and there is a hierarchy of what is important as far as usability and site deign. In this example, the internal locus of control comes out on top.

User experience is very important when it comes to digital media. The users need to be able to navigate and understand exactly how the media works.. You want the user to feel connected to the information being presented. I felt connected to the Freedom’s Ring animation because of the moving graphics along with the text and recording of Martin Luther King’s “I Have A Dream Speech.” The animation is not difficult to navigate. Instead, it allows the users to interact with the material by listening, to the speech, watching the graphics, and viewing the text. The graphics add another dimension of portrayal to users because it allows the users to visualize the speech on the screen. I like how the animation is user friendly but also portrayed in a creative way.
I think of Amazon.com as a user friendly website. It is navigable and easy to use, however, it is more of a commercialized website. Obviously since Amazon is a business, it is trying to attract and appeal to customers. I did not notice the similar structure each commercialized website has. It is amazing to think that because many of websites feature similar layouts that we become so used to this specific layout. I do not think twice about where the search bar should be or where to click to find the main menu. It has become part of my instincts to look at the top of the website for the search bar, the most logical location, but it is interesting how it is expected from the users like myself to always have a search bar towards the top of the webpage. The reason the Freedom’s Ring animation stood out to me because it did not have the typical structure of a website, instead it offered a more creative approach to presenting historical information. I was more interested in the creative text and animation Freedom’s Ring presentation in comparison to the everyday typical website structure.

“Freedom’s Ring” is an interactive presentation of Martin Luther King Jr.’s infamous and inspiring “I Have a Dream” speech. Produced at Stanford, this speech is presented in a manner that the viewer can observe and compare the written as well as hear the spoken part through a series of images, annotations, and emphases. Vector’s Journal explains that “to capture these differences, Scalar was used to annotate every phrase of the speech, following King’s own cadences. Each annotation contains both the spoken and written versions of the phrase (if they differ), plus markup that distinguishes the two for display.”

 

What I saw in MLK Jr.’s interactive speech reminded me of kinetic typography. Kinetic typography is essentially just moving text or what wikipedia describes as “an animation technique mixing motion and text to express ideas using video animation.”

An example of kinetic typography would be this:

And this:

Kinetic typography doesn’t always have to be in video format. Lately is seems to be appearing in gif form:

The text moves along with the speech in an animated manner to match the significance, context, or visual intentions of the speech. It provides a visual for dialogues with text. This is precisely what “Freedom’s Ring” also intended with its interactive visuals. What I find incredible about kinetic typography is the creativity that is needed to go hand in hand. The extensive use of dynamic layout for the “V for Vendetta” video makes for a very interesting fluid form of typography. Also the intent that each word or sentence plays not just a part in the overall dialogue, but visually as well. Words bloom, shrink, dance, shiver, and spin according to what the words describe and how it is spoken by the speaker. Even the fonts are adjusted according to the feel of the video. “Lions Roar” kept a thematic color of red, blue, and yellow to represent a traditional circus. “V for Vendetta” used different fonts to emphasize the speaker’s eloquence and broad vocabulary.

Kinetic Typography involves a great deal of forethought artistically. “Freedom’s Ring” included incredible images of activists and historical references that incurs emotions of the struggle of the Civil Rights Movement.

Perhaps kinetic typography is the solution to visual learner’s plight. Reading speeches and essays can be difficult to comprehend for those who learn kinesthetically. Kinetic Typography uses artistic value and images to create better understanding of auditory sounds with images which would benefit those who need visuals in order to grasp concepts.

 

 

This week’s reading really hones in on the correlation of a simple digital interface with captivating its viewers. People love simple–this is why apps such as Instagram and Snapchat have done so well. I’m much more inclined to use an app or website that it is not too cluttered with ads or unnecessary add-ons. Jesse James Garrett describes the key aspects of a website layout—the surface, skeleton, structure, and scope. My cousin works for the NFL down in Culver City as a digital strategist consultant, and I’ve drove down to see exactly what he does a few times recently. He works on many of the topics brought up in Garrett’s “Elements of User Experience.” While corresponding with the digital departments of all of 32 teams, he helps improve the teams’ websites to raise the traffic and user engagement through changes in the skeleton and structure.

In a study done by Google in August 2012, it was revealed that users judge websites as aesthetically pleasing or not within 1/50^th-1/20^th of a second. The study also showed that websites deemed “visually complex” were rated significantly lower than their simpler counterparts. “Highly prototypical” sites, which had layouts that were commonly associated with sites of a similar category, had the highest ratings in the study. Another article I read by Thomas Walker was making the argument for why simpler is better. It also came with condensed instructions on how to make a simpler website that visitors will enjoy. He said to consider cognitive fluency, which says that the brain prefers to think about things that are easy to think about. This applies to a website because you should put place items where visitors have grown accustomed to finding them. When choosing images and inserting columns of texts, you should aim for one large one over a bunch of little ones. Something he said that really resonated with me was to not view your site “as a unique snowflake piece of art,” but instead a “composite of all the best stuff.” I’m going to be sure to forward this article to my project group so we can consider his tips when making decisions for our website regarding the Olympic Games. This week’s reading remind me of when I worked as a website administrator for a soccer club, I was told by my supervisor the acronym KISS. This stood for “Keep it simple, stupid,” and I’m planning on taking it to heart when working on our site.

Link 1

Link 2

Link 3

After reading Kirschenbaum’s article in A Companion to Digital Humanities, my eye was caught by another article about Art History. This section of Schreibman, Siemens, and Unsworth’s larger text discusses the progression of art history’s visual records from a material based to technology based repository. This struck a chord with me because art history seems to be one of the fields that particularly resists being digitized, some of this resistance coming in part from the difficulty of transitioning all the physical resources into digital ones that can be remotely accessed.

In keeping with the interface design aspect of this week’s readings, I will present some of the art history and museum related databases and websites that I interact with – namely The Museum System and the Getty’s Union List of Artist Names. The Museum System (TMS for short) is a database used to store records of artwork and artist information held within a museum’s collection. The edition of the software that I use is not as new looking as the most recently available versions and has a Windows ’98 sort of feel to it.

With regards to functionality, the outdatedness of its appearance does almost nothing; everything still operates as needed, but in this age of flat neon colors, as with the most recent iPhone and Android updates, it is a little startling to revert back to beige and blue color schemes. Even though it is not as aesthetically pleasing as other interfaces, it still loosely follows Schneiderman’s Eight Golden rules of Interface Design. TMS could be made less cumbersome (and it perhaps has been in more recent editions) but its interface quirks are within reason, especially when taking into account the amount of information that it processes. Museums use TMS to keep extremely detailed records of their entire permanent collection, and every loaned work that has passed through the museum so there is an enormous amount of information stored in the database.

Another art history related digital repository of information is the Getty’s Union List of Artist Names (ULAN) which is related to the Getty Arts and Architecture Thesaurus that we have learned about for controlled vocabularies. The website also follows the golden rules of interface design and has a more modern appearance to its interface in comparison with that of TMS. The two products offer very different services within art historical and museum studies contexts so I will leave the comparisons here, but I find it interesting to look at which sites and softwares follow trends in their surface design and if usability is always prioritized over aesthetics for these kinds of websites and programs. From what I’ve seen, base functionality (in the sense of presenting information, not necessarily the ease of finding this information) wins over sensory elements of the interface.