PROJECTPROCESS: NOISE Hannah DeeringArtGr 478 - Feb 2013

1

PROJECT DEFINITION

2

PROJECT OVERVIEWNoise is a highly contested term. It means a variety of things to different people and different situations. The law has a set of ideas about what should be labeled noise. Individuals have a sense for what a noise is. Communications specialists, photographers, musicians, advertisers, designers, urban planners, architects, interior designers, biologists, educators, health practitioners, engineers, etc all of specific noise-related issues that they embrace and deal with in their work.

Using a dictionary definition of a word such as noise proves to be of little

value in the matter. According to the Oxford English Dictionary, the first entry for noise is the aggregate of sounds occurring in a particular place or at a particular time. It can mean an unwanted sound or a less desirable sound that must be tolerated for some other larger reason such as air travel or trash removal. There is also the idea of noise as it relates to a process or sequence where it becomes interference and affects an outcome. Beyond sound and process, noise can be thought of as a way to discuss that which has gotten so full, so saturated that it is hard to discern any specific or isolated message or experience in a variety of mediums and contexts resulting in a massive impact on communication.

As more things are designed and introduced into our environment, we

are presented with increasing amounts of noise that is audio, visual and experiential. This applies in the form of sounds like alerts, announcements, hums, rumbles and sirens and extends to the visual saturation created by

a highly mediated environment. Political arguments, advertising schemes, media messages, and increasing streams of information and disinformation result in a great deal of noise in which it can be hard to find the signal. Sometimes the noise is the signal. Making noise as a way of being heard, of expressing opinions and of standing up to oppression gives noise an entirely different value.

For this project, noise is the point of departure. It is up to you to determine what type of content you want to make or collect and what type of web-based project you are going to create as a result. A few directions are suggested below. Find an aspect of noise in something that you are interested in or identify something about noise that you want to learn more about.

PROJECT SCOPEFor this project you will design and build a 5 screen project that utilizes the web in a significant way. Your project must contain text and images but it also may optionally contain videos, sounds and interactive modules built in JavaScript or Flash. Reducing screen count in exchange for larger efforts in other areas (such as working with video) can be discussed with the instructor.

All text in HTML pages must be text (not image) unless discussed in advance.

PROJECT PHASES AND DEADLINESA: Research / write / define topic and direction present 3 options for discussion - due 2/4

B: Site architecture + wireframejpgs posted to flickr - due 2/4

C: Sketch [ & Prototype ]

D: Designjpgs posted to flickr - design crit 2/11

E: Refine [ & Prototype ]

F: Build

Final critique: 2/27

Final due: 3/4

3

THE LESS YOU TALK, THE MORE YOU'RE LISTENED TO.ABIGAIL VAN BUREN

4

TWITTER IS A NOISY GEM-FIELD

5

With 36% of all the Internets worldwide users[1], and an average of 340 million Tweets sent per day (as of March 2012) [2], Twitter can safely be called a noisy place. The Twitter firehose (a term used in their documentation[3]) inundates users with a constant stream of the latest Tweets from the people they follow. Buried in this stream could be important announcements from friends, breaking current events, and relevant, interesting articles. The lists feature, introduced in 2009, helps sort the flow a little, however, the problem remains that the prolific Tweeters obscure the more reserved, and the mundane often drown out the profound.

The goal of this webapp is to cut through the noise of Twitter and emphasize the lesser heard voices, important events, and worthwhile links.

[1] http://www.businessinsider.com/twitter-blew-out-facebook-in-last-nights-super-bowl-2013-2#ixzz2JwgvKbAt

[2] http://blog.twitter.com/2012/03/twitter-turns-six.html

[3] https://dev.twitter.com/tags/firehose

Spam4%

Self Promotion6%

Retweets9%

News4%

Pointless Babble41%

Conversational38%

6

From a 2009 Pear Analytics Report

7From a 2009 Sysmos Report:

