Gränssnittsutveckling. Grafisk design av användargränssnitt

Innehållsförteckning:

Gränssnittsutveckling. Grafisk design av användargränssnitt
Gränssnittsutveckling. Grafisk design av användargränssnitt
Anonim

Design är en möjlighet på kort tid med ett minimum av verktyg för att ta reda på hur effektivt den eller den lösningen fungerar, eller förmågan att hitta den. Det låter dig förstå om rätt produkt skapas, om den kommer att vara användbar för kunderna och hur man kan göra den bättre. Men bakom varje design bör det finnas analys och design.

Där designen börjar

Att designa ett användargränssnitt börjar med frågan om vad det är till för och vem som ska hantera det. En bra designer tar alltid en kritisk titt på verkligheten omkring sig och gör något inte bara för processen, utan eftertänksamt, av någon anledning. Korrekt gränssnittsdesign är processen att hitta lösningar på användarproblem. Deras erfarenhet av interaktion (UX) påverkar beslutet att köpa eller utföra en annan konverteringsåtgärd och kan få dem att överge även en högkvalitativ produkt. Gränssnittet löser också affärsproblem, för hur bekvämt det är för demnjuta av kunder, beror på företagets vinst.

hanterad gränssnittsutveckling
hanterad gränssnittsutveckling

Pyramid av produktbehov

Designer Maxim Desytykh föreslog en modell av de viktiga komponenterna i alla produkter, oavsett vem den är avsedd för. Han kallade det "Produktbehovspyramiden". Det kan användas i utvecklingen av användargränssnittet. I hjärtat av denna modell är det viktigaste utvärderingskriteriet prestanda. Om en produkt inte fungerar, oavsett hur attraktiv den är, kommer den inte att lyckas.

Pyramidens andra steg är ändamålsenlighet. Om produkten fungerar måste den användas till något och lösa användar- och affärsproblem, samt vara funktionell. Det vill säga, om liknande produkter på marknaden har vissa funktioner, men den som utvecklas inte gör det, kommer det att bli olönsamt. Nästa steg i pyramiden av produktbehov är produktivitet, hastighet jämfört med konkurrenterna. Om det är mindre än konkurrenternas, kommer produkten att användas mindre villigt. I toppen är estetiken, eftersom en attraktiv men icke-fungerande webbplats eller applikation inte kommer att intressera konsumenten.

GUI
GUI

Användarberättelser och scenarier

När man utvecklar grafiska gränssnitt används begreppen användarberättelse och användarscenario. Den första termen avser ett sätt att beskriva kraven på en designad produkt i form av flera meningar. Den andra är en detaljerad beskrivning av möjliga beteendenanvändaren när han interagerar med gränssnittet. De behövs för att skapa rätt produkt. Till exempel, när man designar ett formulär på en webbplats måste designern förstå hur många fält den ska ha, vad som kommer att räcka och vad som kommer att vara överflödigt. Det är vad ett anpassat skript är till för. Ett exempel på ett bra alternativ är några rader med en detaljerad beskrivning av de förväntade användaråtgärderna och olika reaktioner av gränssnittselement på dem. Men det är viktigt att komma ihåg att det inte kommer att vara möjligt att skriva ner alla användarskript innan produkten lanseras.

utveckling av programmeringsgränssnitt
utveckling av programmeringsgränssnitt

Utveckla ett hanterat gränssnitt

Möjligheten att självständigt ändra gränssnittet till användarens behov finns i produkterna från företaget "1C". Till exempel, i 1C:Enterprise 8.2-systemet, med hjälp av de inbyggda utvecklingsverktygen, kan administratören programmera formulär, optimera interaktionen mellan klient- och serverdelar och förfina plattformen. Applikationslösningar är tillgängliga inte bara i det lokala nätverket, utan även via Internet, om kommunikationskanaler med låg hastighet används.

Utvecklingen av gränssnittet i 1C sker med hjälp av ett inbyggt språk, tack vare vilket användaren dynamiskt kan bygga om sina delar och skapa sina egna algoritmer för databehandling. Strukturen definieras av en uppsättning kommandon arrangerade i en viss sekvens. Systemet har inga begränsningar för antalet häckningsnivåer. I processen att utveckla ett gränssnitt i 1C 8.3 finns det en mekanism för att konfigurera programmet beroende på användarens åtkomsträttigheter ochlagtillhörigheter. Administratören kan konfigurera användarrättigheter och synlighet för vissa objekt för olika grupper, och användaren har själv tillgång till ytterligare inställningar med tillstånd från administratören.

Psykofysiologi för perception av gränssnitt

I processen att designa och utveckla gränssnitt är det viktigt att ha en god förståelse för psykofysiologin i mänsklig perception. Kvaliteten på den framtida produkten beror på denna kunskap. För närvarande vinner den så kallade energiteorin i popularitet, som säger att hjärnan försöker spara sina egna resurser så mycket som möjligt. Den livnär sig på högraffinerade kolhydrater, beredda på ett speciellt sätt. Endast sådana kolhydrater kan tränga in i hjärnan och ge den näring. Denna resurs är mycket dyr och värdefull, så energi bör inte slösas bort. När det finns en möjlighet att inte aktivera vissa neuroner försöker hjärnan att inte göra det. Därför, i processen att lösa problemet, hittas den minst energikrävande lösningen. Om hjärnan lyckats klara av det frisätts tillfredsställelsehormonet - dopamin. Detta är viktigt att tänka på när du utformar gränssnitt.

utveckling av användargränssnitt
utveckling av användargränssnitt

Magiska siffror 7±2 och 4±1

På 1920-talet genomförde psykologen George Miller ett experiment i Bell Labs där grupper av människor löste vissa problem med ett annat antal föremål. Som ett resultat visade det sig att ju färre objekt som används, desto mer effektivt löses uppgiften. Efter att ha granskat resultaten av studien, MillerHan härledde regeln att 7 ± 2 objekt är det maximala antalet som en persons korttidsminne kan ta emot. Hjärnan börjar undvika stora mängder för att spara resurser. För inte så länge sedan dök en ny studie upp som säger att det inte borde finnas 7±2, utan 4±1 objekt.

Skillnaden i hur hjärnan bearbetar objekt

Men det är skillnad i hastigheten på informationsbehandlingen när man arbetar med olika objekt. Enklare bearbetas snabbare än komplexa. Problem med siffror löses snabbare. På andra plats när det gäller bearbetningshastighet kommer färger, på tredje plats bokstäver, på fjärde plats geometriska former. Mycket beror också på motivation. Om resultatet är värt ansträngningen är hjärnan mer villig att anta utmaningen. Om 7±2-regeln inte observeras under gränssnittsutvecklingsprocessen, går användaren vilse i överflöd av element och vet inte vilka åtgärder som ska utföras först. Han kan vägra att lösa en alltför svår uppgift och lämna webbplatsen eller applikationen.

1s gränssnittsutveckling
1s gränssnittsutveckling

Vikten av att tillämpa 4±1-regeln

Användaren måste lösa många problem i vardagen, så gränssnittet för programmet eller webbplatsen bör inte orsaka honom några svårigheter. Allt måste byggas förutsägbart, logiskt och enkelt. När man utvecklar mjukvarugränssnitt är det nödvändigt att ta hänsyn till den mänskliga hjärnans resurs och inte tvinga den att slösa energi på onödiga handlingar. Korrekt informationsarkitektur och taxonomi, när meny alternativ grupperas på ett begripligt sätt, hjälper användaren att navigera och hitta det de letar efter.

Utvecklaren behöverställ in uppgifter för honom, för vars lösning det räcker att arbeta med ett litet antal objekt, varefter du kan gå vidare. När användaren tittar på sidan väljer han ungefär 5 objekt som han sedan interagerar med. Av dessa väljer han den som snabbt leder honom till målet. Genom att arbeta med föremålet löser han problemet och går vidare. Som ett resultat kommer dess energi att sparas, problemet lösas och användaren kommer att vara nöjd efter att ha fått en trevlig upplevelse av att interagera med produkten. Därför blir gränssnittet bättre genom att tillämpa 4±1-regeln.

