Design, UX, Teknik och Prestanda - när din portal blir ännu bättre!

Design, användarupplevelse, teknik och prestanda – när din portal blir ännu bättre!

Stefan Petri
publicerad:

Från markant och iögonfallande till snarare diskret och ändå användbar - de senaste veckorna och månaderna har vi genomfört många förändringar på TutKit.com. Bland dem fanns prestandaförbättringar och tekniska uppdateringar liksom anpassningar av design och användarvägledning. Det här påverkar sammanfattningsvis din användarupplevelse positivt. Vad som har förändrats under huven och på ytan - en omfattande översikt.

Nu blir det mörkt

Från och med nu kan du när som helst med bara ett klick växla designen till mörkt eller ljust. Vi har förinställt det som det är i operativsystemet.

Aktivera mörkt läge på TutKit.com.

I samma veva har vi också konverterat alla bilder till AVIF-format för att minska antalet data som din webbläsare behöver ladda ner (ca 70% av bilderna har blivit mindre i filstorlek på grund av detta).


Tillgångar, mallar och e-böcker: mer på en blick, utan att klicka runt

Vi har alltid visat dig små förhandsvisningar av tillgångar, mallar och e-böcker på respektive sidor. På så sätt ser du direkt vad som väntar dig vid nedladdning.

Bakom varje förhandsvisning fanns också en liten meny. Där kunde du förstora förhandsvisningen, markera innehållet som favorit och få kompatibilitetsråd. Trevligt ... Men det innebar också att du var tvungen att öppna menyn, klicka på en ikon, visa och stänga bilden innan du kunde gå vidare till nästa. En onödig omväg. Vi har därför tagit bort menyn. Nu räcker det med att föra muspekaren över en liten förhandsvisning, och puff: Den stora versionen visas direkt.

Snabbt ledde översynen också till ytterligare meningsfulla anpassningar: Kompatibilitetsråden kan nu hämtas via en direkt synlig ikon med info-i. Favorisering av innehållet sker via en annan direkt synlig stjärn-ikon, som också bara visas för inloggade användare.

Hovereffekt på enskilda innehåll
Förminskat till det väsentliga: När du tittar på våra enskilt innehåll, är det bara att hovra över förhandsbilden för att se den större. Ytterligare funktioner som tidigare var gömda i en meny är nu direkt åtkomliga genom ikoner.

Video-tutorials: Nu är du också här visuellt informerad!

Om du för en stund sedan besökte en av våra sidor med video-tutorials, möttes du av inte mycket mer än en övervägande grå öken av texter och play-knappar. Gränssnittet har helt omarbetats så att det speglar layouten av tillgångar, mallar och e-böcker.

Ny synpunkt: Videor med förhandsgranskningar
Från grått till wow: Istället för bara play-knappar på video-tutorials, visar vi nu också förhandsbilderna.

Så nu presenterar vi våra sidor enhetligt. Oavsett om det är en tillgång, mall, e-bok eller video-tutorial: Det finns en förhandsbild att hovra över och förstora; knappar för nedladdning eller uppspelning av videon; ikoner för mer information och för favoriter; om det finns ytterligare material som projektfiler, instruktioner eller texttutorial för innehållen finns länkar till dem längst ner i beskrivningstexterna.

Överflödiga element som triangel-ikoner för att veckla upp och ner texter har också tagits bort, vilket gör interfacet renare och mer enligt principen mindre är mer. Alla optimeringar har också förberetts för mobila enheter.

En stor röjning på sidorna för helhetspaket

Vad kan tas bort? Vad kan visas på ett annat sätt? Vad kan placeras på en bättre position? Sådana frågor ställde vi för att förenkla våra helhetspaketssidor samtidigt som vi bibehöll informationsinnehållet. Förutom de redan nämnda ändringarna i gränssnittet för enskilt innehåll, gjorde vi följande justeringar:

Galleri: I gallerierna visar vi hur du till exempel kan använda våra tillgångar och mallar. Tidigare fanns här effekten av rotation. Snyggt, men också distraherande. Vi har därför reducerat den nya gallerivyn till exakt tre saker: du ser den valda bilden, en undertitel och navigering till vänster och höger - utan stora effekter runt omkring.

Veckla upp och ner och lite mer färg: Hittills kunde nästan varje sektion på en helhetspaketssida vecklas upp och ner, där motsvarande knappar i form av pilar fanns tillgängliga. Funktionen har tagits bort. Det är renare på sidorna - och låt oss vara ärliga: Finns det någon som någonsin har använt den funktionen? Vid sidan av detta har vi konsekvent gett undertexterna mer färg. Från topp till botten separeras nu de olika områdena av ett mjukt TutKit-grönt istället för en klumpig svart linje.

Info-område: Högst upp till höger på sidorna för totalpaketering samlar vi all tilläggsinformation, som till exempel gällande kompatibilitet, antal innehåll och kategorier. En hel del data samlas där.

Info-området har vi städat upp och förbättrat illustrativt. Således visas inlärningsframsteg för handledningar endast för inloggade användare nu (utloggade besökare behöver ju ändå inte se dem). Paketens bedömning har flyttats ner till kommentarsdelen. Nytt i info-området är en länk till användningsrättigheter. Den mest iögonfallande förändringen berör nu tydligare visningen av de personer som har skapat paketet. Istället för deras namn visar vi deras porträtt. Förhoppningsvis upplevs det också som att de blir lite vänligare ...

