#IAMondays: Interactive Movies

Wayne recently tweeted a link to an interactive movie, which was a fascinating experience. It shared some traits that relate to the concept I wrote about on the difference between linear and nonlinear stories, but there are some key differences here.

One of the key differences between this interactive movie and another type of nonlinear story is that this one is more easily repeatable. A user types their address into the site before the movie begins, and the movie then plays with Google Earth images of the user’s own hometown and address. I can share my movie with others so that they can see how the movie plays out in my hometown. There do seem to be minor differences… after watching the movie four times, it seems like some of the camera angles are randomized. The basic scenes are the same, however, as long as I type in the same address. This can be seen as an advantage over an interactive story with many more forking paths, since those types of stories seem to be hard to repeat without remembering the specific path you took through all of the steps.

Another advantage is that the same basic “story” can be seen by anyone with their own address added in. I can type in a new address, and essentially the same movie plays, with the only real difference being a different set of Google Earth images for the new location. The other elements (the running man, the birds, the trees, and the song) remain the same for each user. I mentioned in my previous blog post that nonlinear stories make it difficult for two users to share the same experience, including their ability to discuss what the experience was like. This interactive movie, however, gives everyone a very similar experience, with just a touch of personalization.

Of course, the disadvantage is that there isn’t a LOT of customization available here. Nonlinear stories have the advantage of being able to be experienced differently each and every time. This interactive movie, while it can be personalized for each user, is very close to the same every time it is played.

The balance here seems to be in how much decision the user is given in the course of a story. In a completely linear story, the user is essentially given no choice but to move forward and experience the story as it exists. In a nonlinear story, the user has a great deal of control, and their every decision can affect the outcome of the story. The amount of control given affects how customizable a story is. This interactive movie only gives the user a small number of decisions to make, and as a result the path of the story won’t ever change very much.

I think this idea of freedom versus control is at the core of making any type of nontraditional interactive story or movie. If you give the user too much control, it can be hard to maintain any sense of continuity in a story. If you give the user too little control, the story won’t really be interactive or customizable. The amount of control you give should be carefully and deliberately decided based on what type of story (linear or non) you want to create.

#iamondays How to Write E-Lit

On Twitter, Devon posted this:

Which is a link that leads us to this:

The “Fun da mentals” of e-lit. A very old image to teach us how to do something new. When I first saw this picture, I was immediately reminded of Robinson and his book The Story of Writing, and for some reason, the fossils reminded me of the section about “rebuses”. And with good reason, I think. These fossils are rebuses, and they relate to e-lit because most often, e-lit uses pictorial images. It’s crazy to think that we are still using techniques from the middle ages. But then again, everything we know has developed from something in the past. For example, the computer, and it’s many components (such as the internet, hypertext, and cyber text).

Hypertext is e-lit. But first, let’s look at the actual structure of this page that Devon posted. In my own opinion, it’s quite simplistic and bare. In fact, it even seems to resemble a piece of paper, which still shows that we’re relating how we write today to how we once used to write. However, the website seems to do a nice job of incorporating grids, as we learned about from Lupton. If we just browse at the first page, there is a cornucopia of blue. Blue, of course, is hypertext.  As Nelson wrote, hypertext means “forms of writing which branch or perform on request,”; in other words, any of the blue links that we see daily.

But how do these links happen? How can you possible think of making all of the connections? There are ways, tutorials, and even webpages that will do it for you, so it’s really not a question of how. It’s actually, more of a why. But the why is in the purpose of this blog post: electronic literature.

Now then, first we must learn to understand electronic literature. It’s unlike traditional literature, it’s not bound by specific outcomes and there’s no specific beginning or ending. So how can we learn about it with the idea of traditional reading and writing lodged in our noggins? With practice and coherence, it can be done.

