Dezvoltarea aplicaţiilor Web la nivel de client (cursul #7): Proiectarea aplicaţiilor Web sociale

Dr. Sabin Buragawww.purl.org/net/busaco

principii de proiectare a
aplicațiilor Web sociale

P.T. Sudo


“Respect those who come to you with open ears
and foster a sense of community.”


Care sunt modalitățile de interacțiune
cu software-ul și/sau hardware-ul?

Crumlish & Malone (2009)

experiență fizică utilizator↔dispozitiv


Sfera 1: oameni și dispozitive

interacțiuni tradiționale:
manipulare directă – e.g., tastatură & mouse
paradigma WIMP – Window Icon Menu Pointer
suprafețe de redare/interacțiune



interacțiuni naturale:
simțuri (vizual, audio, tactil)
gesturi
emoții & sentimente
recunoașterea utilizatorului (chip, amprentă, voce,…)



interacțiunea dintre utilizator și dispozitivul mobil e facilitată de
tehnologiile Web actuale (HTML, CSS, JavaScript)
detalii la http://tinyurl.com/cliw-devel


exemplificare: Firefox OS

experiența cu utilizatorul la nivel fizic

definirea interacțiunii
dintre oameni și obiecte (dispozitive)


Sfera 2: modele mentale + reprezentările lor

interfață, interacțiune la nivel digital,
modelarea utilizatorului
conținut (static) oferit
versus
interactivitate – activități desfășurate (funcționalități)



exemple de categorii de aplicații Web:
comerț electronic (e.g., recomandare de produse,
monitorizarea prețurilor, licitații etc.)
aplicații colaborative de tip wiki
aplicații Web hibride vizând știrile (news mash-ups)



exemple de categorii de aplicații Web:
comerț electronic (e.g., recomandare de produse,
monitorizarea prețurilor, licitații etc.)
aplicații colaborative de tip wiki
aplicații Web hibride vizând știrile (news mash-ups)
bazate pe un model centrat pe conținut
(preluare, vizualizare, filtrare, partajare,…)




agregare de știri la nivel de client via News Bento

interacțiunea cu sau într-un mediu fizic/virtual
ubicuitate
simulări
obiecte smart
agenți Web inteligenți
virtual/augmented reality


Sfera 3: context de utilizare


discuție: mesaje de eroare

Brazil (1985) – regizor: Terry Gilliam
www.imdb.com/title/tt0088846/

Mesajele de mai jos sunt într-adevăr de folos?
404 not found
fatal error in line 312
literal 13 could not be allocated
internal error: object container empty
an unhandled exception occurred
error exit delayed from previous errors
search failed



Mesajele de eroare trebuie să fie clare



Tonul unui mesaj de eroare
trebuie să inspire încredere
an unknown error occurred



De evitat atitudinea superioară (arogantă)
față de utilizator
You cannot perform this operation!
versus
This operation requires specific
administrative rights.
Do you want to enter your credentials?



Termeni care nu trebuie folosiți:
abort  end, cancel, stop
available  ready
boot  start, run
error
execute  complete
hit  press, depress
invalid  not correct/good/valid
kill  end, cancel
output  report, list, display
terminate  end, exit



Utilizatorul nu trebuie să se simtă vinovat
în urma acțiunii realizate de software
(oamenii sunt mai importanți decât programele)



De oferit metode de (auto-)corectare a greșelilor





de oferit feedback pozitiv – vezi și http://fab404.com/

comunitate = grup de persoane având interese comune

ierarhie strictă

versus

rețea emergentă


Sfera 4: comunități de utilizatori

comunitate de practică
(community of practice)

Membrii aparțin involuntar
grupului
(asignați de un superior)

Membrii sunt voluntari
(nu se implică din obligație)

Axat pe realizarea unui
produs/serviciu (delivery)
Aparține unei structuri ierarhice
din cadrul unei organizații

În evoluţie permanentă
learning, making & improving
Definită de relațiile dintre
membri, nu e legată strict de o
organizație
Mulțimi ad-hoc, cercuri, prieteni

Echipe, management, militari

grupurile de lucru și comunitățile de practică
sunt complementare


grup de lucru
(work team)

trăsătură importantă: caracterul conversațional
clasic: asociații locale, confrerii, publicații etc.
facilitat de Internet & Web
de la e-mail, forumuri și grupuri virtuale la mesagerie
instantanee, rețele sociale & sisteme de tip MMORPG
(Massively Multiplayer Online Role-Playing Game)



comportament social mediat
de tehnologii (Web) actuale
niveluri:
personal (intim) vs. grup (tribal) vs. global (viral)




ecosisteme sociale bazate de hipermedia
(Crumlish & Malone, 2009)


aspecte sociale la nivel de întreprindere
(Crumlish & Malone, 2009)

oamenii sunt animale sociale
persoane de care avem nevoie (Mart Murdvee, 2006):
teenagerfriend, entertainer
business-oriented personsecretary
in spare timetrainer/instructor
elder personnurse, helpmate



oamenii sunt animale sociale
posibilitatea de a folosi agenți de interfață cu rol de…



secretară digitală – „digital butler” (N. Negroponte, 1995)
+
e-entertainer, e-nanny, e-pal, e-trainer,
e-librarian, e-clerk, e-attendant(s) etc.

acces public global la date, informații, cunoștințe
crearea, publicarea, mixarea, partajarea
conținuturilor (resurselor) disponibile pe Web


Sfera 5: conținut


păstrare și partajare de adrese Web via Pocket

experiență interactivă la nivel de ecosistem:
social, spațial, business, în funcție de context
(micro-)blogging, (geo-)tagging,
sisteme de management al conținutului (CMS-uri),
wiki-uri, aplicații Web hibride (mash-ups),
jocuri online, medii virtuale etc.


Sfera 5: conținut

exemplu: Seevl – http://seevl.fm/


Ce șabloane de proiectare există
privind experiența socială cu utilizatorul?

vizează interactivitatea
în cadrul unei aplicații (Web) sociale

Christian Crumlish & Erin Malone, 2009


Social UX Patterns

social computing

Thomas Erickson (2013)
www.interaction-design.org/encyclopedia/social_computing.html


Social UX Patterns

comunicarea cu utilizatorii (și potențialii clienți)
trebuie să fie firească, umană

humane interfaces


Software as a human

adoptarea unui ton conversațional, informal
utilizarea unui limbaj contemporan,
nu livresc, birocratic sau stradal
pentru instrucțiuni, mesaje și alte informații
oferite de sistem vizitatorului/clientului


Software as a human

de evitat un jargon obscur, argou, regionalisme etc.

being cute ≠ being real


Software as a human

software-ul poate pune întrebări (ask questions)
utile pentru mesaje explicative, text de ajutor,
etichete în cadrul formularelor Web,…


Software as a human

„you” versus „my”
„my” indică punctul de vedere al utilizatorului
My Yahoo!, My feed, My watchlist
„you” încurajează dialogul
exemple: CiteULike, YouTube


Software as a human

„you” versus „my”
de utilizat atunci când trebuie etichetate resurse
ce aparțin sau sunt alese de un anumit utilizator
your photostream, your contacts, your groups,…


Software as a human

no joking around
interfața nu trebuie să expună mesaje neserioase ce pot
conduce la confuzii sau la bulversarea utilizatorului
fiecare persoană poate avea un unic simț al umorului


Software as a human

aspect important: onestitatea interacțiunii

dark pattern = a type of user interface that appears
to have been carefully crafted to trick users
into doing unwanted things


Software as a human

http://darkpatterns.org/

implicare (engagement)
identitate (identity)
prezență (presence)
reputație (reputation)


Representing the Self

aspecte de interes:
cum evităm startul „rece”?
cum încurajăm persoanele să folosească aplicația
și să participe?
cum rezolvăm problema intimității (privacy)?
cum încurajăm utilizatorii de tip early adopters?


Implicarea utilizatorului (user engagement)


www.drawnimal.com
ajută copiii să înceapă să deseneze și să învețe alfabetul

sfat:
„keep the user’s experience focused on the application”
(Bert Appward, 2012)

www.html5rocks.com/webappfieldguide/


Implicarea utilizatorului (user engagement)

de utilizat acest șablon când sunt necesare
informații personale/private
trebuie luate în considerație intimitatea și securitatea


Sign up & registration

de utilizat acest șablon când sunt necesare
informații personale/private
trebuie luate în considerație intimitatea și securitatea
e.g., tranzacții financiare
necesitând plăți, livrări, monitorizare etc.



se va colecta minimul de informații necesare ce permit
utilizatorului să participe în cadrul sitului

de considerat dacă e într-adevăr oportună/obligatorie
crearea unui cont în cadrul aplicației





oferiți explicații privind fiecare fragment de date solicitate
în termeni de beneficii aduse utilizatorului
exemplu:
geo-location provides recommendations
of relevant items: stores, hospitals,…

aplicația va solicita datele de autentificare
cât mai tardiv posibil



conduceți utilizatorul la ultima activitate
pe care o efectua înainte de realizarea autentificării





permiteți crearea unui identificator unic ușor de memorat
și de verificat (e.g., adresa de poștă electronică)



de precizat clar ce elemente sunt obligatorii la
introducerea numelui de utilizator (username) și a parolei
+ eventuale alte metode de autentificare



oferiți feedback pozitiv (eventual, asistență suplimentară)
în cazul în care utilizatorul greșește

de inclus verificări bazate pe CAPTCHA
doar dacă e absolut necesar
???



de luat în calcul eliminarea procesului de creare de cont
prin adopția altor metode de autentificare/autorizare
standarde deschise: OpenID, OAuth, WebID
vezi inițiativa Mozilla Persona: www.mozilla.org/persona/




pentru alte detalii, de parcurs Luke Wroblewski,
“Sign Up Forms Must Die”, A List Apart Magazine, 2008
http://www.alistapart.com/articles/signupforms/

includerea unui buton ușor de recunoscut și
corespunzător etichetat
Sign In/Login


Sign in (autentificare)


Social UX: principii

dacă e posibil, permiteți ca utilizatorul să rămână
autentificat pentru o anumită perioadă de timp


Sign in (autentificare)


Autorizare

de folosit atunci când anumite facilități vor recurge
la date (resurse) provenite din alte situri/aplicații sociale


???!

de oferit noilor veniți
diverse modalități de explorare + ajutor
se pot prezenta cele mai importante/utile facilități


Întâmpinarea utilizatorului (welcome area)

de evitat:
metode intruzive de interacțiune – e.g., pop-up-uri
obligarea utilizatorului să facă turul de bun venit
presupunerea că utilizatorul nu se descurcă
(i.e., yet another stupid user)


Întâmpinarea utilizatorului (welcome area)

“The ability to create and manage an identity within the
context of the site is the foundation upon which the rest
– contributions, relationships, reputations – is built.
It’s about people and who they portray themselves to be.”
Crumlish & Malone, 2009


Identitatea utilizatorului

user profile
personal dashboard
identity/contact cards
avatars



diverse fațete privind identificarea
account unique identifier
login identifier
public identifier(s)

DB key
session authentication
social identify



user profile = „fața” utilizatorului în cadrul sistemului
generarea unei arii publice – disponibilă altora –
pentru a lista toate informațiile și conținuturile relevante
despre un utilizator


Profilul utilizatorului

numele afișat (display name) nu trebuie să fie identic
cu numele de cont (username)

aspecte importante privind securitatea:
furtul identității + phishers



permiteți utilizatorilor să controleze nivelurile de acces
la informații personale

privat vs. „prieteni” vs. public



utilizatorii trebuie să aibă posibilitatea
să-și modifice profilul (customization)



aplicația va stoca cantitatea optimă de date necesare
pentru realizarea relațiilor dintre utilizatori sau vizând
activitățile întreprinse în cadrul comunității virtuale





dacă e posibil, se vor oferi mijloace de migrare a profilului
(conținut, date personale,…)
de la ori spre alte aplicații/servicii
diverse inițiative: Data Liberation, OpenSocial API,
Portable Contacts, Yahoo! Social Platform


alte facilități de implementat (probleme de rezolvat):
profile decorating
profile claiming
faceted identity

users want to check in and see status updates
from their friends, current activity from their social graph,
comments from friends on recent posts, etc.


Personal dashboard

acompaniază profilul utilizatorului
trebuie să ofere informații și
acces la activitățile frecvent dorite de utilizator
încurajarea vizitelor periodice


Personal dashboard


pentru strategii și exemple de proiectare, a se studia
S. Few, Information Dashboard Design: Displaying Data
for At-a-Glance Monitoring, Analytics Press, 2013

pun la dispoziție informații suplimentare
despre un utilizator + acțiuni specifice:
subscribe, follow, connect, unsubscribe, block,…


Identity/contact cards

reprezentări vizuale asociate unei identități online
“Profile pictures – or avatars, in online parlance –
show people at our thinnest, handsomest, most fun.”
(Gillian Reagan, 2008)


Avatars

reprezentările alese de utilizator pot avea impact
și asupra credibilității percepute a acestuia


Avatars

aplicația va oferi suport pentru utilizarea de avataruri
alternative via imagini multiple preluate și stocate
pentru viitoare folosiri


Avatars

suplimentar, pot fi atașate expresii speciale
(e.g., via emoticoane)
privind situația curentă a utilizatorului
+ o stare de spirit (mood particular): delighted, bored etc.


Avatars

maximizarea oportunităților de declarare a propriei
identități în cadrul unui mediu social virtual


Prezența online

maximizarea oportunităților de declarare a propriei
identități în cadrul unui mediu social virtual
gestionarea prezenței online:
publish, display, maintain (update), subscribe to, filter


Prezența online

Social UX


prezența online
la nivel de organizație

informații importante:
status
current task
mood
environment
location
platform/device status


Prezența online

șabloane bine-cunoscute:
Availability
Buddy List
Microblogging
Updates


Prezența online

a person participating in a social structure expects
to develop a reputation and hopes for insight into
the reputations of others


Reputația utilizatorului

reputația influențează comportamentul
un sistem care ia în considerație reputația implică
și monitorizarea comportamentului dezirabil
al utilizatorului, plus recunoașterea lui publică



reputația influențează comportamentul
un sistem care ia în considerație reputația implică
și monitorizarea comportamentului dezirabil
al utilizatorului, plus recunoașterea lui publică
exemple: Klout, Mozilla OpenBadges



named levels
definirea unei familii de reputații (ierarhice) pentru
a permite descoperirea și identificarea utilizatorilor
de tip high-quality contributor
BronzeSilverGold
Hated HostileUnfriendlyNeutralFriendly…



labels
identificatori speciali pentru a „gratifica” o persoană
permit evaluări non-liniare a reputației
exemplificări:
Top Contributor (Yahoo! Answers), Troll (37 Signals)




Social UX

poate fi măsurată și via premii – awards:
Collectible achievements
Peer-to-peer achievements
Testimonials (Personal recommendations)
exemple: LinkedIn, P2PU, Xbox LIVE, Yelp etc.



poate fi măsurată și prin ranguri – rankings
Points
Leaderboard
anti-pattern
Top N
(uneori)



“Social networks consist of people
who are connected by a shared object.”

Jyri Engeström


Obiecte cu rol social (social objects)

“You can have a conversation without a social object.
You cannot have a social object without a conversation.
It is the conversation that makes the object ‘social’.”

JP Rangaswami



șabloane de proiectare vizând colectarea
Saving, Favorites,
Displaying,
Add/Subscribe,
Tagging, Find with tags, Tag cloud



partajare & (re)folosire
la nivel personal: Bookmarklet, Send/Share widget

la nivel privat (direct): Send this, Give Gift
la nivel public: Share this, Embedding



de la bârfă tribală la acțiuni virale
“The key is to design flexible frameworks and spaces
for people to define their own sense of place.”
Crumlish & Malone, 2009


Difuzare (broadcasting)

studiu de caz tipic: blog-urile + blogosfera
Blogs: presentation
Blogs: ownership
Microblogging


Difuzare (broadcasting)

un document de tip „Terms of Service Agreement”
oferind cadrul legal privind (re)utilizarea serviciilor
informaționale și elementelor de conținut disponibile
pe un sit Web
aspect important: respectarea drepturilor de autor


Terms of service

tipuri de licențe deschise:
Public Domain
http://publicdomainmanifesto.org/
Creative Commons
http://creativecommons.org/licenses/
Copyleft
http://www.gnu.org/copyleft/


Terms of service


Feedback

recurgerea la diverse metode de colectare a feedback-ului
(anti-)șabloane de proiectare:
Vote to promote, Thumbs up/down ratings,
Ratings (stars sau punctaje 1—5), Comments, Reviews etc.

șabloane importante:
Manage project
Voting (Polls, Surveys)
Collaborative editing
Edit this page
Wiki way
Crowdsourcing


Mijloacele de colaborare

aplicația poate oferi recomandări („inteligente”)
pe baza datelor colectate de la utilizator
pentru a identifica similarități și
a oferi sugestii folositoare privind resurse de interes


Recomandări

instrumente & API-uri vizând recomandările (sociale):
Apache Mahout – http://mahout.apache.org/
Amazon Mechanical Turk – http://www.mturk.com/
Hunch – http://hunch.com/developers/
Zemanta – http://developer.zemanta.com/
www.programmableweb.com/apis/directory/1?apicat=Recommendations


Recomandări


recomandările automate „împing” resursele de interes
spre utilizator; nu vor mai fi descoperite la întâmplare

aspecte de interes:
căutare în timp-real
căutare conversațională (subiectivă)

a se studia P. Morville & J. Callender,
Search Patterns, O’Reilly, 2010
http://searchpatterns.org/library.php


Social search

www.facebook.com/about/graphsearch

critici privind intimitatea:
http://actualfacebookgraphsearches.tumblr.com/


Facebook Graph Search

abilitatea de a găsi persoane
– „prieteni”, cunoscuți, colegi, amici, rude,… –
și de a le include în anturajul utilizatorului


Relationships

abilitatea de a găsi persoane
– „prieteni”, cunoscuți, colegi, amici, rude,… –
și de a le include în anturajul utilizatorului

terminologie:
cohort, colleague, contact, family, fan,
follow, follower, friend


Relationships

șabloane de proiectare importante:
Find people
Adding friends
Circles of connections
Publicize Relationships
Unfriending
Groups


Relationships

norme
definesc anumite comportamente dorite
în cadrul interacțiunii cu un sistem


Managementul comunității

norme
impuse la nivel social

sunt mai puțin restrictive decât regulamentele



norme
specificate explicit – e.g., FAQ, user agreement
versus
implicite – informale, constituite pe baza interacțiunilor
frecvente din cadrul unui grup



reguli
necesitatea publicării unui set de reguli (guidelines)
clar și ușor de găsit



aplicația poate oferi suport și pentru
administrare colectivă (collaborative governance)
+
moderare la nivel de grup
Collaborative filtering
Report abuse



oferirea suportului pentru organizarea de activități
în funcție de locația geografică
Being local


Participarea la evenimente

facilitarea întâlnirilor face-to-face dintre persoane:
pregătirea evenimentului (privat/public) prin preluarea
datelor despre locație, perioadă de desfășurare,
descriere, considerații speciale, invitați etc.
de oferit un calendar partajabil



de oferit detalii privind locația
(adresa concretă, costuri, ambianță, restricții etc.)
+
elemente de interes învecinate
(parcare, restaurant, automat bancar,…)



utilizatorii vor putea indica posibila participare (RSVP),
eventual invitându-i și pe alții
(e.g., selectați din rețeaua de „prieteni”)



în timpul desfășurării evenimentului, se va oferi suport
pentru realizarea de comentarii în timp-real

integrarea aplicațiilor Web sociale consacrate
(inclusiv la nivelul dispozitivelor mobile)





după încheierea evenimentului, pot fi oferite instrumente
de colectare și partajare a resurselor de interes:
fotografii, prezentări, filme, păreri etc.



după încheierea evenimentului, pot fi oferite instrumente
de colectare și partajare a resurselor de interes:
fotografii, prezentări, filme, păreri etc.

de asemenea, utilizatorii pot fi rugați
să completeze și un formular de feedback

suplimentar, pot fi implementate următoarele facilități:
crearea & trimiterea de invitații personalizate
găsirea/înscrierea la un eveniment
pe baza datei calendaristice sau a locației favorite
reamintiri periodice – reminding



de luat în calcul și includerea suportului
pentru vizualizare/navigare cartografică
geo-tagging
geo-mapping
geo-mashing: neighborhood, mobile & location
Best Practices and Guidelines for Location Based Services
http://www.ctia.org/content/index.cfm/AID/11300



aspecte importante:
open source, open infrastructure,
open architecture, open standards,
open access, open content (open data), open identity
S. Buraga, „De câte stele sunt datele d-voastră?” (2012)
www.slideshare.net/busaco/de-cte-stele-sunt-datele-dvoastra


Openness

câteva șabloane de proiectare:
Badging
Embedded semantics
Import
Hosted Modules
Open APIs


Openness


Câteva exemplificări utile?

Convertirea unui sit Web tradițional la unul social


studiu de caz

Convertirea unui sit Web tradițional la unul social
soluții posibile:
talk like a person (software as a human)
conturi personalizate: sign in/sign up
activități privind resursele: tagging, rating, sharing
identitatea utilizatorului: contact cards, attribution
relații între utilizatori: friends, followers, grafuri sociale


studiu de caz

„People come and read my content,
but they’re invisible to each other…”


studiu de caz

„People come and read my content,
but they’re invisible to each other…”
soluție:
oferirea mai multor niveluri de participare

presence indicators, peer-to-peer awards, nudging,
public conversation, followers badge


studiu de caz

„I have an active community on my Website,
but people are misbehaving!”


studiu de caz

„I have an active community on my Website,
but people are misbehaving!”
soluții:
norme de conduită (norm) + model citizen
managementul comunității – e.g., reporting abuse
reputation
ratings


studiu de caz

Interacțiune via dispozitive mobile


studiu de caz

design Web
responsiv

Interacțiune via dispozitive mobile
soluții de adoptat:
geo-location, gatherings, current status broadcasting
șabloane de proiectare tipice: infinite lists, one-click
interacțiune naturală – e.g., bazată pe gesturi
http://www.w3.org/Mobile/


studiu de caz


studiu de caz

mobile & location


studiu de caz

status broadcasting


pentru alte detalii, de studiat C. Crumlish & E. Malone,
Designing Social Interfaces, O’Reilly, 2009
www.designingsocialinterfaces.com/patterns.wiki


episodul viitor: evaluarea proiectului (D)
luni, 18 noiembrie, 9h – C308

Dezvoltarea aplicaţiilor Web la nivel de client (cursul #7): Proiectarea aplicaţiilor Web sociale

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (20)

Semelhante a Dezvoltarea aplicaţiilor Web la nivel de client (cursul #7): Proiectarea aplicaţiilor Web sociale

Semelhante a Dezvoltarea aplicaţiilor Web la nivel de client (cursul #7): Proiectarea aplicaţiilor Web sociale (16)

Mais de Sabin Buraga

Mais de Sabin Buraga (20)

Dezvoltarea aplicaţiilor Web la nivel de client (cursul #7): Proiectarea aplicaţiilor Web sociale