Många små detaljförbättringar:

  • ingen slider-navigering längre i programvaru/kategorier
  • generellt kontinuerlig bläddring i sökning, kategorisidor etc.
  • Kort: mindre skugga, ikoner bort, kantiga hörn
  • Kort: animering bort, istället grönt överlägg
  • Hover-effekt på split-knapp optimerad
  • Större ansikten, till exempel på bloggen och vid videorundturen
  • Ansikte i kontaktformulär
  • Footer helt ny (ingen mer öppning, visa ansikte etc.)
  • Författarsida: "Till författarens webbplats" borta, kontinuerlig bläddring, gröna överlägg
  • Startsida: Nya innehåll inte längre som knappar
  • 4 kolumner för författare
  • Sidhoppa i pop-ups
  • ny modul för målgrupper

Med färre frågor om förbättring av prestanda

Häftiga sidor, som laddar snabbt - Google gillar det, vi gillar det och du gillar det säkert också. När det gäller prestandan på vår portal kommer vi fortfarande att göra förbättringar i framtiden. Men redan nu har vi till exempel implementerat bildoptimering. De har nämligen bytts ut från det smala JPG-formatet till de mycket smalare WEBP- och AVIF-formaten.

Vi har också ägnat oss åt databaser och frågorna som sker vid åtkomst av våra sidor. Ganska tekniskt alltihop, men för att ge ett exempel: När du kommer till en av våra sidor för totalpaketering med handledningar måste systemet bland annat veta i vilken utsträckning du kan titta på videorna. Har du alltså ett medlemskap? Har du köpt paketet? Är enskilda videor eventuellt gratis? Sådana frågor måste vi ständigt ställa vid sidans åtkomst, vilket naturligtvis tar tid. Därför tar vi greppet om att förbättra prestandan här (OBS, nu blir det verkligen tekniskt):

  • Onödiga databasfrågor som begärde mer information än vad som verkligen behövdes togs bort.
  • Snabbheten för de vanligast utförda databasfrågorna har förbättrats.
  • Koden i PHP-metoder har optimerats och repetitiva databasfrågor i vissa slingor har eliminerats.
  • Samtliga delar av vårt system har granskats för onödiga databasfrågor som användes på alla sidor, särskilt de som var kopplade till våra menypunkter. Dessa har optimerats för bättre prestanda.
  • Det konstaterades att vissa databasfrågor onödigtvis upprepades flera gånger, särskilt de som länkade användare till paket. Dessa upprepningar åtgärdades genom ett korttidsminnessystem (cache) vilket sparade både tid och resurser.
  • Systemets fellogg övervakades och alla rapporterade problem åtgärdades.
  • Automatiserade systemuppgifter (cronjobbar) granskades för de som körde för länge eller bröts. Dessa uppgifter gjordes effektivare genom att filtrera information direkt från databasen istället för indirekt via PHP-kod.

Är allt tekniskt aktuellt? Helt aktuellt!

Naturligtvis har vi även optimerat mycket under ytan eller uppdaterat programvarupaket som:

  • Uppdatering till den senaste PHP-versionen.
  • Laravel (vårt ramverk) har uppdaterats från version 9 till 10.
  • Nästan 35 paket från ramverket har uppdaterats samt SDK från vår betalningsleverantör Braintree.
  • Vi använder nu http2 (helst skulle vi använda version 3, det stöds dock (ännu) inte av Apache-servern.
  • Ubuntu har uppdaterats från 20.04 till 22.04 (var viktigt för stöd av AVIF-bilder).

Vad kommer härnäst?

Vi arbetar intensivt för att vår portal även ska vara flerspråkig och tillgänglig från och med januari. Det är mycket arbete, men det ger oss stort stolthet när vi har lyckats med det.

Dessutom kommer det redan nästa vecka vara möjligt att köpa enskilda innehåll med rabatt om det pågår en kampanj. Det innebär att vår separata butik (shop.psd-tutorials.de) inte längre uppdateras med nya produkter och att den också kommer att stängas av senast slutet av första kvartalet 2024, och alla våra innehåll kommer endast att vara tillgängliga på TutKit.com.

Vi planerar också att från och med 2024 skicka minst 1 nyhetsbrev i månaden, så att alla medlemmar & nyhetsbrevsprenumeranter kan se vad som är nytt. För hittills har vi alltid lyckats ha minst en nytt innehåll online varje vecka!

Naturligtvis kommer vi även fortsättningsvis att tillhandahålla intressant nytt innehåll. Själv vill jag till exempel spela in en ny träning om Adobe Photoshop Elements, eftersom något äntligen har ändrats i gränssnittet och det är värt att skapa en helt ny träning för det. Ämnet AI kommer fortsätta att engagera oss och vi kommer att fortsätta att uppdatera befintliga produkter samt att tillhandahålla helt nya produkter.

Saknas något? Skriv gärna ett mail till mig på info@tutkit.com. Jag skulle också bli glad om bloggen fick en kommentarsfunktion. Vad tycker du? Meningsfullt eller kommenterar nästan ingen ändå av tidsbrist?

Publicerad den av Stefan Petri
Publicerad den: Från Stefan Petri
Stefan Petri driver det populära branschforumet PSD-Tutorials.de tillsammans med sin bror Matthias samt e-lärande-plattformen TutKit.com, som har fokus på att utbilda och utveckla digitala yrkeskompetenser. 
Tillbaka till översikten