Fun da mentals actually offers some interactive ways to learn and become familiar with electronic literature, which is something that Nelson writes is a good thing. There is a “hornbook” which helps students begin to understand how to read electronic literature. The hornbook teaches about nodes and paths, but also provides exercises that allow the students to get involved. By clicking on the “reader” section we can learn how electronic literature let’s us explore it. This section is headlined by “This sentence is false” and then teaches how different nodes (clickable parts of a sentence) can develop different stories or ideas, much like in The Jews Daughter.

The most interesting part of Fun da Mentals is the “Coloring book” link. As the only way to learn how to color is by practicing, at some point you learn that you’re doing it right when you color inside the lines. Students learn about creating electronic literature by doing similar exercises to that of a coloring book. It involves navigation by clicking.

Speaking of navigation by clicking, the Fun da Mentals is almost an example of  e-literature. Yes, it’s obvious that the page is full of hypertext, but what makes e-lit is that the reader is in control. He or she can click around and expand the story on their own. For instance, once I begin reading the description of “the coloring book” I see that the word “anatomy” is a link, in which I click it. It takes me to the anatomy interactive portal, which is not directly related to what I was just focusing on. In this same description, there is a clickable word that says “electronic tool”. I am compelled to find out what an electronic tool is, so I click on it. I read about electronic tools. However, here is where there’s an issue: Each page that I’ve clicked on, they’ve offered other links, but none of them seem to take me back to the original story line. Therefore, we could argue that this is not electronic literature.

Electronic literature can be complex, especially when we’ve grown up and only been exposed to one type of literature (traditional). It takes time and practice to learn a new trade. As Fun da Mentals is attempted to do, it’s important to constantly practice and enrich yourself into what you’re trying to learn in order to better adapt.

My infographic reflections

Reflection 1

As a huge baseball fan, I wanted to find an aspect of the sport I could make an interesting presentation on (instead of Hey, so-and-so can still throw X amount of curve balls after X amount of years). In researching baseball-not uninfluenced by the amount of “42” trailers-I decided to investigate diversity in baseball. This was further revised to African-Americans and their presence in baseball. I’ve had arguments about this before, and many people simply say something along the lines of “It doesn’t matter what color a person is, baseball is just about how good you are as a player.” While this is true, I wanted to be able to illustrate that there are roadblocks keeping African-Americans from developing into major-league talent.

One of the problems I encountered with my first draft was a lack of any sense of narrative. I was all over the place. In this draft, I was able to focus on one group, which really helped me show change over time and offer reasons for the change. Since my topic is essentially disparity, I wanted visual reminders. To this end, I used graphs and color options to emphasize the differences. I also made use of the icons/images offered by Piktochart when talking about the reasons offered/suggested for why the African-American numbers have dipped, as well as areas in which baseball is trying to improve. I did this because I thought visuals would make the socio-economics that act against integration more concrete.

Many of the design problems I encountered came from the website’s interface. While I was able to graph the 75/856 African-American player representation, I was unable to present more information in that style graph because Piktochart informed me I did not have access too it. This resulted in my having to try to scratch-graph it, which explains why some of the baseballs in the second graph in that block are a bit wonky. I think Piktochart would benefit from some sort of “auto-align” tool for different columns/grouped information.

During revisions, aspects of my presentation (icons or what have you) would sometimes disappear for several sessions, which was unnerving. I would replace it in the infographic, and then the original would reappear sometimes days later. I also feel that Piktochart is a bit over-eager to group things together. Adding/changing text formats was annoying-it would revert to false in whatever font/color/size you wanted to change too, instead of simply changing existing fonts. As a first time Piktochart user, I felt the walk-through tutorial could be a little more robust and in-depth.

I feel that an infographic was a good approach to showing rather than telling, to acknowledge opposite arguments and refute them.

Reflection 2

I wanted my infographic to be beautiful evidence. So in constructing my presentation, I knew that there were definite Tuftean principles I wanted to apply. Firstly, due to spatial considerations, I, like Tufte, would need to become a proponent of visual density. The infographic is a very finite space, and given my topic one that I needed to make the most of.  It was at times difficult to strike a balance. It was in finding a balance that I began to experiment with font styles and size in order to maximize my real estate.

