Sju riktlinjer vid utveckling av hemsidor för mobil och desktop

Transkript

1 Sju riktlinjer vid utveckling av hemsidor för mobil och desktop Denna artikel går igenom hur du gör en hemsida användarvänlig till både vanliga desktopdatorer och mobilanvändare utan att behöva ha två separata versioner. Hemligheten är inte bara att skala ner sin design utan det krävs en nya interaktionsmönster. Samtidigt som olika mönster har fördelar så måste man vara medveten om nackdelarna och vad som inte gå eller bör användas vid skapande av en dator och mobil-anpassad hemsida. Här är åtta stycken saker det är bra att vara medveten om vid design av en sådan sida. 1) Ingen hovringstillstånd På smartphones finns det ingen hovringstillstånd (ännu iallafall). Detta kan vara en utmaning för sidor med mycket innehåll och funktioner eftersom gränssnitt snabbt blir uppsvälld med länkar och knappar som normalt endast visas på hover. På mobiltelefoner, måste någon information eller funktion nås på två sätt: Synlig - innehållet eller funktionen är tillgänglig från visuella medel. De kan vara kapslade i huvud och sidelement, men innehållet är nås ändå bara från synliga navigeringselement som knappar eller länkar. Konvention - genom att förlita sig på att mobila designkonventioner kan dölja innehåll och bara visa den när användaren använder vissa gester som att svepa över telefonens översta del. Till exempel när användaren drar innehåll nedåt. Så kallad pull-to-refresh. Konvention kan bidra till att förenkla gränssnittet men också gömma olika funktioner som användaren kanske inte vet om. Sådana funktioner bör antingen förklaras i vid första besöket eller vara icke-väsentlig för upplevelsen av hemsidan.

2 2) Felbenägen textinmatning Skriva på ett touch tangentbord är långsamt och felbenäget. Så se till att hålla dina formulärfält till ett absolut minimum. Dessutom måste du tänka på hur du hanterar fel i data. Du kan också överväga automatiska kompletteringfunktioner, användning av geografisk data, inline validering och andra metoder för att föreslå och korrigera användarinmatningar allt eftersom de skrivs. 3) Mindre översikt av sidor De mindre skärmarna på touch-enheter resulterar i minskad överblick. Detta tenderar att göra det svårare för användaren att få en överblick av sidan, jämföra olika alternativ, och komma ihåg tidigare innehåll. Tänk dig ett långt form. När användaren rullar ned, försvinner titeln i form tillsammans med tidigare inmatade data. Utan detta sammanhang blir det betydligt svårare att tolka innebörden av de för närvarande synliga formulärfälten. Det gör det också svårt att upptäcka fel i efterhand. Skärmen kan bidra till att undvika felaktiga data genom att ett huvud fästs på toppen av skärmen och kan bidra till att upprätthålla sammanhanget i formuläret. (En fast huvud kommer naturligtvis att minska skärmyta för nytt innehåll.) 4) Felaktiga klick På touch-enheter använder människor sina fingrar för att klicka på länkar och knappar på skärmen, vilket avsevärt minskar klickens noggrannheten. Detta är också känt som "fett finger problemet". I praktiken innebär detta att du måste ta hänsyn till storleken och närheten till alla klickbara element, vilket gör att de är stora nog att tillförlitligt röra med en mänsklig finger och tillräckligt långt ifrån varandra att användarna inte av misstag trycker på fel elementet.

3 Navigering och kontrollbarer är av särskild betydelse, eftersom de omfattar ett stort antal klickbara element (vilket gör oavsiktliga klick mer troligt) som alla har betydande konsekvenser för den sida. Ett sätt att hantera oavsiktliga klick är att uppmana användaren att bekräfta siina val, men detta kan snabbt blir irriterande. En mycket mindre påträngande (och normalt sett bättre) tillvägagångssätt är att ha en "ångra"-funktion som gör att användaren kan ångra oavsiktlig beteende när det händer i stället för att hela tiden avbryta användarens avsiktliga handlingar. 5) Dåligt anslutning Det är inte ovanligt med återkommande anslutningsproblem och långsamma hastigheter på smartphones. Det är verkligen en tvådelad fråga: Ingen förbindelse Försök hantera tapp i kommunikation med användare på ett bra och snygt sätt. AJAX-aktiverade funktioner är särskilt benägna att ha ett oväntat beteende och tysta fel (se navigator.online). Långsam nedladdningshastigheter -Med andra ord, om din webbplats ska kunna användas på långsammare anslutningar då ska du göra det till ett så liten avtryck som möjligt genom att genomföra tillgång till caching, med CSS3 effekter istället för bilder, etc. Båda dessa lösningar kommer att förbättra upplevelsen för alla typer av nätverk. Försök sänk din webbplats nedladdning och detta kommer att göra hemsidan supersnabb på snabbare anslutningar. Hantering av nätverksproblem kommer givetvis att bli mycket uppskattat avanvändarna de få gånger det strular och gör så att användaren upplever nätverket som mer stabilt. 6) Långsam hårdvara

4 Även om högpresterande touch-enheter förbättras snabbt, är de fortfarande långsamma enheter jämfört med stationära datorer. Detat innebär att sidan initiering kan bli irriterande långsam - speciellt om du kör en hel del Javascript när sidan laddas. En annan fråga om långsam hårdvara är att övergångar och andra animeringar kan upplevas som om de "laggar". Förutom att vara estetiskt obehagligt kan detta förstöra användarupplevelsen. I båda fallen är bra programmering avgörande. Uppskjutet Javascript-utförande kombinerat med sparsmakad användning av hårdvaruaccelererad CSS animationer kommer att göra susen i de flesta fall när de genomförs på rätt sätt. 7) Användningssituationer Eftersom själva naturen av smartphones är rörlighet måste man beakta effekterna av distraktioner i den verkliga världen. En högtalares tillkännagivande, promenader i trafiken, etc. En annan och kanske större källa till störningar är de digitala avbrotten. SMS, telefonsamtal, push-notiser och så vidare. Dessa två källor till avbrott gör "returnability" på din webbplats allt viktigare. Om en användare återvänder till din sajt genom en distraktion ska de omedelbart starta upp där de lämnade. Om sidan uppdateras kommer deras uppgifter vara kvar trots att de aldrig skickade formuläret (se HTML5 localstorage). Detta är på intet sätt en uttömmande lista, men det bör ge dig en uppfattning om några vanliga UI utmaningar som uppstår när du ändrar från stationära design till mobil. Smartphones har öppnat en ny och spännande värld, men vi måste vara medvetna när man designar hemsidor för dessa enheter. Det är en annan plattform med sina egna begränsningar och möjligheter. Reflektion:

5 Dessa tips kan komma lite till användning när vi utformar admin-hemsidan i projektarbetet. Även fast hemsidan inte är designad för mobil så ska det iallafall finnas en möjlighet att kunna använda den igenom en sådan. James Appelseed Baymard Institute- 8 limitations when designing for mobile [www]. Hämtat från <