mobile1st ux/ui with titanium
TRANSCRIPT
Mobile First UX/UIwith 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 designUser 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
DOINGFEELING
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 emailWatching 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 fileFill a form
@alessioricco
Mobile First
@alessioricco
@alessioricco
UX/UI and Titanium
@alessioricco
@alessioricco
A real world example
2 dev1 int. designer15 daysandroid / 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.tabshttp://www.nois3.it/en/work/world-medicine-park-app-cross-platform/
@alessioricco
listView
custom chat server (REST)
network aware
smoothscrolling
NO NATIVE MODULES!& CROSS PLATFORM
ACS Push notification
via chat serverhttp://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 TITANIUM3D MODELS AND ANIMATIONS
IMAGE RECOGNITION AND TRACKINGLOCATION-BASED SERVICES WITH GEO DATA
VIDEO AUGMENTATIONS
http://www.wikitude.com/products/extensions/titanium-module-augmented-reality/
@alessioricco
Sonia Villanueva 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 linksFifty 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/alessioriccohttp://www.slideshare.net/alessioricco@alessioricco