Vedä ja pudota UX: merkit, palaute ja esteettömät vaihtoehdot
Suunnittele vetämällä ja pudottamalla ihmiset voivat löytää ja käyttää: tartuntamerkit, nosto- ja esikatselupalautteet, pudotusalueet, fysiikka ja ei-vedä-vaihtoehto, jota WCAG 2.2 vaatii.
Core Takeaway
Tee vedettävät kohteet ilmeisiksi tartuntakahvalla tai kohdistimen vaihtamisella, vahvista tartunta nostolla ja varjolla, esikatsele tulosta vetäessäsi korostamalla pudotusalueita ja aseta kohde selkeästi pudotettuna kumoamalla. Tarjoa aina vedämätön tapa tehdä sama asia; WCAG 2.2 vaatii sen tasolla AA.
Palautetta joka vaiheessa
Nielsen Norman Group:n ohjeistus on, että selkeät merkit ja selkeä palaute jokaisessa vaiheessa tekevät vedä ja pudota -toiminnosta löydettävän ja helppokäyttöisen. Kun esine on napattu, ihmisten on tiedettävä, että se tartuttiin, ja nähdä, mitä tapahtuu, ennen kuin he pudottavat sen.
- Merkitsijä: tartuntakahvan kuvake, tarttumiskohdistin osoittimen päällä tai molemmat.
- Tartuttu: nosta esinettä varjolla ja kevyellä asteikkolla, jotta se näyttää pidetyltä.
- Esikatselu: korosta kelvolliset pudotusalueet ja näytä, mihin kohde laskeutuu.
- Pudotettu: animoi kohde paikalleen ja tarjoa kumoamista.
Esteettömyys: tarjoa aina toinen tapa
WCAG 2.2 onnistumiskriteeri 2.5.7, Vetoliikkeet (taso AA), edellyttää, että kaikki vetämällä tehty voidaan tehdä myös yhdellä osoittimella ilman vetämistä, ellei vetäminen ole välttämätöntä. Yleisiä vaihtoehtoja ovat siirtyminen ylös ja alas -painikkeet, "Siirrä" -valikko tai näppäimistötuki nuolinäppäimillä. NN/g huomauttaa myös, että tarkka vaihtoehto auttaa usein kaikkia, esimerkiksi vetää karkeasti paikoilleen ja tönäisee nuolinäppäimillä.
Fysiikka saa raahaamisen tuntumaan suoralta
Vedettyjen kohteiden tulee seurata osoitinta ilman viivettä. Vapautettuna jousi, joka kuljettaa vapautusnopeuden istukkaan, saa pudotuksen tuntumaan fyysiseltä, ja muut sivuun liikkuvat esineet osoittavat tasaisesti, missä rako on. Pidä nämä liikkeet lyhyinä ja vähennä niitä, kun alennettu liike on päällä.
Kosketa yksityiskohtia
Erota kosketusnäytöillä vetäminen rullauksesta, usein painamalla pitkään. Tee kahvoista riittävän suuria osumaan, vierittele luetteloita automaattisesti, kun vedät lähelle reunaa, ja anna haptista palautetta nouto- ja pudotuskohteista, joissa alusta tukee sitä.
Avain Principles muistettavat
- Näytä vedettävä kahvoilla tai kohdistinmuutoksilla
- Vahvista tartunta ja esikatsele pudotusta
- Ratkaise selkeällä liikkeellä ja tarjoa kumoamista
- WCAG 2.5.7 (AA): Tarjoa ei-vetäminen vaihtoehto
- Käytä jousia luonnolliseen vapautumiseen; vähentää liikkeen vähentämiseksi
Usein kysytyt kysymykset
Lähteet
- Drag–and–Drop: How to Design for Ease of Use — Nielsen Norman Group
- Understanding SC 2.5.7: Dragging Movements — W3C WAI