The cornerstone of UX, user interface design presents unique, user-centric challenges, exposing exciting opportunities to produce cohesive and engaging interactive experiences. Covering mobile-specific UI principles, practical implementation and rule breaking, Fred Spencer will share with you how the Titanium platform can make it easy to meaningfully improve user experience and exceed user expectations.
Located in the greater Boston area, Fred Spencer is an Appcelerator senior application architect and digital media instructor at the Rhode Island School of Design, Continuing Education.
2. § Started designing and building UI
for bulletin board systems in ‘92
§ Digital Media Instructor, RISD
About me Continuing Education
§ Titanium Mobile Core
Contributor
Twitter @anovice
§ Lead architect, motion designer,
and co-developer, Late Night
with Jimmy Fallon
§ Lead architect, motion designer,
and developer, NBC iPad
11. Ultimately, UX is about building products
that people want and love to use.
UI design is how we support that
awesome experience, by providing a
bridge between user interaction and
completing tasks.
12. UX is driven by how we solve problems.
UI is our implementation.
14. § As quickly as possible…
§ Communicate and reinforce
Zero to A-Ha? context with very little…
§ Can that feature be reduced
or removed, entirely?
§ Reduce functional
complexity…
22. § Identify apps that you,
colleagues, friends, family
and complete strangers
Getting started love and hate…
§ What makes them special?
§ Color scheme,
Navigation, Feature
Implementation, etc…
Research Plan Initiate
23. Audiences will rant and rave
no matter what.
These are opportunities to
iterate, but…
24. § Use grids to assist in creating
compositional harmony…
§ Build your interaction zones
What you
to be as large as possible…
should do
§ Always view comps on device
and show it to others…
§ Use branding to inspire,
influence, and reinforce…
§ Don’t forget about contrast
§ Take breaks…
32. § Keep animation style consistent
to specific components...
§ Animate color when immediate
What you attention is needed...
should do § Keep parallel animation to a
minimum...
§ Move UI into view from off
‘stage’, fade-in or zoom...
§ Keep it short. 250 – 500
milliseconds...
§ Or…
33. …don’t follow guidelines,
experiment and get feedback.
Motion design is also about voice,
individuality and expression.
35. § Reinforces memory through
interaction..
§ Is it essential to the experience?
Using sound § Sound may be muted or
difficult to hear…
§ Provide setting to disable
sounds…
§ Use the right audio session…
§ Preload to avoid an awkward
delay…
36. • Heavily influenced by
product requirements…
Common PS • Most Common
Patterns
• Module/Revealing
Module, Factory
• Upcoming
• CommonJS ‘require’
modules