際際滷

際際滷Share a Scribd company logo

Designing a Great UI

F
Fred Spencer

This document provides tips and guidance for designing great user interfaces (UI). It discusses starting with research to understand what users love and hate in existing apps. Key principles include using grids for compositional harmony, building large interaction zones, viewing comps on devices, and taking breaks. Animation and sound can reinforce memory and interaction if used properly. Resources listed can help with absorbing design principles, finding inspiration, learning skills, and using tools to prototype UIs.

1 of 43
Designing a Great UI Fred Spencer
則р 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
Clockwork Orange 息 Warner Bros. Kubrick & Miyazaki
Design is in the details
Details are both what you introduce and what you take away.
Designing a Great UI
Dont swim in the Sea of Details. Dont wade in the River of Overdesign.
Photo by ThinkGeek
WHaT IS UI?
UX !== UI
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.
UX is driven by how we solve problems. UI is our implementation.
HOW QUICK IS zero to a-Ha?
則р 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
The Elevator Button Problem
Designing a Great UI
Modern hardware and the iOS platform have enabled developers, raising user awareness and expectations.
BE Inspired
Designing a Great UI
Dribbble, Cargo Collective, and the restroom.
PRINCIPLES aND PROCESS
則р 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
Audiences will rant and rave no matter what. These are opportunities to iterate, but
則р 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, in鍖uence, and reinforce 則р Dont forget about contrast 則р Take breaks
Whiteboard. Flowchart. Wireframe. Prototype. Do it.
Connect
Designing a Great UI
Motion leads the eye.
Providing movement between contexts and requests gives the user an opportunity to process their interaction. We call it intuitive learning
Late Night with Jimmy Fallon (iPhone / Android)
Late Night with Jimmy Fallon (iPhone / Android)
則р Keep animation style consistent to speci鍖c components... 則р Animate color when immediate What you attention is needed... should do 則р Keep parallel animation to a minimum... 則р Move UI into view from o鍖 stage, fade-in or zoom... 則р Keep it short. 250 500 milliseconds... 則р Or
dont follow guidelines, experiment and get feedback. Motion design is also about voice, individuality and expression.
Sound?
則р 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
≒ Heavily in鍖uenced by product requirements Common PS ≒ Most Common Patterns ≒ Module/Revealing Module, Factory ≒ Upcoming ≒ CommonJS require modules
Designing a Great UI
RESOURCES
則р boxesandarrows.com 則р alistapart.com/topics/ userscience Absorb 則р sixrevisions.com 則р thinkvitamin.com 則р www.uxmag.com
則р dribbble.com 則р colourlovers.com 則р lovedsgn.com Inspire 則р behance.net
則р Code (ignore DOM) 則р codecademy.com 則р learn.appendto.com Learn 則р Design 則р lynda.com 則р psd.tutsplus.com
則р Teehan+Lax 則р bit.ly/iphone-ui-elements 則р bit.ly/android-ui-elements 則р bit.ly/iphone-sketch-elements Use 則р http://twitter.github.com/ bootstrap/ 則р https://github.com/280north/ aristo/
則р glyphish.com 則р findicons.com 則р www.zambetti.com/projects/ Use liveview 則р appcooker.com 則р balsamiq.com

More Related Content

Designing a Great UI

  • 1. Designing a Great UI Fred Spencer
  • 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
  • 3. Clockwork Orange 息 Warner Bros. Kubrick & Miyazaki
  • 4. Design is in the details
  • 5. Details are both what you introduce and what you take away.
  • 7. Dont swim in the Sea of Details. Dont wade in the River of Overdesign.
  • 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.
  • 13. HOW QUICK IS zero to a-Ha?
  • 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
  • 17. Modern hardware and the iOS platform have enabled developers, raising user awareness and expectations.
  • 20. Dribbble, Cargo Collective, and the restroom.
  • 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, in鍖uence, and reinforce 則р Dont forget about contrast 則р Take breaks
  • 29. Providing movement between contexts and requests gives the user an opportunity to process their interaction. We call it intuitive learning
  • 30. Late Night with Jimmy Fallon (iPhone / Android)
  • 31. Late Night with Jimmy Fallon (iPhone / Android)
  • 32. 則р Keep animation style consistent to speci鍖c components... 則р Animate color when immediate What you attention is needed... should do 則р Keep parallel animation to a minimum... 則р Move UI into view from o鍖 stage, fade-in or zoom... 則р Keep it short. 250 500 milliseconds... 則р Or
  • 33. dont 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 in鍖uenced by product requirements Common PS ≒ Most Common Patterns ≒ Module/Revealing Module, Factory ≒ Upcoming ≒ CommonJS require modules
  • 39. 則р boxesandarrows.com 則р alistapart.com/topics/ userscience Absorb 則р sixrevisions.com 則р thinkvitamin.com 則р www.uxmag.com
  • 40. 則р dribbble.com 則р colourlovers.com 則р lovedsgn.com Inspire 則р behance.net
  • 41. 則р Code (ignore DOM) 則р codecademy.com 則р learn.appendto.com Learn 則р Design 則р lynda.com 則р psd.tutsplus.com
  • 42. 則р Teehan+Lax 則р bit.ly/iphone-ui-elements 則р bit.ly/android-ui-elements 則р bit.ly/iphone-sketch-elements Use 則р http://twitter.github.com/ bootstrap/ 則р https://github.com/280north/ aristo/
  • 43. 則р glyphish.com 則р findicons.com 則р www.zambetti.com/projects/ Use liveview 則р appcooker.com 則р balsamiq.com