Inlägg om Front-end-utveckling

Publicerat Tips

Tankar kring användarvänlighet, UX och UI – intervju med Marcus Fridholm på Spinit

Vi pratade design och digitala plattformar med min kollega Marcus Fridholm som jobbar som frontend-utvecklare. Ska webbplatser fungera bra, så krävs också bra design.

Hur förklarar du förkortningar som UX (user experience) och UI (user interface) för någon som inte känner till något om webbdesign?

Om vi börjar med UI, så betyder det användargränssnitt på svenska. Det är hur programmet, eller webbsidan är konstruerad för att du skall kunna göra det du vill. UI i en bil till exempel är saker som ratt, pedaler, växelspak, fönsterhiss och allt sånt. Men på en webbsida handlar det om var knappar och menyer sitter, hur texten ligger och var man letar efter olika typer av innehåll.

Kommer du till exempel in på en tidning, så finns det vissa saker som man tar för givet. Här ligger ofta artiklar tidningen vill lyfta fram extra mycket samlade på ett ställe, tillsammans med dem ligger det ofta annonser. Menyer hittar du längst upp eller till vänster. Effekten blir att de flesta känner igen sig, man kan säga att ”ratten” befinner sig där du tror att den skall sitta.

UX är då en förlängning på allt som har att göra med UI. Det handlar om själva upplevelsen. Hur smärtfritt du navigerar och gör det du vill göra, hur intuitivt det är, hur många manövrar du behöver utföra innan du kommer dit du vill, hur bra återkoppling du får på vad du gjort. Hur väl du får det du förväntade dig.

Ett skräckexempel är till exempel när man går in på en kvällstidning och istället för nyheterna man förväntade sig hamnar på en splash screen. Den innehåller inte någonting av tidningen, utan är bara är ett sätt mjölka så mycket annonspengar som möjligt. Det är inte så att jag inte förstår att de behöver pengarna, men det är inte bra UX. Du bryter på sätt och vis förtroendet mellan dig och besökaren, när besökaren får något annat än de förväntade sig.

Lite på samma sätt, så har många sajter en förmåga att blanda sin egen navigation med annonsnavigation. Klickar du på en länk, så skall du hamna där du förväntade dig att hamna. Om du liksom får hålla tummarna för att du hamnar där du ville och inte mitt i en annonskampanj, så är det riktigt dålig UX.

En annan vinkel på UX är om du köpt något, är missnöjd och vill kontakta kundtjänst. Om kontaktinformationen är dold fyra nivåer ner i hierakin, så är det inte roligt. Eller ännu värre om det krävs att du först går någon annanstans och registrerar sig innan du ens får kontakta företaget, då lär du inte vara på bra humör när du väl får kontakt. Om allt du söker är information eller svar på en undran, så är frågan varför du skall behöva registrera dig överhuvudtaget?

Allt sånt krångel: registrering för att söka info, åtta klick för att skicka en fråga, hopp till externa sajter, programmerade länkningar som förstör din webbläsarhistorik – allt sånt får dig till slut att trötta. Till slut vill du inte mer och försöker lösa ditt problem med Google istället.

När man möter bra UX så är det givet var man hamnar och du hittar lätt det du söker efter. Det absolut bästa betyget en UX-designer kan få är att användarna inte ens tänker på det arbete som lagts ner, utan bara är nöjda.

Har du några tankar om god informationsdesign och hur man gör webblösningar mer tillgängliga?

Vi lider idag av det som pedagogerna kallar snuttifiering. Med det menar jag att vi får en hagelskur av informationsbitar över oss. Problemet är att få människor är konstruerade att hantera den sortens flöde. Vi får för många sammanhang att ta ställning till samtidigt och förmågan att faktiskt ta in information blir lidande.

I vissa kontexter är det OK. Tittar du i ett Facebook-flöde så förväntar du dig mycket information och har nog också lärt dig att sortera bort det mesta som egentligen inte är så intressant.

Om du däremot kommer in på en myndighets hemsida, så vill du verkligen inte ha 14 olika sammanhang att ta ställning till. Där har du ofta en specifik orsak till varför du är på sidan och du vill att myndigheten ska förstå dig som besökare tillräckligt väl för att veta vilka slags frågor de flesta brukar söka svar på.

Om det är en myndighet så är det också deras skyldighet att se till att sidan är anpassad för olika typer av användare. Det kan handla om allt från uppläst innehåll, innehåll på enklare svenska och innehåll anpassad utifrån den kontext du befinner dig i.

Om man tittar på företag, så är de ibland onödigt hemliga med vad de gör. Det är inte supersmart att tvinga dig som besökare att gissa vad företaget sysslar med. Kommer du in på en bilverkstad, så bör det nog stå att ‘vi är en bilverkstad’ redan på första sidan högt upp. Säljer du bildelar, men inte har en verkstad, så får det väl istället stå ’vi säljer bildelar’. Eller ‘vi är konsulter inom marknadsföring’ om det är den tjänsten man erbjuder. Varför krångla till det?

Jag skulle vilja påstå att du har max tio sekunder på dig att förklara vad ni gör. Att vara mystisk gör att man håller kvar några som inte är intresserade av vad man gör och att andra som är intresserade tappar sugen och letar vidare. Varför ska du hålla kvar människor som inte är ute efter det du erbjuder? Gör det tydligt vad det är du håller på med, då hjälper du dina användare och de vet att de har hamnat rätt.

Vad är skillnad på frontend- och backendutveckling?

Oftast så går vårt arbete i varandra, jag gör en del saker som backend-utvecklarna också gör. Men min expertis är närmare det visuella och själva upplevelsen. Deras expertis handlar mer om hur saker fungerar bakom kulisserna. På riktigt stora utvecklingsföretag så är folk lite oftare specialister, medan kompetenserna på ett mindre företag som Spinit går ofta in i varandra. Bredare kunskaper gör oss mindre sårbara.

Är det stor skillnad på hur man designar för olika åldersgrupper?

Douglas Adams skrev ungefär att det som sker innan du fyllt 15, är lika naturligt som luft, vatten och mat, det är så världen fungerar. Det som sker mellan du är 15 och 30 är spännande, det senaste och det hetaste som du bygger din karriär på. Det som sker efter att du fyllt 30 är onaturligt, mot guds lagar och borde förbjudas. Haha, ungefär så är det.

Den största utmaningen med att designa för unga, för folk som är runt 15 till 20, är att de har inte en ”medveten medvetenhet” om hur saker och ting fungerar. För dom är den digitala tillvaron som att andas, de bara gör. Så om du bryter mot de oskrivna reglerna för hur saker och ting ska fungera, så kan du bara göra det till en viss gräns. När du kommer till en ny svårighetsnivå så blir ungdomarna ofta helt handfallna, för de har aldrig medvetet lärt sig hur saker fungerar. De vet inte, men vet inte att de inte vet.

De lite äldre är ofta mer medvetna, men lider lite av problemet som någon som lärt sig ett nytt språk. Den digitala tillvaron är inte deras ”modersmål”, så den kommer inte lika självklart och naturligt.

Sen har vi min föräldrageneration, de som är 75 och uppåt. Rätt många i den generationen vet knappt hur man använder internet alls, de hade helst behållt en stationär telefon och en tjock-tv.

Så nog är det är lite klurigt att designa för flera åldersgrupper.

Hur hittar du vilka trender som gäller inom UI och UX?

Google. Jag söker på olika nyckelord som UI, UX och design, sen lägger jag till nuvarande år och så sållar jag ordentligt och får upp relevant information. Jag hänger på en del forum där teknik och design diskuteras. Jag är inte så aktiv, utan mest där för att hålla koll på hur diskussionen går.

Vilka olika verktyg använder du i ditt jobb som frontend-utvecklare?

Photoshop, Illustrator, Acrobat, Sketch, webbläsare, IDE – programmeringsverktyg för all kodhjälp som jag kan tänkas behöva. Och sen lite webb-baserade verktyg som Toggl, Jira och Git.

Tack så mycket!

Publicerat Personligt

Möt Johannes – med genuint intresse och kunskap om gränssnittsutveckling

Kort intervju med Johannes – en av Spinits nya gränssnittsutvecklare

Hej och välkommen till Spinit. Nu efter ett par månader in i jobbet så är det dags att presentera dig kort här på bloggen.

Hur brukar du beskriva dig själv i ett par meningar?

