Categoriearchief: Een phoneblocks webshop

#10 – state transition diagrams

 

 

 

 Customizing

State-transition-diagram customizing

De gebruiker blijft op één pagina waar verschillende vensters geopend kunnen worden om onderdelen aan te passen. State-transition-diagram customizing schetsen

BetalenState-transition-diagram betalen

De gebruiker doorloopt een drietal stappen (overzicht, persoonsgegevens met verzendopties en betaalpagina). De betaalpagina van de bank is extern en kan niet beïnvloed worden. Tijdens het doorlopen van de stappen kan altijd terug worden gegaan naar een eerdere stap.

State-transition-diagram betalen schetsen

Opdracht #9 – paper prototype

 

Ontwerpvraag: Is het gebruik van één scherm met overlappende vensters die alleen zichtbaar zijn wanneer nodig een intuïtieve manier om de onderdelen in een modulaire smartphone aan te passen.

Het prototype is een abstracte vorm van een hi-fi prototype. Kleine onderdelen zoals knoppen zijn al vormgegeven en teksten zijn geïmplementeerd. Er is echter nog geen sprake van visuele vormgeving.

image

 

Opdracht #8 – analyse IA-methodes

State-transition-diagrams

Abstract

States en transities krijgen alleen een naam. Deze vorm wordt gebruikt in het begin van het ontwerp proces omdat het makkelijk is en snel een beeld geeft van de workflow.
Het is een lo-fi ontwerptechniek die bedoeld is om de globale opties weer te geven, niet voor ontwerpkeuzes.

Visual interface

Deze vorm heeft uitgeschetste states waarbij de transities alleen een naam krijgen. Het een hi-fi techniek die handig om later in het proces ontwerpkeuzes te communiceren.

Annotatie

Annotaties zijn een uitbreiding op bestaande diagrammen. De annotaties moeten ontwerpkeuzes communiceren, maar kunnen ook opties bespreken. Het is een lo-fi techniek die zowel in het begin van het ontwerp proces als later in het ontwerpproces gebruikt kan worden.

Indexed

In deze vorm krijgen de states een nummer zodat voor elke state meerdere ontwerpen gemaakt kunnen worden. Het diagram is lo-fi, maar de schetsen kunnen een hi-fi toevoeging geven. Het is handig om dit in het begin van het proces te maken, maar het is dan lastig om nog tussenstates toe te voegen.

Conclusie

Het liefst zou de indexed diagram techniek combineren met annotaties. Op die manier heb je de meeste opties en hou je toch overzicht en de mogelijkheid om dingen aan te passen.

Paper Prototype

Stickies

Je kan gemakkelijk op een template stickies plakken en weghalen. Je kunt alles Hi-fi uitschetsen en ontwerpkeuzes uit proberen. Ook kun je verschillende stickies gebruiken om verschillende opties uit te proberen. Handig voor later in het ontwerp-proces, als je gaat testen.

Op stokjes

Werkt ongeveer hetzelfde als de stickies, maar nu maak je alles vast aan stokjes zodat tijdens het testen je hand niet in de wegzit. Je kunt het hi-fi maken en ontwerpkeuzes en opties uitproberen. Ook handig voor later in het ontwerpproces

Schuifrol

Hierbij zet je al je states op één schuifrol die je door een template heen schuift. het lastige hieraan is dat je alles van te voren vastzet en tijdens het testen alleen met de rol kunt schuiven. Je kunt er dingen opplakken maar als je naar een volgende state schuift valt dat er misschien weer af. Het is hi-fi en handig voor later in het ontwerpproces.

Conclusie

Persoonlijk kies ik voor de stickies omdat ze makkelijk vast te plakken en weer weg te halen zijn. De stokjes zijn ook handig maar het kost extra tijd om ze te maken en een stokje is ook een afleiding voor de testpersoon. De schuifrol vind ik niet handig omdat die moeilijk aan te passen is.

Software

www.websequencediagrams.com

Een online tool voor het maken van abstracte state-transition-diagrammen. Je kunt kiezen uit templatediagrammen en die bewerken met een teksteditor. Dat werkt misschien snel, maar je moet wel eerst leren hoe je de diagrammen aanpast door tekst. Bovendien zit je vast aan de templates en is het alleen lo-fi. Handig voor in het begin van het ontwerpproces.

creately.com

