How Buxton Helped me Design an App

While reading Buxton, I was really drawn to his analogy of the Wizard of Oz in regards to sketching the user experience. Then it dawned on me, I have been doing this very thing all semester in HCC 831.

The design team I am a part of has been using paper prototyping to test iterations of our application which seeks to aid graduate students in managing their professional and personal lives. While these paper cutouts may seem crude to the casual observer, they are , in fact a very useful tool in helping our design team, The Helium Knights (yes, there is a story behind this name) realize how to best create this scheduling application.

http://heliumknights.blogspot.com/p/lo-fi-prototyping.html provides an overview of the paper prototype, as well as notes from a usability test, results of the SUS, as well as videos of a testing session. While we have planned on mid-level and high-level prototypes to test in the near future, Buxton's advice, such as storyboarding, the act of storytelling, and making use of simple animations to inform future testing of iterations of the app.

By making a prototype "graspable" (Buxton, 309) we hope to better inform the user of how the application will be used across a variety of media. As we plan on using HTML5 to code the app, it is intended to be used across a variety of platforms, including laptop (desktops), tablets, and mobile devices. By presenting a simple animation coupled with a 3-D object to represent the platform in which it will be used, The Helium Knights can create a more meaningful experience for the end user.

Capturing the Don in His Best Light

As Jay Holben's  A Shot in the Dark is very much a review for me ( I was an intelligence and combat photographer for a while) I still maintain it is a great reference source, and shows some really great techniques that are inexpensive. The section on bouncing light alone is worth the price of the book.

While reading about lighting, I started thinking of great examples of lighting. Perhaps one of the greatest examples of Rembrandt lighting use din a film is Francis Ford Coppola's 1972 masterpiece The Godfather. In the opening scene, in which Amrigo Bonasera is asking Vito Corleone to murder two men who beat his daughter for refusing to have sex with them. The lighting is positioned in such a way as to not reveal Corleone's eyes, thus adding to the mystique and power of this individual. Gordon Willis, the cinematographer for this film has famously stated there was no formula in the lighting design, but that it was necessary to achieve the effect. By all measures, Willis and Coppola in a way started a trend for films of the 70s with it's emphasis on a more natural, almost earth-toned way of lighting scenes.

The Godfather, 1972, Francis Ford Coppola. Image source: American Zoetrope

By looking at this image, two things are apparent. One, there is a strong key light, as evidenced by the reflection in Brando's forehead. Secondly, there is little to know fill light being used to light this scene. This is probably the reason for the Rembrandt-esque contrast of dark and light. This use of light is in sharp contrast to the scene just before, which is an outdoor shot of Corleone's daughter's wedding reception, which is going on simultaneously during this scene. This contrast, as a rhetorical device, displays the complexity of a man like Vito Corleone, which we learn more about as the plot unfolds.

Bill Buxton and the Heath Brothers Help Brian With His Client Project

The last two readings from Buxton and the brothers Heath have had real world applications in regards to my client project. Buxton, in his discussion of informed design (Buxton, 27-38) calls for "designing for the wild", in which the "wild" in which the tool casts the problem in a different perspective that side steps the need for the task to be done. 

In regards to my client project, an ecosystem of PCs, phones, and tablets is loosely implied, but is not inherent within the process. The client, who for the sake of ethical and non-disclosure reasons shall not be named, is insisting that one aspect of this loosely defined ecosystem will be used: the smartphone. His reasoning suggests that an emphasis on redesigning the home page for this project is not necessary, as the user will receive an email, open it, click the link, and go directly to the page within the link, all from the phone. His theory of "Three Screens", the phone, the email, the link, the page, seeks to solve the navigation issue at hand, albeit superficially, and as such could prove to be detrimental to the life of the interface. The client is not accounting for the user navigating the interface, exploring the other options available, or experiencing the interface as a whole. This is a lac of what Buxton refers to as "informed design" (Buxton, 38). Without a uniform, cohesive design applied to the interface, there are severe implications for the client. The user may decide that the interface (and invariably, the organization) is unprofessional,  and as such, will nt choose to use this particular service.

The Heath brothers concept of SUCCESs, Simplicity, Unexpectedness, Concreteness, Credibility, Emotions, and Stories is a great outline to use to drive the redesign for my client. The site, an innovation and entrepreneurial social media interface, is chocked full of stories, which is at the heart of entrepreneurship. The creator, a businessman with over 30 years of valuable experience, has a lifetime of credibility from his various business ventures and weekly radio segment focused on business within South Carolina.  One thing the interface is not is simple. Navigation requires several clicks, the pages are text heavy, and contain lingo and jargon that seem to be focused primarily to the business set. The design is not intuitive, and several features that should be salient are buried deep within the interface. The creator is adamant that the site is fine as it is, but is not taking several things into consideration. One, the language is slanted towards a corporate/business crowd, and as we all know, entrepreneurs come from all walks of life and backgrounds. By using simpler language, the interface will be more inclusive and possibly gain more traction. Simple language can also mean concrete language, and as such, will bring more users to the site, who in turn can present ideas in a manner that will be memorable to the potential investor, etc. 

