Open Police Design Principles - Open Belgium 2016

48
Open Police The design principles behind the open government platform of the Belgian Police. www.openpolice.be @OpenPoliceBE Open Belgium 29 February 2016, Antwerp

Transcript of Open Police Design Principles - Open Belgium 2016

Page 1: Open Police Design Principles - Open Belgium 2016

Open Police

The design principles behind the open government platform of the Belgian Police.

www.openpolice.be@OpenPoliceBE

Open Belgium29 February 2016, Antwerp

Page 2: Open Police Design Principles - Open Belgium 2016

Who are we?

www.timble.net

● I’m Tom Janssens (@janssenstom)

● Multidisciplinair and fully remote team, 15 strong

● Lead by Joomla co-founder Johan Janssens

● Deep roots in Open Source

● Developing the Open Police platform since 2010

Page 3: Open Police Design Principles - Open Belgium 2016

On any internet enabled device near you.

Page 4: Open Police Design Principles - Open Belgium 2016

www.openpolice.be/sites/

Local Police websitesUsed by 75% of Local Police zones & Federal Police

Page 5: Open Police Design Principles - Open Belgium 2016

Sessions and Pageviews from 2010 till end of 2015

Page 6: Open Police Design Principles - Open Belgium 2016

1. Start with user needshttps://flic.kr/p/eQtasQ

Page 7: Open Police Design Principles - Open Belgium 2016

People come to our sites to accomplish tasks and fulfil needs

Not just to hang out

Page 8: Open Police Design Principles - Open Belgium 2016

What does the user need?without Social Media acquisition

+75% visitors for Contact & Questions

Page 9: Open Police Design Principles - Open Belgium 2016

Use caseDistrict officer search

Page 10: Open Police Design Principles - Open Belgium 2016

Use caseYour district officer, contact info & office hours

Page 11: Open Police Design Principles - Open Belgium 2016

2. Do lesshttps://flic.kr/p/bwHCXU

Page 12: Open Police Design Principles - Open Belgium 2016

Re-use existing resources (like APIs)

Don’t reinvent the wheel every time

Page 13: Open Police Design Principles - Open Belgium 2016

http://www.openpolice.be/blog/2014/09/12/streets-database.html

CRAB - AGIVFlemish streets database

Page 14: Open Police Design Principles - Open Belgium 2016

http://www.openpolice.be/stack/

Open Source stack

Page 15: Open Police Design Principles - Open Belgium 2016

3. Design with datahttps://flic.kr/p/cpzHPw

Page 16: Open Police Design Principles - Open Belgium 2016

Don’t make assumptions

Watch and learn from real user behaviour

Page 18: Open Police Design Principles - Open Belgium 2016

Heatmaps, Recordings, Funnels, Forms - www.hotjar.com

Page 19: Open Police Design Principles - Open Belgium 2016

User testing

Page 20: Open Police Design Principles - Open Belgium 2016

4. Do the hard work to make it simplehttps://flic.kr/p/qhd2dh

Page 21: Open Police Design Principles - Open Belgium 2016

Making something look simple is easy ...

… making something simple to use is much harder

Page 24: Open Police Design Principles - Open Belgium 2016

5. Iterate. Then iterate again.https://flic.kr/p/byypYZ

Page 25: Open Police Design Principles - Open Belgium 2016

+400 closed development tickets since September 2013.

Start small and iterate wildly

Add features and refinements based on feedback from real users

Page 26: Open Police Design Principles - Open Belgium 2016

http://www.openpolice.be/blog/2014/09/10/schedule-a-news-article.html

Schedule a news article

Page 27: Open Police Design Principles - Open Belgium 2016

6. Build for inclusionhttps://flic.kr/p/faH5Lt

Page 28: Open Police Design Principles - Open Belgium 2016

Accessible design is good design

Make it inclusive, clear and readable

Page 30: Open Police Design Principles - Open Belgium 2016
Page 31: Open Police Design Principles - Open Belgium 2016

http://bradfrost.com/blog/web/mobile-first-responsive-web-design/

Mobile First Progressive Enhanced

Page 32: Open Police Design Principles - Open Belgium 2016

Old browsers?

They’ll get the most basic version: single column layout & not enhanced with Javascript.

It’s that easy!

Page 33: Open Police Design Principles - Open Belgium 2016
Page 34: Open Police Design Principles - Open Belgium 2016
Page 35: Open Police Design Principles - Open Belgium 2016

7. Build digital services, not websiteshttps://flic.kr/p/gtrSxL

Page 36: Open Police Design Principles - Open Belgium 2016

schema.org

JSON Linked Data

Page 37: Open Police Design Principles - Open Belgium 2016

http://jsonapi.org/

Provide Open Data

Accessible, machine-readable standardized data that others can use.

Downloadable spreadsheets or CSV files

Page 38: Open Police Design Principles - Open Belgium 2016

http://www.lokalepolitie.be/5388/nieuws.json

RESTful APIThe platform is designed around the HTTP protocol. All data is available

through a level 3 JSON REST API.

Page 39: Open Police Design Principles - Open Belgium 2016

8. Understand contexthttps://flic.kr/p/o3ZQHn

Page 40: Open Police Design Principles - Open Belgium 2016

Understand the circumstances

Nuisance at night

Page 41: Open Police Design Principles - Open Belgium 2016

9. Be consistenthttps://flic.kr/p/9KR59t

Page 42: Open Police Design Principles - Open Belgium 2016

Same design patterns and language

So users will have a reasonable chance of guessing what they’re supposed to do

Page 43: Open Police Design Principles - Open Belgium 2016

http://en.wikipedia.org/wiki/Digital_divide

Digital divide

The gap between those who have access to information and the skills to make use of it and

those who do not have the skills.

Average digital literacy decreases when digital audience increases.

Page 44: Open Police Design Principles - Open Belgium 2016

10. Make things openhttps://flic.kr/p/nDzaE3

Page 45: Open Police Design Principles - Open Belgium 2016

http://www.openpolice.be

Sharing helps

Page 46: Open Police Design Principles - Open Belgium 2016

Try it yourself

www.openpolice.be/demo

Page 47: Open Police Design Principles - Open Belgium 2016

https://gds.blog.gov.uk/about/

Design Principles inspired by UK’s Government Digital Service