To avoid overpopulating my infographic, I relied partially on using the layout of the theme to separate and compartmentalize ideas. Tufte recommends keeping related information at eye level,  so readers understand that the information is connected (Tufte p.91). By quasi-cartouching, I hoped to avoid presenting a confusing and difficult to read column of text and image. So, I hope to have made it easier to differentiate between ideas in my infographic without having made my presentation choppy.

Font use was another way I attempted to distinguish between information types.I limited myself to 5 fonts, 4 font sizes, and 3 colors during my presentation. I wanted to use group information by font, so that when readers saw a font that had been previously used in my presentation, they would automatically make a link between the two pieces of information. I also but a lot of thinking into font selection, as Ellen Lupton, author of Thinking With Type, writes that there is a whole history and metaphor/ emotive aspect to font selection. Going off of this, I picked very clear, thin, almost severe “hard” fonts for factual information, and a wider, more spacious, “softer” font for quotes. I was my intention to use these alternative fonts to mimic the idea of “hard facts.” Courier New has a sense of coldness (I think, due to the thinness of the characters), so I used that font when talking about the real world and it’s inequality. Likewise, I chose a font for the quotes that counterbalanced this, reasoning that the quotes are from people trying to put their own spin on the situation, and thus are a bit inflated.

I think producing an infographic is a great working example of a selection from Tufte’s book ” whatever evidence it takes to understand what is going on” (Tufte p. 78). Piktochart offers a lot of images and icons, which could easily be converted into the type of distracting “phluff” as Tufte calls it, that litters many PowerPoint presentations. The challenge is to use these images as a mode of information, or as repetitive information. In my infographic, I use visuals (baseballs for timeline, a schoolhouse, etc) to reinforce the topic. This can be used to particular affect in graphing.Instead of using a pie or bar graph, which provide abstract visuals, I chose to display my data in a more visually appealing way. Instead of impersonal lines and circles, my graphs recall humanity. Further, the use of color and countable icons in my graphs is superior to visually abstract pie/bar charts when trying to project disparity.

I tried to show forward progress (where it existed) and used comparison whenever possible. Tufte argues for comparison when presenting data, as it provides context to information. So, for everything I touched upon, I tried to provide a scale. Without such knowledge, we can’t really ascertain if there is a problem. Scale comparison was especially important to my presentation, as it is about a group being marginalized. Instead of just saying there is a problem in baseball now, we must look at this years number as it relates to the whole history of African-Americans in baseball. We must look at contributing factors, and compare the African-American baseball population to African-American total population. Only through examining these factors can we accurately declare that there is a real problem with the number of African-American players represented.

I relied heavily on Tufte and Lupton’s theories in designing my infographic. Without their influences, I feel that my presentation would have been “pretty” (if I was lucky) without really having anything to say, which is a damnable sin in evidential presentations. Being able to go to their works for reference helped me understand way of putting content first, then using other aspects of the presentation as enhancements.

By using Lupton’s approach to layout, I feel that my attempt at a Tuftean infographic was as successful as a first-timer could be.

An Infographic on the Importantance of Breakfast!

 

Reflection 1

I originally started out wanting to create an infographic on waffles, but I ran into a dilemma: what is there really to say about waffles? This is when I realized that there is so much to be said about breakfast. In this infographic, I wanted to build awareness that breakfast is essential for a healthy life and I also wanted to try and encourage those who don’t eat breakfast, to eat breakfast.  Furthermore, towards the end, I wanted to stress that it’s not just eating breakfast that is important, but what you eat for breakfast.