There is a wealth of practical knowledge contained within both of these books, and both have taken serious roles as references in my client project.

Squirrel, Inc.

While seemingly a child's tale at first glance, Squirrel, Inc., presents a wealth of information concerning how storytelling is a valuable commodity in business. It is after all, the stories behind many of the products and services that attract people to them in the first place. it is also fundamental that leaders and workers within an industry believe the stories surrounding a business.

One particularly salient point Denning makes involves vision. A leader, whether it's a Fortune 500 company, a little league baseball team, etc., must have the ability to look into the future of an organization, and to forecast its future. This evident in the Sandra's Story, where she agrees with Howe.

"When we dream alone, it's just a dream. When we dream together, it's the beginning of a new reality" (Denning, 111). This statement is a catalyst that has been used time and again by leaders to incite interest in establishing a future by providing an evocative and brief glimpse into what things could be. The listener, upon hearing this sketch of the future, then assigns meaning for this future. This has been an effective oratory device, employed by such disparate figures as FDR, Hitler, and Steve Jobs. Jobs, in his conversation with John Sculley, used a form of this storytelling by posing a simple question: "Do you want to sell sugared water for the rest of your life? Or do you want to come with me and change the world?"(Triumph of the Nerds, part III) By believing in this vision of the future, Sculley presided over Apple through many of its early triumphs, such as the release of the Macintosh in 1984. By believing in Jobs' story, Sculley put the "flesh on the skeleton" (Denning, 113).

Grad School Guide, and The Old Brain is Really the Id.

The Graduate School Guide Book proved to be a bit of a challenge. I don't use InDesign very much, so my skill set involving that particular piece of the Adobe CS pie is a bit undercooked, to say the least. At least one person had some skill with it, and one of them had virtually none, so I would say our handicap was on par with the majority of the class.

To make the design more appealing, I retreated to other Adobe applications that I have more experience with. I created the cover in Illustrator and Photoshop, by creating a typographic illustration of Tillman Hall. I separated the highlights, midtones, and shadows of Tillman form a photo I took this summer for an article on the SunPatiens™ that are blooming in their fiery orange. I then created brush presets for the word s"Clemson Graduate School" and merged the separated layers into one flattened later. I then created additional layers to apply the brushes, then created a layer mask to make the brush preset conform to the photo outlines. I added Clemson brand colors to finalize the illustration.

As for the layout, it proved to be a bit more problematic. Rhetorically, We opted for full spread photos to give the effect of immersed in the scene that is being set. We also opted for a magazine-like feel for the layout, to keep it informal and visually conversational.

Technical problems arose form working with a shared document. InDesign doesn't seem to foster collaboration so much, so a great deal of time was wasted with lost files, etc. What a headache!

Weinschenk, who in her theory o the "old brain", makes the points that this unconscious part of the brain is concerned with food, the opportunity to have sex, and danger. This reminds me of Freud, and his labeling of the mind as Id, ego, and super ego. The old brain, with its base desires and impulses, is the id all day long. These appeals to the id certainly work, as we are all aroused by food, sex, and the "fight or flight" instinct that each of us possess.

In regards to these things, I find the allure of sex to be the most fascinating. How many magazines feature beautiful women on the cover? Not only magazines geared towards men, but those that are marketed towards women, as well.  Weinschenk addresses in Chapter 8, in which attractiveness "rubs off" onto surrounding objects (91)

Not Getting into the Club, Because We Really Want You in Our Club

Weinschenk makes several salient points in the first five chapters of Neuro Web Design. The concepts of the brain as three separate brains and the potentials to appeal to them has been explored in many disparate fields, including architecture. 

The chapter on social validation, to me, was one of the more salient of the concepts discussed, especially the sections that focused on testimonials and storytelling. We have all seen the reviews and ratings on sites such as Amazon, and those pieces of information have influenced purchases I have made. However, I did not even consider I was being manipulated by processes in my "old brain", desperate for acceptance among peers. These testimonies and ratings for products are actually being manipulated to influence my decision to (or not ) to buy certain products. Even if I don't personally know the person giving the testimony, I can relate to this persona (Weinschenk, 25). Personas, as I have discovered in other readings pertaining to the user experience, is an effective tool in developing an experience. 

Feelings of debt, brought about by reciprocity and concession, is also an effective strategy in attracting users to an interface. The illusion of debt (or gifts) created by these concepts must be repaid, and ultimately results in giving of information, purchases, donations, etc. (Weinschenk, 36-41).

