Navigationsmeny

Navigationsmenyn har två olika lägen som skiljer sig beroende på om användaren är inlog- gad eller inte. Navigationsmenyn är vit och ligger alltid överst på sidan, även om användaren skulle scrolla på sidan. Är användaren inte inloggad består navigationsmenyn av fem knap- par, en knapp ligger i vänstra delen och fyra knappar ligger i högra delen (se figur 4.5 (a)). Är användaren inloggad består navigationsmenyn av sex knappar, en ligger till vänster och fem ligger till höger i navigationsmenyn (se figur 4.5 (b)). Knapparna har en transparent nyans av grå som fylls i och blir tydligare när muspekaren placeras på dem.

Knappen i vänstra delen av navigationsmenyn är KomUt:s logotyp. När den klickas på omdirigeras användaren till startsidan av webapplikationen, vilken ser likadan ut oavsett om användaren är inloggad eller inte. Är användaren inte inloggad är knapparna på höger sida: ”Hitta resa”, ”Skapa resa”, ”Logga in” och ”Registrera”, vilka tar användaren till motsvaran-

(a) Navigationsmeny, användare inte inloggad. (b) Navigationsmeny, användare inloggad.

Figur 4.5: Navigationsmeny.

4.2.2.2 Startsida

Startsidan är den första sidan som användaren ser när den besöker webbapplikationen. Den består av navigationsmenyn överst på sidan, en bild med text och två knappar nedanför texten (se figur 4.6 (a)). Knapparna är vita med blå text. Om användaren placerar muspeka- ren på knappen byts bakgrundsfärgen ut till blått och texten blir vit istället. Knapparna tar användaren till sidan för att skapa en resa eller sidan för att boka en resa.

Längst ner på bilden finns en pil riktad nedåt som genom animation ”studsar” långsamt. Klickar användaren på pilen scrollar sidan automatiskt nedåt och tar användaren till en vy som förklarar tjänsten genom fem steg (se figur 4.6 (b)). Anledningen till att detta ligger på nedre delen av startsidan är att det ska vara enkelt för användaren att få en överblick av hur tjänsten fungerar om det är första gången de besöker sidan.

(a) Övre startsida med navigationsmeny.

(b) Nedre startsida, hur tjänsten fungerar.

Figur 4.6: Startsida.

4.2.2.3 Hitta resa

Sidan för att hitta en resa är uppbyggd genom att den vänstra delen består av en ruta där det står “Sök efter en resa” och under texten finns det fyra fält att fylla i, en slider och en knapp där det står “Sök” (se figur 4.7(a)). Fälten innehåller en transparent grå färg som beskriver vad som efterfrågas i dem, vilket är: “Varifrån”, “Till”, dagens datum (vilket fylls i auto- matiskt) och “Avgångstid” . Dessa fält har även ikoner för att indikera vad som efterfrågas. Slidern under fälten finns för att ställa in hur många lediga platser det minst måste finnas i bilen. Klickar man på knappen “Sök” genomförs en sökning i databasen efter resor som matchar sökparametrarna. Det är möjligt att göra en sökning utan att fylla i några av fälten, då visas alla resor som finns i databasen. Vidare går det bra att enbart fylla i ett eller några enstaka fält, hela vägen upp till fyra, och sökningen begränsas då i takt med utökningen av parametrar.

om förarens namn, var föraren arbetar, avgångstid, beräknad ankomsttid, datum för resan, pris, en knapp för att lägga resan i varukorgen samt ikoner som indikerar hur många lediga platser som finns i bilen. Är en plats tagen blir sätesikonen transparent. Listan med resor går att scrolla genom samtidigt som rutan till vänster sitter fast.

Skriver användaren in information i sökfälten som inte matchar det som finns i databa- sen visas följande felmeddelande: “Hittade inga resor som matchade sökningen. Prova med en annan sökning!”, vilket illustreras i figur 4.7 (b).

(a) Hitta resa, med resultat.

(b) Hitta resa, med felmeddelande.

Figur 4.7: Hitta resa.

4.2.2.4 Skapa resa

Sidan består av två delar, den vänstra är för att skapa en resa och innehåller fält som ska fyllas i av användaren. Den högra delen är en karta som implementerats med hjälp av API från Google (se figur 4.8 (a)). I kartan kan användaren välja om den vill se en kartvy eller satellitvy av kartan. Den kan även göra kartan mindre och större, samt släppa den “gula människan” någonstans på kartan för att se hur en gata ser ut, exempelvis för att se en upp- hämtningsplats. Webbapplikationen känner automatiskt av användarens position om den tillåter platstjänster i sin webbläsare och markerar den i kartan samt fyller i det översta fältet under ”skapa resa”. Dagens datum fylls i automatiskt och datumfältet har en rullgardinsme- ny som syns när användaren klickar i fältet, vilket gör det möjligt att på ett enkelt sätt välja andra datum.

