Introduktionen af ​​Windows 8 oplevede en massiv revidering af Windows-brugergrænsefladen i overensstemmelse med Windows Phone-grænsefladen for at være mere intuitiv for folk, der bruger berøringsskærme, og Apple har subtilt tilpasset OSX over tid, strømlinjeformede funktioner, der bliver mere og mere delte på tværs af deres mobile og stationære operativsystemer. Mens vi endnu ikke har set en touchscreen-Mac, er det indlysende, at berøringsskærmrevolutionen er truende over for os, hvor brugerne bruger mere og mere tid på deres mobile enheder end hjemme-pc'er.

Med dette i tankerne og en stadig større andel af browsing på smartphones og tablets, skal websites bestemme, hvordan de vil tilpasse sig folk, der får adgang til deres indhold uden mus og tastatur. Selvom standard svar på dette ofte har været "bare lave en separat mobil interface!", En løsning, der har fungeret godt tidligere i mindre mobile enheder som telefoner, er der meget ringe plads til mellemgruppen besat af større telefon og tablet viser.

Denne artikel tager et kig på et antal websteder, der er gået ned både ukonventionelle og standard site designs til at blive mere berøringsvenlige.

Fokuserede websites vs. lydhørige hjemmesider

Mange websites har oprettet datterselskaber eller apps specifikt til brugerne af berøringsskærmen, så de kan fokusere på en type bruger ad gangen. Et problem er, at siden hjemmesiderne er adskilte, er de afhængige af URL-omdirigering, som ofte kan føre til problemer som brugeren bliver sendt til det forkerte sted fra links eller dårlig omdirigering som følge af at skulle omdirigere til formaterede sider til mobile brugere.

Det største problem med separate websteder til mobile brugere er imidlertid, at den mobile version ofte mangler funktioner eller informationer, som en stationær bruger modtager; funktioner og grænseflader ofte forenklet, knapper forstørret og muligheder reduceret. Dette kan løses ved at bruge et 'responsivt' design. Et lydhurtigt websted er designet til let at se på begge platforme uden at miste kvaliteten på den ene. Dette har også den fordel, at kun ét websted skal udformes, snarere end to, men det resulterer ofte i kompromiser for begge platforme.

Grundlæggende designforskelle

Der er oplagte forskelle mellem en berøringsskærm og et skrivebord, som du skal tænke på, når du opretter dit websted. På en touch screen skubber du op på siden for at rulle nedad, men på et skrivebord flytter du rulleskiven ned. Apple har forsøgt at rette op på dette ved at konsolidere deres touch-interface-teknologier i trackpads på både deres bærbare og stationære Mac'er, men PC-brugere eller endda Mac-brugere, der bruger konventionelle scrollhjul eller skydere til at rulle gennem websider, har en ulempe.

Knapper skal være meget større på mobile enheder, da det ikke er så nær så præcist som at klikke med en mus, er der intet mere svimlende end at prøve at klikke på et link til næste side og ved et uheld sendes en side eller på en annonce i stedet. Manglen på en markør betyder også, at du ikke kan have svævestater for at forklare, hvor et link går, hvad et ord betyder eller endda hvad der kan klikkes.

Der er også forskel på nøjagtighed på mobile indgange, da berøringsskærme kan have enten resistive eller kapacitive indgange, der har varierende følsomheder og efterfølgende nøjagtighed kan gå tabt på resistive berøringsskærme. Udover dette skal design indeholde to meget forskellige opløsninger til mobile enheder, der har to retninger.

Skærmorientering og billedforhold

Med flere opløsninger ud over normale skærmstørrelser betyder det, at du ikke længere kan tænke bare på standardiserede skærmopløsninger og lodret bevægelse. De hurtige ændringer i teknologimarkedet har produceret skærmstørrelser, der adskiller sig fra model og producent, og med alle rygter om såkaldte smarte ure kan vi begynde at se skærme, som ikke længere er begrænset til fire grænser. Mobilskærme tilføjer yderligere kompleksitet på grund af det faktum, at de kan ses både i portræt og liggende tilstand ved rotation.

