I de tidlige dage med at designe hjemmesider til mobile enheder bifurcated de fleste udviklere deres produkttilbud. De udgav en fuldt funktionel desktop version og derefter en "mobiloptimeret" version, der fjernede meget af branding og billedbehandling for at imødekomme den begrænsede kapacitet og netværkshastigheden af candy-bar-telefoner og 3G-trådløse netværk.
Moderne smartphones kan dog gøre websider lige så effektive som stationære pc'er, gennem netværk lige så godt eller bedre end i gårsdagens DSL-linjer.
Design konvergerer derefter tilbage til en enkelt brugergrænseflade. Men risikoen for designere er ikke, at en smartphone eller en tablet ikke kan gøre et moderne lydhurtigt websted. Det er snarere, at metoden til brugerindgang på en touchscreen-enhed kræver meningsfulde ændringer af det underliggende site design. Dage med at bygge en hjemmeside, der antager, at besøgende har et tastatur, og en mus er forbi.
Grundlæggende Touchscreen Design Regler
Designe for en touchscreen-bevidst web-interface kræver en udvikling af fortidenes traditionelle monitor-mus-tastatur tilgang. I særdeleshed skal du rumme interaktioner som gester, kraner og multitouch-input.
- Tapping er ikke korrekt.Med mindre kunden har fingrene på et lille barn, selv med de meget nøjagtige softwarekontroller, kan det være svært at trykke og være præcis.
- Gendannelser er forskellige fra haner.For at rulle en lang side på en berøringsskærm, svinger brugeren en finger op browservinduet. Det kan ikke virke væsentligt, før du indser at du surfer med en mus, du bevæger musen ned .
- To (og flere) fingerhaner.En bruger kan bruge flere fingerkraner på enheden samtidig for at styre den. Disse ekstrahaner kan betyde noget specifikt afhængigt af operativsystemet til brugerens enhed.
- High-glare enheder.Skærmen på de fleste touchscreen tabletter er lavet af et robust glas. Dette materiale kan være meget svært at læse igennem, med meget blænding i lysende situationer. Plus, med alle de rørende, får de fingeraftryk og fnug på skærmen, som kan påvirke, hvordan dine sider ser ud.
- Skærmtastatur.Mens nogle brugere har et trådløst tastatur, som de forbinder til deres tabletter, bruger de fleste tabletbrugere tastaturet på skærmen til dataindtastning. OSK-indtastning kan resultere i nogle hilariske typografier samt at være ubehageligt at bruge i længere tid.
På grund af disse funktioner i enheden skal webdesignere lægge vægt på flere grundlæggende designregler for berøringsskærmsbrugere:
- Placer ikke klikbare elementer for tæt på hinanden.Der er ingen hård og hurtig regel, der definerer, hvor tæt er for tæt, men lister over links, især i en lille skriftstørrelse, kan være vanskelige at navigere ved at klikke (tappe) med en fed finger. Det kan være irriterende at skulle zoome ind bare for at prøve og klikke på et link. Dette princip gælder for knapper såvel som links.
- Hierarkier kan være svære at holde åbne.En populær form for dynamisk menu bruger JavaScript til at åbne en undermenu, når brugeren klikker og derefter svæver musen over undermenuen. Disse stater kan være meget vanskelige eller umulige at bruge på berøringsskærme, fordi de heller ikke bliver åbne eller lukker ikke.
- Flyt links og klikbare områder væk fra højre kant af vinduet.De fleste mennesker er højrehåndede og har tendens til at rulle på den side af skærmen. Da scrolling er færdig med en gestus, er det til tider muligt at starte strygen på et link ved en fejltagelse. Brugere kan blive irriteret, hvis de ønskede at rulle på siden og i stedet endte med et uheld ved at trykke på et link. Ved at flytte dine links væk fra højre side kan du hjælpe dem med at undgå denne ulejlighed.
- Der er ingen mus.Og det betyder at der ikke er nogen mus pointer . Du bør ikke stole på, at musemarkøren skifter for at angive, at noget er klikbart.
- Hover tilstande eksisterer ikke.Som følge af ovenstående, da der ikke er nogen mus, er der intet at svæve med. Et link er enten klikket (tappet) eller ikke på en berøringsskærm enhed, så brugerne kan ikke udlede nogen nyttig information fra sådanne hover-stater som farveændringer, værktøjstip eller statuslinjebevægelser.
- Svarte baggrunde øger blændingen.Et websted med en sort baggrund kan være meget svært at læse på en touchscreen enhed på grund af blændingen. Sort gør fingeraftryk på enhederne mere tydeligt og slør skærmen. Og den sorte kan gøre skærmen til et spejl, der reflekterer tilbage, og brugerne står ofte over for tekst på skærmen.
- Langblokke af tekst i formularer er svære at skrive.Mens det er muligt at skrive hele romaner på en iPad eller en Android- eller Windows-tablet, kan de fleste ikke lide at bruge tastaturet på skærmen til lange tekststrækninger. Jo mere dit design kan gøre dataindtastningen så kort og let som mulig, desto bedre.
Det vigtigste aspekt ved design med touchscreens i tankerne er at test dine sider på en touchscreen enhed. Mens masser af iPad- og Android-emulatorer er tilgængelige, og masser af Windows-tabletter, giver de stadig ikke mening om en berøringsskærm. Du kan ikke fortælle, at linkene er for tætte eller at knapper er for små, eller at blændingen gør siden for vanskelig at læse, medmindre du får en tablet ud og prøver dem Før du frigiver dit nye website design.
