Mobile1st ux/ui with Titanium

Alessio Ricco
Alessio RiccoSenior Mobile Developer at Carma
Mobile First UX/UI
with Titanium

@alessioricco
TiConf 2015 Dhaka

User Experience
Design
@alessioricco
@alessioricco
Let me introduce myself
not a classic software engineer
@alessioricco
UX Designer
ScrumMaster
Titan
Javascript
.net
Startupper
Community Manager
Impro Actor
Coach
Speaker
Software Developer
NLP
Facilitator
Co-Design
Appcelerator
@alessioricco
T-shaped skills
• The concept of T-shaped skills, or T-shaped
persons is a metaphor used in job recruitment to
describe the abilities of persons in the workforce. 



The vertical bar on the T represents the depth of
related skills and expertise in a single field,
whereas the horizontal bar is the ability to
collaborate across disciplines with experts in
other areas and to apply knowledge in areas of
expertise other than one's own.
http://en.wikipedia.org/wiki/T-shaped_skills
@alessioricco
http://weblogs.asp.net/craigshoemaker/history-of-user-experience
@alessioricco
UX
CONTEXT CONTENT
USER
@alessioricco
UX design
User experience design (UXD or UED) is the process of
enhancing customer satisfaction and loyalty by improving the
usability, ease of use, and pleasure provided in the
interaction between the customer and the product.



User experience design encompasses traditional human–
computer interaction (HCI) design, and extends it by
addressing all aspects of a product or service as perceived by
users.



User experience is any aspect of a person's interaction with
a given IT system, including the interface, graphics, industrial
design, physical interaction, and the manual.[3]
http://en.wikipedia.org/wiki/User_experience_design
@alessioricco
UX Disciplines
• User Research
• Content Strategy
• Information Architecture
• Interaction Design
• Visual Design
• Usability Evaluation
http://www.slideshare.net/nickf/the-ux-disciplines
UX Disciplines
@alessioricco
UX Disciplines
http://visual.ly/disciplines-user-experience-design
UX Disciplines
Interaction
Design
@alessioricco
@alessioricco
Interaction Design
In design, human–computer interaction, and software
development, interaction design, often abbreviated IxD, is
"about shaping digital things for people’s use”, alternately
defined as "the practice of designing interactive digital
products, environments, systems, and services."



What clearly marks interaction design as a design field as
opposed to a science or engineering field is that it is synthesis
and imagining things as they might be, more so than
focusing on how things are.
http://en.wikipedia.org/wiki/Interaction_design
UX Disciplines
Empathy Map
SEEING
SAYING
DOING
FEELING
HEARING
THINKING
@alessioricco
Mobile First
Mobile first RWD
1. Allows websites to reach more people (77% of the world’s population has a mobile device, 85%
of phones sold in 2011 equipped with browser)
2. Forces designers to focus on core content and functionality (What do you do when you lose 80%
of your screen real estate?)
3. Lets designers innovate and take advantage of new technologies (geolocation, touch events
and more)
http://web3canvas.com/what-is-mobile-first-responsive-design/
@alessioricco
Mobile First
@alessioricco
Type of Interactions
• Lookup/Find

(urgent/ local)
Eg. “Where’s the nearest restaurant ?”

“Where is the street I’m looking for ?”
@alessioricco
Type of Interactions
• Explore/Play

(bored / local)
“Let me see the news feed”

Watching our list of twitter followers

Finding the soulmate on a dating app
@alessioricco
Type of Interactions
• Checkin/Status

(repeat / microtasking)
Checking the email

Watching our Likes on FB

Tweet something important for us
@alessioricco
Type of Interactions
• Edit/Create

(urgent / microtasking)
Send an important message, email, sms

Payment

Downloading a file

Fill a form
@alessioricco
Mobile First
@alessioricco
@alessioricco
UX/UI and
Titanium
@alessioricco
@alessioricco
A real world example
2 dev

1 int. designer

15 days

