Cyclescapescreenwireframes

Thisdocumentlistseachofthescreensfortheredesignedsite,eachasawireframewithnotes.ItincorporatesallthefeedbackfromdiscussionswithuserssinceJanuary.

Noassumptionismadeaboutlayouts–thesescreensareintendedtoshowconceptualrequirements.Thedesignershouldfeelfreetocomeupwithradicallydifferentlayouts.

Thereareotherscreenssuchasadminpages,butthesearelow-importanceandwillbeimprovedfromtheotherlayouts.

1.Mainhomepage[Mediumpriority]2.Grouphomepage[Mediumpriority]3.Discussionspage[Veryhighpriority]4.Narrowdiscussions[Highpriority]5.Discussionsscreenwithfiltersinplace[Veryhighpriority]6.Discussion[Mediumpriority]7.Discussionreplybox[Highpriority]8.Newdiscussion[Highpriority]9.Browseissuesmap[Highpriority]10.Browseissueslist[Highpriority]11.Issuepageexample[Veryhighpriority]12.Ideasmapadditionbymemberofthepublic[Highpriority]13.Ideasmapcampaignerstartingdiscussion[Highpriority]14.Planningapplicationspage[Highpriority]15.Librarypage[Lowpriority]16.Profilepage[Lowpriority]17.Accountcreationpage[Mediumpriority]

Thesiteheader/navigationconsistsof:

• Cyclescapelogo,clickablethroughouttohomepage.• Titleisthegroupname(e.g.‘CamdenCyclists’)or‘Cyclescape’(ungroupedcontext),

againclickablewhichreturnstothemainpage.• Asearchbox,whichisglobalandalwayspresentoneveryscreen.• Aprivatemessagesmailboxsymbol,withacountofmessages.• Agroupswitchingcontrol,iftheuserisinmorethanonegroup.• Adifferentcolourthemethatthegroupcanset,e.g.Camcyclewillwantorange.• Menuitems:

o Discusso Browseissueso Ideaso Planningapplicationso Libraryo Profile

2

1.Mainhomepage[Mediumpriority]

Thisisthefrontpageofthewholesite.Itaimstogivevisitorsaflavourofwhatthesiteisabout–withanexplanationbox,keyactionbuttonstobrowseissuesandsubmitanidea,somelatestdiscussions,aboxtoencouragepeopletocreateanaccount,aboxtofindgroups,andasocialmediatweetembed.

• Thisisverysimilartothecurrenthomepage,whichgenerallyworksfine.• The‘Browseissues’and‘Submitanidea’arecallstoactionandveryimportant.• Thegroupsboxincludesasearchforpeopletotypeintheirarea,andadroplistappears.

3

2.Grouphomepage[Mediumpriority]

Thesiteconsistsofmultiplegroups,e.g.Camcycle(Cambridge),CamdenCyclists,etc.Eachgrouphasatitle,shorttextaboutthemselves,theirareaofoperation,anditprovidesanindexintothelatestdiscussionsofthegroup.

• Thisisbroadlyasperthecurrentgrouphomepage,whichworksfinebutisuninspiringvisually.

• Thecurrenthomepagehastabsshowingmultiplelistings,buttheonlyonethatmattersisrecentdiscussions.Thisispulledoutandshouldbemoreprominent,toenticepeopleintothediscussions.

4

3.Discussionspage[Veryhighpriority]

Thisisessentiallytheuser’sdashboardandisacriticalpage.Itisthemainindexintodiscussionsthattheuserwilluseconstantly.Itshowslatestdiscussions(eachofwhichhasasmallmap,titleandtags)paginated,abuttontocreateanewdiscussion,abuttontonarrow(filter)discussions,atagareatobrowsepopularissues,andadynamicquickfiltertoshowcategories(campaigning/chat/administrative).

• Itshouldshowagoodnumberofdiscussions,e.g.10-20,evenifthismeanssomescroll.• Themapsshouldbebigenoughtogetanideaofwherethelocationis,butnotaslarge

ascurrently.• Thecategoriescheckboxesarenotpersistent–theyarequicktemporaryfilters.• Theiconsinthecategorieslistshouldmatchtheiconstotheleftofthetitles.• Somediscussionsarehighlighted,e.g.starredasperthe3rdand4th.• Chat/admin–baseddiscussionswillnothaveamap,e.g.seethe4thentry.• NBPleasedonotusethemotoring-orientedterm‘Dashboard’anywhere.

5

4.Narrowdiscussions[Highpriority]

