:
eksempler
Prøv det "
Råd: For at forhindre, at jQuery Mobile automatisk tilføjer styling interaktive elementer, rolledatabrug = "no" attribut.
UX designer fra IBM Zoltan Collin.
Til bogmærker
Zoltan Collin
Dropdown-formularer virker som et oplagt designvalg: de er nemme og billige at oprette, de fylder ikke for meget, de bekræfter automatisk indtastede oplysninger, de understøttes på tværs af alle browsere og platforme, og brugerne er allerede brugt til dem.
Designere bruger oftest drop-down lister uhensigtsmæssigt, men efter direktørens mening Google-produkt Luke Wroblewski, dette mønster bør kun bruges som en sidste udvej.
Lad os se på nogle begrænsninger:
- Dropdown-mulighederne er usynlige, indtil brugeren klikker eller trykker på formularen. Derudover er det ved første øjekast umuligt at forudsige, hvor mange linjer der vil være på listen - to eller halvtreds.
- At vælge en mulighed fra en rulleliste er en proces i flere trin, især på mobile enheder: Brugeren skal først trykke på formularen og åbne mulighederne, rulle ned og finde den, de ønsker, vælge den og lukke listen.
- Dropdown-lister gør designere dovne, fordi det er så nemt at tilføje alle mulige muligheder til én liste uden nogen prioritering. På grund af dette ligner dropdown-listen meget en anden skabelon - "hamburger"-menuen.
- At rulle gennem lange lister som at vælge et land er et mareridt. Især på mobile enheder, hvor tastatursøgning normalt ikke er tilgængelig.
- På nogle enheder er feltet til at vise muligheder meget lille, så at stryge kan være et mareridt.
Antallet af synlige listeindstillinger på iOS kan virke ekstremt lille
Den gode nyhed er, at der er et stort antal af alternative elementer til dataindtastning, som i mange tilfælde vil fungere bedre end drop-down lister.
Anslå antallet af muligheder
Du bør ikke bruge rullelister til beslutninger, hvor du skal vælge en af to muligheder. Prøv i stedet et afkrydsningsfelt eller alternativknap.
For et lille antal gensidigt udelukkende muligheder er en form i form af radioknapper eller Segmented Control-knapper velegnet. Brugeren vil straks se alle tilgængelige muligheder og behøver ikke at udvide listen.
Eksempel på brug af segmenterede kontrolknapper
Antallet af synlige muligheder afhænger af skærmens bredde og tekstlængde. Du bør dog ikke bruge mere end fem muligheder
Brug en indtastningsformular med en filtreret rulleliste til et stort antal nøjagtige visse muligheder, når brugeren ved præcis, hvad han skal finde.
I stedet for at rulle gennem hele listen, kan brugerne indtaste de første bogstaver og vælge filtrerede indstillinger
For store og forskelligartede lister er det bedre at bruge eksisterende brugerdata for at sikre, at populære svarmuligheder er inkluderet i listen. I dette tilfælde vil 90% af brugerne straks kunne vælge den ønskede mulighed, og de resterende 10% vil klikke på "Andet", som vil blive afklaret i det næste spørgsmål.
Og selvom "Andet" ikke er den mest elegante løsning, kan prioritering forbedre UX for de fleste brugere.
Bedøm din foretrukne inputformular
En af fordelene ved en rulleliste er, at brugerne ikke behøver at skrive så meget. Men hvis du kun skal skrive lidt, og dataene efterspørges ret ofte (f.eks. personlige oplysninger), så er det mere bekvemt at indtaste dem i stedet for at vælge dem fra en liste.
På mobile enheder er den nemmeste måde at indtaste dit fødselsår ved at bruge numerisk tastatur, ikke en rulleliste
Generelt er det numeriske tastatur mest effektiv metode indtaste en numerisk værdi.
Selv hvis listeværdierne er sorteret i rækkefølge, kan det være lettere for brugerne at indtaste dem i hånden i stedet for at rulle gennem dem.
Hvis det er vigtigt for dig at bekræfte de data, som en person indtaster, skal du bruge en indtastningsformular med en filtreret rulleliste.
Når brugeren f.eks. skal angive en tilstand, skal du filtrere listen tilgængelige muligheder måske kun et bogstav
Dette er især vigtigt, hvis sorteringsrækkefølgen af listeelementerne ikke er helt klar.
For eksempel forstår brugerne ikke efter hvilket princip valutaer er sorteret. Gør det, så de kan søge på både dets navn og forkortelse
Det samme gælder listen over lande.
For heltal - såsom antallet af passagerer eller varer i en vogn - er det bedst at bruge en stepper. Det giver brugerne mulighed for at øge eller mindske værdien med et enkelt klik.
Til brøktal eller variabler placeret på en skala, er det bedst at bruge en skyder.
Denne artikel er en meddelelse om ny funktionalitet.
Det anbefales ikke at bruge indholdet af denne artikel til at lære ny funktionalitet.
Fuld beskrivelse ny funktionalitet vil blive leveret i dokumentationen for den tilsvarende version.
Fuld listeændringer i ny version findes i filen v8Update.htm.
Implementeret i version 8.3.11.2867.
Vi fortsætter med at udvikle den mobile platform og tilføjer funktionalitet, der allerede er tilgængelig i platformen til personlige computere. Derudover udvikler vi specifikke platformsfunktioner, som kun er relevante for mobile enheder. Vi vil nu fortælle dig om nogle af de vigtigste forbedringer.
Planlægger
Objektmodellen for den "mobile" planlægger har ikke ændret sig, men den måde, brugeren interagerer med planlæggeren på, har ændret sig, da metoderne til at indtaste oplysninger på mobile enheder adskiller sig fra dem, der bruges på stationære computere.
For eksempel udføres hurtig redigering af et element ved et enkelt klik på elementet. Langt tryk på opkald kontekstmenu, og til udseendet af markører, der giver dig mulighed for at strække elementet. Træk udføres ved at trykke længe og derefter flytte fingeren.
Rulning af hele planlæggeren sker ved at scrolle med én finger, zoome med to fingre og så videre.
Et træk ved den nuværende implementering af den "mobile" planlægger er, at den endnu ikke understøtter udskrivning.
Formateret dokument
Et andet "nyt" objekt, som vi har tilføjet til den mobile platform er Formateret Dokument. Fra brugerens synspunkt adskiller et "mobil" formateret dokument sig kun ved, at dets redigeringspanel er indbygget i selve styringen og er en logisk del virtuelt tastatur. Du, som udviklere, er ikke forpligtet til at tilføje det separat til konfigurationen. Redigeringspanelet har anden type afhængigt af typen af mobilenhed (telefon eller tablet).
Forhåndsvisning af "mobil"-formularen i konfiguratoren
I konfiguratoren, når vi udviklede en formular, tilføjede vi muligheden for at se, hvordan din formular vil se ud på mobil enhed.
I kommandopanelet kan du vælge en grænsefladeindstilling Mobil enhed, og se, hvordan formularen vil se ud i standardretning.
Her kan du rotere din mobile enhed.
Derudover har vi givet dig muligheden for at vælge imellem stort antal almindelige enheder.
Derudover kan du se mobile formularer i tre forskellige skalaer:
- Pixel til pixel- når en mobilenheds skærmpixel svarer til en vinduesskærmpixel forhåndsvisning;
- Aktuel størrelse
- når størrelsen af mobilenheden på skærmen matcher geometriske dimensioner enheder;
- Efter vinduesstørrelse- når visningsskalaen er valgt på en sådan måde, at det "mobile" visningsområde passer ind i forhåndsvisningsvinduet uden at rulle.
Batchbehandling af regnearksdokumenter
Vi har tilføjet en række nye objekter til den mobile platform, der giver dig mulighed for at oprette pakker med viste dokumenter. Denne funktionalitet ligner den, der findes i pc-platformen. Således kan du nu for eksempel sende flere dokumenter til udskrivning på én gang.
Udvikling af leverbare notifikationer
Vi har implementeret support til Windows push notifikationstjenesten (WNS, Windows Notification Services). Nu kan du bruge funktionaliteten af leverede meddelelser, når du kører en mobilapplikation på platforme i Windows-familien.
Vi har også omarbejdet fejlhåndteringssystemet til afsendelse af leverede meddelelser. I situationer, hvor en fejl tidligere blev kastet som en undtagelse, kastes den nu som en værdi, som du kan håndtere i det indbyggede sprog.
Hardwareacceleration i Android-operativsystemet
På versioner operativ system Android 4.4.2 og nyere mobil platform bruger nu hardwareacceleration. Dette gjorde det muligt for os at øge grænsefladegengivelseshastigheden med 1,5 - 3 gange.
Folk, der bruger din mobil app eller hjemmeside, forfølge et bestemt mål. Typisk er det form, der står mellem brugeren og hans mål. Faktisk betragtes formularer som det sidste trin i processen med at nå brugermål. Derfor er det så vigtigt, at brugeren udfylder formularen så hurtigt som muligt og uden forhindringer.
Følg disse syv regler for at oprette enkle, klare formularer:
Regel #1: Formularer skal være kompatible med den måde, brugeren indtaster deres data på
Sørg for, at formularfelter ikke er skjult af grænsefladeelementer (såsom tastaturet). Når brugeren udfylder formularfelterne, flyttes felterne automatisk op.
Regel #2: Minimer antallet af inputfelter og brugerens behov for at skrive
Jo længere og mere kompleks en formular ser ud, jo mindre sandsynligt er det, at brugerne vil udfylde de tomme felter, især på små skærme. Reduktion af antallet af inputfelter vil gøre din formular mindre rodet, især når du beder brugeren om en masse information.
Gør formularen så enkel og kort som muligt
Men at reducere antallet af felter er ikke nok. Du bør også være opmærksom på den indsats, brugeren bruger på at indtaste data. Udskrivning påkrævet høj grad interaktioner; der er stor sandsynlighed for fejl, selv når du indtaster fra et tastatur i fuld størrelse (især på en berøringsskærm).
Prøv derfor at minimere behovet for taste- og brugerfejl.
Smart standardindstillinger
Smarte standarder hjælper brugere med at udfylde alle formularfelter hurtigere og mere præcist. For eksempel kan du forudvælge en brugers bopælsland baseret på deres geolokationsdata.
Automatisk detektering placering vil spare brugeren tid på at søge efter et hotelværelse
Radioknapper til lignende, men gensidigt udelukkende valg
Når brugeren står over for at vælge fra en liste over muligheder, kan du overveje at bruge en vandret liste med tags. Dette giver dig mulighed for mere effektivt at bruge den tilgængelige skærmplads.
Skydere til min/max pris eller budgetinterval
Overvej at bruge skydere til felter, der indeholder priser eller budget. På denne måde kan brugeren flytte skyderen til minimum/maksimum værdi. Skyderen er nem at flytte vandret, og du kan nemt tilpasse denne handling ved hjælp af visuelle signaler. Men husk, at tallene ikke skal skjules, når du interagerer med skyderen (især når du bruger tommelfingrene).
AirBnB-skyder for at vælge pris
Regel nr. 3: Formularoverskrifter skal enten være over selve felterne eller flydende
Overskrifter fortæller brugeren hovedformålet med et felt, og klar tekst er en af de vigtigste måder at gøre en brugergrænseflade mere tilgængelig på.
Hvorfor du aldrig bør bruge tekstoverskrifter i et felt
In-field headers (eller pladsholdere) er tekst, der sidder inde i et formularfelt, der forsvinder, så snart brugeren begynder at indtaste deres data.
Overskrifter inde i feltet
Mens in-box overskrifter ser godt ud fra et æstetisk synspunkt, er denne fordel ofte overvurderet. Den største fejl er at miste kontekst. Når brugeren klikker på feltet, forsvinder inskriptionen. Og derfor kan han ikke bekræfte, at han har skrevet præcis, hvad der skal til.
Teksten inde i feltet er ikke den mest bedste erstatning visuel overskrift
Nogle brugere, der ser, at der allerede er skrevet noget i et felt, kan også tro, at feltet allerede er udfyldt, og at de ikke behøver at indtaste noget andet og kan ignorere udfyldning.
Hvorfor venstrejusterende feltoverskrifter er dårligt for mobile enheder
Det vigtigste at overveje, når du bruger venstrejusterede overskrifter på en mobilenhed, er skærmstørrelsen og billedformatet. Hvis titlen til venstre er modsat feltet, vil du med en lodret skærmorientering have meget lidt plads tilbage til selve feltet. Dette skaber nogle vanskeligheder ved brug, fordi der ikke er nok plads tilbage til at vise, hvad brugeren skriver. Ikke at kunne se den indtastede tekst skaber et problem for brugerne, fordi det forhindrer dem i hurtigt at bemærke en indtastningsfejl, før de indsender formularen.
Det er meget svært at bemærke en fejl, hvis dataene ikke er helt synlige
Topheader eller responsiv header
Formulartitler skal være øverst i formularfelterne, så brugerne kan se, hvad de udfylder og hvordan. Den største fordel ved at placere formularoverskrifter over formularen er, at du kan strække formularen over hele skærmens bredde og gøre den stor nok til dataindtastning (for eksempel med en skriftstørrelse på 16 pixels). Yderligere fordel Det vil være muligt at skrive klare og forståelige overskrifter (ikke begrænset til 1-2 ord).
Den største ulempe ved at placere overskrifter over felterne er, at hele formularen fylder mere lodret, hvilket betyder, at brugeren skal rulle på skærmen. Det er dog ikke et særligt alvorligt problem – i dag er alle vant til at scrolle.
Alternativt kan du bruge responsive headers til at sikre, at brugerne har udfyldt feltet korrekt. Pladsholderteksten vises som standard, men efter at have trykket på feltet og indtastet tekst, flyttes pladsholderteksten til toppen af feltet, som vist nedenfor.
Regel #4: Formularfeltvalidering skal ske i realtid
I en ideel verden ville brugerne udfylde formularen nødvendige oplysninger og vil fuldføre denne opgave. I den virkelige verden laver brugere ofte fejl. Samtidig kan brugerne ikke lide det faktum, at de efter hele processen med at udfylde felterne når frem til "send"-knappen og opdager, at de har lavet en fejl. Det er korrekt at informere brugeren om succes/fejl i feltet umiddelbart efter udfyldning. Valideringsmeddelelsen informerer straks brugeren om, at de indtastede oplysninger er korrekte. Denne tilgang giver brugerne mulighed for at rette fejl hurtigere og uden at skulle vente på, at fejlene vises efter at have klikket på indsend-knappen.
Hvis du forventer konkrete svar på spørgsmål, skal du straks vise, hvad der skal indtastes og i hvilken form.
Strengvalidering kan også være en løsning. I eksemplet nedenfor kan du se godt eksempel, hvordan du kan rette en potentiel fejl.
Regel #5: Vis tastaturlayoutet i henhold til inputdataene
Brugere foretrækker det tilsvarende tastaturlayout i applikationen. For eksempel når brugeren skal indtaste et nummer kreditkort, vis kun talindtastning, så brugeren indtaster tal og ikke symboler. Dette vil øge påfyldningshastigheden og reducere mængden mulige fejl input.
Det skal du sørge for denne mulighed implementeret på hele applikationen og ikke på dens enkelte dele.
Regel #6: Giv nyttige oplysninger i sammenhæng
Nogle gange er der behov for at levere relevante og brugbar information for at forenkle processen for brugeren at udfylde formularen. Men sådan ledsagende tekst bør kun bruges, hvor det virkelig er nødvendigt:
- Ved planlægning af datoer sætter brugere pris på kontekst såsom en indbygget kalender til at bestemme ugedagene. Dette reducerer behovet for at afslutte appen for at se kalenderen, hvilket reducerer risikoen for, at brugeren bliver distraheret fra deres primære opgave.
- Folk kan være bekymrede over sikkerheden af deres data, så du skal vise dem, at deres data ikke vil blive delt med tredjeparter.
Som regel for god manerer bør du ikke strække din forklaring til 100 tegn.
Regel #7: Brug et fleksibelt format
Nogle opgaver kræver meget præcis information fra brugeren. Men samtidig kan det være i strid med principperne om god brugervenlighed at kræve, at brugeren skal give oplysninger i en bestemt form. Hvis du beder brugeren om at indtaste digitale oplysninger (såsom et telefonnummer) i en formular, så vær fleksibel og opret skærme, der kan understøtte forskellige formater input og vis information i den mest brugervenlige form for at forhindre fejl.
Brug ikke et fast dataindtastningsformat
Konklusion
Brugeren kan have alle mulige tvivl, når de udfylder formularen, så du bør forsøge at gøre processen så enkel som muligt. Alle de tips, der er beskrevet i denne artikel, kan forbedre formularernes anvendelighed betydeligt.