We have all heard abut scarcity as a concept to attract people. Many years ago, I watched a television show about Studio 54, the famed Ne York nightclub. The owners often would not allow anyone to enter the club, or only allow certain individuals to enter the club, as a means to attract more patrons. Often, there would be only a few people, or even an empty dance floor, while hordes of people waited in vain for a chance to enter. While this seems to be detrimental to a business that makes money from visitors buying drinks, etc., it was genius. By not allowing people the chance to enter, it made them want it more. Within weeks, the club was packed nightly, by locals and celebrities alike. Steve Rubell and Ian Schrager, the owners, knew that invoking scarcity, along with humans need to be validated socially, was the recipe for success to their business venture. 

   New Year's Eve, 1978, at Studio 54: from left, Halston (Roy Halston Frowick) (the woman he is kissing is unidentified), Bianca Jagger, Jack Haley, Jr. and wife Liza Minnelli, and Andy Warhol. (Photograph by Robin Platzer/Time Life Pictures/Getty Images)

Social validation will play widely in our graduate school book designs. Finding the right place to live, the "cool" supermarket to shop in, and the best schools to send children will play heavily on the potential graduate student. Being in graduate school is socially validating in certain demographics and cultures. This information can serve us well, because we ar ein essence, selling the region to potential buyers.

Music and Art as Transcendental Vehicle, or, My Journey Through an Album Cover

Very Rough Sketches from the ENGL 8570 Digital Sketchbook of Brian Gaines (Paper, an application developed by 53), 

© 2013 Brian Gaines

Rough under-painting of WIP  sketch of Bettie Page for Underteaux album cover, Photoshop. ©2013 Brian Gaines


While these probably will not be used in any capacity, I included them in the blog to illustrate the generative process that sketching affords. I also included them to further reinforce Buxton's idea that sketching isn't always pen/pencil to paper/cocktail napkin, etc. While these sketches can be viewed as a digital take on what is traditionally meant by sketching, I believe that by viewing the process of sketching as a "visual brainstorm", you are employing a means to exorcise the bad ideas until you find the concept you (and hopefully your client) are looking for. Furthermore, I believe that by engaging the thought process as a physical activity, the generative process is greatly enhanced. 

Through sketches, both digital and traditional, I was able to generate two very distinct ideas, and through the process of generating ideas, I was able to (hopefully) visually articulate the rhetorical choices I made about what Dr. Ligon and Underteaux want to visually represent their music.

With the first cover, I wanted to incorporate the elements of "Swamp Rock" and psychedelia, as well as pay homage to the blues in a unified image. As this is a commercial as a learning one, we were walking a very fine line in the realm of imagery. To keep my nose clean, I opted for creating my own imagery through photographs and digital painting techniques.

SO, armed with a camera, I headed out to scout out locations to photograph. I went to some areas I thought would be swampy, but was met with dried out creek beds, new subdivisions, and frustration. At one point I found myself on an abandoned bridge overlooking the Savannah River on the South Carolina/Georgia border, and decided that the metaphor of a flowing river would be a good rhetorical choice for Underteaux. I took about 200 photos, and decided to go a different direction. I was able to get some great close up shots of rust and concrete (which I used extensively as textures in both cover concepts).

Later on in the first day of shooting, I also found myself thinking of the life and times of Bettie Page. The pinup girl, the sex symbol, the innocent girl next door, the southern belle, the lamb in a world of jackals, her involvement with fundamental Christianity, the possibilities were seemingly endless. I found myself photographing a simple wooden cross outside of a 200-year-old church, and being distracted by the ancient obelisks in the cemetery (I used textures of those in the second concept). 

As the sun was setting, I found the perfect spot. It was a swampy area of Lake Hartwell, in Fant's Grove. While it wasn't a lowcountry swamp or a bayou, it had elements of what I was looking for. Unfortunately, the lighting was such that getting a usable photo without a decent flash wasn't going to happen. I returned the next afternoon. I also took photos of an abandoned mill (I think they may have processed corn there) from the late 1800s.

I made the decision to shoot all of the photos in RAW, to get the highest resolution image possible. 

After deciding on the images I wanted to use, I started thinking of ways to manipulate the images to convey the ethos of what I think Underteaux represents. What are the blues? What is psychedelia? What is "Swamp Rock"? As i don't particularly care for the blues, I kept asking myself if I would be able to make a visually compelling image that would resonate with the audience and the band. I also found myself thinking of Bitzer's Rhetorical Situation quite a bit, and the constraints of the message I was working with.

I decided to use an image of the swampy area I shot, as well as one of the abandoned mill. I thought that by manipulating the color of the photos, I could convey the pathos of the blues and psychedelia were about. In order to do this, I decided on a split tone motif using semi-complimentary colors (blue and yellow). The blue and yellow tone son the swamp photo added an eerie patina, one of an altered reality, or an oppressive feel reminiscent of the blues. 

