Module 1 | Oneworld | Jouw blik op interaction design
Briefing Prototype magazine app Publicatie voor tablet (Figma) voor Oneworld
De opdracht
De eigenaren van OneWorld willen meer jonge lezers van jouw leeftijd bereiken. Daarom vragen ze jou om een interactieve Native magazine-app voor tablet te ontwerpen, met daarin één magazinecover en één artikel. OneWorld publiceert dagelijks nieuws, achtergronden en interviews over actuele maatschappelijke thema’s zoals klimaat, mensenrechten en identiteit. Het platform trekt jaarlijks ruim 2 miljoen unieke bezoekers, maar onder jongeren is het bereik nog beperkt. Met dit project wil OneWorld jongeren sterker aanspreken en hen als vaste lezers binden.
Omdat jongeren voornamelijk lezen via hun online devices, ligt de focus op een digitale oplossing. Voor dit vak (User Experience Design, UXD) ontwerp je daarom een interactieve magazine-app voor tablet. Dit sluit deels aan op het vak Vormgeven (VRMG/BO), waar je eveneens een cover en artikel ontwerpt, maar dan voor een fysieke printversie. De basis is vergelijkbaar, maar het digitale ontwerp vraagt om een iets andere aanpak. Let op: Alle eisen die je krijgt bij het ontwerpen van een print versie zitten ook in de interactieve magazine-app zoals bijvoorbeeld de het werken met een stramien het toepassen van een Heading of een beginkapitaal.
Belangrijke verschillen voor een de interactieve magazine-app:
1. Interactie in de cover – de magazinecover moet nieuwsgierigheid wekken, de lezer prikkelen en uitnodigen om het hele artikel te lezen.
2. Interactieve beleving in het artikel – de lezer moet actief worden meegenomen tijdens het lezen van het artikel.
3. Rich media – gebruik van video, audio, animaties of andere interactieve elementen die verder gaan dan statische tekst en afbeeldingen. Dit versterkt de betrokkenheid en maakt de ervaring levendiger.
B. Vereisten interactieve Native magazine-app (voor het artikel en de cover)
1 Interactie tijdens het lezen van het artikel
Het artikel moet méér zijn dan alleen tekst en beeld: de lezer moet actief iets kunnen doen of beleven.
2 Minimaal 2 widgets
Voorbeelden: Image Slider, interactieve quiz, klikbare hotspots, carrousel.
3 Interactieve navigatie
De gebruiker moet op een interessante manier door het artikel kunnen bladeren of scrollen (bijvoorbeeld horizontaal swipen of door interactieve knoppen).
4 Gelaagde content oproepen en sluiten
Je moet als lezer gelaagde content kunnen oproepen en weer weg kunnen klikken Denk aan extra informatie, pop-ups, of uitklapbare vensters die de lezer zelf kan openen/sluiten.
5. Geïntegreerde video
Een video moet direct vanuit het artikel oproepbaar zijn en qua vormgeving naadloos passen.
6. Audio of muziek
De lezer moet een geluidsopname van tekst of zo of achtergrondmuziek kunnen afspelen tijdens het lezen.
7 Interactiviteit op de cover
De magazinecover moet minimaal één interactief element bevatten dat de nieuwsgierigheid prikkelt (bijvoorbeeld een bewegend onderdeel, klikbare animatie of hover-effect).
B.Vereisten interactieve Native magazine-app ( user interface van de app)
1. Startscherm / Cover-scherm
– Toont de interactieve cover.
– Bevat een duidelijke call-to-action (bijv.”hamburger men”,.“Open artikel”).
– Hamburger menu voor toegang tot artikel of navigatie.
2. Navigatiebalk of menu
– Eenvoudige manier om terug te gaan naar de cover of het artikel.
– Bereikbaar via het hamburger menu.
3. Interactieve knoppen
– Knoppen of iconen voor interacties, zoals:
– Video afspelen. Audio / muziek starten
– Extra gelaagde content openen (bijv. pop-up, slider, gallery)
4. Artikelweergave-scherm
– Ondersteunt scrollen/swipen en interactieve widgets.
– Centraal deel waar de tekst + visuals van het artikel worden getoond.
Voorbeeld magazine-app
Les presentatie
>>> Klik hier om de les presentatie te downloaden
De opdrachten
Week 2 Les 1 User journey en user story’s. ( )
Week 3 Les 2 Lay-out schetsen. (-sept)
Week 4 Les 3 Interaction design/ideeën voor touchscreen.( sept)
Week 5 Les 4 High-fidelity wireframes ( okt)
Week 6 Les 5 High-fidelity wireframes (-okt)
Week 7 Les 6 User Interface ( okt)
Week 8 Les 7 Prototype Adobe xd ( nov)
Week 9 Les 8 Prototype Adobe xd ( nov)
Week 2 User journey en user story’s. (sept)
Maak aan de hand van de lespresentatie en hierboven staande briefing en je onderzoekje naar mobiele immersed/interactieve publicatie magazine apps 1 user journey en 5 user story’s met daarin ook je eigen interactieve ideeën verwerkt voor 1 cover en 1 artikel die je kunt lezen via een mobiele applicatie.
>>A. User journey
De user journey zijn alle stappen die iemand aflegt binnen een mobiele applicatie, in dit geval alle stappen binnen het artikel.
1 -Beschrijft de ervaring die een persoon heeft tijdens een interactie event in de app
2 -Beschrijft de ervaringen en de functionele behoefte van een klant gedurende de reis.
3 -Een weergave van alle handelingen van een klant bij het gebruikmaken van een app voor tablet en mobiele app.
4 -Een user journey geeft een aantal stappen weer van de interactie binnen één app of website.
Formaat A3 minimaal 5 stappen in kleur
>>B. User story’s
Ik als < rol/gebruiker >
Dit eerste deel van de zin beschrijft de rol. Bijvoorbeeld: jonge lezer
Wil < iets doen >
Dit tweede deel van de zin bestaat uit wat de gebruiker wil doen. Dit maak je zo concreet mogelijk, bijvoorbeeld: Ik als klant (jonge lezer) wil op een interactieve manier door het artikel heen scrollen.
Zodat ik < er iets aan heb > (resultaat)
Dit laatste deel van de zin beschrijft het resultaat of het doel. Bijvoorbeeld: zodat ik op een speelse manier geïnformeerd word.
Een Word document
Kijk hier voor >> Hoe maak je een user journey ook al weer
Kijk hier voor >> Hoe maak je een user story’s ook al weer
Week 3 Lay-out schetsen. (sept)
Je gaat nu globaal de lay-outschetsen maken van het zelfgekozen artikel voor het mobiel-scherm en voor het tablet-scherm Je maakt lay-outschetsen op A3-vellen. Maak voor elk schermformaat 2 versnellende schetsen. Dus 2 voor het mobile-scherm en 2 voor het tablet-scherm. Om een idee te krijgen: ga eens op onderzoek uit naar een paar magazines die je bekijkt op je mobiel. Gebruik de kennis van teksthiërarchie die ook wel gebruikt wordt voor de opmaak van print (zie de PDF). Zorg dat in je lay-outschetsen de volgende onderdelen zijn doorvertaald voor mobiles / tablets: 1 Chapeau. 2 Heading/titel. 3 Intro. 4 Broodtekst. 5 Streamer. 6 Tussenkopjes
Houd in je achterhoofd bij het maken van je lay-outschetsen dat je in de vervolgstap interactiviteit gaat ontwerpen en toevoegen aan je ontwerp. Houd daar dus alvast rekening mee.
OPDRACHT
– lay-outschetsen op A3-vellen met grid/ kolommen
– 2 verschillende voor het mobile scherm (4 grid/ kolommen) Portrait
– 2 verschillende voor het tablet-scherm 8 grid/ kolommen) Portrait
– Verwerk en schets de afbeeldingen (geen kruizen)
– Gebruik 6 foto’s
– Gebruik 2 video’s
– Gebruik 1 geluidsopname
– Gebruik +- 750 woorden (Lorem Ipsum)
– Schets 1 cover-idee. Verwerk daarin 1 interactief idee.
– De 6 teksthiërarchie-onderdelen heb je verwerkt.
– Maak 1 presentatiemodel, op A3-formaat, van je beste schets met marker.
– Houd rekening met de interactiviteit die je gaat toevoegen.
Kijk hier voor >>> Wat is teksthiërarchie ook al weer?
Download hier >>> Grid voor Mobile
Download hier >>> Grid voor tablets
Week 4 Interaction design/ideeën voor touchscreen.(-sept)
Om een meerwaarde aan de jonge lezers mee te geven en te voorkomen dat het lezen van een magazine app voor mobile en tablet een oneindig saaie ervaring wordt, is het belangrijk dat je de lezer een interactieve ervaring gaat geven. Zo ga je een krachtige verbinding aan met je lezerspubliek.
Denk daarbij goed aan de mogelijkheden die je hebt om tekst en beeld anders te gebruiken dan in print magazine. Je kan bv. een tekstscroll inzetten om op een gelaagde manier tekst te laten zien Je kunt dingen laten oppoppen. Je kunt meerderde foto’s via een Image slider laten zien. Of een foto met buttons om de foto’s afzonderlijk te bekijken. Bedenk dus gelaagde content. Laat je lezer swipen. Laat de lezer onverwachts navigeren binnen het artikel. De mogelijkheden zijn eindeloos..
Opdracht 1 : Interactieve artikelen
– Doe onderzoek naar de mogelijkheden
– Onderzoek en ontwerp 6 verschillende ideeën voor interactiviteit
Bijvoorbeeld 2 verschillende widgets: 1 voor video, 1 voor foto’s ( voor 6 foto’s,) 1 geluidsopname
– Ontwerp iets voor gelaagde content (Tekst)
Laat de verschillende mogelijkheden zien in 2 interaction design lay-outschetsen
Opdracht 2: Cover (begin scherm)
Ontwerp/ schets 2 ideeën voor 1 cover, waarin 1 interactief idee of 1 animatie is verwerkt
1 foto of video
1 begeleidende tekst en/of kop
1 logo van Oneworld is gebruikt
De cover verwijst/ is klikbaar naar het artikel
Kijk hier voor >>> Voor de verschilde voorbeelden voor interactions
kijk hier voor >> leuke ideeën
Kijk hier voor >>> Voor de les hoe maak ik Micro-interacties
Week 5 en 6 High-fidelity wireframes (-okt)
Opdracht: High-fidelity wireframe
Maak van je lay-outschetsen en interaction design-schetsen nu een High fidelity wireframe in Adobe XD. Maak in Adobe XD de wireframe van alle pagina’s met alle onderdelen/stappen waarin je alle user story’s hebt verwerkt in grijsschaal. De wireframe in Adobe XD is nog niet interactief, maar wel met een legenda met bijschrift waar je goed uitlegt hoe je app gaat werken zoals je dat geleerd hebt in het eerste jaar.
Wireframes is een visueel hulpmiddel bij het ontwikkelen van je website en/of mobiele-app. Ze kunnen gezien worden als bouwtekeningen: een visuele weergave in grijsschaal van de structuur en functionaliteit en duidelijk het interactief idee/plan uitgelegd die in de app aanwezig zijn. Wireframes worden gedetailleerd per pagina uitgewerkt met een duidelijke goede legenda met bijschrift.
Kijk hier voor >>> Hoe maak ik een wireframes ook alweer
1 wireframe voor het mobile scherm
1 wireframe voor het tablet-scherm
1 wireframe Cover (begin scherm)
Week 7 User Interface (-okt)
Opdracht: User Interface styleboard
Je hebt onder andere bij het vak Vormgeven een eigen printversie ontworpen van je magazine. Vertaal die vormtaal naar een aantal User Interface (UI)-onderdelen die je gaat gebruiken om je prototype te kunnen maken Maak een verkorte styleboard met alleen de User Interface (UI)-onderdelen die nodig hebt voor jou prototype.
In ieder geval deze moeten verwerkt zijn in je User Interface styleboard: Werkt deze uit met illustrator of adobe xd
1. Hamburger menu
2. Knop (aan/uit)
3. Knop <mouseover> mousclick<
4. Vorm-elementen (texturen & patronen)
5. Kleur
6. Fonds
7. Vrije keuze ? Die specifiek van toepassing is voor jouw artikel
Wat is User Interface design? (UI)
De User Interface (UI) is de gebruikersomgeving van software. Het is de voorkant van een website of app. Wanneer je naar een website navigeert of een mobiele app opstart is alles wat je ziet de User interface (UI)..
Waarom is een goede UI belangrijk?
Een goede User Interface maakt deel uit van een goede User Experience. Door de UI aantrekkelijk en gebruiksvriendelijk te maken zorg je voor een betere ervaring voor jouw gebruikers.
Kijk hier voor >>> Wat is een user interface styleboard ook al weer
Kijk hier voor >>> 1 UI Trends
Kijk hier voor >>> 2 UI Trends
Kijk hier voor >>> Mobile User Interface
Kijk hier voor >>> 1 Mobile design pattern gallery
Kijk hier voor >>> 2 Mobile design pattern gallery
Kijk hier voor >>> 3 Mobile design pattern gallery
Week 8 en 9 Prototype Adobe xd (-nov)
Opdracht: Een digitaal interactief klikbaar prototype maken
Je gaat nu een digitaal interactief klikbaar prototype maken voor tablet of mobiel
Je gaat nu alle onderdelen die je hebt ontworpen samen laten komen in een draaiende demo. Een echt prototype dus van je magazine app met daarin de cover en de artikelen met echte tekst en beeld en de minimaal 1 bedachte interaction voor het artikel en 1 voor de cover.
Waarom maak je een klikbaar prototype?
Waarom is klikbaar prototyping zo belangrijk in het ontwerpproces? Jouw ontworpen interface van je app kan nog zo mooi zijn en zelfs bovenaan in Google staan: dat maakt je app nog niet automatisch een succes. Stel je voor: duizenden bezoekers van wie er niet één in actie komt door te bellen, mailen of bestellen of de artikelen te lezen. Dit kan je voorkomen door te testen!
Je test op een snelle manier
– De Usability en gebruikerservaring van gebruikers van jouw ontwerp.
– Interaction design ideeën
– Navigation design ideeën
– User Interface design ideeën
-Je kan snel direct verbeteringen aanbrengen zonder tijd en geld te verspillen.
-Je leert wat echt belangrijk is voor de gebruiker/ klanten.
– Klanten en opdrachtgevers worden heel laagdrempelig betrokken (Co-create).
– Het is snel, effectief en goedkoop.
– Het is extreem praktisch en voegt direct waarde toe.
Kijk hier voor >> De les hoe maak ik ook als weer een interactief klikbaar prototype in XD