SlideShare a Scribd company logo

Master UX from design to prototype

My lecture and exercise at the Master UX at La Sapienza University of Rome. First lesson. More will follow. more info at http://www.masterux.it/

1 of 68
Download to read offline
from User Journey and
Information Architecture
to a working prototype

salvatore.iaconesi@artisopensource.net
Master UX from design to prototype
Master UX from design to prototype
Master UX from design to prototype
Master UX from design to prototype
Master UX from design to prototype
Ad

Recommended

Joomla! v 1.5 Core Features
Joomla! v 1.5 Core FeaturesJoomla! v 1.5 Core Features
Joomla! v 1.5 Core FeaturesAmyStephen
 
Yahoo! Open Technologies @NCU
Yahoo! Open Technologies @NCUYahoo! Open Technologies @NCU
Yahoo! Open Technologies @NCUJoseph Chiang
 
Creating a Simple, Accessible On/Off Switch
Creating a Simple, Accessible On/Off SwitchCreating a Simple, Accessible On/Off Switch
Creating a Simple, Accessible On/Off SwitchRuss Weakley
 
Josephj Open At Yahoo Nsysu2
Josephj Open At Yahoo Nsysu2Josephj Open At Yahoo Nsysu2
Josephj Open At Yahoo Nsysu2Joseph Chiang
 
Flip book creator-for-html5-manual
Flip book creator-for-html5-manualFlip book creator-for-html5-manual
Flip book creator-for-html5-manualVictoria Anny
 

More Related Content

Viewers also liked

Prototype verse Sim: Validating Software and UX Design
Prototype verse Sim: Validating Software and UX DesignPrototype verse Sim: Validating Software and UX Design
Prototype verse Sim: Validating Software and UX Designfrog
 
Mobile app rapid prototype UX concept Amanda Wise
Mobile app rapid prototype UX concept   Amanda WiseMobile app rapid prototype UX concept   Amanda Wise
Mobile app rapid prototype UX concept Amanda WiseAWise14
 
Case study: Mobile optimised e-commerce checkout by Amanda Wise
Case study: Mobile optimised e-commerce checkout by Amanda Wise Case study: Mobile optimised e-commerce checkout by Amanda Wise
Case study: Mobile optimised e-commerce checkout by Amanda Wise AWise14
 
E-Commerce UX design concept case study
E-Commerce UX design concept case studyE-Commerce UX design concept case study
E-Commerce UX design concept case studyAWise14
 
Performance Management Using Audit Trail
Performance Management Using Audit TrailPerformance Management Using Audit Trail
Performance Management Using Audit TrailBlackbaud
 
Market Research Monkeytalk 2015 - spring edition
Market Research   Monkeytalk 2015 - spring editionMarket Research   Monkeytalk 2015 - spring edition
Market Research Monkeytalk 2015 - spring editionMonkeyshot
 
UX Design With Distributed Teams
UX Design With Distributed TeamsUX Design With Distributed Teams
UX Design With Distributed TeamsJohannes Baeck
 
Mobile UX - the intricacies of designing for mobile devices
Mobile UX - the intricacies of designing for mobile devicesMobile UX - the intricacies of designing for mobile devices
Mobile UX - the intricacies of designing for mobile devicesAntony Ribot
 
Hierarchy Of User Experience Needs
Hierarchy Of User Experience NeedsHierarchy Of User Experience Needs
Hierarchy Of User Experience NeedsLyndon Cerejo
 
Mobile UX Tools & Methods for UX Australia 2011
Mobile UX Tools & Methods for UX Australia 2011 Mobile UX Tools & Methods for UX Australia 2011
Mobile UX Tools & Methods for UX Australia 2011 Oliver Weidlich
 
UXing All The Things: Applying The User-Centered Process to Design, Life, and...
UXing All The Things: Applying The User-Centered Process to Design, Life, and...UXing All The Things: Applying The User-Centered Process to Design, Life, and...
UXing All The Things: Applying The User-Centered Process to Design, Life, and...J+E Creative
 
UX Workshop Activity: Missions, Methods and Mindframes. Centerline Digital.
UX Workshop Activity: Missions, Methods and Mindframes. Centerline Digital.UX Workshop Activity: Missions, Methods and Mindframes. Centerline Digital.
UX Workshop Activity: Missions, Methods and Mindframes. Centerline Digital.Centerline Digital
 
User Experience Workshop
User Experience WorkshopUser Experience Workshop
User Experience WorkshopMotivate Design
 
Lean UX: Sketch, Prototype & Validate. Fast.
Lean UX: Sketch, Prototype & Validate. Fast.Lean UX: Sketch, Prototype & Validate. Fast.
Lean UX: Sketch, Prototype & Validate. Fast.Jon Hadden
 
Design sprint slideshare
Design sprint slideshareDesign sprint slideshare
Design sprint slideshareFaren faren
 
Google Design sprint
Google Design sprintGoogle Design sprint
Google Design sprintBruno Mendes
 
User centered design process - Measurefest Presentation
User centered design process - Measurefest PresentationUser centered design process - Measurefest Presentation
User centered design process - Measurefest Presentationflashbender
 

Viewers also liked (20)

Prototype verse Sim: Validating Software and UX Design
Prototype verse Sim: Validating Software and UX DesignPrototype verse Sim: Validating Software and UX Design
Prototype verse Sim: Validating Software and UX Design
 
Mobile app rapid prototype UX concept Amanda Wise
Mobile app rapid prototype UX concept   Amanda WiseMobile app rapid prototype UX concept   Amanda Wise
Mobile app rapid prototype UX concept Amanda Wise
 
Case study: Mobile optimised e-commerce checkout by Amanda Wise
Case study: Mobile optimised e-commerce checkout by Amanda Wise Case study: Mobile optimised e-commerce checkout by Amanda Wise
Case study: Mobile optimised e-commerce checkout by Amanda Wise
 
E-Commerce UX design concept case study
E-Commerce UX design concept case studyE-Commerce UX design concept case study
E-Commerce UX design concept case study
 
Performance Management Using Audit Trail
Performance Management Using Audit TrailPerformance Management Using Audit Trail
Performance Management Using Audit Trail
 
