Dizainas, vartotojo sąsaja, technologija ir našumas - kai tavo portalas tampa dar geresnis!

Dizainas, vartotojo patirtis, technologija ir našumas - kai tavo portalas tampa dar geresnis!

Stefan Petri
paskelbta:

Nuo ryškaus ir akivaizdaus iki labiau nepastebimo, bet naudingo - paskutiniais savaitėmis ir mėnesiais mes atlikome daugybę pakeitimų TutKit.com. Tai apėmė tiek veikimo pagerinimus ir techninius atnaujinimus, tiek dizaino ir naudotojų sąsajos pritaikymus. Šie visi dalykai dėl bendrosios patirties naudotojui turėtų turėti teigiamą poveikį. Kokiais būdais tai pasireiškia viduje ir iš išorės – išsamus apžvalga.

Dabar tai taps tamsu

Šiuo metu galite bet kuriuo metu vienu paspaudimu perjungti dizainą į tamsų arba šviesų. Mes nustatėme tai, kaip jūsų operacinėje sistemoje jau yra nustatyta.

Įjunkite tamsiąją dizainą „TutKit.com” platformoje.

Tuo pačiu metu mes taip pat konvertavome visus vaizdus į AVIF formatą, kad jūsų naršyklė neturėtų parsisiųsti tiek daug duomenų (dėl to vaizdų dydis sumažėjo iki 70% nuo failo dydžio).


Turinys, šablonai ir elektroniniai knygos: daugiau informacijos vienu metu, be papildomo paspaudimo

Visada mūsų turinio, šablonų ir elektroninių knygų puslapiuose rodydavome smulkius peržiūros vaizdus visam turiniui. Taip jūs tiesiogiai matote, ką galite tikėtis parsisiųsdami.

Kiekvieno peržiūros vaizdo užmasku end tebesi slėpė mažas meniu. Naudojant jį, galėjote padidinti peržiūros vaizdą, pažymėti turinį kaip mėgstamą ir gauti suderinamumo patarimus. Smagu ... tačiau tai reiškė, kad norint padidinti kiekvieną vaizdą, turėjote atidaryti meniu, paspausti piktogramą, peržiūrėti vaizdą ir jį uždaryti, prieš einant prie kito karto. Nereikalingas papildomas etapas. Dabar meniu pašalinome. Dabar jums pakanka pelės svyruoju per mažą peržiūros vaizdą, ir šups: jums jau bus rodoma didesnė versija.

Per greitai, atlikus persvarstymą, iškilo ir kitų protingų pritaikymų: Suderinamumo patarimus dabar galima pasiekti naudojant tiesiog matomą piktogramą su informacijos "i". Turinio žymėjimas kaip mėgstamas dabar vykdomas naudojant taip pat tiesiog matomą žvaigždutės piktogramą, kuri be to bus rodoma tik prisijungusiems vartotojams.

Atskiro turinio "Hover" efektas
Atfiltruota pagal svarbiausias: Peržiūrėję mūsų atskirų turinio dalių peržiūras, dabar jums tereikia svyruoti pelyte per peržiūros vaizdą, kad jis būtų padidintas. Anksčiau meniu uždangalė daugiau funkcijų, kurias dabar galima tiesiogiai pasiekti per piktogramas.

Video pamokos: Dabar jūs esate paveikslėlyje čia irgi!

Jei kurį laiką lankėtės mūsų puslapiuose su video pamokomis, jūsų akims ten sutiko daugiausiai pilka tekstų ir atkūrimo mygtukų. Požiūris buvo visiškai perdirbtas, taip kad jis vienareikšmiškai atitiktų turinio, šablonų ir elektroninių knygų išvaizdą.

Kitaip tariant: Dabar mūsų video pamokose taip pat matosi smulki peržiūros vaizdai, kas purvinai atrodytų estetiškai patraukliau. Ar video yra nemokama ar naujausias atnaujinimas, jūs galite matyti - kaip su turiniu - pagal spalvotas ant jų paveiksliukų dėtis žymes.

Naujas rodymas: vaizdo įrašai su peržiūros nuotraukomis
Nuo pilko iki nuostabaus: Kol anksčiau video pamokose matėte tik atkūrimo mygtukus, dabar matome jums ir pamoksmus su peržiūros vaizdais.

