Upload
hannah-d
View
72
Download
0
Tags:
Embed Size (px)
DESCRIPTION
With 36% of all the Internet’s worldwide users1, 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 documentation3) 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 drowns out the profound.This webapp experimented in cutting through the noise of Twitter and emphasizing the lesser heard voices, important events, and worthwhile links.
Citation preview
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