Market Research Monkeytalk 2015 - spring edition
Market Research   Monkeytalk 2015 - spring editionMarket Research   Monkeytalk 2015 - spring edition
Market Research Monkeytalk 2015 - spring edition
 
UX Design With Distributed Teams
UX Design With Distributed TeamsUX Design With Distributed Teams
UX Design With Distributed Teams
 
Mobile UX - the intricacies of designing for mobile devices
Mobile UX - the intricacies of designing for mobile devicesMobile UX - the intricacies of designing for mobile devices
Mobile UX - the intricacies of designing for mobile devices
 
Hierarchy Of User Experience Needs
Hierarchy Of User Experience NeedsHierarchy Of User Experience Needs
Hierarchy Of User Experience Needs
 
Mobile UX Tools & Methods for UX Australia 2011
Mobile UX Tools & Methods for UX Australia 2011 Mobile UX Tools & Methods for UX Australia 2011
Mobile UX Tools & Methods for UX Australia 2011
 
UX workshop
UX workshopUX workshop
UX workshop
 
UXing All The Things: Applying The User-Centered Process to Design, Life, and...
UXing All The Things: Applying The User-Centered Process to Design, Life, and...UXing All The Things: Applying The User-Centered Process to Design, Life, and...
UXing All The Things: Applying The User-Centered Process to Design, Life, and...
 
UX Workshop Activity: Missions, Methods and Mindframes. Centerline Digital.
UX Workshop Activity: Missions, Methods and Mindframes. Centerline Digital.UX Workshop Activity: Missions, Methods and Mindframes. Centerline Digital.
UX Workshop Activity: Missions, Methods and Mindframes. Centerline Digital.
 
User Experience Workshop
User Experience WorkshopUser Experience Workshop
User Experience Workshop
 
Lean UX: Sketch, Prototype & Validate. Fast.
Lean UX: Sketch, Prototype & Validate. Fast.Lean UX: Sketch, Prototype & Validate. Fast.
Lean UX: Sketch, Prototype & Validate. Fast.
 
Design Sprint
Design SprintDesign Sprint
Design Sprint
 
Design sprint slideshare
Design sprint slideshareDesign sprint slideshare
Design sprint slideshare
 
Google Design sprint
Google Design sprintGoogle Design sprint
Google Design sprint
 
User centered design process - Measurefest Presentation
User centered design process - Measurefest PresentationUser centered design process - Measurefest Presentation
User centered design process - Measurefest Presentation
 
UI / UX Design Presentation
UI / UX Design PresentationUI / UX Design Presentation
UI / UX Design Presentation
 

Similar to Master UX from design to prototype

SPS Stockholm: PowerApps Jumpstart
SPS Stockholm: PowerApps JumpstartSPS Stockholm: PowerApps Jumpstart
SPS Stockholm: PowerApps JumpstartSandy Ussia
 
jQuery Mobile
jQuery MobilejQuery Mobile
jQuery Mobilemowd8574
 
Metamorphosis from Forms to Java: A technical lead's perspective, part II
Metamorphosis from Forms to Java:  A technical lead's perspective, part IIMetamorphosis from Forms to Java:  A technical lead's perspective, part II
Metamorphosis from Forms to Java: A technical lead's perspective, part IIMichael Fons
 
Chapter 2 lesson-2 styling the action bar
Chapter 2 lesson-2 styling the action barChapter 2 lesson-2 styling the action bar
Chapter 2 lesson-2 styling the action barKalluri Vinay Reddy
 
View groups containers
View groups containersView groups containers
View groups containersMani Selvaraj
 
I Store For Beginners
I Store For BeginnersI Store For Beginners
I Store For BeginnersRahul Saxena
 
How to create ui using droid draw
How to create ui using droid drawHow to create ui using droid draw
How to create ui using droid drawinfo_zybotech
 
Lecture 2 Styling and Layout in React Native.pptx
Lecture 2 Styling and Layout in React Native.pptxLecture 2 Styling and Layout in React Native.pptx
Lecture 2 Styling and Layout in React Native.pptxGevitaChinnaiah
 
The EffiChange XPager Suite: Understanding XPages Scaffolding
The EffiChange XPager Suite: Understanding XPages ScaffoldingThe EffiChange XPager Suite: Understanding XPages Scaffolding
The EffiChange XPager Suite: Understanding XPages ScaffoldingEffiChange LLC
 
Building a simple user interface lesson2
Building a simple user interface lesson2Building a simple user interface lesson2
Building a simple user interface lesson2Kalluri Vinay Reddy
 
jQuery Mobile with HTML5
jQuery Mobile with HTML5jQuery Mobile with HTML5
jQuery Mobile with HTML5madhurpgarg
 
Chapter 2 lesson-1 adding the action bar
Chapter 2 lesson-1 adding the action barChapter 2 lesson-1 adding the action bar
Chapter 2 lesson-1 adding the action barKalluri Vinay Reddy
 
Android Study Jam 2
Android Study Jam 2Android Study Jam 2
Android Study Jam 2DSC GVP
 

Similar to Master UX from design to prototype (20)

SPS Stockholm: PowerApps Jumpstart
SPS Stockholm: PowerApps JumpstartSPS Stockholm: PowerApps Jumpstart
SPS Stockholm: PowerApps Jumpstart
 
jQuery Mobile
jQuery MobilejQuery Mobile
jQuery Mobile
 
Android ui with xml
Android ui with xmlAndroid ui with xml
Android ui with xml
 
Metamorphosis from Forms to Java: A technical lead's perspective, part II
Metamorphosis from Forms to Java:  A technical lead's perspective, part IIMetamorphosis from Forms to Java:  A technical lead's perspective, part II
Metamorphosis from Forms to Java: A technical lead's perspective, part II
 
Chapter 2 lesson-2 styling the action bar
Chapter 2 lesson-2 styling the action barChapter 2 lesson-2 styling the action bar
Chapter 2 lesson-2 styling the action bar
 
View groups containers
View groups containersView groups containers
View groups containers
 
I Store For Beginners
I Store For BeginnersI Store For Beginners
I Store For Beginners
 
How to create ui using droid draw
How to create ui using droid drawHow to create ui using droid draw
How to create ui using droid draw
 
New Introductionfor Flash Designers
New Introductionfor Flash DesignersNew Introductionfor Flash Designers
New Introductionfor Flash Designers
 
