Affordance är en term som ursprungligen gjordes av en psykolog, JJ Gibson, på 1970-talet. Han definierade det som förhållandet mellan en miljö och en skådespelare. Idag sträcker sig rådgivning utöver beteende- eller kognitiv psykologi och in i utformningen av digitala gränssnitt. Förståelse av kostnader ger dig möjlighet att bättre förstå produkt- och gränssnittsdesign, vilket gör att du blir en mycket bättre designer.
En situation där ett objekts sensoriska egenskaper intuitivt innebär dess funktionalitet och användning. - Crowdcube
Crowdcubes lekman sikt definition är spot on. Alla objekt runt oss har råd, något mer uppenbart än andra. Överkomlighet är möjligheten till en handling med ett objekt; det är inte en egendom för själva objektet. Med andra ord kan en knapp tryckas; möjligheten att trycka på en knapp är dess bekostnad.
Den ursprungliga definitionen som utarbetades av JJ Gibson beskrev alla möjliga fysiska handlingar du kan ta med ett objekt. Över tiden förändrades definitionen. Nu är definitionen bredare och inkluderar upptäckbarhet av åtgärder. Denna förändring har medfört den tekniska utvecklingen av digitala gränssnitt. Upptäckbarhet är ett intressant koncept i det digitala riket, som när man använder en dator, får man upptäcka handlingar genom de tips som ges till dig inom gränssnitten själva.
Ta ett steg tillbaka till den fysiska världen där du ser att föremål har fysiska egenskaper som storlek, form eller vikt som ger tips om vad du kan göra med dem. Här är några klassiska exempel. Låt oss börja med en teacup; Det är litet och har ett handtag som ger innehav. Dess doppade skålliknande form, vilket indikerar att den kan hålla något också. När den håller te är det att du kan hålla teacupen och dricka ur den. Ett annat exempel är en tandborste: den har ett långsamt handtag som ger grepp och så vidare.
Fysiska objekt kan sorteras tre typer av bidrag:
Perceptible affordance är den grundläggande definitionen av affordance, där ett objekts egenskaper indikerar en handling.
Hidden affordance är när ett objekt har affordances som inte är så uppenbara; till exempel, helt enkelt titta på en ölflaska kan du inte berätta att du kan använda den för att öppna en annan ölflaska.
Falsk bekostnad är när det finns en uppfattad förmån; men inga resultat händer från den möjliga åtgärden. Till exempel, genom att trycka på en knapp som inte gör något, som att använda din TV-fjärrkontroll för att slå på TV: n, men det fungerar inte av någon anledning. Ersättningen är fortfarande kvar - du är fri att trycka på den knappen så mycket du vill - men inget händer, det finns ingen funktion.
Digitala gränssnitt är speciella. De tillåter oss att göra saker som är begränsade till en tvådimensionell värld som är en dataskärm. Det finns så många saker vi kan göra inom någon app, hemsida eller program. men de har alla en stor, förödande begränsning: de kan inte ge dig fysiska ledtrådar om vad du kan göra. I stället är alla beroende av visuella ledtrådar eller råd. Det här kan vara väldigt knepigt om du inte förstår den viktiga rollen som affordance spelar för att skapa framgångsrika gränssnitt.
Om du förstår hur affordances fungerar, kommer du att kunna använda dem till din fördel. När du kan göra ett verktyg ett verktyg kan du skapa design som är intuitiva och lätta att använda. Intuitiva mönster har en viss appel till dem - troligen för att vi hittar många webbplatser eller appar som är tråkiga och irriterande - så det är verkligen uppfriskande att använda dem. Dessutom har kostnadseffekter omvandlingar, vilket betyder mycket för att skapa en framgångsrik design.
Om du vill fullt ut förstå hur affordances fungerar i gränssnittsdesign, behöver vi bli specifika. Låt oss göra det nu genom att täcka sex olika typer av budskap som ses inom digitala gränssnitt, inklusive: explicit, mönster, dolda, falska, metaforiska och negativa fördelar.
I likhet med märkbar överkomlighet är uttrycklig rådgivning de tips som avges av objektets språk eller fysiska utseende. En upphöjd knapp som säger "Klicka på mig" är ett bra exempel på både språkliga och fysiska signaler. Knappens upphöjda utseende indikerar möjligheten att klicka och så gör texten "Klicka på mig". Det är självklart.
Språk spelar en så viktig roll för att styra användarna via digitala gränssnitt. Ett inmatningsfält som ber dig om ditt fullständiga namn ger dig möjlighet att skriva in ditt namn. Språk ger tydliga riktlinjer för inte bara vad du ska göra, men också vad du kan göra. Inmatning av bokstäver, som ditt namn, skiljer sig från att ange siffror, som ditt telefonnummer och du kan berätta vilken du kan göra i sammanhanget av texten. Det är dock också viktigt att överväga hur uppenbart ditt gränssnitt är att använda utan tydliga riktlinjer. Din design måste vara användbar och intuitiv utan att hålla din användares hand vid varje steg.
En mönsterkostnad är rådgivning som anges i konventioner. Ett bra exempel skulle vara en logotyp som ligger längst upp till vänster på en webbsida som är klickbar. Det är ett mönster vi ser överallt; så vi förväntar oss det överallt. Text som är en annan färg, ibland kanske understruken eller kursiv, bland oförändrad kroppstext som ett stycke, antas vara en länk. E-post representeras ofta med ett kuvert, medan inställningarna representeras med ett växel.
I dessa exempel kräver e-post inte ett faktiskt kuvert - det har det aldrig - och det krävs inte heller inställningar för att hantera växlar. Det är ett metaforiskt mönster som vi har utsatts för under en lång, lång tid; så det blev en konvention.
Mönster är bra för att kommunicera mentala genvägar, men bara om dina användare är medvetna om dessa mönster. Nya mönster introduceras hela tiden, till exempel är hamburgarens meny ett relativt nytt koncept för menyer och navigering. När du utformar med nya mönster i åtanke måste du se till att dina användare är bekanta med dem. Men när du vet att din publik har tidigare blivit utsatt för dessa mönster har du möjlighet att skapa några fantastiska mönster utan att vara explicit.
Hidden affordance i digitala mönster liknar det för fysiska föremål. I den digitala världen är dock den faktiska överföringen inte tillgänglig förrän en åtgärd har vidtagits för att avslöja den. Till exempel svävar över en knapp för att se om den inte är aktiv, och därför klickbar. Nedrullningsmenyerna är ett annat exempel, där du inte ser menyn om du inte svävar eller klickar på förälderlistan.
Hidden affordances används ofta för att förenkla den visuella komplexiteten hos en design. I nedrullningsmenyn exempel använder vi nedrullningen för att dölja alla navigeringsalternativ, eftersom det finns för många för att visa allt på en gång. Om en användare vill navigera någonstans, måste de hitta den i rullgardinsmenyn. Nu är en stor nackdel med dolda erbjudanden att de kräver att användaren ska hitta råd och samtidigt ge dem inga tips om deras existens. Du vet inte vad du ska förvänta dig. Det är ett gissningsspel, så att säga, baserat på att hitta dessa erbjudanden när du går.
Falskt budskap i det digitala rummet ger något annat som är oväntat - som att tända dina lampor istället för TV: n med TV-fjärrkontrollen - eller ingen åtgärd alls. Denna typ av rådgivning är över hela webben, oftast av misstag, som en knapp som ser aktiv ut men gör ingenting, en logotyp som inte är kopplad till någonting, orden "klicka här" i texten som inte alls är en länk , eller en röd knapp som gör något bra med en grön knapp som gör något dåligt.
Falsk bekostnad är mest rikligt i mönster där detaljer har blivit missade, som en bruten länksituation. Färger har specifika föreningar med dem. I västvärlden är grön bra medan rött är dåligt. När du byter de två kommer du säkert att förvirra några av dina användare, speciellt när knapparna är sida vid sida. Det betyder inte att du inte kan göra det; men du bör vara försiktig när du gör det. Du vill inte ha några falska erbjudanden inom din design om du kan hjälpa det. Du borde inte överraska dina användare så.
Skeuomorfismen åberopade kraftigt på metaforiska erbjudanden, som imitationer av verkliga objekt, att kommunicera. Ikoner är underbara exempel på detta: karta, kundvagn eller korg, hem, skrivare, video, mikrofon, telefon mm Ta till exempel e-postkonceptet. Dess rötter är i metaforen av en fysisk bokstav; dess ikon är vanligtvis ett kuvert. Det är ett bra exempel på metaforisk rådgivning runt omkring. Om du designar något och inte är säker på hur du förmedlar det är det alltid bra att gå tillbaka till den fysiska världen, åtminstone för inspiration och utgångspunkt.
Nu behöver du inte gå över toppen som Apples gamla mönster, var för deras spelapp de gjort bakgrunden till en grön poolduk. Men jämföra det med deras nuvarande Games app icon som bara är några bubblor. Vad har de att göra med spel? Jag vet inte, metaforen är inte längre där. Oavsett om det är bra eller inte, är det upp till dig att bestämma. Huruvida metaforen behöver vara där i din design, eller inte, är upp till dig.
Negativ bekostnad kan anses som specifikt indikerar ingen rådighet; Det är när du har en inaktiv knapp eller en knapp som ser inaktiv ut. Den vanligaste förekomsten av detta är när en knapp eller en länk är gråtonad. Nu är här den knepiga delen: Det är inte så att du specifikt försöker berätta för en användare att du inte kan använda den här knappen - även om det kan vara - men att knappen syns att du inte kan använda den, även om du faktiskt kan.
Det finns vissa fall där du vill tydligt ange att du inte kunde göra något. Om en användare till exempel fyller i ett formulär och de inte har fyllt på allt än, kan din knappstatus vara inaktiv eftersom du inte vill att de ska fortsätta än. Men om knappen blivit inaktiv, men aktiv, är det helt enkelt dålig design. Var försiktig med den här.