Senior Design Conclusion

Thesis Presentations

I really enjoyed listening to these senior thesis. You can tell that most of them did a lot of research and it was impressive. There were a wide range of topics and I look forward to seeing their senior projects. Tony recommended that we look at their bibliographies to learn more about their research and subject matter.

Candy - Manual Designs. Candy was very professional in her presentation. She was knowledgeable with answers to questions. I took a good page of notes to use for the future. It was like being at a conference with a speaker.

Corina - Kinetic Typography. Corina had a myriad of examples to reinforce her topic and also included videos that synced with her speech. I felt that she put careful thought and precision in her presentation material. The body type was in all caps and was hard to read on her power-points.

Kelsey - Science Fiction. Kelsey's presentation focused on understanding the theories of distopias and utopian used in television. Fandoms, icons and examples were included. I especially liked her comment regarding the culture of fandoms, "I get you." Referring to how fandoms form groups and relate to each other because they can share a common experience. The science fiction fad of nerds being popular (ironically and asynonymous) was part of her research.

Alan - Understanding Virtual Reality Uses. I felt that Alan's presentation lacked focus and content. It seems like a good topic but I couldn't understand where he was going with it. It was an awkward presentation that needed practice to aid in confidence.

Unit 10: How People Decide

When reading this unit I recalled a Christmas purchase I made at Costco for a blu-ray player. I used my smart phone to look up reviews to help/research my decision process, johnny on the spot so to speak. #100 speaks directly to this scenario by pointing out that people prefer to see what they're purchasing before they buy. I think this is especially true for big purchases and less likely for smaller monetary purchases, like books or DVDs.

People want more choices and information than they can process," is something I can relate to. I research the heck out of things when I make a major process and even ask friends and family for input. The research of The Art of Choosing, where jars of jam were put on a table, is reminiscent of grocery stores setting up tables and offering samples. Again Costco is a prime example of this. They offer only one sample per table but have numerous product tables throughout the store.

Other noteworthy tidbits included (and self-explanatory in their titles):

• "People Think Choice Equals Control" - so true for us humans! "The desire to control the environment is built into us." 
• Mood influences the decision-making decisions
• Time is worth more than money
• Group decision making can be faulty

Senior Thesis Links

Since choosing my topic (Social TV, second screen, smart TV) I have noticed several television shows advertising second screen enhancements; among them are: Psych and The Walking Dead. Marvel has even gotten "into the game" with an app for Avengers to watch while viewing the film.

Psych
Following up on the tremendous success of the award-winning ‘Hashtag Killer,’ USA’s Psych has just launched ‘The S#cial Sector’, an eight-week multi-platform murder mystery. Directed by Kirsten Nelson (co-star Chief Vick), the competition can be accessed via desktop or tablet at SocialSector.usanetwork.com and Tweeted using #SocialSector. [Source: Lost Remote]

USA Network is crediting a second-screen experience for helping boost the audience for "Psych" by 10%. The network created the interactive murder mystery game ahead of the series' season debut, adding new plot twists and clues via its website, Facebook and Twitter. The game resulted in 99% of "Psych's" Facebook fans saying they screened the premiere live or the following day. Also, some 5% of those who took part in the game didn't know about the show but opted to tune in for the first time. [Source: Smart Brief]

Following the success of the Emmy-nominated game Hashtag Killer, PSYCH The S#cial Sector is a multiplatform game that allows fans of the series Psych to upload video content, play games, examine evidence, and post to a theory wall for the entire 8-week duration of the mystery. By interacting via computer or tablet, players can become active by using SocialSector.usanetwork.com or by tweeting using #SocialSector, all to help Shawn and Gus solve their latest mystery. [Source: gco]

USA Network Psych - has an engaging website and a section called "USA Sync"

WATCH LIVE AND PLAY ALONG!

Join LIVE when you watch select USA shows* and enjoy the USA Sync experience! As a show airs, you will get behind-the-scenes production notes and photos, video clips, polls and quizzes, and great commentary - all timed to the show's action.

When you see there is a Sync event for your favorite show, just go tosync.usanetwork.com from any device, or tap the show in the USA Anywhere app. To get the full experience, you have to watch LIVE! Sync up and experience your favorite USA shows in a whole new way.

Walking Dead

Not as intuitive as Psych's website. There's a section that includes apps and games to engage the viewer. One app uses social networking, via Facebook, to play games.

Unit 9: People Make Mistakes

This chapter was very short but emphasized to the why, how and what of people making mistakes. Of particular note - at least to me - was the age statements: "older adults complete tasks differently than younger adults." "Kang and Yoon found no difference in completion rates for tasks due to age, but older adults... used different strategies than younger adults." In addition, the type of errors, errors under duress, predictable types of errors and not all mistakes are bad, are especially useful tools of information that web developers and designers should keep in mind when creating forms and event sequences. Understanding the intended audience and designing for them is a key component to successful engagement.

Unit 8: How People Feel

I really liked seven basic emotions are universal. It proves that no matter the ethnic group, we're all the same! And taking something so elementary - facial expressions - is truly poignant in my opinion. Basic Seven: joy, sadness, contempt, fear, disgust, surprise, and anger. It explains how we all resonant with one another when seeing tragedy hit another nation.

One of the tactics I recently employed for a presentation came from #74 - anecdotes persuade more than data. During a nutritional science presentation, I related my own story in relation to researching the topic of magnesium. I think this successfully engaged the audience in a topic that would otherwise be too factual and boring.