Taigi mūsų puslapiai dabar atrodo vienoda. Nesvarbu, ar tai turinys, šablonas, elektroninė knyga ar video pamoka: Ten yra peržiūros vaizdas, kurį plėsdami sužvelgiate; yra mygtukas parsisiųsti arba leisti vaizdą; yra piktogramos kitai informacijai ir mėgstamiesiems; jeigu turiniui yra pridedama papildomų medžiagų, tokios kaip projektinių failai, vadovai ar tekstinių pamokų, nuorodas rasite po aprašymo teksto apačioje.

Be to, išplėtiniai, toki kaip triviečiai piktogramos žymi antpinti arba išsiplėtimo tekstai, kurie laikytų tekstus įvairiu kas šiek tiek pasikeitė, taip kad peržiūra būtų kiek tvarkingesnė. Visus tobulinimus galėjome paruošti ir mobiliems įrenginiams.

Didelis valymas puslapiuose su apkopomis

Kas gali būti pašalinta? Kaip tai galima kitaip parodyti? Ką geresnio tvarkant galima įdėti? Tokius klausimus mes užduodavome savo apkopos puslapiams, kad būtų palaikomas plonas dizainas, išlaikant kartu aukštą informacijos lygį. Be jau minėtų apačioje esančių peržiūrų, atlikome šiuos pritaikymus:

Galerija: Galerijose rodome, kaip jūs galite naudoti pavyzdžiui mūsų turinį ir šablonus. Anksciau buvo čia rotacijos efektas. Gražu, bet ir atitraukianti dėmesį. Todėl naujojoje galerijoje mato tik trys dalykai: matote pasirinktą vaizdą, antraštę ir navigaciją į kairę ir dešinę - be didelių efektų už vaizdo priedangalą.

Išplėsti ir sudrėkinti ir šiek tiek daugiau spalvos: Iki šiol beveik kiekviena sekcija apkopos puslapiuose buvo galima išplėsti ir sudrėkinti, kur hostai yra piramidės formos trikampiai. Funkcija buvo pašalinta. Dabar tai padaro puslapius dar tvarkingesnius - ir, būkime tikri: ar yra kas nors, kas šią funkciją kada nors naudojo? Be to, pridėjome kiek daugiau spalvos tarp antraštžodžių. Nuos juodas turinys dabar nuo viršaus iki apačios skiria švelnus TutKit žalias, skiriant atskirus puslapių regionus vienas nuo kito.

Informacijos sritis: Visi papildomi duomenys yra suskirstyti viršuje dešinėje sąrašo puslapio, pvz., dėl suderinamumo, turinio kiekio ir kategorijų. Čia sutinkame nemažai duomenų.

Informacijos sritis buvo išvalyta ir iliustratyviai pagerinta. Dabar mokymosi pažangą vadovėliuose rodo tik prisijungę vartotojai (išjungti lankytojai jo iš esmės ir taip nenaudoja). Mūsų paketų įvertinimai perkelti žemyn į komentarų sritį. Naujas informacijos srities elementas - nuoroda į naudojimo teises. Tikriausiai pastebimiausias pokytis susijęs su asmenų, kurie sukūrė paketą, atvaizdavimu. Vietoj jų vardų, parodydami jums jų portretus. Tikimės, kad tai padaro viską dar šiek tiek draugiškesniu...

Daugybė mažų detalinių pagerinimų:

  • Jokio slankiojo naršymo daugiau nei įrangos/kategorijų skydams
  • Bendrai nuolatinė slinkimo galimybė paieškoje, kategorijų puslapiuose ir t.t.
  • Kortelės: mažiau šešėlių, piktogramos išjungtos, stačiakampės kampai
  • Kortelės: animacija išjungta, vietoj to žalia perdanga
  • Perjungimo mygtukas sušvelnintas
  • Didesni veidai, pvz., bloge ir vaizdo turuose
  • Veidas kontaktų formoje
  • Poraštė pakeista iki galo (jau nebenaudojami, rodomas veidas, ir t.t.)
  • Autoriaus puslapis: „Autoriaus svetaines“ nuoroda pašalinta, nuolatinis slinkimas, žalios permainos
  • Pradinis puslapis: naujausios turinio dalys nebepanaudojamos slankiklyje
  • 4 stulpeliai autoriams
  • Puslapių šuolis pop-up languose
  • Naujas modulis auditorijai

