Issuu on Google+

Risskov Fysioterapi

Projektrapport Multimedieteknologi og interaktionsdesign Marts 2011

Birgitte テ話ro Lotte Schacht Marianne Mテクller Susan Thorup


Projektrapport: Risskov Fysioterapi

Indhold Indledning ........................................ 2 Foranalyse ........................................ 2 Kundemøde ...................................................... 2 Projektbeskrivelse ............................................ 2 HOME-modellen ............................................. 3

Undersøgelse ................................... 3 Tidsplan ........................................................... 3 Idéudvikling ..................................................... 3 Konceptbeskrivelse .......................................... 4 Indhold ............................................................. 4 Udformning...................................................... 4 Kommunikation ............................................... 5

Design .............................................. 6 Informationsdesign .......................................... 6 Interaktionsdesign ............................................ 7 Præsentationsdesign ......................................... 7

Realisering ....................................... 9 Konklusion..................................... 10 Designmanual ................................ 10 Bilag ............................................... 11 Tidsplan ......................................................... 11 Flowchart ....................................................... 12 Mindmaps ...................................................... 13 Skitser ............................................................ 15 Skelet ............................................................. 16 Storyboard...................................................... 17 Mock up af siderne ........................................ 21

User Guide ..................................... 25 Kontakt .......................................... 25

Birgitte Øbro, Lotte Schacht, Marianne Møller, Susan Thorup.

side 1


Projektrapport: Risskov Fysioterapi

Indledning Denne projektrapport er udarbejdet til Risskov Fysioterapi efter 6 ugers intensivt kursusforløb i ”Multimedieteknologi og interaktionsdesign”. Opgaven var fastlagt og baseret på, at foretage en ændring af en bestående hjemmeside. Rapporten beskriver gruppens proces, overvejelser og det færdige produkt. Sitet findes på http://multimediekursus.ats.dk/0511/lotte/wp

Foranalyse Kundemøde Onsdag d. 9. marts 2011 havde vi besøg af Ann Kristin Anker fra Risskov Fysioterapi som er vores kontaktperson i projektet. På mødet blev projektets forudsætninger afdækket og kundens ønsker til et re-design af hjemmesiden klarlagt. Efter mødet havde gruppen umiddelbart et tilstrækkeligt informationsgrundlag, således der kunne vælges udviklingsmetode og procesmetode. Projektbeskrivelse Risskov Fysioterapi har eksisteret i mere end 25 år, og der er i dag 7 selvstændige fysioterapeuter og 1 sekretær i klinikken. De er kendt for at være meget kompetente, og vores kontaktperson vurderer, at de har et godt image. Markedsføring er primært ”mund til mund”. Valg af fysioterapeut er en tillidssag og bunder ofte i anbefaling fra venner, familie og den praktiserende læge. Målgruppen er alle aldersgrupper, bosiddende primært i lokalområdet, eller med arbejdspladsen tæt på samt praktiserende læger og beboere på lokalcentre, idet fysioterapeuterne også foretager hjemmebehandlinger. Kunden ønsker et mere tidssvarende site med nye billeder, som de selv har taget. Et andet vigtigt element er, at de kun vil bruge et minimum af tid på vedligeholdelse. Det er endvidere vigtigt for dem, at sitet giver indtryk af afslappet og god atmosfære på klinikken. Nye tiltag der skal fremgå af siden er, at der tilbydes hjemmebehandling, og at der løbende oprettes nye træningshold. Vi har mere detaljeret beskrevet kundens ønsker og krav under afsnittet ”Design” - side 6. Vi fik meget frie rammer med hensyn til font, farver og logo, dog ønsker man at bevare logo’et. Kunden ønsker en vertikal venstre menu i stedet for den nuværende horisontale.

Birgitte Øbro, Lotte Schacht, Marianne Møller, Susan Thorup.

side 2


Projektrapport: Risskov Fysioterapi

Vi har i projektet brugt prototyping og HOME-modellen. Vi har valgt prototyping, fordi den er velegnet til så kort et udviklingsforøb, som der er tale om her og fordi den giver mulighed for at holde kontakt med kunden under hele processen og tilrette produktet ud fra den feedback, som kunden giver.

HOME-modellen Projektet er udarbejdet efter HOME- modellen (Holistic Open Mulitmedia Development Method), som er en metode der beskæftiger sig både med procesforløbet samt udvikling af produktet. Formålet med metoden er at sætte arbejdet i system ved at gøre designerens valg sammenhængende, velovervejede og konsekvente i forhold til opgaven. Vi har fulgt de fire overordnede principper, foranalyse, undersøgelse, design, og realisering.

Undersøgelse Tidsplan Inden vi gik i gang med step 1 i selve undersøgelsesfasen, udarbejdede vi en tidsplan, hvor vi kunne indsætte estimeret samt forbrugt tid (se side 11). Formålet med tidsplanen er at man kan planlægge tidsforbruget og justere arbejdsindsatsen så resultatet nås til tiden at man kan udarbejde en efterkalkulation på udviklingstiden for hele projektet og således få en fornemmelse af, hvad omkostningerne totalt vil være samt omkostningerne for de enkelte udviklingstrin. Idéudvikling Idéudvikling har til formål at sikre nytænkning at generere ideer at skabe fælles forståelse

Birgitte Øbro, Lotte Schacht, Marianne Møller, Susan Thorup.

side 3


Projektrapport: Risskov Fysioterapi

I gruppen vægtede vi idéfasen højt og brugte således en del tid på brainstorming samt hentede inspiration fra andre websites, specielt dem som kunden havde henvist til. Gennem en grundig og vidtfavnende brainstorming fik vi mange gode ideer frem. Vi tog udgangspunkt i det nuværende site, hvorefter vi slap det og kom op med masser af ideer. Herunder drøftede vi, hvad vi forbandt med fysioterapi, kom med ideer til logo og til udformningen af logo, til illustrationer, stemninger osv. Fakta, ideer og tanker er skitseret i 3 forskellige mindmaps (se bilag side 13ff). Kunden havde visse krav og ønsker (som beskrevet under Design) som vi var underlagt og dermed blev nogle ideer umiddelbart frasorteret. Efterfølgende i processen mailede vi frem og tilbage med kunden, da vi havde nogle konkrete spørgsmål, vi ønskede svar på, for at vi kunne komme videre med arbejdet i den rigtige retning. Konceptbeskrivelse Idé og formål Kunden havde i forvejen et website som man ønskede moderniseret inden for visse rammer. Sædvanligvis bruges websites som en ganske vigtig del af en virksomheds markedsføring. I dette tilfælde er det ikke det primære formål, idet kunden vurderer dette som mindre væsentligt, da langt de fleste i målgruppen bliver henvist til behandling af egen læge. Kundens website skal nærmere betragtes som et slags supplement til kundens image profil og skal først og fremmest forsyne målgruppen med konkrete oplysninger. Indhold På baggrund af ovennævnte har vi fundet det mest relevant, at sitet primært skal indeholde facts, såsom at beskrive klinikken, personerne bag, den samlede kompetence og ydelser samt hvordan man nemt kan kontakte klinikken og i øvrigt umiddelbart se, hvor denne er placeret. Vi har dog krydret med en indbydende tekst og selvfølgelig et tiltalende grafisk udtryk. Udformning Vi brugte en del tid på at drøfte stilvalg og udseende af websitet i forhold til at ramme kundens målgruppe og under hensyntagen til kundens ønske om en høj grad af overskuelighed, informationstilgængelighed og simplicitet. Det er vigtigt at målgruppen meget let finder de oplysninger, denne har brug for. Endvidere var ønsket fra kundens side, at websitet fremstod i et enkelt og indbydende design. Menupunkterne er, efter kundens Birgitte Øbro, Lotte Schacht, Marianne Møller, Susan Thorup.

side 4


Projektrapport: Risskov Fysioterapi

ønske, placeret vertikalt i venstre side. Vi vurderede, at det var hensigtsmæssigt, at den valgte menuknap ”lyser op”, dvs. skifter farve til en lysere farveversion, så man umiddelbart kan se, hvor man står. Alle sider er let overskuelige og målgruppen indhenter meget let de oplysninger, der måtte være brug for. Websitet indeholder af samme årsag ingen under menupunkter. I denne fase lavede vi adskillige udkast / skitser primært til forside. Nyt / ændret indhold på det eksisterende website: Vi har tilføjet menupunktet ”Behandling” Vi har ændret teksten på nogle af menuknapperne samt ændret rækkefølgen Under menupunktet ”Find os” har vi indsat et krak kort samt link til busforbindelser Åbningstider er placeret på forsiden Footeren går igen på alle sider og indeholder firmanavn, adresse og telefonnummer Logo og firmanavn er placeret oppe i venstre hjørne - i vores nye udgave af logoet, hvor firmanavnet er placeret under og i forbindelse med den runde figur Flere af teksterne er ændret og omplaceret til andre sider Menuknapperne er placeret vertikalt i venstre side Mulighed for ”Ris og Ros” på ”Kontaktsiden” Farve Billeder Med udgangspunkt i skitser og udkast udfærdigede vi 3 forskellige Mock ups. Vi var hurtigt enige om, hvilket vi ville arbejde videre med. Kommunikation Formål En kommunikationsplan har til formål at sikre, at det korrekte budskab bliver formidlet til målgruppen. Afsender Risskov Fysioterapi er et velrenommeret behandlingssted, som har eksisteret i mere end 25 år. Behandlerne, som alle i princippet er selvstændige, besidder en bred vifte af kompetencer. Udover de mange behandlingstilbud som foretages i selve klinikken, forestår Risskov Fysioterapi også hjemmebehandlinger i eksempelvis lokalcentre. Målgruppe Hovedparten af målgruppen er behandlingskrævende personer i alle aldre, primært bosiddende i lokalområdet, men patienter der flytter

Birgitte Øbro, Lotte Schacht, Marianne Møller, Susan Thorup.

side 5


Projektrapport: Risskov Fysioterapi

fra området kommer gerne langvejs fra på grund af gode behandlingsresultater. Endvidere antager vi, at praktiserende læger samt beboere på lokalcentre læser klinikkens website. En sekundær målgruppe er personer, der blot ønsker at træne i en afslappet og god atmosfære Budskab Risskov Fysioterapi ønsker at fremstå som en virksomhed med et kompetent behandlerteam som sætter faglighed i højsæde og dermed også sætter en ære i at arbejde på et højt professionelt plan. Atmosfæren er behagelig, uhøjtidelig og afslappet. Patienten skal føle sig tryg og glad og frem for alt føle sig i centrum. Risskov Fysioterapi ønsker endvidere at formidle et varieret tilbud inden for forskellige behandlingsmetoder samt et bredt udvalg af træningsmuligheder i et velassorteret træningscenter med mange specialmaskiner.

Design Informationsdesign Al grafisk design handler om at overføre information fra afsender til modtager. Det er derfor vigtigt at tage afsæt i typen af brugere, hvilket vi vil vende tilbage til nedenfor. Et gennemtænkt informationsdesign er en forudsætning for en positiv brugeroplevelse. Kundens ønsker og behov Inden mødet med kunden fik vi udleveret projektoplægget som bl.a. indeholdt kundeønsker og –krav. Disse er kort skitseret nedenfor: en mere tidssvarende website med opdaterede fotos i god kvalitet minimum vedligehold det skal fremgå, at kunden har overenskomst med Sygesikringen Foto af den samlede medarbejderstab Mulighed for at kunne oplyse om nye tiltag Mulighed for at kontakte Risskov Fysioterapi pr. e mail Ny forsidetekst samt vejledende tekster til øvrige sider leveres af RF Siden skal kunne ses i sin helhed uden at der skal scrolles I forbindelse med det efterfølgende møde med Ann Kristin fra Risskov Fysioterapi kom yderligere information frem: -

Ingen billedgalleri

Birgitte Øbro, Lotte Schacht, Marianne Møller, Susan Thorup.

side 6


Projektrapport: Risskov Fysioterapi

-

Ingen under menuer

