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 is an Appcelerator senior application architect and digital media instructor at the Rhode Island School of Design, Continuing Education. Session highlights include: - Simple design techniques that add consistency, subtly and nuance - Balancing user expectations during asynchronous tasks - Connect with animation and sound - Risks and rewards of going fully custom - Resources that extend and inspire

1. Desiging a Great UI
Fred Spencer
Tuesday, September 6, 2011

2. Intro
• Fred Spencer
• Sr. Application Architect, Appcelerator
• Digital Media Instructor, Rhode Island
School of Design, Continuing Education
• Twitter: @anovice
Tuesday, September 6, 2011

3. Topics
1. Principles
2. Process
3. Practical
4. Resources
Tuesday, September 6, 2011

4. 1. Principles
• Connect
• Communicate
• Control
Tuesday, September 6, 2011

5. Principles : Connect
• You will never know your audience, but
you should know your audience well.
• Follow trends and communities.
• Identify subjective and objective.
Tuesday, September 6, 2011

6. Principles : Communicate
• Open dialog. Ask for opinions. Make
critisim productive.
• FILTER.
• Create simple processes for user
feedback.
• Highlight features that answer questions.
Tuesday, September 6, 2011

7. Principles : Control
• UI should lead.
• Obsess over simplicty and you will more
successfully define and argue your point
of view.
• Do not sacrifice usability for features.
• You won’t satisfy everyone.
Tuesday, September 6, 2011

8. 2. Process
• Research
• Plan
• Initiate
Tuesday, September 6, 2011

9. Process : Research
• Indentify apps that stand out to you.
• Ask friends and collegues about the apps
they love and use every day.
Tuesday, September 6, 2011

10. Process : Research
• Ask about apps that have left a lasting
impression. Often, these gems aren’t
very popular.
• Ask about apps they hate. Often, these
gems are popular, evoke passionate
opinions and offer incredible insight.
Tuesday, September 6, 2011

11. Process : Research
• What makes these specific applications
stand out?
• Color scheme?
• Navigation?
• Features?
Tuesday, September 6, 2011

12. Process : Research
• User Experience (UX) is a philosophy and
science.
• User Interface (UI) design supports your
UX goals.
Tuesday, September 6, 2011

13. Process : Research
• Audiences will use what is available to
them.
• Audiences will rant and rave NO MATTER
WHAT.
• These aren’t reasons to cop-out. These
are opportunities.
Tuesday, September 6, 2011

14. Process : Plan
• Define appplication features.
• Consider how you and others would
interact with these features.
• FLOWCHART & WIREFRAME.
Tuesday, September 6, 2011

15. Process : Initiate
• COMP & PROTOTYPE.
• What does your gut tell you?
• Table, merge or eliminate features that
don’t work.
Tuesday, September 6, 2011

16. 3. Practical
• Do...
• Know Your Tools
• Examples
Tuesday, September 6, 2011

17. Practical : Do...
• ...catagorize and abstract features and
components so that layouts and assets
are consistent, recognizable and
reusable.
• ...integrate motion that leads the eye.
• ...define minimum interaction zones.
Tuesday, September 6, 2011

18. Practical : Know Your Tools
• Pixel or Vector?
• Asset Organization
• Export
Tuesday, September 6, 2011

19. Practical : Examples
Tuesday, September 6, 2011

20. 4. Resources
• Absorb
• Learn
• Inspire
• Use
Tuesday, September 6, 2011

21. Resources : Absorb
• boxesandarrows.com
• alistapart.com/topics/userscience
• sixrevisions.com
• thinkvitamin.com
• www.uxmag.com
Tuesday, September 6, 2011

22. Resources : Learn
• Code (avoid DOM)
• codecademy.com
• learn.appendto.com
• Design
• lynda.com
• psd.tutsplus.com
Tuesday, September 6, 2011

23. Resources : Inspire
• dribbble.com
• colourlovers.com
• lovedsgn.com
• behance.net
Tuesday, September 6, 2011

24. Resources : Use
• Teehan+Lax
• bit.ly/iphone-ui-elements
• bit.ly/android-ui-elements
• bit.ly/iphone-sketch-elements
• http://twitter.github.com/bootstrap/
• https://github.com/280north/aristo/
Tuesday, September 6, 2011

25. Resources : Use
• www.zambetti.com/projects/liveview
• appcooker.com
• balsamiq.com
Tuesday, September 6, 2011