SlideShare una empresa de Scribd logo
1 de 19
Descargar para leer sin conexión
Il tool definitivo
dello UX designer
   di Alberto Mucignat



       UX Camp Firenze
       17 Ottobre 2009
http://www.flickr.com/photos/mikeoliveri/1322688055/




L’utente.
Cosa fa l’UX Designer
      Logo
                                                        Link 1              Link 2            Link 3



      Video title                                                              Searcg


                                                                                     Video


                                                                                             img




                                                                                             img




                                                                                             img




              Button 1                  Button 2                 Button 3            More videos


                                                                                             img
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
      Suspendisse ut purus. Suspendisse tristique. Cras et sem at
      odio porttitor mattis. Donec dignissim ornare tortor. Donec lectus
      turpis, tempor id, cursus vitae, eleifend in, risus. Aenean turpis.
      Mauris ultricies quam malesuada ligula.                                                img



      Comments
                                                                                             img
                Lorem ipsum dolor sit amet, consectetuer adipiscing
                elit. Suspendisse ut purus. Suspendisse tristique. Cras
                et sem at odio porttitor mattis. Donec dignissim ornare
                tortor.
Cosa fa l’UX Designer
               Logo
                                                                 Link 1              Link 2            Link 3


 Marketing                                                                                                       Dirigenti
               Video title                                                              Searcg


                                                                                              Video


                                                                                                      img




 UX Team                                                                                              img       Stakeholders

                                                                                                      img




                       Button 1                  Button 2                 Button 3            More videos
                                                                                                                  Brand
Sviluppatori
               Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
                                                                                                      img
                                                                                                                 Manager
               Suspendisse ut purus. Suspendisse tristique. Cras et sem at
               odio porttitor mattis. Donec dignissim ornare tortor. Donec lectus
               turpis, tempor id, cursus vitae, eleifend in, risus. Aenean turpis.
               Mauris ultricies quam malesuada ligula.                                                img



               Comments
                                                                                                      img        Product
 Fornitori               Lorem ipsum dolor sit amet, consectetuer adipiscing
                         elit. Suspendisse ut purus. Suspendisse tristique. Cras
                                                                                                                 Manager
                         et sem at odio porttitor mattis. Donec dignissim ornare
                         tortor.
Il Tool Definitivo dello UX Designer
Logo
                                                                                                                               Link 1              Link 2            Link 3



                                                                             Video title                                                              Searcg


                                                                                                                                                            Video


                                                                                                                                                                    img




                                                                                                                                                                    img




                                                                                                                                                                    img




                                                                                     Button 1                  Button 2                 Button 3            More videos


                                                                                                                                                                    img
                                                                             Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
                                                                             Suspendisse ut purus. Suspendisse tristique. Cras et sem at
                                                                             odio porttitor mattis. Donec dignissim ornare tortor. Donec lectus
                                                                             turpis, tempor id, cursus vitae, eleifend in, risus. Aenean turpis.


                             Maria
                                                                             Mauris ultricies quam malesuada ligula.                                                img



                                                                             Comments
                             22 anni, Roma                                             Lorem ipsum dolor sit amet, consectetuer adipiscing
                                                                                                                                                                    img

                                                                                       elit. Suspendisse ut purus. Suspendisse tristique. Cras
                              ------------- ----- --- ---- -- ----- --- --             et sem at odio porttitor mattis. Donec dignissim ornare
                                                                                       tortor.
                              ---- -- ----- --- - -- ---- ------ ----- ---
                              ---- ----- --- ---- -- ---- ---- ----- ---




Obiettivi
•   ------------- ----- --- ---- -- -----
•   ---- -- ----- --- - -- ---- ------
•   ---- ----- --- ---- -- ---- ---- -----
•   ---- -- ----- --- - -- ---- ------



Task
•   ------------- ----- --- ---- -- -----
•   ---- -- ----- --- - -- ---- ------
•   ---- ----- --- ---- -- ---- ---- -----
•   ---- -- ----- --- - -- ---- ------
http://www.flickr.com/photos/loft42/224677076/




Carta e Penna
Costo




        ------------------------------




                                         Tempo
“Using wireframes earlier in the design process
           focuses time and attention
    on all the wrong details and activities.”
 http://www.adaptivepath.com/ideas/essays/archives/000863.php
“Above the bar is what the user sees. Below the bar is
what they do. An arrow connects the user’s action to a
        new screen with yet another action.”
  http://37signals.com/svn/posts/1926-a-shorthand-for-designing-ui-flows
Testata



                       Area utente
Contenuto principale




                          Altri
                        contenuti
 Azioni secondarie




              Footer

  Wireframe a blocchi
http://www.flickr.com/photos/pasotraspaso/2561252664/




La bassa fedeltà comunica meglio.
http://www.mucignat.com/blog/archives/654-bassa-fedelta.html
http://www.flickr.com/photos/manueb/3275645812/




   Scarabocchiare è
un modo di comunicare
Web Design 2.0
http://www.flickr.com/photos/dnorman/3492238090/




    “...throwing ideas on a whiteboard
to help flesh out the concepts a bit more.”
              -D’Arcy Norman
3 idee finali

#1   Comunicare le idee attraverso il disegno



#2   Disegnare è un processo di comunicazione



#3   Disegnare assieme agli altri
Le città del futuro
Risorse utili

    Communicating    Back of the napkin
    Design           Dan Roam
    Dan Brown




    Sketching User    Rapid Viz
    Experience        Kurt Hank
    Bill Buxton
Grazie!

          Alberto Mucignat
          User Experience Designer

          alberto.mucignat@gmail.com
          http://www.mucignat.com




                          Web che funziona.

Más contenido relacionado

Más de Alberto Mucignat

Design persuasivo: alcuni esempi
Design persuasivo: alcuni esempiDesign persuasivo: alcuni esempi
Design persuasivo: alcuni esempiAlberto Mucignat
 
Marketing e usabilità: alcuni consigli per i manager (e non)
Marketing e usabilità: alcuni consigli per i manager (e non)Marketing e usabilità: alcuni consigli per i manager (e non)
Marketing e usabilità: alcuni consigli per i manager (e non)Alberto Mucignat
 
Social design: progettare applicazioni web che funzionano
Social design: progettare applicazioni web che funzionanoSocial design: progettare applicazioni web che funzionano
Social design: progettare applicazioni web che funzionanoAlberto Mucignat
 
Web e user experience: interagire con l'utente
Web e user experience: interagire con l'utenteWeb e user experience: interagire con l'utente
Web e user experience: interagire con l'utenteAlberto Mucignat
 
Esperienza d'uso: Osservare per migliorare
Esperienza d'uso: Osservare per migliorareEsperienza d'uso: Osservare per migliorare
Esperienza d'uso: Osservare per migliorareAlberto Mucignat
 
Agile Ux: progettare e sviluppare web a iterazioni
Agile Ux: progettare e sviluppare web a iterazioniAgile Ux: progettare e sviluppare web a iterazioni
Agile Ux: progettare e sviluppare web a iterazioniAlberto Mucignat
 
SEO & IA - A findability challenge
SEO & IA - A findability challengeSEO & IA - A findability challenge
SEO & IA - A findability challengeAlberto Mucignat
 
Statistiche web: brainstorming on skypecast!
Statistiche web: brainstorming on skypecast!Statistiche web: brainstorming on skypecast!
Statistiche web: brainstorming on skypecast!Alberto Mucignat
 
Architettura delle informazioni con eZ publish
Architettura delle informazioni con eZ publishArchitettura delle informazioni con eZ publish
Architettura delle informazioni con eZ publishAlberto Mucignat
 

Más de Alberto Mucignat (10)

Design persuasivo: alcuni esempi
Design persuasivo: alcuni esempiDesign persuasivo: alcuni esempi
Design persuasivo: alcuni esempi
 
Marketing e usabilità: alcuni consigli per i manager (e non)
Marketing e usabilità: alcuni consigli per i manager (e non)Marketing e usabilità: alcuni consigli per i manager (e non)
Marketing e usabilità: alcuni consigli per i manager (e non)
 
Social design: progettare applicazioni web che funzionano
Social design: progettare applicazioni web che funzionanoSocial design: progettare applicazioni web che funzionano
Social design: progettare applicazioni web che funzionano
 
Web e user experience: interagire con l'utente
Web e user experience: interagire con l'utenteWeb e user experience: interagire con l'utente
Web e user experience: interagire con l'utente
 
Esperienza d'uso: Osservare per migliorare
Esperienza d'uso: Osservare per migliorareEsperienza d'uso: Osservare per migliorare
Esperienza d'uso: Osservare per migliorare
 
L'Utente Al Centro
L'Utente Al CentroL'Utente Al Centro
L'Utente Al Centro
 
Agile Ux: progettare e sviluppare web a iterazioni
Agile Ux: progettare e sviluppare web a iterazioniAgile Ux: progettare e sviluppare web a iterazioni
Agile Ux: progettare e sviluppare web a iterazioni
 
SEO & IA - A findability challenge
SEO & IA - A findability challengeSEO & IA - A findability challenge
SEO & IA - A findability challenge
 
Statistiche web: brainstorming on skypecast!
Statistiche web: brainstorming on skypecast!Statistiche web: brainstorming on skypecast!
Statistiche web: brainstorming on skypecast!
 
Architettura delle informazioni con eZ publish
Architettura delle informazioni con eZ publishArchitettura delle informazioni con eZ publish
Architettura delle informazioni con eZ publish
 

