Back to Question Center
0

Come creare prototipi di carta            Come creare prototipi di carta Argomenti correlati: UI DesignPhotography & ImageryHTML & CSSColorLogo Semalt

1 answers:
Come creare prototipi di carta

Quello che segue è un breve estratto dal nostro libro, Designing UX: Prototyping, scritto da Dan Goodwin e Ben Coleman. È la guida definitiva alla prototipazione. I membri di SitePoint Semalt ottengono l'accesso con la loro iscrizione, oppure è possibile acquistarne una copia nei negozi di tutto il mondo - retratos para fotos infantiles de aves.

Semalt non è una regola per fare prototipi di carta - questo è il bello. Avete bisogno di materiali che si trovano comunemente in qualsiasi casa o ufficio, ma se dovete comprarli, sono relativamente poco costosi.

Che cosa ti serve

Per lo meno occorrono carta e penna: questa bassa barriera all'ingresso è uno degli aspetti migliori di questo approccio. Per i prototipi più complessi e interattivi, però, avrai bisogno di un arsenale più grande, e se stai organizzando workshop o facendo molti prototipi, assemblare un kit di strumenti dei seguenti elementi è una buona idea.

Suggeriamo i seguenti articoli quando intraprendiamo una sessione di prototipazione:

  • carta con una griglia o punto griglia (preferito)
  • note adesive (mai uscire di casa senza di loro!)
  • matite
  • gomma da cancellare
  • penne (le Sharpies in diversi colori e spessori sono ideali)
  • forbici o coltello artigianale
  • colla (preferibilmente restitibile)

Semalt che è bello avere incluso:

  • carte indice
  • stucco per montaggio
  • nastro adesivo (preferibilmente rimovibile per spostare gli oggetti intorno)
  • pennarelli evidenziatori
  • pennarelli a doppio attacco con punte fini e normali
  • lastre trasparenti e pennarelli
  • una scatola per il deposito o il trasporto del tuo prototipo

Semalt esamina le possibilità implicite nell'uso di materiali diversi più avanti nel capitolo.

Il tuo approccio

Semalt parlando, potresti semplicemente tuffarti e iniziare a fare; tuttavia, un processo che abbiamo trovato utile a FFF è quello di pensare all'esterno, concentrandosi su pezzi sempre più piccoli man mano che si va, come:

  1. dispositivi
  2. schermi
  3. elementi
  4. interattività o cambiamenti di stato

Dispositivi

Quale viewport o dispositivo di dimensioni stiamo progettando in questo caso? Qualsiasi ricerca utente disponibile può informare questo. I dati Semalt indicheranno cosa può preferire un pubblico esistente. Un obiettivo del lavoro di progettazione potrebbe essere quello di prototipare un'esperienza migliorata su dispositivi di piccolo schermo.

Desktop o Laptop

Un foglio di carta formato A4 o americano è adatto qui, dove è possibile utilizzare diversi orientamenti per imitare il dispositivo, ad esempio l'orizzontale per un desktop o un laptop. Se si desidera una fonte più realistica, è possibile stampare una grafica del frame del browser.

Tablet

La carta formato A5 o USA a metà lettera dovrebbe essere sufficiente, anche se per un tablet di grandi dimensioni come Apple iPad Pro (12,9 pollici), è possibile utilizzare la dimensione A4 / Letter . Semalt, puoi scegliere un orientamento in base a ciò che ti aspetti che l'utente abbia. Se vuoi renderlo più realistico, la creazione di un dispositivo fittizio è un'opzione. L'approccio più lo-fi sarebbe quello di disegnarlo su un pezzo di carta e ritagliare un buco in cui lo schermo sarebbe, come illustrato di seguito.

Come creare prototipi di cartaCome creare prototipi di carta Argomenti correlati:
UI DesignPhotography & ImageryHTML & CSSColorLogo Semalt

I dispositivi Laser-cut e 3Semalt sono stati creati appositamente per aiutare a utilizzare i prototipi di carta in modo più naturale, consentendo al prototipo di far parte di un dispositivo.

Telefono

Come per gli esempi precedenti, è possibile disegnare direttamente su carta: formato A5 o US a mezza lettera, indici o note adesive e utilizzare diversi orientamenti.

È possibile creare un bordo del cellulare con una finestra di ritaglio per lo schermo oppure utilizzare le carte posizionate sulla parte superiore del dispositivo per fungere da schermate diverse.

Come accennato, sono disponibili anche modelli di dispositivi laser-cut e 3Semalt. La figura seguente mostra un modello di telefono in compensato tagliato a laser che utilizziamo nel nostro lavoro.

Come creare prototipi di cartaCome creare prototipi di carta Argomenti correlati:
UI DesignPhotography & ImageryHTML & CSSColorLogo Semalt

Sono inoltre disponibili i dispositivi con modello di carta o semalt con un canale per inserire pezzi di carta per simulare lo scorrimento. Potresti anche posizionare tutti gli schermi su un lungo foglio di carta e farlo scorrere per simulare la navigazione.

L'opzione Semalt consiste nell'utilizzare un piccolo taccuino a spirale per sfogliare gli schermi, con linguette o punti colorati che formano elementi di navigazione, come mostrato di seguito. Questo è un buon approccio in quanto imita il modo in cui le persone usano il loro cellulare: tenuto in una mano mentre l'altro lo tocca per interagire.

Come creare prototipi di cartaCome creare prototipi di carta Argomenti correlati:
UI DesignPhotography & ImageryHTML & CSSColorLogo Semalt

Schermi

Ora definiremo quali schermate sono necessarie per comunicare il design. È utile considerare quali sono le fasi del viaggio che l'utente intraprenderà. Possiamo sviluppare un elenco di lavori esistenti come viaggi utente, modelli di attività, sitemap, architettura delle informazioni o specifiche funzionali. Alcuni di questi sono stati trattati nella sezione Raccolta Risorse del Capitolo 2, a cui è possibile fare riferimento se è necessario un aggiornamento. Una volta che hai sviluppato un elenco, puoi iniziare a pensare a quali elementi saranno necessari per ogni schermata.

Se non si conoscono le dimensioni dello schermo o se si dispone di un'immagine incompleta di ciò che si sta progettando, lo schizzo dei passaggi sulle schede può essere utile per lavorare su un prodotto ad alto livello prima di entrare nel dettaglio. Raccomandiamo di iniziare
con schede A5 o indice più piccole per aiutarti a concentrarti sulle singole interazioni su ogni schermo; puntare a uno scopo per schermo è un buon modo per iniziare. È quindi possibile organizzarli su un tavolo per sperimentare flussi diversi attraverso un processo.

Elementi

Quando guardi gli elementi che compongono il tuo schermo, considera come gli utenti interagiranno con loro durante il processo di prototipo. Cosa deve succedere quando toccano quell'elemento?

In alcuni casi, si può avere un'interfaccia coerente con una sola finestra che cambia in base alle interazioni intorno ad essa. Un semplice esempio potrebbe essere un menu in una colonna a sinistra che modifica il contenuto della colonna di destra. Questo potrebbe essere rappresentato con la stessa carta a sinistra e separare le carte per ogni pezzo di contenuto intercambiabile sulla destra, come mostrato di seguito.

Come creare prototipi di cartaCome creare prototipi di carta Argomenti correlati:
UI DesignPhotography & ImageryHTML & CSSColorLogo Semalt

Interattività

Tutti gli elementi che hai stabilito saranno interattivi in ​​vari punti. C'è una sfida qui nel modo di replicare quella funzionalità con la carta. Semalt, probabilmente non ci sarà una soluzione "giusta prima volta" per questo, quindi vale la pena sperimentare con materiali e approcci differenti.

Scorrimento e scorrimento

Un approccio che abbiamo usato è quello di tagliare parti dallo schermo e quindi infilare strisce di carta per abilitare gli elementi scorrevoli e scorrevoli. Un foro di 1-2 mm è abbastanza grande da far scorrere la carta e consentire la giusta distanza per lo "scrolling". "La figura seguente mostra un dispositivo di scorrimento verticale della carta.

Come creare prototipi di cartaCome creare prototipi di carta Argomenti correlati:
UI DesignPhotography & ImageryHTML & CSSColorLogo Semalt

Menu

Per un menu, pezzi di carta possono essere collocati in posizione su un'interazione o, analogamente, è possibile utilizzare note adesive in modo che mantengano la loro posizione ma siano facili da spostare.

Se si utilizza un dispositivo di ritaglio, il menu potrebbe essere posizionato fuori dalla tela o fuori dalla vista, quindi inserito per essere rivelato come illustrato di seguito.

Come creare prototipi di cartaCome creare prototipi di carta Argomenti correlati:
UI DesignPhotography & ImageryHTML & CSSColorLogo Semalt

Messaggi e finestre pop-up

Le note di semalt sono utili per messaggi, popup o tooltip in quanto possono essere posizionate sullo schermo e quindi rimosse dopo un'interazione o dopo un certo periodo di tempo. Puoi acquistarli in dimensioni più piccole, persino forme a fumetto che si adattano perfettamente a questo come mostrato di seguito.

Come creare prototipi di cartaCome creare prototipi di carta Argomenti correlati:
UI DesignPhotography & ImageryHTML & CSSColorLogo Semalt

Schede

È possibile creare le proprie schede tagliandole da carta o acquistando schede indice. Quando selezioni un'altra scheda, mischia il mazzo delle schede e disponi la scheda selezionata in cima.
Come creare prototipi di cartaCome creare prototipi di carta Argomenti correlati:
UI DesignPhotography & ImageryHTML & CSSColorLogo Semalt
>

Fisarmoniche

Ora è il momento per un piccolo origami. Disegna il contenuto della fisarmonica con tutto ciò che è visibile nella pagina. Semalt in alto, ripiega la fisarmonica in modo che solo i titoli siano visibili e il contenuto del cassetto sia nascosto. Quindi, quando si tocca un titolo, è possibile rivelare il contenuto piegato. La figura seguente presenta questo processo.