Other topics I found interesting were:

1. People are happy when busy: "idle hands are the devil's work" as the saying goes! However, I don't think this is what the author's intentions is on this one. I think this comes down to people don't like to be kept waiting without a useful task to engage them.
2. People enjoy surprises: I somewhat disagree but maybe because most of my surprises aren't always good ones. However, I do enjoy receiving birthday cards and wrapped presents. Sometimes, the guessing of what's in the envelope or package is more exciting than the actual gift!
3. People want what is familiar when they're sad or scared - ain't it the truth! I picture my brother with his favorite blanket, my daughter who still has her Winnie the Pooh and myself seeking asylum when experiencing a panic attack. For some it's a tactile sensation, or something to hug and feel comforted, for others it might be a place that recalls happy times.  

DEFINITIONS

Amygdala versus thalamus: "the thalamus is the part of the brain between the cerebral cortex and the midbrain;" with the exception of smell, all sensory data is routed through the thalamus. The amygdala is "where emotional information is processed;"smell goes straight to the amygdala bypassing the thalamus. This is why some smells can trigger an emotional response. The smell of chocolate chip cookies baking might remind you of home, for instance.

Nucleus accumbens: "the part of the brain that is active when people experience pleasurable events."

Attention Restoration Theory: "asserts that people can concentrate better after spending time in nature, or even looking at scenes of nature" [Wikipedia]. There's a nice article on this at Pacific Standard Magazine, titled Thoreau was Right: Nature Hones the Mind: "A long line of the world’s thinkers — from Immanuel Kant to William James to Deepak Chopra — have recommended we take walks in nature to relieve stress and refocus our thoughts. And nature writers — from Henry David Thoreau to John Muir to Edward Abbey — have extolled the restorative benefits of nature."

“Everybody,” Muir said, “needs beauty as well as bread, places to play in and pray in, where nature may heal and give strength to body and soul.” 

Muir Woods National Monument, California

Responsive Web Design Hotlinks

A List Apart by Ethan Marcotte
HTML5 Responsive Web Design, MSDN Magazine
Responsive Web Design: What It Is and How to Use It, Smashing Magazine
Beginner's Guide to Responsive Web Design, treehouse blog
Where to Start by Trent Walton
Content Choreography by Trent Walton

Final Thesis Proposal and Bibliography

Digital Media’s Future
In the past, technology has played a major role in helping humans interact socially: telegraph, telephone, photography, cinema, cell phones, tablets. And in this current day and age, one would wonder how much more advanced can we get? Recent studies are showing that a growing trend towards integrating TV and social media devices are the next big thing. This technology includes Social TV, Second-screen Viewing, Smart TV and a twist on Over-the-top content.

The compilations below are direct quotes of studies and resources regarding the topic.

Social TV*: a way to seamlessly combine the social networks that are boosting TV ratings with the more passive experience of traditional TV viewing; a thriving social ecosystem.

Second Screen*: an additional electronic device (e.g. tablet,smartphone) that allows a television audience to interact with the content they are consuming, such as TV shows, movies, music, or video games. Extra data is displayed on a portable device synchronized with the content being viewed on television.

Smart TV*: describes a trend of integration of the Internet and Web 2.0 features into television sets and set-top boxes, as well as the technological convergence between computers and these television sets / set-top boxes. The devices have a higher focus on online interactive media, Internet TV, over-the-top content, as well as on-demand streaming media.

The viewership for live television broadcasts has generally been declining for years. But something surprising is happening: events such as the winter Olympics and the Grammys are drawing more viewers and more buzz. The rebound is happening at least in part because of new viewing habits: while people watch, they are using smart phones or laptops to swap texts, tweets, and status updates about celebrities, characters, and even commercials.[7] Recent studies have shown that somewhere between 75-85% of TV viewers are using other devices while watching TV.  [1]

Of these multi-screeners, how many are actually using their second device to look for something relating to the show they're watching? Somewhere between 37% and 52%, while between 27% and 44% are browsing for products spotted in a show or ad, depending which survey you believe. More than a fifth of TV viewers are chatting on Facebook or Twitter about the shows they're watching. [1]

Opening TV to social networking could make it easier for companies to provide personalized programming by uniting different communication systems. [7] Social media is growing furiously as a driver of television programming and it’s being influenced by what our friends and family are Facebooking and tweeting about. Content can be created that drives viewers to YouTube, the show’s site and company sites in order to get more information, engage with other show viewers and connect with the characters. [11]

Bibliography and Resources

1. Social TV and Second-screen Biewing: The stats in 2012 [online article]
2. Winning the OTT War: Strategies for Sustainable Growth [online article]
3. How to Setup and Run Internet TV Systems: OTT Technology, Services, and Operation [book]
4. OTTtv World Summit Conference [online resource]
5. Wikipedia: Over-the-top Content [online article]
6. Wikipedia: Smart TV [online article]
7. Wikipedia: Social Television [online article]
8. MIT Technology Review: TR10: Social TV [online article]
9. Social TV: How Marketers can Reach and Engage Audiences by Connecting Television to the Web, Social Media, and Mobile [book]
10. Screen Future: The Future of Entertainment, Computing and the Devices We Love [book]
11. Lost Remote: The Home of Social TV [online resource - charts, directory and articles]
12. What Social TV Means for Marketers [online article and slides]
13. Why Social Media is critical to the future of TV [online article]
14. We First: How Brands and Consumers Use Social Media to Build a Better World [book]
15. U.S. Consumers receptive to social media appearing on their TV screens, according to Accenture study [online article with research]
16. Trend Watch: We’re using our cell phone while watching TV [online article]
17. Mobile Development Resources [slideshow]
18. Ball State Study of Second Screen
19. Neilson Study finds Second Screen enhances TV Experience

