May 18

Een mock-up maken (interactieve demo/prototype van je ontwerp) van een iPad of iPod/iPhone app kun je prima doen met online of offline tools op je PC. Een paar van die tools heb ik al eens eerder besproken. Nu bespreek ik een app op de iPad waarmee je een interactieve mock-up kunt maken voor je iPhone of iPad. Er is een aantal apps die dit doen, zo is er iMockups for iPad (zie iTunes) waarmee je zelfs mock-ups van websites kunt maken en Blueprint (zie iTunes). Die laatste app gebruik ik.

Voor het ontwerp van een gewone website gebruik ik liever de online mock-up tools zoals MockFlow omdat het werken met de muis veel preciezer is en omdat het dan eenvoudig is om het ontwerp te delen. Tevens waardeer ik de schermruimte die ik op mijn MacBook Pro heb. Toch wat meer dan op de iPad.

Wat kun je met Blueprint?

Je maakt schermpagina’s aan (keuze uit iPhone of iPad schermformaat, en keuze uit staand of liggend) en die vul je vervolgens met schermelementen zoals navigatiebalken, knoppen, en ook inhoud zoals afbeeldingen of teksten. Vervolgens kun je delen van een scherm actief maken en laten verwijzen naar een volgende pagina. Je kunt veel verschillende soorten acties aan een schermelement koppelen. Zo kun je bijvoorbeeld een knop laten verwijzen naar een volgende pagina. Ook kun je aangeven dat er bij bijvoorbeeld een swipe naar links een nieuwe pagina getoond moet worden. Op het moment dat je het ontwerp wilt testen, speel je het af op je iPad en als ik dan op de knop druk of swipe gaat de app naar een nieuw scherm. Zo simuleer ik de werking van een echte app.

Hoe ziet het eruit?

In bovenstaande schermafdruk is te zien dat ik een liggend iPad scherm heb gemaakt. Ik heb een navigatiebalk onderaan geplaatst en tekst en een afbeelding daarboven. Aan de rechterkant staan alle schermelementen (Controls) die ik in kan zetten. Elk schermelement kan ik nog tot in detail aanpassen (kleur, grootte, gedrag) en zelfs kan ik nieuwe afbeeldingen op knoppen zetten.

Hier is het overzicht te zien van de verschillende pagina’s met daarbij de verbindingen. Een bestaande pagina kun je eenvoudig dupliceren en de links worden daarbij meegenomen.

Hierboven is te zien dat je aan objecten acties (Actions) kunt verbinden. De mogelijkheden zijn erg uitgebreid waardoor de app erg natuurgetrouw afspeelt.

Tenslotte hierboven de zelfde pagina waarbij een object is geselecteerd en het paneel Proporties wordt gebruikt. Je kunt tot op detail elk object qua grafische opmaak aanpassen inclusief alphawaarde (doorzichtigheid).

Plus- en minpunten

Bij het maken van een mock-up tool voor een iPad app zijn de belangrijkste voordelen van een mock-up app op de iPad t.o.v. een mock-up tool op de PC of in je browser:

  1. Je kopieert  eenvoudig screenshots van je iPad naar de app. Dit vind ik soms wel handig omdat je dan niet een hele pagina hoeft te maken. Ik heb dit o.a. gebruikt toen ik in mijn mock-up een agenda nodig had. Die kun je zelf gaan samenstellen uit de voorgedefinieerde objecten of je maakt een screenshot van een standaard agenda en gebruikt die.
  2. Het is erg handig en prettig om direct het resultaat te bekijken op je echte iPad i.p.v. op een gesimuleerde iPad op je laptop. Hiermee krijg je een beter gevoel of een bepaalde volgorde van handelen of indeling op een pagina prettig is.

De pluspunten:

  • snelheid is goed;
  • leercurve is betrekkelijk kort;
  • het tonen van resultaat (inclusief swipe bewegingen en effecten) werkt erg prettig en bootst de echte app goed na;
  • erg veel instelmogelijkheden, vooral grafisch;
  • kunt in grafische lagen werken en deze goed ordenen;
  • plaatsen objecten gaat goed door magnetische hulplijnen;
  • validatieregels voorkomen dat een knop op een plek komt waar dit onmogelijk is in een echte app;
  • dupliceren van een pagina werkt perfect;
  • lite versie is voldoende uitgebreid om een goede indruk te krijgen;
  • export naar PDF werkt goed, gratis viewer is fijn om ontwerp te delen met collega’s en klanten.

