Project 1: INTERACTION AND FEEDBACK
1/16/18
We began the first class of the semester by observing and ‘decoding’ various toys that Stacie brought to class.
Almost all of them were wind-up toys, able to move on their own, but we first identified the two toys out of the collection that were not wind-up. The class successfully decoded these two toys as different from the rest because of aspects of their form such as a lack of a visible crank or button to cause motion, and a certain clumsiness and home-made look to the toys, which were made of various scrap metal. Following this identification, we began to examine the rest of the toys one by one, predicting how fast, what parts of them, and in what direction they would move, and what they would sound like, based one visible aspects such as size, color, material, and characteristics that appealed to our prior knowledge. After Stacie revealed how they worked, we assessed whether the movement was satisfying, and why. I found that the ones that moved quickly and smoothly were the most satisfying, but other factors played into this determination as well. We discussed how even though we don’t always consider sound as a crucial element, none of the interactions would have been as gratifying if not for the sound that the toys made. Another quality that we talked about was the element of surprise. I think that the toy that most had this was the tiny pink one, which ended up moving extremely quickly and whose legs to me almost resembled some type of monster that I have probably seen in a movie before. The movement was really exciting and highly contrasted with its “cute” appearance based on it being tiny and pink.
Next, we began a word exercise in which Helen and I were given the word “launch” to define.
We initially associated this word with the launching of a rocket, and thus acceleration and fast motion. We also saw that there was more of a figurative approach to defining the word, in the way that a project or business can be launched. A sound that I thought of that related to this word is the Shepard’s tone, which is an auditory illusion of a tone that sounds like it is continually becoming higher in pitch, but actually is not.
Next we were given our first assignment, to choose a heteronym or homonym and study their meanings, and eventually make a video expressing them. The idea of literal vs. figurative definitions that I described with the word launch is very applicable to the word that I chose, which is close.
The following are the two paragraphs I wrote about each version of the word and some examples that correspond.
Close, the adjective, describes a lack of space between multiple things, either in space or time. With objects in space, closeness can denote crowdedness, clutter, and density, possibly even claustrophobia, or it could evoke a feeling of coziness and warmth. With events in time, a good example of the word is in describing a project as close to completion. In this sense, the word close is similar to the word almost, and actually shows that despite there being a small amount of space, the space still exists. With words and ideas, they can be close in meaning, causing synonyms and variety in ways of expression. Closeness can also evoke the idea of competition. When a contest is won by one party by a small amount, it is a “close game.” When describing closeness between people, often the adjective is used more figuratively, in that people who know each other very well can be described as “close friends.” Finally, the phrase “to keep a close eye on” depicts a situation in which someone is examining something very carefully and thoroughly. With its many different literal meanings, in general, the word “close” expresses a relationship between two things that is based on some similarity or common existence.
To close something is to block an entrance. The immediate association with the word is the closing of a box, or a door, which both have literal openings that can be blocked off. One can also close a gap between to objects, in turn bringing them closer together. Closing evokes a feeling of completion and of putting something in the past. This idea relates to another meaning of the word, which is to bring something to an end: to close a meeting or a business is to terminate it, to a close a paper or a speech is to conclude it. A restaurant or store with a “closed” sign (vs. open) shows that its hours of operation are temporarily over. While some closings are satisfying and bring a feeling of closure, others might create tension or mystery. For example, one might wonder what is behind a closed door, and if it can’t be opened, this creates excitement or anxiety. Thus, to close something is most often either an ending or a hiding.
1/18/18
Notes from class.
We began class by talking about Lorraine Wild’s idea of the cycle of popular typefaces that was discussed in the reading. We transitioned from this to talking about the different ways that we can interpret type and different typefaces, through denotation and connotation. We did this with the whole class and then in partner teams and tried to characterize different type based on only connotation.
My first impression of this activity is that it was a lot harder than I thought it would be to analyze type when the words being spelt have no meaning. Without any context clues, and only pure type, we really had to analyze the minute details of the characters, but also step back and trust our gut intuitions of where we felt we might see the type. Even without any context, my partner, Sharon, and I still tried to use our prior experience of other similar typefaces, or possibly our prior knowledge of the typeface, to say where we thought we might see it. Since I have decided to study Communication Design, I know how important typography is and I do enjoy learning about it, but I also feel that it is one of my weak points. What I took away from this activity is that while it is possible to assign characteristics to a type without any prior knowledge, to do so accurately requires practice and dedication. While I hope I have the dedication, I still don’t feel like I really know what I am doing when working with type.
Next, we began talking about semantic differentials. The introduction of this tool was extremely helpful for me because I was struggling to characterize my words to the depth that is necessary for this project. This activity helped me a lot to see how my words differ, and how they are similar, and I am excited to push my explorations even further. Especially after starting to think about the different visual variables we can use to characterize our words, and then connecting these back to the semantic differentials, I feel more confident about my ability to move forward in this project and develop my understanding of my words.
1/22/18
close (adj.)
Movement: I began thinking about the movement of the word close with the image of a lot of small items being packed together in a cramped place. The way that I represented this was mostly by keeping the letters in the word together, and repeating the word in a tight space to create that feeling of tension and claustrophobia that a cluttered space with many small objects can elicit. Next, I thought about using the individual letters in the word to evoke that feeling. I think the main difference between these two methods is the scale and the feeling that results from this difference. With the second method, the letters hold more weight and evoke more of a feeling of larger objects being smushed because of closeness. I will continue to explore the difference between these two feelings and whether I need to choose one, or if i can merge them together by having a dynamic scale in my video. As I write this, I am imagining the larger letters coming together and smushing each other until the words shrink, and then become a representation of a cluttered space.
Color: With my semantic differentials, one of the dichotomies I chose was cold/warm, and I put the word close towards the warmer size because I imagined the heat that emerges from bodies being close together, or from a lack of open space in general. Going with this idea, I began making color triads based on warm colors. I ended up choosing a lot of soft colors and pastels, because on the scale of soft/hard, I think of closeness as being softer and lighter. I am not sure how this image works with my previous vision of tension and claustrophobia, and I think I may have to make some of the colors more saturated once I start working with motion more.
close(verb)
Movement: The movement that I immediately thought of was the closing of something with a hinge, and I started thinking about how to represent this with only letters. Again, I found that I could either try to do this within the word, or within the letters themselves. I feel most excited about the exploration seen below in which I divide each letter in half, and rotate the top half so that it looks like there is a hinge, and then through diagonal motion the letters can close. I am excited to get to the stage of animation with this and see if my vision is fulfilling.
Color: One of the semantic differentials I used for this word was happy/sad and I placed it more towards the sad side because I felt like a closing of a business is a sad occasion, and a closed door can seem harsh/uninviting. I associated sad with blue, so I started with this, and then began moving on to other muted, more saturated colors that felt hard and slightly dull. I also chose to start one of my triads with red, based on the sign that says “sorry we’re closed” that I put in an earlier entry when I was finding examples of my word.
1/23/18 — Takeaways from in class critique
Something that we discussed in class that stuck with me was the idea of not revealing everything about a word through its typeface in order to achieve an element of surprise. While its important to identify which typefaces might do the best job of evoking the feeling of my words, I might end up choosing a different one so that the full meaning isn’t given away from the start. With this, the idea of using multiple faces or changing the typeface over time was also introduced. With this idea, I began thinking about the adjective form of my word, close, and how I could make the letters denser and closer together over time in order to evoke the feeling of the word through type with a slow reveal.
We also talked about how to differentiate the two words, and to what extent it is necessary to use different fonts and color schemes. I think that the class generally came to the consensus that in some cases it would be ok to use similar typefaces or color schemes, but that the motion should clearly differentiate the two words. My take on this is that if it makes sense, or if the two words actually are similar, then this would be fine, but I thought that if the words actually are very different then they should be fully differentiated through all visual variables.
Finally, we talked about how moving forward, it is important to be clear in our intentions in defining our words, and to narrow down our meanings to a very specific definition. With the verb close, I decided that I wanted to focus on the motion of an object with hinges — like a door, a book, etc. With the adjective, my definition was a little less decisive, and I am still working on narrowing it down, but I am definitely planning to try to evoke a feeling of crowdedness and the idea of a lot of objects or people in a tight space. Going back to when I first found examples of my words, and I used a clip of the sounds of a crowded place with a lot of people talking, I was thinking about how I could use the noise of people talking to indicate this feeling of closeness that I am trying to achieve.
1/24/18 — Considering variables over time
close (adj.)
Type: I started thinking about type over time by considering how the font could transition to become more dense and compact over time, as the letters also got closer together. I decided to choose three different types of fonts that would range from light and round letters to heavy and condensed letters.
Colors: I decided to focus on warm colors, and to make them more saturated and darker over time. I thought that a transition from light, unsaturated colors to darker, more saturated ones would show an increase in density and would represent the presence of many things.
close (verb)
Type: I decided to choose the typeface Copperplate because I saw the small glyphic serifs as representative of a place where two ends could meet to open and close, and I envisioned using these properties with my narrative of closing. I decided that over time, ends of the letters would close, and then close in on themselves by condensing horizontally until they become just a line. In order to do this successfully I thought that the weight of the type should transition from light to heavy, and then turn into the line.
Color: I thought of warm colors as a sign of activity and life, things that would occur in a place that is open; and conversely, I thought of blue and darker colors as symbols of a place that is untouched by life, and is closed. For this reason, I thought of the idea of using colors like red and yellow in the beginning and then as soon as the closing motion is complete, the letters would instantly switch to blue or black.
1/28/18 — Starting to create
close (adj.)
I decided to start making my interaction on Axure based on my plan that is detailed in my updated 11x17. The main problem that I encountered was that Axure does not have an option to alter text color/weight with on-click actions, and this was the basis of my plan. Because of this, I made something very simple to represent my ideas, and during our workday on Tuesday I plan to try to work around this obstacle, and to ask for help from profs/TAs in terms of working with Axure.
close (verb)
Again, I decided to try to actualize my vision of the C closing in on itself, and I did this in Aftereffects with the plan to bring the gif into Axure and add interactions eventually. This sketch turned out pretty rough and I couldn’t figure out how to do exactly what I imagined in my head, but I think it was an ok start and that I can begin to move my idea in other directions going forward.
1/30/18
I spoke to Stacie at the beginning of class and this was helpful because she got me to start thinking about how to take my ideas a step further in order to make the viewing/interacting experience immersive for my audience. From this conversation, I think I have a much better idea of where I will go for the adjective version of close, but I am still struggling a little with the verb. For the verb close, I think I need to take a step back and explore possible closing motions a little more, because my initial idea didn’t work out exactly as I imagined, and did not incorporate all of the letters of my word (which I know is not necessary, but should at least be explored before making the decision not to include).
Taking a step back, doing more exploration
In the lab part of class, we also worked with Andrew to troubleshoot some of our problems with Axure. I found this very helpful and feel better about moving forward with the program and with my concepts.
1/31/18
close (adj)
I started with the adjective because I felt a lot more confident about my ideas, and I spent a couple hours making this prototype in Axure.
The main problem that I see with this prototype is that when I use it, I know where to hover, and so it seems smooth and everything goes as planned, but when other people try it, they don’t necessarily know where to hover and it could become frustrating/disengaging if the user does not trigger any movements for a couple seconds. I tried to address this idea by using color and having the letters that should be hovered over at a low saturation, and then as they move together and are hovered over, the letters grow bigger and the colors become more saturated, and other letters that still need to be hovered over remain desaturated until the user does what I want them to do. I tried this out on a couple people and it worked to some extent. At the beginning, they usually didn’t know exactly what I wanted them to do and hovering over some letters repeatedly would lead to a dead end, but eventually they would just move the mouse around over the grouping of letters and this would cause the changes to occur. I think I need to find a way to make it so that people don’t necessarily want to follow the letters that move, but instead want to hover over each letter once and then move on to different ones.
close (verb)
Since I was struggling more with this word, I made something somewhat simple with minimal interaction to begin to visualize my ideas.
I feel pretty good about this as a very rough sketch, considering that I was feeling pretty lost when I started, but I feel like I need some feedback in order to figure out how to move it forward and make it more engaging. I also need to start considering sound, and recall how to do this in Axure.
2/1/18
I talked to Stacie about my updated prototypes and received some good advice.
With the adjective, I think the main thing I need to work on is having some set of rules/logic and maybe using people as metaphors to construct these rules. For example, people don’t magically appear, they don’t change color, etc. But they do move around, possibly change in size by getting closer to the viewer, etc. This would probably help the user to know what to do with the mouse and what letters to try to move.
With the verb, the main things I need to focus on are transitions and using negative space to my advantage. In a way, I realized that I am farther along with the verb than I thought I was, and less far with the adjective. I think that the verb is a little more straightforward, while the adjective has more nuances. Going forward for Tuesday’s crit, I am going to work on iterating on these ideas as well as trying to add sound.
2/5/18
close (adj.)
I started experimenting with the idea of having the letters wiggle to indicate interaction, and the main problem that I found with this was that I couldn’t figure out how to make them stop moving immediately so that only one letter would be moving at the same time. For some reason, it takes a few seconds for the letter to stop moving around when I tried to make it stop moving, so it ends up that multiple letters are wiggling at the same time and this makes the interaction less clear. For now, I decided to move on from this issue and try to get help with fixing it later. I also encountered some other technical difficulties with Axure but I eventually figured most of them out. I tried to follow Stacie’s advice of exaggerating the size of the letters as they crowded in and using people as a metaphor, and I decided to bring in the letters to spell out close at the end so the word would be more clear.
close (verb)
I tried to experiment more with where to go after the O closes, and how to move around the C, L, S, E. I think what I ended up doing didn’t really make sense because I tried really hard to make a circle close in on letters in Axure but couldn’t figure out how, and instead I put a circle over the C, L, S, E, then closed in on them with a square. Honestly I don’t really know what I was doing and probably need to change this. I am somewhat satisfied with the opening sequence but not sure where to take it.
2/6/18
In class today, we walked around and saw everyone’s interactions and gave them feedback. It was good to see other people’s because I really saw a range of different levels of completion and idea development. A couple looked like they were basically done, but a lot of people were struggling and this made me feel better about my own struggle. Even though this was the case, it seemed like most people at least had pretty developed ideas, and just needed to work on the execution. For my adjective, I feel that this is where I’m at, but for my verb, I keep on needing to rethink what I am doing.
close (adj) feedback
The main feedback I got (that was repeated a lot throughout the sheets) was:
- the interaction is unclear
- the movements are too aggressive/should be more subtle
- at the end, there is not enough resolve because the letters are still moving around
What I am going to do to improve and respond to this feedback is:
- Try to figure out this Axure problem that causes multiple letters to wiggle at the same time. Hopefully this will make the interaction somewhat more clear. I am also considering trying to create a “main character” that is always moving and just gets bigger and moves to the foreground over time, so the user always knows to click on the same letter.
- Make the wiggling more subtle.
- Make the letters — specifically the ones that spell out close in the foreground — stop moving at the end, but maybe have some of the letters in the background still slowly moving towards the center, because my reasoning for the moving around was to simulate a crowded room, and generally people in a crowded room aren’t standing completely still, but at the same time I understand how this effect made people feel like there was no resolve. Eventually though, I think there needs to be a standstill.
close (verb) feedback
The main feedback I got (that was repeated a lot throughout the sheets) was:
- The second part doesn’t make sense!
Most people didn’t really comment on the first part or just said it was effective because of how unclear the second part was. I realize this, and I definitely am going to get rid of it, but I think I also need to rethink the beginning too. I was pretty satisfied with the first three movements, but I spoke with Lily and she said that the only part that really made sense was the hinge of the O closing. Even though I was trying to use multiple closing metaphors to make my piece interesting, I think I might need to go back and just focus on the hinge, and bringing the letters together to spell the word. When I spoke to Lily, she brought up the idea of having a main character that causes the letters with hinges to close , and I think I am starting to develop very vague ideas about the possibility of this but it still needs a lot of work.
Overall, I feel kind of discouraged just because I want to hold myself to a high standard and make work that is really satisfying, but it is really hard to get to that point. I know this is the process and that nothing is actually easy/obvious to make but when seeing some of the really successful ones in class today they just seemed like the obvious, correct solutions. I am also kind of stressed about doing all of this and adding sound, because I don’t really remember how to add sound so I know I need to do this before Thursday so I can get help if it doesn’t work.
2/7/18
close (adj.)
I decided to go with the idea of having a main character with the hope that it would make the interaction more clear. The other feedback I got was pretty straightforward so I just made some small changes like making the pulsating of the letter I want the user to click on more subtle, and having the letters slowly move inwards until they become completely still at the end, so that there is more of a sense of resolve. I also added sound and I think this helped to communicate the feeling of closeness and crowdedness that I was trying to achieve.
close (verb)
Again, I thought that thinking of one of the letters as a main character would enhance the clearness of my interaction. Since I was basically getting rid of most of my ideas and stepping back to having only one movement developed already, I tried to make my ideas more simple. Not only for myself, but for other people and the class in general too, I have been thinking about how a lot of problems with the interactions could be solved by doing something simple well, rather than trying to make something complicated and intricate out of a word that is already simple, in the hopes of making the animation more interesting. I guess this was my thinking at the beginning too, but with this new version of my interaction, I have tried to go back to something that is more clear and relates directly to my word. I feel pretty good about this prototype and I am working on adding sound to enhance it.
2/8/18
Today in class, I worked on adding sound to my close (verb) video and I received feedback on my two words. For close (adj.), Stacie asked my why I chose the C as the main character and gave me the idea to use the O as the main character instead so that all the letters can move towards it/the center of the piece. There were also some other minor details that need to be fine tuned like the speed of the letters coming in and the way that the C moves back and forth. For close (verb), by the time I got feedback, I had added sound, and this made the interaction a lot more satisfying. The main feedback I got was that the way the letters fall into place doesn’t fit in with the rest of the movements, but I also got some other minor feedback like with the adjective, to adjust grid lines and make sure everything is aligned well. I feel pretty good about both of my interactions and I know what I am going to do to make the pieces feel finished.
2/11/18
close (adj.)
I made the changes that I talked about on Thursday and here is my final interaction:
close (verb)
I wanted to try to fix the possible issue of the final movement of the letters not fitting in, but I really could not find a solution that wouldn’t hinder the rest of my movements because of the specific positions and qualities of the letters. I decided to keep it because I didn’t think it was a huge problem, but I also fixed the alignments so that the positions would be more precise. This is the final: