att landa ett jobb som UX-ingenjör är tufft, men det är inte omöjligt. Den här listan skapades för att hjälpa dig att begränsa ditt fokus och behärska de färdigheter du behöver för att bli UX-ingenjör 2020. Förstående, denna lista kan vara lite överväldigande för alla som just har börjat. Av denna anledning är listan uppdelad i två delar:

  • UX design Skills Front-End Engineering Skills
  • Om du är helt ny på något av fälten rekommenderar jag att du fokuserar på en lista i taget. På detta sätt kan du fortfarande landa ett fantastiskt jobb och tjäna en inkomst när du bygger upp dina färdigheter från den andra listan.

    UX ingenjör jobb

    UX/UI och Frontend
    jobbsökare

    hitta jobb

    UX design färdigheter i världen av webbutveckling är UX-design kritisk. Medan front-end tekniska färdigheter är nödvändiga för att bygga snabba och skalbara produkter, är det UX-designfärdigheterna som säkerställer att dessa produkter inte är slöseri med ansträngning. Utan viss kunskap om ux-design kan du spendera veckor eller månader på att bygga en produkt som ingen vill ha. UX-design hjälper till att ta bort tvivel, så att du kan bygga produkter som människor faktiskt tycker är användbara.

    #1 – empati empati är kärnan i ux-design. Du behöver förmågan att sätta dig själv i användarens skor för att designa produkter de kommer att älska. Lyckligtvis är empati inte en svår färdighet att utveckla. Om du förstår varför vissa produkter gör dig lycklig och varför vissa produkter frustrerar dig, är du halvvägs där!Empati i Design: Hur fungerar det?Utvecklare kan ibland kämpa med empati eftersom UX-förbättringar kan verka mindre jämfört med” kostnaden ” för att implementera dem. Om detta är du, motstå frestelsen att sätta din egen bekvämlighet över användarens tillfredsställelse. Skär inte hörn. Ha empati. Börja med användarupplevelsen och arbeta bakåt.

    # 2-problemlösning

    problemlösningsförmåga är viktiga för både ux-design och front-end-teknik. Jag skulle dock hävda att det är ännu viktigare för ux. Varför? Eftersom majoriteten av ux-problem är unika och specifika för din egen användares behov. Det är ofta mycket lättare att hitta svar på programmeringsfrågor än för ux-problem.Med detta i åtanke behöver du förmågan att komma med kreativa lösningar för olika problem. Med empati och problemlösningsförmåga kombinerat kan du börja förstå dina användares smärtpunkter och utforma verkliga lösningar för dem.

    #3-Observation

    som nämnts är majoriteten av ux-problemen unika, men inte alla. Att ha angelägna observation färdigheter kommer att spara många huvudvärk på vägen. Denna färdighet är särskilt användbar för” design ”- delen av ” ux-design.”Dina användare är över hela webben. De använder sociala medier, läser bloggar, tittar på YouTube-videor. Om de gör det, då borde du göra det också.Observationsförmåga hjälper dig att upptäcka mönster och komma före dina användares förväntningar när trender blir den nya normen.Relaterad: bra UX = Boring UI. Var inte Kreativutan stora observationsförmåga är det svårt att hålla jämna steg med den snabba webbutvecklingsindustrin.

    # 4-marknadsföring personligen tror jag inte att den här nämns tillräckligt. På många företag arbetar UX-Designers nära marknadsavdelningen. Som UX-designer bör du åtminstone ha en grundläggande förståelse för vad marknadsföring är och hur det fungerar. Begreppet marknadsföring har i allmänhet en lång historia av att spåra kundens behov och smärtpunkter. Det finns mer crossover mellan marknadsföring och ux-design än du kanske inser, särskilt i dagens teknikdrivna world.At i slutet av dagen måste du tillfredsställa användare och den som undertecknar din lönecheck. Genom att investera lite tid att lära sig marknadsföring färdigheter, kommer du bättre positionera dig att ge värde för dina användare och ditt företag.

    # 5-UX Research & intervjua

    på många företag är ux research en helt separat roll från ux design. Det betyder dock inte att du är av kroken. Det finns inget sådant som ux-design utan ux-forskning, så du kommer inte att komma långt utan att lära dig det. För att grundligt förstå ux-forskning behöver du en examen i Människa-datorinteraktion eller ett relaterat område. Men som UX-ingenjör tror jag att du kan klara dig utan examen.Om du lär dig att samla in kvalitativa data från användare utan att äventyra resultatet, har du i princip det mesta av den skicklighet du behöver för att utföra ux-forskning. Den underliggande färdigheten här är din förmåga att skilja dig från dina mönster. Du måste vara medveten om dina egna fördomar och lära dig att designa objektivt. Lär dig detta och du kommer att vara bra att gå.

    # 6-statistik & Data Analytics

    medan statistik och dataanalys passar under paraplyet ”UX Research” tror jag att det finns tillräckligt med skillnad för att kalla dem separat här. Att utnyttja kvantitativa data är ett mycket kraftfullt sätt att förstå hur dina användare interagerar med din produkt. Har höga studsfrekvenser? Du kan behöva ompröva din navigering. Lämnar användarna din sida efter några sekunder? Kanske tar sidan för lång tid att ladda. Det här är bara några mätvärden som Google använder för att bestämma din webbplats övergripande användarupplevelse. Om Google är uppmärksam på dem, bör du vara too.As Googles VD, Eric Schmidt uppgav:

    världen kommer att ärvas av statistiker

    tyvärr kan dataanalysprogramvara bara få dig så långt. Du behöver en större förståelse för statistik, utöver att beräkna medelvärden för att hjälpa dig att fatta datadrivna beslut som UX-ingenjör.

    # 7-UI Design Tools

    Nu kommer vi äntligen till” design ” – sidan av saker. En av de största aspekterna av ux-design är att skapa wireframes, mockups och prototyper. Dagens mest populära UI designverktyg är Sketch och Figma. Jag har faktiskt aldrig använt någon av dessa (nämnde jag att tekniken rör sig snabbt?), men om jag skulle välja mellan de två nu skulle jag välja Figma.Aj &Smart gör en bra (och rolig) jämförelse i den här videon. Det är värt klockan.

    #8 – UI-designprinciper

    kanske har du märkt att ”ux” och ”ui” vanligtvis paras ihop? Det beror på att de båda är viktiga för den övergripande användarupplevelsen. UX-forskning hjälper dig att identifiera och lösa specifika designproblem, men det hjälper dig inte att skapa en vacker design. För det måste du förstå ui-designprinciper och hur du använder dem effektivt.Det finns vissa, universella ”sanningar” om design som varje ux-designer borde veta. Om du har bra observationsförmåga (#3 på den här listan), har du förmodligen plockat upp några ui-designprinciper utan att ens inse det. Några av dessa principer inkluderar balans,anpassning, kontrast etc.Din UI är en duk och du är konstnären. Att tillämpa ui-designprinciper är skillnaden mellan att göra ett mästerverk och göra något att hålla fast vid ditt kylskåp. Det gör verkligen en stor skillnad. Om din UI-design saknar märket kommer folk att märka och sakna förtroende för ditt varumärke.Relaterad: UX Design & UI Design. Varför behöver vi båda? #9 – Interaktionsdesign med tidigare skicklighet, ui-designprinciper, har du att göra med utseendet på enskilda webbsidor eller funktioner åt gången. Med interaktionsdesignfärdigheter, å andra sidan, du måste ta ett steg tillbaka och förstå hur den sidan eller funktionen knyter till ”helheten.”Som namnet antyder handlar interaktionsdesign om att styra interaktionen mellan din produkt.Utan interaktionsdesign kommer din produkt att känna att den saknar något. I Googles materialdesignspecifikation är till exempel målet att behandla element på din sida som om de finns i den verkliga världen. Detta innebär att objekt som rör sig på sidan bör påskynda eller sakta ner som om de följde fysikens lagar.

    #10-skriva & kommunikation

    skriv-och kommunikationsförmåga är viktiga för de flesta karriärer, men de är särskilt viktiga för ux-designers. Du kommer sällan att utforma gränssnitt som inte kräver text, ikoner eller bilder i syfte att kommunicera. Det betyder att du måste lära dig hur du kommunicerar ett meddelande så kortfattat som möjligt.Att skriva effektiv kopia är inte så lätt som det låter. Läsbarhet och förståelse är en vetenskap. Det är viktigt att du lär dig hur du talar publikens språk, men ännu viktigare, engagera dem med din kopia. Ett misstag som är lätt att göra är den avslappnade användningen av stora ord som kan vara svåra för publiken att förstå. Gör inte det misstaget. Ditt jobb är att kommunicera effektivt, inte att imponera läsare med din kunskap. Front-End Engineering Skills

    det har aldrig varit en mer spännande tid att vara en front-end ingenjör. Dagens webbutvecklingsindustri blomstrar med innovation. Nya verktyg och resurser skapas varje dag för att göra våra jobb enklare. Men dessa verktyg och resurser kommer också med en inlärningskurva. Om du är redo att komma igång med front-end engineering, kommer nästa 10 färdigheter vara avgörande för dig att komma dit.

    # 11-HTML, CSS, & JavaScript

    webblandskapet har förändrats dramatiskt sedan början. Dagens front-end ingenjörer förväntas känna till Verktyg, metoder och bästa praxis som inte ens fanns för några år sedan. Saker rör sig så snabbt. Som front-end ingenjör behöver du ständigt lära dig nya färdigheter för att vara relevant.Eller gör du?I allmänhet, ja du kommer alltid att lära dig. Grunden för webbutveckling har dock alltid varit densamma. Kärnan har vi alltid haft HTML, CSS och JavaScript. Lär dig dessa saker och lär dig dem bra. Något ytterligare du lär dig kommer att byggas ovanpå dessa tekniker ändå (för det mesta).Det kommer alltid att finnas en ny och spännande ram eller bibliotek. Om du inte har en förståelse för vanlig ol’ HTML, CSS och JS, bör du inte köpa in det senaste ramverket förrän du gör det (enligt min mening). Genom att förstå ins och outs av JavaScript, till exempel, Du kommer att få mycket längre på lång sikt, sedan om du hoppade rakt in lärande reagera idag. Om några år kommer en ny ram att komma och du kommer att bli svårt att lära dig den också. Spara dig själv huvudvärk och lär dig att skriva vanlig HTML, CSS och JS först.Relaterat: Designers bör lära sig att koda (bland annat)

    #12-semantisk HTML & tillgänglighet

    HTML används för att beskriva din sida till webbläsaren, liksom personer med funktionshinder. Det är inte ett designverktyg. När du har lärt dig grunderna i HTML vill du dyka in i semantik och tillgänglighet. Du lär dig att HTML är mer än att bara förpacka allt i en <div> tagg.Semantisk HTML handlar främst om att uttrycka” betydelsen ” av en webbsida. Genom att använda ett <nav> – element, till exempel, berättar du i huvudsak webbläsare där din navigering finns. När webbläsare blir smartare blir semantisk HTML allt viktigare för utvecklingen av webben.Att göra dina produkter tillgängliga för personer med funktionshinder är också mycket viktigt. Om du har plockat upp skicklighet # 1 på den här listan (empati), kanske du är medveten om riktlinjerna för webbinnehåll tillgänglighet (WCAG)? Om inte, bör du lära dig dem. Din produkt är inte riktigt användarvänlig förrän den är tillgänglig för alla.

    # 13-CSS-ramverk, arkitektur, & preprocessorer

    När du har spenderat lite tid på att lära dig CSS börjar du uppskatta behovet av ramar, metoder och preprocessorer.Beroende på din situation är Bootstrap ett bra CSS-ramverk för att snabbt få stilar på din webbplats. Men om projektet kräver något mindre ”Bootstrappy”, är det sannolikt att föredra att skriva din egen CSS från början (tillbaka till grunderna). Som UX-ingenjör kommer Prestanda också att vara en viktig faktor att tänka på för dina produkter. Att använda Bootstrap ur lådan kan ha nackdelar när det gäller prestanda.Att dra nytta av en CSS-Preprocessor, som Sass, är bra av olika skäl. Mest av allt, de gör CSS mycket lättare att skriva genom att låta dig bo stilar inom varandra för att skapa specificitet. Det finns också några andra coola funktioner, till exempel användning av variabler och mixiner. I modern tid hittar du inte många front-end-ingenjörer som inte använder en förprocessor för att förenkla processen.Om du skriver dina egna stilar från grunden är det mycket användbart att anta en CSS-arkitektur för att hålla din kod organiserad. Jag har bara använt skalbar och modulär arkitektur för CSS (SMACCS), vilket är bra, men nyligen lärt mig om några andra CSS-metoder. Det är lätt för din CSS att komma ur kontroll om du inte har en bra organisationsstrategi. Det är definitivt värt att anta en CSS-arkitektur för din utvecklingsprocess.Relaterad: CSS specificitet: hur man undviker att använda !viktigt i CSS

    #14-responsiv Design

    responsiv design är inget nytt längre. Det är nästan synonymt med webbdesign vid denna tidpunkt. Ändå är det fortfarande viktigt att lära sig att redogöra för många olika enheter och skärmupplösningar med dina mönster. Att inte lära sig responsiv design är ett snabbt sätt att lämna hälften av dina användare ur ekvationen, vilket uppenbarligen skulle leda till en dålig användarupplevelse.Vi är i en mobil värld nu. Mobil går inte någonstans. Lär dig hur du designar för mobil, surfplatta och skrivbord och du kommer att vara bra att gå.

    #15 – JavaScript-ramar JavaScript-ramar är viktiga eftersom programmering är dyrt. Ramar som jQuery, Angular, Vue och React skapades för att påskynda utvecklingen och göra mycket av det tunga lyftet för dig. Av denna anledning har företag inga problem med att anta JS-ramar eftersom det sparar dem pengar på lång sikt.Naturligtvis finns det fler JavaScript-ramar än du kan räkna med två händer. De försöker alla lösa ett annat problem. Det skulle vara värt att förstå vilka ramar som finns där ute. Det skulle också vara värt att lära sig minst ett JavaScript-ramverk för att hjälpa dig med din webbutveckling. React verkar vara det mest populära valet just nu, men det kan lätt förändras om några korta år.

    # 16-Backend utveckling

    Front-end utvecklare arbetar med backend utvecklare ganska nära. Jag föreslår inte att du ska bli en full-stack ingenjör (även om det skulle vara ganska imponerande). Jag föreslår dock att det skulle vara värt att lära sig tillräckligt om back-end-utveckling för att bättre engagera sig i din back-end coworkers.At i slutet av dagen kommer du förmodligen att bestämma vilka data som behövs för att stödja dina projekt. Att ha en anständig förståelse för back-end-utveckling kommer att bidra till att främja den kommunikationen och säkerställa projektframgång.

    #17-testning & felsökning

    testning och felsökning är avgörande för alla som arbetar med front-end-kod. Det finns många olika sätt att ”testa” din produkt, men den typ av testning du gör oftast kommer att vara i webbläsaren och JavaScript-testning.Chrome ’ s Developer Tools (Dev Tools) är ett mycket kraftfullt och praktiskt verktyg. Dev Tools kan du snabbt göra ändringar i din HTML / CSS och se hur det gör på sidan. Konsolen låter dig se när du har fel i JavaScript. På fliken Nätverk kan du se hur snabbt filer återges och i vilken ordning. Det finns mycket mer det kan göra också. Om du precis har börjat med front-end-utveckling kommer du snart att inse hur fantastiska Dev Tools verkligen är is.To se till att din webbplats ser bra ut i alla webbläsare och enheter, du måste testa dina ändringar överallt. Browserstack är en super praktiskt verktyg för denna typ av testing.In Test Driven Development (TDD), ditt JavaScript måste testas för att säkerställa att du täcker alla dina baser. Verktyg som Karma hjälper dig att komma igång med att bygga tester runt din kod.

    #18 – pakethanterare (NPM) pakethanterare, som npm, har blivit en nödvändighet för modern front-end-utveckling. De gör livet enklare. Med explosionen av resurser, ramar, bibliotek etc. till hands, det börjar bli ganska smärtsamt att hantera dem alla…..om du inte använder en pakethanterare.Lärande npm kräver att du använder kommandoradsgränssnittet (CLI). Det är inte så läskigt som det låter. Det finns gott om handledning online som kan hjälpa dig när du är redo att införliva pakethanterare som en del av din webbutvecklingsprocess.

    #19-byggverktyg

    förutom npm behöver du också veta om byggverktyg, till exempel Modulbuntare, Uppgiftslöpare och Linters. Dessa verktyg har olika syften men är viktiga för modern webbutveckling.Modul Bundlers, såsom WebPack skapades för att hjälpa dig att spåra din modul beroenden mellan filer och bunta ihop dem till en resurs. En av de största fördelarna med att använda ett verktyg som WebPack är begreppet ”Trädskakning”, vilket förhindrar att oanvända resurser laddas onödigt.Uppgiftslöpare, som Gulp, låter dig köra verktyg som WebPack och Sass. De är användbara eftersom de kan titta på förändringar i dina Sass-eller WebPack-filer och bygga om utmatningen automatiskt. Att lära sig att använda en uppgift löpare kommer definitivt att bidra till att öka din productivity.As du arbetar med ett team av andra front-end ingenjörer, är det viktigt att se till att du följer en stilguide för JavaScript-kod. Det är här linters, som ESLint, kommer till nytta. Linters kan du ange regler, om avstånd, syntax,namngivning etc. i din kod. När du bryter mot dessa regler kommer din linter att meddela dig. I huvudsak är linters ett användbart sätt att säkerställa kvalitet och konsistens för en delad kodbas.

    #20-versionskontroll

    alla gör misstag. Lyckligtvis finns det versionskontroll för det. Som front-end-ingenjör är det viktigt att lära sig att använda versionskontroll, till exempel Git eller Team Foundation Server (TFS). Versionskontroll gör att du kan förgrena dig av din produktionskod (i huvudsak skapa en kopia av den) och göra ändringar utan att behöva oroa dig för att förstöra saker utan reparation. Men när saker går fel, till exempel en dålig distribution, är versionskontroll där för att spara dagen genom att låta dig rulla tillbaka dina ändringar till den tidigare versionen.

    är du redo att bli UX-ingenjör?

    Så där har du det: De 20 färdigheter du behöver för att bli UX-ingenjör 2020. Jag hoppas att du har hittat den här listan användbar när du arbetar för att förbättra dina färdigheter. Om du är redo att bli UX-ingenjör, kolla in jobs board!

    Om du är intresserad av att lära dig mer om UX Design eller Front-End Engineering, överväga att prenumerera på UXE Weekly och få en ny artikel om UX Engineering varje vecka!

    bli en enhörning

    få artiklar om UX/UI Design + Front-end utveckling

    det är gratis – Ingen spam – Opt ut när som helst

    dela via: