slashdotfox Toelichting functioneel ontwerp

slashdotfox Toelichting functioneel ontwerp Een functioneel ontwerp wordt gebruikt door ontwerpers en ontwikkelaars om overzicht te bieden aan de uit te voeren werkzaamheden. Op basis van het functioneel ontwerp is een planning gemaakt die aan het einde van dit document te vinden is. Belangerijk: een functioneel ontwerp is niet bedoeld als weergave voor uit eindelijk ontwerp, maar slechts een schematische weergave van de inhoud. Termen en afkortingen referentie Indien je een onbekende term of afkorting tegenkomt met een getal erbij, dan kun je de uitleg daavan vinden aan het einde van dit document.

Functioneel ontwerp website de Ontdekkng Datum 10.11.2010 Versie 1.0

1

slashdotfox Schematisch overzicht De website zal bestaan uit drie pagina’s waaronder de verschillende indelingen van content gemaakt zullen worden.

Home Over de Ontdekkng Contact


2

slashdotfox Home

1

De pagina die de gebruiker als eerste te zien zal krijgen bevat de volgende onderdelen: 1

Logo en hoofdmenu om te navigeren. Het hoofdmenu bevat de verwijzingen naar de pagina’s (Home, Over de Ontdekking, Contact).

2

De landenkiezer

3

Extra ‘call to action’ met impressies van winkel en link ‘Over de Ontdekking.

4

Overzichte met visuele informatie pakketjes

5

Knoppen om de website te spreiden (facebook, twitter, hyves en email)

LOGO

2

Home

Over de Ontdekking

Contact

Landenkiezer

4

3

Winkel

Over de Ontdekking

5

F T H E


3

slashdotfox Home

Landenkiezer

Met de landenkiezer kan een gebruiker een land uit kiezen om informatie over te weergeven, of op basis van bestemmingsvoorkeuren van de gebruiker, kan de landenkiezer advies voor bestemmingen uitbrengen. 1

Bestemmingskiezer in normale status.

2

Indien de gebruiker klikt op ‘kies een bestemming, dan zal er een lijst met bestemmingen verschijnen om een keuze te maken.

3

Indien de gebruiker kiest voor keuze hulp, dan zullen er opties weergeven worden om voorkeuren voor bestemmingen te defineren.

4

De geadviseerde bestemmingen zullen verschijnen in de bestemmingslijst.

1

Bestemmingskiezer Kies een bestemming

2

Bestemmingskiezer

Bestemmingskiezer

Kies een bestemming

Kies een bestemming

Keuzehulp nodig?

Keuzehulp nodig?

Amsterdam Aukland Beiroet Belgrado Boedapest Bombay Boston

4

3

Amsterdam Ik wil Aukland Ver weg Beiroet dichtbij Belgrado Boedapest warm weer Bombay zacht weer Boston Actief Ontspannen Ontdekken

Bestemmingskiezer Filter bestemmingen

Kies een bestemming Keuzehulp nodig?

Sluit keuzenhulp

Beiroet Belgrado


4

slashdotfox Home

Call to action

Op de home pagina zal een vaste ruimte beschikbaar zijn waarin actie matig toeglicht kan worden waarom naar de Ontdekking te komen en waarin impressies getoont kunnen worden. 1

Ruimte voor kleine impressies

2

Knop die verwijst naar de pagina met meer informatie over de winkel.

De winkel

1

2

Over de Ontdekking


5

slashdotfox Home

Visuele informatie pakketjes (1/2)

Visuele Informatie pakketjes zjn compacte visualisaties van live data. Deze worden gekoppeld met de live data van een bestemming d.m.v. het gebruik van beschikbare API’s (1). 1 2

3

4

De lokale tijd van de gekozen bestemming zal weergegeven worden.

LOGO

Home

Bestemming 1