android / iOS
http://www.nois3.it/en/work/world-medicine-park-app-cross-platform/
@alessioricco
A real world example
http://www.nois3.it/en/work/world-medicine-park-app-cross-platform/
ds.slideMenu
webView
wordpress
@alessioricco
A real world example
http://www.nois3.it/en/work/world-medicine-park-app-cross-platform/
@alessioricco
A real world example
ACS
Custom
Widget
com.mcongrove.tabs
http://www.nois3.it/en/work/world-medicine-park-app-cross-platform/
@alessioricco
listView
custom chat 

server (REST)
network aware
smooth

scrolling
NO NATIVE MODULES!

& CROSS PLATFORM
ACS Push
notification 

via chat server

http://www.nois3.it/en/work/world-medicine-park-app-cross-platform/
backgroundRightCap
@alessioricco
Carma Carpool
https://carmacarpool.com/
@alessioricco
ti.tandemscroll
https://github.com/appcelerator-modules/ti.tandemscroll/tree/master/ios
@alessioricco
TiSocial.Framework
https://github.com/viezel/TiSocial.Framework
@alessioricco
Beacons
https://github.com/jbeuckm/TiBeacons
@alessioricco
mapbox
https://www.mapbox.com/
@alessioricco
Wikitude
BUILT FOR TITANIUM
3D MODELS AND ANIMATIONS
IMAGE RECOGNITION AND TRACKING
LOCATION-BASED SERVICES WITH GEO DATA
VIDEO AUGMENTATIONS
http://www.wikitude.com/products/extensions/titanium-module-augmented-reality/
@alessioricco
SoniaVillanueva and Javier Rayonhttp://www.uxmobilepatterns.com/
@alessioricco
TiIconicFonts
https://github.com/k0sukey/TiIconicFont Kosuke Isobe
Coding UX/UI on
Titanium
@alessioricco
@alessioricco
Memory Leaks
• Memory Leaks are the worst enemy!
• Use inspector and DDMS
• Remove UI objects and null their references
• Always remove the event listeners (close event)
• Be careful with closures
• Don’t pollute the global scope
• Avoid Ti.App events
@alessioricco
Optimization
• Cache your data
• Be careful with the images
• Use the font libraries for the symbols
• Don’t abuse of the Ti.Platform properties
• Pay attention at the unattended double clicks
• Open your windows/views immediately showing
cached and local data
@alessioricco
And….
Always Keep It Super Simple!
@alessioricco
Some links
Fifty Shades of Alloy



http://www.fastcodesign.com/3032719/ui-ux-who-does-what-a-designers-guide-to-the-tech-industry



http://blog.careerfoundry.com/the-difference-between-ux-and-ui-design-a-laymans-guide/



http://weblogs.asp.net/craigshoemaker/history-of-user-experience



http://www.slideshare.net/nickf/the-ux-disciplines



http://www.meetup.com/NYC-Titanium-Users-Group/events/120510002/



http://vincentjordan.com/2011/10/designing-great-ux-via-appcelerator-titanium/



http://shortboredsurfer.com/2010/08/11-principles-of-interaction-design-explained/



http://www.amazon.com/Mobile-First-Luke-Wroblewski/dp/1937557022 



http://vimeopro.com/appcelerator/advanced-titanium-mobile-development/video/44338177
https://www.facebook.com/groups/TitaniumMobileItaly/
http://www.linkedin.com/in/alessioricco

http://www.slideshare.net/alessioricco

@alessioricco
1 of 42

Recommended

