DESIGNING INTERFACES FOR THE SOCIAL WEBPrinciples, Practices, Social Impact and Evolution

Outline Web Interface Design: Need and Methodology

Why do we need good interfaces and how do we design for the web?

The Social Web What is the social web and how did it emerge?

Introducing Social to Interface How do we design social interfaces?

The implications of the Social Web What issues should we be concerned about and how do

we design interfaces while taking them into account?

Why do we need a Web Interface? Change in User Demand for the Web:

From the need of only sharing information in an organized way in a web browser to the need for interactive real-time interfaces with Ajax

Need for more than clicking on hyperlinks and surfing static pages Evolution towards partial page reloads and rich

internet applications

Designing for the Web: Principles

Nielsen’s  10  heuristics  for  User  Interface  Design: Feedback is one of the most important aspects of

usability Writing well targeted error messages Allowing users to recover from errors Keeping users up to date on the state of the system Providing the right amount of help and documentation

Consistency and Comprehensibility Applying familiar standards Entities in the interface should map to the real world:

faster perception, recognition and interpretation of familiar objects

Applying a “pattern” that people can learn

Designing for the Web: Principles (2)

Different pages in an interface have different functions Home page

Summarizes the purpose of the website Should attract the users to stay

Person representation pages Individual personalized pages presenting the

user’s own gadgets and tools Application pages

Consists of forms to fill Causes a lot of error states which means a

harder feedback system

Designing for the Web: Process

Designing for the Web: Tools Ajax: Asynchronous JavaScript and XML XMLHttpRequests

Added the real time interaction factor to scripting languages

HTTP request/responses received directly by the web server and loaded in the scripting language as XML

Designing for the Web: Tools (2) Rich Internet Applications can be

developed under different tools depending on the category of the business: Adobe’s AOR or Microsoft Silverlight for

multimedia intensive applications

The Social Web People focus websites

Promote the user as a person with a profile and a  presence on the web

Hobby focus websites Share ideas and achievements around a

specific topic Social Engagement

All kinds of interactions that a Web user can have within an already existing online service

The Social Web Today “Social today feels like search a decade

ago: lots of noise and lots of spam!”- Michael Arrington,

TechCrunch

We didn’t complain about all the spam generated by AltaVista until Google came up

The reason we don’t complain about the social web today is because we don’t know how to do it in any other way

The Social Web Today We all have accounts

everywhere – multiple passwords, different functions Photos on Flickr, Picasa

and Facebook Reviews on Yelp but

movie reviews on Flixter

Location on Foursquare and Loopt

Status updates on Facebook and Twitter

Videos on Youtube

Introducing Social to Interface Any social application should have a

number of  already existing social forms: Creating an online profile Poking, Buzzing, Tweeting Instant Messaging Liking, Commenting, Rating and Reviewing Sharing pictures, videos and music

Introducing Social to Interface Never finish a design, let your users finish it Users are in charge: allow them to edit, add and

 delete parts. Make users feel at ease: exchange authority for a 

bond with your users User conversational tone, blame errors on site owners Use question/answer patterns

Facebook’s “What’s on your mind?” Twitter’s “What’s happening?”

Each person has their own sense of humor. Avoid jokes.

What to include in a social interface?

Sign up Take the minimum amount of information needed and explain

any other needed information  (ex: zip code for delivery area) Sign in/Sign out

Allow user to retrieve username and password Present “stay signed in” as an option

Invitations  A social network is about making connections Invitations should not pass for spam on

the side of the receiver Do not force people to invite others

Authentication – especially with mashups Use tools such as OAuth or OpenID: APIs for secure

authorization

The Future of the Social Web

The flow is towards a single important and connected social network today.

The social experience is going to become indispensible and everything will be build on social networks and identities.

How should interfaces be affected? Interfaces should allow users to be free:

Allow users to build their own world Registration (signing up) will

become old‐fashioned One and only social identity Interfaces will need to

be more comprehensive Emergence of social browsers, and

browsers as operating systems

Design with Responsibility Concept of

Responsibility for people’s interactions   Control spam and unacceptable behavior Avoid control of

the users actions themselves  Social interfaces should not try to

replace human relationships and face-to-face interactions They should grow independently

Bibliography Arrington, M. (2010, February 7). Social Today Feels like Search A

Decade Ago: Lots Of Noise and Lots of Spam. Retrieved March 9, 2010, from TechCrunch: http://techcrunch.com/2010/02/07/social-feels-like-search-a-decade-ago-lots-of-noise-and-lots-of-spam/

Crumlish, C., & Malone, E. (2009). Designing Social Interfaces (1st ed.). O'Reilly Media Inc.

Interaction Design Inc. (n.d.). Interaction Design: the UI design process. (Interaction Design Inc) Retrieved March 13, 2010, from user.com: http://www.user.com

Nielsen, J. (n.d.). 10 Heuristics for User Interface Design. Retrieved March 12, 2010, from useit.com: Jakob Nielsen's Website: http://www.useit.com/

Owyang, J. (2009, April 27). The Future of the Social Web: In Five Eras. Retrieved March 9, 2010, from Web Strategy: http://www.web-strategist.com/blog/2009/04/27/future-of-the-social-web/

Porter, J. (2008). Designing for the social web. New Riders.