Livraghi - Axure - Easy wireframing & advanced prototyping

Spin off dell’Università degli Studi di Bari

Solutions Innovative

Do#. Marco Livraghi Product Manager User eXperience Designer So:ware Engineer

Easy wireframing & advanced prototyping


L’idea base


Sviluppo SW a cascata Specifica dei requisiti

Specifiche di progetto

Codifica e test

Rilascio e manutenzione

Integrazione e test

Progetto architettura


Sviluppo SW + Usabilità Specifiche dei requisiti


Codifica e test

Rilascio e manutenzione

Scenari e specifiche di interfaccia-utente

Analisi degli utenti Interviste Visite sul posto

Prototipi e test

Integrazione e test

Progetto dell’architettura


Usabilità + Documentazione


Prototipi e test


Quando?

Prototyping by Todd Zaki Warfel Rosenfeld Media, 2009


Prototipo

•  In greco prōtótypos: prõtos + týpos (primo + tipo)

•  Dizionario Hoepli: –  Primo esemplare di un oggetto destinato a essere riprodotto;

modello

•  ISO 13407: –  una rappresentazione di un prodotto o di un sistema, o di una

sua parte, che, anche se in qualche modo limitata, può essere utilizzata a scopo di valutazione


Perché i prototipi? Secondo l’ISO 13407 serve per:

•  Rendere decisioni di progetto più esplicite

•  Esplorare di diversi design concept

•  Ottenere feedback nelle fasi preliminari

•  Valutare progetti alternativi

•  Valutare qualità e completezza delle specifiche


Leonardo da Vinci (1452-1519)


Thomas Alva Edison (1847-1931)


Henry Dreyfuss (1904-1972)


Domande: •  Il prodotto funzionerà come ci si aspetta?

•  Sarà produttivo?

•  Come risponderanno gli utenti?

•  Quale approccio usare per passare dal prototipo al prodotto?

•  In che modo i prototipi supportano le specifiche di progetto?

•  In che modo i prototipi contribuiscono a migliorare la pianificazione delle attività e del budget?


Classificazione dei prototipi Scopo • Ruolo • Interfaccia • Implementazione

Modo d’uso • StaPco • Dinamico • InteraQvo

Fedeltà • Alta fedeltà • Bassa fedeltà

Completezza funzionale • Orizzontale • VerPcale

Durata • Usa e ge#a • Incrementale • EvoluPvo


Scopo •  Ruolo: valuta il ruolo

del prodotto nella vita del suo utente

•  Interfaccia: valuta le modalità di interazione tra utente e prodotto

•  Implementazione: valuta realizzazione tecnica del prodotto


Modalità d’uso

•  Statico

•  Dinamico

•  Interattivo


Fedeltà


Completezza funzionale

Funzionalità

Cara#erisPche

ProtoPpo verPcale

ProtoPpo orizzontale Scenario


Durata •  Throw away

–  Il prototipo è costruito e testato, infine viene scartato

•  Incrementale –  Il prodotto finale è

costruito integrando componenti sviluppate in modo separato

•  Evolutivo –  Il prototipo serve per la

successiva iterazione di progetto


Rappresentazione

•  Sketch

•  Storyboard – Storia d’uso

•  Diagrammi


Rappresentazione

•  Sketch

•  Storyboard – Storia d’uso

•  Diagrammi –  statechart


Perchè Axure?

•  Wireframing •  Responsive wireframing •  Advanced Prototyping sia

per desktop sia per mobile •  Note e Specifiche •  Publicazione e Share •  Semplice da utilizzare •  Librerie •  Generazione di HTML che

può essere modificato


Chi usa Axure?

•  Usability Professionals Association •  User Experience Professionals Association •  Microsoft •  Accenture •  ….

uxpa.org


Chi usa Axure?

DaP “Milan UX bookclub Workshop: ProtoPpare in Axure – Milano 5 dicembre 2013”


Per cosa si usa Axure?

DaP “Milan UX bookclub Workshop: ProtoPpare in Axure – Milano 5 dicembre 2013”


WIREFRAME

L’idea del wireframe nasce dalla modellazione 3D


