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