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

•  Diagrammi

Rappresentazione

•  Sketch

•  Diagrammi

Rappresentazione

•  Sketch

•  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)

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: -‐  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 info@laresrl.com marco.livraghi@laresrl.com

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

Wireframing /Prototyping with HTML

Layout and Wireframing

Wireframing and prototyping

Mobiledevcamp2012 Livraghi appcelerator 19 Maggio 2012

Axure vs UXpin

GRADO EN DISEÑO MULTIMEDIA Y GRÁFICO PLANIFICACIÓN DE … · TEMA 3: WIREFRAMING Y VALOR DEL PROTOTIPADO. AXURE RP. Fundamento de wireframing. Ventajas e inconvenientes. Categorías

Prototyping with Axure

Intro to Wireframing

Wireframing impromptu

Présentation Logiciel Axure

Wireframing recitation

Rapid Prototyping with Axure RP Part 3 – Using Axure for Usability Testing

Axure Core Training

Digital hack solutions LOREM IPSUM - zemsania.com · ¤ Nerramientas Wireframing ( UX): Axure, Balsamiq

Axure widgets masters

Prototyping with Axure RP - A brief introduction to Axure

Designers Guide To Wireframing

Prototyping Axure

Website wireframing

Wireframing Web Apps