Upload
michael-bolognino
View
217
Download
0
Embed Size (px)
Citation preview
8/14/2019 Wetpaint Injected Interaction
1/77
Wetpaint,Inc. Confidential 1
WetpaintToGo InteractionDefinitionMoreSocial. MoreTraffic.MoreRevenue.
2008Wetpaint.com,Inc.
May
18,
2008
Interaction Documentation
8/14/2019 Wetpaint Injected Interaction
2/77
Wetpaint,Inc. Confidential 2
1. USER EXPERIENCE OVERVIEW .................................................................................................... 52. CUSTOMIZED LOOK AND FEEL .................................................................................................... 93. EMBEDDED CONTENT ON A SITE ............................................................................................... 113.1DISPLAYING USER-GENERATED CONTENT ........................................................................................ 113.2CONTENT AREA ATTRIBUTES ............................................................................................................. 123.3MULTIPLE EDITABLE AREAS ON A PAGE........................................................................................... 133.4AUTHENTICATION REQUIREMENTS.................................................................................................... 144. WYSIWYG CONTENT EDITING .................................................................................................... 164.1.BASIC EDITING.................................................................................................................................... 164.2.TABLE FORMATTING .......................................................................................................................... 204.3 PAGE LINKING ................................................................................................................................. 244.4SPELLCHECK ........................................................................................................................................ 274.5ADDING IMAGES................................................................................................................................... 284.6ADDING WIDGETS................................................................................................................................ 335. KEYWORD TAGS .............................................................................................................................. 456. MODERATION TOOLS .................................................................................................................... 486.1LOCKING/UNLOCKING CONTENT AREAS .......................................................................................... 496.2RENAME TITLE .................................................................................................................................... 516.3DELETE CONTENT ............................................................................................................................... 536.4RESTORE CONTENT ............................................................................................................................. 557. REVISION HISTORY ........................................................................................................................ 577.1VIEWING REVISION HISTORY ............................................................................................................. 577.2DELETE/REVERT VERSION ................................................................................................................. 59
8/14/2019 Wetpaint Injected Interaction
3/77
Wetpaint,Inc. Confidential 3
8. REPORTING ....................................................................................................................................... 638.1RECENTLY UPDATED CONTENT AREAS ............................................................................................. 638.2DELETED CONTENT ............................................................................................................................. 658.3QUESTIONABLE LANGUAGE REPORT ................................................................................................. 668.4CONTENT CARD ................................................................................................................................... 679. NEW PAGES ........................................................................................................................................ 69PARTNER CREATED PAGES VS.USER GENERATED PAGES..................................................................... 699.1ADD NEW PAGES................................................................................................................................... 699.2NAVIGATION......................................................................................................................................... 73VERSION HISTORY ............................................................................................................................... 75APPENDIX ................................................................................................................................................ 77
8/14/2019 Wetpaint Injected Interaction
4/77
Wetpaint,Inc. Confidential 4
Overview
Document Overview
ThisdocumentisdesignedtobeusedasareferenceforProductManagers,Designers,andUser
Experience
Practitioners
who
are
interested
in
integrating
the
Wetpaint
To
Go
product
offering.
It
describestheoveralluserexperience,theinteractionstandardsandparadigms,aswellasthespecific
featuresthatenablegenerationofusergeneratedcontentonyoursite.
Eachfeaturechapterincludesthefollowingsections,asappropriate:
Overviewahighleveldescriptionofthefeatureanditspurpose. Examplesamplewireframeuserinterface(UI)withabaselinedescription. Permissionsalistoftherolerequirementstoaccessandusethefeatures. Interaction Flow the sequenceofactions, includingvariations thereof, thatauser can
performwheninteractingwiththesystem.
User Interface (UI) Elements (Dialogs, Menus, Tooltips, and Lightboxes) the varyingcomponentsanddialogsprovidedwiththecodetosupportthefeatures.
Customizable Elements which elements inherit your look and feel and which arecustomizableviaoverrides.
Thisdocumentisnotintendedtoactasanimplementersguideforsoftwaredevelopment. Itdoesnot
coverall
of
the
technical
details
or
architectural
diagrams.
Forthepurposesofthisdocumenttherearenotechnicaldifferencesbetweencontentarea(s)that
coexistwithstaticcontentonyourpublishedpagesandcontentarea(s)thatexistonusercreatedpages
viaashellpage.
ThedocumentincludesanAppendixlistingothermaterialtoreferenceinconjunctionwiththe
informationcontainedherein.
8/14/2019 Wetpaint Injected Interaction
5/77
Wetpaint,Inc. Confidential 5
1. User Experience Overview
WetpaintToGoallowsyoutoembedusergeneratedcontentdirectlywithinyoursitepages.Wetpaints
userfriendlyandwelltestedtoolsetusesasimplesetofinterfacestoallowuserstoaddcontentwith
minimalinstructionandinterruption. Theapplicationdesignandparadigmsleveragecommon
interactionstandards,
making
for
an
intuitive
and
natural
end
user
content
creation
experience.
Each
toolandcorrespondinghelptopicisintendedtobeattheusersfingertipstofacilitateeasycontent
buildingandutilization.
Additionally,theseelementscanbepluggedintoyoursitewithminimaleffort. Followingisabrief
overviewofthevarioususerinterfaceelementsofWetpaintToGo.
8/14/2019 Wetpaint Injected Interaction
6/77
Wetpaint,Inc. Confidential 6
Embeddable Content:
WetpaintToGoenablesthecreationofuserpoweredcontentembeddedcontextuallywithinyoursite.
ThiscontentisservedinlineonthepagesofyourchoosingformaximumSEOvalue. AllSEOandpage
rankcreditareyours. Additionally,theembeddedcontentinheritsyoursiteslookandfeel,makingfor
aconsistentuserexperience. Thesiteandlocationoftheembeddedcontentisdeterminedbyyou. For
moredetailsonEmbeddedContentseesection3.0.
Tools:
Associatedwitheveryembeddablecontentareaarethetoolsnecessarytoallowaccesstotheedit
dialogsandmoderatortools.Thesetoolsaresituateddirectlyaboveeachcontentarea.
Dialogs:
Dialogsareusedfornearlyallprimaryfunctionstomanipulatecontent,includingWetpaintsWYSIWYG
toolbar,keywordtagediting,theconfirmationofactionslikedeletingcontent,andmore.Dialogsare
modalinnatureandmustbeacteduponorclosedinorderfortheusertoreturntotheparentscreen.A
dialogcaninvokeotherdialogswhichcanbeprogressivelyclosed. Forexample,theWYSIWYGdialog
caninstantiatetheaddimagedialog. Tofocususeractionsanddelineateeditableareas,allnon
editableareasareghostedbackinthebackgroundtomakesuretheuserisawareofthecontextand
primaryactionsrequired.
8/14/2019 Wetpaint Injected Interaction
7/77
Wetpaint,Inc. Confidential 7
Lightboxes:
Similarinbehaviortodialogs,lightboxesarereservedforlargerdisplayneeds,astheytakeupthe
majorityofthescreen.Leveragedselectively,lightboxesareusedforpresentinguneditablecontentlike
reportsandcontentareahistory.Aswithdialogs,theprimarylightboxmustbeclosedinordertoreturn
tothepreviousactionablescreen.
Menus:Menusarepresentedwhentherearemultipleactionsausermaytake.Forexample,ineditmode,ifa
userclicksintoatablecelltheyarepresentedwithamenucontainingmultipleoptionsformanipulating
thetable. Menusaredrawnonthepagetoappearcontextuallyclosetothecursorinsertionpoint,but
farenoughawaytonotinterferewiththecompletionofanydesiredaction.
Help:
Contextualhelpisprovidedthroughoutthesystemviatooltips.Userscanclickonalinktoaccessahelp
dialogpopulatedwiththerelevantinformationneededtoperformthetaskathand.
8/14/2019 Wetpaint Injected Interaction
8/77
8/14/2019 Wetpaint Injected Interaction
9/77
Wetpaint,Inc. Confidential 9
2. Customized Look and Feel
SelectelementsoftheWetpaintToGouserinterface(UI)elements(includingdialogs,lightboxes,
menus,andtooltips)arecustomizablethroughCSSoverridesthatyoucanpassviaJavaScript. These
customizableelementsarefairlystandardizedacrossallWetpaintToGoUIelements. Thissection
documentsthe
global
customization
parameters.
If
there
are
aspects
of
acertain
dialog
or
lightbox
that
areuniquelycustomizabletheyareaddressedintheirrespectivesections.
CSSelementsthatcanbecustomizedviaanoverrideincludethefollowing:
Titlebaro Backgroundcolorsanddialogpiping(i.e.thebordercoloraroundtheentire
dialog)
o Fontcoloro Fonttype/faceo Fontsize(withinarangeof1030pixels)
Instructionaltextandlabeltexto Fontcoloro Fonttype/faceo Fontsize(withinarange1030pixels)
Buttonso Fontcoloro Fonttype/faceo Fontsize(withinarangeof1030pixels)o Backgroundcoloro Bordercoloro Allbuttoncustomizationsaresetglobally.Additionally,specialcustomizations
maybeaddedtoOKandCancelbuttons
Linkso Linko Visitedlinko Activelinko
Hover
Belowisanexampledialogindicatingcustomizableelements:
8/14/2019 Wetpaint Injected Interaction
10/77
Wetpaint,Inc. Confidential 10
8/14/2019 Wetpaint Injected Interaction
11/77
Wetpaint,Inc. Confidential 11
3. Embedded Content on a Site
3.1 Displaying User-generated Content
Theplacementofusergeneratedcontentareasisdeterminedbyyou.
Example
Thefollowingfiguredepictsagenericsitewithacontentareaonthewebpage.Theonlyindicationthat
thisisusergeneratedcontentistheappearanceoftheeditingtoolsatthetopoftheareaandthe
attributesbelowthecontentarea.
Permissions
Anyuser
(even
anonymous
users)
can
read
this
information.
8/14/2019 Wetpaint Injected Interaction
12/77
Wetpaint,Inc. Confidential 12
Inherited Elements
UsergeneratedcontentneednotreceiveCSSoverridestomirroryoursiteslookandfeel,asthedefault
displaywillbeinheritedfromyoursitesownCSS. Someexamplesofthisinclude:
Backgroundcolor Fontcolor Fontface(browsersaferecommended) Fontsize Linkcolors(activelink,visitedlinks)
3.2 Content Area Attributes
Areaattributesareincludedwitheachusergeneratedcontentareaandincludealistingofthekeyword
tagsassociatedwiththecontentarea,linktouserifavailable,linktocontenttools,accesstothe
contentareahistoryandlinktosubpagesifthereareany. Iftheentireareaattributesarenotdesired
other,moresuccinct,attributesoptionsareavailable.FormoredetailsseetheAPIdocumentation.
Permissions:
Anyuser(evenanonymoususers)canreadthisinformation. Formoredetailsonrevisionhistory,see
section7.0.
Example
Username Link:
TheusernamelinkisanoptionalelementwhichrequirestheURLofauserprofilepagehostedbyyour
site.Formoreinformation,seetheTechnicalSpecificationsdocument.
Link to Subpages:Thesubpagesonlydisplaysifthepagehassubpagesandthisfeaturehasbeenincluded.Seesection9.2
Navigationformoreinformation.
8/14/2019 Wetpaint Injected Interaction
13/77
Wetpaint,Inc. Confidential 13
Inherited Elements:
Aswiththeusergeneratedcontentarea,thecontentareaattributesalsoinherittheCSSfromthe
parentpage.
3.3 Multiple Editable Areas on a Page
Overview
YouhavetheoptiontoinstantiatemultipleWetpaintToGocontentareasonadiscretepagewithinyour
site.
Eachcontentareawillfunctionindependentlyandincludeitsownsetofattributesandrevisionhistory.
AusercanediteachareabyclickingontheEasyEditbuttonassociatedwiththerespectivecontentarea.
Ausermaynotjumpfromareatoareawhileineditmodetheymustcompletelycloseoutofone
contentareaseditmodetoengagetheEasyEdittoolsforanotherneighboringcontentarea.
Allrequirements
specified
in
3.1
regarding
the
display
of
user
generated
content
are
the
same
for
the
displayofcontentinmultipleareas.
Example
Thefollowingfigureshowstwoeditablecontentareassidebysideonapage. Thedecisiontoinclude
multiplecontentareasandtheirrelativelayoutisentirelyuptoyourdesign.
8/14/2019 Wetpaint Injected Interaction
14/77
Wetpaint,Inc. Confidential 14
3.4 Authentication Requirements
UsersmustbeauthenticatedinordertoedittheWTGcontent;thisincludeseditingcontent,tags,
moderationtoolsandaddpagefunctionality. Ifauserisnotrecognizedaftertheyclickonafunction
theyreceiveacustomizableerrormessageencouragingthemtologinorcreateanaccounttointeract
withthesite.
8/14/2019 Wetpaint Injected Interaction
15/77
Wetpaint,Inc. Confidential 15
Interaction
User Experience ModulesThefollowingdialogisutilizedwhenauserisattemptingtoaccessafeaturetheydonothave
permissiontouse.
LoggedInDialog: Thetextinthedialogcanbeoverriddenbycontentofyourchoosingandshould
includealinktoyourlogin/signuppagesotheycanaccesstheWetpainttoGoFunctionality.
Allthefunctionaldescriptionsinthefollowingsectionsassumethattheuserhasbeenauthenticated
andcanaccessthefunctionality.
8/14/2019 Wetpaint Injected Interaction
16/77
Wetpaint,Inc. Confidential 16
4. WYSIWYG Content Editing
ThefollowingsectioncoversthecompleteWYSIWYGeditingexperienceincluding:texteditingand
formatting;embeddingimages,richmedia,andwidgets;linking;tables;integratedspellcheck,etc.
PermissionsAusermustbeauthenticatedinordertoeditcontentareasusingallWYSIWYGrelatedfeaturesand
tools.Allpageeditsbyindividualusersaretherebytracked.
4.1. Basic EditingThissectioncoverscoreeditingfunctionality,including: multiplefonts,fontsizes,fontcolors,
alignment,andbulletedandnumberedlists.
Example
Thefollowingfiguredepictsagenericeditablecontentarea.
Figure4.1.1 Representsanearlyemptyeditablecontentareaonagenericwebpage.
8/14/2019 Wetpaint Injected Interaction
17/77
Wetpaint,Inc. Confidential 17
Figure4.1.2 Inthefigureabove,theuserhasengagedtheeditingtoolsetbyclickingontheEasyEdit
button.Whileineditmodeallnoneditableareasareghosted. ThefloatingWYSIWYGtoolbarfollows
theuserashe/shescrollsdownthepage,keepingthetoolseasilyaccessible. Additionally,thetoolbar
canbeclickdraggedandanchoredbytheusertothedesiredlocationonthescreen. Thetoolbarwill
remaininthispositionuntiltheeditingsessioniscomplete.
8/14/2019 Wetpaint Injected Interaction
18/77
Wetpaint,Inc. Confidential 18
Figure4.1.3 Oncesaved,thepageisdisplayedwiththecontenttheuserenteredwhileineditmode.Interaction Flows
8/14/2019 Wetpaint Injected Interaction
19/77
Wetpaint,Inc. Confidential 19
WYSIWYG Dialogs
Thefollowingdialogsareutilizedduringtheeditingprocess.
EasyEditToolbar: TheWetpaintToGoEasyEditToolbarisintendedtomirrorthebasicfunctionsand
iconographyofmostdocumenteditingtools;mostfeatureshavefamiliarcorrespondingquickkey
functionsassociatedwiththeme.g.CTRL+Sforsaving.
EditNote: TheEditNoteisanoptionalnotationthatcanbemadeforeacheditausercommitstothe
contentarea. Itisstoredinthehistoryforeachversionandprovidesahandyrecordofeachsuccessive
change.
ReformattedContent: Ifausercopiesandpastescontentfromanunsupportedformat(i.e.Word)or
websitethe
system
will
recognize
that
it
doesnt
recognize
the
format
and
reformat
it
to
match
the
site.
Atthatpoint,itwilllaunchthisdialogtonotifytheuserthattheircontenthasbeenreformatted.
8/14/2019 Wetpaint Injected Interaction
20/77
Wetpaint,Inc. Confidential 20
4.2. Table FormattingUsersareabletoinserttablesintotheirWYSIWYGpagestobetterstructuredataorcreatepagelayouts.
Thefollowingtableattributescanbedefined:tablealignment/textwrapping,borders,cellcolors,
row/columninsertion/deletion,columnsizing,cellselection,cellmerging,andindent/outdent.
Interaction Flows
8/14/2019 Wetpaint Injected Interaction
21/77
Wetpaint,Inc. Confidential 21
Table DialogsThefollowingdialogsareutilizedinthetableeditingprocess.
AddTableDialog: Duringtablecreationthisdialogallowsuserstodeterminethenumberofrowsand
columnsanddefineotherbasictableappearanceproperties.
EditTableDialog: Afteratablehasbeencreated,severalformattingattributescanbeedited.Other
tableeditingcapabilitiesaretriggeredbyarightclickmenu.
8/14/2019 Wetpaint Injected Interaction
22/77
Wetpaint,Inc. Confidential 22
:EditTableCellDialog: Tablecellbordersandbackgroundcolorscanbemodified. TheEditTableCell
dialogisaccessedviatheedittablecelllinkfromwithintheTableControlsidentified.
Table Menus
TableMenu:Thefollowingmenuisusedtoedittablesandisaccessiblebyclickinginatablewhilein
EasyEditmode:
8/14/2019 Wetpaint Injected Interaction
23/77
Wetpaint,Inc. Confidential 23
RightclickTableMenu:Thefollowingmenuisavailablewhentheuserrightclicksinatablewhilein
EasyEditmode.Thismenuallowsausertomanipulatethetableattributesquickly.
IfauserselectstwocellsandrightclicksinatablewhileinEasyEditmodethefollowingmenudisplays
withtheadditionofMergeCellsasanoption.
8/14/2019 Wetpaint Injected Interaction
24/77
Wetpaint,Inc. Confidential 24
4.3 Page Linking
Usersareabletoapplyhyperlinkstotextandimageswithinacontentarea.Theautosuggestfeature
willlistusergeneratedpagesthatcanbelinkedtobasedonthefirstthreeletterstyped.
Example:
Figure4.3.1 Intheaboveexample,auserisaddedalinktothecontentarea.Theyhaveselectedaword
andbegan
typing
in
epis,
the
system
recognizes
that
these
letters
match
episode
and
displays
the
link
suggestionsinatooltipfromwhichtheusercanselectfrom.Inthisparticularexamplethereare
multiplepageswiththesamenamesotheuserhasaccesstothecontentcard(viatheinformationicon)
toseemoreinformationonthecontent.Seesection8.0Reportsformoreinformationonthecontent
card.
8/14/2019 Wetpaint Injected Interaction
25/77
Wetpaint,Inc. Confidential 25
Interaction Flow
Dialogs
ThefollowingdialogisusedintheAddLinkprocessandisaccessibleviatheEasyEditToolbar,edit
imagemenu,andeditimagedialog.
AddLinkDialog:Availableifauserhasfirsthighlighted/selectedcontent(textorimage)thenclickedthe
LinkoptionontheEasyEditToolbar.
8/14/2019 Wetpaint Injected Interaction
26/77
Wetpaint,Inc. Confidential 26
AddLinkDialog(NoItemSelected):ThefollowingdialogisavailableifauserselectstheLinkoption
ontheEasyEditToolbarbuthasnothighlightedorselectedanycontent.
EditLinkDialog:Userscaneasilychangeorremovealinkwhileineditmodebyplacingtheircursorona
pieceoflinkedcontentandselectingtheEditLinktooltoretrievethedialogbelow.
Menus
EditLinkMenuAvailablewhenauserclicksonhyperlinkedtextwhileineditmode.
LinkSuggestions:Thismenudisplaywhenausertypesanaddressinthelinkfieldafter3characters
havebeenentered.Theinformationiconlinkstoshowthecontentcardwithmoreinformationonthe
content.Seesection8.0Reportsforemoreinformationonthecontentcard.
8/14/2019 Wetpaint Injected Interaction
27/77
Wetpaint,Inc. Confidential 27
4.4 Spellcheck
TheSpellcheckfeatureoftheEasyEditToolbarenablesuserstospellchecktheircontentadditions.
Misspelledwordsarehighlightedinyellow,anduserscanthenindividuallycorrectthembyclickingon
thehighlightedwordandthenselectingthecorrectwordfromtheresultingmenuofspellingoptions.Example
Inthefollowingfigure,theuserisineditmodeandhaselectedtospellcheckthecontentarea.The
misspelledwordsarehighlightedinyellow.
MenuThefollowingmenu,accessibleviatheEasyEditToolbar,isusedtoengagethespellcheckfeature.
SpellCheckControl:
8/14/2019 Wetpaint Injected Interaction
28/77
Wetpaint,Inc. Confidential 28
4.5 Adding Images
Usersareabletoaddimagesviaavarietyofmethods(upload,webbased,andwebimage
search/insertion).Similarly,therearemultiplemethodstomanipulateimagesoncetheyhavebeen
committedtothecontentarea,includingauthoringanalttextcaption,addingimagelinks,anddefining
alignment,textwrapping,andsizing.
Example
Thefollowingfigureshowsacontentareawithoutimagesandauserpreparingtoaddanimagetothe
contentarea.
8/14/2019 Wetpaint Injected Interaction
29/77
Wetpaint,Inc. Confidential 29
Figure4.5.1Userisintheprocessofaddinganimage
Figure
4.5.2
Image
has
been
added
to
the
content
area,
the
user
is
still
in
the
edit
mode
and
able
to
manipulatetheimage.
8/14/2019 Wetpaint Injected Interaction
30/77
Wetpaint,Inc. Confidential 30
Figure4.5.3Thecontentareahasbeensavedandtheimageisdisplayedonthepage.
Interaction Flows
8/14/2019 Wetpaint Injected Interaction
31/77
Wetpaint,Inc. Confidential 31
Dialogs
Thefollowingdialogsareusedduringtheaddimageprocess,whichisinitiatedviatheEasyEditToolbar.
AddImageDialog:Userscanbrowsetoanimagefileontheircomputerharddrivetoaddanimage,add
onebypastinginanimageURL,orselectanduploadanimageviaasearchofYahoosimagerepository.
8/14/2019 Wetpaint Injected Interaction
32/77
Wetpaint,Inc. Confidential 32
AddImageDialog(SearchYahooImages):Fromthetextfielduserscansearchmillionsofimagesby
keyword.
AddImageDialog(SearchYahooImages):Yahooreturnsashortlistofthetoprelatedimageresults
found,aswellasacountofthetotalnumberofavailableimages.
8/14/2019 Wetpaint Injected Interaction
33/77
Wetpaint,Inc. Confidential 33
EditImageDialog: Afteranimagehasbeenaddedtothecontentarea,theEditImagedialogappears.
Fromthisdialoguserscanalignanimagerelativetoothercontent,resize,addadescriptivealttag,or
applyalink.
Menu
Thefollowingmenuisusedtoeditanimage.
ImageControlsMenu:AccessiblebyclickingonanimagewhileinEasyEditmode:
4.6 Adding Widgets
Userscanaddwidgetstoeditablecontentareaswithmultiplemethods,includingviaURL,embedcode,
andwebvideosearch/insertion. Multiplemethodstomanipulatewidgetsoncetheyhavebeen
embeddedwithinacontentareaincludedefiningalignment,textwrapping,andresizingwithalive
preview.
ThefollowingwidgetsaresupportedbytheWetpaintToGosystem:
YouTubeVideoUserscanembedfavoritevideosfromYouTubethisincludesfunctionality
to
allow
keyword
searches
on
YouTubes
directory
within
the
add
video
dialog.
GoogleVideoSimilarly,userscanembedfavoritevideosfromGoogleVideo.
8/14/2019 Wetpaint Injected Interaction
34/77
Wetpaint,Inc. Confidential 34
VizuPollsUserscancreatecustompollswithVizuandplacethemwithintheeditablecontentarea.Pollresultsaredisplayedasusersvote.
RSSFeedsUserscanembedRSSfeedsfromanysite. GoogleCalendarUserscanembedapersonalGooglecalendar. PhotobucketSlideshowUserscancreateandembedaslideshowviaPhotobucket. ImeemSongsorplaylistsfromtheImeemnetworkcanbeaddedviatheImeemaudio
widget.
ZeeMapsMapCollaborativeZeeMapsmapscanbedroppedintoeditablecontentareas. MeeboMessagingTheMeeboMechatwidgetallowsuserstochatwitheachother. GabblyChatAGabblychatwindowallowsrealtimediscussionfromwithinthecontextof
thecontentarea.
OtherWidgetsWetpaintsupportsmanyotherwebbasedwidgetswithembedorIframeoutputcode.
Example
ThefollowingfiguresillustrateauseraddingaVizupolltoacontentpage.
8/14/2019 Wetpaint Injected Interaction
35/77
Wetpaint,Inc. Confidential 35
Figure4.6.1TheuserselectstheVizuPollwidgetfromthewidgetgallery.
8/14/2019 Wetpaint Injected Interaction
36/77
Wetpaint,Inc. Confidential 36
Figure4.6.2Theuserentersthecodeforthecustompollwidget.
8/14/2019 Wetpaint Injected Interaction
37/77
Wetpaint,Inc. Confidential 37
Figure4.6.3Oncesavedthepagerendersthewidgetcontents.
Interaction FlowsThefollowinginteractionflowsfollowtheuserthroughtheprocessofaddingawidgettotheeditable
contentarea.Theprocessisthesameforaddingallwidgetstothecontentareawiththeexceptionof
thevideosearchcapabilityuniquetotheYouTubewidget.
8/14/2019 Wetpaint Injected Interaction
38/77
Wetpaint,Inc. Confidential 38
Dialogs
ThefollowingdialogsframetheAddWidgetprocess,whichisaccessedviatheWidgeticononthe
EasyEditToolbar.
AddWidgetsGalleryDialog:Userscanviewtheavailablewidgetsandselecttheonetheywouldliketo
add.
8/14/2019 Wetpaint Injected Interaction
39/77
Wetpaint,Inc. Confidential 39
AddYouTubeVideo(SearchYouTubeTab):Videosearchresultsdisplay,onlyavailablefortheYouTube
widget.
8/14/2019 Wetpaint Injected Interaction
40/77
Wetpaint,Inc. Confidential 40
AddWidgetDialog: AllotherwidgetsuseasimilardialogallowingtheusertoaddtheURLorembed
codeoftheirselectedwidget.
EditWidgetDialog: Afterawidgethasbeenaddedtothearea,thecorrespondingeditdialogappears.
Fromthisdialoguserscanalignthewidget,resizeit,anddefinetextwrapping.Thissamedialogis
engagedifauserwishestoremoveawidgetfromacontentareaalthoughselectingawidgetandhitting
deleteworksaswell.
Menu
Thefollowingmenuisusedtoeditawidget.
WidgetControlsMenu:Accessibleviaaclickonawidgetwhileineditmode.Dependingonthetypeof
widgetadded,thecontrolwilldisplaytheappropriatemenuelection.
8/14/2019 Wetpaint Injected Interaction
41/77
Wetpaint,Inc. Confidential 41
4.7 Save Conflicts & Merge
Ontherareoccasionthattwopeopleeditthesameversionofapageawarningmessageisissued.
Examples
Figure4.7.1WhileuserAwasintheeditmode;userBeditedthesamepageandsavedthe
content.Onsave,userA ispromptedwithamessagethatinformsthemoftwoversionsofcontent
andisallowedtochoosebetweenmergingthetwoversion,overridingthepreviouslysavedversionor
tonot
save
their
changes
at
all.
8/14/2019 Wetpaint Injected Interaction
42/77
Wetpaint,Inc. Confidential 42
Figure4.7.2Theuserselectedtomergethechangessobothversionsonthepageappearwiththeir
versiondisplayedonthebottomwhichallowstheusertocopyanycontentchangestheymadetothe
correctversion.
The
only
version
saved
is
the
version
displayed
above
the
line
so
auser
must
manually
copyanychangesintotheeditableversion.
8/14/2019 Wetpaint Injected Interaction
43/77
Wetpaint,Inc. Confidential 43
Interaction Flow
User Experience Modules
Thefollowingmodulesareutilizedduringthesaveconflictandmergeprocess.
SaveConflictDialog: Ifanotheruserhaseditedthecontentareawhilethisuserhasedited,theyare
presentedthisdialogonsave.
8/14/2019 Wetpaint Injected Interaction
44/77
Wetpaint,Inc. Confidential 44
MergeChangesDialog: Iftheuserselectstomergetheirchangesmanuallytheyarepresentedthis
dialogwithinstructionsbeforemerging.
8/14/2019 Wetpaint Injected Interaction
45/77
Wetpaint,Inc. Confidential 45
5. Keyword Tags
Userswhocaneditcontentareascanalsoadd/removekeywordtagsto/fromeacharea.Keywordtags
aidcontentdiscoveryandincreasesearchandSEObenefitsoftheusergeneratedcontent.ExampleThefollowingfigureillustratesthefullcontentareaattributesmodule(forotheroptionsseetheAPI
documentation),whichdisplaysbeneatheachcontentarea.Allkeywordtagsassociatedwiththe
contentareaaredisplayedinthismodule.
Userscanaccessthetageditingfeatureinthreeplaces:byclickingtheEdittagslinkwithinthemodule
itself,byclickingedittagsinthemoderationtoolsmenu(see6.0ModerationTools),orviaasimilar
linktotherightoftheEasyEditbuttonabovethecontentarea,asseenbelow.
Userscanaccessthekeywordtagreportlightboxbyclickingonthekeywordtagintheattributes
module.
Permissions
Usersmustbearegistered/authenticatedusertoaddandeditkeywordtags. Anonymoususerscanclickonkeywordtagsandviewthekeywordreport.
Interaction Flow
8/14/2019 Wetpaint Injected Interaction
46/77
Wetpaint,Inc. Confidential 46
User Experience Modules
Thefollowingmodulesareutilizedforkeywordtags.
EditKeywordTagsDialog:UsersenterkeywordtagsbytypingintheopenfieldandclickingtheAddTag
button. AtagcanberemovedbyselectingitintheCurrentTagslistandthenclickingtheRemoveTag
button.
KeywordTagReportLightbox:Thefollowinglightboxdisplayswhenauserclicksonakeywordtagin
theattributesmodule.Clickingonacontenttitleclosesthereportandlinkstheusertotheappropriate
destination.
8/14/2019 Wetpaint Injected Interaction
47/77
Wetpaint,Inc. Confidential 47
8/14/2019 Wetpaint Injected Interaction
48/77
Wetpaint,Inc. Confidential 48
6. Moderation Tools
Allofthemoderatortoolsformanagingcontentareasandusergeneratedpagesareavailableincontent
areaattributesboxbeloweachcontentarea.
ClickingontheContentToolslinkopensthemoderationmenuasseenhere:
Thenumberofitemsdisplayedisbasedontheroleoftheuser.
Permissions
Registeredusershaveaccesstothefollowingoptionsandonlythosewillbedisplayed:
EditContent EditTags Renametitle
8/14/2019 Wetpaint Injected Interaction
49/77
Wetpaint,Inc. Confidential 49
Moderatorshaveaccesstomoreoptionsandtheentirelistwillbedisplayedonclick:
Editcontent EditTags Renametitle Lock/Unlockcontent Delete/Restorecontent
6.1 Locking/Unlocking Content Areas
Moderatorsareabletolockacontentareafromeditingbyregisteredusersiftheywishtoprotectthe
contents.Onlyuserswithsufficientpermissions(moderatororabove)wouldbeabletoeditlocked
contentareas.
Example
LockedcontentareasareindicatedbyapadlockiconontheEasyEditbutton.
Permissions
Allregistereduserscanseethelockedindicator. TheEasyEditbutton,whenclicked,willalsoissuea
notificationtooltipexplainingthatthecontentareahasbeenlockedtopreventediting(shownabove).
Ausermustbeamoderatororuptohaveaccesstolockorunlockacontentarea,butneednotunlock
theareatoeditit.
8/14/2019 Wetpaint Injected Interaction
50/77
Wetpaint,Inc. Confidential 50
Interaction Flow
Dialogs
Thefollowing
dialogs
are
utilized
in
the
content
area
locking
process.
LockContentAreaNoteDialog:Moderatorsandadministratorsareaskedtonotethereasonwhythe
areaisbeinglocked. Thisnotation,alongwiththelockevent,isstoredintherevisionhistory.
UnlockContentAreaNoteDialog:Similarly,theyarealsoaskedwhyanareaisbeingunlocked.
8/14/2019 Wetpaint Injected Interaction
51/77
Wetpaint,Inc. Confidential 51
6.2 Rename Title
Thissectioncoverstheprocesstorenamethedisplaynameofanycontentareaincludingthoseon
partnerpublishedpagesorusercreatedpages.
Example
Figure6.2.1inthisfiguretheuserhasclickedonthecontenttoolslink.
8/14/2019 Wetpaint Injected Interaction
52/77
Wetpaint,Inc. Confidential 52
Figure6.2.2theuserentersanewnameandareasonforrenamingit.Thereasonforrenamingisstored
intherevisionhistory.
Figure6.2.3thedisplayname(title)isrenamedandthenewnameisdisplayedinthetitleareaandin
thenavigation.
It
is
recommended
that
the
page
title
(AKA
display
name)
be
displayed
as
an
H1
on
the
pageforSEOpurposes. Formoreinformationseethetechnicaldocumentonpagecreation. Thehistory
hasbeenupdatedtoindicatethatthepagewasrenamedandonwhatdate.See7.0VersionHistoryfor
moreinformation
8/14/2019 Wetpaint Injected Interaction
53/77
Wetpaint,Inc. Confidential 53
Permissions
Allregistereduserscanrenameatitle.
Interaction Flows
Dialogs
Thefollowing
dialog
is
used
during
the
rename
process.
Renamedialog: accessibleviathecontenttoolsmenu.
6.3 Delete ContentModeratorscandeletecontentareasonpublishercreatedpagesorareasonusercreatedpages.
Deletingthecontentwillremovethecontentfromdisplaying;preventingitfrombeingspideredby
searchenginesinthefuture.
8/14/2019 Wetpaint Injected Interaction
54/77
Wetpaint,Inc. Confidential 54
Example
Figure6.3.1theaboveexampleshowsthecontentsofadeletedarea. Thecontentsofadeletedcontent
areaareremovedfromdisplayandeditkeywordtagsisnotanoption. Includedinthemessagearethe
moderatorsusernameandthereasonwhythecontentwasdeletedifprovided.
Permissions
Onlymoderatorscandeletecontent.
Interaction Flows
Impactsonsubpages/areas:Ifapageisdeletedthedefaultpagecontentsarenolongerdisplayed(as
shownabove). Deletedpagesarealsoremovedfromtheparentpagesnavigation. Subpagesofa
deletedpagearenotimpactedbythedeletepageaction. Subpagescanstillbereachedandread;
thoughaccesstothemmaybelimitedastheparentpagewillberemovedfromthedefaultnavigation.
8/14/2019 Wetpaint Injected Interaction
55/77
Wetpaint,Inc. Confidential 55
Alistofdeletedcontentareascanbefoundfromthedeletedcontentreport(seesection11.2)
Dialogs
Thefollowingdialogsareutilized.
Deletedialog:
accessible
via
the
moderation
tool
menu.
Impacts to the content area attributes
Thecontentareaattributesforadeletedareaismodifiedslightlyinthatthereisnoabilitytoedit
keywordtags.
Formoderators: theonlyoptionformoderatorsisrestoreapage.Allotheroptionsdonotshowinthe
contenttools.
Forregisteredusers: therearenooptionsforaregisteredusersotheyreceiveacustommessage
informingthemthatthepagehasbeendeleted.
6.4 Restore ContentModeratorscanrestoreapreviouslydeletedcontentareaandmakeitpubliconceagain. When
restoredcontentareasareautomaticallyaddedbacktothenavigation.
8/14/2019 Wetpaint Injected Interaction
56/77
Wetpaint,Inc. Confidential 56
Permissions
Onlymoderatorscanrestorepreviouslydeletedcontentareas.
Interaction Flows
Dialogs
Thefollowingdialogsareutilized.
Restoredialog: Thisdialogisaccessibleviathemoderationtoolmenuandfromthedeletedcontent
areareport.
8/14/2019 Wetpaint Injected Interaction
57/77
Wetpaint,Inc. Confidential 57
7. Revision History
7.1 Viewing Revision History
Usersareabletoviewpreviouslypublishedcontentaswellasthescopeofchanges,includingdeletions,
additions,
and
formatting
changes.
Example
Figure7.1.1Theentirehistoryofacontentareaisaccessibleviaalightbox.
8/14/2019 Wetpaint Injected Interaction
58/77
Wetpaint,Inc. Confidential 58
Figure7.1.2Viewingapreviousversionofacontentarea. WetpaintToGousesbasicrevisionstyles
(e.g.strikethroughfordeletedcontents)andfontcolorationtonoteaddedanddeletedcontent.
Permissions
Anyuser(evenanonymoususers)canreadthisinformation.
8/14/2019 Wetpaint Injected Interaction
59/77
Wetpaint,Inc. Confidential 59
Interaction Flow
Exceptions to Look and Feel Customization
Thelightboxsurroundingtherevisionhistoryreportiscustomizablepertheoptionsexplainedinsection
2.0.Thisgrayscalereportappearscenteredovertheparentpage.
7.2 Delete/Revert Version
Moderatorsandupcandeleteorrevertanypageversion.
8/14/2019 Wetpaint Injected Interaction
60/77
Wetpaint,Inc. Confidential 60
Example
Figure7.2.1Amoderatorviewofthecontentareahistorylightbox.
Permissions
Usersmustbeamoderatororabovetodeleteversions,makepreviousversionscurrent,orreverttoa
previousversion.
8/14/2019 Wetpaint Injected Interaction
61/77
Wetpaint,Inc. Confidential 61
Interaction Flow
Dialogs
Thefollowingdialogsareutilizedintherevisionhistorymoderatortools.
DeleteVersionDialog:Moderatorsandadministratorsareaskedtonotethereasonwhytheversionis
beingdeleted.
8/14/2019 Wetpaint Injected Interaction
62/77
Wetpaint,Inc. Confidential 62
RestoreVersionDialog:Moderatorsandadministratorsareaskedtonotethereasonwhythedeleted
versionisbeingrestored.
RevertVersionDialog:Moderatorsandadministratorsareaskedtonotethereasonwhytheyare
revertedtoapreviousversion.
Exceptions to Look and Feel Customization
Thelightbox
surrounding
the
revision
history
report
is
customizable
per
the
options
explained
in
section
2.0.Thisgrayscalereportappearscenteredovertheparentpage.
8/14/2019 Wetpaint Injected Interaction
63/77
Wetpaint,Inc. Confidential 63
8. Reporting
WetpaintToGoprovidesanumberofreportstoadministeryourusergeneratedcontent. Thesereports
includeaccesstorecentlyupdatedcontentareasaswellasareportthatflagsquestionablelanguage.
Access to the reports sectionThereportsareaccessibleviathecontentarearevisionhistorylightboxdiscussedinsection7.0.
Exceptions to Look and Feel Customization
Thelightboxsurroundingthereportsiscustomizablepertheoptionsexplainedinsection2.0.The
grayscalereportappearscenteredovertheparentpage.
8.1 Recently Updated Content Areas
Therecentlyupdatedcontentreportprovidesahandysnapshotofallupdatedcontentonyoursite.This
includesfirsttimeeditsofcontentareasonexistingpagesaswellasnewlycreatedpages. Thedisplay
nameof
the
area,
its
location
or
parent
page,
as
well
as
the
creation
date
and
last
edit
date
are
also
included. Thisreportdetailsthemostrecentupdatestoallofthecontentareasembeddedthroughout
yourwebsite. Duetothewealthofinformationinthisreport,itisdisplayedinthelargerlightbox
format.
8/14/2019 Wetpaint Injected Interaction
64/77
Wetpaint,Inc. Confidential 64
Example
Figure8.1.1theaboveexampleshowstherecentlyupdatedcontentareasreportupdatedtoinclude
newlycreatedpagesandrenamedcontentareas.
Permissions
Allregistered
users
can
view
the
Recently
Updated
Content
Areas
report.
8/14/2019 Wetpaint Injected Interaction
65/77
8/14/2019 Wetpaint Injected Interaction
66/77
Wetpaint,Inc. Confidential 66
Permissions
Onlymoderatorscanaccessthedeletedcontentreport.
8.3 Questionable Language Report
This
report
details
content
areas
that
have
been
flagged
via
Wetpaints
language
filter
as
containing
questionablelanguage.
Example
8/14/2019 Wetpaint Injected Interaction
67/77
Wetpaint,Inc. Confidential 67
Permissions
OnlymoderatorsanduphaveaccesstotheQuestionableLanguagereport.
8.4 Content Card
Since
content
areas
may
have
the
same
user
friendly
name,
a
content
card
has
been
created
in
order
to
providetheuserwithmoreinformationonthecontentonallreports,includingthekeywordtagreport
andinthelinksuggestionsmenu.
ThecardisaccessibleviaclickingontheInformationIcon nexttothecontenttitleasseeninthe
examplebelow.
8/14/2019 Wetpaint Injected Interaction
68/77
Wetpaint,Inc. Confidential 68
Figure8.4.1Theuserhasclickedontheinformationiconforthefirstiteminthereportandthe
contentcardisdisplayed.
8/14/2019 Wetpaint Injected Interaction
69/77
Wetpaint,Inc. Confidential 69
9. New Pages
Thefollowingsectioncoversthebasicfeaturesanddialogsinvolvedincreatingusergeneratedpages
(viaapartnerprovidedshellortemplate)assubpagesfrompublishercreatedpages.
Partner Created Pages vs. User Generated Pages
TheRequirementsforpublishershellpageswillbeprovidedinaseparatetechnicaldocument.
9.1 Add new pages
Usersareabletocreatenewpageswithoneormanycontentareasperpage. Thenumberofcontent
areasper
new
page
is
configurable
by
you.
Example:
8/14/2019 Wetpaint Injected Interaction
70/77
Wetpaint,Inc. Confidential 70
Figure9.1.1Representsapublishercreatedpagewithalinktoaddanewpage.
8/14/2019 Wetpaint Injected Interaction
71/77
Wetpaint,Inc. Confidential 71
Figure9.1.2Inthefigureabove,theuserhasengagedtheaddapagedialogbyclickingontheadda
pagelink.Thelocationandnomenclature(linktext)ofthelinkiscompletelydeterminedbyyou.
8/14/2019 Wetpaint Injected Interaction
72/77
Wetpaint,Inc. Confidential 72
Figure9.1.3Oncethenewpagehasbeencreated,theusercaninteractwithitbyclickingEasyEditto
engagetheeditingprocess.
Permissions
Ausermustbeauthenticatedinordertoaddpagestoasite.Allpageeditsbyindividualusersare
therebytracked.
Interaction Flow
User Experience Modules
Thefollowingmodulesareutilizedduringthepagecreationprocess.
AddPageLink:
Thelocationoftheaddpagelinkisuptoyou.
Thenomenclatureforthislinkisfullycustomizable.Itcanbetitledanythingthatisdesiredandrelevant
toyourspecificsite,someexamplesincludeaddrecap,addpage,addsummary,etc.
Addnewpage: Thefollowingdialogopenswhenauserselectstoaddanewpage.
8/14/2019 Wetpaint Injected Interaction
73/77
Wetpaint,Inc. Confidential 73
Thetitletextinthedialogandbuttontitlewillbecustomizedbasedonwhatthelinktextyouprovide.
Customization: foralistofthecustomizableCSSelements(viaoverrides)seetheCustomizedLookand
FeelsectionintheContentAreaFeatureSetdocument.
9.2 Navigation
Therearethreeoptionsforretrievingthenavigationforsubpagesofaneditableareaonapartner
publishedpageoronausercreatedpage.
APIcall:Therearetwotypesofnavigationcalls.
Thefirsttypewillreturnupto50childpagesperpage,butonlyincludeonelayerdowninthe
hierarchyintheinitialcall. Foralistofdeeperpagesanadditionalcallshouldbemade.
Thesecondtypeofcallwillreturntheentirehierarchytreeofchildpagesperpage
(Seetheexampletotheleft)
Viathe
API
call,
the
design,
information
architecture,
and
navigation
hierarchy
displayedcanbecustomizedentirelybyyou.SeetheTechnicalAPIdocumentfor
moreinformation.
Unorderedlist: childpagesarealsoavailableforanysubpageorcontentareaasan
unorderedHTMLlist. Althoughshowninasimplebulletedlistbelow,thelook,feel,
andplacementofthislistcanbedeterminedbyyourCSS.
8/14/2019 Wetpaint Injected Interaction
74/77
Wetpaint,Inc. Confidential 74
Subpagelist: childpagesarealsoavailableaspartoftheContentAreaAttributesboxthatsitsbelow
thepagecontentandincludesalinktothecontentcard. Thislistofpagesinheritsthelookandfeelof
yourgoverningCSS.
8/14/2019 Wetpaint Injected Interaction
75/77
8/14/2019 Wetpaint Injected Interaction
76/77
Wetpaint,Inc. Confidential 76
keywordtags.
Updatedimagestoincludecorrectattributes
module.
Updatessection9.2Navigationwithfinal
subpagenavigation
Updatedsection3.2contentareaattributes
toincludefinalattributesmoduleincluding
subpages.
8/14/2019 Wetpaint Injected Interaction
77/77
Appendix
Other documents of interest:
1. WetpaintToGoIntroduction2. TechnicalOverview
Questions and comments? Please contact:
JeffMcDowell
ProgramManagement,Wetpaint.com,inc.