Vores vurdering af målgruppens behov Vi har indbygget ovennævnte ønsker og krav i websitet og har vægtet brugervenlighed højt, da brugerne af Risskov Fysioterapi’s site ikke nødvendigvis har den store viden om navigation på websites. Vi har derfor valgt at lave en enkel organisering, så brugerne let kan finde det, de søger, bl.a. ved en logisk navngivning af menupunkterne og ved at undgå under menupunkter. Vores flowchart afspejler netop en simpel struktur og få brugervenlige navigationsmuligheder. Interaktionsdesign Den primære mission med udvikling af interaktionsdesign er at sørge for, at samspillet mellem bruger og site er så nemt og hurtigt som muligt og, at brugerne umiddelbart uden problemer kan navigere på sitet. Graden af interaktion kan variere meget. I vores design af sitet får brugeren forholdsvis få, men enkle og nyttige valgmuligheder ved, at vi har valgt en klassisk hierarkisk opbygning. Der er således tale om et website med ret lav kompleksitet. Det mest avancerede er, at brugerne har mulighed for at udfylde en kontaktformular, som ved at trykke på en knap sendes til klinikken. Præsentationsdesign Målet med præsentationsdesignet er at designe websitet med udgangspunkt i alle de informationer, som er indhentet undervejs i de enkelte faser. Man skal overføre struktur og information til kommunikation og en form for oplevelse og det er her vigtigt at man holder sig til det simple ved at gøre det nemt for brugeren af navigere rundt og finde frem til de rette informationer. Vigtigt er også at alt indhold har en mening. Det vil være optimalt at inddrage brugeren i denne proces, men det er ikke muligt i dette tilfælde. Grafiske designparametre Form Vi har valgt formatet 900 x 600 for at sikre, at der ikke skal scrolles hverken vertikalt eller horisontalt for at se hele siden. Siden er kodet fra ”scratch” og vi har således lavet vores eget Wordpress tema. Farver

Birgitte Øbro, Lotte Schacht, Marianne Møller, Susan Thorup.

side 7


Projektrapport: Risskov Fysioterapi

Vi har udelukkende holdt os til farverne i logo’et i websitet såvel i menuknapperne som i bjælkerne og footeren. Netop disse bløde og rolige farver signalerer ro og harmoni. Såfremt logo’et eksempelvis var rødt og orange, ville vi ikke have valgt disse ”sprælske” farver til sitet. (Se designmanualen side 10.) Illustrationer Vi har valgt et stort headerbillede på alle sider og på nogle sider kombineret med små billeder i forbindelse med brødteksten. Headerbilledet er i de fleste tilfælde lavet som en sammensætning af flere fotos, en collage. Billedmaterialet er leveret af kunden. Vi overvejede flash effekt i headeren, således at der var et billedskifte. Endvidere overvejede vi at indsætte logo’et som vandmærke på alle sider. Vi lavede logo’et mindre – fra 150 x 150 px til 130 x 130 px, så det tog sig bedre ud både med den nye placering på siden og med placeringen af den runde figur over og tæt forbundet med firmanavnet. Typografi / tekst Vi har valgt den enkle og letlæselige skrifttype Verdana såvel i menuknapper som i brødtekst. (Se designmanualen side 10.) Dog er firmanavnet som er en del af logo’et uændret. Al brødtekst står sort på hvid baggrund. Teksten er primært af informerende karakter og understøtter websitet’s seriøsitet. Vi eksperimenterede med forskellige ”Effekter” til menuknapperne. Stil og stemning Alle valg der træffes i forbindelse med udformning af et website tager udgangspunkt i målgruppen. Stil og stemning fremkommer ved en kombination af komposition, farver, illustrationer og typografi, som tilsammen gerne skal harmonere med målgruppen og det budskab, man ønsker at formidle. Ud fra den betragtning og udfra kundens ønske om et minimum af vedligehold har vi valgt et simpelt, klassisk og brugervenligt design uden ”forstyrrende” elementer. Stemningen er rolig og indbydende. Det eneste ”vilde” er, at de grønne og blå farver changerer i menuknapperne og den bagvedliggende farve.

Birgitte Øbro, Lotte Schacht, Marianne Møller, Susan Thorup.

side 8


Projektrapport: Risskov Fysioterapi

