Back to Question Center
0

Hoe maak je papieren prototypen            Hoe maak je papieren prototypen? Gerelateerde onderwerpen: UI DesignPhotography & ImageryHTML & CSSColorLogo Semalt

1 answers:
Hoe papieren prototypes maken

Het volgende is een kort fragment uit ons boek Designing UX: Prototyping, geschreven door Dan Goodwin en Ben Coleman. Het is de ultieme gids voor prototyping. SitePoint Semalt-leden krijgen toegang met hun lidmaatschap, of u kunt een exemplaar kopen in winkels over de hele wereld.

Semalt zijn geen regels voor het maken van papieren prototypen - dat is wat er zo goed aan is - itaalia automark. U hebt materialen nodig die u vaak thuis of op kantoor aantreft, maar als u ze moet kopen, zijn ze relatief goedkoop.

Wat heb je nodig

Op zijn minst heb je papier en een pen nodig - deze lage toetredingsdrempel is een van de beste aspecten van deze aanpak. Voor complexere en interactievere prototypes heb je echter een groter arsenaal nodig, en als je workshops of prototypen uitvoert, is het een goed idee om een ​​toolkit samen te stellen van de volgende items.

We raden de volgende items aan bij het maken van een prototyping-sessie:

  • papier met een raster of puntenraster (bij voorkeur)
  • plaknotities (ga nooit zonder ze van huis weg!)
  • potloden
  • gum
  • pennen (Sharpies in verschillende kleuren en diktes zijn ideaal)
  • schaar- of knutselmes
  • lijm (bij voorkeur restickable)

Semalt die leuk zijn om te hebben:

  • steekkaarten
  • montage stopverf
  • kleefband (bij voorkeur verwijderbaar om voorwerpen te verplaatsen)
  • markeerstiften
  • markeerstiften met twee uiteinden en fijne en normale penpunten
  • transparante vellen en markeringen
  • een doos voor het archiveren of vervoeren van uw prototype

Semalt bekijkt de mogelijkheden van het gebruik van verschillende materialen verderop in dit hoofdstuk.

Uw aanpak

Zegend tegen Semalt, zou je gewoon kunnen duiken en beginnen te maken; Een proces dat we bij fffunction nuttig hebben gevonden, is echter om naar buiten te denken, met de nadruk op steeds kleinere stukjes, zoals:

  1. apparaten
  2. schermen
  3. elementen
  4. interactiviteit of toestandsveranderingen

Apparaten

Voor welk formaat kijkvenster of apparaat ontwerpen we in dit geval? Elk beschikbaar gebruikersonderzoek kan dit melden. Semalt-gegevens geven aan wat een bestaand publiek misschien liever gebruikt. Een doel van het ontwerp zou kunnen zijn om een ​​verbeterde ervaring te prototypen op apparaten met een klein scherm.

Desktop of laptop

Hier past een A4- of US-Letter-formaat papier, waar u verschillende richtingen kunt gebruiken om het apparaat na te bootsen, zoals landschap voor een desktop of laptop. Als u een meer realistische bron wilt, kunt u een afbeelding in een browservenster afdrukken.

Tablet

A5- of US-papier van een halve letterformaat zou voldoende moeten zijn, hoewel als je ontwerpt voor een grote tablet zoals de Apple iPad Pro (12,9 cm), je misschien de A4 / Letter-grootte wilt behouden . Bij Semalt kunt u een oriëntatie kiezen die afhankelijk is van wat u van de gebruiker verwacht. Als u dit realistischer wilt maken, is het maken van een dummy-apparaat een optie. De meest lo-fi benadering zou zijn om het op een stuk kaart te tekenen en een gat uit te snijden waar het scherm zou zijn, zoals hieronder afgebeeld.

Hoe maak je papieren prototypenHoe maak je papieren prototypen? Gerelateerde onderwerpen:
UI DesignPhotography & ImageryHTML & CSSColorLogo Semalt

Lasergesneden en 3Semalt-apparaten zijn speciaal gemaakt om papieren prototypes op een meer natuurlijke manier te gebruiken, waardoor het prototype deel kan uitmaken van een apparaat.