Form part1
Form part1Form part1
Form part1
 
Lecture 2 Styling and Layout in React Native.pptx
Lecture 2 Styling and Layout in React Native.pptxLecture 2 Styling and Layout in React Native.pptx
Lecture 2 Styling and Layout in React Native.pptx
 
The EffiChange XPager Suite: Understanding XPages Scaffolding
The EffiChange XPager Suite: Understanding XPages ScaffoldingThe EffiChange XPager Suite: Understanding XPages Scaffolding
The EffiChange XPager Suite: Understanding XPages Scaffolding
 
jQuery Mobile
jQuery MobilejQuery Mobile
jQuery Mobile
 
Building a simple user interface lesson2
Building a simple user interface lesson2Building a simple user interface lesson2
Building a simple user interface lesson2
 
Knockout in action
Knockout in actionKnockout in action
Knockout in action
 
jQuery Mobile with HTML5
jQuery Mobile with HTML5jQuery Mobile with HTML5
jQuery Mobile with HTML5
 
Chapter 2 lesson-1 adding the action bar
Chapter 2 lesson-1 adding the action barChapter 2 lesson-1 adding the action bar
Chapter 2 lesson-1 adding the action bar
 
Android Study Jam 2
Android Study Jam 2Android Study Jam 2
Android Study Jam 2
 
Hello Android
Hello AndroidHello Android
Hello Android
 
Ap quiz app
Ap quiz appAp quiz app
Ap quiz app
 

More from Salvatore Iaconesi

Innovation and Trangression: exploring Third Spaces and Excess Spaces
Innovation and Trangression: exploring Third Spaces and Excess SpacesInnovation and Trangression: exploring Third Spaces and Excess Spaces
Innovation and Trangression: exploring Third Spaces and Excess SpacesSalvatore Iaconesi
 
Third Infoscape, presented at DIS2017 in Edinburgh
Third Infoscape, presented at DIS2017 in EdinburghThird Infoscape, presented at DIS2017 in Edinburgh
Third Infoscape, presented at DIS2017 in EdinburghSalvatore Iaconesi
 
La Cura: Erbe Indisciplinate, ricapitolazione
La Cura: Erbe Indisciplinate, ricapitolazioneLa Cura: Erbe Indisciplinate, ricapitolazione
La Cura: Erbe Indisciplinate, ricapitolazioneSalvatore Iaconesi
 
La Cura, Erbe Indisciplinate, presentazione di benvenuto, frame
La Cura, Erbe Indisciplinate, presentazione di benvenuto, frameLa Cura, Erbe Indisciplinate, presentazione di benvenuto, frame
La Cura, Erbe Indisciplinate, presentazione di benvenuto, frameSalvatore Iaconesi
 
Human Ecosystems and the Ubiquitous Commons at the STARTS program meeting
Human Ecosystems and the Ubiquitous Commons at the STARTS program meetingHuman Ecosystems and the Ubiquitous Commons at the STARTS program meeting
Human Ecosystems and the Ubiquitous Commons at the STARTS program meetingSalvatore Iaconesi
 
Ubiquitous Commons at NetFutures 2015
Ubiquitous Commons at NetFutures 2015Ubiquitous Commons at NetFutures 2015
Ubiquitous Commons at NetFutures 2015Salvatore Iaconesi
 
Near Future Design class at Isia Design: Transmedia narratives
Near Future Design class at Isia Design: Transmedia narratives Near Future Design class at Isia Design: Transmedia narratives
Near Future Design class at Isia Design: Transmedia narratives Salvatore Iaconesi
 
Ubiquitous Commons workshop at transmediale 2015, Capture All
Ubiquitous Commons workshop at transmediale 2015, Capture AllUbiquitous Commons workshop at transmediale 2015, Capture All
Ubiquitous Commons workshop at transmediale 2015, Capture AllSalvatore Iaconesi
 
Informazione Ubiqua: come è fatto un museo ubiquo?
Informazione Ubiqua: come è fatto un museo ubiquo?Informazione Ubiqua: come è fatto un museo ubiquo?
Informazione Ubiqua: come è fatto un museo ubiquo?Salvatore Iaconesi
 
Art is Open Source at Visualize: materials and links
Art is Open Source at Visualize: materials and linksArt is Open Source at Visualize: materials and links
Art is Open Source at Visualize: materials and linksSalvatore Iaconesi
 
Near Future Design: the performance of infinite futures
Near Future Design: the performance of infinite futuresNear Future Design: the performance of infinite futures
Near Future Design: the performance of infinite futuresSalvatore Iaconesi
 
Incautious Porn, SSN2014 Presentation in Barcelona
Incautious Porn, SSN2014 Presentation in BarcelonaIncautious Porn, SSN2014 Presentation in Barcelona
Incautious Porn, SSN2014 Presentation in BarcelonaSalvatore Iaconesi
 
Near Future Design - ISIA 6 Marzo 2014
Near Future Design - ISIA 6 Marzo 2014Near Future Design - ISIA 6 Marzo 2014
Near Future Design - ISIA 6 Marzo 2014Salvatore Iaconesi
 
Human Ecosystems - the relational ecosystems of cities for a new definition o...
Human Ecosystems - the relational ecosystems of cities for a new definition o...Human Ecosystems - the relational ecosystems of cities for a new definition o...
Human Ecosystems - the relational ecosystems of cities for a new definition o...Salvatore Iaconesi
 
La Cura: an Open Source Cure for Cancer, at Transmediale 2014: Afterglow. In ...
La Cura: an Open Source Cure for Cancer, at Transmediale 2014: Afterglow. In ...La Cura: an Open Source Cure for Cancer, at Transmediale 2014: Afterglow. In ...
La Cura: an Open Source Cure for Cancer, at Transmediale 2014: Afterglow. In ...Salvatore Iaconesi
 
Openness Workshop at Luiss i-Lab
Openness Workshop at Luiss i-Lab Openness Workshop at Luiss i-Lab
Openness Workshop at Luiss i-Lab Salvatore Iaconesi
 
EC(m1) the Cultural Ecosystem of Rome, at Cultur+
EC(m1) the Cultural Ecosystem of Rome, at Cultur+EC(m1) the Cultural Ecosystem of Rome, at Cultur+
EC(m1) the Cultural Ecosystem of Rome, at Cultur+Salvatore Iaconesi
 
Innovation Ecosystems at Internet Festival 2013
Innovation Ecosystems at Internet Festival 2013Innovation Ecosystems at Internet Festival 2013
Innovation Ecosystems at Internet Festival 2013Salvatore Iaconesi
 

More from Salvatore Iaconesi (20)

Innovation and Trangression: exploring Third Spaces and Excess Spaces
Innovation and Trangression: exploring Third Spaces and Excess SpacesInnovation and Trangression: exploring Third Spaces and Excess Spaces
Innovation and Trangression: exploring Third Spaces and Excess Spaces
 
Third Infoscape, presented at DIS2017 in Edinburgh
Third Infoscape, presented at DIS2017 in EdinburghThird Infoscape, presented at DIS2017 in Edinburgh
Third Infoscape, presented at DIS2017 in Edinburgh
 
La Cura: Erbe Indisciplinate, ricapitolazione
La Cura: Erbe Indisciplinate, ricapitolazioneLa Cura: Erbe Indisciplinate, ricapitolazione
La Cura: Erbe Indisciplinate, ricapitolazione
 
La Cura, Erbe Indisciplinate, presentazione di benvenuto, frame
La Cura, Erbe Indisciplinate, presentazione di benvenuto, frameLa Cura, Erbe Indisciplinate, presentazione di benvenuto, frame
La Cura, Erbe Indisciplinate, presentazione di benvenuto, frame
 
Human Ecosystems and the Ubiquitous Commons at the STARTS program meeting
Human Ecosystems and the Ubiquitous Commons at the STARTS program meetingHuman Ecosystems and the Ubiquitous Commons at the STARTS program meeting
Human Ecosystems and the Ubiquitous Commons at the STARTS program meeting
 
Ubiquitous Commons at NetFutures 2015
Ubiquitous Commons at NetFutures 2015Ubiquitous Commons at NetFutures 2015
Ubiquitous Commons at NetFutures 2015
 
Near Future Design class at Isia Design: Transmedia narratives
Near Future Design class at Isia Design: Transmedia narratives Near Future Design class at Isia Design: Transmedia narratives
Near Future Design class at Isia Design: Transmedia narratives
 
Imaginary Brands
Imaginary BrandsImaginary Brands
Imaginary Brands
 
Ubiquitous Commons workshop at transmediale 2015, Capture All
Ubiquitous Commons workshop at transmediale 2015, Capture AllUbiquitous Commons workshop at transmediale 2015, Capture All
Ubiquitous Commons workshop at transmediale 2015, Capture All
 
Informazione Ubiqua: come è fatto un museo ubiquo?
Informazione Ubiqua: come è fatto un museo ubiquo?Informazione Ubiqua: come è fatto un museo ubiquo?
Informazione Ubiqua: come è fatto un museo ubiquo?
 
Art is Open Source at Visualize: materials and links
Art is Open Source at Visualize: materials and linksArt is Open Source at Visualize: materials and links
Art is Open Source at Visualize: materials and links
 
Near Future Design: the performance of infinite futures
Near Future Design: the performance of infinite futuresNear Future Design: the performance of infinite futures
Near Future Design: the performance of infinite futures
 
Incautious Porn, SSN2014 Presentation in Barcelona
Incautious Porn, SSN2014 Presentation in BarcelonaIncautious Porn, SSN2014 Presentation in Barcelona
Incautious Porn, SSN2014 Presentation in Barcelona
 
Near Future Design - ISIA 6 Marzo 2014
Near Future Design - ISIA 6 Marzo 2014Near Future Design - ISIA 6 Marzo 2014
Near Future Design - ISIA 6 Marzo 2014
 
Human Ecosystems - the relational ecosystems of cities for a new definition o...
Human Ecosystems - the relational ecosystems of cities for a new definition o...Human Ecosystems - the relational ecosystems of cities for a new definition o...
Human Ecosystems - the relational ecosystems of cities for a new definition o...
 
La Cura: an Open Source Cure for Cancer, at Transmediale 2014: Afterglow. In ...
La Cura: an Open Source Cure for Cancer, at Transmediale 2014: Afterglow. In ...La Cura: an Open Source Cure for Cancer, at Transmediale 2014: Afterglow. In ...
La Cura: an Open Source Cure for Cancer, at Transmediale 2014: Afterglow. In ...
 
Aivot 1: a concept Library
Aivot 1: a concept LibraryAivot 1: a concept Library
Aivot 1: a concept Library
 
Openness Workshop at Luiss i-Lab
Openness Workshop at Luiss i-Lab Openness Workshop at Luiss i-Lab
Openness Workshop at Luiss i-Lab
 
EC(m1) the Cultural Ecosystem of Rome, at Cultur+
EC(m1) the Cultural Ecosystem of Rome, at Cultur+EC(m1) the Cultural Ecosystem of Rome, at Cultur+
EC(m1) the Cultural Ecosystem of Rome, at Cultur+
 
Innovation Ecosystems at Internet Festival 2013
Innovation Ecosystems at Internet Festival 2013Innovation Ecosystems at Internet Festival 2013
Innovation Ecosystems at Internet Festival 2013
 

Recently uploaded

Nzinga Kika - The story of the queen
Nzinga Kika    -  The story of the queenNzinga Kika    -  The story of the queen
Nzinga Kika - The story of the queenDeanAmory1
 
Odontogenesis and its related anomiles.pptx
Odontogenesis and its related anomiles.pptxOdontogenesis and its related anomiles.pptx
Odontogenesis and its related anomiles.pptxMennat Allah Alkaram
 
ACTIVIDAD DE CLASE No 1 sopa de letras.docx
ACTIVIDAD DE CLASE No 1 sopa de letras.docxACTIVIDAD DE CLASE No 1 sopa de letras.docx
ACTIVIDAD DE CLASE No 1 sopa de letras.docxMaria Lucia Céspedes
 
Persuasive Speaking and Means of Persuasion
Persuasive Speaking and Means of PersuasionPersuasive Speaking and Means of Persuasion
Persuasive Speaking and Means of PersuasionCorinne Weisgerber
 
