Tekst app

Det første jeg startet med i oppgaven var å lage et veldig enkelt test program for å se om det var realistisk for meg å kunne lage et tekst program på tiden vi var gitt.

Da endte jeg opp med dette programmet. Veldig basic funksjonalitet, men det viste fremdeles at det var mulig for meg å lage et tekst program. Jeg så også på et par forskjellige videoer om å lage tekst program, som dette eksemplet. https://www.youtube.com/watch?v=la-0HOaNL10

Det neste jeg valgte var å skrive en liste over oppgaver jeg måtte gjøre får å fullføre oppgaven. Da endte jeg opp med å bruke notion til å organisere oppgaven mine. Jeg endte opp med å dele inn oppgaven mine under tre hoved kategorier. Research, prototype og utvikling. Lagde alle gjøre målene mine valgte jeg å vektlegge utviklingen mest og samtidig legge av mest tid til det. Fordi jeg viste det kom til å være den mest tid krevende delen.

Når jeg startet på research valgte jeg å begynne med å se på andre tekst programmer for å få et bedre innblikk i hvordan de fungerer. Programmene jeg testet var Notion, Obsidian, Word, OneNote, TinyMCE og CKEditor.

Det jeg kom frem til fra disse programmene var at de alle hadde dårlig brukervennlighet for folk som bruker tastatur, eller at visse funksjoner ikke kan bli brukt uten mus.

Notion

Programmet fungerer ganske bra og er enkelt å bruke fordi linje høyder og tekst størrelser er satt for deg, men det er ikke mulig å overstyre disse standard størrelsene. Får å legge til elementer som lister, bullet points eller overskrifter bruker man / commands. Dessverre har Notion ikke tatt noe hensyn for folk som ikke kan se eller har nedsatt syn, fordi det er ingen skjermleser som er tilgjengelig i web versjonen. Skjermleser problemet er løst i den nedlastet versjonen, men det er ikke mulig å bytte til veldig mange språk i denne versjonen så du får fremdeles ikke skjermleser på norsk. Et annet problem med notion er at når du bruker keyboard navigasjon er det dårlig forklaring på hva knapper gjør. Så de fleste knappene har de samme navnene når du navigere mellom sidene dine og notion leser ikke navnene på sidene. Da blir det veldig vanskelig å finne ut hvilken fil du åpner også klarer jeg heller ikke å finne ut hvordan jeg åpner en fil med keyboard navigasjon.

• Bra

• Er enkelt å bruke og kjapt og lære
• Gjør det enkelt å formatere tekst
• Kan importere komplekse maler
• Veldig enkelt å plassere bilder

• Dårlig

• Dårlig/ufunksjonell keyboard navigasjon
• Ufunksjonell skjermleser
• Kan ikke bestemme linje høyde og tekst størrelse
• Mye og navigere seg gjennom med tastatur

Obsidian

Obsidian fungerer delvis som en mellomting av Notion og VSCode. En stor fordel jeg ser med Obsidian er at du har muligheten til å redigere nesten alle hurtigtaster i programmet sånn et det passer best mulig for deg. Jeg synes at programmet virker som det har bedre funksjonalitet enn Notion, men det er mer å lære seg i form at hurtigtaster.Obsidian har også et lite problemet med at jeg ikke ser noen enkel måte å lage kolonner eller andre tekst formateringer som ikke er å endre på tekst størrelse eller lister. Bilder også litt vanskelig å plassere fordi jeg finner ingen enkel måte å lagge til bilder som ikke tar opp sin egen linje.Selv så mener jeg at Notion er lit bedre til å formatere teksten enn Obsidian.

• Bra

• Har mye funksjonalitet
• Kan endre hurtigtaster
• Funksjonell skjermleser

• Dårlig

• Kan ikke bestemme linje høyde og tekst størrelse
• Mye å navigere seg gjennom med tastatur
• Komplisert program
• Det er ikke veldig enkelt å plassere bilder som ikke dekker hele bredden på dokumentet

