cyclescape screen wireframes · cyclescape screen wireframes this document lists each of the...
TRANSCRIPT
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.