Sidan består av fem fält som ska fyllas i, en slider och en knapp. Varje fält har en grå, transparent text i sig som förklara vad som ska skrivas i det. Fälten är ”Från”, ”Till”, ”Da- tum”, ”Avgångstid” och ”Antal lediga säten”. Slidern bestämmer priset på resan och baseras på avstånd samt hur mycket en privatperson kan ta betalt för en resa utan att det klassas som taxiverksamhet. Maximala priset för en resa är 18 kronor per mil och lägsta priset är 0 kronor. Skaparen av resan får lägga sig var den vill på skalan. När användaren lagt in en adress i fältet ”Till” visas resan automatiskt i kartan med beräknat avstånd samt förväntad restid(se figur 4.8 (b)). När användaren fyllt i alla fält kan den klicka på knappen ”Skapa” för att skapa resan varpå andra användare kan boka in sig på den. När knappen klickas visas en bekräftelse på att resan är skapad, varpå användaren kan välja att stanna på skapa-resa-sidan eller gå till sin profilsida (se figur 4.8 (c)).

Skulle användaren inte mata in rätt information eller missa fält när hen skapar en resa visas ett felmeddelande (se figur 4.8 (d)) för att indikera att informationen är fel eller behövs.

(a) Skapa resa.

(b) Skapa resa, med en resa.

(c) Bekräftelse på skapad resa.

(d) Felmeddelande, skapa resa.

4.2.2.5 Logga in

I mitten av sidan finns det en ruta med titeln ”Logga in”. Under titeln finns två fält, en kryssruta, en knapp samt en länk (se figur 4.9 (a)). Fälten har en grå transparent text som beskriver vad som efterfrågas i dem, ”Användarnamn” och ”Lösenord”. När användaren börjar skriva i fälten försvinner den transparenta förklaringstexten. Under fälten finns en ruta, ”Kom ihåg mig”, som användaren kan kryssa i för att inloggningsuppgifterna ska fyllas i automatiskt nästa gång denna loggar in. Under rutan finns en knapp för att logga in via LinkedIn. Under det kommer knappen för att logga in. Längst ner finns en länk till registrera- sidan, om användaren inte skulle ha ett konto, med texten ”Är du inte registrerad?”. Texten är blå för att göra den mer synlig och indikera att den tar användaren till en ny sida.

Skulle användaren skriva in felaktiga inloggningsuppgifter eller glömma att fylla i fält visas ett felmeddelande i röd färg under det aktuella fältet, vilket illustreras i figur 4.9 (b).

(a) Sida för inloggning, tomma fält.

(b) Sida för inloggning, med felmeddelande.

Figur 4.9: Sida för inloggning.

4.2.2.6 Registrera

I mitten av sidan finns en ruta med titeln ”Registrera”. Under den titeln finns det ett antal fält som ska fyllas i för att fullborda registreringen. Fälten är som följer: ”Förnamn”, ”Efternamn”, ”Mailadress”, ”Upprepa mailadress”, ”Lösenord” samt ”Upprepa lösenord” (se figur 4.10 (a)). Under fälten finns en knapp som det står ”Registrera” på och skickar all information till databasen. Efter att användaren registrerat skickas den tillbaka till startsidan och loggas in automatiskt. Är fälten inte ifyllda, mailadressen skriven i fel format eller lösenorden i de två sista fälten inte lika kommer felmeddelanden upp i röd text under fälten i fråga (se figur 4.10 (b)).

(a) Sida för registrering, tomma fält.

4.2.2.7 Varukorgen

Varukorgen ligger längst till höger i navigationsmenyn och visualiseras med en ikon av en kundvagn. Den dyker bara upp när användaren är inloggad. Det finns en blå siffra bredvid som indikerar hur många resor som ligger i den, och i varukorgens drop down-meny finns information om hur mycket resorna, som för tillfället ligger där, kostar totalt. Användaren kan även se varje individuell resa och information om den (se figur 4.11). Vidare kan använ- daren ta bort resor ur varukorgen genom att trycka på krysset som finns till höger om resan (se figur 4.11). Klickar användaren på knappen ”boka” blir den inbokad på de resor som låg i varukorgen.

