SlideShare a Scribd company logo

Fred Spencer: Designing a Great UI

•
•
Axway Appcelerator
Axway Appcelerator

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 of 25
Download to read offline
Desiging a Great UI Fred 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

More Related Content

Fred Spencer: Designing a Great UI

  • 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