Altinn / altinn-studio

Next generation open source Altinn platform and applications.
https://docs.altinn.studio
BSD 3-Clause "New" or "Revised" License
111 stars 70 forks source link

Follow-up the UX of pre/custom actions #12835

Closed framitdavid closed 2 months ago

framitdavid commented 3 months ago

Based on the discussion within issue: https://github.com/Altinn/altinn-studio/issues/12151, we should consider user-testing our current implementation and then iterate if needed. 💯

@Annikenkbrathen has created a potential improvement: Image

### Tasks
- [x] Find service developers that has a understanding of actions
- [x] test with app migration
- [ ] https://github.com/Altinn/altinn-studio/issues/12950
framitdavid commented 3 months ago

I added to sprint, to be able to update to the newest design system. Our custom actions implementation does not work with the current combobox. :)

Annikenkbrathen commented 3 months ago

Resultat etter brukertest

@framitdavid

Totalt 4 testere 4 av 4 foretrakk action select I tabs sÄ jeg foreslÄr at vi bytter ut combox-selecten da den allerede byr pÄ litt utfordringer

Action combobox (Dagens design)

Action select I tabs

Switch "Handlinger skal ikke pÄvirke prosessen" Skjermbilde 2024-06-07 kl  10 09 23

Oppsummering

framitdavid commented 3 months ago

Resultat etter brukertest

@framitdavid

Totalt 4 testere 4 av 4 foretrakk action select I tabs sÄ jeg foreslÄr at vi bytter ut combox-selecten da den allerede byr pÄ litt utfordringer

Action combobox (Dagens design)

  • forstĂ„r valgmulighetene etter beskrivelsen. ForstĂ„r at det er to mĂ„ter Ă„ sette opp actions pĂ„
  • FĂžler fritekst skal brukes som et sĂžk i listen, ikke til Ă„ lage et nytt valg.
  • FĂžler det er feil Ă„ skrive inn eget navn i selecten
  • forventer Ă„ finne sin egen handling i listen som man legger til enda en ny handling
  • Vanskelig Ă„ legge merke til switchen som dukker opp om man skriver en egen
  • Det kommer opp en tekst i nedtrekken nĂ„r du begynner Ă„ skrive. "Dette burde vĂŠrt en knapp som sto "legg til handling". Ønsker Ă„ trykke pĂ„ det som dukker opp"
  • Rart at lagre knappen er disable, men kan trykkes pĂ„. De fleste fĂ„r til Ă„ lagre selvom det er rart.
  • Det er en risiko for Ă„ ikke lagre dersom man ikke lukker visningen
  • 2 stykker skjĂžnte ikke at de mĂ„tte lagre etter Ă„ ha valgt

Action select I tabs

  • Liker at egendefinert er mer skjult "det er vel ikke mange som trenger det?"
  • Tydelig at du har to mĂ„ter Ă„ legge til en handling pĂ„
  • skjĂžnner at om du velger Ă„ fylle ut bĂ„de egendefinert og tab, sĂ„ vil den siden som du er pĂ„ nĂ„r du lukker, vĂŠre den som blir lagret.
  • liker de siste oppfaterte titlene best. De skjĂžnner meningen bak tab-overskriften

Switch "Handlinger skal ikke pÄvirke prosessen" Skjermbilde 2024-06-07 kl 10 09 23

  • vanskelig Ă„ forstĂ„ hensikten med dette valget.
  • hvorfor vil man ikke pĂ„virke prosessen? og kan man bestemme hvordan den pĂ„virkes om man trykker ja? hvor setter vi opp hvordan den pĂ„vrikes? i gateways?
  • ikke lurt Ă„ bruke "ikke" i teksten pĂ„ en switch. Man blir usikker pĂ„ hva som skjer om den er pĂ„ eller av.
  • siste setningen i hjelpeteksten er ikke vits Ă„ ha med. " Dette alternativet er kun tilgjengelig for egendefinerte handlinger." det er opplagt nĂ„r den kun dukker opp ved det valget/ kun vises i Taben det gjelder.
  • Ønsker et eksempel pĂ„ bruk

Oppsummering

  • De forstĂ„r og fĂ„r til Ă„ legge til med begge design
  • Noen skjĂžnner ikke lagre konseptet pĂ„ combobox, derfor fungerte tabs i et card bedre
  • Switchen kan overses i combox designet, da den dukker opp litt diskret etter valget
  • Det er flere forventninger som brytes i combox. lagre, at du ikke kan legge til egne handlinger i listen, at det dukker opp en uventet switch
  • Action select I tabs: De skjĂžnner forskjellen pĂ„ Tabene, og at de kun kan velge en av de nĂ„r de legger til
  • Switchen er forvirrende. Her savner de et eksempel pĂ„ bruk, og mer forklaring pĂ„ hvordan det settes opp. Hva skjer med og hva skjer uten? Det bĂžr ogsĂ„ unngĂ„ Ă„ bruke ordet "ikke". ogsĂ„ mĂ„ det som mest sannsynlig er mest brukt, stĂ„ pĂ„ som standard valg i switchen Skjermbilde 2024-06-07 kl  11 08 43

Amazing work!! Thanks! 👏

standeren commented 2 months ago

Tested, but there are some small issues;

  1. When adding an empty action (either not choosing a predefined action or saving an empty custom) we get an empty action in the process-file: <altinn:action /> - might not be illegal config, but noice. And you get the add-action-button UI, but with the Handling {INDEX} as text for the button.
  2. When deleting an action that is not last, when there are multiple other actions, you will get the subsequent action in editmode but with the action-name of the deleted action so it is easy to miss that the original action that was in editmode was actually deleted. The ideal behavior here would be that the action in editmode was deleted and nothing else happened with the view of the other actions.
  3. I believe this is a more critical fault; when enabling connecting action to next step the server action is set in the process-file, but if connecting it to the next process task type should be processAction (or no type which is the same) đŸ€”

And I also have a question concerning the UI; is it by design that the name of the action is written twice when in preview-mode? And nitpick, but we should skip the . in the switch-text

framitdavid commented 2 months ago

When adding an empty action (either not choosing a predefined action or saving an empty custom) we get an empty action in the process-file: - might not be illegal config, but noice. And you get the add-action-button UI, but with the Handling {INDEX} as text for the button.

I will investigate handling {INDEX} as text. As for the other aspect, I'll create a separate issue since it's already functioning like this in prod. However, I agree that there's room for improvement in that area. 😊

When deleting an action that is not last, when there are multiple other actions, you will get the subsequent action in editmode but with the action-name of the deleted action so it is easy to miss that the original action that was in editmode was actually deleted. The ideal behavior here would be that the action in editmode was deleted and nothing else happened with the view of the other actions.

I suspect that this issue arises because we are using the index as the key here. We need to find another way to handle the keys. Perhaps we can add an attribute for the Studio when adding actions? That way, we can ensure a stable key that we can use in the list of actions. It seems we cannot use index + action, as this may cause everything to re-render and the card will change modus to view instead of edit. We definitely need to find a solution with a stable key that does not change. I will look into that.

I believe this is a more critical fault; when enabling connecting action to next step the server action is set in the process-file, but if connecting it to the next process task type should be processAction (or no type which is the same) đŸ€”

I will look into this immediately and create a PR to ensure the deployments are not blocked by this, nice catch!

framitdavid commented 1 month ago

Closed due to fixes within the following PR: https://github.com/Altinn/altinn-studio/pull/13333