open police design principles - open belgium 2016
TRANSCRIPT
![Page 1: Open Police Design Principles - Open Belgium 2016](https://reader033.vdocuments.mx/reader033/viewer/2022052706/58ed6df71a28ab75708b45fb/html5/thumbnails/1.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052706/58ed6df71a28ab75708b45fb/html5/thumbnails/2.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052706/58ed6df71a28ab75708b45fb/html5/thumbnails/3.jpg)
On any internet enabled device near you.
![Page 4: Open Police Design Principles - Open Belgium 2016](https://reader033.vdocuments.mx/reader033/viewer/2022052706/58ed6df71a28ab75708b45fb/html5/thumbnails/4.jpg)
www.openpolice.be/sites/
Local Police websitesUsed by 75% of Local Police zones & Federal Police
![Page 5: Open Police Design Principles - Open Belgium 2016](https://reader033.vdocuments.mx/reader033/viewer/2022052706/58ed6df71a28ab75708b45fb/html5/thumbnails/5.jpg)
Sessions and Pageviews from 2010 till end of 2015
![Page 6: Open Police Design Principles - Open Belgium 2016](https://reader033.vdocuments.mx/reader033/viewer/2022052706/58ed6df71a28ab75708b45fb/html5/thumbnails/6.jpg)
1. Start with user needshttps://flic.kr/p/eQtasQ
![Page 7: Open Police Design Principles - Open Belgium 2016](https://reader033.vdocuments.mx/reader033/viewer/2022052706/58ed6df71a28ab75708b45fb/html5/thumbnails/7.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052706/58ed6df71a28ab75708b45fb/html5/thumbnails/8.jpg)
What does the user need?without Social Media acquisition
+75% visitors for Contact & Questions
![Page 9: Open Police Design Principles - Open Belgium 2016](https://reader033.vdocuments.mx/reader033/viewer/2022052706/58ed6df71a28ab75708b45fb/html5/thumbnails/9.jpg)
Use caseDistrict officer search
![Page 10: Open Police Design Principles - Open Belgium 2016](https://reader033.vdocuments.mx/reader033/viewer/2022052706/58ed6df71a28ab75708b45fb/html5/thumbnails/10.jpg)
Use caseYour district officer, contact info & office hours
![Page 11: Open Police Design Principles - Open Belgium 2016](https://reader033.vdocuments.mx/reader033/viewer/2022052706/58ed6df71a28ab75708b45fb/html5/thumbnails/11.jpg)
2. Do lesshttps://flic.kr/p/bwHCXU
![Page 12: Open Police Design Principles - Open Belgium 2016](https://reader033.vdocuments.mx/reader033/viewer/2022052706/58ed6df71a28ab75708b45fb/html5/thumbnails/12.jpg)
Re-use existing resources (like APIs)
Don’t reinvent the wheel every time
![Page 13: Open Police Design Principles - Open Belgium 2016](https://reader033.vdocuments.mx/reader033/viewer/2022052706/58ed6df71a28ab75708b45fb/html5/thumbnails/13.jpg)
http://www.openpolice.be/blog/2014/09/12/streets-database.html
CRAB - AGIVFlemish streets database
![Page 14: Open Police Design Principles - Open Belgium 2016](https://reader033.vdocuments.mx/reader033/viewer/2022052706/58ed6df71a28ab75708b45fb/html5/thumbnails/14.jpg)
http://www.openpolice.be/stack/
Open Source stack
![Page 15: Open Police Design Principles - Open Belgium 2016](https://reader033.vdocuments.mx/reader033/viewer/2022052706/58ed6df71a28ab75708b45fb/html5/thumbnails/15.jpg)
3. Design with datahttps://flic.kr/p/cpzHPw
![Page 16: Open Police Design Principles - Open Belgium 2016](https://reader033.vdocuments.mx/reader033/viewer/2022052706/58ed6df71a28ab75708b45fb/html5/thumbnails/16.jpg)
Don’t make assumptions
Watch and learn from real user behaviour
![Page 19: Open Police Design Principles - Open Belgium 2016](https://reader033.vdocuments.mx/reader033/viewer/2022052706/58ed6df71a28ab75708b45fb/html5/thumbnails/19.jpg)
User testing
![Page 20: Open Police Design Principles - Open Belgium 2016](https://reader033.vdocuments.mx/reader033/viewer/2022052706/58ed6df71a28ab75708b45fb/html5/thumbnails/20.jpg)
4. Do the hard work to make it simplehttps://flic.kr/p/qhd2dh
![Page 21: Open Police Design Principles - Open Belgium 2016](https://reader033.vdocuments.mx/reader033/viewer/2022052706/58ed6df71a28ab75708b45fb/html5/thumbnails/21.jpg)
Making something look simple is easy ...
… making something simple to use is much harder
![Page 22: Open Police Design Principles - Open Belgium 2016](https://reader033.vdocuments.mx/reader033/viewer/2022052706/58ed6df71a28ab75708b45fb/html5/thumbnails/22.jpg)
https://twitter.com/Paul_Framp/status/467398108985692160/
Before
![Page 23: Open Police Design Principles - Open Belgium 2016](https://reader033.vdocuments.mx/reader033/viewer/2022052706/58ed6df71a28ab75708b45fb/html5/thumbnails/23.jpg)
https://twitter.com/Paul_Framp/status/467398108985692160/
After
![Page 24: Open Police Design Principles - Open Belgium 2016](https://reader033.vdocuments.mx/reader033/viewer/2022052706/58ed6df71a28ab75708b45fb/html5/thumbnails/24.jpg)
5. Iterate. Then iterate again.https://flic.kr/p/byypYZ
![Page 25: Open Police Design Principles - Open Belgium 2016](https://reader033.vdocuments.mx/reader033/viewer/2022052706/58ed6df71a28ab75708b45fb/html5/thumbnails/25.jpg)
+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](https://reader033.vdocuments.mx/reader033/viewer/2022052706/58ed6df71a28ab75708b45fb/html5/thumbnails/26.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052706/58ed6df71a28ab75708b45fb/html5/thumbnails/27.jpg)
6. Build for inclusionhttps://flic.kr/p/faH5Lt
![Page 28: Open Police Design Principles - Open Belgium 2016](https://reader033.vdocuments.mx/reader033/viewer/2022052706/58ed6df71a28ab75708b45fb/html5/thumbnails/28.jpg)
Accessible design is good design
Make it inclusive, clear and readable
![Page 29: Open Police Design Principles - Open Belgium 2016](https://reader033.vdocuments.mx/reader033/viewer/2022052706/58ed6df71a28ab75708b45fb/html5/thumbnails/29.jpg)
http://www.dekamer.be/flwb/pdf/53/3403/53K3403001.pdf
![Page 30: Open Police Design Principles - Open Belgium 2016](https://reader033.vdocuments.mx/reader033/viewer/2022052706/58ed6df71a28ab75708b45fb/html5/thumbnails/30.jpg)
![Page 31: Open Police Design Principles - Open Belgium 2016](https://reader033.vdocuments.mx/reader033/viewer/2022052706/58ed6df71a28ab75708b45fb/html5/thumbnails/31.jpg)
http://bradfrost.com/blog/web/mobile-first-responsive-web-design/
Mobile First Progressive Enhanced
![Page 32: Open Police Design Principles - Open Belgium 2016](https://reader033.vdocuments.mx/reader033/viewer/2022052706/58ed6df71a28ab75708b45fb/html5/thumbnails/32.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052706/58ed6df71a28ab75708b45fb/html5/thumbnails/33.jpg)
![Page 34: Open Police Design Principles - Open Belgium 2016](https://reader033.vdocuments.mx/reader033/viewer/2022052706/58ed6df71a28ab75708b45fb/html5/thumbnails/34.jpg)
![Page 35: Open Police Design Principles - Open Belgium 2016](https://reader033.vdocuments.mx/reader033/viewer/2022052706/58ed6df71a28ab75708b45fb/html5/thumbnails/35.jpg)
7. Build digital services, not websiteshttps://flic.kr/p/gtrSxL
![Page 37: Open Police Design Principles - Open Belgium 2016](https://reader033.vdocuments.mx/reader033/viewer/2022052706/58ed6df71a28ab75708b45fb/html5/thumbnails/37.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052706/58ed6df71a28ab75708b45fb/html5/thumbnails/38.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052706/58ed6df71a28ab75708b45fb/html5/thumbnails/39.jpg)
8. Understand contexthttps://flic.kr/p/o3ZQHn
![Page 40: Open Police Design Principles - Open Belgium 2016](https://reader033.vdocuments.mx/reader033/viewer/2022052706/58ed6df71a28ab75708b45fb/html5/thumbnails/40.jpg)
Understand the circumstances
Nuisance at night
![Page 41: Open Police Design Principles - Open Belgium 2016](https://reader033.vdocuments.mx/reader033/viewer/2022052706/58ed6df71a28ab75708b45fb/html5/thumbnails/41.jpg)
9. Be consistenthttps://flic.kr/p/9KR59t
![Page 42: Open Police Design Principles - Open Belgium 2016](https://reader033.vdocuments.mx/reader033/viewer/2022052706/58ed6df71a28ab75708b45fb/html5/thumbnails/42.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052706/58ed6df71a28ab75708b45fb/html5/thumbnails/43.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022052706/58ed6df71a28ab75708b45fb/html5/thumbnails/44.jpg)
10. Make things openhttps://flic.kr/p/nDzaE3
![Page 47: Open Police Design Principles - Open Belgium 2016](https://reader033.vdocuments.mx/reader033/viewer/2022052706/58ed6df71a28ab75708b45fb/html5/thumbnails/47.jpg)
https://gds.blog.gov.uk/about/
Design Principles inspired by UK’s Government Digital Service
![Page 48: Open Police Design Principles - Open Belgium 2016](https://reader033.vdocuments.mx/reader033/viewer/2022052706/58ed6df71a28ab75708b45fb/html5/thumbnails/48.jpg)
We build things for the webwww.timble.net
Thank youwww.openpolice.be - @OpenPoliceBE