I applied the same treatment to the mill photo, and cropped it to show the texture of the rusted walls, broken windows, and the old weathered door. 

For the typography, I decided on Helvetica, as it is legible, and I could apply clipping masks to it with the textures I took form the abandoned bridge. Before applying the clipping masks, I changed the white balance of the raw image from auto to cloudy to make the orange in the rust really pop. I also made a copy of the song titles on the back cover, dropped the opacity, and pasted them to the wall of the mill to give it a tracer-like effect, a common symptom of being under the influence of psychedelic drugs.

For the second cover, I decided to go with Bettie Page. Initially, I wanted to portray the life of Bettie Page, but I didn't want to fall into the cliches of the pinup girl (Bettie's black bangs), the innocent, sex object (Black Bettie bangs), etc. I didn't also want to contribute to what Sturken and Cartwright refer to as "the Male Gaze" (Sturken and Cartwright, 124). After much deliberation, I went with a digitally painted portrait done in a psychedelic manner, based in part on some of my personal psychedelic experiences. I rendered the portrait in a type of topographical means, which alludes to the many layers that represent people, and hides what is underneath (the undertow). I based the portrait I painted from a rather innocent portrait and began the tedious process of rendering it digitally. 

Bettie Page, year unknown. Image courtesy of Listal (www.listal.com)

I began by applying a smart blur to the photo to remove the wrinkles form the eyes and to give it an overall smooth appearance. Then, I posterized the image to give it planes to work from. I then transferred the image to illustrator and traced the planes with the pen tool, then adding the color after drawing each plane. Afterwards, I scaled down the portrait, and repeated it while changing the opacity, shifting the color slightly, and then repeating the image over and over to give it a tracer-like effect. I also applied shadows and a glow to the overall image. For the typography, I used Futura, with several manipulations and drop shadows applied. I also developed a color system based on a triad color scheme in Kuler, and used the colors throughout the cover. (See following images).

Bettie Page, Smart Blur applied to image, Photoshop CS6.

Bettie Page, Posterization Applied to image, Photoshop CS6.

Bettie Page, Drawing the planes over blurred and posterized image, Illustrator CS6.

Bettie Page, portrait drawn in Illustrator CS6

Color Palette for Cover Number 2, Kuler (www.kuler.adobe.com)

For the back cover, I again thought of the psychedelic experience. I decided to go with a geometric motif, to symbolize LSD, the methods in which it is ingested (the hexagons on the cover can be viewed as tabs of acid, or a two-dimensional sugar cube, another common method for the drug to be ingested), as well as the geometric patterns that are sometimes a side effect of taking certain psychedelic drugs. I applied several filters, including drop shadows, and glowing, to give the patten an undulating effect, to symbolize the effects of such drugs, as well as to pay homage to the effect of water flowing underneath the surface. I applied the color palette to the image in several layers interspersed with several layers of textures i photographed during my shoots (rust and stone primarily) to give it a multidimensional appearance as well as to refer to the undertow (teaux). I also applied a severe drop shadow to the text (Futura again) to give it more depth. I wanted this cover to really explore the vivid visual information, fear, and wonder associated with psychedelic experiences. I drew upon my own past experiences, as well as the writings of Aldous Huxley, Terrence McKenna, and what I discovered later, on a subconscious level, the Jimi Hendrix album cover to Âxis: Bold as Love. 

 Cover Art for the Jimi Hendrix Experience album Axis: Bold as Love, 1967. Cover art by David King and Roger Law. 

All-in-all, this was a great project. Any time I can use Photoshop (and/or Illustrator) the work doesn't seem like work, but more like play. I enjoy experimenting and the forgiveness it affords if the experimentation doesn't quite work out. I also enjoyed the personal discovery and reflection that came along with this project, and the challenges of visually communicating another art form, and the challenges of putting aside my personal feelings about that particular art form to create something meaningful. Well played, DrH! Now, on to the reading assignment...

Being a combat photographer for the Navy for six years prior to graduate school, I was familiar with the concepts of what Holben was discussing. However, one doesn't really think about aperture and shutter speeds or ISO when there are bombs going off or you are being shot at. I can tell you a 300mm lens is a great makeshift weapon, but I digress. The information presented in these two chapters, while very technical, is at the foundation of what photography is all about. It was a great review of the basics, and for once, I could really understand the theory behind what Ansel Adams was doing. The cup metaphor was an excellent parallel, and the basics of color gels was extremely helpful. I realized while reading I had been using the color gels in Photoshop on the first album cover concept to push some of the tone sin the tone split I created. While I knew WHY I was using them (85B to be exact), it was interesting to get a crash course in the science behind it again. These techniques were being used in film, and I think this book will serve some of us well in the future.