Fred Spencer: Designing a Great UI
-
Upload
appcelerator-inc -
Category
Technology
-
view
1.299 -
download
0
description
Transcript of Fred Spencer: Designing a Great UI
Designing a Great UI
Fred Spencer
About me
§ Started designing and building UI
for bulletin board systems in ‘92
§ Digital Media Instructor, RISD
Continuing Education
§ Titanium Mobile Core
Contributor
§ Lead architect, motion designer,
and co-developer, Late Night
with Jimmy Fallon
§ Lead architect, motion designer,
and developer, NBC iPad
Twitter @anovice
Kubrick & Miyazaki
Clockwork Orange © Warner Bros.
Design is in the details
Details are both what you introduce
and what you take away.
Don’t swim in the
Sea of Details.
Don’t 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?
Zero to A-Ha?
§ As quickly as possible…
§ Communicate and reinforce
context with very little…
§ Can that feature be reduced
or removed, entirely?
§ Reduce functional
complexity…
The Elevator Button Problem
Modern hardware and the iOS
platform have enabled developers,
raising user awareness and
expectations.
BE Inspired
Dribbble, Cargo Collective,
and the restroom.
PRINCIPLES aND PROCESS
Getting started
§ Identify apps that you,
colleagues, friends, family
and complete strangers
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…
What you should do
§ Use grids to assist in creating
compositional harmony…
§ Build your interaction zones
to be as large as possible…
§ Always view comps on device
and show it to others…
§ Use branding to inspire,
influence, and reinforce…
§ Don’t forget about contrast
§ Take breaks…
Whiteboard. Flowchart.
Wireframe. Prototype. Do it.
Connect
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)
What you should do
§ Keep animation style consistent
to specific components...
§ Animate color when immediate
attention is needed...
§ Keep parallel animation to a
minimum...
§ Move UI into view from off
‘stage’, fade-in or zoom...
§ Keep it short. 250 – 500
milliseconds...
§ Or…
…don’t follow guidelines,
experiment and get feedback.
Motion design is also about voice,
individuality and expression.
Sound?
Using sound
§ Reinforces memory through
interaction..
§ Is it essential to the experience?
§ Sound may be muted or
difficult to hear…
§ Provide setting to disable
sounds…
§ Use the right audio session…
§ Preload to avoid an awkward
delay…
Common PS Patterns
• Heavily influenced by
product requirements…
• Most Common
• Module/Revealing
Module, Factory
• Upcoming
• CommonJS ‘require’
modules
RESOURCES
Absorb
§ boxesandarrows.com
§ alistapart.com/topics/
userscience
§ sixrevisions.com
§ thinkvitamin.com
§ www.uxmag.com
Inspire
§ dribbble.com
§ colourlovers.com
§ lovedsgn.com
§ behance.net
Learn
§ Code (ignore DOM)
§ codecademy.com
§ learn.appendto.com
§ Design
§ lynda.com
§ psd.tutsplus.com
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/
Use
§ glyphish.com
§ findicons.com
§ www.zambetti.com/projects/
liveview
§ appcooker.com
§ balsamiq.com