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.

1. Davide ‘Folletto’ Casali
SOCIAL
Gianandrea Giacoma USABILITY
WORKSHOP

2. @Folletto @Ibridazioni
User Experience User Experience
Director Strategist
Startup Design Social Business
Advisor Consultant

3. Manifesto Ibridi
manifestoibridi.org

4. TODAY

5. WHAT IS SOCIAL USABILTY
USE SOCIAL USABILTY

6. WHAT IS SOCIAL USABILTY
USE SOCIAL USABILTY

7. EVERYTHING IS SOCIAL

8. The walkman
Designed to isolate oneself,
used to connect people.

9. Word
Designed for personal use…
...forgetting its social objective.

10. Walls
Made to divide, define identities
and meeting points.

11. System

12. Social
Dynamics
System

13. Social
Dynamics
?
System

14. Social
Dynamics
Social
Usability
System

15. Social Usability is
a quality attribute that assesses
how easy social interactions
are to make.

16. Social
Dynamics
If the level of
Social
Social Usability
Usability
is too low...
System

17. ...we are removing
Social
social dynamics
Dynamics
as well!
Social
Usability
System

18. Social Usability
is an enabling factor

19. But… it is not a must!

20. I may want to I may want to
emphasize dampen
useful social harmful social
behaviours behaviours

21. BALA NCE

22. RICE
Photo by iz4aks

23. findability
RELATIONS curiosity
management
privacy
separation
proximity
public relations
themes
time

24. mood
RELATIONS amplitude
person
interests
appearance
uniqueness
group
IDENTITY avatar
privacy

25. quantity
RELATIONS private
public
speed
COMMUNICATION richness
plural
sync
IDENTITY async
aggregability

26. easiness
findability
presence
liveliness
longevity
frequency
bottom-up
EMERGENCE OF GROUPS

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

28. 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.

29. 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).

30. 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.

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

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

33. 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.

34. 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!

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

36. Emergence of Groups
Facebook has introduced
a very interesting feature
as well: dynamic groups.

37. In social there are
no patterns.

38. Social requires an agile,
iterative approach.

39. observe
dot
LOOP
do think

40. Motivational Design

42. Is there a way to _____?

43. Is there a way to
express yourself?

44. Is there a way to
show up in a group
due to the things you do?

45. WHAT IS SOCIAL USABILTY
USE SOCIAL USABILTY

46. LET’S START
WITH A QUESTION

48. ITERATIVE DESIGN
CREATE SOLUTION
1. Each one of you takes a sheet of 10’
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

49. ITERATIVE DESIGN
GROUP UP!
1. Create groups. 20’
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.

50. ITERATIVE DESIGN
DISCUSSION
1. Which questions form the 20’
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?

51. WHAT IS SOCIAL USABILTY
USE SOCIAL USABILTY
BONUS

52. HOW TO EVALUATE
EXISTING INTERACTIONS?

54. ANALYSE
CHECKLIST THEM!
1. Pair up. 10’
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.

55. ANALYSE
COMPARE THEM!
1. Each pair, compare notes. 10’
· 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.

56. ANALYSE
DISCUSSION
1. In turn, tell us your results. 10’
2. Explain why you reached that
score.
3. Explain if there were any
controversial point in the process.

57. “
To complicate is easy, to simplify is hard.
To complicate, just add,
everyone is able to complicate.
Few are able to simplify.
Bruno Munari
”

58. Thanks.
@Folletto
@Ibridazioni