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 other apps. The key aspects of UI design covered are reducing complexity, using grids and sizing interaction zones appropriately, incorporating branding, and ensuring adequate contrast. Animation and motion are addressed as ways to guide user attention and reinforce interactions. Sound, common patterns, and resources for continuing to learn and be inspired are also mentioned.

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. Don’t swim in the
Sea of Details.
Don’t wade in the
River of Overdesign.

8. Photo by ThinkGeek

9. WHaT IS UI?

10. UX !== UI

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…

15. The Elevator
Button Problem

17. Modern hardware and the iOS
platform have enabled developers,
raising user awareness and
expectations.

18. BE Inspired

20. Dribbble, Cargo Collective,
and the restroom.

21. PRINCIPLES
aND
PROCESS

22. § Identify apps that you,
colleagues, friends, family
and complete strangers love
Getting started 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 to
What you
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…

25. Whiteboard. Flowchart.
Wireframe. Prototype. Do it.

26. Connect

28. Motion leads the eye.

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 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.

34. Sound?

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

38. RESOURCES

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