Projekt 3 http://bysileha.com/2.semester/cupcake/remake/index.html Carlas cupcakes Amanda Hüttel Lindschouw Michelle Denise Andersen Simone Lenander Hansen
Indholdsfortegnelse PROJEKTFORMULERING 1.0 3 PROBLEMFORMULERING 1.1 3 PROJEKTPLANLÆGNING 1.2 3 START PRODUKT 1.3 3 SLUT PRODUKT 1.4 3 STRUKTUR 1.5 3 ANALYSE 2.0 4 RESPONSIVE DESIGN 2.1 4 PIKTOGRAMMER 2.2 5 KODEEKSEMPEL 2.3 6 DESINGVALG 2.4 7 BRUGERTEST 3.0 7 RESULTAT AF BRUGERTEST 3.1 7 KONKLUSION OG REFLEKSION 4.0 8 KILDEKODE 5.0 8
Projektformulering 1.0 Problemformulering 1.1 Hvordan optimerer vi vores cupcakesite, så den designmæssigt stadig fungerer med de nye krav; opskriftside, søgefunktion, login og database. Hvilke tekniske udfordringer kommer med optimeringen og hvordan løser vi dem? Projektplanlægning 1.2 ud af, hvad der skulle laves - altså de fysiske/tekniske ting og derefter lavede vi en WBS (work breakdown structure), hvor vi brød vores arbejdsopaver ud og fandt ud af, hvad det krævede af os. Så lavede vi et Gant-kort, hvor vi fastlagde hvad vi skulle lave og hvornår vi skulle lave det. Derefter begyndte vi at implementere de nye krav, hvor vi løbende toppen. Navigationen er placeret horisontalt i toppen af boksen og består af punkter med titlerne Forside, Om mig, Galleri, Kontakt og til sidst Webshop. På linje med navigationen, men helt ude i højre hjørne af boksen er placeret to ikoner, der linker til henholdsvis Facebook og Instagram. På hjemmesiden har tanken været at skulle gøre brugerne af websitet opmærksomme på at der er en webshop hvor man kan købe cupcakes, udstyr og opskrifter. Dette har vi gjort ved at sætte en streg under navigationspunktet Webshop samt sat nogle knapper, som fører til webshoppen, ind rundt omkring på websitet hvor de passer ind, dette har vi gjort for at lave en call-to-action så vi viser læseren, hvad vi gerne vil have dem til at gøre. På det nye website består den nye del blandt andet i, at man kan oprette sig som bruger og dermed uploade opskrifter. Samtidig skal det nye website dermed også indeholde en side som skal fungere som en kogebog med alle opskrifter, samt en side hvor brugerne kan logge ind og blive registreret i databasen. Slut produkt 1.4 Vi valgte at holde læringsprocessen i fokus og arbejde sammen omkring alle opgaver, så vi alle lærte mest muligt. Begrundelsen var, at vi alle tre fandt projektet sværere og derfor krævede det, at alle var med og bidragede. Start produkt 1.3 På det allerede eksisterende website, hvor den nye del endnu ikke er implanteret, er layoutet forholdsvis enkelt. Det består af en header med skriften Carlas Cupcakes og dermed en boks, der skal forestille at fortsætte videre ned af siden når man ikke kan scrolle mere, som det oftest kan ses på blogs, og hvor logoet overlapper i det venstre hjørne i Den nye del består også i at gøre hjemmesiden responsive. Det vil sige at navigationen skal ændres fra punkterne bestående af ord til ikoner således at det er nemmere at læse og trykke på når layoutet bliver mindre. Vi har valgt at fjerne den farvede baggrund fra mobilenheden, da ville give store udfordringer for brugervenligheden og læseren ville have svært ved at læse både tekst og se menulinjen. Vi havde nogle tekniske problemer med implaniteringen af det nye menupunkt til opriskrifterne og valgte derfor at slette galleri for at holde menupunkten mere overskuelig og enkel. Struktur 1.5 Strukturen vi har valgt på vores cupcake site er en combinated structure, hvor vi både har gjort brug af herakisk og linær struktur. Dette bliver mere forstærket, efter vi har implamenteret den nye side om opskrifter, da den følger en linær struktur, hvor den ene ting, logisk bliver fulgt af en anden (ingredienser).
Analyse 2.0 Vi havde nogle problemer med hvordan vi skulle kompinere vores design med det responsive design. Et af vores store problemer var, hvordan man på telefonen skulle kunne se, at en side er valgt - altså hvilken side man Vi valgte at overskiften på siderne var nok. Dog havde vi diskussion om, hvorvidt vi skulle lave piktogrammerne i en anden farve og bruge dem, når man var på valgte side. Vi havde nogle problemer med vores brugeroprettelse på telefonversionen havde vi nogle problemer med, at få formlen til at fylde hele skærmen i stedet for, at have en masse luft omrking, så det kræver at brugeren zoomer ind for at skrive sig op. Der udover havde vi nogle problemer med at få vores output til at blive vi løst problemet og nu fungerer begge ting. Vi havde i starten nogle problemer med database og brugeroprettelse, som gjorde det svært for os, at komme videre. Disse problemer blev også løst, da det kun var små fejl, der gjorde forskellen. Vi lavede en mock-up over hvordan vores form skulle se ud, for at give os noget at arbejde efter. Responsive design 2.1 Skærmstørrelse PC - Da vi skulle starte ud med at lave en hjemmeside, der fungerede til en normal PC skærm og derefter lave det i henholdvis medium (tablet) og mini (telefon) lavede vi en graceful degradation i stedet for en progressive enhancement, hvor man starter i småt og udvider, hvilket ville være mest optimalt. For at lave tablet og telefon funktionen mest brugervenlig har vi forstørret billeder og tekst, da det hurtigt kan blive uoverskueligt og svært at se, hvis man gør hele hjemmesiden herunder også teksten og billederne. Dette gør det sværer for brugeren at læse og navigere og derfor nedsætter det brugervenligheden. Vi har valgt at knapper og links skal være min 57px bred, da dette Da både fysiske begrænsninger og brugssituation spiller ind når man skal designe til tablet og telefon, er det vurdere, hvor brugeren er, når de læser indholdet. Mange der læser indholdet på telefonen, kan let blive forstyrret af udefrastående ting og derfor miste fokus, hvis der er for meget på siden. Derfor er det vigtigt at holde, i sær, telefon skærmen enkel og meget brugervenlig i stedet bruge computeren i stedet for. Skærmstørrelse tablet ( ipad mini) horisontalt - vi valgte at tage udgangspunkt i ipad mini s skærmstørrelse. Mange tablet er blevet mindre og derfor er de mindre kluntede at have med i køkkenet. Vi valgte dog at lave skærmen horisontal, da denne skærmstørrelse minder mere om en computerskærm og derfor gør det lettere at bevare en masse genkendelighed fra den oprindelige hjemmeside og vi kan derfor beholde en masse fra den oprindelige hjemmesiden, uden at det trækker ned på brugervenligheden. Da det også er muligt at købe et tastertur til sin ipad, vil den også skulle vende horisontalt og derfor er det en endnu mere oplagt grund til at vende den på dette led. Skærmstørrelse telefon (iphone 5) vertikalt - vi valgte at tage udgangspunkt i iphone 5 s skærmstørrelse, da vi skulle lave responsive design. Desuden valgte
vi at lave hjemmesiden vertikal, da det passer bedre med blog funktionen på siden og det er nemmere og mere overskueligt at scrolle ned over siden med den ene hånd. Det gør det praktisk at stå med telefonen i køkkenet, da hjemmesiden er blevet forenklet. Det gør det altså muligt at stå med den ene hånd i kagedejen og den anden med opskriften på telefonen. Da mange hellere vil stå med telefonen end at tage hele computeren med ud i køkkenet, er det vigtigt at denne skærmstørrelse virker optimalt og er brugervenligt. Vi har også valgt at ligge menuen i bunden, da det er nemmere at betjene bunden Piktogrammer 2.2 Formålet med at bruge piktogrammer tager udgangspunkt i vores responsive design. Da det er svært at læse titlerne på menupunkterne når man ser dem på en mindre skærm-størrelse, har vi altså valgt at bruge piktogrammer på menuen i tekst-form som vi har på websitet, hvor ordene vil virke alt for små og utydelige. For at bruge den samme design-stil som på computer-skærmen og Ipad-skærmen, har vi valgt at bruge den samme grå farve på piktogrammerne. Vi har valgt at bruge et design på vores piktogrammer, der er simpelt, således tidig har vi valgt at designet skal passe til resten af siden således at vi bevarer den kvindelige og hyggelige stil i form af forholdsvist runde og bløde hjørner. Som forside -knap har vi valgt dette billede af et hus, da det oftest bliver brugt som hjem-knap og dermed er genkendeligt. Det er et form for henvisningstegn eller et index-tegn, da det forestiller et hus og man derfor tænker på hjem og forsiden, som man så da man gik ind på siden. I stedet for vores Om mig -punkt har vi valgt at bruge dette tegn, der forestiller en form for visitkort, hvor der er et billede af en person og noget tekst, der et billede hvor man med det samme ville tænke på at det var en side om Carla, som ejer hjemmesiden. Vi kom frem til dette tegn, da et visitkort oftest omhandler en person sådan som siden også gør. Dette tegn er også et index-tegn, da det netop forestiller noget der omhandler en person og derfor kan man naturligt tænke på en Om mig -side. Som Kogebog -punktet har vi valgt at bruge dette tegn, som rent faktisk forestiller en kogebog med en cupcake på forsiden. Da dette tegn faktisk betyder det som det forestiller, er det et ikon. Vi har valgt at bruge dette ikon, som forestiller et brev, i stedet for vores Kontakt -punkt. Et brev bliver oftest brugt i sammenhæng med kontakt og skaber dermed noget genkendelighed. Tegnet er et index-tegn, da det forestiller et brev, som vi naturligt ville sætte i sammenhæng med kontakt. Til vores webshop har vi valgt at bruge dette tegn, der forestiller en typisk butik. Dette er et index-tegn, da tegnet forestiller en butik og da vi dermed naturligt vil tænke på en webshop eller et sted hvor man kan købe noget når det er brugt som et menupunkt. Vi har valgt at fjerne stregen under webshop -punktet, da man oftest vælger at købe noget på computeren i stedet for på mobilen, så man ikke behøves call to action i så stor en grad her.
Kodeeksempel 2.3 Vi validerede vores koder i javascript. Da det ikke er nok at bruge html5s indbyggede valideringsmuligheder, da ældre browsere ikke kan bruge disse, har vi brugt javascript i stedet. Vi har valgt at når man registrerer sig som bruger, bliver navnefeltet og efternavnefeltet valideret således at hvis man skriver et navn eller et efternavn på mindre end 2 bogstaver, vil en rød skrift med en tekst om fejl dukke op i tekstfeltet. Til denne validering har vi valgt at bruge denne funktion: istooshort = function(element, msg, minlength) { var text = element.value; if(text.length < minlength){ element.value = msg; element.style.color = red ; return false; } return true; samt eventhandleren onsubmit, som også angiver elementet, message og minimum length i funktionen. Eventhandleren gør at hvis man skriver et navn eller efternavn på mindre end to bogstaver og derefter trykker på submit-knappen, vil formularen ikke blive sendt til databasen, men der vil i stedet dukke disse fejl-tekster op i tekst-felterne. Ulempen ved denne eventhandler er, at en fejl kun dukker op i et af tekstfelterne selvom man har lavet fejl i det andet også. Hvis man retter fejlen og så trykker på submit-knappen igen, vil der bare dukke en ny fejl-tekst op i det andet felt, hvilket ikke er helt optimalt. Vi har dog problemer med at formulareren stadig bliver sendt til databasen, selvom informationerne er blevet tastet forkert ind. Vi kunne også have valgt at bruge eventhandleren onblur, som gør at hvis man har skrevet noget, som man i javascriptet har sat til at være en fejl (i dette tilfælde et navn eller efternavn på mindre end 2 bogstaver), vil en fejl-tekst dukke op i tekstfeltet når man klikker udenfor det. Vi har dog ikke valgt at bruge denne, men onsubmit, da når man bruger onblur, vil formularen ikke blive sendt til databasen. Havde vi brugt onblur ville eventhandleren se således ud på navnefeltet: navnefelt.onblur = function() { istooshort(navnefelt, Navnet er for kort, 2); Men da vi har valgt at bruge onsubmit ser den således ud: submitknap.onsubmit = function() { var submit = true; submit = istooshort(navnefelt, Navnet er for kort, 2); if (submit === true){ submit = istooshort(efternavnfelt, Navnet er for kort, 2); } return submit; }; Selvom vi har valideret vores forms med javascript, har vi dog alligevel valgt at bruge html5s indbyggede autofocus således at brugere, der ikke benytter sig af ældre browsere, kan få gavn af det.
Desingvalg 2.4 vi havde valgt vores målgruppe, valgte vi har have et mere brugbart design, og derfor har en del kendskab til internettet og hjemmesider i forvejen. På vores mobil og ipad enheder valgte vi at fokusere endnu mere på brugervenlighed end på websitet, da det ville være for uoverskueligt med for meget Vi valgte at beholde det orginale design på vores ipad version, så den ligner vores hjemmeside. Vi havde nogle udfordringer med genkendelig, da vores farvebaggrund ikke fungerede på mobil versionen - derfor er der en større forskel på mobil end på ipad og computer versionerne. På mobil versionen er det meningen, at bruger skal skabe genkendeligheden fra computer versionen. Brugertest 3.0 Vi har testet to personer, for at se hvordan vores formularer fungerede. Vi har brugt 4 spørgsmål til brugertesten Testperson 1: - Hvordan uploader du en opskrift på hjemmesiden? Testpersonen går ind på opskrifter i menupunktet og trykker på opret op- at komme ind på opret bruger. Kommentar: Hvor er det rart at jeg bare kan klikke på linket og komme direkte ind på opret bruger - Prøv at skriv noget forkert inde på opret bruger/ ikke udfyld et felt Testpersonen synes at advarselsbeskeden fungerer optimalt, men at tilbage knappen let kan forveksles med submit knappen. fremgår. - Oplever du at designet på opskrifterne og formerne hænger sammen med resten af websitet? Testperson 2: - Hvordan uploader du en opskrift på hjemmesiden? Personen kigger lidt rundt på siden, men vælger så at gå ind under opskrifter. Testpersonen bliver forvirret over at man skal indtaste et bruger-id, men - Prøv at skriv noget forkert inde på opret bruger/ ikke udfyld et felt Testpersonen synes at det er let at oprette sig som bruger og forstår let at man skal udfylde felterne. Kommentar: Det er fedt at teksten er rød, så man kan se at det er en fejl. Testpersonen har lagt mærke til opskrifterne da personen gik ind for at - Oplever du at designet på opskrifterne og formerne hænger sammen med resten af websitet? Det eneste testpersonen synes ikke hænger sammen er når man opretter en bruger får man en besked om hvilket bruger-id man har fået. Denne besked er bare sort tekst på hvid baggrund og passer ikke til resten af designet. Resultat af brugertest 3.1 Ud fra brugertesten fandt vi ud af at vores tilbage knap var placeret det ikke bliver forvekslet med submit knappen, men det var stadig ikke særlig optiamlt, derfor valgte vi at slette den helt og lave et link i stedet for. Vi har også valgt at style useropskrifter.php, så den ligner resten af siden. Ud fra testen fandt vi små fejl og mangler, som vi selv havde overset og vi kunne derfor bruge testen til at få dem rettet.
Med henblik på vores website rettet mod målgruppen damer i alderen 20-30 år har vi udviklet et responsive design, der både virker på tablets og mobiler. Dog fungerer designet bedst horisontalt på tabletten og samtidig har vi taget udgangspunkt i Iphone 5, hvilket vil sige, at designet er mest optimalt på mobiler med samme skærmstørrelse. Vi synes dog at vi er kommet frem til et resultat, der fungerer godt ud fra vores evner, som de er nu, og vi er glade for at lære hvordan responsive design fungerer, da det helt sikkert er vejen frem for medier i fremtiden. Vores bruger- og opskriftregistreringsmoduler samt vores modul til visning af opskrifter er integreret på vores website således at de passer godt til designet. Da ingen af gruppens medlemmer har nogen erfaring med databaser og php og derfor ikke er så stærke i det, har det været noget af en udfordring. Vi synes dog at resultatet er blevet rigtig godt og vi er glade for at vi nu i fremtiden kan bruge databaser og php til f.eks. kontaktformularer på nettet. Alt i alt har det været et spændende, men udfordrende projekt, hvor vi har haft større forventninger til os selv end hvad vores evner har rakt til. Vi er dog godt tilfredse med resultatet og har samtidig lært en masse af projektet. Kildekode 5.0 Wisler-Poulsen, Ian: 20 designprincipper Amanda Hüttel Lindschouw http://www.ahldesign.dk Michelle Denise Andersen http://www.michelle-denise.dk Simone Lenander Hansen http://bysileha.com Wisler-Poulsen, Ian: Usability signsymbollogo cpy.pdf på fronter: 2 semester/ design og visualisering/pictograms and semiotics