it-swarm-eu.dev

Come si definiscono le interazioni in un modello?

Sono sia un programmatore che un designer UX/UI. Quando progetto cose, generalmente realizzo immagini statiche di come apparirà l'interfaccia. Il problema è che la maggior parte delle UI non sono statiche; cambiano e si ridimensionano dall'input dell'utente. Ovviamente, so esattamente come l'interfaccia dovrebbe rispondere a tale input, ma per progetti di grandi dimensioni il cliente e altri programmatori devono essere in grado di prendere i miei modelli e comprendere le interazioni. Quindi, in che modo mostri in che modo il tuo design interagisce e risponde all'utente?

17

Il modo migliore per descrivere l'interazione è modellarlo con un prototipo interattivo.

Esistono vari strumenti di prototipazione come Axure o quello che stiamo sviluppando, Handcraft . Qualunque sia quello che usi, il punto è che ti permettono di mostrare al tuo cliente, colleghi, ecc. Cosa succede quando interagisci con gli elementi del modello. Otterrai risultati molto migliori utilizzando un prototipo per mostrare l'interattività rispetto a quanto farai con un modello cliccabile. È possibile mostrare i cambiamenti di stato di base con i modelli e c'è una fase del processo di progettazione in cui ciò può essere utile, ma ci sono alcune cose che sono difficili da descrivere con immagini statiche, come animazioni (vitali in determinate situazioni), reattività ( un elemento chiave di interattività) e, nel caso di app native o web, la "sensazione" di utilizzare quella particolare piattaforma.

7signals parla molto di come saltano i wireframe e passano direttamente all'HTML. Ho scritto n post sul blog qualche mese fa a proposito di un discorso tenuto durante il quale hanno descritto il loro processo.

Tuttavia, se si desidera arricchire i modelli statici, Interactive Sketching Notation di Jakub Linowski è un buon punto di partenza per un modo simile a UML per descrivere l'interazione:

interactive sketching notation

Vedi Pro/contro di PSD vs modelli HTML per una discussione simile:

Se stai costruendo un sito Web o un'applicazione, i modelli HTML sono di gran lunga superiori perché stai progettando il modello nel formato il più vicino possibile al prodotto finale. Ciò consente di impostare le aspettative molto più facilmente, ti limita a ciò che è possibile nel prodotto finale e offre una flessibilità molto maggiore.

25
Rahul

Quando un mock-up interattivo non è un'opzione, prova il testo. È possibile aggiungere numeri che puntano a parti dell'immagine statica o wireframe e quindi fornire note di interazione per ciascun numero.

alt text

Sopra: un esempio di un numero di puntamento.

5
JeromeR

Se non hai la possibilità di utilizzare qualcosa come Axure (o un altro strumento di prototipazione interattivo o persino HTML o Flash), penso che la soluzione migliore sia cablare la vista "standard" o "predefinita", quindi mostrare in fili aggiuntivi il stati alternati di moduli particolari.

Nella mia esperienza fare affidamento su annotazioni basate su testo per comunicare le modifiche è di solito insufficiente - ho fatto troppi progetti in cui i wireframe perfettamente annotati venivano fraintesi o costruiti in modo errato perché clienti/sviluppatori/ecc. mancavano importanti dettagli testuali che sarebbero stati meglio catturati visivamente.

2
Michael Histen

So che questo ha sei mesi e mezzo, ma poiché nessuno lo ha ancora menzionato, lo farò:

Bill Buxton ha scritto un libro chiamato "Sketching User Experiences" che affronta il problema "sketching" del design dell'interazione - come possiamo comunicare concetti e schemi di interazione in modo esplorativo, cioè rapidamente e a basso costo, ma non troppo astratto?

2
Jan