Social Usability Workshop @ LIFT13

Post on 27-Jan-2015

106 views 0 download

Tags:

description

In this workshop we introduce the concept of Social Usability and we will make people use a very hands-on way to use it to design and analyse systems, not necessarily digital. This is the workshop we did at LIFT13 on Feb 8th.

Transcript of Social Usability Workshop @ LIFT13

Davide ‘Folletto’ Casali

Gianandrea Giacoma

SOCIALUSABILITYWORKSHOP

User ExperienceDirector

Startup DesignAdvisor

User ExperienceStrategist

Social BusinessConsultant

@Folletto @Ibridazioni

Manifesto Ibridim a n i f e s t o i b r i d i . o r g

TODAY

WHAT IS SOCIAL USABILTY

USE SOCIAL USABILTY

WHAT IS SOCIAL USABILTY

USE SOCIAL USABILTY

EVERYTHING IS SOCIAL

The walkmanDesigned to isolate oneself,

used to connect people.

WordDesigned for personal use…

...forgetting its social objective.

WallsMade to divide, define identities

and meeting points.

System

System

Social Dynamics

System

Social Dynamics

?

System

Social Dynamics

Social Usability

Social Usability is a quality attribute that assesses how easy social interactions

are to make.

Social Usability

System

Social Dynamics

If the level of Social Usability is too low...

Social Dynamics

Social Usability

...we are removing social dynamics as well!

System

Social Usability is an enabling factor

But… it is not a must!

I may want to emphasize

useful social behaviours

I may want to dampen

harmful social behaviours

BALA NCE

Photo by iz4aks

RICE

RELATIONS

findabilitycuriositymanagementprivacyseparationproximitypublic relationsthemestime

IDENTITY

RELATIONS

moodamplitudepersoninterestsappearanceuniquenessgroupavatarprivacy

IDENTITY

RELATIONS

COMMUNICATION

quantityprivatepublicspeedrichnesspluralsyncasyncaggregability

EMERGENCE OF GROUPS

easinessfindabilitypresencelivelinesslongevityfrequencybottom-up

Relation

In Friendfeed there’s an excellent feature that shows you the messages where your friend answered or liked.

Relation

The Like button has a very clever design that highlight your relationships: wherever you are on the web, seeing the face of a friend of yours there is incredibly reassuring.

Identity

Might be surprising, but the old MySpace excelled in something: identity.The high degree of customization, allowed by a workaround, triggered an incredible level of self-expression (with all its consequences).

Identity

The previous version of Twitter has one of the best identity expression feature around for simplicity and efficiency: the custom background changes completely the page look and feel.

Identity

Many games put a lot of emphasis on identity, think for example about World of Warcraft and Second Life.

Communication

Another strong element Twitter is its focus on communication, in particular broadcast communication.

Communication

Often ignored, instant messaging systems are incredibly powerful social networks focused on communication. Skype is an excellent example of this, allowing multiple types of communication in one.

Emergence of Groups

Another feature of Skype that is so simple it’s almost not noticed is it’s ability to create groups on the fly. You need to talk with a couple of friend right now? Create a chat ad hoc with a couple of clicks, done!

Emergence of Groups

The king here today is Google+, even if with the Circles concept it has a very specific interpretation of group.

Emergence of Groups

Facebook has introduced a very interesting feature as well: dynamic groups.

In social there are no patterns.

Social requires an agile, iterative approach.

do

observe

think

dotL OOP

Motivational Design

Is there a way to _____?

Is there a way to express yourself?

Is there a way to show up in a group

due to the things you do?

WHAT IS SOCIAL USABILTY

USE SOCIAL USABILTY

LET’S START WITH A QUESTION

10’

ITERATIVE DESIGN

CREATE SOLUTION

1. Each one of you takes a sheet of paper (A4).

2. Pick one question, only one, from one of the four elements of the Checklist.

3. Imagine the interface and wireframe that feature inside a page

· imagine to use 1/4 of a webpage

20’

ITERATIVE DESIGN

GROUP UP!

1. Create groups.

2. Each of you, share your wireframe with the others and understand what the other members understands without explanation.

3. Then create a new wireframe on a new sheet that blends the two ideas together.

20’

ITERATIVE DESIGN

DISCUSSION

1. Which questions form the checklists did you use?

2. How did it go?

3. Did you find anything interesting?

4. How did you merge the interface?

5. How difficult it was to blend together the ideas?

BONUS

WHAT IS SOCIAL USABILTY

USE SOCIAL USABILTY

HOW TO EVALUATE EXISTING INTERACTIONS?

10’

ANALYSE

CHECKLIST THEM!

1. Pair up.

2. Take the checklist and one of the following websites:

· Facebook (maybe not)

· LinkedIn

· Google (not necessarily Plus)

· Pinterest

· Twitter

3. Individually, assign a score from 1 to 5 to each question in the checklist, zero if the functionality isn’t there.

10’

ANALYSE

COMPARE THEM!

1. Each pair, compare notes.

· Compare first the highest and lowest values each of you assigned, to understand the different approaches.

· Are there differences in scores?

· Why?

2. Build a final scorecard with individual scores for each question and a global score for each RICE property.

10’

ANALYSE

DISCUSSION

1. In turn, tell us your results.

2. Explain why you reached that score.

3. Explain if there were any controversial point in the process.

”Bruno Munari

To complicate is easy, to simplify is hard.To complicate, just add,

everyone is able to complicate.Few are able to simplify.

@Folletto

@Ibridazioni

Thanks.