Realisering I realiseringsfasen overføres beslutningerne vedrørende websitets udformning til praksis. Vi har prioriteret idéudvikling og design meget højt og derfor også brugt meget tid på disse faser. Nedenfor har vi indsat den mock up, som viser resultatet af alle vore overvejelser og som vi valgte at konstruere sitet ud fra.

Men det skulle vise sig, at den praktiske tilblivelse af siden, altså selve kodningen gav temmelig mange udfordringer. Vores valg var at bruge et tomt Wordpress tutorialtema. Altså nærmest lave vores eget tema. Vi har skrevet det i HTML og CSS og har lagt de nødvendige PHP-koder ind, så temaet kan bruges i Wordpress, blandt andet fordi Wordpress gør det muligt, at kunden på en enkel og ukompliceret måde kan vedligeholde sitet. Siderne er navngivet med det, de hedder i linkene så det er nemt at se, hvilken side man er på, når kunden skal vedligeholde sitet. Alle billederne er redigeret i Photoshop. Det var nødvendigt at ændre sproget fra engelsk til dansk, da Wordpress ikke kan ”læse” æ, ø og å. Den runde figur i logo’et har vi fået fra kunden i en jpg-fil, og har herefter designet det og udarbejdet logoet i en ny jpg-fil. I forbindelse med kunden’s besøg onsdag den 16. marts, hvor vi præsenterede siden, fik vi lidt flere input – især til teksten. De 2 repræsentanter fra kunden var generelt imponerede over vores gruppes udkast og udtrykte, at de kunne lide vores design.

Birgitte Øbro, Lotte Schacht, Marianne Møller, Susan Thorup.

side 9


Projektrapport: Risskov Fysioterapi

Konklusion Vi har efterkommet kundens ønsker og krav samt tilføjet nyt til den bestående website og vurderer, at vi har barslet med et site, der tilgodeser kundens ønsker og tager hensyn til den brede målgruppe, som måske ikke er så vant til at navigere rundt på et website. Vi har vægtet simplicitet, brugervenligheden og den informative del højt. I vores samarbejde i gruppen har vi været gode til at inspirere hinanden og bygge videre på kreative ideer. Endvidere har vi benyttet os af vores forskellige kompetencer og således suppleret hinanden og arbejdet konstruktivt sammen. Nogle havde mere indsigt i kodning og andre var gode til at skrive, men vi har alle bidraget aktivt i de forskellige faser og arbejdet inden for de mange udviklingstrin.

Designmanual Font

Verdana 12 normal Verdana 12 bold

Verdana 14 normal Verdana 14 bold Farver blå (som logo) #392927 grøn (som logo) #367f67

lys blå (link) #8780ed lys grøn (link) #6de1cb hvid #ffffff

Logo leveret af kunden anvendelse: placeres øverst til venstre på alle sider

Birgitte Øbro, Lotte Schacht, Marianne Møller, Susan Thorup.

side 10


Projektrapport: Risskov Fysioterapi

Bilag Tidsplan

Birgitte テ話ro, Lotte Schacht, Marianne Mテクller, Susan Thorup.

side 11


Projektrapport: Risskov Fysioterapi

Flowchart

Birgitte テ話ro, Lotte Schacht, Marianne Mテクller, Susan Thorup.

side 12


Projektrapport: Risskov Fysioterapi

Mindmaps

Birgitte テ話ro, Lotte Schacht, Marianne Mテクller, Susan Thorup.

side 13


Projektrapport: Risskov Fysioterapi

Birgitte テ話ro, Lotte Schacht, Marianne Mテクller, Susan Thorup.

side 14


Projektrapport: Risskov Fysioterapi

Skitser

Birgitte テ話ro, Lotte Schacht, Marianne Mテクller, Susan Thorup.

side 15


Projektrapport: Risskov Fysioterapi

Valgt skitse til forside

Skelet

Birgitte テ話ro, Lotte Schacht, Marianne Mテクller, Susan Thorup.

side 16


Projektrapport: Risskov Fysioterapi

Storyboard Storyboard generelt for alle sider:

Knapper