BÀI TẬP BỔ TRỢ 4 KĨ NĂNG TIẾNG ANH LỚP 8 - HK2 - GLOBAL SUCCESS - NĂM HỌC 202...
BÀI TẬP BỔ TRỢ 4 KĨ NĂNG TIẾNG ANH LỚP 8 - HK2 - GLOBAL SUCCESS - NĂM HỌC 202...BÀI TẬP BỔ TRỢ 4 KĨ NĂNG TIẾNG ANH LỚP 8 - HK2 - GLOBAL SUCCESS - NĂM HỌC 202...
BÀI TẬP BỔ TRỢ 4 KĨ NĂNG TIẾNG ANH LỚP 8 - HK2 - GLOBAL SUCCESS - NĂM HỌC 202...Nguyen Thanh Tu Collection
 
ICSE English Literature Class X Handwritten Notes
ICSE English Literature Class X Handwritten NotesICSE English Literature Class X Handwritten Notes
ICSE English Literature Class X Handwritten NotesGauri S
 
Plant Genetic Resources, Germplasm, gene pool - Copy.pptx
Plant Genetic Resources, Germplasm, gene pool - Copy.pptxPlant Genetic Resources, Germplasm, gene pool - Copy.pptx
Plant Genetic Resources, Germplasm, gene pool - Copy.pptxAKSHAYMAGAR17
 
Food Web SlideShare for Ecology Notes Quiz in Canvas
Food Web SlideShare for Ecology Notes Quiz in CanvasFood Web SlideShare for Ecology Notes Quiz in Canvas
Food Web SlideShare for Ecology Notes Quiz in CanvasAlexandraSwartzwelde
 
Chromatography-Gas chromatography-Principle
Chromatography-Gas chromatography-PrincipleChromatography-Gas chromatography-Principle
Chromatography-Gas chromatography-Principleblessipriyanka
 
catch-up-friday-ARALING PNLIPUNAN SOCIAL JUSTICE AND HUMAN RIGHTS
catch-up-friday-ARALING PNLIPUNAN SOCIAL JUSTICE AND HUMAN RIGHTScatch-up-friday-ARALING PNLIPUNAN SOCIAL JUSTICE AND HUMAN RIGHTS
catch-up-friday-ARALING PNLIPUNAN SOCIAL JUSTICE AND HUMAN RIGHTSCarlaNicolas7
 
BBA 603 FUNDAMENTAL OF E- COMMERCE UNIT 1.pptx
BBA 603 FUNDAMENTAL OF E- COMMERCE UNIT 1.pptxBBA 603 FUNDAMENTAL OF E- COMMERCE UNIT 1.pptx
BBA 603 FUNDAMENTAL OF E- COMMERCE UNIT 1.pptxProf. Kanchan Kumari
 
BTKi in Treatment Of Chronic Lymphocytic Leukemia
BTKi in Treatment Of Chronic Lymphocytic LeukemiaBTKi in Treatment Of Chronic Lymphocytic Leukemia
BTKi in Treatment Of Chronic Lymphocytic LeukemiaFaheema Hasan
 
11 CI SINIF SINAQLARI - 10-2023-Aynura-Hamidova.pdf
11 CI SINIF SINAQLARI - 10-2023-Aynura-Hamidova.pdf11 CI SINIF SINAQLARI - 10-2023-Aynura-Hamidova.pdf
11 CI SINIF SINAQLARI - 10-2023-Aynura-Hamidova.pdfAynouraHamidova
 
Creative, Technical, and Academic Writing
Creative, Technical, and Academic WritingCreative, Technical, and Academic Writing
Creative, Technical, and Academic WritingMYDA ANGELICA SUAN
 
11 CI SINIF SINAQLARI - 5-2023-Aynura-Hamidova.pdf
11 CI SINIF SINAQLARI - 5-2023-Aynura-Hamidova.pdf11 CI SINIF SINAQLARI - 5-2023-Aynura-Hamidova.pdf
11 CI SINIF SINAQLARI - 5-2023-Aynura-Hamidova.pdfAynouraHamidova
 
Practical Research 1: Qualitative Research and Its Importance in Daily Life.pptx
Practical Research 1: Qualitative Research and Its Importance in Daily Life.pptxPractical Research 1: Qualitative Research and Its Importance in Daily Life.pptx
Practical Research 1: Qualitative Research and Its Importance in Daily Life.pptxKatherine Villaluna
 
11 CI SINIF SINAQLARI - 2-2023-Aynura-Hamidova.pdf
11 CI SINIF SINAQLARI - 2-2023-Aynura-Hamidova.pdf11 CI SINIF SINAQLARI - 2-2023-Aynura-Hamidova.pdf
11 CI SINIF SINAQLARI - 2-2023-Aynura-Hamidova.pdfAynouraHamidova
 
2.20.24 The March on Washington for Jobs and Freedom.pptx
2.20.24 The March on Washington for Jobs and Freedom.pptx2.20.24 The March on Washington for Jobs and Freedom.pptx
2.20.24 The March on Washington for Jobs and Freedom.pptxMaryPotorti1
 
skeletal system complete details with joints and its types
skeletal system complete details with joints and its typesskeletal system complete details with joints and its types
skeletal system complete details with joints and its typesMinaxi patil. CATALLYST
 

Recently uploaded (20)

Nzinga Kika - The story of the queen
Nzinga Kika    -  The story of the queenNzinga Kika    -  The story of the queen
Nzinga Kika - The story of the queen
 
Odontogenesis and its related anomiles.pptx
Odontogenesis and its related anomiles.pptxOdontogenesis and its related anomiles.pptx
Odontogenesis and its related anomiles.pptx
 
ACTIVIDAD DE CLASE No 1 sopa de letras.docx
ACTIVIDAD DE CLASE No 1 sopa de letras.docxACTIVIDAD DE CLASE No 1 sopa de letras.docx
ACTIVIDAD DE CLASE No 1 sopa de letras.docx
 
Persuasive Speaking and Means of Persuasion
Persuasive Speaking and Means of PersuasionPersuasive Speaking and Means of Persuasion
Persuasive Speaking and Means of Persuasion
 