I start my infographic out with a timeline, which I feel slowly invites people in, especially when they see the “Eggo shortage” point.  After I get my audience’s attention, I share the statistics of the percentage of people who skip breakfast by age groups. These statistics are then followed by what percentages of those skippers are obese. I believe that these statistics alone will shock and draw attention to the changes that need to be made.  Towards the end, I have “building blocks” about nutrition, followed by lists of ways to create, and help any individual stick to a healthy breakfast.  I think these all flow together to help support my goals in educating the world about a healthy breakfast.

I think if I had to write a paper on this topic instead, it wouldn’t be as inviting or as easy to understand. I wanted to show statistics, but not in a way that was boring or repetitive.  However, this assignment did pose some challenges and issues. First, Piktochart separated everything into blocks which allowed for a lot of issues to occur when attempting to move things around. Second, it offered a limited amount of icons that didn’t really apply to my topic. For instance, after we spent a whole class deciding that a coffee cup would suffice for my chart, I had come home and I did not have the coffee cup available any more on my screen (for reasons unknown).  In my other chart, I had different color circles represent the amount of favorite breakfast foods, yet Piktochart made the key displayed as boxes. While I was able to cover these boxes with my own circles, this was a lot of unnecessary work that could’ve been avoided if Piktochart created a better presentation.

In the end, I think this might’ve been easier if I was a designer with some experience on how to put things together in a way that creates a good flow. However, as an experienced writer, I think I was able to create a good piece of writing. A piece of writing is about good content and the presentation of it, not just one or the other.

Reflection 2

Before I even started putting things on my infographic, I realized that Piktochart was already separated into blocks, which made it easy for me to think about it in terms of grids. As Lupton writes, grids “break space or time into regular units,” (p. 151).   On each block, I tried to figure out how I could create grids. For example, the title and explanation (at the top of my infographic) is broken into two grids, while the one that follows (the timeline) is displayed in one grid. I tried to alternate grids to create a better flow, but it also depended on the type of information I planned on displaying.

The information I used in my infographic varies on how it needed to be displayed. The timeline is a great example; it needed to be displayed in a whole block to show the distance of time from year to year. Furthermore, it was shown across the page, because according to Tufte “reading across describes sequence of movements,” showing the movement of time from left to right (p. 33).  I originally had my timeline going downwards, showing movement from an older year to a newer year, but I decided to change it as it didn’t match our metaphor of time. As humans, we often view time as across the horizon, moving towards one year and away from the other.

In the next grid, I display two statistics, which were crafted around both Tufte and Lupton’s theories on information design. Lupton writes that “design and text gently collaborate to enhance understanding,” (p. 7).  I put the percentage in a circle and had it displayed larger than the text it collaborated with in hopes that it would draw more attention to itself, and I believe this technique worked. The number and the text are not directly together; instead the text lies parallel to the number, but in a way that is not directly connected. As Tufte argued, most graphics that have nouns are connected by arrows or links, because “the evidence in variation in connections is stronger than evidence for sameness,” (p. 79). From this, I was able to pick out an arrow/link to connect the two together that provided a strong connection without distracting my audience. When I first came to these two statistics, I wasn’t sure how to display them. Originally, I had just thought that by writing it out as “22% are obese”, it would come off as boring and ineffective. I had remembered how I once read statistics in a magazine that was similar to the way I presented it, and then I recalled the theories presented by Lupton and Tufte, which were right on point. Tufte claims that there should be “no distinction among words and images” (p. 49), and I think by using arrows and links, there is no distinction between the two, at least in this case.

Next to this grid, I show more statistics; the percentage of people who skip breakfast, varying from male and female and from age group. This was originally displayed in a bar graph, which was what Tufte defined as chart junk. It was chart junk because it took information and made it into a bunch of junk that really had no effect on my audience. As Tufte argued, mapped pictures should “combine representational images with scales, diagrams, overlays, numbers, words, and images,” (p. 13).  In this grid, I attempted to do just that. I used the icon of a plate and utensils to display a certain percentage of people. This is what Tufte refers to as a sparkline, or a “data intense, design simple, and word sized graphic,” (p. 47). By displaying this information in this way, instead of the original bar graph way, it provides a greater level of understanding.