InsomeareaslikeLondonorCambridge,theremaybealargenumberofdiscussions,ortheusermaybeinterestedinonlyaspecialisedsetoftopics.Therefore,onthepreviousscreentheycanclickthebuttontonarrow(filter)discussions,takingthemtothisscreen.Thisallowssettingoftopics(oneormore)and/orgeographicalareas.Changesaresavedtotheprofileandsoarepersistentbetweenlogins.

• ChangesmadeherearereflectedonthemainDiscussionspage(seenextscreen).• ThecurrentareasUIshouldbestudiedcarefully,asitshowswhatkindofgeographical

filterspeoplecanset–postcode,areaname,arbitrarydrawnboundary,campaigngroups,A-Broute.However,itisover-complexanddoesneedsimplification.

• Thetopictagsareashouldprovideasearch-as-you-typedrop-down.Itshouldincludeexamples(e.g.assoonasthesearchisclickedon,orastext,oraspre-selectablecheckboxes)sothatitisclearwhatkindofthingisexpected.

• Itshouldgiveadynamicdisplayofhowmanyrecentdiscussionsthiswouldmatch,togivetheuseranexpectationofwhetherthevolumewillbetoogreat.

6

5.Discussionsscreenwithfiltersinplace[Veryhighpriority]

Thisisthesameasscreen3,butshowstheeffectofthehavingthefilteringset.Thelayoutisexactlythesameasbefore,butthediscussionslistjustshowsdiscussionsthatmatchthetags/areas.Theonlydifferenceisanewpairoftabs–‘MyCyclescape’and‘All’(orsimilar),whicharedynamictabs,enablingtheusertoswitchquicklybacktogiveapeekoftheeverythinglisting.

• Thetabsaredynamic,soloadinstantly.• Theword‘filters’isconsideredtoogeekyandsobetterterminologyisneeded.One

personpointedoutthatitimpliesmorecomplexity,whereaswereallywantthesenseoftrimmingdownthelist,i.e.lessstuff.

• Theusercanclickon‘Edit’togobackandtheeditthefilters.• Thefiltersboxshouldclearlyindicatethatthefiltersareset.• Thisviewwillmatchwhattheusergetsbye-mail.I.e.iftheyhavesetfilters,thatiswhat

theyaresubscribedtobye-mailiftheyhavee-mailenabled.Thismatchescurrentbehaviour.Iftheyhaven’tsetfilters,theywouldgeteverything.

7

6.Discussion[Mediumpriority]

Thisisadiscussionitself,wherepeopleactuallytalkaboutthings.Itshowsthetitle,amap,thetags(whichanyusercanedit),theflowofdiscussions(eachofwhichshowswhoposteditandwhen),asubscriberlist,andacontroltoenableaseconddiscussiononthesametopic(branchingoffanewdiscussion).Userscan‘star’adiscussion,usedinthemainlistingpage.

• Thecurrentpageworksreasonablywell,andbasicallyneedsafewmodifications.• Repliesalreadyreadshouldbecollapsed,withan‘Expanddiscussions’buttonforthose.• Importantly,thediscussionflowshouldnotbeinterruptedwithphpBB-stylegeeky

metadatawithannoyingrepetitiveinfoabouthowmanypoststheuserhasmade,etc.Thediscussionitselfshouldbeprimaryandfeelveryflowing.

• Shouldshowtheuser’simageandtitle,andiftheyareacommitteemember.Thedateofthepostingshouldbeshown(“Xdaysago”withhoverfortherealdate)

• Thesubscriberlistshouldbeanexpandablebox.• Repliescanhaveathumbs-up.• Thereneedstobeacog-styleboxwherethediscussionpropertiescanbeedited.

8

7.Discussionreplybox[Highpriority]

Thisshowsthereplybox.ItshouldworkontheFacebookprinciplethattextisthedefault,butthattheusercanmix-and-matchattachments,e.g.oneormorephotoscanbeadded.

• Therearemultipleattachmenttypes,asperthecurrentsystem:photo,CycleStreetsphoto,StreetView,Map,Poll,Link,Deadline/date,Attachment,Calltoaction.TheUIforeachofthesecanbekeptas-is.Whatisimportantistochangethewaythattheusercanaddedthemintothereply–currentlytheyareasetoftabswhichimpliesmutualexclusivity.

• Libraryitemsareatypeofattachmentalso.Theideahereisthatthesystemshouldmatchthetagsoflibraryitemsandtherewouldbealistofresourcesthatseemliketheymightberelevant.

