This site uses cookies. By continuing to browse the site, you agree to our use of cookies. Find out more about cookies.
Skip to main content
Metadecidim's official logo
  • English Triar la llengua Elegir el idioma Choose language
    • Català
    • Castellano
Sign Up Sign In
  • Home
  • Processes
  • Assemblies
  • Initiatives
  • Consultations
  • Conferences
  • Help

Propose new functionalities for Decidim software

#DecidimRoadmap Designing Decidim together

Phase 1 of 1
Open 2019-01-01 - 2030-12-31
Process phases Submit a proposal
  • The process
  • Debates
  • Propose new features
  • News
chevron-left Back to list

User flow / guidance tool

Avatar: Antti Hukkanen Antti Hukkanen
24/08/2019 10:36  

We have received lots of feedback about the complex navigational structure in Decidim. E.g. if the city has active budgeting phase in multiple processes, the users would first have to browse to processes => (possibly select a process group) => select a process => switch to the budgeting tab => authorize themselves (if required) => start the budgeting.

In this case the users are not really interested in anything else but the budgeting phase and it would be better to guide them through the process with a simple flow.

In this particular case the desired user flow would be something like this:
- Require the user to login (needed for budgeting)
- Require the user to authorize them with 1, many or all selected authorization method (needed for budgeting)
- Select the budgeting component from the desired process (only displaying those that the user is authorized in for the budgeting action)
- Do the budgeting
- Repeat the budgeting for any other components the user is authorized in

Also, in the budgeting phase, the user should not be shown the UI overhead links from the participatory space, i.e. the participatory space's header which shows its title, steps and sub-navigation. They are only interested about performing the budgeting in the desired process, so focus the user's attention to the actual budgeting.

The same kind of process could be applied to any component out there, e.g. proposals/ideas. The most use cases we've had, there is always one active phase (proposal, budgeting, etc.) that the users are interested in at the given time. They come to the platform for that particular purpose and are confused when they have to browse through multiple different views in order to perform what they came to do.

We actually tried to build a general module which would allow just this but quickly noticed it was pretty hard to implement this generally because of the way the internal functionality of the components is tied to the participatory space they are in. Basically we ended up creating a flow tool tied to the budgeting component which has its own routes for the budgeting component served by controllers that override the budgeting component's controllers.

The overrides were required to hide the participatory space's navigational structure from the user. Other than that, this component could have been created more generally that would allow attaching it to any component out there.

  • Filter results for category: PX (Participant eXperience) / Usability PX (Participant eXperience) / Usability
Endorsements count0
User flow / guidance tool Comments 9

Reference: MDC-PROP-2019-08-14758
Version number 1 (of 1) see other versions
Check fingerprint

Fingerprint

The piece of text below is a shortened, hashed representation of this content. It's useful to ensure the content hasn't been tampered with, as a single modification would result in a totally different value.

Value: 5e736b36c633718f16c94476056e1aa615e0f29901a1f17a83c91b346a5b0ed0

Source: {"body":{"en":"We have received lots of feedback about the complex navigational structure in Decidim. E.g. if the city has active budgeting phase in multiple processes, the users would first have to browse to processes => (possibly select a process group) => select a process => switch to the budgeting tab => authorize themselves (if required) => start the budgeting.\r\n\r\nIn this case the users are not really interested in anything else but the budgeting phase and it would be better to guide them through the process with a simple flow.\r\n\r\nIn this particular case the desired user flow would be something like this:\r\n- Require the user to login (needed for budgeting)\r\n- Require the user to authorize them with 1, many or all selected authorization method (needed for budgeting)\r\n- Select the budgeting component from the desired process (only displaying those that the user is authorized in for the budgeting action)\r\n- Do the budgeting\r\n- Repeat the budgeting for any other components the user is authorized in\r\n\r\nAlso, in the budgeting phase, the user should not be shown the UI overhead links from the participatory space, i.e. the participatory space's header which shows its title, steps and sub-navigation. They are only interested about performing the budgeting in the desired process, so focus the user's attention to the actual budgeting.\r\n\r\nThe same kind of process could be applied to any component out there, e.g. proposals/ideas. The most use cases we've had, there is always one active phase (proposal, budgeting, etc.) that the users are interested in at the given time. They come to the platform for that particular purpose and are confused when they have to browse through multiple different views in order to perform what they came to do.\r\n\r\nWe actually tried to build a general module which would allow just this but quickly noticed it was pretty hard to implement this generally because of the way the internal functionality of the components is tied to the participatory space they are in. Basically we ended up creating a flow tool tied to the budgeting component which has its own routes for the budgeting component served by controllers that override the budgeting component's controllers.\r\n\r\nThe overrides were required to hide the participatory space's navigational structure from the user. Other than that, this component could have been created more generally that would allow attaching it to any component out there."},"title":{"en":"User flow / guidance tool"}}

