UI Design Fundamentals

Uday GajendarPrincipal Product DesignerCitrix | Santa Clara

SVCC / 10.6.12

My#5th#time#speaking.A#lot’s#changed#since#2007.

RIA.%Flash.%Ajax.%iPhone.Android.%Flat%widescreen%displays.%Hi:res%Retina%displays.%CSS%+%HTML%5.%Responsive%design.%JS%frameworks.%Social.%Mobile.%Local.%Cloud.%Video.

But#some#things#are#the#same...

Is#it#really#2012?#sigh...

The$public$is$more$familiar$with$bad$design$than$good$design.$It$is,$in$effect,$conditioned$to$prefer$bad$design,$because$that$is$what$it$lives$with.$The$new$becomes$threatening,$the$old$reassuring.

Paul%Rand,%graphic%designer

“

”

ComplexityCraftsmanship&

extraneous redundancy

lack of careful diligence

Too many fontsToo many colorsToo many linesOverdone effects

Too many iconsNo hierarchyEverything emphasizedNo useful groupings

Every button, icon, text, tab, menu item is another visual & cognitive signal that a user must process & learn, thus increasing complexity and error! Even for a split second.

Dialogues (not dialogs)

Start with target audience

Consider diverse contexts

Apply OS guidelines

YMMV

PrinciplesPatterns

& potent, useful

clear, effective

PatternsA pattern describes an optimal solution to a common problem within a specific context.

!

Bill#Scott Jenifer#Tidwell Erin#Malone

Patterns#books#to#keep#nearby!

Take

note!

Principles

Principles are your lighthouse for guidance when lost.

A principles provides a governing basis for decision-making and foundation for evolution.

Citrix Product Design 5 Principles

Dieter Rams’ “Good Design Principles”

Windows Metro Principles

Make#it#directKeep#it#lightweightStay#on#the#page

Provide#an#invitationUse#transitions

React#immediately

from%Bill%Scott,%PayPal

But#what#about#that#damn#UI?

Do’s#&#Don’ts

Don’t clutter the screen with noise

Don’t use every font or color in the palette

Don’t fill every inch of the screen with “stuff”

Don’t be verbose and redundant

Don’t have slow irritating performance

Don’t leave users hanging with no exit

Don’t be painful and frustrating

Take

note!Do’s#&#Don’ts

Do leverage a good metaphor

Do use well-defined, clean grid layouts

Do use fonts sparingly

Do apply color judiciously

Do use clear, concise language

Do use icons purposefully

Do create clear behaviors with feedback

(No more than 3+)

(No more than 5+)

(Do you really need them?)

(Read vs scan)

Take

note!Do’s#&#Don’ts

Grids / Layouts / Structure

A#wellSdesigned#UI#must#be#grounded#in#strong#layouts#with#a#grid.#Grids#provide#order,#regularity,#rhythm,#and#control.#Knowing#how#to#work#with#grids#is#a#vital#interface#design#skill,#which#takes#years#to#master.#

AlignmentStructure Spacing••

Grids: where to start?

CSS#Grid#Frameworks#like#960.gs,#Blueprint,#The#Golden#GridFlexible,#responsive#grid#designs:#scalability,#xSdevice#use

TypographyType#is#about#tone#of#voice,#readability,#legibility.#Diligently#crafted#type#is#paramount#for#effective#communication.

KerningLeading Tracking••

Most#design#problems#are#simply#type#issues.#As#a#good#rule,#start#your#design#with#three%fonts,#where#a#font#is#any#variation#of#the#typeface,#size,#weight,#style,#color,#etc.

Most design problems are simply type issues. As a good rule, start your design with three fonts, where a font is any variation of the typeface, size, weight, style, color, etc.

Most design problems are simply type issues. As a good rule, start your design with three fonts, where a font is any

variation of the typeface, size, weight, style, color, etc.

Typography

Color#follows#the#same#constraints#as#type,#with#the#exception#that#color#gets#to#the#core#emotional#impact#of#the#product#in#a#more#direct,#visceral#way#that#type#does#not.#While#type#speaks,#color#punctuates.#

Color

Pick#a#color#palette#of#just#a#few#core#colors:#1#base,#3#complements,#1#highlight,#and#black#/#white

Color: where to start

Use#the#color#system#to#solve#functional#issues#_irst,#then#add#expressive,#emotive,#brand#qualities.

Icons#are#visual#indicators#of#status,#functionality,#or#branding.#They#should#complement#the#main#content,#and#not#contribute#to#UI#clutter#or#noise.#Just#like#type#and#color,#should#be#used#judiciously.

Icons / Imagery

Before8you8insert8an8icon,8always8ask8WHY.8

Many#design#problems#are#simply#issues#of#poor%terminology:#button#labels,#menu#items,#feature#names,#etc.#Generally#speaking,#product#language#should#be#no#more#complicated#than#everyday#conversation.#Ask#your#target#audience.#

Language

A#digital#product#is#used#to#do#something.#Interactive#behavior,#and#speci_ically,#the#ability#to#directly%manipulate%data#with#an#input#device#as#an#intuitive,#seamless#extension#of#the#user’s#hand/mind,#are#critical#in#that#regard.

Affordances,#motion,#feedback#are#key.

Behavior

Matrix of Interesting Momentsfrom#Bill#Scott,#PayPal

Prototype#behaviors#iteratively#&#obsessively.

Coherence

Total Balance

In#the#end,#a#carefully#balanced#consideration#of#these#will#result#in#a#rewarding,#effective#UI#people#enjoy.

Layout Type Color Icons

Metaphor Pa4erns Behavior Principles

ChoreographyCoherence Integrity••

Take

note!

“The key to good design is not Metro or any other language or principle. The key to good design is to be

able to execute good design judgment.”

Erik Stolterman, HCI Professor, Indiana University

References

Designing#Visual#Interfaces#by#Mullet/SanoDesigning#Web#Interfaces#by#Bill#ScottEnvisioning#Information#by#Edward#Tufte#Designing#Interfaces#by#Jenifer#Tidwell

Take

note!

Contact info

Uday%Gajendar

emailtwitter%

webbloglinkedin

udanium@gmail.com

www.udanium.comwww.ghostinthepixel.com

@udanium

www.linkedin.com/in/udanium