Huidige met de tempratuur in celsius en een graphic die het type weer visualiseerd (zonnig, regen, sneeuw, etc). Daarnaast word de optie aangeboden om het gemmidelde weer in een bepaalde maand te zien, indien de bezoeker in de toekomst de bestemming wilt bezoeken. Er zal visueel getoont worden welk bijpassend product(en) in de winkel te verkrijgen is. Het invoeren hiervan kan gedaan worden in het CMS(2) waarbij merk (bijv. lonely planet) gekoppelt kan worden met een bestemming. Op basis van die koppeling zal op de website een afbeelding (of meerdere) gegenereerd worden waarbij bestemming en merk (bjv. lonely planet) op een boek cover getoont word.

Contact

Over de Ontdekking

3

2

lonely planet

35°C

Lissabon

Lissabon

4

Winkel

Goedenmiddag! Boa tarde!

5

17 / 03 / 2011 Vandaag in de winkel: Er kwam een klant die jarenlang voor zijn werk in

Lissabon

heeft gewoont. Na 25 besloot hij..... - Frans

Over de Ontdekking F T H E

Een digitaal woordenboek waarbij gebruikt gemaakt word van de Google Translate API(1) (57 talen beschikbaar).


6

slashdotfox Home

5

Visuele informatie pakketjes (2/2)

Blogpost / berichten • Standaard word er altijd de meest recente blogpost(3) weergeven als onderdeel van de visuele informatie pakketjes.

LOGO

Home

Bestemmingskiezer 1

• Indien er een bericht is geschreven in de afgelopen 6 maanden die getagged(4) is met een bestemming die gekozen is, dan zal deze op de plek getoont worden.

• Indien de blogpos(3) te lang wordt, dan word de tekst automatisch afgesneden en komt er een link bij die de gebruiker naar het uitgebreide blogpost kan sturen (die zich bevind op de pagina ‘over de ontdekking).

3

2

lonely planet

35°C

Lissabon

Lissabon

• Indien er meerdere berichten zijn getagged(4) met de gekozen bestemming, dan wordt alleen de meest recente getoont. • Ten alle tijden zal een blogpost(3) die tussen de Visuele informatie pakketjes staan een link bevatten naar het volledige archief.

Contact

Over de Ontdekking

4 Winkel

Goedenmiddag! Boa tarde!

5

17 / 03 / 2011 Vandaag in de winkel: Er kwam een klant die jarenlang voor zijn werk in

Lissabon

heeft gewoont. Na 25 besloot hij..... - Frans

Over de Ontdekking F T H E


7

slashdotfox Home

Spreiden

Voor het delen van de website wordt gebruik gemaakt van de bestaande, meest bekende sociale netwerken. Op de website worden toepassingen geinstalleerd waarmee het delen voor gebruikers van sociale netwerken snel uitgevoerd kan worden. Tevens kan het delen ook door het gebruik van een email toepassing op de site. 1

Deel procces via Facebook, twitter en Hyves.

2

Deel procces via email toepassing.

1

F/T/H

2

E

Inloggen netwerk

Gegevens invullen

Toestemming geven

Verzenden

Delen


8

slashdotfox Over de Ontdekking Deze pagina zal enkel en alleen het doel hebben mensen zo helder en kort mogelijk te informeren en impressies te geven om ze naar de winkel te brengen. 1

2

3 4

De locatie van de Ontdekking zal getoont worden op een kaart. Hiervoor wordt de Google Maps API(2) gebruikt (i.v.m. de rijke opties die het geeft). Een bijhorende knop zal een volledige weergave van de kaart tonen in Google Maps. Hierin kan de gebruiker zijn route nader bepalen. Fotomateriaal op groot formaat zal er voor dienen om impressies van de winkel over te brengen Een korte stuk tekst zal op een staccato wijze uitleg geven over de winkel. Overzicht van geposte blogs op datum en titel met daarnaast weergaves van de blogposts(3)

LOGO

Home

Over de Ontdekking

Contact

Route

1

2

Toon volledige kaart

Openingstijden 3 Blog

Blogarchief 4

F T H E


9

slashdotfox Contact (1/2) Deze pagina zal op directe wijze de mogelijkheden weergeven voor het contacteren en bereiken van de ontdekking. 1

2

