What can the Mosh Pit Teach Us About Social Interfaces?
Unwritten Rules of Rockin Out by Josh Syvrud
"-Pick up anyone who falls down: people will do this for you..."
Josh does a great job of reminding us that even mosh-pits have etiquette.
So, how does behavior in the mosh pit relate to the design of an interactive system? Technologies that allow people to contact each other are a bit like Josh's mosh pit because both environments have standards that can be most effectively policed by the community.
Good
social interfaces will encourage behavior that furthers the purpose of the application and of the community, and will discourage, or even make impossible, the sorts of behaviors that are detrimental.
Think of a real-world environment, such as the cafe. The purpose of the cafe is not to "sell caffeine", the highest purpose of the cafe is to create an environment that facilitates serendipitous meetings between people, who happen to buy lots of caffeine and food. Thus, the tables are typically clustered near the front door our outside of the cafe on the street, and the cash register is at the back, so that one must stroll through the entire cafe, possibly encountering acquaintances and friends. The cafe example comes from Christopher Alexander's book "A Pattern Language" and points the way toward answering the question: "how would one design a networked application (such as Flickr) that would facilitate serendipitous meetings between people?"
The social interface is a significant (but relatively poorly understood) aspect of any UI design. Only in the last few years have researchers considered this aspect of system design. To glimpse some research in this emerging field, see
the Babble Project by IBM's Social Computing Group.
Even applications that have no person-to-person communication, such as BitTorrent (BT), must pay attention to human nature and the social interface. For example,
BitTorrent's algorithm and UI are based on some assumptions about human nature: humans are lazy, and will freeload if given the chance. BT takes advantage of the tendency to freeload by throttling the download speed of users who download, but do not upload. In order to get, one must give. A bit like Josh's mosh pit--in order to mosh, one must pick up those who fall.
Your final projects would do well to consider the role of human nature, and the social aspects of environments where people interact with people.
How's Your Social Interface?
Last class we talked about autonomous agents--computational entities that interact with us, or do work on our behalf. We chatted with Eliza and her distant relatives, lifted the hood a bit to talk about some of the logic behind such 'bots,
And in previous classes we discussed the basics of
user interface design: make features and functions visible, make system state visible, put user in control, use the principles of information design, etc.) But what are the basic principles of
social interface design? And what is a social interface, while we're at it?
Here's an introduction to
the importance of social interfaces, by Joel Spolsky. And a
discussion forumHere are some social interfaces to sample and analyze:
www.flickr.com
friendster.com
match.com
www.audioscrobbler.com/
What do all these applications have in common? What patterns do they follow when it comes to facilitating person-to-person communication or interaction? What are the anti-patterns, the "things a designer must avoid", when it comes to designing social interfaces?
We'll discuss these topics and last night's reading from chapters 3 and 5 of
The Social Life of Information.
Sample Student Paper from 2003
T h e L a b y r i n t h B r o w s e r (.doc) by Cristina Escutia
"The Internet, it could be said, is the closest approximation we have today to the Library of Babel. Within the digital aisles of the web people wander, seeking information, connection, communication. And when they find what they are searching for, they can save it for later retrieval, add it to their collection, or pass it on to a friend."
Cristina chose to design a new way for Web browsers to store, display, and share a history of sites viewed. I'm afraid I can't find the paper prototype that she put together--which would complete the picture she draws in this essay.
Another memorable project from that year was a Web browser specifically designed to support the developmental needs of children between the ages of 6-9. This project was completed by a student who was studying developmental psychology.
Another paper came with a Flash-based prototype which demonstrated many novel ideas for searching, managing bookmarks, etc. The student who authored that paper was seeking patents the last time I spoke to him.
Sunday Reading: Infinite Libraries and Paper-based Blogs
"Blogs Will Change Your Business" from
Business Week Magazine
So we're going to take you into the world of blogs by delivering this story -- call it Blogs 101 for businesses -- in the style of a blog. We're even sprinkling it with links. These are underlined words that, when clicked, carry readers of this story's online version to another Web page."
This is a first for me--a mainstream business magazine is emulating a blog in it's paper version, complete with blue-underlined "links".
"The Infinite Library" from
MIT Enterprise Technology Review.
Google announced in December that it was launching a project that would
digitize millions of books from libraries around the world. Correction: from libraries around the English speaking world. To ensure that the infinitely library will not be English only, France has recently made public a similar effort to digitize French literature.
Coming soon: an example or two of student final projects from past semesters
Eliza Unraveled
A Computer Program For the Study of Natural Language Communication Between Man and Machine by Joseph Weizenbaum, ACM, 1966.
"Men are all alike"
IN WHAT WAY?
They're always bugging us about something or other.
CAN YOU THINK OF A SPECIFIC EXAMPLE?
Well, my boyfriend made me come here.
YOUR BOYFRIEND MADE YOU COME HERE
He says I'm depressed much of the time.
I AM SORRY TO HEAR YOU ARE DEPRESSED
It's true. I am unhappy
DO YOU THINK COMING HERE WILL HELP YOU NOT TO BE UNHAPPY
I need some help, that much seems certain."
When I was about 10 years old living in Berkeley, California I discovered Eliza--she's the computer program in uppercase, above. She was pure magic. She was the X-ray vision glasses in the back of my comics: something you just couldn't figure out.
My friends and I would grab our skateboards and take the Humphrey Go-Bart shuttle to the Lawrence Hall of Science. By arriving early on Saturday morning we could pay a reduced admission and use Eliza and the other computers before the crowds arrived. I'd usually start the day by sitting down with Eliza. She'd ask me questions, I'd ask her questions. Once in a while she'd say something that would make me think: "How would a computer know that?"
In his essay about the creation of Eliza (see above), Joseph Weizenbaum lifts the curtain and reveals the "mechanics" behind how Eliza seemed to be able to speak to me. "But once a particular program is unmasked," he writes, "once its inner workings are explained in language sufficiently plain to induce understanding, its magic crumbles away; it stands revealed as a mere collection of procedures, each quite comprehensible." True, true, true. But I'm still impressed.
There are several
Web-based versions of Eliza, and many, many sons and daughters of Eliza, known as
chatterbots, but for me none will ever compare to Eliza on a green CRT. Read more about the
Turing Test.
Not all agents are designed to carry out simulated discourse--see the
Postmodernism Generator Reload to view a new essay. Google's robots tirelessly index the Web--they're agents, too, in a sense. Agents are also at work on eBay. When you place a maximum bid, you are essentially informing your "agent" to bid on your behalf, until the maximum is reached. Today we trust agents to bid for us on eBay. What will we trust agents to do for us tomorrow?
From Ariane: Fab Labs and the Personal Fabrication Revolution
Fabulous Fabrications From
The Economist"Just as computing power moved from million-dollar mainframes to hundred-dollar PCs, industrial-scale machinery is, in his opinion, beginning a transition to the desktop."
This article is about Neil Gershenfeld, the director of the Massachusetts Institute of Technology's Centre for Bits and Atoms, and his version 1.0 of the personal fabricator that people all over the world are beginning to use.
The "fab lab" is a small-scale fabrication kit that has everything you need to create devices that serve the greater good in places like India, Ghana, and Boston. It may prefigure fab labs that operate at the scale of the nanometer--nano labs that could manufacture drugs as well as machines.
What would you make with a Fab Lab?
Thanks again, Ariane.
Charettes for User Interface Design
Prototyping for Tiny Fingers (5 meg pdf) fixed link
Marc Rettig's essay on the how's and why's of low-fidelity prototypes.
Before casting the full-size bronze statue, sculptors shape small-scale models in clay. Long before ground is broken, architects elicit a building's "program" (what the building will be used for) from the clients and then develop
charettes, or quick visual concepts. Before manufacturing the car, industrial designers draw sketches and create scale models for evaluation and testing.
But when it comes to creating the cathedrals of our capitalist information age--large-scale software projects--The common process, until recently, was to go from a business goal to large amounts of finished code, to "user-acceptance testing", followed by head-scratching: "Why didn't those silly users understand how that works?" Finally, after teeth-gnashing and blame, insights would arrive: "I guess we'll have to restructure the UI for the next release."
In class today we'll discuss how you can use paper prototyping activities to assist you as you conceive and define your final projects.
Some great articles and links from David, Alex, and Phillip
[Editor's note: Just to show you how prevalent errors and slips are, this post itself was initially published via a mistaken click. I tried to place the mouse in the text box, but somehow hit the Publish button...now for the kicker: I was working on the link to Phillip's "These are the Errors and Slips of Our LIVES"!]
From Alex:
WIIR: a Final Project Proposal(draft #2)
"When a large scale natural or man made disaster hits, what do you do? The cell phone lines and land lines are out, you don’t know where any of your immediate family is and you can’t even tell anyone you’re alive."
From David:
Web Browser EmulatorsFrom the circa 1990 biography of Sir Tim Berners-Lee that you can view in the CERN command-line browser:
"He developped [sic] his first hypertext system, "Enquire", in 1980 for his own use (although unaware of the existence of the term HyperText)."
And From Phillip comes: "
These are the Errors and Slips of Our LIVESA single mis-click creates a cascade of intrigue and mystery.
"Needless to say this was not good and caused a lot of problems for Red's quest to find truth and love. All because of one 'data driven error'".
Using Illustrator to Create Paper Prototypes
This fictional user interface is for an imaginary dot com that offers a bundle of Internet Services, Catering Services, and Lawn Mowing Services "all delivered via the Internet!" It answers the question:
"How much would I save if I bundled all my catering, lawn mowing, and Intenet services together via this company?"
Comparison Map Tutorial File (NB: Be sure to make the "Elements" layer invisible by clicking on the layer's eye icon, then make visible the "Comparison Map" layer visible by clicking the eye icon.
Just because a tool enables us to create polished and finished looking user interfaces, doesn't mean that the tool will enable us to create more insightful or intelligent interfaces!
This tutorial file is based on a finished UI (seen above) that was decomposed into pieces--if you decide to use illustrator or Freehand, a good exercise would be to put the image back together again.
Resources for Final ProjectsZentall GUI Elements(Illustrator file with many layers containing widgets from various operating systems. From:
www.zentall.comWe'll be using We used this file during class on Tuesday. As I've said before: you may use any tool you like when prototyping your concepts. Illustrator, Visio, Flash, Fireworks, Visual Basic, Photoshop, MS Paint, etc. will all suffice.
Brave, New World of Cybersenses: KLRU at 8 PM, Wed. Night
KLRU Listing for Cybersenses TV show (URL Corrected)
Artificial Retina ProjectScientific American: Cybersenses, 8 pm on KLRU, Wednesday, 13 April, Austin, Texas.
See this TV show about how computer scientists and engineers are developing human-computer interfaces--but not interfaces that display on screens. These interfaces live inside the human body. The retinal implant uses a form of machine learning--the person with the implant "teaches" the system (a network of electrodes that stimulate neurons in the occipital lobe of her brain) "how to see."
Ten Basic Tenets of Interaction Design
Interacting with the World(ppt)
What are the principles that inform the way interaction designers define and design interactive systems, such as software?
This presentation outlines about 10 principles, or basic tenets of good interaction design. I'll be using these principles (and others) when evaluating your final projects.
Prof. John Maeda, MIT Media Lab, to Lecture on Simplicity
Prof. Maeda's SiteJohn Maeda
Allen Professor of Media Arts and Sciences
Massachusetts Institute of Technology
The M.I.T. Media Laboratory
Public Lecture: "In Search of Simplicity"
April 13 at 5PM, AVAYA Auditorium ACE 2.302 (ACES Bldg. is located at the intersection of 24th Street and Speedway).
Prof. Maeda is a rare species: a computer scientist with an interest in humanistic endeavors: the innate urge for self-expression, visual communication, text and typography, communication, community. His talk will touch on
simplicity, a topic we could all hear more about.
He and his students have worked on
many creative experiments--it's hard to generalize about such a varied group, but all of the projects are aesthetically informed, and are designed and delivered via a digital or computational medium.
John Maeda’s lecture is co-sponsored by the UT School of Architecture and the Design Division at the Department of Art and Art History.
Similar Creatures: Folksonomies, BitTorrent, and Creative Commons Licensing
Folksonomy entry in WikipediaCreativecommons.org/Folksonomies are bottom-up, collaborative metadata tagging systems. Creative Commons licensing is bottom-up and collaborative, as well. Both point the way toward something new, and powerful.
When you use a site such as
www.flickr.com/photos/smag and select "tags" you can browse photos by the collaboratively created classification system that Flickr supports. For example, when I uploaded images of the perspective machines, I tagged them with "perspective, machine, austin, university of texas at austin" and now anyone can browse to these photos by clicking on "Austin" in this "
tag map". The same classification system is in use at
Del.icio.us. To get an idea of the power of this system:
slideshow of tsunami images To view other slideshows, simply replace "tsunami" in the URL with another keyword and hit enter.
We know users are excited about folksonomies--Flickr has been around a little over a year and has millions of users, 2% of which are paying. Similarly, Del.icio.us has a large and active user base. The business world has also noticed: Yahoo! recently acquired Flickr for a rumored $US 10-20 million, and the founder of Del.icio.us recently quit his day job after receiving seed-money from venture capitalists. There are plenty of limits to such a "folksy" approach to categorizing and classifying data--for example, inconsistent nomenclature and spelling--but that's not the subject of this post.
This post is about what folksonomies and the Creative Commons licensing share. They're both bottom-up, collaborative, democratic, usually free (as in "free beer"
and "freedom"), and open. They both allow users to have fine-grained control over the way that items are shared and used by others. Best of all, they both offer a new and hopeful model for "the way things work."
Before we get into what's new about how these collaborative technologies work, let's talk about a concept known as the creative commons. People such as Lawrence Lessig and Howard Rheingold believe that the Internet represents a technological "creative commons"--a common space similar to a community garden, available for all people in the community. But all is not sunny and happy in the garden. The "tragedy of the commons" is what happens when one person or a group abuses the common space, and takes advantage of the commons, using it for exclusive advantage, ruining it for the rest. The tragedy of the commons is what happened when the unmoderated Usenet (or "newsgroups") became a repository for scammers and spammers, and legitimate uses were gradually pushed out. Edward Tenner would say that the tragedy of the commons is a "revenge effect" of a technology whose designers didn't anticipate the human tendency to scam and spam.
What's new about collaborative, creative, "common" technologies? They offer an alternative to the rather medieval "great chain of being" thinking that seems to pervade most traditional information technologies. Folksonomies and Creative Commons licensing see the world from the bottom-up. They both represent a decentralized way of thinking about how to solve problems, share, and create. This is a powerful, and provocative idea that's picking up steam. That's apparent in applications such as Flickr and in the budding
Free Culture movement among students in Florida, and the recent release of a
Creative Commons search engine at Yahoo!.
If you think about many of the recent "new new things" that relate to the Internet: blogging, ad-hoc WiFi networks, folksonomies, Creative Commons licensing, Peer-to-peer tools such as BitTorrent, all are pointing the way toward networks--whether social, technological, or political--that are less centralized, more dispersed, more robust, and perhaps more democratic and open. But that could just be the optimist in me. We'll see.
Control-Cut, Control-Cut...OH NO!
The Accessible Internet Rally (AIR) Austin event takes place each year. It pairs Internet technologists with non-profits, and these teams compete to build a site for the non-profit organization in a single day. 9 Hours!
At AIR Austin in 2002, I was on the team that won the "Indy 500" category of the rally, and a colleague of mine, Nishant Jain, was on another team that might have won, had it not been for a
dreaded lack of feedback about system state. Toward the end of the day I walked over to Nishant's team and took a look at the competition's site. It looked pretty good. They had quite a lot features and functions set up for having worked for only 9 hours. Not only that, but the navigation design was elegant, and the whole thing was pure-CSS. No tables or font tags in sight (this is a technically elegant way of coding the presentation of the Web site).
After seeing their site, I thought: "Wow, they're going to win." Then at the end of the day, we transferred our site to the judge's directory and breathed a sigh of relief. 9 hours with practically no bathroom break was a lot of stress. I walked over to Nishant's room. They looked terrible.
"We lost the site, man" said Nishant.
"What?!" I said.
"Yeah, I went to transfer the site to the judge's directory, selected the directory, and then went Control-X," said another member of the team, "and just then I remembered I needed to add one more CSS file, so I went control-X on that file, too, and when I went to paste the site into the directory, all I had was the CSS file. The site was gone."
After a couple of hours of trying this and that, we gave up, and a much earlier version of the site was submitted.
There are two design errors here, compounded: INVISIBLE SYSTEM STATE, and an UNRECOVERABLE ERROR WITHOUT CONFIRMATION--two things that should be avoided. How would a UI designer solve these problems?
Comments welcome.
Intro to User Centered Design
Intro. to User Centered Design (ppt)
This introduction was put together for this course last year by Nishant Jain, a colleague and friend of mine in the Information Architect / User Interface team at SBC.
Getting to SBC Labs
Google Map To 9505 Arboretum Blvd.Monday, 11 April 2005. Meet at 12:50 pm at 9505 Arboretum Blvd. Tour is from 1 PM to 2:30.
From UT Campus: north on MoPac, go north on 183, take Loop 360. Go left at first light onto 360 heading southwest. Continue on Loop 360 about 100 yards, take right onto Arboretum Blvd. and look for the SBC Labs sign on the right. Free visitor parking is available outside and inside the parking garage.
I'll need to have you sign a release before we take the tour. It basically says you won't reveal any trade secrets, etc.
PS: Google Maps is about to release a new version with satellite imagery instead of the US Government-based open-source maps we currently see on the service. What if you don't want everyone in the world to see what kind of tomatoes you grow in your backyard?! (I grow only non-hybridized, heirloom varieties.) What would the
Electronic Frontier Foundation say? Privacy issues. Take a look at this
Swiss map servicethat uses satellite imagery. As you zoom in, the illustration becomes satellite imagery. Kind of eery, no? What do you think of this? Comments welcome.
