wetpaint injected interaction

8/14/2019 Wetpaint Injected Interaction

1/77

Wetpaint,Inc. Confidential 1

WetpaintToGo InteractionDefinitionMoreSocial. MoreTraffic.MoreRevenue.

2008Wetpaint.com,Inc.

May

18,

2008

Interaction Documentation


2/77


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


3/77


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


4/77


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.


5/77


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.


6/77


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.


7/77


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/77


9/77


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:


10/77



11/77


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.


12/77


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.


13/77


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.


14/77


3.4 Authentication Requirements

UsersmustbeauthenticatedinordertoedittheWTGcontent;thisincludeseditingcontent,tags,

moderationtoolsandaddpagefunctionality. Ifauserisnotrecognizedaftertheyclickonafunction

theyreceiveacustomizableerrormessageencouragingthemtologinorcreateanaccounttointeract

withthesite.


15/77


Interaction

User Experience ModulesThefollowingdialogisutilizedwhenauserisattemptingtoaccessafeaturetheydonothave

permissiontouse.

LoggedInDialog: Thetextinthedialogcanbeoverriddenbycontentofyourchoosingandshould

includealinktoyourlogin/signuppagesotheycanaccesstheWetpainttoGoFunctionality.

Allthefunctionaldescriptionsinthefollowingsectionsassumethattheuserhasbeenauthenticated

andcanaccessthefunctionality.


16/77


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.


17/77


Figure4.1.2 Inthefigureabove,theuserhasengagedtheeditingtoolsetbyclickingontheEasyEdit

button.Whileineditmodeallnoneditableareasareghosted. ThefloatingWYSIWYGtoolbarfollows

theuserashe/shescrollsdownthepage,keepingthetoolseasilyaccessible. Additionally,thetoolbar

canbeclickdraggedandanchoredbytheusertothedesiredlocationonthescreen. Thetoolbarwill

remaininthispositionuntiltheeditingsessioniscomplete.


18/77


Figure4.1.3 Oncesaved,thepageisdisplayedwiththecontenttheuserenteredwhileineditmode.Interaction Flows


19/77


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.


20/77


4.2. Table FormattingUsersareabletoinserttablesintotheirWYSIWYGpagestobetterstructuredataorcreatepagelayouts.

Thefollowingtableattributescanbedefined:tablealignment/textwrapping,borders,cellcolors,

row/columninsertion/deletion,columnsizing,cellselection,cellmerging,andindent/outdent.

Interaction Flows


21/77


Table DialogsThefollowingdialogsareutilizedinthetableeditingprocess.

AddTableDialog: Duringtablecreationthisdialogallowsuserstodeterminethenumberofrowsand

columnsanddefineotherbasictableappearanceproperties.

EditTableDialog: Afteratablehasbeencreated,severalformattingattributescanbeedited.Other

tableeditingcapabilitiesaretriggeredbyarightclickmenu.


22/77


:EditTableCellDialog: Tablecellbordersandbackgroundcolorscanbemodified. TheEditTableCell

dialogisaccessedviatheedittablecelllinkfromwithintheTableControlsidentified.

Table Menus

TableMenu:Thefollowingmenuisusedtoedittablesandisaccessiblebyclickinginatablewhilein

EasyEditmode:


23/77


RightclickTableMenu:Thefollowingmenuisavailablewhentheuserrightclicksinatablewhilein

EasyEditmode.Thismenuallowsausertomanipulatethetableattributesquickly.

IfauserselectstwocellsandrightclicksinatablewhileinEasyEditmodethefollowingmenudisplays

withtheadditionofMergeCellsasanoption.


24/77


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.


25/77


Interaction Flow

Dialogs

ThefollowingdialogisusedintheAddLinkprocessandisaccessibleviatheEasyEditToolbar,edit

imagemenu,andeditimagedialog.

AddLinkDialog:Availableifauserhasfirsthighlighted/selectedcontent(textorimage)thenclickedthe

LinkoptionontheEasyEditToolbar.


26/77


AddLinkDialog(NoItemSelected):ThefollowingdialogisavailableifauserselectstheLinkoption

ontheEasyEditToolbarbuthasnothighlightedorselectedanycontent.

EditLinkDialog:Userscaneasilychangeorremovealinkwhileineditmodebyplacingtheircursorona

pieceoflinkedcontentandselectingtheEditLinktooltoretrievethedialogbelow.

Menus

EditLinkMenuAvailablewhenauserclicksonhyperlinkedtextwhileineditmode.

LinkSuggestions:Thismenudisplaywhenausertypesanaddressinthelinkfieldafter3characters

havebeenentered.Theinformationiconlinkstoshowthecontentcardwithmoreinformationonthe

content.Seesection8.0Reportsforemoreinformationonthecontentcard.