Su mažiau klausimais apie našumo pagerinimą

Greičiai įkraunamos puslapiai - patinka „Google“, patinka mums ir tikriausiai ir jums. Kalbant apie mūsų portalo našumą, ir toliau vykdysime pagerinimus. Tačiau, pavyzdžiui, jau įgyvendinome vaizdinio optimizavimą. Šie buvo perskaičiuoti iš rafinuotų JPG formatų į WEBP ir AVIF formatų, kurie yra daug mažiau rafinuoti.

Be to, mes pasitikrinome duomenų bazes ir užklausas, kurios atliekamos mūsų puslapiuose. Gana techniškai viskas, bet leiskite pateikti pavyzdį: jei atėjote į vieną iš mūsų viso paketo puslapių su vadovėliais, sistema turi žinoti, kiek jūs galite žiūrėti vaizdo įrašus. Taigi, ar turite narystę? Ar įsigijote paketą? Ar kai kurie vaizdo įrašai gali būti nemokami? Tokius klausimus turime užduoti daugybę kartų puslapio pakrovimo metu, kas žinoma atima laiką. Atitinkamai mes čia koreguojame našumą (Dėmesio, dabar tai tikrai techniška informacija):

  • Nereikalingos duomenų bazės užklausos, kurios paprašė daugiau informacijos nei iš tikrųjų reikėjo, buvo pašalintos.
  • Daugiausiai kartų atliekamų duomenų bazės užklausų greitis buvo pagerintas.
  • PHP metodų kodas buvo optimizuotas ir pakartotinės duomenų bazės užklausos tam tikrose cikluose buvo ištrintos.
  • Visi sistemos komponentai buvo patikrinti dėl nereikalingų duomenų bazės užklausų, naudojamų visuose puslapiuose, ypač susijusiuose su mūsų meniu punktais. Šios buvo optimizuotos dėl geresnės veiklos.
  • Buvo nustatyta, kad kai kurios duomenų bazės užklausos buvo bereikalingai kartojamos, ypač teigia, kad atlikėjo vartotojus su paketais. Šie pakartojimai buvo pašalinti naudojant laikinai atmintinių sistemų (podėliai), taip taupant tiek laiką, tiek išteklius.
  • Sistemos klaidų žurnalas buvo stebimas, ir visos praneštos problemos buvo ištaisytos.
  • Automatizuoti sistemos užduotys (Cronjobs) buvo tirti dėl per ilgos ar neveikiančios būsenos. Šios užduotys buvo patobulintos, filtruojant informaciją tiesiogiai iš duomenų bazės, o ne netiesiogiai per PHP kodą.

Technika visiškai atnaujinta? Visiškai atnaujinta!

  • Atnaujinta naujausia PHP versija.
  • Laravel (mūsų karkasas) buvo atnaujintas nuo 9 iki 10 versijos.
  • Beveik 35 paketai iš karkaso buvo atnaujinti kartu su mokėjimo paslaugų teikėjo „Braintree“ SDK.
  • Dabar naudojame http2 (geriausiai norėtumėme naudoti 3 versiją, tiesiog Apache serveris (dar) to nepalaiko.
  • „Ubuntu“ buvo atnaujintas nuo 20.04 iki 22.04 (buvo svarbu AVIF paveiklių palaikymui).

Kas dar liko?

Dabar aktyviai dirbame, kad nuo sausio mėnesio mūsų portalas būtų pasiekiamas ir daugiakalbiškai. Tai nemažas darbas, bet mums džiaugsmą kelia, kai tai pasiekiam.

Kažko dar trūksta? Tuomet rašyk man el. laišką adresu info@tutkit.com. Aš pats taip pat būčiau džiaugsmingas, jei tinklaraštis gautų komentarų skyrių. Ką manai? Naudinga, ar vis tiek beveik niekas nekomentuoja dėl laiko stokos?

Paskelbta nuo Stefan Petri
Paskelbta:
Iš Stefan Petri
Stefanas Petri kartu su broliu Matthiasu vadovauja populiariam specialistų forumui PSD-Tutorials.de ir e. mokymosi platformai TutKit.com, kurioje daugiausia dėmesio skiriama skaitmeninių profesinių įgūdžių mokymui ir tobulinimui.
Atgal į apžvalgą