This fingerprint is calculated using a SHA256 hashing algorithm. In order to replicate it yourself, you can use an MD5 calculator online and copy-paste the source data.

Share:

link-intact Share link

Share link:

Please paste this code in your page:

<script src="https://meta.decidim.org/processes/roadmap/f/122/proposals/14758/embed.js"></script>
<noscript><iframe src="https://meta.decidim.org/processes/roadmap/f/122/proposals/14758/embed.html" frameborder="0" scrolling="vertical"></iframe></noscript>

Report inappropriate content

Is this content inappropriate?

Reason

9 comments

Order by:
  • Older
    • Best rated
    • Recent
    • Older
    • Most discussed
Conversation with Pierre Mesure
Avatar: Pierre Mesure Pierre Mesure verified-badge
27/08/2019 12:02
  • Get link Get link

Hi Antti, I fully agree with you. It's especially relevant when we talk about participatory budgets because they are have many different phases and require different functions/views at each step. Expecting someone to click the right tabs/buttons is delusional.

I guess a way to guide them a bit better is to rename the tabs of a process each time you change phase to give the relevant one (e.g voting module) more importance. But it requires the civil servants to master the admin page, which they do not always do. In general, there should be a better way to hierarchize the tabs of a process. Right now, it's all the same font, same size and removing the icons made them really hard to see for new users.

I guess the CTA button should help to direct your users where they can perform an action but I'm not sure if it's used so much right now?
https://github.com/decidim/decidim/pull/2440

Avatar: Antti Hukkanen Antti Hukkanen
27/08/2019 17:48
  • Get link Get link

Hi Pierre! Yes, guidance within a single process itself is already a challenge - most of the time the hard part is the "Process" tab which rarely adds much value to the process itself. In my opinion, the first tab should always be the phase that is active, the information tab could be the last tab.

The problem, however, is wider when you have an active budgeting phase in multiple components at the same time. This is the case e.g. with Helsinki where they have separated each major district of the city to their own processes because all the areas have their own budgets, ideas, etc. In this particular case, the desired user flow would be:
1. Select a district (process in this case)
2. Perform the action of the active step (ideation, budgeting, etc.)

The second level navigation of the process is just confusing the users since it can distract them away from what they came to do. They came to do the budget and they already selected an area - the user's attention should be focused there.

Avatar: Antti Hukkanen Antti Hukkanen
27/08/2019 17:53
  • Get link Get link

And also, since the user is anyways required to authorize themselves to perform budgeting, why not already require them to do that when they select an area (a process).

The combiled budgeting module we built for this purpose sets the flow as follows:
1. Login
2. Authorize
3. Area/process selection (only the ones where you are allowed to vote based on the authorization)
4. Perform the action

This prevents the user from getting lost in the system for the preferred action they want to perform. The only problem with the module is that it is tied to the budgeting module (because of the mentioned limitations), so it can only be applied to the budgeting process.

Conversation with Pierre Mesure
Avatar: Pierre Mesure Pierre Mesure verified-badge
27/08/2019 21:55
  • Get link Get link