27/77


4.4 Spellcheck

TheSpellcheckfeatureoftheEasyEditToolbarenablesuserstospellchecktheircontentadditions.

Misspelledwordsarehighlightedinyellow,anduserscanthenindividuallycorrectthembyclickingon

thehighlightedwordandthenselectingthecorrectwordfromtheresultingmenuofspellingoptions.Example

Inthefollowingfigure,theuserisineditmodeandhaselectedtospellcheckthecontentarea.The

misspelledwordsarehighlightedinyellow.

MenuThefollowingmenu,accessibleviatheEasyEditToolbar,isusedtoengagethespellcheckfeature.

SpellCheckControl:


28/77


4.5 Adding Images

Usersareabletoaddimagesviaavarietyofmethods(upload,webbased,andwebimage

search/insertion).Similarly,therearemultiplemethodstomanipulateimagesoncetheyhavebeen

committedtothecontentarea,includingauthoringanalttextcaption,addingimagelinks,anddefining

alignment,textwrapping,andsizing.

Example

Thefollowingfigureshowsacontentareawithoutimagesandauserpreparingtoaddanimagetothe

contentarea.


29/77


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.


30/77


Figure4.5.3Thecontentareahasbeensavedandtheimageisdisplayedonthepage.

Interaction Flows


31/77


Dialogs

Thefollowingdialogsareusedduringtheaddimageprocess,whichisinitiatedviatheEasyEditToolbar.

AddImageDialog:Userscanbrowsetoanimagefileontheircomputerharddrivetoaddanimage,add

onebypastinginanimageURL,orselectanduploadanimageviaasearchofYahoosimagerepository.


32/77


AddImageDialog(SearchYahooImages):Fromthetextfielduserscansearchmillionsofimagesby

keyword.

AddImageDialog(SearchYahooImages):Yahooreturnsashortlistofthetoprelatedimageresults

found,aswellasacountofthetotalnumberofavailableimages.


33/77


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.


34/77


VizuPollsUserscancreatecustompollswithVizuandplacethemwithintheeditablecontentarea.Pollresultsaredisplayedasusersvote.

RSSFeedsUserscanembedRSSfeedsfromanysite. GoogleCalendarUserscanembedapersonalGooglecalendar. PhotobucketSlideshowUserscancreateandembedaslideshowviaPhotobucket. ImeemSongsorplaylistsfromtheImeemnetworkcanbeaddedviatheImeemaudio

widget.

ZeeMapsMapCollaborativeZeeMapsmapscanbedroppedintoeditablecontentareas. MeeboMessagingTheMeeboMechatwidgetallowsuserstochatwitheachother. GabblyChatAGabblychatwindowallowsrealtimediscussionfromwithinthecontextof

thecontentarea.

OtherWidgetsWetpaintsupportsmanyotherwebbasedwidgetswithembedorIframeoutputcode.

Example

ThefollowingfiguresillustrateauseraddingaVizupolltoacontentpage.


35/77


Figure4.6.1TheuserselectstheVizuPollwidgetfromthewidgetgallery.


36/77


Figure4.6.2Theuserentersthecodeforthecustompollwidget.


37/77


Figure4.6.3Oncesavedthepagerendersthewidgetcontents.

Interaction FlowsThefollowinginteractionflowsfollowtheuserthroughtheprocessofaddingawidgettotheeditable

contentarea.Theprocessisthesameforaddingallwidgetstothecontentareawiththeexceptionof

thevideosearchcapabilityuniquetotheYouTubewidget.


38/77


Dialogs

ThefollowingdialogsframetheAddWidgetprocess,whichisaccessedviatheWidgeticononthe

EasyEditToolbar.

AddWidgetsGalleryDialog:Userscanviewtheavailablewidgetsandselecttheonetheywouldliketo

add.


39/77


AddYouTubeVideo(SearchYouTubeTab):Videosearchresultsdisplay,onlyavailablefortheYouTube

widget.


40/77


AddWidgetDialog: AllotherwidgetsuseasimilardialogallowingtheusertoaddtheURLorembed

codeoftheirselectedwidget.

EditWidgetDialog: Afterawidgethasbeenaddedtothearea,thecorrespondingeditdialogappears.

Fromthisdialoguserscanalignthewidget,resizeit,anddefinetextwrapping.Thissamedialogis

engagedifauserwishestoremoveawidgetfromacontentareaalthoughselectingawidgetandhitting

deleteworksaswell.

Menu

Thefollowingmenuisusedtoeditawidget.

WidgetControlsMenu:Accessibleviaaclickonawidgetwhileineditmode.Dependingonthetypeof

widgetadded,thecontrolwilldisplaytheappropriatemenuelection.


41/77


