Fire tips og en ny HTML-tagg: Dette kan webutviklere lære av mobilapper

Det kan av og til være nyttig å bytte ut utvikler-brillene sine med en annen virkelighet og se verden på en ny måte.

Dette er hva utvikleren TJ VanToll, som Version2 tidligere har intervjuet, har holdt på med i de siste fem årene. Han har lagd nettsider siden tenårene, og tjente til og med penger på det. Han endte opp med å delta i Jquerys UI-gruppe i et par år, og skrev også en bok om rammeverket.

For fem-seks år siden ville sjefen til VanToll ha ham til å titte på Nativescript, som var et eksperimentelt produkt i bedriften som i dag heter Progress. Det var ikke et språk og miljø til web, men for kryssplattform mobilutvikling til Android og IOS, med Javascript som språk. Det minner om React Native, mener TJ VanToll.

Etter årene med Nativescript har han nå gått tilbake til nettet, som er der hjertet hans ligger. Han har lært noe nytt fra mobilverdenen som kan benyttes innen webutvikling. Og spesielt i en tid hvor stadig flere bruker nettlesere på mobil.

Han oppsummerer kunnskapen i fire tips:

• Komfortabel scrolling av lister er ekstremt viktig
• Man må teste på fysiske enheter
• Bruk litt flere animasjoner
• Minimer asset-nedlastninger, spesielt i første nedlastning

I et foredrag nylig utdypet han synspunktene sine.

Tips nummer én: Scrolling av lister skal være behagelig for brukeren

Det er en grunn til at dette tipset er nummer én blant TJ VanTolls råd. Veldig mange apper er nemlig i bunn og grunn lister. Dette gjelder Facebook, Twitter, Slack og mange flere.

Fra et brukerperspektiv er det viktig å kunne scrolle like glidende i en nett-app som med en skreddersydd app på telefonen. Det er også viktig for bedriften: Jo flere poster brukeren ser, desto større er sjansen for at brukerne samhandler og ser flere reklamer. Så det er en business case i å scrolle komfortabelt i en nett-app.

Som eksempel viser TJ VanToll fram en app som legger 100.000 poster inn i et array som

bindes til et liste-komponent i brukergrensesnittet. Det er ikke enkelt å gjøre på nettet, for da

blir det raskt problemer. Men det gjøres enkelt i mobilapper med 20 linjers kode.

Det skyldes ikke magi, men at Android og IOS har sterke liste-kontroller til rådighet, nemlig et

«recycler view» og «UI table view». De to kontrollene tar seg av den tunge jobben når det

handler om å scrolle: Minnehåndtering og «momentum»-scrolling, hvor den visuelle feedbacken simulerer en fysisk bevegelse. Årsaken til at det fungerer så godt på mobilapper, er ganske enkelt at plattformen tar seg av arbeidet.

På nettet finnes det egentlig ikke noe tilsvarende, bemerker TJ VanToll. Man kan prøve en

«naiv» tilnærming i HTML og Javascript, og det fungerer kanskje noenlunde på en utvikler-

pc med massevis av krefter. Men med mer begrenset CPU og minne går det galt på en pc.

Det samme gjelder mobil-nettleserne. På Iphone 11, som har en av de raskeste Javascript-

motorene som man kan få på mobil, tar det litt tid å få gang i web-appen. Etter en viss tid rendres listen, men det hakker og danser når brukeren prøver å scrolle. På en halvgammel telefon får det nettleseren til å krasje.

Men det er ikke så vanskelig å skrive en web-app for mobil som kan scrolle på en noenlunde bra måte. Twitters løsning er favoritten til TJ VanToll. Web-appen scroller ikke så mykt som de

native mobilkomponentene, men det føles flytende og er en behagelig opplevelse. Når

man ser på HTML- og Javascript-koden bak, består listens elementer av få div-elementer.

Ide: Standardiser virtualiserte lister i HTML

Dette fungerer litt som en scrolle-trapp hvor trappetrinnene gjenbrukes. Div-elementer

gjenbrukes for ikke å skalere dokument-modellen (DOM) unødvendig. Teknikken kalles

«virtualisering».

Denne framgangsmåten har vært kjent noen år, og det finnes ferdiglagde løsninger til flere

rammeverk, som for eksempel React-Window.

Dette gir et lignende sluttresultat, men er likevel ikke så elegant som selvbygde komponenter.

På Version2s oppfølgende spørsmål om hvorvidt standardiseringsorganisasjoner og nettleser-

produsenter burde legge til et HTML-element for scrollende lister som er optimert på samme

måte som de proprietære mobilkomponentene, svarer TJ VanToll slik:

– Jeg vil mene at, ja, nettlesere burde tilby en mekanisme som automatisk kan virtualisere lister. Til en api ville jeg ønske noe så enkelt som <VirtualList>, eller kanskje <vl>, bare for å være i overensstemmelse med de eksisterende <ol> og <ul>. Elementet ville sette utvikleren i stand til å skape noe i stil med:

<vl> <li>en</li> <li>to</li> <li>osv</li></vl>

– og håndtere virtualiseringen for deg automatisk. Det er gjort en del spekulativt arbeid på dette området, og jeg er særlig begeistret for ideene i dette repositoryet. Men dessverre har det

ikke vært gjort noe der siden september, så det ser ut til at jobben har gått i stå av en eller annen grunn.

