Adaptive views
- Vad är det?
Adaptive views är en form av responsiv design, och detta verktyg finns i Axure. Adaptive views innebär, som det låter, en skärmanpassning. Med hjälp av adaptive views kan hemsidor anpassas till olika skrämstorlekar för att optimeras. Detta är nödvändigt för att användaren inte ska gå miste om någon slags information, samt att webbsidan fortfarande ska kunna bibehålla en bra design och layout oavsett vilken plattform den visas på. Adaptive view-verktyget i Axure gör det möjligt att anpassa designen och layout till olika skärmar, omvandla design och stilar, samt anpassa olika funktioner till specifika skärmstorlekar.
Genom att använda adaptive views i Axure kan menyer fällas ut eller dras in, bilder kan expandera eller förminskas, typsnitt kan förändras av storlek eller variant – detta i syfte för att underlätta intaget av information för användaren.
- När används det?
I dagens samhälle använder vi olika skärmstorlekar såsom smartphones, datorer och surfplattor. Dessa plattformar kräver olika anpassningar av hemsidor och funktioner för att ansenligt presenteras för användaren. Vid användning av en dator är layouten ofta bred och stor vilket resulterar i att en likadan presentation av innehållet inte kommer vara bra integrerat på en smartphone. Då layouten inte utgörs av en responsiv design behöver användaren ofta scrolla upp/ner, i sidleds samt zooma in/ut något som kan vara extremt frustrerande. Cirka 91 % av Sveriges befolkning (Axelsson, L. 2016) har idag tillgång till internet vilket resulterar i att det krävs en mer anpassad layout då dessa oftast demonstreras på olika plattformar. För att göra sin hemsida/funktion mer användarvänlig gäller det att göra den anpassad för olika tekniska plattformar vilket resulterar i att det blir lättare att använda samt större chans att användaren stannar kvar på hemsidan/funktionen.
Att ha en anpassad hemsida för rätt plattform har resulterat i att Google utvecklat sina sökmotorer där dem gynnar de hemsidor/funktioner som använder sig av responsiv design. Detta innebär att man rankas högre då man innefattas av en responsiv design medan vid dess frånvaro rankas lägre.
- Hur används det?
Adaptive view används i programmet Axure i det syfte att designer ska kunna anpassa sin design efter den skärmstorlek som din hemsida ska användas på. Du kan anpassa sidan efter den storlek som du själv väljer samt att det finns förvalda alternativ, så som iPhone x storlek. Detta är hur vi gick till väga;
Vi började med att göra en hemsida i den standard storleken som Axure väljer. På denna sida anpassade vi allt material som hemsidan innehöll till den aktuella storleken. Vi la in en meny och en bild med tillhörande text.
Sedan valde vi “add adaptive views” i “style menyn”. Här kunde vi välja att lägga till en adaptive view, eller flera om nödvändigt. Axure gav oss exempel på flera förvalda storlekar, samt att vi kunde modifiera vår egna.
Vi valde iPhone x storleken som storlek.
När man sedan ska anpassa sin sida för iPhone X:s storlek så markeras detta ut genom att den blir grå där designen inte kommer synas.
Vi anpassade vår hemsida efter en iPhone x:s skärmstorlek. Vi valde att lägga menyn som en hamburgermeny i det högra hörnet. Främst för att detta är ett vanligt sätt att anpassa en hemsida till en mindre typ av skärm, men även för att det underlättar för användaren att menyn ligger mer kompakt jämförelse om det skulle ligga efter varandra vågrätt eller att användaren tvingar scrolla sig igenom sidan för att kunna nå menyn. För att optimera hemsidans layout förminskade vi storleken på bilden och komprimerade texten.
När man jobbar med adaptive views i Axure programmet underlättar den arbetet genom att ge färgkoder på det olika delarna man jobbar på. Exempelvis om du arbetar med Base så blir iPhoneX/XS gul, gul betyder att den är “barnet” till basen. Turkos menas att det är den du arbetar med och där kommer förändringarna att göras. Medan om du arbetar med iPhone X/XS blir den turkos och base blir grå, grå menas att det är “föräldern” till den vy du är på och kommer därav att inte förändras av redigeringen.
Sedan kan du klicka på Affect All Views vilket gör alla vyer gröna, grönt betyder att redigeringar påverkar alla vyer.
Källor:
Designing Interfaces av Jenifer Tidwell (senaste upplagan).
Axelsson, L. 2016. Vad är responsiv design? En nybörjares guide till den anpassade hemsidan. https://www.igomoon.com/blogg/vad-ar-responsiv-design. (Hämtad 19.11.19)
Interface Patterns – Designmönster för användargränssnitt | På svenska 