4.7 Save Conflicts & Merge

Ontherareoccasionthattwopeopleeditthesameversionofapageawarningmessageisissued.

Examples

Figure4.7.1WhileuserAwasintheeditmode;userBeditedthesamepageandsavedthe

content.Onsave,userA ispromptedwithamessagethatinformsthemoftwoversionsofcontent

andisallowedtochoosebetweenmergingthetwoversion,overridingthepreviouslysavedversionor

tonot

save

their

changes

at

all.


42/77


Figure4.7.2Theuserselectedtomergethechangessobothversionsonthepageappearwiththeir

versiondisplayedonthebottomwhichallowstheusertocopyanycontentchangestheymadetothe

correctversion.

The

only

version

saved

is

the

version

displayed

above

the

line

so

auser

must

manually

copyanychangesintotheeditableversion.


43/77


Interaction Flow

User Experience Modules

Thefollowingmodulesareutilizedduringthesaveconflictandmergeprocess.

SaveConflictDialog: Ifanotheruserhaseditedthecontentareawhilethisuserhasedited,theyare

presentedthisdialogonsave.


44/77


MergeChangesDialog: Iftheuserselectstomergetheirchangesmanuallytheyarepresentedthis

dialogwithinstructionsbeforemerging.


45/77


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


46/77



Thefollowingmodulesareutilizedforkeywordtags.

EditKeywordTagsDialog:UsersenterkeywordtagsbytypingintheopenfieldandclickingtheAddTag

button. AtagcanberemovedbyselectingitintheCurrentTagslistandthenclickingtheRemoveTag

button.

KeywordTagReportLightbox:Thefollowinglightboxdisplayswhenauserclicksonakeywordtagin

theattributesmodule.Clickingonacontenttitleclosesthereportandlinkstheusertotheappropriate

destination.


47/77



48/77


6. Moderation Tools

Allofthemoderatortoolsformanagingcontentareasandusergeneratedpagesareavailableincontent

areaattributesboxbeloweachcontentarea.

ClickingontheContentToolslinkopensthemoderationmenuasseenhere:

Thenumberofitemsdisplayedisbasedontheroleoftheuser.

Permissions

Registeredusershaveaccesstothefollowingoptionsandonlythosewillbedisplayed:

EditContent EditTags Renametitle


49/77


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.


50/77


Interaction Flow

Dialogs

Thefollowing

dialogs

are

utilized

in

the

content

area

locking

process.

LockContentAreaNoteDialog:Moderatorsandadministratorsareaskedtonotethereasonwhythe

areaisbeinglocked. Thisnotation,alongwiththelockevent,isstoredintherevisionhistory.

UnlockContentAreaNoteDialog:Similarly,theyarealsoaskedwhyanareaisbeingunlocked.


51/77


6.2 Rename Title

Thissectioncoverstheprocesstorenamethedisplaynameofanycontentareaincludingthoseon

partnerpublishedpagesorusercreatedpages.

Example

Figure6.2.1inthisfiguretheuserhasclickedonthecontenttoolslink.


52/77


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


53/77


Permissions

Allregistereduserscanrenameatitle.

Interaction Flows

Dialogs

Thefollowing

dialog

is

used

during

the

rename

process.

Renamedialog: accessibleviathecontenttoolsmenu.

6.3 Delete ContentModeratorscandeletecontentareasonpublishercreatedpagesorareasonusercreatedpages.

Deletingthecontentwillremovethecontentfromdisplaying;preventingitfrombeingspideredby

searchenginesinthefuture.


54/77


Example

Figure6.3.1theaboveexampleshowsthecontentsofadeletedarea. Thecontentsofadeletedcontent

areaareremovedfromdisplayandeditkeywordtagsisnotanoption. Includedinthemessagearethe

moderatorsusernameandthereasonwhythecontentwasdeletedifprovided.

Permissions

Onlymoderatorscandeletecontent.

Interaction Flows

Impactsonsubpages/areas:Ifapageisdeletedthedefaultpagecontentsarenolongerdisplayed(as

shownabove). Deletedpagesarealsoremovedfromtheparentpagesnavigation. Subpagesofa

deletedpagearenotimpactedbythedeletepageaction. Subpagescanstillbereachedandread;

thoughaccesstothemmaybelimitedastheparentpagewillberemovedfromthedefaultnavigation.


55/77


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.


56/77


Permissions

Onlymoderatorscanrestorepreviouslydeletedcontentareas.

Interaction Flows

Dialogs

Thefollowingdialogsareutilized.

Restoredialog: Thisdialogisaccessibleviathemoderationtoolmenuandfromthedeletedcontent

areareport.


57/77


7. Revision History

7.1 Viewing Revision History