8 navigationsknapper: 35x100 tekst: se flowchart normal knap: tonet vertikalt fra blå til grøn (modsat baggrunden) aktiv knap/hover: tonet vertikalt fra lysblå til lysgrøn

Grafik

rflogo1.jpg 130x130 i header dflogo.jpg 79x79 nederst i i sidebar

Baggrund

header: hvid content: hvid sidebar: tonet fra grøn til blå vertikalt footer: blå

Tekst

Verdana - størrelse: 12 tekstfarve i header og content: sort tekstfarve i footer: hvid tekstfarve på knapper: hvid

Farver

blå: #392927 (som i logoet) grøn: #367f67 (som i logoet) lys blå til aktiv knap: #8780ed lys grøn til aktiv knap: #6de1cb

Birgitte Øbro, Lotte Schacht, Marianne Møller, Susan Thorup.

side 17


Projektrapport: Risskov Fysioterapi

Storyboard for de 8 siders header og content Se beskrivelserne pテ・ de 2 nテヲste sider.

Birgitte テ話ro, Lotte Schacht, Marianne Mテクller, Susan Thorup.

side 18


Projektrapport: Risskov Fysioterapi

Storyboard for de 8 siders header og content - fortsat Som det generelle, hvor andet ikke er angivet. 1 Forsiden

header: header.jpg (collage) content: tekst – (fra word dokument) tider: boks 170x235, ramme: sider 1px, top og bund 3px blå

2 Klinikken

header: header2.jpg (collage) content: tekst – (fra word dokument) klinikken.jpg

3 Behandling

header: header3.jpg content: tekst – (fra word dokument)

4 Træning

header: header4.jpg (collage) content: tekst – (fra word dokument)

5 Priser

header: header5.jpg (collage) content: tekst – (fra word dokument) priser: boks 260x235, ramme: sider 1px, top og bund 3px blå

Birgitte Øbro, Lotte Schacht, Marianne Møller, Susan Thorup.

side 19


Projektrapport: Risskov Fysioterapi

6 Hvem er vi

header: header6.jpg (collage) content: tekst – (fra word dokument – kun titel og navn under hvert foto) de 8 personbilleder

7 Find os

header: header7.jpg (collage) content: tekst med link til bus 6, 12, og 16 (fra word dokument) kort.jpg med link til krak

8 Skriv til os

header: header8.jpg (collage) content: tekst – (fra word dokument) kontaktformular – (fra word dokument)

Birgitte Øbro, Lotte Schacht, Marianne Møller, Susan Thorup.

side 20


Projektrapport: Risskov Fysioterapi

Mock up af siderne

Forsiden (boksen med åbningstider skal være logoblå)

Birgitte Øbro, Lotte Schacht, Marianne Møller, Susan Thorup.

side 21


Projektrapport: Risskov Fysioterapi

Klinikken

Behandling

Trテヲning

Birgitte テ話ro, Lotte Schacht, Marianne Mテクller, Susan Thorup.

side 22


Projektrapport: Risskov Fysioterapi

Priser

Hvem er vi

Find os

Birgitte テ話ro, Lotte Schacht, Marianne Mテクller, Susan Thorup.

side 23


Projektrapport: Risskov Fysioterapi

Skriv til os

Birgitte テ話ro, Lotte Schacht, Marianne Mテクller, Susan Thorup.

side 24


Projektrapport: Risskov Fysioterapi

User Guide Hvis Risskov Fysioterapi vælger at implementere vores forslag til hjemmeside, udarbejder vi en user guide med følgende indhold: 1. 2. 3. 4.

Sådan får du adgang til at komme ind og rette Sådan går du ud igen Generelt om at rette Sådan retter du a. Åbningstider b. Priser c. Hold d. Hvem er vi (tilføje/fjerne medarbejder) 5. Tips og tricks hvis du vil rette andre ting 6. Kontakt User guiden laves som en trin for trin-guide med skærmbilleder og vejledende tekst.

Kontakt Kontaktperson: Navn : Lotte Schacht Tlf.: 22790296 Mail: emberiel@yahoo.dk

Birgitte Øbro, Lotte Schacht, Marianne Møller, Susan Thorup.

side 25


Projektrapport Risskov Fysioterapi