Itkan mobile-disabilities v5 by
Itkan mobile-disabilities v5Itkan mobile-disabilities v5
Itkan mobile-disabilities v5Pat Maher
482 views26 slides
Co-design tools and techniques - world usability day rome 2015 by
Co-design tools and techniques - world usability day rome 2015Co-design tools and techniques - world usability day rome 2015
Co-design tools and techniques - world usability day rome 2015Alessio Ricco
5K views56 slides
Public speaking 4 geeks - Lorenzo Barbieri - Codemotion Milan 2016 by
Public speaking 4 geeks - Lorenzo Barbieri - Codemotion Milan 2016Public speaking 4 geeks - Lorenzo Barbieri - Codemotion Milan 2016
Public speaking 4 geeks - Lorenzo Barbieri - Codemotion Milan 2016Codemotion
557 views20 slides
Big Data, Small Dashboard - Andrea Maietta - Codemotion Milan 2016 by
Big Data, Small Dashboard - Andrea Maietta - Codemotion Milan 2016Big Data, Small Dashboard - Andrea Maietta - Codemotion Milan 2016
Big Data, Small Dashboard - Andrea Maietta - Codemotion Milan 2016Codemotion
1.9K views119 slides
Plano Detalhado Hinode 2016 by
Plano Detalhado Hinode 2016Plano Detalhado Hinode 2016
Plano Detalhado Hinode 2016Leonilson Soares
30.5K views23 slides
Tiga Langkah Mudah Membuat UX (User Experience) Website Anda Menjadi Lebih Baik by
Tiga Langkah Mudah Membuat UX (User Experience) Website Anda Menjadi Lebih BaikTiga Langkah Mudah Membuat UX (User Experience) Website Anda Menjadi Lebih Baik
Tiga Langkah Mudah Membuat UX (User Experience) Website Anda Menjadi Lebih BaikBorrys Hasian
17.2K views24 slides

More Related Content

Similar to Mobile1st ux/ui with Titanium

LavaCon: Hunting Unicorns - What Makes an Effective UX Professional by
LavaCon: Hunting Unicorns - What Makes an Effective UX ProfessionalLavaCon: Hunting Unicorns - What Makes an Effective UX Professional
LavaCon: Hunting Unicorns - What Makes an Effective UX ProfessionalPatrick Neeman
8K views45 slides
UI/UX Designer in the year 2020 | Developers Day Nov.19 by
UI/UX Designer in the year 2020 | Developers Day Nov.19UI/UX Designer in the year 2020 | Developers Day Nov.19
UI/UX Designer in the year 2020 | Developers Day Nov.19Lena Lekkou
209 views34 slides
LavaCon: What is Information Architecture? by
LavaCon: What is Information Architecture?LavaCon: What is Information Architecture?
LavaCon: What is Information Architecture?uxhow
1.6K views25 slides
Wearing UX—When Our Clothes Become the Interface by
Wearing UX—When Our Clothes Become the InterfaceWearing UX—When Our Clothes Become the Interface
Wearing UX—When Our Clothes Become the InterfaceTechWell
257 views12 slides
Effective web UI by
Effective web UIEffective web UI
Effective web UITechsailor
504 views8 slides
24 Hours of UX, 2023: Preventing the Future by
24 Hours of UX, 2023: Preventing the Future24 Hours of UX, 2023: Preventing the Future
24 Hours of UX, 2023: Preventing the FutureJoshua Randall
79 views62 slides

Similar to Mobile1st ux/ui with Titanium(20)