BÀI TẬP BỔ TRỢ 4 KĨ NĂNG TIẾNG ANH LỚP 8 - HK2 - GLOBAL SUCCESS - NĂM HỌC 202...
BÀI TẬP BỔ TRỢ 4 KĨ NĂNG TIẾNG ANH LỚP 8 - HK2 - GLOBAL SUCCESS - NĂM HỌC 202...BÀI TẬP BỔ TRỢ 4 KĨ NĂNG TIẾNG ANH LỚP 8 - HK2 - GLOBAL SUCCESS - NĂM HỌC 202...
BÀI TẬP BỔ TRỢ 4 KĨ NĂNG TIẾNG ANH LỚP 8 - HK2 - GLOBAL SUCCESS - NĂM HỌC 202...
 
ICSE English Literature Class X Handwritten Notes
ICSE English Literature Class X Handwritten NotesICSE English Literature Class X Handwritten Notes
ICSE English Literature Class X Handwritten Notes
 
Plant Genetic Resources, Germplasm, gene pool - Copy.pptx
Plant Genetic Resources, Germplasm, gene pool - Copy.pptxPlant Genetic Resources, Germplasm, gene pool - Copy.pptx
Plant Genetic Resources, Germplasm, gene pool - Copy.pptx
 
Food Web SlideShare for Ecology Notes Quiz in Canvas
Food Web SlideShare for Ecology Notes Quiz in CanvasFood Web SlideShare for Ecology Notes Quiz in Canvas
Food Web SlideShare for Ecology Notes Quiz in Canvas
 
Chromatography-Gas chromatography-Principle
Chromatography-Gas chromatography-PrincipleChromatography-Gas chromatography-Principle
Chromatography-Gas chromatography-Principle
 
catch-up-friday-ARALING PNLIPUNAN SOCIAL JUSTICE AND HUMAN RIGHTS
catch-up-friday-ARALING PNLIPUNAN SOCIAL JUSTICE AND HUMAN RIGHTScatch-up-friday-ARALING PNLIPUNAN SOCIAL JUSTICE AND HUMAN RIGHTS
catch-up-friday-ARALING PNLIPUNAN SOCIAL JUSTICE AND HUMAN RIGHTS
 
BBA 603 FUNDAMENTAL OF E- COMMERCE UNIT 1.pptx
BBA 603 FUNDAMENTAL OF E- COMMERCE UNIT 1.pptxBBA 603 FUNDAMENTAL OF E- COMMERCE UNIT 1.pptx
BBA 603 FUNDAMENTAL OF E- COMMERCE UNIT 1.pptx
 
Capter 5 Climate of Ethiopia and the Horn GeES 1011.pdf
Capter 5 Climate of Ethiopia and the Horn GeES 1011.pdfCapter 5 Climate of Ethiopia and the Horn GeES 1011.pdf
Capter 5 Climate of Ethiopia and the Horn GeES 1011.pdf
 
BTKi in Treatment Of Chronic Lymphocytic Leukemia
BTKi in Treatment Of Chronic Lymphocytic LeukemiaBTKi in Treatment Of Chronic Lymphocytic Leukemia
BTKi in Treatment Of Chronic Lymphocytic Leukemia
 
11 CI SINIF SINAQLARI - 10-2023-Aynura-Hamidova.pdf
11 CI SINIF SINAQLARI - 10-2023-Aynura-Hamidova.pdf11 CI SINIF SINAQLARI - 10-2023-Aynura-Hamidova.pdf
11 CI SINIF SINAQLARI - 10-2023-Aynura-Hamidova.pdf
 
Creative, Technical, and Academic Writing
Creative, Technical, and Academic WritingCreative, Technical, and Academic Writing
Creative, Technical, and Academic Writing
 
11 CI SINIF SINAQLARI - 5-2023-Aynura-Hamidova.pdf
11 CI SINIF SINAQLARI - 5-2023-Aynura-Hamidova.pdf11 CI SINIF SINAQLARI - 5-2023-Aynura-Hamidova.pdf
11 CI SINIF SINAQLARI - 5-2023-Aynura-Hamidova.pdf
 
Practical Research 1: Qualitative Research and Its Importance in Daily Life.pptx
Practical Research 1: Qualitative Research and Its Importance in Daily Life.pptxPractical Research 1: Qualitative Research and Its Importance in Daily Life.pptx
Practical Research 1: Qualitative Research and Its Importance in Daily Life.pptx
 
11 CI SINIF SINAQLARI - 2-2023-Aynura-Hamidova.pdf
11 CI SINIF SINAQLARI - 2-2023-Aynura-Hamidova.pdf11 CI SINIF SINAQLARI - 2-2023-Aynura-Hamidova.pdf
11 CI SINIF SINAQLARI - 2-2023-Aynura-Hamidova.pdf
 
2.20.24 The March on Washington for Jobs and Freedom.pptx
2.20.24 The March on Washington for Jobs and Freedom.pptx2.20.24 The March on Washington for Jobs and Freedom.pptx
2.20.24 The March on Washington for Jobs and Freedom.pptx
 
skeletal system complete details with joints and its types
skeletal system complete details with joints and its typesskeletal system complete details with joints and its types
skeletal system complete details with joints and its types
 