*definitions from Wikipedia

Unit 7: People Are Social Animals

I wasn't surprised by the information presented in this chapter. I've often observed social behavior in public - people in grocery stores stand in front of you, for instance or engage in conversation. Ever get stopped on a highway because of an accident? I have - in Florida - we all got out of our cars and communicated with one another about what could be happening. Social behavior might even explain the cell phone obsession as well - the constant need to stay in touch with those in our "tribe."

As with previous chapters, the author presents the information in a very succinct manner and I really enjoy the correlations she uses with each bullet point. Shortly after reading this chapter I was flipping through channels and stopped on Searching for Bigfoot, mostly out of curiosity that folks are spending their time and energy on a subject that comes from folklore. The interesting thing was the recounting of a "witness" who says he saw Bigfoot in his bedroom window and when he went to the window Bigfoot imitated his facial expressions. The host explains that this is typical behavior for Bigfoot(s?) - they're very curious. Although the whole scene was like watching a play, it made me think of #64, People are Hard-Wired for Imitation and Empathy where the author addresses mirror neurons. Mirror Neurons began in infancy and are shared by other species - it's when we mimic the other person's facial expressions and recent theories suggest it may be how we empathize with another person - these neurons seem to sync when a person or audience is focused on the speaker. This bleeds into the topic of synchronous activity - when groups perform a ritual together they bond. Kind of like a collective or hive. For me it's synonymous with church rituals or cults!

Dunbar’s Number: "We are the product of our evolutionary history and this colours our everyday lives - including the number of friends we can have. Robin Dunbar, Professor of Evolutionary Anthropology at the University of Oxford, says 150 is the maximum number of friendships that the human mind is capable of handling. 'Dunbar's number', as it is known, even applies to the Facebook generation. Professor Dunbar concludes that the volume of the neocortex region of our brain, used for language and thought, limits the number of friends we can maintain. He argues this number has not changed much throughout history and applies in the same way on the web as it does in real life."  - excerpts from the University of Oxford's book review How Many Friends Does One Person Need.

The bullet point that was especially poignant to me was #70, Laughter Bonds People Together. A few days prior to reading this chapter, I had just attended "Jump Start" with a group of web students from AIS. A small group of us met before and after the event and shared stories and laughter over food and drinks. Driving home afterwards - it's an hour drive for me - I reflected on our time together, thinking of the stories we shared and feeling happy about the evening and noticed that I was genuinely smiling. You can't fake a genuine smile, you really can't. People know, they see it in your eyes, your forehead, your cheek muscles, even your whole body posture. It's more obvious in person as well as videos, but lesser so in photos. In a psychology class at AIS we took a test, on BBC Science & Nature, and tried to guess if the person was really smiling - we got a few wrong!

Demonstration of the mechanics
of facial expression. Duchenne and
an assistant faradizethe mimetic
muscles of  "The Old Man."

Duchenne smile: Guillaume Duchenne was a French doctor who experimented with electrical currents to see which muscles controlled a genuine smile. He discovered that there were two major muscle groups: the zygomatic which raises the corners of the mouth; and, the orbicularis oculi muscle which raises the cheeks and makes the eyes crinkle. "Smiles that contract both of these muscles groups are called Duchenne smiles" - from #71, 100 Things Every Designer Needs to Know About People.

P3 Schedule

Week 6: Research and tutorials

Week 7: Rough sketches in Photoshop - get the feel of drawing with pen in Photoshop.

Week 8: Import first half of video and begin rotoscoping

Week 9:  Import second half of video and rotoscope

Week 10: Preliminary Critique. Add titles and polish in AfterEffects for final.

Week 11: Final due

Unit 6: What Motivates People

With #50, People Get Motivated as They Get Closer to a Goal,  I was reminded of my Taco del Mar punch card - it's the one I get the most satisfaction from. I have other cards but they're really just taking up space in my wallet. I think it's ironic that with my Taco del Mar card I get really excited when I earn the $5 reward - and in reality I've spent $5 ten times to earn the $5 reward! However, it is obtainable and I get another card when I redeem my award, so it keeps on giving. In addition, since food is a basic necessity I'm most likely to use it.

#51 - Variable Rewards are Powerful. I get the overall concept of the reward scenario but wasn't totally sold on the author's take. However, I did find an article online that drives it home for web designers, Want to Hook Your Users? In the article, by Nir Eyal, she speaks of desire engines and links it to dopamine:  "Humans, like the mice in Skinner’s box, crave predictability and struggle to find patterns, even when none exist. Variability is the brain’s cognitive nemesis and our minds make deduction of cause and effect a priority over other functions like self-control and moderation." Many of the points in Eyal's articles reinforces and correlates to 100 Things.

Maybe I'm simple-minded, but using the terms intrinsic and extrinsic in #54 just didn't stick for me. I get stuck on the definition of the terms rather than focusing on the concept. Livestrong.com (one of my favorite websites) has a great article on the subject, The Difference Between Intrinsic Motivation and Extrinsic Motivation... "If you understand the distinction between intrinsic and extrinsic motivational factors, you have a greater probability of motivating yourself or others. Every behavior has a underlying cause, and understanding the cause of behavior and motivating factors is key to changing or improving outcomes. The differences between intrinsic and extrinsic motivators primarily lie within the reason for doing something. In order for you to ultimately change or improve behavior, you have to understand the reason for the behavior." That I get!