Understanding is the main goal of any piece of writing, so it’s important to involve metaphors in the way information is presented, as that’s how humans relate to things. In the next section, I used a squiggly boarder to make the grid appear as a chalkboard. Inside of the “chalkboard” I put blocks, and labeled them as “the building blocks of breakfast”.  I thought that this was a dead giveaway to the metaphor of building up your life to a great one. Furthermore, I really wanted to incorporate movement arrows in among these blocks, to show the relationships of the blocks. Tufte argues that “important comparisons among images should be pointed out by arrows, labels, and other methods of directing attention,” (p. 45). I added the circular arrows and other arrows to draw attention to the importance of each, but also to show the relationship among them.

In regards to relationships among the design, the text relationship to the design further enhances understanding. Although I was limited to the types of fonts available, I made sure each font correlated to the words. As Lupton writes, the goal is “to find an appropriate match between style of letters and the specific social situation and body of content that define the project at hand,” (p. 32). In other words, I viewed each portion of text as a human. Lupton claims that “words originated as gestures of the body” (p. 13) and that they give “language a physical body” (p. 13). I selected certain fonts depending on how they appeared, much like how we judge humans on how they appear. Furthermore, Lupton argues that the contrast between big and small type “creates drama and surprise,” (p. 45), so I attempted to use this technique to my advantage at certain points in my infographic. Overall, I think it’s safe to say that without Lupton and Tufte’s information design techniques, I may not have created a beautiful infographic that enhanced understanding on healthy breakfasts.

Resources:

Lupton, E. (2010). Type (2nd Expanded ed.). New York, NY: Princeton Architectural Press.

Tufte, E. (2006). Beautiful evidence (3rd ed.). Cheshire, CT: Author.

Tweetping and the Semantic Web

Recently, recurring birthday girl Devon tweeted about  Tweetping, a website tracking world-wide tweet counts. Tweetping may be the first step to realizing a Semantic Web. The term, developed in the 1960s, describes a web network that enables machine-read metadata to recognize relationships between webpages and web searches and attempts to establish these links in order for users more accurately and conveniently access the web.