A small minority creates most of the activity. A steep curve of a small minority of actively engaged content creators generating most of the activity on a site is common among social networks, but it is steeper and more pronounced on Twitter. 5% of users account for 75% of all activity, and 10% of users account for 86%. This seems to suggest that the site has managed to engage a mass audience beyond those who typically engage with social media.

Half of all Twitter users are not active. If you take a general description of being active on Twitter to mean that you have posted a tweet at some point in the last 7 days (1 week), then the survey learned that 50.4% of all Twitter users fit this category. If you remove the 21% from point #1 [accounts that have never posted], this leaves about 30% of users who have an account and have tweeted before, but happen to be inactive now.

RESEARCH

8

TWITTER FEEDS

9

10

11

12

13

TWISTORIhttp://twistori.com/

14

TRICKLE https://followize.appspot.com

passive Twitter client

FOLLOWIZE https://followize.appspot.com

list organized by people

15

SLICES

16

17

PULSE https://www.pulse.me/

News client

18

FLIPBOARDhttp://flipboard.com/

News / Twitter Client

19

20

FLICKR1 per person

DATA VIZ

21

VIZIFY

22

FLICKR LOCATION VISUALIZATIONVisualization of photos uploaded to flickr

23

TWITTER BLOCKS

24

25

HIDDEN INFORMATIONhttp://blog.blprnt.com/blog/blprnt/twitter-privacy-and-lawrence-waterhouse

Jer Thorp

plot of tweets ordered by day horizontally and by time vertically

can see when he moved time zones by first text of the day

JUST LANDEDhttp://blog.blprnt.com/blog/blprnt/just-landed-processing-twitter-metacarta-hidden-data

Jer Thorp

Visualization of Tweets with Ive landed and where they went

26

GOOD MORNINGhttp://blog.blprnt.com/blog/blprnt/goodmorning

Jer Thorp

Visualization of Tweets with Good Morning

27

NEWS MAPhttp://blog.blprnt.com/blog/blprnt/goodmorning

presentation of Google News

size and color dependent on number of similar articles and how recent the update

28

AVERAGE CONSUMER SPENDING 2008http://www.nytimes.com/interactive/2008/05/03/business/20080403_SPENDING_GRAPHIC.html

29

DIGG VISUALIZATIONS

30

DIGG VISUALIZATIONS

31

CIRCULAR TREEMAPShttp://lip.sourceforge.net/ctreemap.html

32

33

34

FIZZvisualization that clusters tweets around authors

hover delay

35

LETTER PAIR ANALYSIShttp://www.m-i-b.com.ar/letters/en/

bubbles are movable

TECH TOOLS/API

36

GOOGLE CHART APIhttps://code.google.com/apis/ajax/playground/?type=visualization#tree_map

generate dynamic charts

37

PROCESSINGhttp://www.processing.org/learning/

http://processingjs.org/

http://www.processing.org/learning/gettingstarted/

http://blog.blprnt.com/blog/blprnt/quick-tutorial-twitter-processing

38

39

TWITTER APIhttps://dev.twitter.com/docs/platform-objects/users

REST API Streaming API

https://dev.twitter.com/docs/using-search

http://www.jquery4u.com/api-calls/calculate-twitter-time-tweet-javascript/

https://dev.twitter.com/console

40

http://forum.processing.org/topic/help-random-distribution-of-non-overlapping-circles

Code by Amnon Owed

http://amnonp5.wordpress.com/

http://amnonp5.wordpress.com/2012/01/28/25-life-saving-tips-for-processing/

PROCESS

41

WIREFRAMES

42

43

title filters

timeline scro!s horizonta!y ->

bubble size dependent on frequency of user postsspaced by time

selected tweet

contextcould be replies, others with same hashtag, previous posts by same user

filters- lists (show posts from various lists)

- who (celeb, friend, professionals)- type (link, photo, text, reply)

prioritize- direct replies/mentions- softer speakers

- fewer posts- longest time since last post

- trending topics?

read/unread tweets emphasized by color brightness

2/2/2013

44

vertical timelinetypographic emphasis

selecting a tweet highlights others by the same author, with same hashtag

title filters

2/3/2013

45

vertical timelinetypographic emphasis