– Jag är positiv person som gillar nya utmaning och digital design. På fritiden har jag ett stort sportintresse, framförallt att följa fotbollsklubben Arsenal men även spela innebandy.

Vad studerade du innan du började jobba här på Spinit?

– Jag pluggade den 3-åriga utbildningen Grafisk design och webbutveckling på Jönköpings tekniska högskola. Där fick jag bland annat lära mig om webbutveckling, gränssnittsdesign, marknadsföring och informationsarkitektur. Vissa av dessa ämnena hade jag med mig redan får gymnasiet men detta blev på en mer avancerad nivå. Efter utbildningen valde jag att åka till Kanada en termin och studera relaterade kurser. Kanada var spännande och där träffade jag andra studenter från andra delar av världen. Betygssystemet är annorlunda annars är undervisningen där ganska lik som hemma.

Vad jobbar du med nu?

– Just nu jobbar jag med ett ecommerce-projekt som bygger på micro-services och ElasticSearch och där utvecklar jag gränssnitt med React och SASS. Samarbetet fungerar mycket bra i projektgruppen och vi jobbar jobbar agilt. Det är första gången jag arbetar på riktigt med React men det har gått fort och smidigt att komma igång. Det finns alltid många med stor kompetens runt omkring och alltid någon att fråga.

Hur har den första tiden på jobbet varit?

– Väldigt bra! Jag har utvecklats väldigt mycket på kort tid och fått ta eget ansvar. Hela upplägget här är bra med bra mentorskap, så att man alltid kan få hjälp och snabbt bli bättre. Jag har snabbt kommit in i att arbeta i större projekt och känner att jag har fått god användning för de projekt jag genomfört både i skolan och på fritiden.

Har du några tips till dem som pluggar idag som vill jobba som gränssnittsutvecklare i framtiden?

– Om man redan har hittat en bra utbildning har man redan kommit långt på vägen, men utöver det handlar det om att ständigt vilja utvecklas. Testa nya tekniker och lär sig saker även utanför skolan. Om man kollar mer på designbiten tycker jag man lär sig väldigt mycket av inspireras av andra, så börja följa personer du tycker är duktiga på Dribbble, Pintrest, Awwwards med mer. Sedan är det bara designa mycket själv och utvecklas.

Har du något specialintresse inom gränssnittsutveckling?

– Min styrka är att jag är bred inom ämnet, det jag är specialintresserad av är mobila gränssnitt. Intresset grundar sig mycket i en symbios mellan skapande processen och sedan känslan av att blir klar med något så att man kan komma vidare och lära sig nytt.

Vilka tekniker ser du fram emot att lära dig mer om?

– Just nu är det fullt fokus på React och SASS, det finns ingen begränsning i hur duktig man kan bli inom gränssnittsdesign. Framtiden får utvisa vad jag kommer utveckla mig mer i.

Tack!

Publicerat Nyheter, Personligt
Saman Movaghar på Spinit. Porträtt-bild på kontoret.

Möt Saman Movaghar på Spinit – vi pratar grafisk design och frontend-utveckling

I denna intervjun pratar jag med Saman Movaghar på Spinit om hur det är att jobba med frontend-utveckling och design. För tillfället arbetar Saman som konsult på WirelessCar och är engagerad i flera internationella projekt.

Välkommen hit idag!

– Tack så mycket, jag är väldigt glad över att jag kan dela med mig om mina tankar här idag.

Hur beskriver du dig själv i ett par meningar?

– Jag är en person som är intresserad av kreativitet och jag älskar att hitta lösningar på ny design och att utforska nya verktyg. På fritiden tränar jag mycket för att kompensera för att jag sitter still på dagarna.

Hur kom det sig att du började jobba med frontend-utveckling?

– Jag har i grunden en kandidatexamen i grafisk design. För ungefär tre år sen så gjorde jag min första webbdesign med Dreamweaver som är ett verktyg som gör att du kan bygga en hemsida utan att programmera. Därefter blev jag intresserad och jag började tänka på hur jag skulle kunna lära mig mer. Jag letade efter olika utbildningar och jag hittade Jensens yrkeshögskola och en kurs i JavaScript, och sen så började jag läsa där.

Det var ett helt nytt koncept för mig och jag hade ingen bakgrund med programmering eller IT. I början var det svårt. Efter ett år var vi ute på praktik och det var då jag fick första chansen att jobba i riktiga projekt med UX och frontend.

Vad läste du när du studerade till grafisk designer?

– Jag läste mest 2D-grafik och det inkluderar design av affischer, visitkort och andra tryckprodukter, layout för böcker och bokomslag etc. När jag studerade så lärde jag mig också att använda Illustrator och Photoshop och andra programvaror. Jag läste nästan fyra år i Iran och när jag kom till Sverige skickade jag min utbildning för bedömning och fick klartecken på att min examen var en motsvarande kandidatexamen inom grafisk design i Sverige. Tidigare har jag jobbat med grafisk design och som art director här i Sverige, och jag har även jobbat med produktion av reklamfilm.

Var hämtar du inspiration till det du jobbar med? Går du på konstmuseum kanske?

– Ja faktisk. När jag läste grafisk design på gymnasiet då fokuserade vi mycket mer på konst än på teknik. Vi målade med papper och penna. När man har papper och penna i handen så tänker man på ett annat sätt än när du börjar designa med datorn, det är något helt annat.

När man pluggar design i Iran är det viktigt att känna till bakgrunden till konst från hela världen, och i början av min utbildning så läste vi konsthistoria från hela världen. Vi började med renässansen och studerade alla möjliga tidsepoker fram till modern konst som Picasso.

Hur ser du på din roll i ett team?

– I ett projekt så kanske jag bara ska fokusera på design och i annat så jobbar jag med både frontend-utveckling och responsiv webbdesign och då är mina roller väldigt olika. Min jobbroll påverkas väldigt mycket beroende på vilket projekt och team jag är med i. En fördel med att jobba i olika team är ju att man får lära sig nya saker och får prova olika verktyg.

Hur känner man igen bra webbdesign 2017?

– Om man jobbar med ett kundprojekt så handlar det ofta om hur många användare som kommer till sajten. Det finns massor av bra data och information man kan använda för att tolka och förstå hur sajten används. Många och aktiva användare är ett tecken på bra design.

Det handlar inte bara om att kunden ska vara nöjd, utan att både kunden plus deras användare måste tycka om att använda produkten, sajten eller appen, eller vad det nu är jag jobbat med. På det sättet så får jag reda på om jag har gjort ett bra jobb.

Det är ju givetvis viktigt att få godkänt från kunderna, men man måste också tänka lite framåt. Det kan ju vara så att kunden godkänner ett jobb och sen två år senare visar det sig att de har fått negativ feedback från användarna, och då har man ju inte lyckats. Båda perspektiven är viktiga och jag vill tillfredsställa båda grupperna med min design.

Andra viktiga aspekter är att olika åldrar tänker olika och design påverkas också av vilken kontext den finns i. En del användare kommer till exempel till sajten för att läsa mer information och då stannar de längre. Som en sammanfattning kan jag säga att bra design handlar om mycket mer än att bara bygga en snygg webbsida.

Vilken tekniska plattformar tycker du bäst om att jobba med?

– Jag gillar React, det är det bästa ramverket som jag har jobbat i. I React Native så kan man till exempel bygga en native app för IOS-app och Android.

React Native IOS är ett helt nytt koncept och det kan komma att förändra hur vi programmerar idag. Till exempel har jag har kollat på Instagram, Facebook och andra applikationer som är byggda med React Native och de använder inte Java eller andra språk längre.

Ett annat verktyg som jag gillar att arbeta med är Sketch – särskilt när jag jobbar med webben. Det har allt en frontend-utvecklare och UX designer behöver.

I cirka 13 år så har jag använt Illustrator och Photoshop som designverktyg och de har fungerat bra. När jag upptäckte Sketch så ändrade jag mig och nu så föredrar jag att jobba i Sketch. Jag läser en hel del artiklar om webbdesign och Sketch verkar bli mer och mer utbrett runt om i världen.

Vilka är dina bästa tips för andra som vill lära sig mer om design och frontend-utveckling?

