dec 14

Heb jij al geMock-upped?

Interface, Tools 10 Comments »

Als je een website, leeromgeving of (mobiele) applicatie maakt dan is het altijd slim om eerst op papier te gaan ontwerpen. Om een bepaald interactie ontwerp met de klant en anderen door te spreken is het handig om een soort proef te maken. In e-Learning/webdesign land vaak aangeduid met de aparte term ‘Mock-up’. Wat is het en hoe kun je ze maken?

Wat is een Mock-up?

Volgens Wikipedia is een mock-up:

…een tijdens de ontwerp- of productiefase op schaal of op ware grootte gemaakt model van een ontwerp of product. In de software-industrie komt het begrip tevens voor om vroeg in het ontwikkelproces het software-ontwerp qua gebruikersinterface te testen. Een mockup wordt voornamelijk gebruikt voor demonstraties, lessen, evaluaties of promotie. Een mockup krijgt pas de term prototype als het ontwerp ook echt werkt. Meestal zijn de mockups dus voorbeelden qua uiterlijk.

Vaak wordt een mock-up in eerste instantie op papier uitgewerkt. Zelfs dan kun je met gebruikers al enigszins gekunsteld het interactieproces doorlopen en kijken hoe de gebruikers je ontwerp ervaren. Een andere veelgebruikte vorm is die van een  PowerPoint presentatie. Je klikt dan door verschillende schermen en maakt hyperlinks. Op die manier kun je snel duidelijk maken wat de bedoeling is. De verwachtingen van eenieder wordt duidelijk en hoewel het maken van een goede mock-up veel tijd kost, kan het je veel dure ontwerpfouten en communicatiefouten besparen. De tijd win je later altijd terug.

Wat is een mock-up niet?

