Bygga kurser för mobila enheter NETCOMPETENCE 2017-10-30
Innehåll Inledning... 2 Om Responsive Design och Adaptive Design... 3 Responsive Design... 3 Adaptive Design... 3 Exempel... 4 Tips och rekommendationer... 5 Om Captivate 2017... 6 Tips och rekommendationer... 7 Om Articulate 360... 7 Tips och rekommendationer... 7 Om Netcompetence Talent Portal... 8 Tips och rekommendationer... 8 1
Inledning Först lite om olika namn och begrepp: mlearning = MobileLearning, är kurser man tar del av på mobiltelefoner och surfplattor. Nanolearning/Microlearning är namn på små korta kurser som bara tar upp det väsentligast. De genomförs ofta vid behov och på deltagarens initiativ. Kurserna genomförs ofta på mobila enheter. Multidevice Learning/ Multi-Platform Friendly elearning Content/ Responsive Learning, är kurser som automatiskt anpassar sig till den skärmstorlek som du har på din dator, surfplatta och mobiltelefon. Med Responsive Learning menar man egentligen Responsive Design för kurser. Adaptiv Design för kurser innebär att kursen är byggd för en specifik skärmstorlek eller enhet. (Adaptive Design ska inte förväxlas med Adaptive Learning som är skräddarsydd utbildning för en eller flera personer). Skärmstorlekar för mobiltelefoner och surfplattor Vilka skärmstorlekar som kurser ska kunna genomföras på är viktigt att fundera över och testa. Diagonala måttet på skärmen anges i tum ( ), och upplösningen i pixlar (px). Mobiltelefoner har oftast skärmstorlekar mellan 4 och 5,5 med upplösning mellan 960x640 px och 2560x1440 px. Surfplattor har från 7, 1024x600 upp till 12,9, 2732x2048 px. Om deltagarna använder företagets utrustning är det lättar att ha kontroll över skärmstorlekar än om deltagarna använder egna mobiltelefoner och surfplattor. 2
Om Responsive Design och Adaptive Design Responsive Design En responsiv kurs är en masterkurs som automatiskt anpassar sig till den plattform den öppnas på, avseende skärmstorlek och upplösning. Sidorna i en e-kurs kan innehålla olika mycket information beroende på vilken skärmstorlek kursen visas på. Responsiva kurser använder inte Flash, utan enbart HTML5. Vissa typer av kurser med simuleringar eller annat komplext innehåll lämpar sig mindre bra för Responsive Design. Adaptive Design Innehållet är avsett för en specifik uppsättning skärmstorlekar. Om e-kurserna ska kunna genomföras på flera olika enheter, innebär detta att flera version av kursen behövs eller att man skapar en version, en kompromiss, som fungerar på alla enheterna. Med Adaptive Design har du total kontroll över kursens alla delar och innehåll. Vilka typer av interaktivitet du kan använda begränsas av enhetens kapacitet. Generellt sett finns det fortfarande fler interaktiva möjligheter med Flash än med HTML5 även om det håller på att utjämnas. Fundera på och testa vad som fungerar bäst för dina kurser på din arbetsplats! 3
Exempel Exempel på e-kurser på desktop/laptop datorer. Här finns gott om utrymme för innehåll av olika slag. Exempel på e-kurs för surfplattor med mindre skärm och touchscreen funktionalitet. Där klicka på interaktiviteten ersätts med touch interaktivitet. Menyer döljs för att tas fram vid behov. Du behöver skala om dina bilder så de får plats på en lämplig skärmstorlek. Man ska inte behöva scrolla för att kunna se alla delar av sidan. 4
Exempel på e-kurs för mobiltelefoner, med ännu mindre skärm och touchscreen funktionalitet. Där klicka på interaktiviteten ersätts med touch interaktivitet. Menyer döljs för att tas fram vid behov. Du behöver skala om dina bilder så de får plats på en lämplig mobilskärmstorlek. Man ska inte behöva scrolla för att kunna se alla delar av sidan. Tips och rekommendationer Tänk mobil design innan du bygger kursen, inte efteråt! - För en responsiv kurs, skapa en accepterbar kurs innehållsmässigt för enheter med små skärmar, och bygg på stegvis med innehåll och grafik för enheter med större skärmar. - Korta kurser, max 7 textrader per sida. Endast viktigt att veta -innehåll. Ta bort allt bra att veta -innehåll. Trimma innehållet så det bara innehåller det absolut nödvändigaste. I en vanlig e-kurs byggd för datorskärmar har man ofta med fördjupningsavsnitt, frivilliga avsnitt m.m. Dessa får inte plats i en kurs avsedd för mobiler. - Snabb laddning av kursinnehåll är viktigt. Trimma bilder och grafik. JPEG och GIF fungerar bäst. Undvik PNG. Filmer bör vara mp4, använd ej flv. Hitta rätt avvägning mellan kvalitet och storlek. Kontrollera på alla tänkbara plattformar och skärmar. - Enhetlig layout i hela kursen. Menyn döljer man och tar fram vid behov. - Välj rätt storlek på knappar och text. Om texten är för liten går den ej att läsa. Var försiktig med färger. Svart text på vit bakgrund är oftast bäst. 5
- Hur navigerar man i en kurs på surfplatta eller mobiltelefon? Helst gör man det med fingrarna på samma sätt som annat på surfplattan och mobiltelefonen. - Använd helst linjär navigering. Undvik länkar till andra källor. - Vilka mobila enheter ska kursen anpassas för, testa noga. Testa också alltid din kurs i olika webbläsare. Om Captivate 2017 Med Captivate kan du skapa responsiva kurser eller använda specifika sidstorlekar för olika skärmstorlekar på datorer, surfplattor och mobiltelefoner. På surfplattor och mobiltelefoner kan man starta/stoppa/panorera och navigera i kursen med fingrarna. Befintliga kurser kan konverteras till responsiva, men ofta är det lämpligast att skapa responsiva kurser från början. Captivate kan visserligen automatiskt anpassa den befintliga kursen, men det blir ofta en del redigering ändå. När du skapar responsiva projekt anger du storlekar för tre olika layouter: Laptop, Tablet portrait och Mobile portrait. Det går att ange ytterligare två storlekar: Custom Tablet och Custom mobile vid behov. Den färdiga kursen känner av skärmstorleken på den enhet som kursen öppnas på och väljer layout utifrån det. På mobila enheter ändras layouten om enheten vrids, dvs växlar mellan stående och liggande. Viktigt att storlekarna för de olika layouterna ställs in rätt för att kursen ska fungera bra! Kursens layout kan bibehållas och anpassas för olika enheter. Objekt kan tas bort, skalas om, flyttas, bytas ut, formateras m.m. Olika layouter kan innehålla olika mycket text. Du kan också förhandsgranska kursen för att se hur den ser ut på olika enheter. Captivate innehåller många interaktiva element som kan användas i kursen. Det finns även en Geo-Locationfunktion som kan anpassa kursen till var användaren befinner sig och ge regionspecifikt kursinnehåll, t.ex. avseende språk. Draft är en storyboardingapp, för surfplatta, som kopplas samman med Captivate på datorn för att skapa kurser. Kursen kan delas med andra utan att 6
de har program eller app. När kursen är klar importeras den till Captivate på datorn och publiceras. Tips och rekommendationer Captivate är ett avancerat verktyg för produktion av kurser för olika enheter. Om du har befintliga kurser kan du spara om dem som responsiva. Du kan också välja att kursen ska ha olika innehåll och se olika ut på olika enheter. Captivate är ett bra val om du vill ha ett avancerat verktyg men det är inte lika lättanvänt som Articulate. Vill du ha ett enkelt verktyg är därför Articulate ett bättre val. Om Articulate 360 I detta programpaket ingår de tidigare fristående verktygen Articulate Studio och Articulate Storyline, samt flera andra program som underlättar skapandet av bra e-kurser. Responsiva kurser bygger man med programmet Rise. Storyline Storyline är ett lättanvänt program som liknar PowerPoint. Storyline kan återskapa många av flashövningarna som HTML5 versioner så de kan användas i kurser för surfplattor och mobiler. Även simuleringar gjorda med Storyline kan användas som HTML5. Studio Storyline är ett lättanvänt program som alltid utgår från en PowerPointpresentation. Många av animationerna man kan göra I PowerPoint fungerar även I HTML5 Rise Responsiva kurser bygger man med Rise som är ett lättanvänt verktyg som ger väl fungerande responsiva kurser. Tips och rekommendationer Rise Responsiva kurser är väldigt lätt att skapa med Rise, och resultatet blir bra. Möjligtvis kan Rise vara mindre lämpligt för kurser med avancerad 7
interaktivitet. Men den typen av kurser bygger man normalt enbart för datorer, inte för mobila enheter. Till skillnad från Captivate, så kan man inte ha olika innehåll och layout för de olika skärmstorlekarna, men det är knappast något problem då Rise fungerar så bra. På surfplattor och mobiltelefoner kan man starta/stoppa/panorera och navigera i kursen med fingrarna. På mobila enheter ändras layouten om enheten vrids, d.v.s. växlar mellan stående och liggande. Storyline/Studio Med dessa program kan du bygga bra kurser även för mobila enheter. Antingen så bygger du flera versioner av kursen för olika enheter, eller så bygger du en version för alla enheter. Observera att en version av kursen för alla enheter inte är responsiv. Det innebär att du måste utgå från att kursen ska fungera på den minsta enheten, t.ex. en mobil. Därmed behöver du välja en enkel layout avseende teckenstorlek, färger m.m. Om Netcompetence Talent Portal Portalen har stöd för responsiva kurser och kurser avsedda för mobila enheter. Vid import av scorm kan du bocka i Aktivera mobilstöd. När kursen sedan ska startas, öppnas först ett separat fönster med information om pop-up blockerare etc. Därifrån öppnas sedan fönstret med scormkursen i sin egen spelare. Detta gör att storlek och annat styrs helt ifrån scormkursen. Om du inte bockar i Aktivera mobilstöd öppnas kursen i Netcompetence vanliga spelarfönster. Tips och rekommendationer Kurser för mobila enheter skapade med Captivate och Articulate fungerar bäst i Netcompetence portal med Aktivera mobilstöd ibockat. Oavsett vilket verktyg du använder för kursproduktion bör du testa noga dina kurser på olika plattformar innan kurserna delas ut till medarbetarna. Captivate, Articulate och andra verktyg för kursproduktion utvecklas hela tiden. Håll dig uppdaterad genom att titta på deras webbsidor ibland. 8
9