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
![Page 1: Fred Spencer: Designing a Great UI](https://reader033.fdocuments.us/reader033/viewer/2022060200/55988cde1a28abaf128b4666/html5/thumbnails/1.jpg)
Designing a Great UI
Fred Spencer
![Page 2: Fred Spencer: Designing a Great UI](https://reader033.fdocuments.us/reader033/viewer/2022060200/55988cde1a28abaf128b4666/html5/thumbnails/2.jpg)
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
![Page 3: Fred Spencer: Designing a Great UI](https://reader033.fdocuments.us/reader033/viewer/2022060200/55988cde1a28abaf128b4666/html5/thumbnails/3.jpg)
Kubrick & Miyazaki
Clockwork Orange © Warner Bros.
![Page 4: Fred Spencer: Designing a Great UI](https://reader033.fdocuments.us/reader033/viewer/2022060200/55988cde1a28abaf128b4666/html5/thumbnails/4.jpg)
Design is in the details
![Page 5: Fred Spencer: Designing a Great UI](https://reader033.fdocuments.us/reader033/viewer/2022060200/55988cde1a28abaf128b4666/html5/thumbnails/5.jpg)
Details are both what you introduce
and what you take away.
![Page 6: Fred Spencer: Designing a Great UI](https://reader033.fdocuments.us/reader033/viewer/2022060200/55988cde1a28abaf128b4666/html5/thumbnails/6.jpg)
![Page 7: Fred Spencer: Designing a Great UI](https://reader033.fdocuments.us/reader033/viewer/2022060200/55988cde1a28abaf128b4666/html5/thumbnails/7.jpg)
Don’t swim in the
Sea of Details.
Don’t wade in the
River of Overdesign.
![Page 8: Fred Spencer: Designing a Great UI](https://reader033.fdocuments.us/reader033/viewer/2022060200/55988cde1a28abaf128b4666/html5/thumbnails/8.jpg)
Photo by ThinkGeek
![Page 9: Fred Spencer: Designing a Great UI](https://reader033.fdocuments.us/reader033/viewer/2022060200/55988cde1a28abaf128b4666/html5/thumbnails/9.jpg)
WHaT IS UI?
![Page 10: Fred Spencer: Designing a Great UI](https://reader033.fdocuments.us/reader033/viewer/2022060200/55988cde1a28abaf128b4666/html5/thumbnails/10.jpg)
UX !== UI
![Page 11: Fred Spencer: Designing a Great UI](https://reader033.fdocuments.us/reader033/viewer/2022060200/55988cde1a28abaf128b4666/html5/thumbnails/11.jpg)
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.
![Page 12: Fred Spencer: Designing a Great UI](https://reader033.fdocuments.us/reader033/viewer/2022060200/55988cde1a28abaf128b4666/html5/thumbnails/12.jpg)
UX is driven by how we solve problems.
UI is our implementation.
![Page 13: Fred Spencer: Designing a Great UI](https://reader033.fdocuments.us/reader033/viewer/2022060200/55988cde1a28abaf128b4666/html5/thumbnails/13.jpg)
HOW QUICK IS zero to a-Ha?
![Page 14: Fred Spencer: Designing a Great UI](https://reader033.fdocuments.us/reader033/viewer/2022060200/55988cde1a28abaf128b4666/html5/thumbnails/14.jpg)
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…
![Page 15: Fred Spencer: Designing a Great UI](https://reader033.fdocuments.us/reader033/viewer/2022060200/55988cde1a28abaf128b4666/html5/thumbnails/15.jpg)
The Elevator Button Problem
![Page 16: Fred Spencer: Designing a Great UI](https://reader033.fdocuments.us/reader033/viewer/2022060200/55988cde1a28abaf128b4666/html5/thumbnails/16.jpg)
![Page 17: Fred Spencer: Designing a Great UI](https://reader033.fdocuments.us/reader033/viewer/2022060200/55988cde1a28abaf128b4666/html5/thumbnails/17.jpg)
Modern hardware and the iOS
platform have enabled developers,
raising user awareness and
expectations.
![Page 18: Fred Spencer: Designing a Great UI](https://reader033.fdocuments.us/reader033/viewer/2022060200/55988cde1a28abaf128b4666/html5/thumbnails/18.jpg)
BE Inspired
![Page 19: Fred Spencer: Designing a Great UI](https://reader033.fdocuments.us/reader033/viewer/2022060200/55988cde1a28abaf128b4666/html5/thumbnails/19.jpg)
![Page 20: Fred Spencer: Designing a Great UI](https://reader033.fdocuments.us/reader033/viewer/2022060200/55988cde1a28abaf128b4666/html5/thumbnails/20.jpg)
Dribbble, Cargo Collective,
and the restroom.
![Page 21: Fred Spencer: Designing a Great UI](https://reader033.fdocuments.us/reader033/viewer/2022060200/55988cde1a28abaf128b4666/html5/thumbnails/21.jpg)
PRINCIPLES aND PROCESS
![Page 22: Fred Spencer: Designing a Great UI](https://reader033.fdocuments.us/reader033/viewer/2022060200/55988cde1a28abaf128b4666/html5/thumbnails/22.jpg)
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
![Page 23: Fred Spencer: Designing a Great UI](https://reader033.fdocuments.us/reader033/viewer/2022060200/55988cde1a28abaf128b4666/html5/thumbnails/23.jpg)
Audiences will rant and rave
no matter what.
These are opportunities to
iterate, but…
![Page 24: Fred Spencer: Designing a Great UI](https://reader033.fdocuments.us/reader033/viewer/2022060200/55988cde1a28abaf128b4666/html5/thumbnails/24.jpg)
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…
![Page 25: Fred Spencer: Designing a Great UI](https://reader033.fdocuments.us/reader033/viewer/2022060200/55988cde1a28abaf128b4666/html5/thumbnails/25.jpg)
Whiteboard. Flowchart.
Wireframe. Prototype. Do it.
![Page 26: Fred Spencer: Designing a Great UI](https://reader033.fdocuments.us/reader033/viewer/2022060200/55988cde1a28abaf128b4666/html5/thumbnails/26.jpg)
Connect
![Page 27: Fred Spencer: Designing a Great UI](https://reader033.fdocuments.us/reader033/viewer/2022060200/55988cde1a28abaf128b4666/html5/thumbnails/27.jpg)
![Page 28: Fred Spencer: Designing a Great UI](https://reader033.fdocuments.us/reader033/viewer/2022060200/55988cde1a28abaf128b4666/html5/thumbnails/28.jpg)
Motion leads the eye.
![Page 29: Fred Spencer: Designing a Great UI](https://reader033.fdocuments.us/reader033/viewer/2022060200/55988cde1a28abaf128b4666/html5/thumbnails/29.jpg)
Providing movement between
contexts and requests gives the
user an opportunity to process
their interaction.
We call it “intuitive learning”…
![Page 30: Fred Spencer: Designing a Great UI](https://reader033.fdocuments.us/reader033/viewer/2022060200/55988cde1a28abaf128b4666/html5/thumbnails/30.jpg)
Late Night with Jimmy Fallon (iPhone / Android)
![Page 31: Fred Spencer: Designing a Great UI](https://reader033.fdocuments.us/reader033/viewer/2022060200/55988cde1a28abaf128b4666/html5/thumbnails/31.jpg)
Late Night with Jimmy Fallon (iPhone / Android)
![Page 32: Fred Spencer: Designing a Great UI](https://reader033.fdocuments.us/reader033/viewer/2022060200/55988cde1a28abaf128b4666/html5/thumbnails/32.jpg)
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…
![Page 33: Fred Spencer: Designing a Great UI](https://reader033.fdocuments.us/reader033/viewer/2022060200/55988cde1a28abaf128b4666/html5/thumbnails/33.jpg)
…don’t follow guidelines,
experiment and get feedback.
Motion design is also about voice,
individuality and expression.
![Page 34: Fred Spencer: Designing a Great UI](https://reader033.fdocuments.us/reader033/viewer/2022060200/55988cde1a28abaf128b4666/html5/thumbnails/34.jpg)
Sound?
![Page 35: Fred Spencer: Designing a Great UI](https://reader033.fdocuments.us/reader033/viewer/2022060200/55988cde1a28abaf128b4666/html5/thumbnails/35.jpg)
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…
![Page 36: Fred Spencer: Designing a Great UI](https://reader033.fdocuments.us/reader033/viewer/2022060200/55988cde1a28abaf128b4666/html5/thumbnails/36.jpg)
Common PS Patterns
• Heavily influenced by
product requirements…
• Most Common
• Module/Revealing
Module, Factory
• Upcoming
• CommonJS ‘require’
modules
![Page 37: Fred Spencer: Designing a Great UI](https://reader033.fdocuments.us/reader033/viewer/2022060200/55988cde1a28abaf128b4666/html5/thumbnails/37.jpg)
![Page 38: Fred Spencer: Designing a Great UI](https://reader033.fdocuments.us/reader033/viewer/2022060200/55988cde1a28abaf128b4666/html5/thumbnails/38.jpg)
RESOURCES
![Page 39: Fred Spencer: Designing a Great UI](https://reader033.fdocuments.us/reader033/viewer/2022060200/55988cde1a28abaf128b4666/html5/thumbnails/39.jpg)
Absorb
§ boxesandarrows.com
§ alistapart.com/topics/
userscience
§ sixrevisions.com
§ thinkvitamin.com
§ www.uxmag.com
![Page 40: Fred Spencer: Designing a Great UI](https://reader033.fdocuments.us/reader033/viewer/2022060200/55988cde1a28abaf128b4666/html5/thumbnails/40.jpg)
Inspire
§ dribbble.com
§ colourlovers.com
§ lovedsgn.com
§ behance.net
![Page 41: Fred Spencer: Designing a Great UI](https://reader033.fdocuments.us/reader033/viewer/2022060200/55988cde1a28abaf128b4666/html5/thumbnails/41.jpg)
Learn
§ Code (ignore DOM)
§ codecademy.com
§ learn.appendto.com
§ Design
§ lynda.com
§ psd.tutsplus.com
![Page 42: Fred Spencer: Designing a Great UI](https://reader033.fdocuments.us/reader033/viewer/2022060200/55988cde1a28abaf128b4666/html5/thumbnails/42.jpg)
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/
![Page 43: Fred Spencer: Designing a Great UI](https://reader033.fdocuments.us/reader033/viewer/2022060200/55988cde1a28abaf128b4666/html5/thumbnails/43.jpg)
Use
§ glyphish.com
§ findicons.com
§ www.zambetti.com/projects/
liveview
§ appcooker.com
§ balsamiq.com