Word

Word er ganske bra I den form at du har masse maler og full mulighet til å redigere teksten din helt fritt. Når jeg testet Word med skjermleser fant jeg ingen problemer som var uoverkommelige, men å legge til bilder I Word kan være ganske vanskelig. Det er også nesten helt umulig å justere bilde plassering med tastatur alene. Dette er ikke bare et problem med tastatur navigasjon. Dette er bare sånn Word er. Så langt jeg kunne se fungerte skjermleseren helt perfekt, men Word har ekstremt mange knapper så det kan ta veldig lang tid å bruke tastatur navigasjon fordi du må gå forbi veldig mange knapper.

• Bra

• Full kontroll over tekst formatering
• Ser ingen problemer med skjermleser
• Kan navigere hele appen med tastatur
• Kan endre all hurtigtaster

• Dårlig

• For mange knapper
• Ekstremt vanskelig å plaserer bilder

OneNote

OneNote ser ut til å ha mesteparten de samme funksjonene som Word, men de har blitt delvis forenklet som er en fordel sånn at det slipper å være så mange knapper du trenger å trykke på for å navigere med tastatur. Skjermleseren ser også ut til å fungere perfekt med OneNote, men bilde plassering er enda verre i OneNote enn Word. Jeg tror ikke det er mulig å skalerer ned bilder uten å bruke musen, men jeg så det var mulig å legge til alternativ tekst. Dessverre vet jeg ikke hvordan jeg kan gjøre det med tastatur.OneNote har også en funksjon som lar deg lage tekst bokser hvor enn du vil på hele siden og dette har du faktisk mulighet til å gjøre med kun tastatur hvis du vil, men det er ikke noe som sier hvor du er når du bruker skjermleser.Et stort problem med OneNote er at du ikke kan navigere deg mellom de forskjellige notatblokkene du har eller mellom sider du her i notat blokken.

• Bra

• Bra skjermleser
• Bra/enkel tekst formatering
• Ikke for mange knapper

• Dårlig

• Kan ikke navigere gjennom hele appen med tastatur
• Ubrukelig tastatur navigasjon i web app
• Kan ikke endre størrelser på bilder med tastatur

TinyMCE

TinyMCE har ganske bra funksjonalitet. Fra så lange jeg kunne se hadde jeg ingen problemer med skjermleser. Det var også veldig forenklet med hvor mange knapper som var der og de knappene som fantes var gruppert under andre elementer sånn at du trykket deg forbi en gruppe istedenfor hver eneste knapp. Det var også en hjelp knapp tilgjengelig med alle snarveiene som er praktisk. Et problem er at top baren med alle knappene har en tab index på -1 som gjør at du ikke kan bruke shift tab til å komme deg til knappene. Da må du heller trykke alt + F9. Det er et problem hvis du sitter på en pc med et nvidea grafikk kort fordi da har du et program med den samme snarveien. Så da kan du ikke nå top menyen uten å endre den snarveien.Du kan heller ikke plassere bilder gjennom keyboard alene. Du må dra bildet inn i filen og det er heller ikke mulig å plassere bilder på en enkel måte med tastatur alene.

• Bra

• Enkel navigasjon(uten nvidea grafikk kort)
• Skjermleser fungerer bra
• Få knapper
• Grupperte knapper
• Har en hjelp knapp

• Dårlig

• Kan ikke plassere bilder med tastatur
• Kan ikke bruke shift tab får å nå top meny
• Kan ikke bestemme font størrelse

CKEditor

