Vad jag levererade
Hierarkisk UI-design
Hierarkisk UI-design
Hur strukturerar man en massa content så att det blir enkelt att läsa, oavsett skärmstorlek?
En tjänst för att ta hand om växtområden har en hjälpsida som inte är anpassad för mindre skärmstorlekar. Med mer inspektion går det snabbt att se att det saknas hierarki. En ordning i hur informationen presenteras.
Med hjälp av den ökända boxmodellen och vanliga UI-mönster kunde jag transformera den ursprungliga designen på desktop och mobil till något mycket lättare att ta sig igenom.
Hur såg det ut?
Den ursprungliga designen är monokrom. Det mixas rätt fritt med olika mängder kolumner och text går utanför viewporten på mobil. Och hur gör man den bättre?
Sätt hiearkin
Hierarkin i det här fallet handlar om att samma typer av content visas på olika sätt. Se brödtexterna och de olika sektionerna om statistics och troubleshooting. Det ska vara konsekvent. Mönster gör det lättare att skanna sidan efter det man är ute efter. Länkarna i FAQ-sektionen som ger popups kan istället bli dropdowns, som ger lättare övergångar.
Applicera bättre boxmodell
På mobil rör sig information utanför viewporten. Det gör att man är tvungen att sidscrolla mycket för att kunna läsa innehållet och det skriker dålig UX. Efter att ha satt hierarkin och boxat in allt content, blev resultat detta:
Mycket snyggare än vad det var från början. Och snyggare kan det bli om vi använder oss av en sjysst färgsättning.
