Så visar du en växande samling små virtuella husdjur

Små husdjur är främst visuella objekt, så ett regelbundet rutnät är en bra utgångspunkt. Använd rutor av samma storlek och håll en konsekvent läsordning från vänster till höger och sedan uppifrån och ned. Då får varje nytt husdjur en förutsägbar plats, vilket hjälper samlare att snabbt överblicka galleriet när de återvänder. Apple rekommenderar välbekanta rad- eller rutnätslayouter för visuella samlingar, medan Material Design beskriver enkla rutnätsrutor som lämpliga för bildgallerier. (Apple Human Interface Guidelines: Collections; Material Design: Cards)

Ge varje ruta tillräckligt med utrymme för husdjurets bild och namn. Om namn, typ eller en kort status behöver visas intill varje husdjur kan du använda en enkel ruta med tydlig hierarki i stället för att lägga till ett helt kort med ramar, knappar och dekorativa detaljer. Materials vägledning skiljer mellan bildgallerier och kort, som passar bättre när objekten har varierat innehåll eller olika åtgärder. För en samling husdjur som till största delen är enhetlig tar extra kortdetaljer uppmärksamheten från samlingen.

När samlingen växer så att den inte längre ryms på skärmen kan ett rutnät inte visa alla husdjur samtidigt. Välj ett huvudsakligt mål: att kunna se så många som möjligt på en gång, att snabbt hitta ett namngivet husdjur eller att njuta av en särskilt framhävd visning. Målen leder till olika layouter.

Huvudsakligt mål	Lämpligt visningsalternativ	Avvägning
Överblicka många husdjur	Kompakt, jämnt rutnät	Varje husdjur får mindre utrymme
Hitta ett känt husdjur	Rutnät med sökning eller alfabetisk sortering	Kontrollerna tar upp en del av skärmutrymmet
Visa några favoriter	Utvald rad eller större visningsyta ovanför rutnätet	Mer av hela samlingen hamnar längre ned
Jämföra detaljer om husdjuren	Lista eller detaljvy	Färre husdjur får plats i den första vyn

Se det utvalda området som ett litet fönster mot samlingen, inte som en ersättning för den. Visa till exempel några favoriter högst upp och behåll sedan hela rutnätet nedanför. Androids exempel på ett anpassningsbart husdjursgalleri har en framträdande yta för husdjur och ett rutnät som kan visa fler husdjur när layouten har mer utrymme. Det stöder det allmänna designvalet att ge en utvald yta visuell prioritet och samtidigt behålla ett galleri som går att bläddra i under den. (Android Developers: Furry friends and adaptive APIs)

När rutnätet blir långt kan du dela upp det med kategorier som stämmer med hur samlaren tänker på husdjuren. Möjliga val är art eller värld, samlingsserie, färgfamilj eller när husdjuret skaffades – använd bara kategorier som faktiskt finns i samlingen. Börja med ett litet antal grupper. För många små avsnitt kan få bläddringen att kännas som att man rör sig mellan separata samlingar.

Behåll en tydlig standardvy, till exempel ”Alla husdjur”, och gör det synligt vilken grupp som är aktiv. Om husdjur kan tillhöra flera grupper är ett filter oftast tydligare än att visa samma husdjur i flera avsnitt. Om varje husdjur tillhör exakt en fast grupp kan märkta avsnitt göra hela samlingen enklare att överblicka. Det här är praktiska sätt att ordna innehåll efter dess struktur; den bästa grupperingen beror på samlingens faktiska egenskaper, inte på ett universellt kategorisystem.

Ägaren kanske känner igen bilden av ett husdjur, men namn är till hjälp när samlingen växer och skiljer varianter som liknar varandra åt. Placera ett kort namn direkt under varje miniatyrbild. Om två husdjur kan ha samma namn kan du lägga till en kort kompletterande identifierare, till exempel deras serie eller form. Undvik att lägga flera egenskaper, märken och kontroller i varje ruta: sådana detaljer konkurrerar med bilden och gör rutnätet tätare.

Om visningen ingår i en webbplats eller app ska husdjurets identitet finnas som text såväl som bild. Enligt W3C:s vägledning behöver informativa bilder textalternativ som förmedlar relevant information. Om en intilliggande etikett redan ger samma information kan det vara onödigt att upprepa den i bildens alternativtext. I praktiken kan du kombinera ett synligt namn med en lämplig tillgänglig etikett och undvika att ett särskiljande husdjur bara går att identifiera genom färg eller bild. (W3C WAI: Images Tutorial)

Ändra antalet kolumner efter det tillgängliga utrymmet i stället för att tvinga fram samma antal på alla skärmar. En liten mobil kan visa två kolumner; en bredare skärm kan visa fler, så länge varje bild och namn förblir tydligt. Håll avstånden jämna och behåll samma grundläggande ordning när layouten anpassas. Androids exempel på anpassningsbar design beskriver ett galleri med två kolumner på små skärmar och hur mer innehåll kan visas när det finns mer utrymme. (Android Developers: Furry friends and adaptive APIs)

Kontrollera visningen vid den smalaste storlek som människor sannolikt använder och på en bred datorskärm. Leta efter avklippta namn, bilder som förlorar sina särskiljande detaljer, ojämna rutors höjd eller kontroller som radbryts på ett klumpigt sätt. Om ett husdjur har ett längre namn kan du medvetet låta det ta två rader eller trunkera namnet konsekvent, med ett sätt att se hela namnet. Låt inte en ovanlig post i tysthet förvränga hela rutnätet.

För en liten samling kan det räcka att bläddra igenom ett enda rutnät. Lägg till sökning när människor behöver hitta ett visst husdjur i en längre lista. Lägg till sortering när ordningen spelar roll, till exempel alfabetiskt eller efter när ett husdjur lades till. Lägg bara till filter för egenskaper som hjälper till att skilja objekten åt. Placera kontrollerna ovanför resultaten och visa den valda sorteringen eller det aktiva filtret, så att det är tydligt vilken vy som visas. Materials vägledning för samlingar placerar filtrering och sortering utanför själva korten, så att objekten kan fokusera på sitt innehåll. (Material Design: Cards)

Undvik ändlös rullning utan någon känsla för hur långt man kommit. Ett synligt antal objekt, rubriker för avsnitt eller en tydlig åtgärd för att ”visa fler” kan hjälpa till att visa hur mycket som återstår. Det här är valfria signaler, inte krav. Välj det enklaste alternativet som hjälper någon att orientera sig utan att lägga till visuellt plotter.

Lägg in några representativa husdjur, inklusive sådana som liknar varandra och det längsta namnet, och granska sedan samlingen i mobil- och datorbredd. Fråga dig: Kan någon känna igen varje husdjur, läsa namnet, förstå den aktuella gruppen eller sorteringen och hitta hela samlingen utan att behöva gissa? Går det att hitta ett välbekant husdjur utan att granska varje objekt? Förblir bilderna det som fångar uppmärksamheten?

Om det är svårt att känna igen husdjuren kan du göra rutorna större eller visa färre detaljer. Om det är svårt att hitta objekt kan du lägga till namnsökning eller en lämplig sortering. Om den första skärmen känns överfull kan du reservera en liten yta för utvalda husdjur och behålla hela samlingen nedanför. Gör en ändring i taget och upprepa kontrollen när samlingen växer. Rätt visning är den som fortsatt hjälper läsaren att utföra sin faktiska uppgift vid den skärmstorlek och täthet som hen använder.

• Apple Developer, ”Collections” — https://developer.apple.com/design/human-interface-guidelines/collections
• Material Design, ”Cards” — https://m1.material.io/components/cards.html
• Android Developers, ”Furry friends and adaptive APIs” — https://developer.android.com/design/ui/gallery/social/pawparazzi
• W3C Web Accessibility Initiative, ”Images Tutorial” — https://www.w3.org/WAI/tutorials/images/