Course blog

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.

While reading about design in terms of user experience rather than visuals, I thought about Google’s “Material Design” spec, for which Google won a 2014 UX Award. It was recognized for its ability to “add clarity to user-initiated events by creating strong visual connections from user input.” This Google spec is about establishing visual language, new possibilities with mobile design, and “meaningful motion.” As in, meaningful design that has the purpose to help the user’s experience be more intuitive and pleasant, rather than gimmicky. There is a section specifically about design responding when interacted with by the user, which is an interesting cross between experience and visual design in my opinion. I kept thinking about Shneiderman’s “Golden Rules” of designing with your users in mind. Google’s spec is basically a guide to their language, and to the logic behind it. It explains why their designs react and interact the way they do, and is also interesting because many of the designs are made in a way to not be noticeable by the users, so seeing them as a blatant design shows just how smart they are. The “Responsive Interaction” section is a guide on consistency in actions, the number one rule of Shneiderman. It combines with two other rules – feedback for actions, and making users the initiators of actions – to become a successful guide to achieving this “meaningful motion” they mention. Consistency is important because the user needs to know what their actions are doing, and what the hierarchy of their content is. Buttons should react the same way when pressed, transitions should be consistent and subtle, hover functions should indicate active content the same way, and windows (browsers and pop-ups) should be layered according to a system. If something is suddenly different, the user will expect a different action to occur, and if there is no reaction from the design, the user will think their action didn’t get processed. This is why feedback on actions is important, and why designing them needs to be part of the ux process. It can also make the experience of using your website enjoyable for your users, and make them want to click on more things, which leads them to discovering more of your content! These reactions from the design are part of the interactive design process, but they are also very dependent on their visual design. A ux designer can decide that there needs to be a shadow under a window, for example, but the look of this shadow (subtle, gradient, behavior) is just as important in the user’s experience of it.

http://www.google.com/design/spec/animation/responsive-interaction.html#responsive-interaction-material-response

While doing the readings this week, I got stuck on the idea of attention span. What makes viewers stick with content? In Shneiderman’s “Eight Golden Rules of Interface Design,”  he describes ways to improve the usability of a site.  These eight rules have much to do with consistency and ease of navigation.  They seemed straight foreword and common sense: it would seem counter productive to not follow through with rules such as “offer simple error handling” or “reduce short term memory load.” Even though Shneiderman’s argument was centered around interface of website, it got me thinking how this interface applies to other digital mediums, such as podcasts.

In looking at The Knotted Line and Freedom’s Ring: King’s “I Have a Dream” Speech, I was struck by how these sites transcended the traditional notion of a website.  Navigation was guided in a way which provided narrative, yet was unique and engaging. Both sites were multimedia and though they provided a database of information for the viewer, it was clear that there first objective was to tell an engaging story.  Perhaps story, told through effective interface, is what produces attention span.

Serial is a new podcast produced by WEBZ Chicago and This American Life. As the name suggests, it is a “serial” and tells the story of a teen murder incrementally, one week at a time.  This podcast series has been widely successful and, of course, highly controversial.   There has been a lot of media attention to the series, specifically  as to why this podcast is so successful?  There has been much debate regarding the morality of the content, suggesting that the popularity of the podcast lies in an intrinsic human desire for voyeurism and the “unsavory.”  While I do not feel that I am educated enough to take on those arguments, I do want to say that I think a lot of Serial’s success may lie in interface.

I think that applying Shneiderman’s “Eight Golden Rules of Interface Design” to podcasts says a lot about the success of podcasts in recent years: they follow Shniederman’s rules pretty closely.  Podcasts “strive for consistency” in the sense that they are, like television shows, produced and distributed on a weekly basis.  They “enable frequent users to shortcuts” by virtue of their interface: pause, fast-foreward, rewind.  Podcasts are available at the users desire and can be archived for later use.  They “offer informative feedback” by the virtue of their existence.  Podcasts frequently, like traditional radio, answer listener questions and clarify in later episodes.  Podcasts are adapted to how the listener dictates the experience. Podcasts are “designed for closure” in that they have only a single function: the user listens to the podcast and then the podcast is over.   Podcasts “permit easily action reversal” because they can be listened, or rewinded, as many times as an individual desires. The “support inner locus of control” in that they are simple to use and feel easy to master: anyone can essentially download and listen to a podcast. (Serial even has a webpage to guide you through the process) In conclusion, good podcasts “reduce short term memory load.”  Most podcasts do not exceed an hour in length and are filled with “information recalls,” the purpose of a podcast is not to make the listener memorize the information, but rather to entertain.

In looking at a close analysis of “podcast interface,” I am perhaps a little convinced that popular entertainment has a lot to do with easily access.  Content is obviously king, but perhaps interface has a lot more to do with it than we think?  What about interface of discussion? Would we be talking about Serial as much without twitter or other social medias? I am curious if anyone else got hung up on the idea of interface behind “on demand” entertainment.  (Also, is anyone else listening to Serial? I am a little obsessed.)