GUI utveckling
GUI utveckling

Att använda färg- och storleksuppfattning

Mänsklig perception har flera andra viktiga funktioner som används när man skapar gränssnitt. Till exempel låter kontrastprincipen dig markera viktiga föremål, vilket gör dem tydligare och ljusare. Volymkontrasten får dig att titta på ett större föremål. En stor knapp markerad i färg drar till sig uppmärksamhet snabbare än en liten och obeskrivlig. Knappar med oönskade åtgärder, som att avsluta prenumerationen, är utformade på motsatt sätt. Oskarp bakgrunden bakom och luftperspektiv används för att indikera det viktiga, vilket gör att du kan kontrollera användarens fokus och uppmärksamma ett specifikt objekt.

Färguppfattningsfunktioner används också i utvecklingen av program- och applikationsgränssnitt. Till exempel betyder rött för en person fara. Därför är olika varningsknappar och skyltar som indikerar åtgärder som inte kan ångras färgade på detta sätt. Färg. Gult används för att väcka uppmärksamhet, grönt och orange förknippas med något säkert och naturligt. Men om det finns en stor andel färgblinda användare bland användarna, bör färgkontraster användas med försiktighet. Ett sätt att rikta ögat till en specifik punkt är att lägga till en bild av ett mänskligt ansikte. Sedan barndomen har människor lärt sig att känna igen ansikten och uppmärksamma dem, därför reagerar de alltid på en sådan bild.

Bild och text

I läsningsprocessen aktiveras flera stora områden i hjärnan som ansvarar för igenkänning, men mycket mindre ansträngning krävs för att uppfatta bilden. Därför försöker gränssnittsutvecklare ersätta text med bilder eller ikoner. Applikationsutvecklingsgränssnitt består ofta i sig av ikoner och andra visuella element. Den önskade sekvensen för att läsa information av användare kan ställas in med hjälp av korrekt valda bilder. Men det finns ett problem med piktogram - inte alla kan dechiffrera deras betydelse korrekt utan en inlärningsprocess.

gränssnitt för applikationsutveckling
gränssnitt för applikationsutveckling

Ikonen med en diskett, som innebär att man sparar ändringar, används fortfarande i vissa program, men bilden av ett moln eller ett moln med en pil har blivit vanligare. Därför, vid den första iterationen av produkten, måste nya piktogram signeras, som förklarar för användaren vilken åtgärd som kommer att följa dem. Sedan, för användare som misslyckades med att lära sig i det första steget, läggs en signatur till i den nya versionen av produkten, men i en mindre storlek. PÅslutprodukten, när ikonen har blivit bekant, kan bildtexten tas bort. Dessa ikoner sparar utrymme och känns snabbare igen av användarna, vilket är särskilt viktigt för mobilapplikationer och responsiva webbplatser.

Textläsbarhet

Kontrastregler är viktiga inte bara för grafiska element, utan också för textinnehåll. Bokläsare har till exempel ett speciellt nattläge som låter dig göra bakgrunden svart och texten vit. Tack vare detta, i kvällsbelysningen, blir ögonen mindre trötta av den ljusa skärmen. Samma princip används av programmerare i processen att skriva kod. Med färgkodning känner ögat igen fler nyanser på en mörk bakgrund, speciellt det röda och violetta spektrat. Korrekt typografi hjälper till att spara hjärnresurser och läsa text snabbare. Förr trodde man att folk var bättre på att läsa serif-typsnitt, men enligt ny forskning är det nu mer sannolikt att folk läser ett välbekant typsnitt, oavsett om det är seriferat eller sans serif.

Efter att ha utvecklat konceptet, designat och skapat prototyper är det sista steget av gränssnittsdesign testning. Efter att ha klarat testerna startas projektet.

Rekommenderad: