Hur Touch Screen Revolution påverkar UX
Introduktionen av Windows 8 såg en omfattande översyn av Windows-användargränssnittet i linje med Windows Phone-gränssnittet för att vara mer intuitivt för personer som använder pekskärmar och Apple har subtilt anpassat OSX över tiden, effektiviserar funktioner som blir alltmer delade över sina mobila och stationära operativsystem. Även om vi ännu inte har en pekskärmsmask är det uppenbart att pekskärmens revolution hänger på oss med användare som spenderar mer och mer tid på sina mobila enheter än hem-datorer.
Med detta i åtanke och en allt större andel av surfning på smarttelefoner och surfplattor måste webbplatser bestämma hur de kommer att anpassa sig till personer som får tillgång till innehållet utan mus och tangentbord. Medan det vanliga svaret på detta ofta har blivit "bara skapa ett separat mobilgränssnitt!", En lösning som tidigare har fungerat bra på mindre mobila enheter, som telefoner, finns det väldigt lite utrymme för mellangruppen upptagen av större telefon och tablettdisplayer.
Den här artikeln tar en titt på ett antal webbplatser som har gått ner både okonventionella och standardiserade webbdesigner för att bli mer beröringsvänliga.
Fokuserade webbplatser kontra lyhörda webbplatser
Många webbplatser har skapat dotterwebbplatser eller appar specifikt för användare av pekskärm, så att de kan fokusera på en typ av användare åt gången. Ett problem är att eftersom webbplatser är separata beror de på URL-omdirigering som ofta kan leda till problem som att användaren skickas till fel plats från länkar eller dålig omdirigering som ett resultat av att omdirigering till formaterade sidor för mobila användare behöver.
Det största problemet med separata webbplatser för mobila användare är dock att den mobila versionen ofta saknar funktioner eller information som en stationär användare får, funktioner och gränssnitt förenklas ofta, knapparna förstoras och alternativen minskar. Detta kan lösas genom att använda en "lyhörd" design. En lyhörd webbplats är utformad för att enkelt kunna ses på båda plattformar utan att förlora kvalitet på endera. Detta har också den fördelen att endast en webbplats behöver utformas, snarare än två, men det leder ofta till kompromisser för båda plattformarna.
Grundläggande designskillnader
Det finns uppenbara skillnader mellan en pekskärm och ett skrivbord som du behöver tänka på när du skapar din webbplats. På en pekskärm sveper du upp sidan för att rulla ner den, men på ett skrivbord flyttar du rullningshjulet neråt. Apple har försökt att korrigera detta genom att konsolidera sina pekgränssnittsteknologier i trackpads på både sina bärbara och stationära Mac-datorer, men PC-användare eller även Mac-användare som använder konventionella rullhjul eller reglage för att bläddra igenom webbsidor har en nackdel.
Knappar måste vara mycket större på mobila enheter, eftersom det inte finns något som är lika nära som att klicka med en mus, det finns inget mer irriterande än att försöka klicka på en länk till nästa sida och av misstag skickas tillbaka en sida eller på en annons istället. Bristen på en markör betyder också att du inte kan ha svävarstater för att förklara var en länk går, vad ett ord betyder eller till och med vad som är klickbart.
Det finns också en skillnad mellan noggrannhet på mobila ingångar eftersom pekskärmar kan ha antingen resistiva eller kapacitiva ingångar som har varierande känslighet och efterföljande noggrannhet kan gå vilse på resistiva pekskärmar. Utöver detta måste mönster innehålla två väldigt olika upplösningar för mobila enheter som har två orienteringar.
Skärmorientering och bildförhållande
Med flera upplösningar utöver vanliga skärmstorlekar kan du inte längre tänka bara på standardiserade skärmupplösningar och vertikal rörelse. De snabba förändringarna på teknikmarknaden har skapat skärmstorlekar som skiljer sig från modell och tillverkare och med alla rykten om så kallade smarta klockor kan vi börja se skärmar som inte längre är begränsade till fyra gränser. Mobila skärmar lägger till ytterligare komplexitet på grund av att de kan ses både i porträtt och liggande läge genom rotation.
Svaret är flytande layouter som anpassar sig själv för alla upplösningar och kan anpassas för både porträtt och landskapsvisning. Vissa webbplatser använder en flytande layout som drastiskt förändrar webbplatsens utseende för att optimera kontrollen och utnyttja skärmens fulla potential baserat på orienteringen.
Medan möss speciellt konstruerades med rullhjul för enkel vertikal rullning, migrerar många användare till pekskärmar och pekskärmar. Eftersom Apple har omfamnat den mer innovativa formen av pekskärning, som är likadant att dra en sida i stället för att rulla, desto mer kreativa idé om horisontell rullning kan inte vara av frågan. De flesta appar använder horisontell rullning som ett verktyg och den största framgången med horisontell rullning är den vänliga, så varför inte implementera den i ditt webb-gränssnitt? Många sidor på en enda sida har en enbart horisontell axel, men de måste ofta använda knappar för att initiera rullningen, eftersom användare kanske inte förstår det icke-standardiserade formatet.
Horisontell rullning kan likna vertikal rullning i konstruktionsvillkor, men användningen av båda kan öppna möjligheten för dubbelaxelrullning, vilket kanske inte fungerar i webbläsaren. Många användare tycker om att vara förankrade till en axel, det är uppenbarligen att det är en x-axel, som är statisk, så om användarna går vilse på sidan kan de bara bläddra upp och vara tillbaka vid huvudnavigering. På tvåaxliga sidor kan det inte vara så enkelt, och så kan navigering behöva vara klibbigt, med hjälp av en HUD-stilfält.
Så vilket användargränssnitt ska din webbplats använda?
Självklart är inte alla användargränssnitt lämpliga för varje typ av webbplats, så fråga dig några grundläggande frågor: Vem är din målgrupp? Vad försöker du sälja? Vilket intryck vill du ge? Yngre människor är mer benägna att använda pekskärmar än en äldre demografiska som sannolikt kommer att använda ett skrivbord, men kan fortfarande behöva större knappar och ett tydligare användargränssnitt. Det finns ingen anledning att skapa det mest innovativa användargränssnittet, om det inte går att förstå hur man använder det, så kom alltid ihåg att skapa ett användargränssnitt som en användare kan titta på och omedelbart veta hur man använder.
Radialmeny
En radial meny, även känd som en paj-meny, är en cirkulär sammanhangsmeny som använder flerväglig kontext snarare än höjd eller bredd som urvalsverktyget.
Det här är en utmärkt form av intuitiv design som hindrar användarna att gå vilse i dussintals undermenyer. En annan fördel är att en pekskärmsanvändare har bättre kontroll över normala listrutor eftersom riktningskontrollen är mer exakt än att knacka på. Användningen av radiella menyer i formulär och webbplatser kan dramatiskt förbättra användarupplevelsen på pekskärmen på webbplatsen, och sträcker sig till tummar som de som används på spelkonsoler, någonstans används radiella menyer ofta eftersom det gör det lätt att spela spel på datorn. Som sådana skrivbordsbrukare förlorar inte heller, eftersom det fortfarande är fallet att radiella menyer kan förenkla långa listor i enkla kategorier som ökar användarvänligheten eller produktiviteten på en webbplats.
Radiella menyer är ett bra sätt att visa kontextkänslig information, ett exempel på detta är att klicka på en bild av en maträtt på en matplats och få möjlighet att retweeting, receptlänken, ingredienslistan eller spara bilden. Men du måste vara försiktig med att din meny är tillgänglig och enkel, annars kan du enkelt överväldiga användaren, speciellt när du kombinerar symboler och ord i samma radialmeny. Radialmenyn är mycket lättare att använda när statisk än dynamisk eftersom detta kan leda till svårigheter vid objektval, t.ex. på webbplatser som Phong , i det här fallet, särskilt när du använder en mus som markörspårning, gör den speciellt ointuitiv.
Skeuomorphism
Skeuomorf design imiterar utseendet och funktionaliteten hos ett vardagligt objekt för att skapa ett intuitivt användargränssnitt, något som nyligen har gått ur mode, särskilt eftersom Scott Forstall avgick från Apple och Sir Jony Ives plattform tog över iOS och sannolikt OS X i framtida. Skeuomorphism hade varit en stor del av Apples drivkraft mot mer intuitiv design, nyligen med Contacts on Mac utformad som en faktisk adressbok, eller Kiosk och iBooks på iOS är faktiska bokhyllor. Denna design är en som mer uppenbarligen gynnar användare med beröringsgränssnitt, eftersom vi inte interagerar med världen runt oss med en markör.
Kändlighet lägger till intuitivitet när man använder något användargränssnitt, detta är punkten för skeuomorphism, för att ge en extra dimension av förtrogenhet genom att sammanfoga krafter med verkliga objekt så att användaren omedelbart vet hur man ska interagera med den. En framgångsrik skeuomorf design betyder att du bara kan se vad ämnet är / sidan används för genom att titta på webbsidan, göra musknappsverktyg och länka höjdpunkter föråldrade.
Dial UI
Detta är en kombination av båda ovanstående där hela användargränssnittet utgör en enkel ratt; designen liknar en radial meny, men i stället för att hänga i mitten, välj därifrån roterar ratten till en enda markering. Detta är mycket effektivt i fall som musik där dials ofta används för att blanda ett spår och en kontrollvolym. När det gäller nätetiketten SHSK'H De använder en modifierad typ av uppringningsgränssnitt för att välja vilket spår du vill spela.
Den minimalistiska rörelsen
Minimalism är där en webbplats är avskalad till sina bara väsentliga delar. Det här är bra för mobila användare eftersom det minskar belastningstider och dataanvändning, så att användaren kan få tillgång till all nödvändig information i ett tydligt gränssnitt som är lättare att använda för mindre upplösningar. Nuvarande minimalism har gått bort för att ta bort strimlingsställen till det väsentliga, och har skapat en ny stil som kallas platt design. Detta hänger på tron att intuition inte längre är nödvändig i designen, eftersom gränssnitt och deras användning har blivit en så viktig del av livet som designen kan gå bortom att berätta för användarna vad man gör, kan en användargränssnitt äntligen vara ett verktyg snarare än att fördubblas som en mentor. Plattformen har länge präglats av användandet av djärva blockfärger, men med införandet av iOS7 har gradienterna tagit plats i världens gränslösa plana design, vilket extraherar elegans från garish.
Slutligen avslutar jag den här artikeln med en webbplats som gör saker lite annorlunda. Thibaud är en kreativ utvecklare som har utformat en portföljbyggare som kallas Pikibox. Webbplatsen är extremt beröringsvänlig men utan att hindra dess tillgänglighet för stationära användare, på mindre pekskärmsenheter, men användaren skickas till en fokuserad omdirigering med ett mobilt gränssnitt.
Den enkla designen fungerar fantastiskt när du visar hela sin portfölj på ett professionellt sätt samtidigt som du behåller ett roligt, nytt utseende som är extremt intuitivt. En stor del av konstruktionen är naturligtvis i användarens händer, som kan ändra placeringen av navigeringen och justera hur den används rumligt, vilket vissa skulle säga inte exakt utgör ett designval. Den stationära versionen levereras i fyra stilar, och jag uppmanar dig att leka med dem och dra dina egna slutsatser om huruvida det här är helt enkelt oundvikligt eller enormt kreativt.
Vilka kompromisser har du gjort till följd av pekskärmar? Den svävaren är en sak av det förflutna? Låt oss veta i kommentarerna.
Utvalda bild / miniatyrbild, tryck på bilden via Shutterstock.