PARLAMENTO ELETTRONICO ONLINE

Design Principles

Ravenna, Summer School LEX2013, 10 September 2013

Presentation by Emanuele Sabetta, Lead Project Designer

PAR.EL.ON.

• An Open Source Platform for Direct Democracy• Integrates solutions from 20 years of eDemocracy

experiments all over the world• Completely based on open standards (Akoma

Ntoso, EuroVoc, etc.)

USER INTERFACERedesigned to Improve Usability

INTUITIVE RECOGNITION OF INTERACTIVE ELEMENTS IN THE PAGE

Big Buttons with 3D look to be easily distinguished from the plane of the page and sized for touch devices.

Graphic Language For UI Interaction ( curved = interactive , sharp corners = no )

Abandonment of Underscore as a Link Indicator

Reduced the number of choices per page to a minimum, while maintaining a levels of nesting below 5.

Breakdown of User Stories of Liquid Feedback in its atomic elements and restructuring these sequences in a simpler Step-by-Step actions like those of an ATM terminal.

One Page = One Choice

Introduction of Commissions of Experts

•Solves the Problem of the "Government of the Incompetent" raised by Plato

•Technical Commissions Reports allow citizens to provide "informed consent" when they vote a law proposal, ensuring that users are aware of all the risks and benefits deriving from approving it.

•Legal and Financial Commissions provides a report of feasibility but can also propose fixes and modifications to the draft bill that users must approve with another vote.

•Neutrality Guaranteed by "Randomized Shifts" of members at each convocation.

LEGISLATIVE ITER PHASES BAR

Most of the problems of comprehensibility in Liquid Feedback derived from the non-immediate understanding of the complex life cycle of a proposal.

We added a phases bar that associates a set of boxes representing the phases of the legislative iter.

A moving arrow above the boxes allows you to see immediately at what stage you are in, what you do at the current stage, and what will be the next step.

EVENT NOTIFICATION SYSTEM

Another problem was the difficulty in following the events and the changes happening in Liquid Feedback. There was no way to figure out what had changed, what were the new proposals or the new amendments introduced since the last login in a specific proposal. The introduction of a notification system for each proposal, with indicators the type of event and the number of modifications, now allows the user to get immediately an idea of the new things that need to be examined and keep track of those he already checked.

KEYWORDS AND LABELS

•Introduction of Standard Keywords ( Teseo, EuroVoc, GeoNames... ) associated with the Proposals and Issues , to make it easier to catalog and to search them.

•Introduction of Competencies Labels associated with the Proposals and the Issues. Those tags indicate all the Technical Areas of Expertise needed to evaluate an issue or a proposal, making easier to understand the type of technical background necessary to assess the validity of the proposals, allowing the citizens with such expertise to pick the proposals in which they can contribute more.

• Use of very readable sans serif fonts and very LARGE sizes ( Oregon LDO )

• Use of large SUMMARY labels that accompany the data or the options displayed and which highlight the contents in a concise way.

• At any time and in any page the user must be able to read in clear WHERE HE IS , WHAT CAN HE DO and HOW TO GO BACK

• In the case of time related parameters (for example at what stage you are in the legislative iter) we add a time bar or phases bar with a moving arrow that will show where in time or at what stage the user is.

ACCESSIBILITY FOR ALL

3 Security Mechanisms

•Two Factor Authentication Based on strong passwords and OTP Tokens

• Full Transparency : Open Source , Public User Profiles , Public Votes, Independent Ballots Verification ( Helios-Voting inspired digitally signed receipt )

•Open Mirroring: Remote Duplication & Auto Recovery, Data Consistency garantita tramite Multi-Paxos

DETAILS OF THE PROPOSAL

•Phases Bar

•Author Identification With NIN

•Referring Issue Short Summary

•Keywords buttons

•Users Support of this Proposal

PROPOSAL TEXT PREVIEW

•Preview of the text ( No AkomaNtoso)

•Option to full page view in AT4AM

•List of linked documents

•Notifications for new or updated documents

COMMISSION BOX

•Any user can submit a request for a Commission

•Number of Requests must reach a quorum to be approved

•Sistem creates a temporary discussion area and invites members

SUGGESTED AMENDMENTS BOX

•Any user can submit a new amendment

•Amendments can be supported or opposed (5 level scale)

•Only the author of the proposal can choose to approve and implement an amendment.

•The author has more chance to see his proposal approved if he choose to implement the more supported amendments.

•Amendments are edited in a custom edition of AT4AM, using Akoma Ntoso format

AT4AM INTEGRATION AND UI REDESIGNwww.at4am.org

European Parliament Amendment Open Source Tool

AT4AM "LIGHT" FOR TOUCH DEVICES

TWO COLUMN AMENDMENT VIEW

COLUMN / TABLE CELLS SELECTION

Page Left

Margin

Page Right

Margin

Right NeckLeft NeckSelected Article

ToolboxLeft Edge

Selection Toolbox Components

•Left Edge : Position mark

•Necks : Visual Connectors (size constant)

•Selection Box : Selected Text or Paragraph

•Toolbox : Multilevel Menu

Page Left

Margin

Page Right

Margin

Left Edge Toolbox

Right NeckSelected Article

Left Neck

Browser Window

Page Left

Margin

Page Right

Margin

Toolbox

Right NeckLeft NeckSelected Article

Left Edge

Browser Window

The Toolbox is anchored to the selection

in the document page

How The Toolbox Works

How The Toolbox Works

Default position

Page Left

Margin

Page Right

Margin

Right NeckLeft NeckSelected Article

ToolboxLeft Edge

End of Page Position

Page Left

Margin

Page Right

Margin

Left Neck Right NeckSelected Article

Toolbox

Left Edge

How The Toolbox Works

Default position

Page Left

Margin

Page Right

Margin

Right NeckLeft Neck Selected Paragraph

ToolboxLeft Edge

End of Page Position

Page Left

Margin

Page Right

Margin

Left Neck Right NeckSelected Paragraph

Toolbox

Left Edge

http://lime.cirsfid.unibo.it/

INITIAL DRAFTING OF THE BILLS

•We are encouraging the creation of the first draft directly in Akoma Ntoso format

•We are collaborating with University of Bologna (Prof. Monica Palmirani and Prof. Fabio Vitali ) to integrate the Lime Editor in PARELON

•We are working to develop a customized regional and national set of legal rules and constraints to help the user drafting a well formed law proposal using the LegalML format.

•We are developing a new user interface for both Lime and AT4AM that will allow the user with no knowledge of law or of xml to understand and use all of the legally binding elements of the Akoma Ntoso.

END

Slides created by Emanuele Sabetta emanuele.sabetta@gmail.com

http://www.parelon.lazio.it/