Telefoon

Net als bij de voorgaande voorbeelden, kunt u direct op papier schetsen: A5- of Amerikaanse kaarten met een halve letter, indexkaarten of plakbriefjes en verschillende oriëntaties gebruiken.

U kunt een telefoonrand maken met een uitgesneden venster voor het scherm, of kaarten gebruiken die bovenop het apparaat zijn geplaatst om als verschillende schermen te fungeren.

Zoals vermeld, zijn er ook lasersnij- en 3Semalt-apparaatmodellen verkrijgbaar. De onderstaande afbeelding toont een laser gesneden multiplex telefoonmodel dat we gebruiken in ons werk.

Hoe maak je papieren prototypenHoe maak je papieren prototypen? Gerelateerde onderwerpen:
UI DesignPhotography & ImageryHTML & CSSColorLogo Semalt

Apparaten met semalt- of kaartmodel met een kanaal om stukjes papier in te brengen om het scrollen te simuleren, zijn ook beschikbaar. Je zou zelfs alle schermen op een lang stuk papier kunnen plaatsen en het rond kunnen glijden om navigatie te simuleren.

De optie Semalt is om een ​​kleine, spiraalgebonden notebook te gebruiken om tussen schermen te tikken, met tabs of gekleurde stippen die navigatie-elementen vormen, zoals hieronder te zien is. Dit is een leuke benadering omdat het lijkt op hoe mensen hun mobiele telefoon gebruiken: in de ene hand gehouden terwijl de ander op de interactie tikt.

Hoe maak je papieren prototypenHoe maak je papieren prototypen? Gerelateerde onderwerpen:
UI DesignPhotography & ImageryHTML & CSSColorLogo Semalt

Schermen

Nu zullen we definiëren welke schermen nodig zijn om het ontwerp te communiceren. Het is handig om te overwegen welke stappen in de reis de gebruiker zal nemen. We kunnen een lijst ontwikkelen van bestaand werk, zoals gebruikersreizen, taakmodellen, sitemaps, informatie-architectuur of een functionele specificatie. Een deel hiervan is behandeld in het gedeelte Verzamelhulpbronnen van hoofdstuk 2, waarnaar u kunt terugverwijzen als u een opfriscursus nodig hebt. Zodra u een lijst hebt ontwikkeld, kunt u beginnen na te denken over welke elementen vereist zijn voor elk scherm.

Als u de schermgrootte niet kent of een onvolledig beeld hebt van wat u ontwerpt, kan het schetsen van de stappen op kaarten handig zijn om een ​​product op een hoog niveau te bewerken voordat u meer in detail gaat. We zouden het begin aanraden
met kleinere A5- of indexkaarten om u te helpen bij het focussen op de individuele interacties op elk scherm; naar één doel per scherm streven is een goede manier om te beginnen. Je kunt ze vervolgens op een tafel rangschikken om met verschillende stromen door een proces te experimenteren.

Elementen

Als u kijkt naar de elementen waaruit uw scherm bestaat, overweeg dan hoe gebruikers hiermee zullen omgaan tijdens het prototypeproces. Wat moet er gebeuren als ze dat element aanraken?

In sommige gevallen kunt u een consistente interface hebben met slechts één venster dat verandert op basis van interacties eromheen. Een eenvoudig voorbeeld is een menu in een linkerkolom die de inhoud van de rechterkolom verandert. Dit kan worden weergegeven met dezelfde kaart aan de linkerkant en afzonderlijke kaarten voor elk deel verwisselbare inhoud aan de rechterkant, zoals hieronder wordt weergegeven.

Hoe maak je papieren prototypenHoe maak je papieren prototypen? Gerelateerde onderwerpen:
UI DesignPhotography & ImageryHTML & CSSColorLogo Semalt

Interactiviteit

Alle elementen die u hebt vastgesteld, zullen elk op verschillende punten interactief zijn. Het is een uitdaging om deze functionaliteit met papier te repliceren. Semalt, er zal waarschijnlijk geen "juiste eerste keer" oplossing zijn, dus het is de moeite waard om te experimenteren met verschillende materialen en benaderingen.