• Thereplyboxisarichtext,andthecurrentUIisfine.• Multipletypesandmorethanoneofeachtypecanbeadded,e.g.2photosand3files

plusadeadline,shouldbepossible:trulymix-and-match.

9

8.Newdiscussion[Highpriority]

Thisscreenstartsanewdiscussion,involvingatitle,description,tags(whichmustbeverystronglyencouraged–taggingisessentialformanypartsofthesite),andacategory.

• Taggingisessentialtothesite,sousersshouldberequiredtoaddatleastonetag.Itshouldbecompletelyobviouswhattagsareconceptally,e.g.byshowing10mostpopular.Thetagssearchshouldbesearch-as-you-type,toavoidlotsofvariationsofthesameterm(e.g.“cycleparking”vs“cycle_parking”).

• Thecategoriesarecampaigning/chat/administrative.Campaigninghasamap,whichisveryimportantindeed.

• Themaphasapresetbuttonwhichfillsinthecurrentgroup’sarea,forusewitharea-wideissues.

• Themapisasimpleclicktosetpoint.However,thereshouldbeanadvancedmodewherelinesorareascanbedrawninstead.

• Thetitleboxshouldhavesearchasyoutype,sothatanexistingissuewouldmorelikelytobepickedup,witha‘Didyouwanttotalkabouttheseexistingissues?….”list.

10

9.Browseissuesmap[Highpriority]

Thisisamapofalltheexistingdiscussions,i.e.thesummaryofeachdiscussion’sgeometries,browseableonamap.Itcontainsadynamicfilteringthatcontainsasearch,aswellastagswithcheckboxesthatcanbeclickedontofiltertothoseimmediately.

• Itcontainsanintroductionthatthescreenislimitedtothegroupsarea(thoughcanbeclickedbeyondtotheungroupedsite-widecontext).

• The10-20mostpopulartagsareshown,butthesearchcanaddmore.• Thesearchresultessentiallycreatesanewtagwithitsboxprefilled.Thusausercan

addmultipletags.• Themapshouldhavepoints,thoughline-basedissuesmightalsobeacceptable.• Area-wideissueswillbeproblematicandwearenotquitesurehowtodealwiththose.• Afull-screenmapisessentialhere–weknowthecurrentmapisfartoosmall.The

panelexampleabovesuggeststhepossibilityofanoverlaywiththemapbleedingunderneath,togiveasenseofalargermapevenifthatpartofthepageisnotvisible.

• Thereneedstobean‘Embedthismapinyourwebsite’button.

11

10.Browseissueslist[Highpriority]

Thispageisequivalenttotheissuesmap,butisatext-basedindex.Itcanbesimilartothecurrentpage(whichismadeofrealissues,butthenewissueswilljustbejoined-togethertagpages).

• Thereisawaytoswitchbacktothemapview.• Thislistingmodeshouldbesecondarytothemap,whichismoreimportant.• Therearelinksto‘beyond’foreach–althoughperhapsthesecouldjustbeonthepages

themselves.• Anissuepage(i.e.virtualtagpage)mightnothaveageometry,sooneoftheaboveis

shownashavingnomap.

12

11.Issuepageexample[Veryhighpriority]

Thisisthepageforasingleissue(tag).Itcanbethoughtofasa‘virtualissue’,madeupautomaticallyofthecombinedgeometriesofeachdiscussion,listingeach.

• Thetagnameformsthetitleofthepage,e.g.“Chisholmtrail”.Notethattagsareintendedtobehuman-readabletextratherthanageekyformatlike‘’chisholm_trail’,sothatthisformsanicetitle.

• Themapisthecombinationofthegeometriesofeachdiscussiontaggedwiththistag.• Thediscussionsareshownontheleft,paginatedifrequired.• Thereisabuttontostartanewdiscussionwiththistag.• Thereshouldbeaspaceundertheheadingwhichallowsanyusertoaddadescription

forthistag,asperWikipedia-stylecrowdsourcing.

13

12.Ideasmapadditionbymemberofthepublic[Highpriority]

Thisisthe‘Ideas’section.It’sessentiallythesectionwhererandommembersofthepublic(whoarenotlikelytobecampaigners)canjustlodgeissuesonamap.Theyclickonamap(thoughcandrawinstead),andthenfillinatitleanddescriptionofwhattheproblemisthattheselectedlocation.WewillalsoshowpinsfromothersitesliketheCycleStreetsPhotomap.