selecting a tweet highlights others by the same author, with same hashtag

title

filters

2/3/2013

46

tweet tweet

tweet tweet

tweet

tweet tweet

tweet tweet

tweet

tweet tweet

tweet tweet

tweet tweet

tweet tweet

tweet tweet

tweet tweet

tweet tweet

tweet tweet

tweet tweet

tweet tweet

tweet tweet

tweet tweet

tweet tweet

tweet tweet

tweet tweet

tweet

tweet

treemap with 3 levels of hierarchyinfinite scro!ing

title filters

2/3/2013

47

display the last tweet from each person you fo!owordered by latest one

title filters

2/5/2013

tweet tweet

tweet tweet

tweet tweet

tweet tweet

tweet tweet

tweet tweet

tweet tweet

SITE ARCHITECTURE

48

49

Twitter API

Twitter Data

Timeline

filter by type filter by lists filter by people filter by trending

2/4/2013

PROTOTYPE SKETCHES

50

51

PROCESSING SKETCH 1plots the last 100 tweets

color indicates user

x-axis is time-based ordering

y-axis is users tweets per day

hovering reveals the tweet beneath

2/4/2013

52

PROCESSING SKETCH 2plots the last 100 tweets

color indicates user

x-axis is time since tweet

y-axis is users tweets per day

hovering reveals the tweet beneath

2/5/2013

53

PROCESSING SKETCH 2plots the last 100 tweets

color indicates user

x-axis is time since tweet

y-axis is users tweets per day

hovering reveals the tweet beneath

2/5/2013

54

PROCESSING SKETCH 3plots the last 100 tweets

color indicates user

x-axis is time since tweet

y-axis is time since users previous tweet

hovering reveals the tweet beneath

2/5/2013

55

PROCESSING SKETCH 4plots the last 100 tweets

color indicates user

x-axis is time since users previous tweet

y-axis is users tweets per day

hovering reveals the tweet beneath

2/5/2013

56

BALL SKETCHballs position and adjust based on gravity

2/7/2013

57

PROCESSING.JS TESTrollovers and drawing on canvas

2/7/2013

58

BUBBLEBubbles dynamically placed

shows image on rollover

2/11/2013

59

BUBBLE IN JSBubbles dynamically placed

shows image on rollover

2/13/2013

DESIGN PROCESS

60

61

last tweet from each user

could be ordered based on the time of the last tweet or the importance of the tweet/user

2/5/2013

62

latest tweet interface

color auras indicate tweets by the same user or that have similar topics

size is based on some algorithm factoring in tweets per day, time since tweet, retweets

Notes from Alex:

float the info box next to the bubble

show the data that goes into the size

limit each person to a max number of tweets shown (6?)

2/6/2013

63

2/6/2013

added detailed stats

tone down borders

floating tweet & details

64

slate blue

2/6/2013

midnight purple

light bright blue dark bright blue

65

2/6/2013 & 2/7/2013

nav bar

friend tiles

playing with identity

662/7/2013

refined friend page

672/11/2013

CLASS DESIGN CRITIQUE

Notes from Class:

use the bubbles on the friends page to create texture that directs the eye

is there a login page?

like the bright blue color scheme, best contrast in that and the deep purple

friends profile pic feel too large?

only put image in the active bubble

682/13/2013

login page

shrink user profile bubbles

DEVELOPMENT PROCESS

69

702/18/2013

712/19/2013

planning responsive layout for friends page

722/19/2013

testing responsive design

73

CLASS CRITIQUE NOTESnav bar too heavy, make thinner

go with the smaller profile pics

0.0 should be just 0

curve speech bubble

nav bar link font weight

play with borders

2/20/2013

74

bubbles integrated with Twitter feed using the PHP TwitterOAuth library

2/26/2013

75

login page

in the future clicking on the login button would prompt OAuth and possibly pull up to reveal the bubble page

2/27/2013

76

instruction & loading page

3/2/2013

773/2/2013

exploration with profile pictures in bubbles

SOLUTION

78

79

80

81

82

83