Mobiel Datanose Op dit moment is mobiel datanose niet goed gedaan; je krijgt gewoon de site te zien zoals je het te zien krijgt op pc's of laptops. Maar vaak heb je het probleem dat je op je mobiel moet zien waar je les hebt, en dit werkt niet fijn. Ons idee was eerst om een mobiele applicatie te maken, maar daar zaten enkele nadelen aan, je moet bijvoorbeeld de applicatie downloaden, en dit neemt ruimte in beslag op je mobiele apparaat. Om die ruimte en download tijd te besparen hebben wij besloten om een mobiele site te ontwerpen. Het is de bedoeling om alle functies die de desktop site heeft te behouden, maar om de nadruk te leggen op het bekijken van het rooster, dit is namelijk het voornaamste gebruik. De keuze tussen applicatie en website was wel lastig, zo zijn er bepaalde functies die weggelaten worden als je kiest voor een website in plaats van een applicatie; je kan bijvoorbeeld geen offline mode hebben en ook geen notificaties gebruiken. De voordelen van een applicatie waren echter minder dan de voordelen van een website, en daarom is voor het laatste gekozen. Zoals al eerder gezegd is het offline bekijken van het rooster is ook lastiger met een mobiele site, maar net zoals op de desktop datanose kan de gebruiker kiezen om het bestand te exporteren in de agenda, dit is een mogelijkheid maar als er veranderingen zijn dan krijg je die niet te zien, dus het is geen optimale oplossing, maar het is beter dan helemaal niks. De user story die wij gebruiken bij het ontwerpen is "Als student wil ik last minute mijn rooster zien zodat ik weet waar ik heen moet". Deze user story impliceert al dat de website snel moet werken, want soms vergeet je gewoon om te kijken waar je college hebt en dan moet dat last minute gebeuren. Nog een user story is "Als student wil ik dat de mobiele site dezelfde structuur heeft als de desktop site". Het is fijn als je een bepaald routine hebt om bijvoorbeeld je rooster te vinden, die routine precies hetzelfde is als je op de mobiele site bent, dit maakt de user experience een stuk beter, het is niet fijn als je een compleet nieuwe structuur moet doorgaan op de mobiele website. Nog een onderdeel om de het verkrijgen van het rooster makkelijk te houden is dat door cookies de laatst ingevude student nummer onthouden word, de gebruiker krijgt de optie om die aan te klikken zodat het niet opnieuw ingevuld hoeft te worden. Dit scheelt misschien een paar seconden maar het maakt het gebruik wel fijner.
Interactieontwerp Op de normale website van Datanose is heel veel informatie te vinden. Veel van deze informatie wordt door studenten niet veel gebruikt, denk hierbij aan een rooster voor lokalen. Daarom is gekozen om deze informatie uit de mobiele website te houden. Via de normale website, waar ook vanuit de mobiele website naar verwezen wordt, blijft deze informatie wel uiteraard beschikbaar. De gemiddelde gebruiker die geen behoefte heeft aan deze informatie, zit het nu ook niet in de weg. De functies die in de mobiele toepassing zijn opgenomen, is het bekijken van het persoonlijke rooster en het inloggen, voor toegang tot aanvullende informatie over jezelf. De homepagina is erg simplistisch. De gebruiker kan ervoor kiezen om zijn persoonlijke rooster te bekijken, of in te loggen. Als de gebruiker op Personal timetable drukt, moet hij een studentnummer invullen. Daarnaast staat er het laatst gebruikte nummer, zodat je als gebruiker op je eigen telefoon niet steeds je studentnummer in hoeft te vullen. Daarna komt de gebruiker bij de dag van vandaag terecht. Vanaf hier kan hij naar het weekoverzicht en vanaf daar naar het maandoverzicht. De gebruiker ziet zijn studentnummer rechts bovenin het scherm. Daarnaast staat de dag van vandaag boven het dag overzicht, en de het weeknummer van de week boven het weekoverzicht, om de gebruiker feedback te geven waar hij zich bevindt. Als je wilt inloggen, gaat dit via het CAS-systeem. Dit is geïntegreerd in dit ontwerp. Als je ingelogd bent kan je ook naar je persoonlijke rooster gaan. Daarnaast kan je je gegevens, behaalde resultaten en actieve vakken bekijken. Via de header waar Datanose in staat, kan de gebruiker altijd terugkeren naar de homepagina. Dit gebeurt ook als de gebruiker is ingelogd en weer uitlogt. Op derekheek.nl/interactiedatanose.php zijn alle wireframes terug te vinden. Ook kan er op de buttons geklikt worden om te kijken wat de consequenties van de gemaakte acties zijn.
Grafisch ontwerp We mobiele website is ontworpen volgens de standaard richtlijnen voor mobiele sites. Links bovenin de drie balkjes waarmee een menu kan worden geopend. In dit menu kan de gebruiker naar alle belangrijke onderdelen van Datanose navigeren. De agenda kan per dag worden weergegeven. Voor de gebruiker is het rooster dan overzichtelijk te zien. De layout van het rooster is gebaseerd op de layout van de agenda-apps van iPhone en Android. Hierdoor is de gebruiker er al enigszins bekend mee. Eigenlijk spreekt alles voor zich. Er zijn 2 knoppen om naar de vorige en volgende dag te gaan. Het lettertype waar we voor hebben gekozen is Arial. Dit is een lettertype wat er modern en strak uitziet, en elk apparaat heeft dit lettertype. De locaties van de colleges zijn met “narrow” Arial. Het kleurenschema is met Adobe colors gecreëerd. De verschillende tinten blauw passes goed bij elkaar.
Referenties https://developers.google.com/webmasters/mobile-sites/ http://www.bluetrainmobile.com/mobile-showcase
Technisch Ontwerp De implementatie van een mobiele versie voor Datanose kost weinig geld. Immers is aan het fundamentele aspect, namelijk de beschikking over een stabiele en goed functionerende website, al voldaan. Wat toegevoegd moet worden is code in onder andere CSS, die ervoor zorgt dat de website een aangepaste weergave geeft op verschillende apparaten en browsers. Het inhuren van webdesigners die veel verstand hebben van Responsive Design, is hevig aan te raden om te zorgen dat de zichtbaarheid van alle elementen en de bruikbaarheid van de website optimaal blijft. Echter bestaat de mogelijkheid om studenten, of werknemers op de UvA hiervoor in te huren. Het kan wat tijd duren om deze veranderingen te implementeren, maar het uiteindelijke resultaat levert genoeg voordelen op om dit te compenseren. Belangrijk voor het technisch ontwerp van de mobiele versie voor Datanose, is dat het op alle moderne Smartphones goed moet kunnen functioneren. Daarbij is het vooral belangrijk dat vrijwel alle browsers dezelfde weergave hebben. Dit houdt ook onder andere in dat de fonts en lettergroottes op alle versies identiek zijn. Dit kan bijvoorbeeld bereikt worden door google fonts te implementeren in alle webpagina’s. Als een gebruiker in dit geval een recente versie van een willekeurige browser gebruikt, worden de fonts vanuit een online server geladen, en niet vanuit de ingebouwde fonts van de browser zelf. Hierdoor zal de website op het gebied van lettertypes altijd hetzelfde eruit zien. Om te zorgen dat Smartphone gebruikers niet de reguliere, maar de mobiele weergave te zien krijgen van Datanose, wordt de resolutie van het scherm van de gebruiker gemeten. Hierdoor krijgt de gebruiker een aangepaste versie te zien die goed zichtbaar is op Smartphones, maar ook tablets en andere apparaten. Dit kan bereikt worden door in CSS3 Media Queries toe te passen die aangeven welke resolutie er weergegeven moet worden voor ieder apparaat. Hierbij wordt de minwijdte en max-wijdte voor ieder apparaat ingesteld. Daarnaast is de implementatie van flexible grids en flexible images essentieel om afbeeldingen en andere elementen aangepast weer te geven. De omvang van deze elementen worden in dat geval relatief aan de grootte van het scherm weergegeven. De Bootstrap framework, die geïmplementeerd is in HTML, CSS en JavaScript helpt bij het implementeren van de bovenstaande technieken. Al om al is de toevoeging van een mobiele versie voor Datanose goedkoop en efficiënt, en levert het veel voordelen op over de lange termijn. Dit aangezien het docenten, studenten en overige werknemers de mogelijkheid biedt om overal hun rooster en/of andere informatie snel op te halen.
Referenties
W3schools - http://www.w3schools.com/html/html_responsive.asp
GetBootstrap - http://getbootstrap.com/css/