• Thedefaultisclickingonthemap,andadragorre-clickwouldmovethemarker.• Userscanusethe‘Drawinstead’buttontoaddalineorpolygoninstead–thisisamore

advancedoperation.Thiswillcreatemoreusefuldatabutweknowthatdrawingisamoredifficultthingtodo.

• Theform,maybeanoverlayoverthemap,shouldhaveitsfieldslikethemaindiscussionform,i.e.title,description,tags,sothatanIdeacanbeclonedtoadiscussion.

• ThisneedstobevisuallydifferenttotheIssues(fromtags)map.• Existingideasshouldbeshown,tohelpavoidduplication.Theycouldhaveathumbs-up.• Userswillnotneedtobeloggedin.Wemayadda‘confirmbye-mail’linksentif

moderationbecomesrequired.

14

13.Ideasmapcampaignerstartingdiscussion[Highpriority]

ThisistheresultoftheIdeasthatthepublichaveadded.Acampaignerwhoisloggedinisbrowsingtheideasmap,andhasclickedonapoint,andthinksthisisworthyofdiscussion.TheyclickontheStartdiscussion(+)button.ThatclonesthedatatotheNewdiscussionpage.

• Thisisintendedtoshowamappopup.• Thismapcanbethoughtofasaseedforideas.Anideafromthepublicformsaseedthat

thecampaignercanpickupandtakeforward.

15

14.Planningapplicationspage[Highpriority]

Thisisamapofalltheplanningapplicationsinanarea.Insomerespects,itissimilartotheideaspage.Currentplanningapplicationsareshown,andclickingononeshowsapopupwithaDiscuss(+)buttonthatcanbeclonedtoadiscussion.Therearedynamicfilteringcontrolsontheright.Thereisa‘latest’textlistingshownalso.

• Again,thiscouldbeanoverlayoverthemap,togiveavisualsenseofamapthatislargeaspossibleandideallyfull-screen.

• ThefiltercontrolsmatchthoseinStreetFocus,namely,size,typeandstatus.Changesaffectthemaponeachchange,withnoneedforasubmitbutton.

• Thereisasearchboxonthepage,soanapplicationIDcanbesearchedfor.ThisshouldhaveplaceholdertextindicatingitexpectsanIDoraplacename.

• Thelatestapplicationslistingisreasonablycompactandprobablyneedstobepaginated.Eachhasapairofbuttons–HideorDiscuss.Hideremovesitfromthelisting,andDiscussclonestheapplicationtoadiscussion.

16

15.Librarypage[Lowpriority]

Thelibraryisintendedtobeanareaforreusableresources.Theintentionisthatifacampaignerfindsausefulresource,e.g.akeysectionofareport,theycanaddalibraryitem,tagit,andthatwillcomeupinthereplyboxinthediscussionarea.

• Anexampleuse-case:CampaignerMartinknowsthattherulesforallowingcyclinginpedestrianzonesareonpage56ofanobscureDepartmentforTransportpublication.Hestartsalibraryitem–headdsthelinkandextractstherelevanttext,andtagsit‘Pedestrianzone’.Thismeansthateverydiscussionaboutpedestrianzonesnowhavethatresourcesuggestedinthereplyboxasapossibleattachment.

• Thispageismuchasperthecurrentsitedesignwhichdoesnotneedmuchinthewayofchanges.

• Eachlibraryitemneedsaminimapnexttoit,showingthegeographicalareatowhichitapplies.E.g.thepedestrianzoneexamplewouldbealloftheUK,whereastheLondonCycleParkingStandardswouldshowLondon.

17

16.Profilepage[Lowpriority]

Eachuserhasaprofilepage.Itshowstheirdetails,groupmembership(s)andlistofrecentdiscussionstheuserhascommentedon.Thereisabuttontoenableotherstosendthemadirectmessage.

• Thisismuchasperthepresentsitedesignanddoesnotreallyrequiresignificantchanges.

18

17.Accountcreationpage[Mediumpriority]

Weneedacreateaccountpage.

• ItshouldhaveloginviaFacebook/Twitter/Googlelinks/tabsalso.• Logginginusingoneofthesethirdpartieswouldnotbelinkedwithactivityonthesite–

itisjustalogintoavoidhavingtogothroughanaccountcreationprocess.• Aswellasthemainaccountdetails,atthisstageitshouldencouragetheusertojoina

group,byenteringaplacename.Theusermaywanttojoinmultiplegroups,especiallyinLondon.