Figur 4.11: Varukorgen.

4.2.2.8 Profilsidan

På profilsidan består vänstra delen av uppgifter om den inloggade användaren. Dessa kan användaren redigera genom att klicka på den blå knappen med texten ”Redigera” (se fi- gur 4.12). Till höger finns en till navigationsmeny där användaren kan navigera mellan sina kommande resor, sin resehistorik samt de obetalda resor användaren har genomfört (se fi- gurerna 4.13, 4.14, 4.15). Vilken av flikarna användaren befinner sig på markeras genom att flik-knappen blir blå. Resorna kommer upp som en lista vilken man kan scrolla genom, samti- digt som navigationsmenyerna och kontoinformationen sitter fast. Längst ned i högra hörnet på fliken ”Obetalda resor” finns en blå knapp med texten ”Att betala: xx kr”. Klickar använ- daren på den visas ett nytt fönster där användaren kan betala för genomförda resor (se figur 4.16). Knappen dyker bara upp om det finns obetalda resor.

Figur 4.13: Profilsidan, på fliken ”Kommande resor”.

Figur 4.14: Profilsidan, på fliken ”Resehistorik”.

Figur 4.16: Fönstret för betalning.

4.2.2.9 Databasen

Applikationen har implementerats med databas enligt följande ER-diagram (se figur 4.17). Vid implementationen har det tagits hänsyn till att minimera antal attribut som används till de som faktiskt används i applikationen.

Figur 4.17: ER-diagram för databasen.

4.2.3 Systemarkitektur

Figur 4.18: Modell av systemet där server, klient och databas illustreras med respektive verk- tyg.

Systemet består av en klient, server och databas (se figur 4.18). Följande front-end och back- end verktyg användes i skapandet av en användbar webbapplikation.

4.2.3.1 Front-end

I front-end beskrivs de verktyg som användes för att skapa användargränssnittet. HTML & CSS

Webbapplikationens struktur, som består av dess DOM, Document Object Model, och dess innehåll definierades med HTML. För den visuella layouten till webbapplikationen använ- des CSS, som beskriver hur HTML-elementen ska representeras grafiskt.

Bootstrap

Bootstrap är ett front-end bibliotek med HTML- och CSS-baserade mallar för gränssnitts- komponenter. Bootstrap användes i arbetet för att designa webbapplikationen.

jQuery

jQuery är ett JavaScript bibliotek och användes för att manipulera DOM hantera händel- ser, animering och kommunikation med back-end genom asynkrona anrop. Biblioteket användes för snabba sid-laddningar, dess mångsidighet i funktionalitet och dess enkelhet i såväl användning som inlärning.

4.2.3.2 Back-end

I back-end beskrivs de verktyg som användes för att skapa dataåtkomst i systemet. Flask

Flask är ett mikro-webbramverk skrivet i Python och är baserat på Werkzeug och Jinja2. Flask tillsammans med flertalet av dess moduler användes i arbetet för att utveckla webbap- plikationen. Modulerna som användes:

• flask_login • flask_basicauth • flask_admin • flask_sqlalchemy • flask_migrate • flask_wtf • flask_mail MySQL

MySQL är ett hanteringssystem för relationsdatabaser och användes i arbetet för web- bapplikationens lagringsbehov.

1. Användaren befinner sig på startsidan och klickar på boka resa, antingen via knappen mitt på sidan eller på knappen i navigationsmenyn.

2. Användaren befinner sig på sidan “boka resa” och reserverar en eller flera resor som den vill åka med.

3. De aktuella resorna hamnar i varukorgen vilken ligger i navigationsmenyn. Använda- ren klickar på knappen “boka” i varukorgen.

4. Användaren genomför resan.

5. Användaren går in på sin profilsida och klickar på fliken obetalda resor.

6. Användaren klickar på knappen “Att betala: xx kr” varpå ett fönster kommer upp där den får fylla i e-postadress, kortuppgifter och klickar slutligen på knappen “Betala”.

4.3 Slutligt utvärderingstest

För att bedöma webbapplikationen användes ett case där Smiths L-formel användes för att mäta navigerbarhet tillsammans med en SUS enkät för att bedöma applikationens använd- barhet. Utöver detta fyllde testpersonerna i en enkät byggd på webbapplikationens krav- specifikation för att undersöka om kraven har uppfyllts. Nedan presenteras de resultat som erhölls från de slutliga utvärderingstesterna.