WIREFRAME Wikipedia: “A website wireframe is a visual guide that represents the skeletal framework of a website” Nielsen/Norman Group: “Wireframing is a low-‐cost, rapid interaPve design technique that offers one of the best methods for gaining design insight early” h#p://www.nngroup.com/courses/wireframing-‐and-‐prototyping/


Qualità di un WIREFRAME


Esempio WIREFRAME


WIREFRAME “Wireframes are staPc representaPon of a dynamic non-‐linear flow of acPvity” Davide Casali


Altri tool (NON SONO TOOL DI PROTIPAZIONE !!!)

Photoshop Indesign Illustrator


Altri tool (NON SONO TOOL DI PROTIPAZIONE !!!)


Altri tool (NON SONO TOOL COMPLETI !!!)

Omnigraffle Balsamiq Powerpoint


Altri tool (NON SONO TOOL COMPLETI !!!)


sketchflow (MICROSOFT !!!)


Justinmind


Altri tool (NON SONO TOOL COMPLETI !!!) PLEASE, !

NO CODING!!!!


appcelerator® Titanium (PROTOTIPI SW !!!)


appcelerator® Titanium VisualSport Tracker

(1) (2) (3) (4)

(5)


Prodotto finale



Iniziamo a conoscere Axure


Widget à wireframing


Widget I componenti base con cui realizzare il prototypo

•  Common •  Forms •  Menus and Table


Differenze

•  Interazioni •  Eventi •  Stili •  Proprietà personalizzabili • Codice sorgente autogenerato


Pagine •  Gerarchie •  Stili •  Eventi

-  onLoad, -  onResize, -  …

•  Variabili •  Background •  Sketchness •  B&W


Librerie di Widget Possono essere scaricati (anche

free) o creati alla necessità. -  Form -  Widget -  Interazioni -  Icone -  Layout -  Insiemi Completi per UI

( iOS, Android, Windows, Facebook, Bootstrap, etc)


•  Label •  Form •  H1, H2, H3, H4 •  Paragrafi •  Forme •  Pagine •  Righe

-  Come i CSS, gli stili possono essere riusati -  Possono essere applicati a seguito di un

azione o una interazione

Gli sPli Forma#ano i widget


Buttons HTML o Button Shape?

HTML Button: - HTML (ovviamente) -  Non hanno stili -  Eventi:

-  onClick -  onMove -  onShow -  onHide

Bu#on Shape: -‐ Forme -‐  SPli -‐  SPli di interazione -‐  EvenP:

-‐ onClick -‐ onMouseEnter -‐ onMouseOut -‐  Ecc...


Eventi rilevabili


Menu Diversi dagli Shape

Utili perchè mettono a disposizione

•  SottoMenu (Dropdown) •  Interazioni (MouseDown,

Selected) •  Eventi (onFocus, onClick,

onLostFocus) •  Stili •  Stati: Active / Inactive

* É preferibili usarli in una pagina master * Gli stati possono essere modificati con l’evento “onLoad Page”


Master Create once, edit once, apply to all

•  Ideale per header, footer, logo, sidebar, menus…

•  Si possono convertire Widget in master

•  Si possono inserire più Master in altri Master


•  Stili •  Interazioni -  Le righe della tabella NON

possono essere aggiunte o rimosse dinamicamente

-  Non è possibile ordinare o

filtrare le celle delle tabelle.

-  Possono essere copiate da Excel (Click destro » Incolla speciale » Incolla in una tabella)

Tabelle Celle base e colonne per presentare i daP


Repeaters •  Horizontal •  Vertical •  Grid •  Sort •  Pagination •  Filtering •  Add / Remove

rows / elements


Dynamic Panels Axure’s Magic containers

•  Nomi •  Stati •  Controllati da Eventi &

istruzioni condizionali

Molto importante: DARE UN NOME AGLI STATI !!!


•  Pagine •  Dynamic Panel

Pagine o Dynamic Panel?


Pagine o Dynamic Panel?

Pagine: -‐  Learning curve bassa

-‐  Si può uPlizzare il pulsante indietro del browser