De locatie van de Ontdekking zal getoont worden op een kaart. Hiervoor wordt de Google Maps API(2) gebruikt (i.v.m. de rijke opties die het geeft). Een bijhorende knop zal een volledige weergave van de kaart tonen in Google Maps. Hierin kan de gebruiker zijn route nader bepalen. Een email formulier met 5 vragen, waarvan 3 verplicht zijn.

LOGO

Home

Route

1

2

Over de Ontdekking

Contact

De heer Mevrouw

Naam* Email*

Toon volledige kaart

Algemene contact informatie

Telefoon Bericht*

Verstuur

*Verlichte velden F T H E


10

slashdotfox Contact (2/2) Indien het bericht niet verstuurt kan worden door het ontbreken van een verplicht veld of door een foutief email adres, dan zal een melding verschijnen om de gebruiker te attenderen.

LOGO

Home

Route

Over de Ontdekking

Contact

De heer Mevrouw Naam*

Johannes

Email* Toon volledige kaart

Algemene contact informatie

Telefoon Bericht*

Hallo! Verkopen jullie ook de Lonely Planet van Brussel? Groet, Johannes

Verstuur

Er ging iets mis, uw adres klop niet

*Verlichte velden F T H E


11

slashdotfox Alternatieve content Dit is de informatie die getoont wordt als het systeem van de gebruikt plugins(5) heeft uitgeschakelt of niet geinstalleerd.

LOGO

Er word een melding gemaakt om de gebruiker te attenderen deze te activeren of te installeren (met uitleg).

informatiemelding Download plugin


12

slashdotfox Error 404 Een error404 is de benaming voor de pagina die weergegeven wordt zodra een gebruiker een tikfout in het adres maakt na het adres zelf. Bijvoorbeeld:

LOGO

www.deOntdekking.info/voorbeeldfout Hierbij verwijst de browser van de gebruiker wel naar de website van de Ontdekking, maar weergeeft een foutmelding omdat ‘voorbeeldfout’ niet achter het adres hoort te staan. De gebruiker krijgt in dat geval een knop met de optie om naar het juiste adres te gaan.

informatiemelding naar de website


13

slashdotfox Termen en afkortingen

1

CMS Staat voor ‘content management systeem’. Dit is de naam voor de schermen waarin de beheerder van de website, op eenvoudige wijze zelf content kan schrijven / beheren.

2

API Staat voor ‘application programming interface’ en word door ontwikkelaars gebruikt om bepaalde bestaande / live in een eigen gecreeerde omgeving te tonen.

3

4

Blogpost De benaming voor een gepubliseerd bericht op een blog. Taggen (getagged)

5

In dit geval: een bericht een registratie kenmerk geven. Het kenmerkje word gebruikt om te sorteren en om koppelingen kunnen maken, Plugins Invoegtoepassingen op het systeem van de gebruiker om interactieve content mee te tonen


14

slashdotfox Technische speceficaties De volgende eisen zullen van toepassing zijn op de technische ontwikkeling: A

Resolutie Minimaal toonbaar op 1024 x 728

B

Browser ondersteuning Microsoft Internet Explorer 7.0 + Mozilla Firefox 3.0 + (MAC / PC) Google Chrome 5.0 + (MAC / PC) Opera 9+ Apple Safari 3.0+

C

Plugins Adobe Flash Player 10.0 Javascript (wordt gebruikt door 98.2% van de gebruikers volgens Adobe, september 2010) Mobiel / geen plugins

D

Alternatieve content toonbaar E

Statestieken Statestieken zullen gemeten en gerapporteerd worden met Google Analytics


15

slashdotfox Planning A

Funtionele speceficaties Zaterdag 11 december

B

Start design / start opbouwen backend ontwikkeling Zondag 12 december Presentatie homepage design Zondag 9 januari

C E

impementatie design homepage Zondag 9 januari

F

Presentatie achterliggende pagina’s Zaterdag 22 januari

G

Verder implementatie en doorontwikkeling website Zaterdag 22 januari Copy voorstaal

H

Zondag 6 februari I

Presentatie demo model 27 februari

J

K

Testfase en hosting server toepassingen installeren 27 februari Oplevering en livegang 12 maart


16

slashdotfox Toelichting functioneel ontwerp

Recommend Documents