Closed vegardsoerlie closed 3 years ago
Det frister litt å gå for den enkle løsningen å bruke samme stil som hjelpeteksten.
Synes den venstrejusterte varianten skaper en viss ubalanse. Ser poenget med at nedtellingen kan hijacke hjelpeteksten men tenker at en alternativ løsning kan være å legge på en optional linje for nedtelling som følger samme mal som hjelpeteksten. Nedtellingen er jo også en slags hjelpetekst.
For tekstfelt med mulighet for mange tegn kan vi f.eks animere inn hjelpeteksten når brukeren nærmer seg limit?
Her er en enkel prototype. Kanskje den teksten som er for mye kan markeres rød for å tydeliggjøre (for de som har fargesyn)? Har også lagt inn en liten animasjon i overgangen fra nedtelling til feilmelding.
Et spørsmål: Validerer feltet feil umiddelbart når man (i dette tilfellet) har tastet mer enn 200 tegn?
@Steinop Likte prototypen veldig godt! Hos oss er det ikke mulig å skrive noe mer når den treffer "0 tegn gjenstår", så den vil ikke validere feil.
Vet ikke om det noensinne vil være mulig eller om det er noe poeng å kunne skrive mer enn tillatt antall tegn? Virket bare litt fristende å la brukeren få skrive ferdig. Kanskje vi burde hatt et eget AI som sørget for å forenkle og forkorte teksten? 😂
Vil det være mulig å endre innholdet i nedtellingen litt før man nærmer seg limit? Vet ikke om det nødvendigvis gir så mye mer enn harde fakta ala "38 av 200 tegn". Man vil jo se at det telles mens man skriver. Å begynne med varseltrekanter og flashe for mye og oppdatere til et strengere varsel virker egentlig litt unødvendig her.
Et annet spørsmål er om en tegn-limit virker gammeldags? Hvorfor har man en slik limit? Er det kun fordi systemet i bakkant er gammeldags eller er det for å tvinge brukeren til å formulere seg kortfattet slik at saksbehandlingen tar kortere tid?
Hvordan er det ellers med lagring mens man skriver? Mellomlagres teksten hvis man backer ut av siden og går inn igjen? Har vært innom noen løsninger der alt blir borte. Det kan være utrolig frustrerende.
@Steinop Det vil gå an å endre innholdet jo nærmere 0 det er, men jeg tror ikke det er noe vits. Som du sier er nok varseltrekanter og blinking litt mye. Det at noe beveger seg (tall som teller ned) er ofte nok for å trekke visuelt i min erfaring.
Vi benytter oss av det for at brukeren må være kortfattet slik at det igjen blir enklere for saksbehandler dersom saken ikke kan automatiseres og må gjennomgås manuelt.
Ellers så lagres det kun på onBlur, altså når tekstfeltet mister fokus, men en mulig løsning kunne feks vært å lagre for hvert 100. tegn som er skrevet inn. Det umiddelbare problemet jeg ser med det er at lagringskallet kan ta bittelitt tid på en dårlig dag, så bruker får ikke skrevet samtidig. Det kan oppleves som frustrerende. (Det finnes dog veier rundt dette)
Med bakgrunn i en overveldende mengde input fra designere og utviklere har jeg tegnet ut retningen med brøk inni tekstfelt. Hvordan dette skal oppføre seg i alle tilfeller bør testes ut i prosjektene men løsningen som er tegnet ut er fleksibel/skalerbar med flere features som kan være mulig å skru av og på etter behov. Det vil si at den kan utviklers som en MVP der kun telleren vises - eller med mer avanserte/brukerstøttende funksjoner etter behov:
Teller (i brøkformat: X/XXX): Mulighet for å alltid vise telleren eller vente til man nærmer seg et visst antall/prosent tegn. I et felt med max 200 tegn bør man eksempelvis alltid vise maksgrensen slik at brukerens forventninger alltid er satt. Hvis feltet har en maksgrense på 1600 tegn kan man velge å vise telleren først når brukeren nærmer seg grensen. På den måten gir vi ikke brukeren en forventning om at det er nødvendig å skrive veldig mye (da blir saksbehandlerne glade ...)
Progressbar: Ekstra indikator langs bunnen av tekstfeltets ramme. Progressbaren starter i 100% bredde (100% bredde = 0 tegn skrevet) og reduseres mot 0% bredde (= max antall tegn). Hvis progressbar ikke skal vises før man nærmer seg et bestemt antall tegn animeres streken inn fra bunn og fra 100% bredde til nåværende prosentverdi.
Informasjonsmelding: Melding som følger malen til feilmelding under inputfelt men med blå farge istedenfor rød. Meldingen forteller hvor mange tegn som gjenstår. Denne brukes når man kun har få tegn igjen og som en ytterligere klargjøring om at maksgrensen er nær.
Flere tegn enn maksgrensen: For å gi brukeren mulighet til å fullføre en tankerekke kan man tillate å skrive flere tegn enn maksgrensen. Status endrer seg til feilmelding (rød ramme, rød brøk og rød feilmelding under inputfelt). Samtidig får overskridende tekst rød farge. Denne funksjonen er spesielt nyttig i tilfeller der brukeren limer inn tekst fra en annen kilde.
For mobil / små skjermer er det spesielt viktig at hele tekstfeltet vises når man har tastaturet oppe slik at feilmeldinger og teller synes.
Komponenter ligger i Figma biblioteket som Normal, kompakt og dark mode versjoner: https://www.figma.com/file/Wh8Gfnesn25shH31sKyIaT/J%C3%B8kul-bibliotek?node-id=753%3A0
@Steinop Denne saken blir med på vår neste sprint, fra mandag av
Saken ble nedprioritert for vår del da andre mer kritiske funksjoner mangler, samt at jeg blir opptatt hele neste uke. Foreslår at et annet team tar over hvis de har umiddelbar behov for komponenten. Hvis ikke tar jeg det så fort vi havner på saken i vår backlog igjen.
@vegardsoerlie Tror du det er lenge til dere får prioritert denne? Vi har nok behov for dette i Flyt også :) Men, tipper at det tar noen måneder før vi kommer oss så langt.
Vi har lagt forbedringssaker på vent frem til slutten av mars ca. Dette er en av de sakene som ligger i backlog der så jeg synes det er vanskelig å si noe sikkert nå, men i hvert fall ikke før april da. @CamillaDahlstroem
@CamillaDahlstroem Om du vil ta en titt på et løsningsforslag ligger det en video inne på https://github.com/fremtind/jokul/pull/2374 Konseptet er det samme, men med litt tilpasninger til dagens tekstområdedesign.
Camilla jobber ikke i Fremtind lenger :/
D'oh!
Hvilke steg i prosessen er utført?
Er ønsket tilknyttet et problem? Fortell oss mer! Etter diskusjon i designsystemforumet viser det seg at dette er ønsket funksjonalitet fra flere hold.
Beskriv løsningen du ønsker Slik vi har det i SeOpp i dag blir "x tegn gjenstår" vist som hjelpetekst under komponenten, men andre løsninger har det under komponenten helt til høyre, eller inne i samme rammen som teksten nederst til høyre. Hva ønskes her? Design needed.
Hvilke alternativer har du vurdert? Det absolutt enkleste er å erstatte hjelpeteksten slik vi har gjort det i dagens løsning, men slik jeg ser på det kan det være dumt å hijacke den.
Mer info