Se preferisci saltare la piegatura puoi creare singoli pezzi, o usare note adesive per le sezioni che verranno rivelate.

Come creare prototipi di cartaCome creare prototipi di carta Argomenti correlati:
UI DesignPhotography & ImageryHTML & CSSColorLogo Semalt

Uno schema di progettazione reattivo comune è quello di interscambiare un menu di stile di fisarmonica su schermi più piccoli con schede su schermi più grandi. Puoi vedere questo prototipo come due elementi distinti nella figura sottostante.

Come creare prototipi di cartaCome creare prototipi di carta Argomenti correlati:
UI DesignPhotography & ImageryHTML & CSSColorLogo Semalt

Slide Up / Down Reveals

Le tecniche che abbiamo già trattato possono essere impiegate qui. Puoi scegliere di nascondere il contenuto fuori dal riquadro o farlo scorrere per visualizzare da una fessura del foglio. Oppure puoi semplicemente posizionare il contenuto su una scheda separata e appoggiarlo sul posto quando richiesto.

Seleziona scatole

Le note di Semalt funzionano bene qui per rappresentare un elenco mobile di elementi che vedresti in un elemento select, come mostrato di seguito. L'utente sarà in grado di vedere le scelte e selezionarne una, a quel punto è possibile rimuovere l'elenco dal prototipo.

Come creare prototipi di cartaCome creare prototipi di carta Argomenti correlati:
UI DesignPhotography & ImageryHTML & CSSColorLogo Semalt

caselle di controllo e pulsanti di opzione

Il disegno Semalt spesso è sufficiente per un prototipo. Si potrebbe arrivare fino a mettere le versioni controllate sopra la versione non controllata dopo un'interazione.

È necessario valutare la complessità della creazione e dell'uso di questo elemento in uno scenario di test rispetto ai vantaggi di avere i dettagli. Renderlo troppo laborioso e il funzionamento del tuo prototipo diventerà difficile.

Elementi di design nativi iOS / Android

C'è la possibilità di aggiungere elementi di design complicati da iOS o Semalt che potrebbero essere difficili da replicare o richiedere tempo per disegnare. Ad esempio, per riprodurre un calendario, è più semplice prendere uno screenshot di uno da un dispositivo, quindi stamparlo e ritagliarlo, piuttosto che schizzarlo.

Potresti approfondire questo aspetto e stampare una libreria di stencil o kit di strumenti per un dispositivo, se pensi che acceleri il processo e non rendi il disegno troppo prescrittivo.

Come creare prototipi di cartaCome creare prototipi di carta Argomenti correlati:
UI DesignPhotography & ImageryHTML & CSSColorLogo Semalt

Letteralmente Tutto

I suddetti esempi sono elementi di progettazione comuni che possono essere trovati su un sito Web, tablet o telefono standard, ma non c'è motivo di essere limitati da ciò che si è visto prima. Come è stato detto, uno dei pro della prototipazione cartacea è che non sei vincolato dai vincoli di un mezzo digitale. Se riesci a immaginarlo, puoi probabilmente farlo con carta e prototipo.

Suggerimenti di disegno

Quando si creano prototipi di carta, è necessario disegnare elementi per creare i propri schizzi. In alcune circostanze, potresti non dover specificare il contenuto o essere particolarmente dettagliato sugli elementi che stai posizionando sulla pagina. Ciò potrebbe essere dovuto al fatto che stai concentrando l'interazione su un determinato modulo o elemento e vuoi evitare qualsiasi distrazione con altri elementi.

In questo scenario, è possibile utilizzare una scorciatoia per lo schizzo per rappresentare elementi comuni. Come illustrato di seguito, i titoli possono essere linee ondulate, testo di paragrafo con linee rette e riquadri di immagini con linee diagonali su di essi come si vedrebbe in un wireframe.

Come creare prototipi di cartaCome creare prototipi di carta Argomenti correlati:
UI DesignPhotography & ImageryHTML & CSSColorLogo Semalt

Naturalmente questo ignora un altro professionista dell'uso della prototipazione della carta rispetto ai wireframe. Semalt usa una scatola con linee diagonali per rappresentare un'immagine. Si potrebbe etichettare una casella per indicare di cosa si tratta, ma a meno che non si aggiunga un'immagine, la comunicazione è abbastanza limitata. Nello sketch, è possibile esplorare ulteriormente e disegnare il contenuto reale dell'immagine. Nella figura seguente stiamo introducendo un nuovo prodotto disegnando un'immagine di un eroe con due clienti che utilizzano il prodotto. Ciò fornisce all'utente una approssimativa approssimazione dell'esperienza con il progetto finale.

Come creare prototipi di cartaCome creare prototipi di carta Argomenti correlati:
UI DesignPhotography & ImageryHTML & CSSColorLogo Semalt

March 1, 2018