Zoals Wikipedia al aangaf is het geen werkend proto-type. En dat is voor sommige mensen (waaronder klanten of opdrachtgevers die nog niet eerder met het fenomeen mock-up hebben gewerkt) moeilijk. Bij een mock-up let je op het interactieontwerp  (wat doet iemand op welk moment op je site, op welke manier en op de grote lijnen. Het is minder tot onbelangrijk hoe de site/applicatie/omgeving er precies uit komt te zien.

Soms merk ik daardoor dat het beter is om het voorbeeld niet erg te laten lijken op het beoogde eindresultaat. Anders gaan mensen commentaar leveren op details en verliezen het geheel uit het oog. Als je de vraag krijgt “kun je die balk ook een andere kleur geven” dan heb je het niet goed gedaan 😉

Maken van een mock-up; handige tools

Een van de manieren is met de computer maken van een mock-up. Ik heb ervaring met een aantal. Ten eerste heb ik wel eens Microsoft Visio gebruikt om snel een eerste mock-up te maken. Het kan er wel mee maar is er niet specifiek voor gemaakt en dat merk je. Net iets minder handig dan speciale mock-up applicaties.

Een gratis te gebruiken online tool om een mock-up voor specifiek een iPhone applicatie te maken is deze. Hier sleep je met elementen, verander je tekst en stuur je de url door naar iemand anders. Nadeel is dat het redelijk beperkt is, dat je geen klikbare mock-up kunt maken en dat je niet kunt exporteren. Wel kun je twee verschillende stijlen kiezen. Hieronder zie je de strakke versie en een versie die meer handmatig geschetst lijkt. Misschien is die tweede wel handiger om te gebruiken.

mockup1Mock-ups gemaakt met http://iphonemockup.lkmc.ch

Hans de Zwart gebruikte in zijn post over de Moodle app een programma om mock-ups te maken dat veelzijdiger is en dat je kunt downloaden (niet gratis). Dit programma Balsamiq is er voor zowel Windows, Linux en de Mac. Balsamiq  is wat breder dan de website die ik net noemde. Je kunt er zeer veel verschillende mock-ups mee maken. Op een eenvoudige manier sleep je elementen naar de plek waar je wilt en je hernoemt teksten. Er is een behoorlijke bibliotheek aan elementen en die is nog uit te breiden met elementen die door andere gebruikers zijn gemaakt (zie hier). Een export is op vele manier te maken.

balsamiqApplicatie Balsamiq waar een scherm snel te maken is.

Een derde (webbased) applicatie om mock-ups te maken is Mockingbird. Deze site is gratis om te gebruiken en het aardige hieraan is het feit dat je meerdere pagina’s kunt maken. In de preview zijn er dan mooie pagina’s te zien. Die kunnen overigens ook nog gelinkt worden. Helaas zijn er minder specifieke sets aan elementen te vinden voor bijvoorbeeld de iPhone of andere devices. Daarentegen is het erg eenvoudig in gebruik en is het eenvoudig om de resultaten te delen middels een link of door het te embedden op je site.

mockingbirdDe webbased (en gratis) tool Mockingbird

Laatste en wat mij betreft mooiste online tool is MockFlow. Deze site is gratis (met paar restricties) en ook betaald waarmee je dan alle opties krijgt. Voor mijn gevoel combineert deze applicatie de voordelen van voorgaande opties. Een grote bibliotheek helpt je op weg, je kunt online alles doen en je mock-up goed presenteren. Mooiste van deze tool is dat je van de ene pagina naar de andere kunt klikken. Erg goed!

mockflowMockflow combineert alle mooie functies van de andere applicaties

Heb jij nog goeie tools die je hiervoor gebruikt of heb je een mock-up gemaakt die je wil delen om anderen te inspireren: laat het weten in de comments!

Tagged with: •
jun 25

Open innovatie en co-creatie

Conferentie, techniek 3 Comments »

Op 23 juni vond voor de eerste keer het Co-creation Event plaats op de High Tech Campus in Eindhoven. Co-creation heeft vooral veel te maken met het cocreationontwikkelen van nieuwe producten/services/concepten en het marketen hiervan. Klanten, partners en anderen helpen je met nieuwe ideeën en feedback en doen dit vaak vanuit een grote betrokkenheid. Een goede bijeenkomst met een prettige prijs en een thema dat zeker relevant is voor de e-Learning wereld en het onderwijs.

Zelf je eigen lego maken
Mindstorms van lego is een bekend project waarbij de klant met behulp van software zelf een legocreatie kan ontwerpen. De beste ontwerpen worden ook daadwerkelijk uitgevoerd. Er komen per week zo’n 3.000 ontwerpen binnen. Dit levert veel meer op dan het idee. Er is op deze manier een grote groep fans gemaakt. Martijn Staal van TNO gaf dit voorbeeld en gaf ook aan wat de trends zijn die co-creatie stimuleren:

  • consumenten worden mondiger;
  • kracht van de media neemt toe (blogs, Twitter etc.);
  • user generated content is veelvuldig aanwezig;
  • de consument is genetwerkt (kan via vele kanalen snel ervaringen delen).

De presentatie van Martijn vind je hier.

Ideeën genereren of business kapot laten maken?
Martijn gaf het voorbeeld van Dell. Een blogger (Jeff Jarvis) had een zeer kritisch verhaal geschreven over de kwaliteit van de dienstverlening. Zijn ervaring ging snel de wereld rond toen reguliere media zoals Newsweek het verhaal oppikten. Dell werd gedwongen om hierop te reageren. Ze kwamen met het initiatief Dell Ideastorm. In deze community worden ideeën verzameld, er zijn zo’n 9.000 leden die 11.000 ideeën hebben gegenereerd waarvan 1-5 % bruikbaar zijn. Op deze manier krijg je zeer goede signalen en bruikbare ideeën met een beperkte investering.

dell
Het leek me wel een beetje eenrichtingsverkeer waarbij je publiek alleen gebruikt als een soort panel.

Meedenken over thee
Een goed verhaal werd verteld door Johan Sanders van SaraLee. De naam SaraLee ken je wellicht niet maar bekender zijn de merken die Saralee voert zoals Douwe Egberts, Pickwick en Sannex. Johan geeft aan dat 55+ mensen minder koffie gaan drinken. Er is gebruik gemaakt van mensen die zich eerder hadden opgegeven voor de DE.nl club. 35.000 mensen zijn aangeschreven, 1000 mensen reageerde en de eerste dagen waren er al 500 mensen die op een site het drinkgedrag in kaart brachten.

Barrières voor open innovatie en co-creatie
Johan Sanders geeft aan dat co-creatie vooral een cultuurverandering is binnen bedrijven.  Open innovation is een veranderingsproces. Het beeld van de rollen moet op de schop. Als je het zelf niet doet dan gaat wel je klant ermee aan de haal.

Een aantal zaken die belangrijk is:

  • Needs definition: ben duidelijk in wat je behoeften zijn.
  • Hebben we een cultuur waarin we echt openstaan voor alternatieven? Staan we er echt voor open?
  • Verwachtingen managen van klanten. Iedereen vindt zijn idee briljant en verwacht een snelle en enthousiaste realisatie. Hierover moet je duidelijk zijn.
  • Juridisch: zorg dat de rechten van co-creators goed geregeld zijn.

Co-creation is niet hetzelfde als ongestuurd een proces ingaan. Je moet juist ook kaders stellen en goed als organisatie je eigen doelen stellen. Anders weet je niet welke ideeën waardevol zijn. SaraLee heeft een roadmap gemaakt om deze kaders helder te hebben.

De presentatie van Johan vind je hier.

cc

Co-creation, open innovatie en leren
Wisdom of the crowds is een bekend begrip en co-creatie sluit hier prima op aan en lijkt bijna een marketing en productontwikkelinstrument te zijn. Het is echter vooral een manier om mensen te betrekken en kennis te verwerven en te delen. Om co-creatie te kunnen invoeren is er ook een heel leerproces nodig omdat het een nieuwe cultuur en houding vereist.

Open innovatie is een krachtige manier van leren en volgens mij kan het ook worden ingezet binnen de wereld van e-Learning. Als voorbeeld van succesvolle inzet van co-creatie en open innovatie is de hele open source community. Moodle, eXe, Drupal, Elgg; al deze producten die binnen leersituaties gebruikt worden en zijn vanuit deze open houding en co-creatie ontstaan.

Volgens mij kunnen ook educatieve uitgeverijen maar ook bedrijven als Stoas heel veel baat hebben bij open innovatie en co-creation. Laten we de kennis die bij lerenden, leerkrachten en experts binnen bedrijven en instellingen gebruiken en een gezamenlijke verantwoordelijkheid dragen voor een betere en krachtigere leeroplossingen.

Tagged with: • • • •
preload preload preload