De minpunten:

  • door aanraakmethodiek is het moeilijk om objecten precies goed te positioneren, hier mis je het precieze van een muis;
  • een export naar klikbare demo die op web te delen is zou erg welkom zijn. Nu is het lastig met viewer of statische pdf;
  • samenwerking met Dropbox zou handig zijn;
  • er is geen helpfunctie en de uitlegfilmpjes op de site zijn maar matig van kwaliteit;
  • afbeeldingen die je plaatst zijn niet te roteren en alleen met grote stappen te schalen (25%, 50%, 75% etc.) of handmatig maar dat is niet handig met je vinger. Ook bijsnijden gaat niet.

Eindoordeel

Blueprint is een erg bruikbare en krachtige mock-up tool die ik graag gebruik. Natuurlijk zijn er nog wensen maar het doet wat het belooft te doen op een snelle, prettige manier. De mogelijkheden zijn erg uitgebreid terwijl de bediening niet erg complex is. De app is zijn geld voor mij zeker waard (momenteel kost de app 11,99 euro).

 

 

Tagged with:
Dec 01

Arjen Vrielink and Hans de Zwart write a monthly series titled: Parallax. They both agree on a title for the post and on some other arbitrary restrictions
to induce their creative process. For this post they agreed to create a design concept for a mobile Moodle application. The concept should
include screen mockups. You can read Arjen’s post here and Hans’ post here.

This month they have invited two guest writers: Job Bilsen (his post can be found here) and I.

Moodle App

Moodle is een fantastische open source leeromgeving als je visie op leren de sociaal constructivistische is. Het samenwerkend, producerend en informeel leren kan prima gefaciliteerd worden met Moodle. Enige probleem is het mobiel toegankelijk maken van Moodle. Er is wel een klein aantal initiatieven (waaronder MLE & MOMO project) maar dat er is geen manier die heel eenvoudig, snel en prettig werkt. Daar gaat nu verandering in komen. De tijd is rijp om een Moodle (iPhone) app te maken. Vanzelfsprekend wordt ook dit open source.

Waarom een Moodle app?

Leren wordt steeds mobieler en steeds informeler. Studenten en werknemers dragen steeds vaker een computer in hun binnenzak: de smartphone. Dit apparaat biedt een prima mogelijkheid om bijvoorbeeld op de werkplek te leren. In een situatie bij een klant wordt bijvoorbeeld op een formele cursus basiskennis aangeboden via Moodle maar daarnaast wil men werknemers op de (winkel)vloer ondersteunen. In dat geval zou het handig zijn om Moodle ook eenvoudig en goed open te stellen via een iPhone/iPod Touch app.

Wat moet die app kunnen?

Moodle kent veel verschillende didactische interacties en mogelijkheden en kan ook op vele manieren worden ingezet. In mijn droom-app wordt de kracht van de iPhone (eenvoudig in gebruik, krachtig in functionaliteit) gecombineerd met de kracht van Moodle (didactische sterk, sociaal).

De nadruk van de app ligt op:

  1. Contact met anderen
  2. Maken opdrachten (inclusief foto en video toevoegen)
  3. Raadplegen en aanvullen bronnen
  4. Inzicht in het leerproces

Tenslotte is het mogelijk om te zoeken vanaf het home scherm en kan een cursusview worden gebruikt die vergelijkbaar is met de traditionele view waarbij je alle interacties en onderdelen onder elkaar ziet. Overigens ontbreekt daar de linker- en rechterkolom in Moodle. Alle onderdelen zijn steeds zonder zoom te gebruiken.

Inhoud verschillende onderdelen

Contact centre

  • berichten (ontvangen/sturen)
  • Google maps, anderen zien?
  • lijst deelnemers
  • wie online?
  • tags (interesses)/profielen

Opdrachten

  • online opdrachten
  • testen maken

Bronnen/activiteiten

  • bronnen hele site
  • wiki
  • woordenlijst

Inzicht leerproces

  • overzicht voortgang (inclusief punten)
  • overzicht openstaande opdrachten

Cursusview

  • alles zien

m-app

Originele mock-up is te zien op deze site. Hier zijn gratis mock-ups te maken. Let op: als je deze site gebruikt kan iedereen die de url heeft je mock-up aanpassen.

Alle tips, opmerkingen, ideeën en aanvullingen zijn van harte welkom. Laat van je horen!


Tagged with:
preload preload preload