One of the pages I dog-eared in this chapter was page 27, #55 People Are Motivated by Progress, Mastery and Control, simply because I wanted to look up Daniel Pink's book, Drive. I watched the video mentioned in the book, The surprising truth about what motivates us" and really enjoyed it. Not only are the illustrations fascinating but they drive home the points that Pink makes and adds humor for the audience to engage and remember. In reference to rewards Pink states in his video, "For simple, straight forward task, if you do this then you get that, they're great. But when a task gets complicated, when it requires some conceptual, creative thinking, they simple do not work. If you want engagement self-directed is better (in the workplace)." Pink's video addresses autonomy, mastery, that we're "purpose maxi-misers" and self-motivated.

Unfortunately the Marshmallow Experiment video is no longer available on youtube due to a copyright infringement issue, but can be found instead at Igniter Media. Love it - you can see the kids struggle on their faces! Gratification delay starts young - so obvious with the red-headed little girl who eats the marshmallow instantly vs. the boy who waits enduringly for the gratification of getting a second marshmallow. Wouldn't it be great if everyone took this test at an early age and we knew what type of person we (or they) were?

Unit 5: How People Focus Their Attention

• Attention is selective: if a person is given a directive before reading text their focus will be on the direction given, "read only the bold text in this paragraph," for example. Selective Attention can filter out other stimuli and focus on the task at hand. Don't expect this focused attention to last too long however.  Of particular note is what humans inherently focus on: food, sex and danger. The author points out that selective attention is a genetic inheritance from days gone by where we needed food to survive, had to watch for danger to survive, and sex to continue our race.
• Sounds can gain attention but should only be used for alerts. When a sound or behavior is repeated, a user will become accustomed to it and ignore it.
• Sustained attention can only last 10 minutes.
• Mental Model of Frequency: signal if it's infrequent or important. Like sounds an indicator that is stressing importance should be used for alerts.
• People do not multitask.

Hotlinks
Signal Detection Theory
Only 2% of People can Multitask Successfully - Infographic
Humans Have Three Brains

Unit 4: How People Think

Overall I found this chapter very intriguing. I've dog-eared a few of the pages for future exploration, such as reading Don't Make Me Think by Steve Krug. In many ways the bullet points in this chapter are common sense but the author gives further introspective and relates case studies for each point.

Progressive disclosure: giving information in small chunks and progressively allowing the user to click for detailed information. While this may add more clicks, if the information is presented in the right way the user won't even notice the amount of clicks as they "progress" through the information. It gives overview information up front, broader information on one click and even more detailed information on another click, allowing the user to decide how much they want to explore.

Loads: mental processes going on simultaneously. There are three types: cognitive, visual, and motor. Cognitive requires the greatest mental resource, with visual and motor following in sequential order. If you ask a user to remember something, you've engaged their "visual" load; looking at something on the screen, "visual;" and a "motor" resource is asking a user to click on something. Designing a website requires a fine balance of loads so that one load isn't over - "loading" the user.

I love #29, "minds wander 30 percent of the time!" It makes me feel so much better about daydreaming in elementary and high school. However, the author focus on this point was "mind wandering." Mind wandering is when someone is focused on a task, for example driving, but is able to use another part of the brain to process information, i.e. when should I stop for gas, make an appointment, etc. 

Mental vs. Conceptual Models: a mental model is what a person perceives in their mind about an object, a visual representation; whereas, a conceptual model is the actual object, device, or user interface presented to a person. A designer needs to be aware of both these models to understand how users respond and interact to a product. If a user has a strong mental model of an interface, for example, but is presented with a conceptual model that is "beyond the norm" than this would result in confusion and frustration to the user.

Step by step instructions are a great tool, but interspersing them with graphic examples are the best way to engage a user.

"People love to categorize," so true! The author points out that children don't really start to group things until they're seven years old but that humans have an inherent ability to categorize things. We look for certain patterns that we're familiar with to understand elements. If a structure isn't present than we organize them ourselves.

Now #37 was the most interesting to me: four ways to be creative:

• deliberate and cognitive: comes from sustained work in a discipline, uses the prefrontal cortex, makes connections among bits of information you've stored in other parts of your brain.
• deliberate and emotional: "aha" moments sparked by stressful or life-changing events. The deliberate part uses the prefrontal cortex, the emotional part uses the amygdala where feelings are stored and the cingulate cortex that deals with complex feelings. The cingulate cortex is connected to the prefrontal cortex.
• spontaneous and cognitive: kind of like "sleeping on it" or "percolating" as I like to call it. It's when you are so focused on something that you can't solve the problem. But taking a break from it consciously allows your subconscious to take over. It uses the basal ganglia of the brain where dopamine is stored. Its the part of the brain that operates outside of your conscious awareness but requires an existing body of knowledge.
• spontaneous and emotional: comes from the amygdala where basic emotions are processed. This is the type of creativity that musicians and artist possess. No specific knowledge base is required but great skill is needed.

More on dompamine:

Creativity is the human capital one often says, especially in times of economic crises. And yet, very little is known about how creativity works (Sternberg, Kaufman,& Pretz, 2002), which severely limits our possibilities to systematically develop that capital. To a substantial degree the lack of convergent theorizing on creativity has to do with disagreements on how to define it (by the processesunderlying creativity vs. the products it brings about) and how to measure it (see Brown, 1989; Runco, 2007). Moreover, there is increasing evidence that truly creative acts do not reflect the operation of just one process, brain area, or faculty but, rather, the interplay of multiple cognitive processes and neural networks (e.g., Dietrich, 2004; Eysenck, 1993; Heilman, 2005). This raises the question of how this interplay is orchestrated, and there are reasons to believe that the neurotransmitter dopamine (DA) plays an important role in that. [Source: Cognition] 

Goal gradient effect: examples include punch cards, "breadcrumbs" on websites. Giving the user an "illusion of progress" (Susan Weinschenk's blog). Also referred to as "flow state," it's when a person forgets everything else and is focused on the task at hand. To achieve this state requires: focused attention, achievable goal, constant feedback, control, safe environment, personal state of mind. I often enter a "flow" state when I'm coding websites. I lose all sense of time and can spend hours on a project and not even realize it. My safe environments are at home and at school. Every action I take in code gives me instant feedback when viewed on a web browser. The goal gradient effect is cross-cultural and uses the prefrontal cortex and basal ganglia.

Operant Condition: coined by behaviorist B.F. Skinner, referred to operant as "active behavior that operates upon the environment to generate consequences" (Skinner). It's the learned behaviors we acquire every day. Reward and punishment- type scenarios. Good behavior reaps rewards and bad behavior reaps consequences.

Responsive Design Workshop

What Is Responsive Design and Why Should You Care?
Graphic Artists Guild Workshop
February 27
EAFA Gallery at the Seattle Design Center, Suite 292
$10

Contest Information

The Creativity 43 Media & Interactive Competition begins accepting entries January 18, 2013 and the deadline is April 11, 2013.

Media & Interactive Entry Fees are $95 per single entry, $125 per campaign entry. All Film & Video entries are $125 ea. Students receive a $50 discount on all entry fees.

Ad agencies, publishers, developers, graphic designers, photographers, freelance designers, illustrators, programmers, marketers, producers, directors, web designers and corporate art departments may submit entries that first appeared online or was broadcast between January 1, 2012 and December 31, 2012 (Media & Interactive) or in print between June 1, 2012 and May 31, 2013 (Print & Packaging) (void where prohibited). Student work must have been created during the 2012-2013 school year. Instructors and professors may submit work on behalf of a student. Student work will be evaluated separately from professional work. Anyone involved with the creation of the advertisement or design work may submit the entry.

For Internet/Interactive Media please submit url addresses. Judging will be done online using the url whenever possible so please ensure the link is active and does not require any username or passwords for access. If usernames/passwords are unavoidable, please include in the "url" line of the entry form. Dead or unusable links will disqualify the entry. 

Laser Cutting Session

This was definitely worthwhile to attend. It's so exciting to know that we have this resource at school. I'm itching to create something that I can "print" on it! I'm thinking something for portfolio day.

Thesis Meeting with Tony

I met with Tony regarding my senior thesis and cumulative project to accompany it. My ideas were:

1. Flash is Gone, Now HTML5 and project would incorporate HTML5 elements
2. Consumerism vs. Sustainability, project would be a website displaying a company's involvement in sustainability
3. Future of Digital Media - OTT, a website, app and TV program that interact and support the product

The final outcome was #3 as my focus for senior thesis. It is one that will challenge my skills, demonstrate knowledge of branding, and can incorporate Ideas 1 and 2 in it. I'm looking forward to working on this.

P1 Final

Justifying Parallax Scrolling

Two of my colleagues at school questioned the use of parallax scrolling. I came across an article, "Parallax Scrolling Scripts and Plugins" by Louis Lazarus at Impressive Webs,  that I think substantiates its use. Lazarus includes links to scripts and plug-ins and says, "I think this type of site is certainly a legitimate design and development option for many brands."

I feel that the increased use of mobile design - with its finger scrolling - substantiates parallax scrolling. It has the added benefit of allowing the user to keep their cursor in one spot and scroll, rather than hopping over to a menu and clicking.

Thesis Response 3

Victoria Weldon
I liked this thesis because it was easy to read and flowed nicely. And, of course the topic intrigued me as well.  The viewpoint that marketing has targeted women over the last two centuries isn't a new concept but Victoria correlated our economic and social eras with that of women's role in U.S. culture. Her research was evident and thorough. I especially liked reading about the first female advertising agency established by Mathilde C. Weils as early as 1870. Victoria also reflected how advertising created stereotypes based on the social standing of the woman at given phases of our history:

• Industrial Revolution and Westward Migration
• Progressive Era and World War I
• Great Depression
• World War II

We went from the 1800s notion that woman didn't work outside the home to the 1920s when women were granted national suffrage. Victoria goes on to explain each phase in detail, cite references and gives examples in the changing roles of women and the parallel effect of the changes in advertising.

I'd like to look into the following passage:

“Advertising,” wrote one commentator in a trade publication, “helps to keep the masses dissatisfied with their mode of life, discontented with ugly things around them. Satisfied customers are not as profitable as discontented ones.” Advertisers, as historian Stuart Ewen notes, tried to endow people with a “critical self-consciousness.” (“chnm.gmu.edu”) (p 6).

as it may apply to a thesis idea floating in my head - consumerism vs. sustainability. 

Overall, I thoroughly enjoyed Victoria's paper and was able to read it, like a book you can't put down, to the end.

P1 Case Study and Presentation Week 4

P3 Tutorial Links

Frame by Frame - blog that posts stills and gif examples of frame by frame
Making Rotoscope Animation using Photoshop

Contests to Enter

43rd Media & Interactive Competition
Deadline: April 11, 2013
FV11 - Animated FilmCan be a long or short
Broadcast outlet is not specific
Must be completely animated
Project to Enter: P2 Rotoscoping Let's Move film

NM21 - Website, Public Service/Non-ProfitProject to Enter: P1 "It's Not Easy Being Green" for Save the Frogs using Parallax Scrolling and Interactivity

Communication Arts Interactive Competition
Currently Closed

W - Websites/Microsites
Websites used for any purpose (including advertising, news, e-commerce, education and entertainment, etc.) that utilize web browser-based technologies. Any interactive project created for digital distribution on disc, interactive kiosk, handheld device, online service or the World Wide Web is eligible.

Project to Enter: P3 HTML5 Canvas

Other contest to note:
National Web Design Contest - a team matching event

Project 2 Schedule

Week 3: Research and Tutorials

Week 4: Additional research and tutorials; Rough sketches

Week 5: Gather assets

Week 6: Reduce music video to one minute. Begin adding video clips to synchronize with music.

Week 7: Adjust video clips for consistent look.

Week 8: Add titles and polish in AfterEffects.

Week 9: Final due

Project 3 Proposal and Statement

Topic: Rotoscoping or Frame by Frame Animation

Rotoscoping is an animation technique that uses actual footage, say of a person, and then traces over the images frame by frame. The technique was invented by Max Fleischer in 1915 for a production he called "Out of the Inkwell, The Tantalizing Fly." I really like the piece towards the end [3:15] where the clown slips from the paper into the inkwell. One of my ideas was to take a M.C. Escher's print and make the image go from a 2D flat image on paper to a 3D image where the subject starts walking out of and around the paper.

Walt Disney used rotoscoping in the first full-length feature cartoon "Seven White and the Seven Dwarfs" in 1937. The technique was used mostly for the study of human movement rather than actual tracing. In the mid-1990s Bob Sabiston developed a computer-assisted "interpolated rotoscoping." Bob Sabiston was employed by Richard Linklater to create full-length features, "Waking Life" (2001) and "A Scanner Darkly" (2006).

My inspiration for this project came from AIS instructor, Bryan Schaeffer. He gave our class a brief introduction into rotoscoping and each week showed us the work he was doing on a personal project using the technique. Unfortunately, we weren't able to explore the technique in-depth due to time constraints. Bryan's final piece was a multimedia short titled "Looking to a Promising 2012." Bryan used Photoshop to create the rotoscoping animation. Since we weren't able to explore the technique in-depth it's my intent to learn more about it through this project.

Client:
Let's Move, First Lady Michelle Obama campaign for a healthier America

Target Market:
Kindergarten through high school aged children and their parents, caregivers and techers.

Assets:

• "Move Your Body" song by Beyonce
• Movie clips of children playing or participating in an activity

Process:

• Write script
• Create storyboards
• Accumulate videos
• Splice videos together in AfterEffects
• Import into Photoshop and begin illustrating animations
• If time allows, put the whole thing together in Premiere Pro and sync with music

Links:

Snow White - short animation clip

Unit 3: How People Remember

Short term memory, or working memory, is quick information we try to store for short-term use. In order to remember the information we must keep our attention focused on it. Working memory activates the prefrontal cortex of the brain. Stress will have an adverse effect on to the working memory.

The magic number is 4 - that is four items that people can remember, or store, in the working memory if not distracted. Grouping things in "chunks" helps us remember. Examples include phone numbers, 205-546-5128, or social security numbers, 121-00-9988. These groupings are separated into three groups or chunks and we can remember them as three items. If these numbers, or items, are used repetitively or  related to something we know, like a family member, than the information moves into long-term memory. Another example of remembering things in groups is "schema" - the head can include the whole schema of eyes, nose, lips, hair for example.

Memories aren't stored in our brains like movies or files on a computer. Instead are nerve pathways that fire anew on each retrieval. The negative effect of memories is that they can change each time they're retrieved. This happens because of events that take place afterwards effects the original movie, particularly if its a related event or person. We'll also fill in gaps with "made-up" information, this is called reconstructive memory.

An accidental study with rats in a maze ended up in additional research showing that their brains were just as active in their sleep as they were while awake. The study implies that humans have the same condition and that our brains are consolidating new memories and creating new associations - basically deciding what to remember and what to forget. This doesn't always work in our favor, but it is what humans have inherited for survival to evolution. 

Forgetting Curve - we quickly forget information not stored in long-term memory. Our brains keep us alive by not remembering everything, because too much sensory input would be overwhelming to us.

Infographic on Memory Retention and the Forgetting Curve

Other Terms
Recall Task: "involves presenting a subject with material that is to be memorized. Once the material is removed the subject is to immediately demonstrate everything that they remember from the material" [Cognitive Atlas].
Recognition Task: easier because of context; "Subjects view a string of letters. After a delay, a probe letter is presented and subjects indicate if the presented letter was in the previously viewed group" [Cognitive Atlas] .
Recency Effect: recalling most recent information; "If you hear a long list of words, it is more likely that you will remember the words you heard last (at the end of the list) than words that occurred in the middle" [Alley Dog].
Suffix Effect: "the weakening of the recency effect in the case that an item is appended to the list that the subject is not required to recall" [Morton, Crowder & Prussin, 1971.

Hotlinks

While exploring options for my projects I came across the following websites that I'd like to check out sometime:
Responsive Web Design: What it is and how to use it by Smashing Magazine
Build a responsive site in a week by .netmagazine
Create a mobile website with jQuery Mobile by .netmagazine

P1 Links

Circular content carousel
Hover Effects with CSS3
HTML5 Canvas World map with KineticsJS

More Thesis Ideas

Flash is gone, what next? HTML5, Adobe Edge, Greensocks for js

HTML5 Links

Tutorial on HTML5 charts and graphs
Tutorial on Canvas Tile Swapping Puzzle
Case Study: Building Technitone
Gauge Charts using canvas and javascript
JS Animate with Greensocks
The Planetarium

P3 Links

Jacquie Lawson's animations in Flash have always impressed me: Midnight Clear,
Dragon Tail. This is the type of animation I hope to emulate using HTML5 canvas or other software tools such as, Adobe Edge Animate.

HTML, CSS and Canvas
How to create web animations with paper.js
CSS3 Keyframe animations
CSS Animation principles and examples
Spider-man CSS
CSS Tricks Node.js example
Examples using plugins for Canvas: My Life Aquatic, Nardove.com

Raphael JS is a JavaScript library that works with vector graphics. Tutorials:

• An Introduction to the Raphael JS Library
• HTML5 Rocks Tutorials
• Using RaphaelJS to create a map
• Animated Skills Diagram with Raphael

Sencha

Adobe Muse

Adobe Edge

Create slick animations with Adobe Edge (reminds me of Pixar's animated logo with the lamp)

Other Examples

Beach Scene

Metropol Band

The Beast

CSS Animation Tutorial

Unit 2: How People Read

Chapter 2: How People Read. This chapter "busted" some myths about type but also emphasized important facts about others.

• All caps isn't necessarily harder to read. Our reading behaviors in society effects the way we see patterns and recognize words. All caps in our society means you're shouting or giving a headline or warning to grab your attention. If our society used all caps more frequently our brains would eventually recognize and learn the pattern.
• Our eyes "read" in a saccade and fixation pattern - we're using our peripheral vision to read ahead and then jump back, all occurring at a very rapid rate.
• Headlines help the reader comprehend what the context of the text means.
• Most readers recognize letters instantly, regardless of their typeface. But using a decorative font attaches meaning to the context and effects the comprehension of the reader. In some cases, this could have a detrimental effect by causing the content to appear difficult.
• Font size matters, regardless of the age of the reader. New fonts, such as Tahoma and Verdana, have larger "x-heights" to make it easier to read on screens. X-height can make a font appear than another even if they're the same font-size.

X-height font comparison

• Computer Screen vs. Paper - I really appreciated the points made about how the light is reflected on screens and paper. But especially appreciated the emphasis on how computer screens are constantly refreshing and it's tiring on the eyes. Interesting to note was that Kindle using "electronic ink" which mimics ink on paper and doesn't refresh. Black text on white background is the best case scenario, white text on a black background is difficult to read.
• Line Length: short vs. long. People prefer multiple columns but research shows that longer sentence length are faster to read because it interrupts our saccade and fixation movement less.

P1, P2 and P3 Proposals

Project 1

Parallax Scrolling with Interactivity
Transition my "Its Not Easy Being Green" infographic into a parallax website
Use CSS3 Transforms enhanced with jQuery for additional interactive elements

Tutorial: http://webdesign.tutsplus.com/tutorials/complete-websites/create-a-parallax-scrolling-website-using-stellar-js/

Project 2

Let's Movie PSA

Client: Let's Move - First Lady campaign
Song: Move Your Body by Beyonce
Tasks: acquire song and videos; splice together in Premiere Pro; adjust videos for consistency in AfterEffects
Length: 1 minute

Project 3

Frame by Frame Animation for the web using Photoshop

Inspiration: "Looking to a Promising 2012" by Bryan Schaeffer
Client: Let's Move - First Lady campaign
Song: Move Your Body by Beyonce
Tasks: use P2 to create a rotoscoping video geared for children and teens; import into Photoshop and begin illustration and animation

Thesis Idea: Web Design Sustainability

Article: Save the planet through sustainable web design by .net magazine
Topic: Sustainable Web Design
Synopsis: "Every website has its own carbon footprint. In regards to web design, sustainability is about layout, art, software, platforms, hosts, teams and business models. Sustainable web design meets the current needs of its users, without compromising the ability of those needs to be met in the future. A sustainable internet should be open to an expanding audience, while not reducing future access to its services. At a detailed technical level, we have articles promoting the meta X-UA-Compatible property as a sustainable strategy for handling legacy web browsers."
More Reading:
Sustainable strategies for the mobile web (video) by Jesper Waldiche
Design is the Problem (Book) by Nathan Shedroff (site has blog)
Design & Sustainability (PDF) by Jason Pearson (his TruthStudio site has visualizations)

Article: Sustainable Web Design and the Yoke Approach by Yoke
Sustainability is often mistaken as synonymous with "green" or environmentally friendly. Ecological sustainability is not the only consideration, for a product to be truly sustainable it must consider social and economic implications as well as ecological ones. A sustainable website serves its purpose effectively and can be managed and continued into the future without negative impacts to the environment, website users or the owner. Core areas of web sustainability include efficiency, openness and designing for good.

Article: Sustainable Web Design: A Blog Series by Tim Frick

Article: 12 Steps to Sustainable Web Design by InspiredMag

Article: Making the Web a Better Place: Guidelines for "Green" Web Design by Alison Fay Binney, Smashing Magazine

Thesis Response 2

Bryan Hill – Understanding Simplicity to Design a Better Tomorrow

http://dl.dropbox.com/u/1683194/ais_classes/portfolio_pres/fa10/abstract/Bryan_Hill_abstract.pdf

Thesis Response 1

Flynn Joffray – Tangible User Interfaces

http://scottmansfieldais.com/?p=4416

Flynn discusses the art of learning behavior in relation to user interfaces.

Overall, I enjoyed Flynn's thesis. It was informative and relevant to today's events in web technology. I also found similarities in our chapter reading to Flynn's thesis. There were grammatical errors but not severe enough to distract from the overall theme. While I enjoyed quite a few points of the thesis, most of it was references to other writers and I would have enjoyed hearing Flynn's take on the process and where, or how, he would apply the process. Below are some key points that caught my attention:

• Really liked the example where he likens the Apple II computer to “form follows function.” The computer was simple in that it had a keyboard, a monitor and a disk drive and that these peripherals were there in order to complete an operation.
• There are a lot of particular challenges that have gone into making the interfaces we see today, and of course, there are many methodologies that are utilized to execute these interfaces. Some of them concentrate on pure functionality while others concentrate more on humane levels of interaction. An interface is humane if it is responsive to human needs and considerate of human frailties. If you want to create a humane interface, you must have an understanding of the relevant information on how both humans and machines operate.
• Cognetics: the ergonomics of the mind
• Cognitive conscious and cognitive unconscious – play a role and are just as important a role as taking into account the size of a human hand when designing a keyboard. Unconscious processes are the processes we use unconsciously, like braking when we come to a stop while driving. A cognitive conscious process is something we have to do out of the ordinary, typically a new situation or learning process. These processes are also referred to as “branching.” Repetition of a cognitive process will make it an unconscious process.

 
 

Unit 1: How People See

Optical Illusions – the brain interprets what we see based on what we know.

2D/3D – Our eyes are hard-wired with sensitive cones that interpret light. We see in 2D and our visual cortex interprets the image into a 3D representation.

Peripheral and central vision – we can identify scenes if the peripheral elements are present and the central focus is blurred. “If you want viewers to concentrate on a certain part of the screen, don’t put animation or blinking elements in their peripheral vision.”

Recognizing Patterns – our brains look for, and recognize, patterns and take in white space as part of a pattern. Designers should use basic shape recognition and patterns in designs, preferably 2D, since this is a faster method for our user’s brain to interpret.

Geon: geometric icons; basic recognizable shapes used to identify objects

FFA: the fusiform face area; allows us to instantly recognize those we know and bypasses the usual channels of interpretation.

Facial Recognition – we prefer to see human faces and are drawn to them as early as newborns. The eyes are the main focus, letting us know if what we’re seeing is “alive.”

Perspective – we draw what we see in our minds. Most people will draw an object with angles and perspective.

Canonical Perspective: when an object is drawn from a “perspective slightly above looking down and offset a little to the right or left.” This is another technique designers can employ, i.e. with icons, to have a user instantly recognize an element.

Focus – user tend to ignore the top portion of a screen because they’ve learned it is less relevant and tend to look at the center of the screen. Therefore, the most important information a designer wants to convey should be at the top third of the screen or site.

Affordances: when an object gives you cues that help you interact with them; action possibilities in the environment. Affordances are helpful tools to a user that helps them interact with information on your page. 

Inattention blindness or change blindness – “when you pay attention to one thing and you don’t expect changes to appear, then you can easily miss changes that occur.” The “Gorilla” video is a prime example of inattention blindness.

Chromo stereopsis – the effect when one color jumps out while another recedes.

Color-blindness – a deficiency to see differences between colors. When using color employ other means of identification as well, for example using line weight and color to distinguish objects.

Rough Proposals for Other Projects

HTML5 Canvas and jQuery

Escher: Flash-type website that has moving elements in it, 3D images will move and climb off the paper and move around the site

Examples: http://blog.entheosweb.com/ideas/awesome-html5-canvas-animations-applications

Inspiration: http://www.thewildernessdowntown.com/

Mobile Website

Create a web-based platform and adapt it to mobile and tablet devices using jQuery and Mobify http://www.mobify.com/

CSS3 and jQuery

Use CSS3 Transforms enhanced with jQuery to create a timeline with interactive menus

Client: Perot museum; history timeline

Example: (http://demo.tutorialzine.com/2012/04/timeline-portfolio/)

Parallax Website

Transition my frog infographic into a parallax website

http://jrgraphicdesign.net/pdf/Infographic.pdf

Tutorial: http://webdesign.tutsplus.com/tutorials/complete-websites/create-a-parallax-scrolling-website-using-stellar-js/

Project 1 Proposal

Client

First Lady Michelle Obama’s “Let’s Move!” initiative

Objective

To create a 30 second video to promote “Let’s Move!” campaign

Target Audience

School-aged children and their parents

Tone

Upbeat, fun to engage and enliven the audience

Techniques/Software Applications

Cell-frame animation in Photoshop exported to Adobe AfterEffects

Assets

“Move Your Body” song by Beyoncé, specifically made for the initiative

Personal Goal

To learn cell-frame animation in Photoshop and use it purposely in product promotion

Senior Design Studio Project Schedule