– Det bästa man kan göra är att använda Google och söka efter artiklar. Om du är nybörjare så är det viktigt att du inte hittar gamla artiklar från 2015 eller så. Man måste söka efter den senaste artikeln inom ämnet – om det nu är React eller Sketch. Det är inte meningen att man ska lära sig hur en gammal version fungerar, det gäller att vara uppdaterad om den senaste.

Det finns en hemsida som heter ‘Tree House’ och där finns det mycket bra kurser man kan ta online. Det är en tjänst som man betalar för, men jag tyckte helt klart att det var värt pengarna. Likaså så har jag lärt mig mycket från Sketch Meetup gruppen här i Göteborg.

Vad är din passion?

– Jag vill alltid hitta nya idéer och lösningar, och hitta på något som ingen annan har gjort. Då känner jag att jag lyckas. Nya verktyg och nya sätt att arbeta gillar jag. Jag tränar flera gånger i veckan, det gör att jag känner mig glad och positivt. Sen så gillar jag att lyssna på andra människor och lära mig mer om dom.

Vad är meningen med livet?

– Oj, svår fråga! För mig ser jag mening i att utvecklas och se hur jag går framåt steg för steg i det jag gör, om det nu handlar om design eller att lära mig svenska.

De är bara att kämpa på, och livet handlar delvis om att ha mål och uppnå dom.

Tack Saman!

Publicerat Nyheter

Frontendare som vill vidare?

Vi söker dig som är frontend-utvecklare som är sugen på att röra på dig. Kanske har du kört fast där du jobbar idag och vill förnya dig. Vi på Spinit är ett gäng riktigt duktiga utvecklare som strävar efter hög­kvalitativ utveckling och skapande med moderna tekniker.

På Spinit kan du ut­vecklas i den rikt­­ning du vill och kan antingen få uppdrag i inhouse­­projekt eller som konsult hos något spännande företag. Projekten vi jobbar med är oftast av entre­­prenör­­iell karaktär. I första hand söker vi dig som har jobbat några, men är du junior och vill utvecklas är vi också intresserade.

frontend-sidan rör vi oss inom tekniker såsom React, AngularJS, HTML5, LESS, SASS och CMS-system som WordPress och EPiServer, och söker efter personer med öga för design, UX och använd­barhet.

För att se vad vi gör och hur vi har det så kom gärna förbi så berättar vi mer. Skicka ett mail till jobb@spinit.se

 

Vi på Spinit är ett företag med kontor i Askim och centrala Göteborg. Vi utvecklar system för kunder som vill använda teknik för att bli konkurrens­kraftiga. Spinit är snart 30 anställda och omsatte 2016 23 Mkr. Under 2017 planerar vi att anställa flera duktiga utvecklare som kan vara med på vår fortsatt roliga till­växt­resa.

 

Publicerat Uppdrag

Nytt intranät och webbplats för Svensk Volvohandel

Under paraplyt Svensk Volvohandel, tidigare Volvohandlarföreningen (VHF), finns även Svensk Renaulthandel och Tanka i Sverige AB. 2013 fick vi i uppdrag att uppdatera deras intranät och webbplats.

Grunderna för uppdraget var att det existerande intranätet var tungrott och ålderstiget. Önskemålet var ett modernt system med enklare publicering av ny information, variabel access styrt på användare och grupptillhörighet samt möjligheten att visa vissa publika data för icke inloggade besökare.

Uppspaltat var önskemålen:

  • Att Volvohandlarna, Volvo buss/lastvagnar, Renault, Dacia och Tanka alla skulle ha möjlighet att skräddarsy sina sidor, så att det fanns tydliga identiteter för de olika aktörerna.
  • Att vilka menyer och alternativ du såg som inloggad, skulle bero på dina rättigheter.
  • Att det skulle finnas utrymme för flera skribenter med olika grupptillhörighet.
  • Att användare skulle kunna prenumerera på för dem relevanta nyheter.
  • Att sajten skulle fungera även i mobil.

Det vill säga ett modernt intranät i kombination med extranät/publik webbplats, allt på samma system. Vi löste uppdraget genom en anpassning av WordPress med grupprättigheter och gruppstilar.

Med enkla åtgärder kunde de olika delarna av Svensk Volvohandel, Svensk Renaulthandel och Tanka separera sin information samtidigt som de agerade som en enhet.

www.vhf.se
www.vhf.se/tanka-sverige-ab