à Website

Dynamic Panel: -‐ Gesture

-‐ Animazioni e transizioni

à Mobile Apps


LE TUE IDEE SONO SVILUPPATE COME LE AVEVI IMMAGINATE ?

- Notes, Annotations & Specifications -


Note sulla pagina Per i clienti, gli stakeholders e gli sviluppatori


Annotazioni Creare note widget per widget, campo per campo


Documento di Specifica Documentare diventa più semplice…

ma resta ancora la parte più noiosa da realizzare


Documento di Specifica


Interazioni Qualsiasi prototipo è super-noioso senza !

•  Eventi –  onLoad, Hover,

onClick, onDrag

•  Azioni / Metodi – Wait, Set, Move,

ScrollTo, Show, Hide,

•  Condizioni –  If, Else if, Else Attenzione: Non vengono stampati in automatico nel documento di specifica


Eventi Si innescano a seguito di una Interazione

Conviene dare un nome all’elemento e quindi aggiungere l’interazione desiderata

•  onLoad •  onMouseEnter •  onClick •  onDrag •  Ecc…


Azioni / Metodi Per fare fare qualcosa al protipo


Istruzioni condizionali If, else, else if…. Come in ogni linguaggio di programmazione

-  Possono essere logici o manuali

-  Attivano degli eventi -  Possono leggere variabili,

stili delle forme, stati, valori, ecc…


Istruzioni condizionali manuali Non hanno una logica, è sufficiente digitare qualcosa, mostreranno dell’altro


Istruzioni condizionali logiche Programmazione per neofiti -  Possono

leggere variabili, stili delle forme, stati, valori, ecc..

-  Equals, Is not equal, greater than, contains, etc …


Adaptive Views Easy responsive wireframing

•  ElemenP differenP in base illa dimensione dei disposiPvi e del browser

• Breakpoint personalizzabili

•  ElemenP Fluid


Breakpoint Scegli dai preset o impostane di personalizzati


Esempio Desktop


Esempio Mobile


Export Image, HTML, Mobile

•  Sitemap •  Aggiungi logo custom •  Logo Mobile •  Font •  Splash screens per il

mobile •  Note •  TAG viewport

* Potrebbe essere necessario installare un plugin per visualizzare tutto correttamente nel browser


A#enzione Quando si va su mobile • Dimensione dello schermo

•  ElemenP che dovrebbero stare in alto o in basso (in base al browser)

•  Interazioni di Ppo Scroll & Drag


Exportare per mobile Per farla sembrare una vera e propria app •  Assicurarsi di

includere il TAG Viewport

•  Splash screen •  Status bar •  Vertical Scrolling •  Icona

Homescreen


•  Posta l’HTML da qualche parte: FTP, LAN, Dropbox, Google Drive, ecc…

•  Avvia il prototipo su mobile (es: iOS)

•  iOS: Click sul menu opzioni e aggiungi a start.

Exportare per mobile Per farla sembrare una vera e propria app


Tranquilli ora facciamo degli

esempi con Axure


6 Tutorial di base


Iniziamo


Lavoriamo con le pagine


Widget & Master


Costruiamo le interazioni


Introduzione ai Dynamic Panels


Istruzioni Condizionali, Valori e Variabili


Reference: www.axure.com/learn


Extra Training: Adaptive View



Grazie per l’attenzione! Reference: Prof. Paolo Buono – ProtoPpazione – MobileDevCamp 2012 www.axure.com/learn




www.laresrl.com [email protected] [email protected]


Usare le shortcut !


Dare nomi sensati ad ogni cosa !!!!


Pianificare prima di prototipare !!!!


Trasformare tutto il possibile in MASTER!


Un prototipo non deve simulare tutte le funzionalità del prodotto finale!!


Non investire troppo tempo nel realizzare un progetto Axure…

É solo un prototipo !!!!


Quando un prototipo è BUONO!il prodotto può diventare BUONO PER DAVVERO !!!!


Prodotto!

Livraghi - Axure - Easy wireframing & advanced prototyping

Design

Transcript of Livraghi - Axure - Easy wireframing & advanced prototyping