SpareBank1 / designsystem

SpareBank 1's design system and component library.
https://design.sparebank1.no
MIT License
101 stars 86 forks source link

Switch/toggle #519

Closed hodoea closed 5 years ago

hodoea commented 5 years ago

Vi jobber med å få ut Push notifikasjoner i mobilbanken, og har behov for en komponent som har lik design og oppførsel som en native switch/toggle.

I første skisse så har vi brukt en checkmark men det blir litt misvisende for konteksten vår.

checkbox

Forslag til ny komponent i bruk:

push-switch

ivarni commented 5 years ago

På min Android telefon er forøvrig disse blå og ikke grønne.

screenshot_20181122-140518_settings

hodoea commented 5 years ago

Ja sorry det er sant, jeg har jo Android selv. Burde husket på det :) Kan sikkert se på hvilken farge vi lander på :)

skjermbilde 2018-11-22 kl 14 26 17
antidecaf commented 5 years ago

Er det noe mål å gjenskape en implementasjon fra en spesifikk plattform? Det viktigste er vel å følge konvensjonen rundt selve interaksjonen. Har sett disse i et utall farger og former rundt forbi. :)

hodoea commented 5 years ago

Nei

Det er ikke noe mål å gjenskape en plattform. Ja, enig det viktigste er patternet. Kan du dele noen screenshots av de du har sett?

hdaljord commented 5 years ago

Fargen som brukes bør vel fortrinnsvis knyttes opp mot vår visuelle profil heller enn kjørende plattform? Velger du ios eller android vil det alltid være "feil" for noen.

hodoea commented 5 years ago

De jeg har lagt ved tidligere er knyttet opp til vår visuelle profil(fargekoden til blue cobalt og green shamrock) Mulig det er bedre å bruke grønn, da det symboliserer bedre noe man slår av og på. Merk at jeg er Android bruker :P Så jeg favoriserer ikke iOS. Grønn gir mer mening.

bla gronn

hdaljord commented 5 years ago

Fargevalget bør sikkert tas opp i gdforum, @adidick

antidecaf commented 5 years ago

For eksempler på utforming kan du egentlig bare bildegoogle "toggle switch design" eller noe lignende. :)

Vil gjette at mange tolker grønt som "på" by default, men tipper at både den blå og den grønne funker helt fint.

hodoea commented 5 years ago

@hdaljord Jeg diskuterer fargevalget med Heidi. :) Jeg har også tatt dette med @adidick igår :)

hodoea commented 5 years ago

Kan dette fungere som guidelines?

skjermbilde 2018-12-06 kl 11 49 40
adidick-zz commented 5 years ago

@hodoea En annen viktig prinsipp ift toggle switcheser: "Deliver immediate results - Toggle switches should take immediate effect and should not require the user to click Save or Submit to apply the new state." Jeg tror dette arktikelen har kankje vært delt før? https://www.nngroup.com/articles/toggle-switch-guidelines/

hodoea commented 5 years ago

Takk, jeg så den artikkelen. Det er der jeg har hentet det fra før, men jeg glemte å ta med den setningen. Sånn. @adidick

skjermbilde 2018-12-06 kl 11 49 40