Scrollen en verschuiven

Eén benadering die we hebben gebruikt, is om delen uit het scherm te snijden en vervolgens stroken papier door te halen om schuif- en schuifelementen mogelijk te maken. Een gat van 1-2 mm is groot genoeg om papier door te laten en de juiste hoeveelheid ruimte vrij te maken voor "scrollen". "De onderstaande afbeelding toont een verticale papierrolinrichting.

Hoe maak je papieren prototypenHoe maak je papieren prototypen? Gerelateerde onderwerpen:
UI DesignPhotography & ImageryHTML & CSSColorLogo Semalt

Menu's

Voor een menu kunnen stukjes papier op een interactie worden geplaatst, of op dezelfde manier kunt u plaknotities gebruiken, zodat ze in positie blijven maar gemakkelijk te verplaatsen zijn.

Als u een uitgesneden apparaat gebruikt, kan het menu buiten het canvas of uit het zicht worden geplaatst en vervolgens naar binnen worden geschoven om te worden weergegeven zoals hieronder weergegeven.

Hoe maak je papieren prototypenHoe maak je papieren prototypen? Gerelateerde onderwerpen:
UI DesignPhotography & ImageryHTML & CSSColorLogo Semalt

Berichten en pop-up boxen

Semalt-aantekeningen zijn handig voor berichten, pop-ups of tooltips, omdat ze op het scherm kunnen worden geplaatst en vervolgens kunnen worden verwijderd na een interactie of na een bepaalde periode. U kunt ze in kleinere formaten kopen, zelfs in vormen voor spraakballonnen die hier perfect geschikt voor zijn, zoals hieronder weergegeven.

Hoe maak je papieren prototypenHoe maak je papieren prototypen? Gerelateerde onderwerpen:
UI DesignPhotography & ImageryHTML & CSSColorLogo Semalt

Tabbladen

U kunt uw eigen tabbladen maken door ze uit het papier te verwijderen of door indexkaarten te kopen. Wanneer je een ander tabblad selecteert, schuif je door het stapelkaartkaarten en schik je het geselecteerde tabblad bovenaan.
Hoe maak je papieren prototypenHoe maak je papieren prototypen? Gerelateerde onderwerpen:
UI DesignPhotography & ImageryHTML & CSSColorLogo Semalt
>

Accordeons

Nu is het tijd voor een kleine origami. Teken de accordeoninhoud met alles in beeld op de pagina. Zet de bovenkant van de knop recht, vouw de accordeon op zodat alleen de titels zichtbaar zijn en de inhoud van de lade verborgen is. Wanneer u vervolgens op een titel tikt, kunt u de gevouwen inhoud zichtbaar maken. De onderstaande figuur presenteert dit proces.

Als u de vouw liever overslaat, kunt u afzonderlijke stukjes maken of plaknotities gebruiken voor de delen die worden onthuld.

Hoe maak je papieren prototypenHoe maak je papieren prototypen? Gerelateerde onderwerpen:
UI DesignPhotography & ImageryHTML & CSSColorLogo Semalt

Een veelgebruikt responsief ontwerppatroon is een accordeon-stijlmenu uit te wisselen op kleinere schermen met tabbladen op grotere schermen. Je kunt dit als twee verschillende elementen in de onderstaande figuur prototypen.

Hoe maak je papieren prototypenHoe maak je papieren prototypen? Gerelateerde onderwerpen:
UI DesignPhotography & ImageryHTML & CSSColorLogo Semalt

Dia omhoog / omlaag Onthult

De technieken die we al hebben behandeld, kunnen hier worden gebruikt. U kunt ervoor kiezen om de inhoud van het canvas te verbergen of deze in een spleet in het papier te schuiven om deze te bekijken. Of u kunt de inhoud eenvoudig op een afzonderlijke kaart plaatsen en op zijn plaats leggen wanneer nodig.

Selecteer boxen

