Social web systems
common model
An approach through information architecture patterns
Alberto San José
uxtopia.com

License
http://creativecommons.org/licenses/by-nc-nd/3.0/

social
The Web is now

Well, you probably know that...
image: http://www.flickr.com/photos/stabilo-boss/93136022/

So, the questions are:

1
Can we find a common model for
(most of) all these sites?

2
Can we find a model that works
when we are dealing not with just
websites, but larger systems?

Defining
the model

To answer these questions,
we started a quest to find out
high level information architecture patterns
inside some of the most popular social websites

The results...

Starting from...

Social web systems common model uxtopia.com
You
THE USER HERSELF
Who you are

Social web systems common model uxtopia.com
But... who are you?

Social web systems common model uxtopia.com
THE USER HERSELF
IDENTIFIER
PROFILE
ACTIVITY
CONTENT
CONSUMPTION
Who you are
Starting from scratch, you are...
a name (IDENTIFIER) your personal data (PROFILE),
what you do (ACTIVITY), things you make (CONTENT),
and what you consume (CONSUMPTION)

Social web systems common model uxtopia.com
THE USER HERSELF
IDENTIFIER
PEOPLE
PROFILE
ACTIVITY
CONTENT
CONTENT
CONSUMPTION
Who you are
This means that you exist both as a person and a content maker

Social web systems common model uxtopia.com
THE USER HERSELF ACTIONS
IDENTIFIER
PEOPLE
PROFILE ON USER
ACTIVITY
CONTENT
CONTENT
ON CONTENT
CONSUMPTION
Who you are What you can do
...so things that can be done are about people or content

Social web systems common model uxtopia.com
THE USER HERSELF ACTIONS 1º DEGREE CONNECTION
IDENTIFIER
PEOPLE
PROFILE ON USER NETWORK
ACTIVITY
CONTENT
CONTENT
ON CONTENT SUSCRIBERS
CONSUMPTION
Who you are What you can do Who are with you
Actions on users drive to people connections: NETWORKS.
Actions on content drive to content connections: SUSCRIBERS

Social web systems common model uxtopia.com
THE USER HERSELF ACTIONS 1º DEGREE CONNECTION SYSTEM INTELLIGENCE
IDENTIFIER SIMILAR USERS
PEOPLE
PROFILE FRIENDS ACTIVITY
ON USER NETWORK
ACTIVITY USERS CLASSIFICATION
CONTENT
CONTENT RELATED CONTENT
ON CONTENT SUSCRIBERS
CONSUMPTION CONTENT CLASSIFICATION
Who you are What you can do Who are with you What is gathered
The system gathers data. Then extracts and groups meaning

Social web systems common model uxtopia.com
THE USER HERSELF ACTIONS 1º DEGREE CONNECTION SYSTEM INTELLIGENCE
IDENTIFIER SIMILAR USERS
PEOPLE
ECOSYSTEM
PROFILE FRIENDS ACTIVITY
ON USER NETWORK
ACTIVITY USERS CLASSIFICATION
CONTENT
CONTENT RELATED CONTENT
ON CONTENT SUSCRIBERS
CONSUMPTION CONTENT CLASSIFICATION
Who you are What you can do Who are with you What is gathered
When people and content connect, you´ve got an ecosystem

Social web systems common model. The simplified model uxtopia.com
(v1)
THE USER HERSELF ACTIONS 1º DEGREE CONNECTION SYSTEM INTELLIGENCE
IDENTIFIER SIMILAR USERS
PEOPLE
ECOSYSTEM
PROFILE FRIENDS ACTIVITY
ON USER NETWORK
ACTIVITY USERS CLASSIFICATION
CONTENT
CONTENT RELATED CONTENT
ON CONTENT SUSCRIBERS
CONSUMPTION CONTENT CLASSIFICATION
Who you are What you can do Who are with you What is gathered
LEGEND
Main components
The big blocks
Things you can do
Browsing paths