Usersareabletoviewpreviouslypublishedcontentaswellasthescopeofchanges,includingdeletions,

additions,

and

formatting

changes.

Example

Figure7.1.1Theentirehistoryofacontentareaisaccessibleviaalightbox.


58/77


Figure7.1.2Viewingapreviousversionofacontentarea. WetpaintToGousesbasicrevisionstyles

(e.g.strikethroughfordeletedcontents)andfontcolorationtonoteaddedanddeletedcontent.

Permissions

Anyuser(evenanonymoususers)canreadthisinformation.


59/77


Interaction Flow

Exceptions to Look and Feel Customization

Thelightboxsurroundingtherevisionhistoryreportiscustomizablepertheoptionsexplainedinsection

2.0.Thisgrayscalereportappearscenteredovertheparentpage.

7.2 Delete/Revert Version

Moderatorsandupcandeleteorrevertanypageversion.


60/77


Example

Figure7.2.1Amoderatorviewofthecontentareahistorylightbox.

Permissions

Usersmustbeamoderatororabovetodeleteversions,makepreviousversionscurrent,orreverttoa

previousversion.


61/77


Interaction Flow

Dialogs

Thefollowingdialogsareutilizedintherevisionhistorymoderatortools.

DeleteVersionDialog:Moderatorsandadministratorsareaskedtonotethereasonwhytheversionis

beingdeleted.


62/77


RestoreVersionDialog:Moderatorsandadministratorsareaskedtonotethereasonwhythedeleted

versionisbeingrestored.

RevertVersionDialog:Moderatorsandadministratorsareaskedtonotethereasonwhytheyare

revertedtoapreviousversion.


Thelightbox

surrounding

the

revision

history

report

is

customizable

per

the

options

explained

in

section

2.0.Thisgrayscalereportappearscenteredovertheparentpage.


63/77


8. Reporting

WetpaintToGoprovidesanumberofreportstoadministeryourusergeneratedcontent. Thesereports

includeaccesstorecentlyupdatedcontentareasaswellasareportthatflagsquestionablelanguage.

Access to the reports sectionThereportsareaccessibleviathecontentarearevisionhistorylightboxdiscussedinsection7.0.


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.


64/77


Example

Figure8.1.1theaboveexampleshowstherecentlyupdatedcontentareasreportupdatedtoinclude

newlycreatedpagesandrenamedcontentareas.

Permissions

Allregistered

users

can

view

the

Recently

Updated

Content

Areas

report.


65/77


66/77


Permissions

Onlymoderatorscanaccessthedeletedcontentreport.

8.3 Questionable Language Report

This

report

details

content

areas

that

have

been

flagged

via

Wetpaints

language

filter

as

containing

questionablelanguage.

Example


67/77


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.


68/77


Figure8.4.1Theuserhasclickedontheinformationiconforthefirstiteminthereportandthe

contentcardisdisplayed.


69/77


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:


70/77


Figure9.1.1Representsapublishercreatedpagewithalinktoaddanewpage.


71/77


Figure9.1.2Inthefigureabove,theuserhasengagedtheaddapagedialogbyclickingontheadda

pagelink.Thelocationandnomenclature(linktext)ofthelinkiscompletelydeterminedbyyou.


72/77


Figure9.1.3Oncethenewpagehasbeencreated,theusercaninteractwithitbyclickingEasyEditto

engagetheeditingprocess.

Permissions

Ausermustbeauthenticatedinordertoaddpagestoasite.Allpageeditsbyindividualusersare

therebytracked.

Interaction Flow


Thefollowingmodulesareutilizedduringthepagecreationprocess.

AddPageLink:

Thelocationoftheaddpagelinkisuptoyou.

Thenomenclatureforthislinkisfullycustomizable.Itcanbetitledanythingthatisdesiredandrelevant

toyourspecificsite,someexamplesincludeaddrecap,addpage,addsummary,etc.

Addnewpage: Thefollowingdialogopenswhenauserselectstoaddanewpage.


73/77


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.


74/77


Subpagelist: childpagesarealsoavailableaspartoftheContentAreaAttributesboxthatsitsbelow

thepagecontentandincludesalinktothecontentcard. Thislistofpagesinheritsthelookandfeelof

yourgoverningCSS.


75/77


76/77


keywordtags.

Updatedimagestoincludecorrectattributes

module.

Updatessection9.2Navigationwithfinal

subpagenavigation

Updatedsection3.2contentareaattributes

toincludefinalattributesmoduleincluding

subpages.


77/77

Appendix

Other documents of interest:

1. WetpaintToGoIntroduction2. TechnicalOverview

Questions and comments? Please contact:

JeffMcDowell

ProgramManagement,Wetpaint.com,inc.

[email protected]

wetpaint injected interaction

Documents