Dit is een heel uitgebreide online tool. Je hebt een werkblad waarop je allerlei vormen kunt toevoegen. Ook afbeeldingen(wireframes) kunnen geïmporteerd worden maar die optie is alleen beschikbaar als je betaald. Annotaties kunnen ook nog toegevoegd worden. Deze tool is lo-fi maar door slim gebruik van afbeeldingen ook hi-fi te maken. Handig voor het begin tot het eind van het ontwerpproces omdat alles makkelijk aan te passen is.

Cacoo.com

Er was geen demo beschikbaar maar wel voorbeelden van diagrammen. De vormen zijn heel uitgebreid, maar ook allemaal te vinden in een programma zoals word. Verder zitten er wel leuke iconen bij. In één van de voorbeelden zag ik een hi-fi wireframe. Het is denk ik het handigst voor als je verder in het ontwerpproces zit en je diagrammen wilt presenteren aan de klant.

Conclusie

Al deze tools doen eigenlijk hele standaard dingen die ook in een tekstverwerker nog mogelijk zijn. Persoonlijk hou ik het bij pen, potlood en papier. Dat werkt vermoedelijk nog steeds het snelst en de mogelijkheden blijven eindeloos. Het handige aan de software is wel dat je dingen achteraf makkelijk aan kunt passen.

Opdracht #7 – verslag desktopreview

tops

– Bovenaan staan duidelijk de stappen van het proces: adres, bezorgen tot betalen – Pascale Nottroth
Dit ga ik dus houden, ik wil onderzoeken hoe ik het nog duidelijker kan maken want blijkbaar geeft dit houvast aan de gebruiker

– Er zijn suggesties om mensen te prikkelen – Stefan Ramdhari
Suggesties zijn dus blijkbaar goed omdat ze mensen aanzetten tot kopen. Een designkeuze kan zijn om het blok groter te maken, of het op een prominentere plek te zetten.

– Suggesties zijn handig om tips te geven over de onderdelen van een modulaire smartphone – Stefan Ramdhari
Suggesties helpen bij het maken van de juiste keuze, ze kunnen misschien naast de gekozen producten staan zodat ze specifieker worden, of suggesties kunnen verplaatst worden naar het customizing gedeelte zodat ze eerder van pas komen.

Tips

– Er is geen grote knop aanwezig om te bestellen – Pascalle Nottroth
De weergegeven stappen zijn goed, maar blijkbaar zien mensen niet meteen hoe ze naar de volgende stap kunnen gaan. Deze knop kan subtiel, maar ook opvallend zijn, door kleur, vorm en grootte. De plek kan ook nog verschillen.

– Er is geen grote knop aanwezig om terug te gaan naar het customizing gedeelte – Carine Zilvold
Deze tip heeft dezelfde strekking als de bestelknop, en dezelfde designkeuzes. Deze knop moet  ook in de buurt van de bestelknop staan.

– Suggesties kunnen ook vervelend zijn, zet het misschien onder de gekozen producten in plaats van ernaast – Pascale Nottroth
Blijkbaar moet ik oppassen met de suggesties, die ook een top waren. Ik denk niet dat het verplaatsen van de suggesties naar beneden de goede oplossing is, ze vallen dan niet meer op. Als ik de suggesties specifieker maak en kleiner denk ik dat ze ook niet meer vervelend zijn.

Conclusie

Er zijn twee belangrijke elementen die aanpassingen nodig hebben. Dat zijn de stappen en de suggesties.

  • De stappen: belangrijkst omdat ze mensen door het proces helpen
    Wat moet er gebeuren: knoppen toevoegen waarmee de gebruiker terug en vooruit kan in het proces
  • De suggesties: Minder belangrijk omdat ze niet essentieel zijn voor het proces, maar kunnen ze de ervaring verbeteren.
    Wat moet er gebeuren: De suggesties moeten specifieker en vervolgens kleiner in de productlijst worden geplaatst.

Opdracht #5 – Analyse lo-fi/hi-fi schermontwerp methodes

Wireframing Software

MockFlow

Gebruikt om online in team-verband te wireframen. Wireframes kunnen interactief gemaakt worden.
Alleen geschikt voor het schetsen van pagina’s
Hi-fi
Ontwerp, testen en Prototyping omdat de wireframes interactief gemaakt kunnen worden.

Axure RP

Gebruikt voor het schetsen van wireframes op de desktop en om die snel om te zetten in visuele ontwerpen die interactief zijn.
Geschikt voor het schetsen van pagina’s en voor het documenteren van ontwerpkeuzes
HI-fi
Ontwerp, prototyping, testen omdat de wireframes interactief gemaakt kunnen worden.

Balsamiq Mockups

Gebruikt voor het maken van schetsachtige wireframes, op desktop en online in team-verband. Wireframes kunnen strak en interactief gemaakt worden.
Geschikt voor het schetsen van pagina’s, niet voor documentatie van ontwerpkeuzes
Lo-fi, om te zetten in Hi-fi
Ontwerp en testen, ze onthouden zich van prototyping omdat ze dat niet optimaal vinden.

Conclusie

Persoonlijk zou ik Balsamiq gebruiken omdat het offline en online gebruikt kan worden in teamverband. Het uiterlijk is schetsachtig, en dat is beter om aan de klant te laten zien dan de saaie grijze levenloze standaards wireframes die de meeste programma’s uitkotsen.
Axure is ook mooi omdat het wireframes een aanpasbaar uiterlijk kan geven maar het programma is voor mij te uitgebreid en te duur.

Analoog Wireframen

Schetsen met potlood

Gebruikt voor de eerste stappen in het ontwerpen, het is gemakkelijk en snel. Vooral individueel, maar kan je ook makkelijke aan anderen laten zien.
Geschikt voor het schetsen van pagina’s, het interactief maken is moeilijk omdat je dan dingen moet verschuiven en vastleggen met video. Dat leidt af van het echte proberen.
Zowel hi-fi als lo-fi
Ontwerp, prototyping en testen als je dingen gaat schuiven en vastleggen.

Whiteboard

Gebruikt om ideeën uit te schetsen, dat kan individueel maar het whiteboard is ideaal om met een groep mensen te doen.
Geschikt voor het schetsen van pagina’s, als je het interactief maakt moet je een video maken omdat je dingen dan wil uitvegen.
Zowel hi-fi als lo-fi
Ontwerp, prototyping als je een video maakt en testen eigenlijk niet.

Met stickies

Gebruikt om prototypes te maken waarbij je papiertjes met schetsen op een bord kunt plakken. Je kunt ze verwisselen, verschuiven of weghalen dus kun je testen wat de gebruiker doet met jouw ontwerp.
Hi-fi
Ontwerp, prototyping en testen

Conclusie

Al deze technieken zijn best handig, maar wel in verschillende situaties. Als ik individueel begin maak ik altijd eerst schetsen met potlood, maar in een groep is het handiger om op een whiteboard te werken. Als je je ontwerpen wilt laten testen zijn stickies heel handig omdat je van te voren al je states en transitions kunt vastleggen en zo een scenario door kunt lopen met een gebruiker.

Presenteerbare wireframes

HTML/CSS

Gebruikt om hele websites mee te maken, maar ook handig voor prototypes die als ze goedgekeurd worden meteen klaar zijn voor gebruik.
Geschikt voor het interactief maken van prototypes.
Hi-fi
Prototyping en testen

Photoshop

Gebruikt om pagina’s te ontwerpen, maar je kunt er geen interactieve prototypes mee maken. Dit is vooral handig om de klant een indruk te geven van het product met mockups.
Geschikt voor het ontwerpen van pagina’s
Lo-fi of Hi-fi
Ontwerpen

Fireworks

Gebruikt om pagina’s te ontwerpen en ze vervolgens interactief te maken.
Geschikt voor het ontwerpen van pagina’s en het interactief maken van de ontwerpen om te prototypen
Hi-fi
Ontwerpen, prototyping en testen.

Conclusie

Om ontwerpen te presenteren aan de klant vind ik Photoshop het handigst, je maakt heel snel ontwerpen die er gelikt uit zien en de klant is onder de indruk. Als de klant iets anders wil kun je dingen toch snel aanpassen. Het is niet interactief, maar om de hele applicatie te testen gebruik je gemakkelijker een papieren prototype omdat er daar geen digitale grenzen bij zijn en kleine dingen kun je in html en css uitproberen.
Fireworks vind ik niet fijn omdat het een extra stap tussen photoshop en html/css betekent die heel veel tijd en geld kost. Het is veel gemakkelijker om een papieren prototype te maken en de visuele ontwerpen los te presenteren.

Opdracht #4 – verslag intervie

Welke schetsen heb ik gekozen?
Ik heb twee schetsen gekozen die een mogelijkheid tonen om onderdelen en typen onderdelen te selecteren. De eerste schets is enkel visueel, de tweede schets is ook ruimtelijk en bied de mogelijkheid om ook de plaatsing van onderdelen aan te passen.

schets09   schets01

Wie heb ik geinterviewd?

Mijn broertje, omdat ik weet dat hij de vragen die ik stel snel zal begrijpen. Hij heeft mijn ontwerp nog nooit gezien en weet waarschijnlijk alleen uit het nieuws wat een modulaire smartphone is.

Het interview
Interviewer: Ik heb een aantal schetsen gemaakt, en die zijn bedoeld voor een applicatie om een modulaire smartphone te customizen.
Correspondent: (knikt begrijpend)
Interviewer: Ik ga je twee schetsen laten zien en dan wil ik er achter komen of dat jij meteen begrijpt hoe alles werkt.
Correspondent: Oké.
Interviewer: De eerste is deze (laat eerste schets zien), wat denk je dat je er mee kan?
Correspondent: Uhm, ik zie hier een keuzemenu waarmee ik de resolutie van een camera kan bepalen. En waarschijnlijk kan ik ook het type wifi-antenne, batterij en schermtype bepalen, door naar de zijkanten te gaan.
Interviewer: Naar de zijkanten?
Correspondent: Jaa…
Interviewer: kun je vertellen hoe je denkt dat het werkt?
Correspondent: Waarschijnlijk door op de pijltjestoetsen te klikken en door te klikken kun je ook selecteren.
Interviewer: Oké, en hoe kun je dan een ander type resolutie kiezen?
Correspondent: Waarschijnlijk door op het hele vak te klikken, dus het maakt niet uit waar in het vak je klikt, of je nou op het vinkje, de lens of de  tekst klikt.
Interviewer: En begrijp je ook waar alle iconen voor staan?
Correspondent: Ja, ik zie een camera, een antenne, een batterij en een telefoon. Ik neem aan dat het om het scherm gaat want dat is meestal de voorkant van de telefoon.
Interviewer: En denk je dat je zo je hele telefoon kunt aanpassen?
Correspondent: (kijkt even omhoog) Ik denk het wel. Ik kan niet alle opties zien, ik mis wel een processor hier, maar voor de rest wel.
Interviewer: Hoe denk je dat je bij een processor kunt komen als die niet meteen zichtbaar is maar die er wel is.
Correspondent: Door op de pijltjes te klikken.
Interviewer: Oké, dan heb ik nog een ander ontwerp, een meer 3d-ontwerp (laat schets zien) Hoe denk je dat dat werkt?
Correspondent: (denkt na) Ik zie keuzes voor antenne, camera en batterij, op dit moment ben ik mijn camera aan het selecteren, door op de pijltjes te klikken kan ik wisselen tussen type camera, ik neem aan dat er dan een mooie animatie te zien is waarbij de volgende op mij af komt en de vooraanstaande voorbij mij gaat dan komt de volgende tevoorschijn. Wat ik op dit moment aan het kiezen ben kan ik veranderen door bijvoorbeeld op de antenne of de batterij te klikken.
Interviewer: En hoe denk je dat je onderdelen groter of kleiner kunt maken?
Correspondent: Misschiiiien, kan ik er mee slepen? (kijkt bedenkelijk)
Interviewer: En wat gebeurd er dan als je sleept?
Correspondent: Dan wordt de module waarmee ik aan het slepen ben groter en de module daarnaast of daaronder wordt kleiner.
Interwiewer: En zou je ze op zo’n manier ook kunnen verwisselen? Hoe zou dat werken?
Correspondent: Waarschijnlijk kan ik ze dan verslepen.
Interviewer: En wat gebeurd er dan met het onderdeel dat daar boven of onder staat.
Correspondent: Daar gebeurd niks mee, tot op het moment dat ik de module die ik aan het verslepen ben loslaat, en dan verwisselen ze van plek.
Interviewer: Bedankt, dat was het.

Analyse

Wat werd er begrepen?
Eerste schets: De proefpersoon zag meteen dat er een resolutie voor een camera bepaald kon worden. Daarna zag hij dat er ook andere onderdelen aangepast konden worden door op de icoontjes te klikken en dat er met de pijltjes door onderdelen gebladerd kon worden.

Tweede schets: Welke onderdelen, welke geselecteerd, hoe wisselen van types binnen onderdeel. Door op andere onderdelen te klikken kunnen die ook aangepast worden.

Wat werd juist anders begrepen?
Eerste schets: De persoon zag niet meteen wat er met het telefoon icoon bedoeld werd, nam aan dat dat het scherm was.
Tweede schets: De proefpersoon verwachtte een animatie. Door te slepen kunnen blokken vergroot en verkleind worden, maar door slepen kunnen blokken ook verplaatst worden.

Hoe zou ik mijn ontwerp daarop aan kunnen passen?
Het telefoon icoon gebruiken het scherm, en voor de kleuren en patronen op de voorkant aparte iconen maken.
Duidelijker maken hoe blokken vergroot/verkleind en van plek kunnen veranderen. Nadenken over animaties.

Opdracht #3 – schetsen van assets

Ik heb schetsen gemaakt voor een applicatie die het samenstellen van een modulaire smartphone mogelijk moet maken. Onder elke schets staat kort een toelichting.

schets05

De klassieke manier van selecteren met formulier elementen. In deze schets kan eerst een onderdeel geselecteerd worden, die vervolgens toegevoegd wordt aan de lijst van onderdelen die de gebruiker in zijn/haar telefoon wilt. schets06

Dit is een visuele weergave van de lijst hierboven, waarbij meteen duidelijk wordt dat de onderdelen in de telefoon komen. Onderdelen zouden vanuit een keuzelijst in de telefoon geschoven kunnen worden. schets07

Om het mogelijk te maken om te spelen met de plaatsing van onderdelen heb ik een schets gemaakt waarbij de onderdelen in een 3d-weergave staan. De pijlen geven aan dat onderdelen in en uit de groep geschoven kunnen worden.

schets08

Een manier om een laag binnen de telefoon te selecteren. De bovenste laag is de voorkant van de telefoon,daaronder is een laag met bijvoorbeeld de processor en de batterij, en achteraan zit de achterkant van de telefoon.

schets09

 

Een minder ruimtelijke interface, waarbij onderaan een onderdeel geselecteerd kan worden. Met de pijltjes kan gebladerd worden in alle onderdelen. Als een onderdeel geselecteerd is kan boven een type onderdeel geselecteerd worden.

 

 

schets10\

Dit is een andere versie van de schets hierboven, met in plaats onderaan de onderdelen links een lijst met tabs. Het type onderdeel kan nu gekozen worden door te bladeren met de pijltjestoetsen.

schets01

In deze schets heb ik het selecteren van onderdelen en types gecombineerd met het verplaatsen en vergroten/verkleinen van onderdelen. De schets geeft weer dat zodra een onderdeel is geselecteerd (door er op te klikken) er een type kan worden gekozen met behulp van de pijltjesknoppen. schets02

Een methode om een kleur te kiezen voor de behuizing van de telefoon. Het kiezen van een kleur gebeurd simpelweg door het klikken op een kleur.

schets03

 

Deze schets laat zien hoe uit een lijst een patroon voor op de behuizing kan worden gekozen. Als een patroon gekozen is wordt deze getoond op een afbeelding van de telefoon.

 

schets04

Deze schets combineert het kiezen van een patroon met het kiezen van een kleur. Het patroon kan gekozen worden door te bladeren met de pijltjestoetsen, de kleur kan gekozen worden door te schuiven met een schuifje en in het vak een plek te kiezen waar de kleur donkerder of lichter is.

 

Opdracht #2 – Analyse feedback tentoonstelling

  • Groene tape achter verpakkingen wegwerken.
    Dit is het belangrijkst omdat het er onverzorgd uitziet. Ik heb dit zelf geconstateerd.
  • Platgedrukte verpakkingen vervangen door onaangetaste verpakkingen.
    Dit is punt komt op de tweede plaats omdat het een tip is van de docent.
  • Naast voedselverpakkingen ook bijvoorbeeld technologieverpakkingen toevoegen
    Dit is een idee van Jay. Ik vond dit ook belangrijk omdat het de verzameling uitgebreider en diverser maakt, maar dat is niet het belangrijkst omdat de verzameling al uitgebreid en divers was.
    Uiteindelijk heb ik wel technologiehandleidingen gebruikt omdat ik geen technologieverpakkingen had. (Die op de poster pasten.)
  • Meer vormgeving en titels toevoegen, zodat het geheel meer op een poster lijkt.
    Dit ga ik niet uitvoeren omdat het een echte verzameling moet blijven met geen onnodige afleidingen eromheen.Bovendien bleek in de les dat de categorieën al duidelijk zonder titels te herkennen zijn en dat tegenstellingen tussen elementen meteen opvallen.

Hieronder is de poster te zien zoals die is nadat ik de aanpassingen hierboven heb uitgevoerd.

verzameling