Master UX from design to prototype

  • 1. from User Journey and Information Architecture to a working prototype salvatore.iaconesi@artisopensource.net
  • 12. EXAMPLE from the “browse products” list to the shopping cart STATE NAME: browse products list INFORMATION INPUT/INTERACTION ACTIONS - list of products - input search term update_list(product category, with name, page, search filter, sorting options) thumbnail - selection list of Goes to the “browse products list” state. image, price, product categories Shows the updated product list short description visualization - control to change sorting - page number in list, buy_product(product number, pagination information - list paging navigation quantity) controls Goes to the “shopping cart” state. - product category Shows the updated shopping cart. - buy control, with ... indication of quantity (preset to “1”)
  • 13. EXAMPLE map showing different categories of geo-points STATE NAME: show map with categories INFORMATION INPUT/INTERACTION ACTIONS - map of the geographical - filter controls, to choose update_visualization(geo-context, area what types of icons you category filter, search terms) want to see on map Goes to the “show map with categories” - icons of the points in the state. visualized area - map navigation controls Shows the updated map (as result of map navigation) and geo-points (as result of - legend for the icons and - search field, to search category filter and search terms) map details geo-points which contain a certain term get_detail(geo-point identificator) Goes to the “geo-point detail” state. - click on icons, to get Shows the detailed information of the geo-points detail point the user clicked.
  • 18. LET’S TRY IT with this scenario A man walks into the museum. He purchases the ticket. On the ticket is a QRCode. He scans it with his smartphone and accesses the Museum App. Each artwork in the museum has a label with a QRCode. When you scan it, you get detailed information of the artwork, as well as the list of artworks which are related to it in some way. If you select one of them, you get the directions to go to it. The app can be used to see the list of artworks you’ve already seen, to browse/search/filter the list of artworks in the museum, and, for each artwork, to see the comments and ratings other users have left about it. When you finish your tour, you can use the App to create “Your Tour of the Museum”, which can be shared on social networks. “Your Tour of the Museum” can be used at the Museum’s bookshop to print out and purchase a personalized T- Shirt. The App also shows a visualization of visitors’ favourite spots of the Museum, which is also shown at the Museum’s entrance as a projection.
  • 19. WHAT YOU WILL NEED a text editor (we use this: http://www.sublimetext.com/ ) some space online and an FTP access to it (for the Master UX students: look for your accesses in the “dati_FTP.txt” file I gave you) a smartphone/tablet to test it some javascript libraries: jQuery: http://jquery.com/ jQuery Mobile: http://jquerymobile.com/ Processing JS: http://processingjs.org/ Processing: http://processing.org/
  • 20. I have created a software kit for you. You can download it here: http://www.designinteraction.it/mio/MasterUX_software_kit.zip (Note for students: the files I gave you in class include an additional text file which describes the FTP accesses I created for you to upload the files to your group’s webspace)
  • 21. install everything and make sure that everything is working: install the text editor check that your web space is accessible online for the Master UX students: your web spaces are at http://www.designinteraction.it/gruppo1 http://www.designinteraction.it/gruppo2 check that your FTP account is correctly configured on your FTP client check that your smartphone/tablet can go online
  • 22. OK, let’s start remember, we’re building a prototype the objective is to have something usable, that will give the idea of what it feels like to use the service and to develop it quickly, without using too much time/resources, so that it does not cost us too much to change something, and to quickly arrive at the version we like, to develop it completely. Here we will not cure the visuals of the prototype too much. Please cure them more on your prototype, as its visual style is fundamental for the user experience.
  • 24. We will make the App using HTML5 + JavaScript + CSS in a way that it will be usable from most smartphones and tablets there are some limitations: you cannot use the camera you cannot access many native elements of the phone so for now we will simulate all these but, in the end, I will show you how to enable them, in a way which works across all platforms.
  • 25. Note: you need some working knowledge about HTML and CSS for this part please look at a good introductory level tutorial if you don’t know anything about HTML or CSS You can find one here, for example: http://www.cssbasics.com/introduction-to-css/ http://www.htmlgoodies.com/primers/html/article.php/3478141/Basic- HTML-Introduction.htm
  • 26. Upload these files using FTP to the root of the web space you will use for the prototype
  • 27. the “template.html” file is a starting point to create all your App’s screens it includes the javascript libraries, a set of CSS files to allow transforming the interface when the user turns the device from landscape to portrait and viceversa
  • 28. template.html let’s open it up on the text editor to see how it’s done
  • 29. lines 3 to 15 contain the HEAD section of the HTML, used to configure the page lines 16 to 35 contain the BODY of the page, where the content is
  • 30. In the HEAD of template.html this defines a screen that adapts to your device’s full width and height
  • 31. In the HEAD of template.html this line is commented out for now, and it links to your jQueryMobile CSS stylesheet
  • 32. In the HEAD of template.html these two lines here link two CSS files to the page: one will be used when the device is in landscape mode (horizontal), one for portrait mode (vertical) the files are configured for iPAD
  • 33. In the HEAD of template.html these two lines here link the jQuery and jQueryMobile javascript libraries to your page.
  • 34. In the BODY of template.html the body of a page can be grouped together using the DIV elements. Each DIV can represent a block of content, both logically and visually.
  • 35. In the BODY of template.html in jQueryMobile the “data-role” attribute of HTML elements is used to describe their role in the interface. “header”, for example, means the component on top of the page.
  • 36. In the BODY of template.html for example this “listview” data-role will be used to transform this standard HTML list into a list-view typical of the smartphone that visualizes the page.
  • 37. In the BODY of template.html there are other “data-” attributes, too. The “data-filter” attribute tells jQueryMobile to put a filter-box on top of the list, so that the user can perform a contextual search while browsing the list.
  • 38. LET’s CREATE THE APP’s HOME PAGE duplicate the “template.html” file, rename the copy to “index.html” edit it with your text editor make sure to edit the file using a text editor, one which handles only pure text, not formatting, alignment, or else. The “sublime” editor included in the KIT linked a few slides ago is one of these types of editors.
  • 39. EDIT the “index.html” file, make it look like this: remove the comment on line 7 set an interesting title for the home page empty the content DIV, as we’ll be adding our own really soon
  • 41. TIP: constantly test what you’re doing. Open the App prototype you are creating. Use your smartphone/tablet, and refresh the page at every change you make (every time you upload the updated file using FTP) if you don’t have a smartphone/tablet, you can at least use one of the many ones which are available online, such as http://alexw.me/ipad2 http://ipadpeek.com/
  • 42. LET’S TRANSFORM OUR “index.html” INTO THE APP’S HOME SCREEN
  • 43. Let’s keep it simple for now: according to the state diagram the home screen includes: - function to scan the QRCode of an artwork - function to go to the list of artworks in the museum - function to go to the “what visitors like” visualization - function to go to the “Your Museum” screen We can place the “scan QRCode” function in the middle of the screen, to make it really accessible. We can put all the rest in a tab-bar at the bottom of the screen.
  • 44. the “data-id” attribute will be the same in all our pages. In this way jQueryMobile will know that it is always the same footer, and it will keep it visible during content transitions let’s add a footer with fixed positioning at the bottom of our page
  • 45. we can use images (for example icons) instead of the labels. To do this we replace the label with an “img” HTML tag. for example we could replace the “Artworks” label with this tag: <img src=”artworks-icon.png” border=”0” /> the “artworks-icon.png” would be a PNG image of the icon, to be uploaded via FTP to the same folder where the “index.html” is. let’s add a navigation bar in our footer. the bar will include a list of navigation links.
  • 46. this is what we obtain
  • 47. let’s create the image for the button which we will click to scan the QRCode of an artwork we will save it as a PNG image with transparent background let’s call it “scan.png”
  • 48. let’s add the control to our “content” DIV we obtain this: remember: we will take care of the aesthetics after this tutorial, using CSS and graphics for now let’s just simplify things and let’s add everything that is needed on the interface, and let’s make it work
  • 49. Now everything we need is on the Home Screen we now have to make the various components actually do something when the user touches them we will do it by replacing the “#” element in the controls with the indication of the page which represents the action’s result
  • 50. Make 4 copies of the “index.html” file and rename them to scan.html list.html visualization.html yourMuseum.html these will be the pages which we will use for the functions
  • 51. In the “index.html” file replace the “#” with these page names
  • 52. To each link (<a> tag) add a “data-transition” element to configure a transition between the pages for example adding data-transition=”pop” will add a nice transition to the way in which the next interface appears a list of transitions can be found here: http://jquerymobile.com/demos/1.2.0/docs/pages/page-transitions.html
  • 54. Empty the “content” DIV of each of the other files Just erase everything inside the <div></div> element Make sure that the links (<a> tags) in all the pages have the same transitions, for consistency Just copy them across all the pages, so that they are the same
  • 55. For example my “list.hml” page now has become like this
  • 56. let’s create the list of artworks in the “list.html” page
  • 58. data-role=”listview” creates a data-filter=”true” adds a nice this includes a placeholder typical selection list on your search bar which we can text in the search field tablet or smartphone use to filter the elements each element of the list is an item of the listview I added 4, but you can add as many as you want each item can have its own icon, just draw them, upload them to the FTP folders and put the right name in place of the one I used The content of each item can be formatted using HTML in any way you want
  • 59. for simplicity, in this example, I put in the link all the same destination. This means that whatever artwork I choose from the list, the same detail page will appear. You can obviously provide different links for the different items to provide different detail screens. Or if you have time, you can create a database and generate the details dynamically
  • 60. and these are the Header and Content DIVs of the “artworkDetail.html” page a “back” button to go back to the list a “forward” button to receive the directions to go to the selected artwork an example of GRID to layout content nicely on all screens (look at http://jquerymobile.com/ demos/1.2.0/docs/content/content- grids.html for more info ) some placeholder content another header, to define the start of the section which lists the related artworks another grid to nicely hold the thumbnails and links to the related artworks (here, as well, we’re pointing the links to the same artwork details: you might want to add more variety in your prototype, by creating multiple pages or to use a database)
  • 61. and is a simple version of what the BODY of the “path.html” page could be a simple DIV containing the image of a map of the museum which highlights the path from your current location to the selected artwork but we could develop a more interactive version of this, and make the prototype behave better
  • 62. This process can continue in the same way, to implement the prototype of the whole App
  • 63. For apps: some functionalities (such as using the camera, the contact list, teh accelerometer...) require native functionalities which are not available through HTML+CSS+JavaScript We can use platforms like Phonegap to put our HTML5 prototype into a native App, thus avoiding to re-develop everything for each platform (e.g.: write one prototype using jQueryMobile, then put it into Phonegap and deploy natively on each platform) more information here: http://phonegap.com/
  • 64. MVC: Model View Controller It is a way to divide all the components which make a service, so that logic is divided from presentation elements, and to facilitate teams to work together effectively. the MODEL is made by the database, the transaction systems and all those things which compose the infrastructure for the service. In the prototype we mostly develop placeholders for the Model the VIEW is composed by the interfaces, the visuals, the signage, by what we directly experience of the service touchpoints. In the prototype we aim at creating the best possible View, with the least effort. the CONTROLLER is composed by the software elements, by the alerts, notifications and procedures which interconnect Views to the Model, and back. In the prototype we implement barebones Controllers whose objective is to allow us to perform a complete User Journey.
  • 67. Workflow explained Conceptualize: all the team works together to create the concept; users are engaged to gain insights; the user journey is created; some sketches are produced; Agree/Structure: the Information Architecture is created; the State Diagram is created; its pieces are broken down into Information/Input/Actions; these are used to describe the Views which will compose the service, the Controllers which will coordinate them and the Model components; modalities and protocols for exchanging information from one to the other are agreed upon, too; Develop:Views are developed with the aid of visual designers, supported by developers; Controllers are mostly created by developers, who also create most parts of the placeholders of Model components, or who integrate those ones which are already existing. Assemble: everyone gets together and the MVC components are interconnected to create this iteration of the prototype; adjustments will be needed; get ready for late nights :) Test: internal tests are performed; then users are engaged and asked to use the prototype; Evaluate: metrics shall be defined and used to understand test results; need for change or fixing might emerge at this stage, and the team will, thus, probably redesign some elements to leverage these insights Finalize version: eventually, things work out fine :) When this happens, we can move from prototype to the full version
  • 68. in the next lesson we will see how to prototype for things which are different from an App we will use Model components with more dynamics, to allow information to propagate from one part of the prototype to the other we will start the final prototype salvatore.iaconesi@artisopensource.net

Editor's Notes

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n
  12. \n
  13. \n
  14. \n
  15. \n
  16. \n
  17. \n
  18. \n
  19. \n
  20. \n
  21. \n
  22. \n
  23. \n
  24. \n
  25. \n
  26. \n
  27. \n
  28. \n
  29. \n
  30. \n
  31. \n
  32. \n
  33. \n
  34. \n
  35. \n
  36. \n
  37. \n
  38. \n
  39. \n
  40. \n
  41. \n
  42. \n
  43. \n
  44. \n
  45. \n
  46. \n
  47. \n
  48. \n
  49. \n
  50. \n
  51. \n
  52. \n
  53. \n
  54. \n
  55. \n
  56. \n
  57. \n
  58. \n
  59. \n
  60. \n
  61. \n
  62. \n
  63. \n
  64. \n
  65. \n
  66. \n
  67. \n
  68. \n