Svaret er flydende layouter, som selvjusterer til enhver opløsning og kan tilpasses til både portræt og landskabsvisning. Nogle hjemmesider bruger et flydende layout, som drastisk ændrer websitetets udseende for at optimere brugervenlighed og brug af skærmens fulde potentiale baseret på dets orientering.

Mens mus er specielt designet med scrollhjul til nem lodret rulning, flytter mange brugere til touchpads og touchscreens, og da Apple har omfavnet den mere innovative form for touch-scrolling, der er beslægtet med at trække en side frem for at rulle, jo mere kreative idé om horisontal rulning er måske ikke ud af spørgsmålet. De fleste apps bruger vandret rulning som et værktøj, og langt den største succes ved horisontal rulning er det kindle, så hvorfor ikke implementere det i dit web-brugerinterface? Mange enkeltsider har en eneste vandret akse, men de skal ofte bruge knapper for at starte rullingen, da brugere muligvis ikke forstår det ikke-standardformat.

Horisontal rulning kan ligner vertikal rullning i designbetingelser, men brugen af ​​begge kan åbne mulighed for dobbeltakse-rullning, hvilket muligvis ikke virker i browser. Mange brugere synes at være forankret til en akse, det er selvfølgelig x-aksen, som er statisk, så hvis brugerne går tabt på siden, kan de bare rulle op og være tilbage ved hovednavigationen. På to-akse-steder er det måske ikke så simpelt, og navigationen kan derfor være klæbrig med en HUD-stilstang.

Så hvilken brugergrænseflade skal din hjemmeside bruge?

Det er klart, at ikke alle brugergrænseflader passer til alle typer websider, så spørg dig selv nogle grundlæggende spørgsmål: Hvem er din målgruppe? Hvad forsøger du at "sælge"? Hvilket indtryk vil du give? Yngre mennesker er mere tilbøjelige til at bruge berøringsskærme end en ældre demografisk person, der sandsynligvis vil bruge et skrivebord, men kan stadig have brug for større knapper og et klarere brugergrænseflade. Der er ingen mening om at skabe det mest innovative brugergrænseflade, der er tænkeligt, hvis ingen kan forstå, hvordan man bruger det, så husk altid at oprette et brugergrænseflad, som en bruger kan se på og straks vide, hvordan man bruger.

Radial menu

En radialmenu, også kendt som en pausemenu, er en cirkulær kontekstmenu, der bruger multiretningskontekst snarere end højde eller bredde som markeringsværktøjet.

Dette er en fantastisk form for intuitivt design, der forhindrer brugere i at gå tabt i snesevis af undermenuer. En anden fordel er, at en touchscreen-bruger har bedre kontrol over normale drop down lister, da retningskontrol er mere præcis end at trykke på. Brugen af ​​radiale menuer i formularer og hjemmesider kan dramatisk øge brugernes oplevelse på berøringsskærmen på hjemmesiden og udvides til tommelfingre som dem, der bruges på spilkonsoller. Et sted anvendes radiale menuer ofte, da det tillader spil, der nemt kan sendes til pc. Som sådan desktop brugere ikke taber enten som det stadig er tilfældet, at radiale menuer kan forenkle lange lister i enkle kategorier øger brugervenlighed eller produktivitet på en hjemmeside.

Radiale menuer er en god måde at vise kontekstfølsomme oplysninger på. Et eksempel på dette er at klikke på et billede af en skål på et fødevarested og få mulighed for retweeting, opskriftslinken, ingredienslisten eller gemme billedet. Men du skal være forsigtig med, at din menu forbliver tilgængelig og enkel, da du ellers nemt kan overvælde brugeren, især når du kombinerer symboler og ord i samme radiale menu. Radialmenu er meget lettere at bruge, når statisk snarere end dynamisk, da dette kan medføre problemer med objektvalg, f.eks. På websteder som Phong , i dette tilfælde især når du bruger en mus som markør tracking gør det særligt uintentivt.

Phong2