Tips nummer 2: Test på fysiske enheter

TJ VanToll pleide å teste mobil-apper ved å bruke Chromes mobil-emulering for å sjekke visuelt og responsivt design. Deretter åpnet han mobiltelefonen sin, som var en toppmodell. Og hvis det så bra ut begge steder, var han klar til å sende ut applikasjonen sin. Men det er en god idé å gå lengre enn som så.

For det første har vi ytelse. Jetstream2 er en populær Javascript-målestokk. Her gir telefoner som er toppmodeller ofte bedre resultater enn skrivebords-nettlesere som Chrome og Firefox. Hvis utviklere tester på sine egne enheter – som ofte er nyere og raskere enn gjennomsnitts­telefonen – får man altså et misvisende bilde. Gjennomsnittsopplevelsen vil som regel være dårligere, og på en gammel telefon kan Jetstreams tests rett og slett ikke gjennomføres.

I Chromes innebygde utviklerverktøy finnes ytelses-fanebladet hvor cpu-en kan simuleres

langsommere. Men TJ VanToll mener at det er en forskjell fra det å sette seg selv i brukerens sted på en fysisk enhet, hvor man også oppdager problemer med brukergrensesnitt som man ikke vil legge merke til i en emulator.

Noen ganger glemmer utviklerne for eksempel at det kan være «bannere» over og under appen, og de kan påvirke brukeropplevelsen i negativ retning.

Et annet eksempel er «hamburger»-menyen i mediet CNNs mobil-nettside, hvor det klikkbare området er på bare 24 ganger 24 piksler. Det er veldig vanskelig å treffe, og Apples UX-guide foreslår 44 ganger 44 som et absolutt minimum. Og det er mange andre eksempler på knapper og ikoner på det mobile nettet som er vanskelige å klikke på, mener TJ VanToll.

Poenget er at man oppdager problemet med en gang man tester på en virkelig enhet.

En pragmatisk framgangsmåte kan være å utnytte bedriftens brukerstatistikk, og se på hvilke

enheter brukerne benytter. Hvis mange brukere for eksempel benytter en Windows-tablet, kan

det være en god ide å sjekke nettstedet på en slik enhet.

Man kan kjøpe enhetene billig på et nettsted for brukte varer, poengterer TJ VanToll. Og deretter må man teste appen eller nettstedet jevnlig på disse enhetene, og kanskje rett og slett bygge dette inn i bedriftens arbeidsrutiner.

Tips 3: Bruk litt flere animasjoner – og kanskje lyd

Animasjoner som ikke er påtrengende, kan kommunisere feedback og tilstandsendring, og

forhindre at brukeren blir desorientert, mener den danske eksperten på brukergrensesnitt

Jakob Nielsen. Og det er TJ VanToll enig i.

Når man trykker på Twitters «ny tweet»-knapp i tjenestens mobilapp, utløses det en gradvis glidende overgang fra den vanlige liste-oversikten over til det skjermbildet hvor en ny post tastes inn. Tjenestens mobilweb-app bruker det samme trikset, men her er det bannere som

hopper og danser når man gjør det samme.

I Youtubes selvutviklede app kan en video som spilles av, flyttes ned i bunnen av skjermen, slik at man kan bruke appens øvrige funksjoner samtidig. Det kan man ikke i mobilweb-appen, og det frustrerer TJ VanToll, fordi nett-teknologi er fullt i stand til å bruke det samme trikset.

Hans råd er ganske enkelt å være oppmerksom på muligheten for at animasjoner kan gjøre

brukergrensesnittet enklere å benytte. Verktøyet Lottie fra Airbnb kan hjelpe til med arbeidet.

Men alt med måte: TJ VanToll framhever at Jakob Nielsen også påpeker at animasjoner også

kan distrahere og overvelde brukeren. Så det skal brukes med forsiktighet.

TJ VanToll har også et kontroversielt råd, og det er å eksperimentere med lyd. På nettet er det

til dels enighet om at man ikke skal bruke lyd hvis ikke appen er et spill, men slik er det ikke

for selvutviklede mobil-apper som kan bruke lyd til å kommunisere tilbakemeldinger til

brukeren. Og TJ VanToll mener at de samme mulighetene kan benyttes på mobilnettet – så

lenge det også er gjort nennsomt. Man skal ikke utelukke muligheten helt, er budskapet hans.

Tips 4: Minimer nedlastningene dine

Her er det ikke mye kontrovers; tvert imot er det et av de oftest brukte rådene: Sørg for at det ikke må lastes ned for mye. Når en mobilapp startes, fulgte alle elementene med da

programmet ble installert. Det gir mobilappen en enorm fordel over web-appen.

Når det dreier seg om oppstartstid, kan web-appen ganske enkelt ikke slå mobil-appen. Men det er fremdeles viktig å profilere nett-appen sin, og det kan man for eksempel gjøre med Google-verktøyet Lighthouse.

TJ VanToll avslutter med et bonustips til webutviklerne: Prøv å utvikle på IOS- eller Android-

plattformene, eller med et nytt Javascript-rammeverk eller et nytt språk. Det gir andre perspektiver på gamle oppfatninger.

Denne saken ble først publisert på danske Version2, og gjøres tilgjengelig på norsk gjennom vår samarbeidsavtale med Teknologiens mediehus/Ingeniøren.