Come documentare visivamente le interfacce utente interattive per un consumo rapido

6

Sto scrivendo documentazione per un'interfaccia utente Ajax interattiva, ma invece di scrivere tutto a parole preferisco fornire diagrammi più veloci di interi paragrafi di testo. Ho fornito il diagramma flusso di navigazione della pagina, ma questo è un livello molto alto prima di approfondire le singole pagine e il loro funzionamento interno.

Esempio

Supponiamo di dover documentare un tipico pannello di ricerca:

  • è compresso per impostazione predefinita e può essere espanso al clic
  • ha campi di ricerca di base che forniscono criteri di ricerca di base sulla mia entità modello
  • ha anche campi avanzati che mostrano quando si fa clic su un particolare collegamento che espande la ricerca con campi aggiuntivi
  • ha due azioni Search e Reset che sono praticamente auto esplicative, ma hanno comportamenti particolari ad esse associati

So che dirai che questa è già una documentazione, ma di solito non è così semplice e banale. Il pannello di ricerca è solo un esempio.

Vedo che la maggior parte delle mie interfacce (o dei componenti dell'interfaccia) richiedono due tipi di documentazione:

  1. proprietà relative ai controlli contenuti (ad esempio, campo a discesa con questi e quei valori di cui quella particolare è selezionata per impostazione predefinita)
  2. azioni e comportamenti che descrivono cosa succede quando l'utente interagisce con i controlli relativi a tali proprietà

Quale sarebbe il miglior diagramma o formato di documentazione per descrivere questo tipo di interfacce interattive in modo che sia facile e veloce da utilizzare per gli implementatori?

    
posta Robert Koritnik 22.08.2012 - 18:45
fonte

1 risposta

6

La migliore documentazione che mi è stata data per implementare è stata disegnata come wireframe con note. Ogni pagina della documentazione era un wireframe con tutte le note necessarie. Ogni stato di qualsiasi elemento che necessitava di ulteriori spiegazioni ha generato un'altra pagina. Ad esempio, un menu a discesa standard è ovvio, ma un menu in espansione otterrà note sugli effetti di scorrimento e su quale altra pagina del documento viene visualizzata al clic di ciascun elemento.

Vantaggi di questo tipo di documento:

  • Può includere tutti i dettagli che desideri.
  • Può essere molto utile per i non sviluppatori. Alcuni di quelli che ho visto includevano spaziatura dei margini, ecc. Per i progettisti e un'appendice per le scelte di colore.

Svantaggi:

  • Può essere ingombrante - potenzialmente molte pagine del documento per spiegare una singola pagina web
  • Non visivamente automatizzato, come un prototipo o una presentazione potrebbe essere

Aggiungerò che questo era lo stile preferito per almeno alcuni esperti di interfacce utente con cui ho lavorato.

    
risposta data 22.08.2012 - 19:11
fonte

Leggi altre domande sui tag