Hvordan Touch Screen Revolution påvirker UX
Innføringen av Windows 8 så en massiv revisjon av Windows-brukergrensesnittet i tråd med Windows Phone-grensesnittet for å være mer intuitivt for folk som bruker berøringsskjermbilder, og Apple har subtilt blitt tilpasset OSX over tid, effektivisering av funksjoner som blir stadig mer delte over deres mobile og stasjonære operativsystemer. Selv om vi ennå ikke har sett en berøringsskjerm-Mac, er det åpenbart at berøringsskjermrevolusjonen truer oss, med brukerne som bruker mer og mer tid på sine mobile enheter enn hjemme-PCer.
Med dette i tankene og en stadig større andel av surfing på smarttelefoner og nettbrett, må nettsteder bestemme hvordan de vil tilpasse seg folk som får tilgang til innholdet uten mus og tastatur. Selv om standardresponsen til dette ofte har vært "bare lage et separat mobilgrensesnitt!", Har en løsning som har fungert bra tidligere på mindre mobile enheter som telefoner, det er svært liten plass for mellomgruppen som er okkupert av større telefon og tablettskjerm.
Denne artikkelen vil ta en titt på en rekke nettsteder som har gått ned både ukonvensjonelle og standard nettsted design for å bli mer berøringsvennlig.
Fokuserte nettsteder vs. reagerende nettsteder
Mange nettsteder har opprettet datterselskaper eller apper spesielt for berøringsskjermbrukere, slik at de kan fokusere på en type bruker om gangen. Et problem er at siden nettsidene er separate, er de avhengige av URL-omadressering som ofte kan føre til problemer som brukeren blir sendt til feil sted fra koblinger eller dårlig omdirigering som følge av at man trenger omdirigering til formaterte sider for mobilbrukere.
Det største problemet med separate nettsteder for mobile brukere er imidlertid at den mobile versjonen ofte mangler funksjoner eller informasjon som en stasjonær bruker mottar; funksjoner og grensesnitt ofte forenklet, knapper forstørret og muligheter redusert. Dette kan løses ved å bruke en "responsiv" design. Et responsivt nettsted er utformet for å være enkelt å se på begge plattformene uten å miste kvalitet på begge sider. Dette har også den fordelen at bare ett nettsted må utformes, i stedet for to, men dette resulterer ofte i kompromisser for begge plattformene.
Grunnleggende designforskjeller
Det er åpenbare forskjeller mellom en berøringsskjerm og et skrivebord som du må tenke på når du lager ditt nettsted. På en berøringsskjerm tørker du opp siden for å bla nedover det, men på et skrivebord flytter du rulleskiven ned. Apple har forsøkt å rette opp dette ved å konsolidere sine touch-grensesnittteknologier i trackpads på både sine bærbare og stasjonære Mac-maskiner, men PC-brukere eller Mac-brukere som bruker konvensjonelle rullehjul eller glidebrytere for å bla gjennom nettsider, har en ulempe.
Knapper må være mye større på mobile enheter, da det ikke er så nær så nøyaktig som å klikke med musen, er det ikke noe mer irriterende enn å prøve å klikke på en kobling til neste side og ved et uhell bli sendt tilbake en side eller på en annonse i stedet. Mangelen på en markør betyr også at du ikke kan ha svingestater for å forklare hvor en kobling går, hva et ord betyr eller hva som er klikkbart.
Det er også en forskjell mellom nøyaktighet på mobilinnganger, siden berøringsskjermene kan ha enten resistive eller kapasitive innganger som har varierende følsomhet og etterfølgende nøyaktighet kan gå tapt på resistive berøringsskjerm. Utover dette må designene inneholde to svært forskjellige oppløsninger for mobile enheter som har to retninger.
Skjermretning og bildeforhold
Med flere oppløsninger utover vanlige skjermstørrelser betyr det at du ikke lenger kan tenke bare når det gjelder standardiserte skjermoppløsninger og vertikal bevegelse. De raske endringene i teknologimarkedet har produsert skjermstørrelser som er forskjellige fra modell og produsent, og med alle rykter om såkalte smarte klokker, kan vi begynne å se skjermer som ikke lenger er begrenset til fire grenser. Mobilskjermbilder legger til ytterligere kompleksitet på grunn av at de kan vises både i portrett og liggende modus ved rotasjon.
Svaret er flytende oppsett som selvjusterer for enhver oppløsning og kan tilpasses for både portrett og liggende visning. Noen nettsteder bruker et flytende layout som drastisk endrer utseendet til nettstedet for å optimalisere kontrollen og bruke det fulde potensialet på skjermen basert på orienteringen.
Mens mus ble spesielt designet med rullehjul for enkel vertikal rulling, flyttes mange brukere til berøringsputer og berøringsskjerm. Siden Apple har omfavnet den mer nyskapende formen for berøringsrulling, som er besluttet å dra en side i stedet for å rulle, er den mer kreative ideen om horisontal rulling er kanskje ikke ute av spørsmålet. De fleste apper bruker horisontal rulling som et verktøy, og uten tvil den største suksessen i horisontal rulling er spenningen, så hvorfor ikke implementere den i webgrensesnittet ditt? Mange enkeltsider har en eneste horisontal akse, men de må ofte bruke knapper for å starte rullingen, ettersom brukere kanskje ikke forstår det ikke-standardformatet.
Horisontal rulling kan lignes på vertikal rulling i designbetingelser, men bruken av begge kan åpne muligheten for dobbelt-akse-rulling, noe som kanskje ikke fungerer i nettleseren. Mange brukere liker å bli forankret til en akse, selvfølgelig er dette vanligvis x-aksen, som er statisk, så hvis brukerne går seg vill på siden, kan de bare rulle opp og være tilbake på hovednavigasjonen. På to-akse-steder kan dette ikke være så enkelt, og derfor må navigering være klissete, ved hjelp av en HUD-stillinje.
Så hvilket brukergrensesnitt skal nettstedet ditt bruke?
Åpenbart er ikke alle brukergrensesnittene egnet for alle typer nettsider, så spør deg selv noen grunnleggende spørsmål: Hvem er målgruppen din? Hva prøver du å selge? Hvilket inntrykk vil du gi? Yngre mennesker er mer sannsynlig å bruke berøringsskjermbilder enn en eldre demografisk som sannsynligvis vil bruke et skrivebord, men kan fortsatt kreve større knapper og et klarere brukergrensesnitt. Det er ingen grunn til å skape det mest innovative brukergrensesnittet som er tenkelig hvis ingen kan forstå hvordan man bruker det, så husk alltid å lage et brukergrensesnitt som en bruker kan se på og umiddelbart vite hvordan man bruker.
Radialmeny
En radialmeny, også kjent som en pajemeny, er en sirkulær kontekstmeny som bruker multiretningskontekst snarere enn høyde eller bredde som valgverktøyet.
Dette er en flott form for intuitivt design som hindrer brukerne i å gå seg vill i dusinvis av undermenyer. En annen fordel er at en berøringsskjermbruker har bedre kontroll over vanlige nedtrekkslister, da retningsbestemt kontroll er mer nøyaktig enn å tappe. Bruken av radiale menyer i skjemaer og nettsteder kan dramatisk øke brukervennligheten på en berøringsskjerm på nettstedet, og strekker seg til tommelstikker som de som brukes på spillkonsoller, noe som ofte brukes radiale menyer, siden det lar spill enkelt sendes til PC. Som slike skrivebordsbrukere taper ikke heller ut som det fortsatt er tilfelle at radiale menyer kan forenkle lange lister i enkle kategorier som øker brukervennligheten eller produktiviteten på et nettsted.
Radiale menyer er en fin måte å vise kontekstavhengig informasjon på. Et eksempel på dette er å klikke på et bilde av en matrett på et matsted og få muligheten til retweeting, oppskriftslinken, ingredienslisten eller lagring av bildet. Men du må være forsiktig med at menyen din fortsatt er tilgjengelig og enkel, ellers kan du enkelt overvelde brukeren, spesielt når du kombinerer symboler og ord i samme radiale meny. Radialmeny er mye lettere å bruke når det er statisk enn dynamisk, da dette kan føre til vanskeligheter med objektvalg, for eksempel på nettsteder som Phong , i dette tilfellet, spesielt når du bruker en mus som markørsporing, gjør den det spesielt unintuitive.
Skeuomorphism
Skeuomorphic design etterligner utseendet og funksjonaliteten til en dagligdagse gjenstand for å skape et intuitivt brukergrensesnitt, noe som nylig har gått ut av vogue, spesielt siden Scott Forstall har sagt seg fra Apple og Sir Jony Ives flatdesign overtok iOS og sannsynligvis OS X i framtid. Skeuomorphism hadde vært en stor del av Apples press mot mer intuitiv design, nylig med kontakter på Mac som er utformet som en faktisk adressebok, eller Kiosk og iBooks på iOS er faktiske bokhyller. Denne designen er en som åpenbart fordeler berøringsgrensesnittbrukere, siden vi ikke samhandler med verden rundt oss med en markør.
Familiaritet legger til intuitivitet når du bruker et brukergrensesnitt, dette er poenget med skeuomorphism, for å gi en ekstra dimensjon av kjennskap ved å knytte seg sammen med virkelige objekter, slik at brukeren umiddelbart vet hvordan han skal samhandle med den. En vellykket skeuomorphic design betyr at du bare ved å kikke på nettsiden vil vite hva motivet er / siden er brukt til, lage mouseover verktøytips og knytte høydepunkter utdatert.
Dial UI
Dette er en kombinasjon av begge de ovennevnte hvor hele brukergrensesnittet danner en enkel knapp; utformingen ligner en radial meny, men i stedet for hengsel i midten, velger du derfra, roterer dreiehjulet til et enkelt valgpunkt. Dette er veldig effektivt i tilfeller som musikk hvor dialer ofte brukes til å blande et spor og kontrollvolum. I tilfelle av nettetiketten SHSK'H de bruker en modifisert type oppringings-brukergrensesnitt for å velge hvilket spor du vil spille.
Den minimalistiske bevegelsen
Minimalisme er hvor et nettsted er strippet tilbake til sine bare viktige elementer. Dette er flott for mobilbrukere, da det reduserer belastningstider og dataanbruk, så vel som at brukeren kan få tilgang til all nødvendig informasjon i et klart grensesnitt som er lettere å bruke for mindre oppløsninger. Nåværende minimalisme har gått utover strippingssteder til de bare nødvendighetene, og har dannet en ny stil kjent som flat design. Dette henger på troen på at intuisjon ikke lenger er nødvendig i design siden grensesnitt og bruk av dem har blitt en så viktig del av livet som design kan bevege seg utover å fortelle brukere hva de skal gjøre, kan en brukergrensesnitt endelig være et verktøy, i stedet for å doble seg som en mentor. Flat design har lenge vært preget av bruk av dristige blokkfarger, men med introduksjonen av iOS7 har gradienter tatt sin plass i en verden uten kantlinje, og utvider eleganse fra garish.
Til slutt vil jeg avslutte denne artikkelen med et nettsted som gjør ting litt annerledes. Thibaud er en kreativ utvikler som har designet en porteføljesidebygger kjent som Pikibox. Nettstedet er ekstremt berøringsvennlig, men uten å hindre tilgjengeligheten for skrivebordsbrukere, på mindre berøringsskjerm enheter, men brukeren blir sendt til en fokusert omadressering med et mobilt grensesnitt.
Den enkle designen fungerer fantastisk når du viser hele porteføljen på en profesjonell måte, samtidig som du beholder et morsomt, nytt utseende som er ekstremt intuitivt. Selvfølgelig er en stor del av designet i hendene på brukeren, å kunne endre plasseringen av navigasjonen og justere hvordan den brukes romlig, noe som noen sier, ikke akkurat utgjør et designvalg. Den stasjonære versjonen kommer i fire stiler, og jeg inviterer deg til å leke med dem, og trekke dine egne konklusjoner om hvorvidt dette bare er ubesluttsomt eller enormt kreativt.
Hvilke kompromisser har du gjort som et resultat av berøringsskjermene? Den svingeren er en ting fra fortiden? Gi oss beskjed i kommentarene.
Utvalgt bilde / miniatyrbilde, berør bildet via Shutterstock.