Skoluppgift: Färdtjänst-app, testkör gärna!

Tjo! I min nuvarande kurs inom Webbutvecklingsprogrammet på distans - Webbanvändbarhet - så har jag tagit fram en pseudofunktionell Färdtjänst-app som jag gärna skulle uppskatta om den kunde testköras.

Den finns hostad hos Netlify: Timrå Färdtjänst WebApp

Webbsidan "Boka resa" är den som innehåller mest faktisk funktionalitet via JS. Dock går det inte att faktiskt boka Färdtjänst, bara så du vet!

Tanken är ur ett användbarhets- och tillgänglighetsperspektiv. Med andra ord handlar det mer om hur den upplevs i att kunna hitta, om webbelement ligger enligt konventioner, om det är något som upplevs otydligt, förvirrande eller oväntat på andra sätt och vis.

Jag ska även få tag på ett par personer i person som ska få provköra webbappen utifrån Webbanvändbarhetsperspektivet.

Några "testuppgifter" du kan få göra om du vill provköra appen och berätta här hur du upplevde det gick att lösa "testuppgifterna":
1. Vad kostar en resa?

2. Avboka en resa.

3. Boka en resa med endast tangentbordet efter att du har landat på startsidan (tryckt Enter i adressfältet så TAB-ordningen börjar). Resan anses vara bokad när du ser texten, "Du har bokat din resa".

4. Hur sparar man en plats att resa till eller från?

5. Finns det några sparade platser innan?

6. Vem ansöker man hos för att få Färdtjänst via denna låstas-Färdtjänstleverantör?

Du får gärna berätta hur du "tänkte högt" när du löste uppgifterna. Det vill säga vart dina ögon vandrade konsekvent, var du klickade oftast, hur du tolkade ikoner, övrig layout, och så vidare.

Viktigt: Jag vill upprepa med att säga att det går inte att på riktigt boka färdtjänst på denna webbplats. Den är en projektuppgift i min nuvarande Webbanvändbarhetskurs!

Mvh,
WKL.

Tack för din återkoppling!

1. Jag har löst så att "knapparnas" hela ytor är klick-/tryckbara! Samt konsekvent fixat så de ser ut och använder sig av <button>-elementen.

2. Vad tycker du skulle förtydliga det?
- "Res snarast"?
- "Res första lediga tid"?
- "Res så snart som möjligt"?
- "Res så tidigt som det går"?

3. Minns du hur du orsakade den buggen? Det ska inte gå att visa första sammanfattningen eftersom du måste trycka/klicka/ENTERa/SPACEa den knappen för att händelselyssnaren ska aktiveras. Se urklipp från kod nedan:

// Händelselyssnare FÖR BOKA KNAPPEN på "BOKA RESA"-sidan
if(document.getElementById('boka-knapp')){
    const avbokaBtn = document.getElementById('boka-knapp');
    avbokaBtn.addEventListener('click', () =>
    {
        let confirmBtn = document.getElementById('confirm-btns');
        confirmBtn.style.display = "flex";
        avbokaBtn.style.display = "none";

        const bekrafta = document.getElementById('bekrafta');
        const jaBtn = document.getElementById('ja');
        const nejBtn = document.getElementById('nej');


        let showSummary = document.getElementById('resa-sammanfattning');
        showSummary.innerHTML ="";

        showSummary.innerHTML += "<b>Resa till:</b><br>";
        if(byId('favorit-till').value != ''){

Men <textarea>-elementet beter sig konstigt och får massa whitespace av någon okänd anledning. Kanske det bidrar till någon bugg? Jag har provat webbplatsen i FireFox, Edge & Chrome på datorn. Skärmstorleken bör ej påverka hur JS-koden beter sig tänker jag mig.

4. Jag har åtgärdat det nu ur ren pseudo-funktionell synpunkt. Jag har också gjort så att det inte går att spara adresser som inte har inmatade. Kryssrutorna är inaktiverade när inmatningsfälten för adresserna är tomma. Den bör också neka slutförande av bokning om Returresa kryssas i men inget datum och/eller tid väljs.

Tack så mycket återigen för att du tog dig tiden att prova Färdtjänst-prototypen!

Mvh,
WKL.

Tack så mycket för återkopplingen!

Jag gjorde justeringar utifrån det du rapporterat och hade redovisning igår.

Där fick jag ytterligare återkoppling, främst att använda färger för varningsmeddelanden.

Exempelvis kommer du att få tydlig "visuell info (ikoner, färger + text)" när du glömt att välja obligatoriska val:
1. Vart du vill resa,
2. Datum för avfärd
3. Tid för avfärd
4. Ankomstplats

En annan återkoppling var att knappar var för nära varandra vilket skulle förstöra deras syfte att vara lätta att klicka/trycka på för personer med motoriska svårigheter som då skulle kunna klicka/trycka på närliggande knappar.

Då ökade jag gap-värdet från 10px till 50px. Även huvudmenyn har fått lite mer luft såväl som skrivbordsversionens body-element som nu är max 1200px brett istället för tidigare 1024px.

Ett annat användartest anmärkte på att det kan upplevas kognitivt belastande. Så då gjorde jag att det bara är två steg och sedan är sista steget numera "Tillval".

Nu har jag min skarpa projektlansering här (kom ihåg CTRL+F5 för att tömma cache):
Färdtjänst Projektuppgiftsinlämning

Prova gärna den en sista gång (endast "Boka resa"-sidan) och återkoppla gärna hur du upplever att jag har löst utifrån all ovannämnd återkoppling!

Berätta gärna om nya frågetecken dykt upp. Dock kmr jag ej att åtgärda dem (men ta med för framtida kodprojekt) för nu ska jag skriva Inlämningsrapport och sedan får denna jävla kurs vara klar!

PHP + Databaser börjar nu på måndag vilket är helt klart roligare kodämnen i mitt tycke!

Mvh,
WKL.

Tänker du denna? https://uxwing.com/united-kingdom-flag-icon/

Det måste vara en SVG-fil!

Den är endast av demonstrativt syfte för att visa vad som är tänkt att kunna göras efter att du har slutfört din bokning. Du kan inte slutföra en faktisk bokning av Färdtjänst!

Jag kanske får lära mig hur man dynamiskt kan välja att skriva ut nuvarande webbsidor eller dynamiska data (kvitton i detta fall) i kommande kurser. Nästa två kurser kombinerar php (ena kursen) med databaser (andra kursen).