Skip to content
dominic edited this page Aug 9, 2019 · 7 revisions

UX and user journey: Global changes - draft design

Format:

Item -

What it does?

Example

How it works

What else needs to be done

Db work


Key for launch

User journey #347

What it does?

Streamlines the user experience by reducing step from viewing to editing. On load all categories are collapsed. On opening category the fields which have map colours/styles attached are visible. Clicking on those changes map style and prompts user to click building to edit.

Example

Remove 'view map' stage and load straight on 'view data' page. Make editing/saved feel more like a within-form change - active/disabled fields

How it works

On initial load a building is preselected (UCL Senate house?). This displays the current edit page (graphics to be refined). Never without a selected building.

Colour all/any #367

What it does?

For selected fields entered on the website a colour map is provided which updates when you enter/change data. Where we don't colour all we send an acknowledgment to thank user and let them know data was captured.

Example

Similar UI/UX to current like me and location, for each piece of data added the colour tint updates after you hit save. Some maps use tint some use different colours.

How it works

Questions;

  1. How and when to change what is shown, on save display updated map.
    • Colours for fields
    • Impact on scalability and performance

What else needs to be done

  • Choose colours
  • Associate map style with every field
  • limiting map zoom in edit to min zoom ~15

Pick from drop down / autocomplete #365

What it does?

Prevents issues with free text and malicious entry, links to moderation mechanism and linked fields mechanism. Broadly as existing drop downs but with autocomplete when more than x input options/

Example

In streetname you can only pick from names in OS open names list, maybe with add new that is then sent for moderation. Works on land use cat i.e. Type in Industrial get prompted for Industrial - Factory?

How it works

List of possible entries stored in db, then made accessible to UI. For postcodes this could alternately be a REGEX, for numbers a limit on input type

What else needs to be done

Collate lists of names, integrate with moderation mechanism (post oct?)

Db work

Declarative flow #368

What it does?

If you enter one field, related fields are enabled and become visible and act as prompt to complete the category.

Example

Planning category; Only show 3 main fields for category, if you enter one of these others appear based on that selection.

How it works

  1. Click on field
  2. Map style changes as colour any/all
    • On save map updates, colour changes
    • Next field becomes extra fields become visible
    • User can tab to next changing map style to field style, is removing colour completely or just changing tint. Categorical categories (age and community) more complex than location / like me example.

Issues references

https://github.com/tomalrussell/colouring-london/issues/300

Feature tour / overlay introduction #336

What it does?

On first sign in overlay feature tour, many open packages for this. Also offer video/GIF guide as some people prefer that and easy to share on social media etc.

Example

https://stackoverflow.com/questions/23363529/client-side-feature-tour-tutorial-instructional-overlay-system

Back end cookie session

Required to know first visit or dismissed


Nice-to-have for launch

Autosave #113

Example

I enter data into a field and hit return or tab to next, data is saved map is restyled. Can tile server be set so that the once building edit is clicked the tile is sent to render for all possible updates? Don't understand who tile rendering works.

How it works

What else needs to be done

Db work

Soft verification

What it does?

Shows edit history, see last edit item for details.

Edit history

What it does?

Show last edit for selected fields (Polly query on how a viewer sees last n edits)

Example

When viewing the building data you also see the date of last edit (day/month/year?) and who made the edit. Is there a risk of disclosing personal data here, ie does the edit get logged as the team or individual (individual makes sense)

How it works

Database last edit log for field is called and displayed by the field.

What else needs to be done


Not key for launch

Generated fields

What it does?

Works with declarative mechanism to complete related field when field entry is given.

Example

Age category. Enter year and decade and century are then populated, for autogenerated fields entry is locked and can only be overwritten by changing the generating field. Land use category, some provides the class field and the grouping and order get completed.

How it works

For age some simple client side javascript.

What else needs to be done

Db work

Full verification

What it does?

A tick box applied to designated fields to allow users to verify the data and or data source. Works in combination with soft verification. If more than 5 verifications, overwrite of field triggers moderation process, unless building is demolished.

Example

Building date is 1850, user sees the date and also original user is 18th_century_team user confirms the 1850 date and verifies.

How it works

Tick box next to field(s). Monitor for user engagement over first 6 months, this is very useful for those looking at the data out if it's used.

What else needs to be done

Database fields, would need extra field for every applicable field.

Source

What it does?

Allows source to be added for designated field. Harness declarative function by prompting (requiring?) the source to be added. This works in combination with related edit. Design option for each field, after entering data prompt for source on required fields. After entry source is hidden by default but can be viewed.

Example

I enter the date, I'm then prompted/required to pick my source from the drop down, if url then I'm asked to input this. If entering different date to one already shown previous source is archived, ie you can't attach new date without updating source.

How it works

As above, front end work to make function. Db to set up fields for categories.

What else needs to be done

Setup declarative system.

Related fields / related edit

What it does?

Gives prompt that if you've filled in one field you'll maybe know the other ie roof form / roof material.

Demolition history and change of use history start/end pairs

What it does?

Collects demolition history and use history, json b list. Which logs this. Refer to Github issue #266

How it works

What else needs to be done

Db work

Db columns for history fields

Moderation mechanism for free text

What it does?

For the few free text options we have (mainly design team and building name). We need moderation mechanism so that when text entered it is passed for moderation before being visible, once moderated it is accepted and locked. This links to drop down and auto complete, if a new source is added and accepted that should then be available as autocomplete/drop down in available fields.

Linked fields filter (or prompt)

What it does?

Sets restriction on what can be entered into related field. Needs careful think through to prevent unexpected restrictions, review what fields this would apply to.

Example

Roof type and roof material, if flat roof can only be certain material type.

Db function

None needed?

Front end function


Post October, features to consider, future proofing

Filter any / global search - How do we do this, key long term.

What it does?

Displays map filtered by a specific field in the database

Example

Show me every victorian building or mosque

How it works

Elastic search box, see superset table example. Enter multiple items, these get passed to db as sql search (danger of injection attack, use autocomplete to validate and reject text?)

What else needs to be done

Big item


Completed

Multiple fill tool #282

What it does?

Takes category/selected fields and then applies them to multiple footprints.

How it works

See Github #282 and #283

Clone this wiki locally