Social web systems common model. The extended model uxtopia.com
(v1)
THE USER HERSELF ACTIONS 1º DEGREE CONNECTION SYSTEM INTELLIGENCE
IDENTIFIER ON USER NETWORK SIMILAR USERS
NAME ADD AS FRIEND FRIENDS SIMILAR USERS
URL BLOCK THIS USER FANS
COMMENT THIS USER RECOMMENDERS USERS CLASSIFICATION
SEND A MESSAGE GROUPS
PROFILE LEVELS
PEOPLE
COMMENTS ABOUT USER
PERSONAL DATA
RESUMÉ FRIENDS ACTIVITY
CONTACT INFORMATION
FRIENDS ACTIVITY
ELSEWHERE PRESENCE
INTERESTS
ECOSYSTEM
ACTIVITY
ACTIVITY
CONTENT CONTENT CLASSIFICATION
ON CONTENT SUSCRIBERS
CONTENT STATISTICS
PLAY/VIEW/LISTEN SUSCRIBERS
USER FOLDERS MORE FROM THE USER
COMMENTS ABOUT CONTENT
COMMENT
USER CONTENT GROUPS ALL PEOPLE TAGS
SUSCRIBE
CONTENT
USER TAGS
ADD TO LIST
RELATED CONTENT
FAVORITE
CONSUMPTION RATE RELATED CONTENT
SUSCRIPTIONS TAG THIS
PLAYLISTS FLAG THIS
FAVORITES SEND BY EMAIL
POST TO OTHER SITE

Checking out
model´s validity

Social web systems common model. Checking model validity uxtopia.com
CONTENT IDENTIFIER
CONTENT NAME
PROFILE
ON CONTENT
PERSONAL DATA
PLAY
RATE
POST TO OTHER SITE CONTENT CLASSIFICATION
SEND BY EMAIL
MORE FROM THE USER
FAVORITE
ADD TO LIST
RELATED CONTENT
FLAG THIS
COMMENT RELATED CONTENT
SUSCRIBE
SUSCRIBERS
COMMENTS ABOUT CONTENT
CONTENT CLASSIFICATION
STATISTICS

Social web systems common model. Checking model validity uxtopia.com
IDENTIFIER NETWORK
COMMENTS ABOUT USER
NAME
PROFILE ON USER
PERSONAL DATA BLOCK THIS USER
ON USER
ADD AS FRIEND
SEND A MESSAGE
NETWORK
FRIENDS
GROUPS
PROFILE
PERSONAL DATA

Social web systems common model. Checking model validity uxtopia.com
IDENTIFIER SIMILAR USERS
SIMILAR USERS
NAME
PROFILE
PERSONAL DATA
FRIENDS ACTIVITY
FRIENDS ACTIVITY
ON USER
COMMENT THIS USER

Social web systems common model. Checking model validity uxtopia.com
IDENTIFIER ON USER
NAME ADD AS FRIEND
SEND A MESSAGE
PROFILE
NETWORK
PERSONAL DATA
FRIENDS
RECOMMENDERS
ACTIVITY
ACTIVITY
PROFILE
RESUMÉ
CONTACT INFORMATION
ELSEWHERE PRESENCE
INTERESTS

Social web systems common model. Checking model validity uxtopia.com
IDENTIFIER ACTIVITY
NAME ACTIVITY
PROFILE NETWORK
PERSONAL DATA FRIENDS
CONTENT
CONTENT
USER TAGS
CONSUMPTION
PLAYLISTS
FAVORITES
CONTENT CLASSIFICATION
STATISTICS

Applying
the model

Social web systems common model. Applying the model: A simple example uxtopia.com
MODEL APPLICATION WIREFRAME
FRIENDS (23)
THE USER HERSELF ACTIONS 1º DEGREE
CONNECTION
John
PROFILE ON USER NETWORK
Ann
FRIENDS
\"Add as friend\"
Flux22
see all
On user actions list: 1º degree blocks list: Friends block patterns
-Add as friend -Friends (*) FRIENDS (number) USER´S FRIENDS
-Comment
-Fans (*)
-Block this person Name
-Groups
-Tag this person
-Etc Name
-Send a message
* Applicable for the
-Etc see all
selected action
1. From the possible actions over the user/participant Profile, we choose \"Add as friend\".
2. From the information blocks available in a first degree connection, there are two that apply to this action: \"Friends\" and \"Fans\".
3. If we choose \"Friends\", there are two patterns available. So we just pick one.

That´s all. Thanks!
ON CONTENT
COMMENT
Boo boo! Clap clap!
ON USER
SEND A MESSAGE
josealberto.sanjose (at) gmail.com