Så här använder du UI-designmönster
Designmönster är optimala lösningar på vanliga designproblem. Som vanliga problem kastas kring ett samhälle och löses upp, uppstår vanliga lösningar ofta. Så småningom stiger de bästa av dessa ovanför din själv, identifierar sig och blir raffinerade tills de når statusen för ett designmönster.
Jag skulle inte kalla en designpatern en trend i webbdesign, designmönstren verkar mer om att titta på hur vanliga mönster klassificeras i efterhand, istället för att smida nytt territorium eller titta på var saker är på väg.
Hur ska du närma dig UI-designmönster?
Vi använder hela tiden designmönster, om du inte är bekant med dem har du förmodligen inte insett att de är runt omkring dig.
Vad sägs om det klassiska exemplet på att ha för mycket innehåll att visas på en sida? Vi uppmärksammar "Tabs", ett designmönster som gör det möjligt för oss att betjäna allt innehåll vi vill ha, utan att användaren försvinner i ett hav av länkar.
De typiska fördelarna med att använda ett designmönster är:
- visar nybörjare hur man använder bästa praxis i webbdesign
- lära sig att anpassa sig till kollektiv förståelse för designers;
- möjliggör bättre kommunikation, reducerar risken i samband med okända val,
- Minskar den nödvändiga tiden och kostar arbetsflödet för att utföra specifika uppgifter.
- undviker bortkastad tid på att bygga något som tidigare har byggts
- ger användaren en upplevelse som han är bekant och erfaren med (designmönstrenas natur).
I ovanstående exempel ser vi Clicky Media med två mycket populära designmönster idag:
- Navicon - en universell symbol för menyn, så kallad sidnavigering, blir alltmer populär i modern webbdesign, men har redan blivit fullt anpassad till mobila enheter.
- Parallax Scrolling - ett unikt designmönster som möjliggör en sida för webbplatsen, med en lättanvänd rullande mekanism, men innehåller också en lista med bakgrundsprites som ger sidan en livlig känsla.
Även om både Navicon-menyn och den allmänna menyn överst på sidan delar liknande val - det skulle vara väldigt distraherande att inkludera alla länkar i samma rubrikrad - det blir klart att små val kan göra stor skillnad.
Här är vad du behöver tänka på när du utvärderar ett designmönster och anpassar det till dina egna behov:
- Problemsammanfattning: Vilket användarproblem löser du? Håll dig fokuserad och formulera den som en användarberättelse - bara i en mening.
- Lösning: hur har andra löst det här problemet? Några detaljer kan innehålla användarnavigering (inklusive genvägar), få användarinmatningar, hantera data och integreringar med andra tjänster eller applikationer och visa information och innehåll (inklusive standardinställningar).
- Exempel: bra, kan du visa mig? Ibland är en skärmdump eller mockup tillräcklig; andra gånger är användarflöden och / eller ytterligare anteckningar nödvändiga för att tydligt kommunicera mönstret.
- Användning: När ska detta mönster (inte) användas? Några saker att göra i detalj är produktarkitektur, gränssnittslayout, enhet (er), programmeringsspråk, frånvaro eller existens av andra designmönster, typ av användare och primära användningsfall.
Det krävs övning och disciplin att tänka på mönster på detta sätt om du inte har gjort det ännu. Ta dig tid att svara på dessa frågor när du designar din produkt, eftersom det kan hjälpa dig att spara mycket tid med refactoring på vägen när dina användare och team frågar om liknande uppgifter.
Uppkomsten av UI-verktyg
UI-designmönster har alltid handlat om att underlätta för användaren att navigera på din webbplats, applikation eller system. Om användaren lär sig hur man skickar in en kommentar för första gången är chansen att han omedelbart vet hur man skickar ett mail via kontaktformuläret, det är samma repetitiva begrepp informationsinmatning.
Under de senaste åren har vi sett en enorm tillväxt på UI-verktyget. En UI verktygslåda kan helt enkelt förstås som en uppsättning widgets som låter dig bygga en helt grafisk applikation från början. Twitter Bootstrap är ett perfekt exempel på ett framgångsrikt användargränssnitt. Idag kommer en stor del av webbdesigners att förlita sig på Bootstrap-funktioner för att underlätta sitt eget arbetsflöde. På ett visst sätt är det inte nödvändigt att återuppfinna hjulet!
3 UI designmönster att komma ihåg
Kort sagt är designmönster lösningar på återkommande problem. Genom att använda mönster kan vi övervinna enkla användargränssnittsproblem. Om vi ägnar stor uppmärksamhet märker vi att mönster är runt omkring oss. Det finns inget speciellt med den specifika designen, det är det sätt det har applicerats på att du är glad över!
Crystal Clear Calls-to-Action
De enklaste webbformulären (och även de vanligaste) har vanligtvis bara en enda funktionsknapp: i detta fall Skapa webbsida. Det är ganska självförklarande, vilket är poängen.
Hur mycket lättare kan det bli, eller hur? Alltid gå för det lätta alternativet, återuppfinna inte hjulet för att sticka ut från mängden.
Breadcrumbs till undsättning
Breadcrumbs visar sökvägen från webbplatsens hemsida till den aktuella platsen för användaren på webbplatsens sidhierarki. De är en form av sekundär navigering som hjälper användarna att förstå webbplatsens hierarki och struktur. Breadcrumbs börjar med hemsidan och slutar med den sida som visas för närvarande.
I det här exemplet av Priser Farhan, vi ser hur han använder två UI-designmönster samtidigt. Först har han flikarna mönstret på toppen, och andra brödmjölknavigeringsmönstret på botten. Genom att kombinera dem tillsammans skapar han en mycket trevlig surfupplevelse.
Registrering ska vara lätt
Om du inte har bott under en sten, kommer du att vara medveten om social registrering. Registrering till en webbplats är en vanlig sak att göra, och det borde göras så enkelt och trevligt som möjligt.
Detta är en av mina favoritregistreringssidor för tillfället. Det är GitHub hemsida, och som du kan se i skärmdumpen allt som företaget står för presenteras i mindre än hundra ord. Du har också möjlighet att registrera dig på språng, och processen tar mindre än en minut att slutföra. Du får ett e-postmeddelande för att verifiera ditt konto, men det är något vi är vana vid ändå!
Slutord
Jag har byggt webbplatser för över åtta år och under de åtta åren har jag insett att enkelhet är nyckeln till många designproblem.
Jag har kommit fram till att röran i design, uppblåst med onödiga element och former är den mest frustrerande upplevelsen du kan hitta på webben. Ja, design är exakt hur något fungerar, så varför inte fungera ordentligt? Användargränssnittet (UI) är oerhört viktigt för framgången för ditt företag eller företag.
Det bästa sättet att se till att du utformar framgångsrika webbplatser är att lära av och utnyttja befintliga designmönster.