CKEditor ser ut til å fungere ganske likt som TinyMCE og da har mye av de samme funksjonene. Noen av de største forskjellene jeg så var at CKEditor hadde flere maler for fonter som du kunne bruke. Dette er veldig praktisk. Samtidig så jeg det var mulig å plassere bilder og endre på størrelsen av bildene sånn at den passer med teksten. Jeg fant ikke noen mulighet får å gjøre det med keyboard, men det er bra at du kan plassere bildet enkelt.Et større problem med CKEditor var et jeg ikke fant ut hvordan man skulle kunne navigere seg til top menyen uten bruk av mus.Knappene i top menyen var også mindre organisert enn TinyMCE og når jeg skulle navigere mellom dem måtte jeg velge alle elementene i knappen før jeg fikk gå videre. Så først markerte jeg knappen så grafikken inni knappen.

• Bra

• Enkelt å plassere bilder
• Har en del maler for tekst formatering.
• Kan plassere videoer

• Dårlig

• Kan ikke bruke shift tab får å nå top meny
• Kan ikke bestemme font størrelse
• Vet ikke hvordan jeg navigerer meg til toppen av siden uten mus
• Vet ikke om det er mulig å endre bilde størrelse med tastatur
• Mange knapper og navigere gjennom

Når jeg var ferdig med research startet jeg med en wireframe sånn at jeg kunne starte å finne ikoner og få testet ut hvor knappene burde være plassert siden jeg skulle bruke tab til keyboard navigasjonen. Det neste steget for meg var å gjøre det enkle tekst programmet. Dette var en prosess jeg brukte lit over 2 uker på fordi dette var langt mer komplisert koding enn det jeg kunne. Så mye av Javascripten er enten tatt fra nett eller så har jeg skrevet det med hjelp av ChatGPT. Jeg startet bare med å legge inn de mest grunnleggende funksjonene som. Å stille tekst høyre venstre og midtstilt. Så inkluderte jeg også muligheten for å endre tekst størrelse.

Når jeg brukertestet denne versjonen skulle brukeren skrive den samme teksten som er i bildet over og formatere teksten likt. En av brukertestene min var gjort med en person som ikke kunne se skjermen. Dette var gjort med en knapp som gjorde hele skjermen svart, men kunne bare bruke skjermleser og tastaturer. De to andre kunne se, men måtte fremdeles bruke tastaturet. Jeg fikk ikke veldig mange konkrete tilbakemeldinger fra brukertesten, men jeg fikk noe innspill og brukerene fant et par feil som jeg ikke hadde funnet selv uten at andre hadde testet programmet. En viktig ting jeg la merke til når folk testet var at ingen valgte å sette egne tekst størrelse. Alle ville heller bruke de ferdig definerte størrelsene. Så da fjernet jeg muligheten til å sette egne størrelser selv om jeg originalt ville ha det fordi det gir litt mer frihet til brukeren.

• Tilbakemedlinger

• Forvirrende at du må skrive først så kan du gjøre endringer.
• Trenger bekreftelse at knapper blir trykket.
• fontSize element dårlig screen reader.
• De predefinerte h og p taggene fungerer ikke.
• Mulighet til å markere egne ord.
• Bilde knappen og lenke knappen ser begge ut som legger til filer.

Når jeg var ferdig med brukertestene og hadde fikset de største problemene startet jeg med å sette opp en landingsside for tekst programmet. Jeg hadde en ganske konkret ide på hvordan jeg ville at nettsiden skulle se ut. Da lagde jeg et par lit forskjellige varianter i Figma. Her er også en video jeg tok inspirasjon fra https://www.youtube.com/watch?v=T33NN_pPeNI&t=1s

Når det kom til å lage landings siden var det ikke mange problemer jeg støtte på. Dette eneste jeg hadde problem med var animasjonen på nettsiden. Det var fordi feil element hadde en class med animasjon.

Når jeg var ferdig med nettsiden jobbet jeg videre med å prøve og gjøre tekst programmet bedre, men når jeg jobbet med det la jeg merke til at jeg hadde vært over ambisiøs når jeg hadde settet opp funksjoner jeg skulle lage. Jeg endte opp med å kutte ut halvparten av de. Den mest kompliserte funksjonen som ble igjen var å legge til bilder.