Skeuomorphism

Skeuomorphic design imiterer udseendet og funktionaliteten af ​​en dagligdags genstand for at skabe et intuitivt brugergrænseflad, noget der for nylig er gået ud af mode, især da Scott Forstall fratrådte Apple og Sir Jony Ives flade design overtog iOS og sandsynligvis OS X i fremtid. Skeuomorphism havde været en stor del af Apples skub i retning af mere intuitivt design. For nylig med Contacts on Mac blev designet som en egentlig adressebog, eller Kiosk og iBooks på iOS er faktiske bogreoler. Dette design er en, der mere naturligvis gavner berøringsgrænsefladebrugere, da vi ikke interagerer med verden omkring os med en markør.

Familiaritet tilføjer til intuitivitet, når man bruger en brugergrænseflade, hvilket er punktet for skeuomorphism, for at bringe en ekstra dimension af fortrolighed ved at knytte sig sammen med virkelige objekter, så brugeren straks ved, hvordan man interagerer med det. Et vellykket skeuomorphic design betyder, at du bare ved at kigge på websiden vil vide, hvad emnet er / siden bruges til, gør mouseover værktøjstip og link højdepunkter forældede.

Dial UI

Dette er en kombination af begge ovenstående, hvor hele brugergrænsefladen danner en simpel urskive; designet ligner en radial menu, men i stedet for hængslet i midten, vælger derfra, drejes drejeknappen til et enkelt valgpunkt. Dette er meget effektivt i tilfælde som musik, hvor opkald ofte bruges til at blande et spor og kontrolvolumen. I tilfælde af netmærket SHSK'H de bruger en ændret type opkaldsknap for at vælge hvilket spor du vil afspille.

SHSK'H

Den minimalistiske bevægelse

Minimalisme er, hvor en hjemmeside er strippet tilbage til sine bare væsentlige elementer. Dette er fantastisk til mobile brugere, da det reducerer belastningstider og dataforbrug samt giver brugeren mulighed for at få adgang til alle de nødvendige oplysninger i en klar grænseflade, der er lettere at bruge til mindre opløsninger. Nuværende minimalisme er gået ud over strippesider til det nøgne essentielle, og har dannet en ny stil kendt som fladt design. Dette hænger sammen med den overbevisning om, at intuition ikke længere er nødvendig i design, da grænseflader og deres brug er blevet en så vigtig del af livet, at design kan bevæge sig ud over at fortælle brugerne, hvad de skal gøre, kan en brugerflade endelig være et værktøj i stedet for at fordoble sig som en mentor. Flade design har længe været præget af brugen af ​​dristige blokfarver, men med indførelsen af ​​iOS7 har gradienter taget deres plads i verden af ​​grænseløs fladt design, der ekstraherer elegance fra garish.

Endelig slutter jeg denne artikel med et websted, der gør tingene lidt anderledes. Thibaud er en kreativ udvikler, der har designet en porteføljeswebstedbygger kendt som Pikibox. Webstedet er ekstremt berøringsvenligt, men uden at hæmme dets tilgængelighed til stationære brugere, på mindre touchscreen-enheder, men brugeren sendes til en fokuseret omdirigering med en mobil grænseflade.

Det enkle design virker vidunderligt ved at vise hele sin portefølje på en professionel måde, samtidig med at man beholder et sjovt nyt look, der er ekstremt intuitivt. Selvfølgelig er en stor del af designet i brugerens hænder, der er i stand til at ændre placeringen af ​​navigationen og justere, hvordan den bruges rumligt, hvilket nogle ville sige, er ikke ligefrem et design valg. Desktop-versionen kommer i fire stilarter, og jeg inviterer dig til at lege med dem og trække dine egne konklusioner om, hvorvidt dette blot er ubeslutsomt eller meget kreativt.

Thibaud

Hvilke kompromiser har du lavet som følge af berøringsskærme? Det svømmer tilstand en fortid? Lad os vide i kommentarerne.

Fremhævet billede / miniaturebillede, touch billede via Shutterstock.