I’ve had tweetping open for maybe ten minutes now and I’ve watched the number of tweets rise exponentially. What the site does-recording tweets by characters used, by hashtag (by another word, folksonomies-organically developed content retrieval tags instigated by small groups or individuals , words, mentions, place of origin, is the beginning of the Semantic Web. These ontologies -a set of data within a domain (of discourse)-touch at the possibilities of a Semantic Web.

The computer/algorithm is tracking data, but to be part of the Semantic Web, data needs to be relatable. Tweetping may track hashtags and @mentions, but offers no way of viewing the amount of times any given hashtag was used, or who/where/when the hashtag was used. In Semantic Web terms, this is provenance. Provenance is an important aspect of the Semantic Web because it can show what information is available to different areas of the globe, the density of information/technology availability (Africa has noticeably fewer tweets than other inhabited areas), and how inhabitants in the area feel about the information.  Archiving is an important function in the Semantic Web, as it is through archiving that metadata relationships can be recognized.

Moving towards a Semantic Web changes conceptions of websites and what counts as data. Twitter is an ideal example, as the social media platform is often derided for user’s tweets being thin-largely irrelevant posts (i.e. “oh snap”). But authors Tim Berners-Lee, Nigel Shadbolt and Wendy hall would argue that twitter is a a great example for Semantic Web development-given the websites tendency towards shared conceptionualization and peer-to-peer protocols. Twitter has changed how information is recorded, communicated, and archived. Twitter users have the ability to list information via topic, or group information in any way they want to. These lists can also be shared, altered, etc.

While tweetping is an imperfect example of the Semantic Web, it is a step in the right direction. However, it can easily be adapted. It would not take much to expand Tweetping to track tweet posts by topic, area, etc. As stands, it is an interesting look at how machine-and not humans-track data. It also stands as an interesting contribution to web science, a science that seeks to develop an understanding of how information systems (both human and machine) operate on a global scale.

Tweetping offers an interesting look a global data trends-though again, only through seeing repeated hashtags in this version. As users of the Semantic Web, we must be aware that we are not just tweeting, not just blogging, not just idly surfing the web. We are contributing to the global information database.

Baseball infographic

 

Here’s my baseball infographic. Feedback would be lovely.

breakfast; the most important meal of the day

#iamondays Website Analysis: Ellen Lupton Style

Ryan Scherf’s website (http://ryanscherf.net), tweeted by @CassieWrites_, is a perfect example of Ellen Lupton’s ideas about “Letters” and “Grids” from her book Thinking With Type (2010). Lupton addresses fundamental ideas of typography in her book and describes the ways in which we use typography in many areas of our lives.

Ryan Scherf’s website uses some of Lupton’s ideas about “Letters” in his headers. He uses multiple typefaces, which Lupton suggests must be done with care and attention to detail. Lupton writes, “Combining typefaces is like making a salad. Start with a small number of elements representing different colors, tastes, and textures. Strive for contrast rather than harmony,” meaning designers can’t just sneak different typefaces into areas and hope we no one notices (54). Scherf does exactly what Lupton suggests, choosing contrasting typefaces and colors which stand out and make viewers pay close attention to his words. Scherf chooses a more sophisticated, architecture-like font in white on a dark background to describe what type of work he does, and what he will be showcasing on his website.

He then sandwiches a more playful and colorful mixture of typefaces with different weights and leading to show what type of designing he does, or for what “platforms.” The use of these colors draws the eye down and around, while the different weights make each platform stand out to the eye.

The final piece of the sandwich is his location, which brings viewers back to the sophisticate, clean typeface.

As readers of Lupton will know, choosing a typeface is a big decision. The typeface you pick to represent your business says a lot about who you are. There are things to consider, like the history of the typeface, but there are also connotations that go along with certain typefaces. The two used by Scherf show a clean, almost minimalist classic feeling that seems professional; and a fun, chunky, and colorful feeling that shows a more unique and creative side. For a web designer, I think those combinations seem like a good choice. The typefaces Scherf uses show that he is professional, but also creative. That is the kind of person I would trust to work on my website.

Scherf also uses grids, which Lupton addresses in her book as well. His website runs on a linear grid, where examples of his work are in two columns, running vertically down the page. According to Lupton, linear grids in web design are a good choice for multiple reasons. Most importantly, linear design that uses tables and cells that flow in a line which is the easiest thing for devices for the visually impaired to translate into sound. These devices read webpages in a row by row fashion, so linear design translates most easily and clearly. Also, linear design is best for translation onto mobile devices. While funky, new-age web design may look neat on a desktop or laptop computer, the layout often gets skewed when it translates onto a mobile device. Linear grids in web design work best when there is little room, like on your phone (171)!

Within his own web design it appears that Scherf follows these same principles. Although not all of his work is completely linear, many of the spaces containing content are styled in a paragraph-like way that reads like a book. He also incorporates different typefaces in a purposeful manner.

Overall, Ryan Scherf’s website follows many design principles that Ellen Lupton stands behind in her book. He demonstrates his ability as a designer on his webpage. He chooses clean, functional typeface and a sensible grid system to make the most of his spaces.

Seeing Lupton’s ideas in practice helped me get a better grasp on many of her concepts. Now that I am more aware of how to put these ideas to work, I think I will pay more attention to these design principles when browsing the internet. How have the readings for class changed the way you look at things, such as websites, in your daily lives?

Works Cited

Lupton, Ellen. Thinking with Type: A Critical Guide for Designers, Writers, Editors, & Students. 2nd ed. New York: Princeton Architectural, 2010. Print.

Website Analysis: Hailey Winstone Illustration

As part of course requirements to employ the use of social media toward stimulating discussion around relevant topics pertaining to information architecture, my classmate, Wayne Stainrook shared this tweet:

In the “crazy” version, the house is the home button and the eye let’s you view the artwork hail-stone.co.uk #iamondays #inarchs13

— Wayne Stainrook (@stainwaynerook) February 18, 2013

The website belongs to Hailey Winstone Illustration.

Upon clicking the link, I am greeted by the site’s visually-centered homepage. In the background, I see a sample of the illustrator’s work which appears as a faded-watermark. At a glance, the artwork embodies a metaphor that represents elements of the internal (a human brain and eye–thus creativity) and the external (a planet and surrounding outer-space–our world). An affordance of the way the illustrator features her work here is that it draws me in, yet it is not distracting; I also find it meaningful in multiple ways. The navigational interface is placed directly at the center of the screen; it reads concisely with the logo at the top (whose typeface has a customized feel) and directly below are two content boxes which mirror each other in design. The navigation option on the left dares the user: ‘crazy version’ here (enlarged) and just below (in smaller typeface), ‘if you & your machine can handle it…’ the option to the right accommodates: ‘lazy version’ here… for slower computers and connections.’The homepage emotes an interesting sense duality–as its aesthetic is of a bizarre, whimsical nature, juxtaposed by a navigational interface that conveys acuteness in its attention to precision. A win, in terms of design, is that the image and the text do not compete with each other–instead they work to complement the work as a whole.

As author, illustrator and scholar, Edward Tufte asserts, in Beautiful Evidence, most techniques for displaying evidence are inherently multimodal, bringing verbal, visual, and quantitative elements together (83). All components are treated as ‘colleagues in explanation.’

Additionally, I find the initial options to be constructed in such a way that I am directed with visual ease to the offerings. In terms of an effective visual representation, or mapping of the information, the designer maximized the use of color and typography in a way that serves to embody a sense of graphic consistency, yet adds a layer of interest. Specifically, through use of a single color (white) for navigation, the text is crisply highlighted and flows in smooth contrast with the background image. The text (again, all white) is featured in two typefaces–the logo is highly stylized but balanced by navigational text in a classical, yet stylized serif typeface.

So far, so good. I decide to enter the site choosing the ‘crazy version’ option. What happens next is that the background image transforms into a full-color image, (as opposed to the very faded version on the homepage) and as I scroll over the image I discover that the drawing has become interactive. Although not all ‘interactive parts’ of the artwork function as navigation, I enjoy it as an ‘ imaginative experience of discovery,’ and feel that the designer’s intent is to provide an interactive experience for the user, where anything can happen–as there certainly seems to be a sense of the ‘unexpected.’ The user interaction that occurs on this level also serves to reinforce the brand and identity of Hailey Winstone. As I scroll over ‘the eye,’ white ‘click to enter‘ text appears; the eye then looks to the left at a menu offering links for: Paintings, Pen & Ink, Portraits, and Other. Each link (text) is accompanied by a white, graphic (image) that is iconic of what it represents–for example, a classical-looking paint brush graphic is paired with the Paintings link. Thus, the result is quality of resonance as the text and image complement and reinforce one another.

I venture into the Paintings section of the site; there appear 3 rows, each containing 5 thumbnail scroll-shaped images. The first row and (majority) of the second contain illustrations for the book, Mother Holle, by the Brothers Grimm. As you scroll over each thumbnail image, a small bit of descriptive text appears above it. As Tufte asserts, nearly always, the words closely follow the images–and the images closely follow the words…(90).

A strong, consistent theme that the designer employs is the accompaniment of  text to bring specificity, context, and definition to the image-based content. This serves to connect the illustrative subject matter with a specific literary genre–thus giving the illustrations a sense of credibility by connecting them with their market niche. On the bottom row, I thought the relationship between the image and supporting text was of particular interest; the thumbnail depicts a close-up portion of a human face–with fangs. The illustration category is: Christmas Cards, with the description: a Christmas card featuring a scary Santa, and finally the caption: He’s coming for you. As a point of visual connection and associative meaning-making, just left of this image is a thumbnail featuring a classic-looking Santa–therefore, you can form a fairly accurate educated guess as to what the ‘scary Santa’ image is–without actually scrolling it to reveal the supporting text. In sum, I feel that the informational ‘mapping’ of this site exemplifies Tufte’s theory that, mappings help tell why the image matters (45).

#Iamondays The Lack of Mapped Images?

Christen tweeted about Interaction Design Foundation, which is a webite that shows a lot of free educational materials involve Interaction Design. I clicked this link, after I prepared to be wowed. However, I was rather disappointed. The website seemed to lack the interactive design as well as any existence of mapped images. While the website is easy to navigate, it’s a bit plain and dull. This seems kind of ironic as it’s promoting interactive design. The colors are black, white, and gray. The only color that seems to stand out is the blue buttons at the top right of the screen that highlight the users to join them, log in, or publish something with them. I supposed these colors are used to emphasize the most important elements of the website. This could further indicate that you must join in order to participate in this website. The headlines and subtitles are typically bold. There’s not a lot of confusion happening on this website. There is a toolbar across the top, which displays exactly what the bleak images and subtitles display on the homepage (the main information of the website). Furthermore, if you scroll down on the homepage, each section is displayed again, with an image and a summary of what you might find in each section. I find that this design seems like it may be too much. I’m not sure I’d agree that it needs to display the main ideas three different times on the same area, what do you think?

I decided to click on the section labeled “Free Wiki Bibliography”. Again, this section of the website was well organized and easy to navigate, but it was full of text only. I thought that each section could have been created into a mapped image. For instance, each conference on the Wiki Bibliography could’ve had timelines that were interactive. Instead, the user must select a specific date, click on it, and further read through the information available. As Edward Tufte argues in Beautiful Evidence, data is more credible when contextualized (p. 22). If each event was contextualized in some way, it would become much more credible and easily associated with.

The website requires a lot of clicking around and exploring. I decided to check out the “Free Encyclopedia” section. By clicking on this link from the home page, I’m then directed to a page of 35 titles of self-help articles involved in some type of interactive design or service. Other than the titles, I had almost no knowledge of what was behind the articles. I wanted to click on something that might offer more user interaction, so I decided to look at “Visual Representation”. Each article is available in a tablet or PDF version, and offers links to a forum or a question form for the author. I thought these were neat buttons introduced, but they seemed a bit oddly placed at the top of the article.  This specific article on “Visual Representation” involved a lot of different approaches. It not only offered text, but also video, graphs, and data as well. As Tufte states, users must understand “what the words mean in relation to the image, and what the images mean in relation to the words,” (p. 88).  For instance, in this specific section of the website, you might not understand the importance of “The Grid System” if you failed to read the article or watch the videos on Visual Representation.

There’s also a “free image” library, where one can use as long as they adhere to the “copyright terms of each individual image”. I find this attribute pretty awesome, as most pictures involve Creative Commons, which is something the world should be pushing for. When I clicked on “Join us” in the top right corner of any section, I was surprised by what came on the screen. A nice interactive design showed up, that allowed me to become a member. I could write my name in an actual certificate. There are nine different certificate templates I can chose from and place on any number of websites if I wanted to. I could find my network on an actual map. I could list my skills based on types of technology. I found this small section of the website to be the most inviting and enriching. Each image tied in with the specific section it was explaining.

Another tiny little tool I found to enhance the website: you can click that little tree in the top left corner any time to return to the home page. The tree represented a home. To me, this is a metaphor in itself. Trees grow tall, humans grow tall. I’m a big fan of this tree, especially as I assume it’s the logo image of the company. The tree appears as a big, white oak tree. Instead of buds on the ends however, are pieces of paper. I think this logo could be incorporated much more into the design, as it’s a metaphor that speaks for the company itself.