LavaCon: Hunting Unicorns - What Makes an Effective UX Professional by Patrick Neeman
LavaCon: Hunting Unicorns - What Makes an Effective UX ProfessionalLavaCon: Hunting Unicorns - What Makes an Effective UX Professional
LavaCon: Hunting Unicorns - What Makes an Effective UX Professional
Patrick Neeman8K views
UI/UX Designer in the year 2020 | Developers Day Nov.19 by Lena Lekkou
UI/UX Designer in the year 2020 | Developers Day Nov.19UI/UX Designer in the year 2020 | Developers Day Nov.19
UI/UX Designer in the year 2020 | Developers Day Nov.19
Lena Lekkou209 views
LavaCon: What is Information Architecture? by uxhow
LavaCon: What is Information Architecture?LavaCon: What is Information Architecture?
LavaCon: What is Information Architecture?
uxhow1.6K views
Wearing UX—When Our Clothes Become the Interface by TechWell
Wearing UX—When Our Clothes Become the InterfaceWearing UX—When Our Clothes Become the Interface
Wearing UX—When Our Clothes Become the Interface
TechWell257 views
Effective web UI by Techsailor
Effective web UIEffective web UI
Effective web UI
Techsailor504 views
24 Hours of UX, 2023: Preventing the Future by Joshua Randall
24 Hours of UX, 2023: Preventing the Future24 Hours of UX, 2023: Preventing the Future
24 Hours of UX, 2023: Preventing the Future
Joshua Randall79 views
Catching up on UX by Ryo Sampei
Catching up on UXCatching up on UX
Catching up on UX
Ryo Sampei491 views
Undestanding UX: TBTF technology executive council meeting by Krissy Scoufis
Undestanding UX: TBTF technology executive council meetingUndestanding UX: TBTF technology executive council meeting
Undestanding UX: TBTF technology executive council meeting
Krissy Scoufis325 views
The Mobile Question @ Big Design 2010 by Jeremy Johnson
The Mobile Question @ Big Design 2010The Mobile Question @ Big Design 2010
The Mobile Question @ Big Design 2010
Jeremy Johnson1.8K views
UXcellence: The Importance Of Human-Centered Design by Mike Townson
UXcellence: The Importance Of Human-Centered DesignUXcellence: The Importance Of Human-Centered Design
UXcellence: The Importance Of Human-Centered Design
Mike Townson1.6K views
Lavacon: UX for Content Strategists and Technical Writers by Patrick Neeman
Lavacon: UX for Content Strategists and Technical WritersLavacon: UX for Content Strategists and Technical Writers
Lavacon: UX for Content Strategists and Technical Writers
Patrick Neeman1.9K views
ROI-of-UX-usertesting-dot-com by Jill DaSilva
ROI-of-UX-usertesting-dot-comROI-of-UX-usertesting-dot-com
ROI-of-UX-usertesting-dot-com
Jill DaSilva1.1K views
Twitter and Web Accessibility (EASI Webinar) by Dennis Lembree
Twitter and Web Accessibility (EASI Webinar)Twitter and Web Accessibility (EASI Webinar)
Twitter and Web Accessibility (EASI Webinar)
Dennis Lembree1.3K views
Fabrice Lacroix - Connecting a Chatbot to Your Technical Content: Myth and Re... by LavaConConference
Fabrice Lacroix - Connecting a Chatbot to Your Technical Content: Myth and Re...Fabrice Lacroix - Connecting a Chatbot to Your Technical Content: Myth and Re...
Fabrice Lacroix - Connecting a Chatbot to Your Technical Content: Myth and Re...
LavaConConference203 views
Mobile from Strategy to Implementation for the 2013 ASAE Technology Conferenc... by Amy Hissrich
Mobile from Strategy to Implementation for the 2013 ASAE Technology Conferenc...Mobile from Strategy to Implementation for the 2013 ASAE Technology Conferenc...
Mobile from Strategy to Implementation for the 2013 ASAE Technology Conferenc...
Amy Hissrich965 views
Inti Mateo CV 2014 by Inti Mateo
Inti Mateo CV 2014Inti Mateo CV 2014
Inti Mateo CV 2014
Inti Mateo727 views
Ju chun ko-about-all-with-linked in-mit by Ju Chun Ko
Ju chun ko-about-all-with-linked in-mitJu chun ko-about-all-with-linked in-mit
Ju chun ko-about-all-with-linked in-mit
Ju Chun Ko1K views

More from Alessio Ricco

Fifty shades of Alloy - tips and tools for a great Titanium Mobile development by
Fifty shades of Alloy - tips and tools for a great Titanium Mobile developmentFifty shades of Alloy - tips and tools for a great Titanium Mobile development
Fifty shades of Alloy - tips and tools for a great Titanium Mobile developmentAlessio Ricco
4.9K views65 slides
Il lato oscuro della forza - L'eterna lotta tra progettisti e team di sviluppo by
Il lato oscuro della forza - L'eterna lotta tra progettisti e team di sviluppoIl lato oscuro della forza - L'eterna lotta tra progettisti e team di sviluppo
Il lato oscuro della forza - L'eterna lotta tra progettisti e team di sviluppoAlessio Ricco
1.2K views52 slides
Ti.conf titanium on firefoxos by
Ti.conf titanium on firefoxosTi.conf titanium on firefoxos
Ti.conf titanium on firefoxosAlessio Ricco
3.9K views40 slides
Titanium Mobile and Beintoo by
Titanium Mobile and BeintooTitanium Mobile and Beintoo
Titanium Mobile and BeintooAlessio Ricco
1.4K views24 slides
Titanium appcelerator sdk by
Titanium appcelerator sdkTitanium appcelerator sdk
Titanium appcelerator sdkAlessio Ricco
1.9K views33 slides
Titanium appcelerator best practices by
Titanium appcelerator best practicesTitanium appcelerator best practices
Titanium appcelerator best practicesAlessio Ricco
14.9K views28 slides