Último

AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara RakovskaAMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara RakovskaBarusRa
 
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdfUnlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdfIBM
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
Models of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa LetšosaModels of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa Letšosaannemarleenolthof1
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
UI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design SuccessUI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design SuccessThink 360 Studio
 

Último (18)

AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara RakovskaAMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
 
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdfUnlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
Models of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa LetšosaModels of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa Letšosa
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
UI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design SuccessUI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design Success
 

Il Tool Definitivo dello UX Designer

  • 1. Il tool definitivo dello UX designer di Alberto Mucignat UX Camp Firenze 17 Ottobre 2009
  • 3. Cosa fa l’UX Designer Logo Link 1 Link 2 Link 3 Video title Searcg Video img img img Button 1 Button 2 Button 3 More videos img Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse ut purus. Suspendisse tristique. Cras et sem at odio porttitor mattis. Donec dignissim ornare tortor. Donec lectus turpis, tempor id, cursus vitae, eleifend in, risus. Aenean turpis. Mauris ultricies quam malesuada ligula. img Comments img Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse ut purus. Suspendisse tristique. Cras et sem at odio porttitor mattis. Donec dignissim ornare tortor.
  • 4. Cosa fa l’UX Designer Logo Link 1 Link 2 Link 3 Marketing Dirigenti Video title Searcg Video img UX Team img Stakeholders img Button 1 Button 2 Button 3 More videos Brand Sviluppatori Lorem ipsum dolor sit amet, consectetuer adipiscing elit. img Manager Suspendisse ut purus. Suspendisse tristique. Cras et sem at odio porttitor mattis. Donec dignissim ornare tortor. Donec lectus turpis, tempor id, cursus vitae, eleifend in, risus. Aenean turpis. Mauris ultricies quam malesuada ligula. img Comments img Product Fornitori Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse ut purus. Suspendisse tristique. Cras Manager et sem at odio porttitor mattis. Donec dignissim ornare tortor.
  • 6. Logo Link 1 Link 2 Link 3 Video title Searcg Video img img img Button 1 Button 2 Button 3 More videos img Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse ut purus. Suspendisse tristique. Cras et sem at odio porttitor mattis. Donec dignissim ornare tortor. Donec lectus turpis, tempor id, cursus vitae, eleifend in, risus. Aenean turpis. Maria Mauris ultricies quam malesuada ligula. img Comments 22 anni, Roma Lorem ipsum dolor sit amet, consectetuer adipiscing img elit. Suspendisse ut purus. Suspendisse tristique. Cras ------------- ----- --- ---- -- ----- --- -- et sem at odio porttitor mattis. Donec dignissim ornare tortor. ---- -- ----- --- - -- ---- ------ ----- --- ---- ----- --- ---- -- ---- ---- ----- --- Obiettivi • ------------- ----- --- ---- -- ----- • ---- -- ----- --- - -- ---- ------ • ---- ----- --- ---- -- ---- ---- ----- • ---- -- ----- --- - -- ---- ------ Task • ------------- ----- --- ---- -- ----- • ---- -- ----- --- - -- ---- ------ • ---- ----- --- ---- -- ---- ---- ----- • ---- -- ----- --- - -- ---- ------
  • 8. Costo ------------------------------ Tempo
  • 9. “Using wireframes earlier in the design process focuses time and attention on all the wrong details and activities.” http://www.adaptivepath.com/ideas/essays/archives/000863.php
  • 10. “Above the bar is what the user sees. Below the bar is what they do. An arrow connects the user’s action to a new screen with yet another action.” http://37signals.com/svn/posts/1926-a-shorthand-for-designing-ui-flows
  • 11. Testata Area utente Contenuto principale Altri contenuti Azioni secondarie Footer Wireframe a blocchi
  • 12. http://www.flickr.com/photos/pasotraspaso/2561252664/ La bassa fedeltà comunica meglio. http://www.mucignat.com/blog/archives/654-bassa-fedelta.html
  • 13. http://www.flickr.com/photos/manueb/3275645812/ Scarabocchiare è un modo di comunicare
  • 15. http://www.flickr.com/photos/dnorman/3492238090/ “...throwing ideas on a whiteboard to help flesh out the concepts a bit more.” -D’Arcy Norman
  • 16. 3 idee finali #1 Comunicare le idee attraverso il disegno #2 Disegnare è un processo di comunicazione #3 Disegnare assieme agli altri
  • 17. Le città del futuro
  • 18. Risorse utili Communicating Back of the napkin Design Dan Roam Dan Brown Sketching User Rapid Viz Experience Kurt Hank Bill Buxton
  • 19. Grazie! Alberto Mucignat User Experience Designer alberto.mucignat@gmail.com http://www.mucignat.com Web che funziona.