fred spencer: designing a great ui
DESCRIPTION
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 inspireTRANSCRIPT
Desiging a Great UIFred Spencer
Tuesday, September 6, 2011
Intro
• Fred Spencer
• Sr. Application Architect, Appcelerator
• Digital Media Instructor, Rhode Island School of Design, Continuing Education
• Twitter: @anovice
Tuesday, September 6, 2011
Topics
1. Principles
2. Process
3. Practical
4. Resources
Tuesday, September 6, 2011
1. Principles
• Connect
• Communicate
• Control
Tuesday, September 6, 2011
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
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
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
2. Process
• Research
• Plan
• Initiate
Tuesday, September 6, 2011
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
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
Process : Research
• What makes these specific applications stand out?
• Color scheme?
• Navigation?
• Features?
Tuesday, September 6, 2011
Process : Research
• User Experience (UX) is a philosophy and science.
• User Interface (UI) design supports your UX goals.
Tuesday, September 6, 2011
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
Process : Plan
• Define appplication features.
• Consider how you and others would interact with these features.
• FLOWCHART & WIREFRAME.
Tuesday, September 6, 2011
Process : Initiate
• COMP & PROTOTYPE.
• What does your gut tell you?
• Table, merge or eliminate features that don’t work.
Tuesday, September 6, 2011
3. Practical
• Do...
• Know Your Tools
• Examples
Tuesday, September 6, 2011
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
Practical : Know Your Tools
• Pixel or Vector?
• Asset Organization
• Export
Tuesday, September 6, 2011
Practical : Examples
Tuesday, September 6, 2011
4. Resources
• Absorb
• Learn
• Inspire
• Use
Tuesday, September 6, 2011
Resources : Absorb
• boxesandarrows.com
• alistapart.com/topics/userscience
• sixrevisions.com
• thinkvitamin.com
• www.uxmag.com
Tuesday, September 6, 2011
Resources : Learn• Code (avoid DOM)
• codecademy.com
• learn.appendto.com
• Design
• lynda.com
• psd.tutsplus.com
Tuesday, September 6, 2011
Resources : Inspire
• dribbble.com
• colourlovers.com
• lovedsgn.com
• behance.net
Tuesday, September 6, 2011
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
Resources : Use
• www.zambetti.com/projects/liveview
• appcooker.com
• balsamiq.com
Tuesday, September 6, 2011