More from Alessio Ricco(15)

Fifty shades of Alloy - tips and tools for a great Titanium Mobile development by Alessio Ricco
Fifty shades of Alloy - tips and tools for a great Titanium Mobile developmentFifty shades of Alloy - tips and tools for a great Titanium Mobile development
Fifty shades of Alloy - tips and tools for a great Titanium Mobile development
Alessio Ricco4.9K views
Il lato oscuro della forza - L'eterna lotta tra progettisti e team di sviluppo by Alessio Ricco
Il lato oscuro della forza - L'eterna lotta tra progettisti e team di sviluppoIl lato oscuro della forza - L'eterna lotta tra progettisti e team di sviluppo
Il lato oscuro della forza - L'eterna lotta tra progettisti e team di sviluppo
Alessio Ricco1.2K views
Ti.conf titanium on firefoxos by Alessio Ricco
Ti.conf titanium on firefoxosTi.conf titanium on firefoxos
Ti.conf titanium on firefoxos
Alessio Ricco3.9K views
Titanium Mobile and Beintoo by Alessio Ricco
Titanium Mobile and BeintooTitanium Mobile and Beintoo
Titanium Mobile and Beintoo
Alessio Ricco1.4K views
Titanium appcelerator sdk by Alessio Ricco
Titanium appcelerator sdkTitanium appcelerator sdk
Titanium appcelerator sdk
Alessio Ricco1.9K views
Titanium appcelerator best practices by Alessio Ricco
Titanium appcelerator best practicesTitanium appcelerator best practices
Titanium appcelerator best practices
Alessio Ricco14.9K views
Titanium appcelerator my first app by Alessio Ricco
Titanium appcelerator my first appTitanium appcelerator my first app
Titanium appcelerator my first app
Alessio Ricco6.3K views
Titanium appcelerator kickstart by Alessio Ricco
Titanium appcelerator kickstartTitanium appcelerator kickstart
Titanium appcelerator kickstart
Alessio Ricco2.2K views
Best Practices in apps development with Titanium Appcelerator by Alessio Ricco
Best Practices in apps development with Titanium Appcelerator Best Practices in apps development with Titanium Appcelerator
Best Practices in apps development with Titanium Appcelerator
Alessio Ricco36.9K views
Un'ora sola ti vorrei by Alessio Ricco
Un'ora sola ti vorreiUn'ora sola ti vorrei
Un'ora sola ti vorrei
Alessio Ricco1.1K views
tempi e scaletta presentazione by Alessio Ricco
tempi e scaletta presentazionetempi e scaletta presentazione
tempi e scaletta presentazione
Alessio Ricco3K views
Interim presentation GSJ11 by Alessio Ricco
Interim presentation GSJ11Interim presentation GSJ11
Interim presentation GSJ11
Alessio Ricco355 views
documentazione e presentazione GSJ11 1/4 by Alessio Ricco
documentazione e presentazione GSJ11 1/4documentazione e presentazione GSJ11 1/4
documentazione e presentazione GSJ11 1/4
Alessio Ricco392 views
Writing videogames with titanium appcelerator by Alessio Ricco
Writing videogames with titanium appceleratorWriting videogames with titanium appcelerator
Writing videogames with titanium appcelerator
Alessio Ricco4.9K views

Mobile1st ux/ui with Titanium