I agree with what you said, although I think a partial solution lies in improving the selection and visualisation of areas so you don’t have to create a process per district.

From that perspective, Consul handles it slightly better but it’s also far from ideal. One thing I can think of is to add your own custom links on the homepage (maybe a clickable map where clicking your district takes you straight to the voting page of the corresponding district process). On our instances, we even add custom links on the top menu bar to take people straight to the proposal form or the list of all proposals.

I think there’s still a lot of inspiration to get from Paris website: https://budgetparticipatif.paris.fr/bp/jsp/site/Portal.jsp?page=search-solr&conf=listprojects&sortorder=asc&sortname=1856270931452549354random&query=:

Avatar: Antti Hukkanen Antti Hukkanen
27/08/2019 22:52
  • Get link Get link

Yeah, UI wise the Paris platform is more understandable because it only has a single level of navigation, so it is harder to "get lost" in the system. I have actually suggested this earlier in Configure dedicated domain for a participatory space , as at that point we actually needed to hack together an idea collection platform that is only a single process in Decidim. So, the top level nav is already where users select what they want to do (leave an idea, budget, etc.).

This could solve many usability issues, although it would also bring some extra steps configuring the platform (e.g. 3rd party authentication redirect URLs). But of course, serving users better should always be a higher priority than making the system easy for system admins.

I do also see the value in the "Decidim way" of having a single space for all city participation, though. This makes more sense once the platform becomes more known and widespread. Both ways have their pros and cons.

Avatar: Antti Hukkanen Antti Hukkanen
27/08/2019 22:56
  • Get link Get link

Good example of this is also the Metadecidim platform itself, different people use it for different purposes. I have never used any other tab on this platform than the "Processes", as far as I can remember.

E.g. for me to leave a new feature proposal or bug report it requires the following steps (if I'm already logged in):
- Processes
- Select space (Bugs or Feature proposals)
- Change to the correct tab
- Click "New proposal"

On GitHub the same process:
- Issues
- New issue

Avatar: Pierre Mesure Pierre Mesure verified-badge
28/08/2019 07:27
  • Get link Get link

I feel like some problems could be solved by allowing the admins to customize the links in the top menu bar. A lot of instances do it by adding the links manually in the code (even decidim.barcelona) but it shouldn't be that hard to add it as a function.

It seems like what I'm thinking of was already implemented by OSP but the PR was never merged.
https://github.com/decidim/decidim/pull/4027
Any news, @virgile_deville? Is it something that you got working on your own fork?

Avatar: Antti Hukkanen Antti Hukkanen
28/08/2019 07:41
  • Get link Get link

Yeah, that would definitely help. Also, better control of the participatory space nav would also help. Mostly the need is to remove the general information tab, or moving it to the last. We can already create "Pages" for the participatory spaces, so these could be used in case more information is needed.
Possibility to configure the top level navigation
Possibility to configure the participatory space navigation

Regarding the OSP's PR, I recently heard they are building an external module for that:
https://github.com/OpenSourcePolitics/decidim-module-navbar_links

I don't know why the PR was discontinued, though. I also strongly think this should be a core feature.

Avatar: Virgile Deville Virgile Deville
29/08/2019 18:26
  • Get link Get link

Yeah the module is fresh out of the oven. The PR is outdated in terms of decidim version, I think that'w way it is not merged. we might do it again if green light from product to merge it.

Add your comment

Sign in with your account or sign up to add your comment.

Loading comments ...

  • Terms and conditions of use
  • About the community
  • Download Open Data files
  • Metadecidim at Twitter Twitter
  • Metadecidim at Instagram Instagram
  • Metadecidim at YouTube YouTube
  • Metadecidim at GitHub GitHub
Creative Commons License Website made with free software.
Decidim Logo

Confirm

OK Cancel

Please sign in

decidim Sign in with Decidim
Or

Sign up

Forgot your password?