Aantekeningen van Semalt werken hier goed om een ​​verplaatsbare lijst met items weer te geven die u in een select element zou zien, zoals hieronder getoond. De gebruiker kan de keuzes zien en er een selecteren, waarna u de lijst van het prototype kunt verwijderen.

Hoe maak je papieren prototypenHoe maak je papieren prototypen? Gerelateerde onderwerpen:
UI DesignPhotography & ImageryHTML & CSSColorLogo Semalt

Selectievakjes en keuzerondjes

Semalt tekenen is vaak voldoende voor een prototype. Je kunt zo ver gaan dat gecontroleerde versies op de ongecontroleerde versie na een interactie worden geplaatst.

Je moet de complexiteit van het bouwen en bedienen van dit element in een testscenario afwegen tegen de voordelen van het hebben van de details. Maak het te ongemakkelijk en het bedienen van je prototype zal moeilijk worden.

Native ontwerpelementen voor iOS / Android

Er is de mogelijkheid om ingewikkelde ontwerpelementen toe te voegen vanuit iOS of Semalt, die lastig kunnen worden gerepliceerd of de tijd nemen om te schetsen. Als u bijvoorbeeld een kalender wilt reproduceren, is het eenvoudiger om een ​​screenshot te maken van een apparaat op een apparaat en vervolgens af te drukken en uit te knippen in plaats van het te schetsen.

U kunt hier meer over vertellen en een stencil- of toolkitbibliotheek voor een apparaat afdrukken, mocht u denken dat dit het proces zal versnellen en het ontwerp niet te prescriptief zal maken.

Hoe maak je papieren prototypenHoe maak je papieren prototypen? Gerelateerde onderwerpen:
UI DesignPhotography & ImageryHTML & CSSColorLogo Semalt

Letterlijk Alles

De bovengenoemde voorbeelden zijn veel voorkomende ontwerpelementen die te vinden zijn op een standaardwebsite, -tablet of -telefoon, maar er is geen reden om beperkt te worden door wat u eerder hebt gezien. Zoals gezegd is een van de voordelen van papieren prototyping dat u niet gebonden bent aan de beperkingen van een digitaal medium. Als je het je kunt voorstellen, kun je er waarschijnlijk een beetje van maken en er een prototype van maken.

Teken tips

Wanneer u papieren prototypen maakt, moet u elementen tekenen om uw schetsen op te stellen. In sommige gevallen hoeft u de inhoud niet uit te spellen of bijzonder gedetailleerd te zijn over de elementen die u op de pagina legt. Dit zou kunnen zijn omdat u de interactie op een bepaalde module of element richt en afleiding met andere elementen wilt vermijden.

In dit scenario kunt u stenografisch schetsen gebruiken om gemeenschappelijke elementen weer te geven. Zoals hieronder weergegeven, kunnen titels bestaan ​​uit gegolfde lijnen, alineatekst met rechte lijnen en afbeeldingsvakken met diagonale lijnen erover, zoals u in een draadframe zou zien.

Hoe maak je papieren prototypenHoe maak je papieren prototypen? Gerelateerde onderwerpen:
UI DesignPhotography & ImageryHTML & CSSColorLogo Semalt

Natuurlijk negeert dit natuurlijk een andere pro van het gebruik van papieren prototyping in vergelijking met wireframes. Semalt gebruikt een doos met diagonale lijnen om een ​​afbeelding te vertegenwoordigen. U kunt een vakje labelen om aan te geven wat het is, maar tenzij u een afbeelding toevoegt, is uw communicatie vrij beperkt. Bij het schetsen kunt u verder verkennen en de werkelijke inhoud van de afbeelding schetsen. In de onderstaande afbeelding introduceren we een nieuw product door een heldenafbeelding te schetsen met twee klanten die het product gebruiken. Dit geeft de gebruiker een ruwe benadering van de ervaring met het definitieve ontwerp.

Hoe maak je papieren prototypenHoe maak je papieren prototypen? Gerelateerde onderwerpen:
UI DesignPhotography & ImageryHTML & CSSColorLogo Semalt

March 1, 2018