It Shouldnt Work That Way

transcript

Or maybe It should… It’s all about affordances

It Shouldn't Work that Way

@ aetheros

hoang @ huynh.cc

Front-end Specialist Freelance Information Architect Master in UX Design

Hoang C. Huynh

hchuynh

About Me 2

Where We Are Talking About 3

It Shouldn't Work that Way 4

@ Mercedes-Benz

@ bhphotovideo

WE USE ONLY 10% OF OUR BRAINS

WHILE THE 90% OF YOUR BRAIN

IS ACTUALLY DRIVING FOR YOU

YOUR 10% OF AWARENESS IS

FREE TO DO OTHER THINGS

YOUR BRAIN, YOUR BEST ENEMY

How Things Work 9

Gestalt Laws

Everything on your plate must be eaten 10

REALLY SURE THAT THOSE FIELDSET ARE NOT JUST VISUAL NOISE?

Here’s the problem 11

Take a look 12

o  It looks like a search box

o  It behaves like a search box

o  Search Boxes are in the

upper right corner

o  Search Boxes do have a

“call to action” button

IT IS A SEARCH BOX WITH A “CALL TO ACTION” BUTTON!

o  It looks like a search box

o  It behaves like a search box

o  Search Boxes are in the

upper right corner

o  Search Boxes do have a

“call to action” button

IT IS A SEARCH BOX WITH A “CALL TO ACTION” BUTTON!

NOOOOO IT’s NOT!

o  Visibility of system status

o  Match between system and the real world

o  User control and freedom

o  Consistency and standards

o  Error prevention

o  Recognition rather than recall

o  Flexibility and efficiency of use

o  Aesthetic and minimalist design

o  Help users recognize, diagnose, and recover from errors

o  Help and documentation

o  Visibility of system status

o  Match between system and the real world

o  User control and freedom

o  Consistency and standards

o  Error prevention

o  Recognition rather than recall

o  Flexibility and efficiency of use

o  Aesthetic and minimalist design

o  Help users recognize, diagnose, and recover from errors

o  Help and documentation

RECOGNITION IS MUCH EASIER THAN RECALL

“… an action possibility available in the environment to an individual, independent of the individual's ability to perceive this possibility”

Gibson, J. J. (1977). “The theory of affordances”

AFFORDANCE

“ … refers to the perceived and actual properties of the thing, primarily those fundamental properties that determine just how the thing could possibly be used ”

Norman, D. A. (1988).

“The psychology of everyday things”

PERCEIVED AFFORDANCE

1.  Follow major conventions already established for images and actions.

2.  Wherever possible, use words in addition to icons and graphics

3.  Use recognizable metaphors

4.  Be consistent and coherent in the use of the conceptual model behind the design

AFFORDANCES AND CONSTRAINTS

@ Alberto Vasquez

Can you feel the dissonance? 24

SIT THROW

DO YOU THINK YOU WILL NEED INSTRUCTIONS?

AND NOW?

SLIGHT DIFFERENCES

HUGE EFFORT

Gaver, W. W. (1991)

WHAT KIND OF AFFORDANCE HAS A WALL ?

STRUCTURE ?

BOUNDARIES ?

CASA BATILLA - GAUDI

STILL A WALL ?

@ Random Dude on Flickr I Can’t Recall

@Destos

SUPER MARIO BROS

ARKANOID

MIRROR’S EDGE

SPLINTER CELL: CONVICTION

If Mess With Affordances 43

SOMETHING BAD WILL HAPPEN

IT’S LIKE EATING SUSHI IN A CHINESE RESTAURANT

SOMETHING DOESN’T FEEL QUITE RIGHT

TELEPHONES HANDSETS MAY NOT BE ERGONOMIC, BUT THEIR AFFORDANCE ARE CLEAR

NO MATTER WHAT, ALWAYS THINK ABOUT THE CONTEXT

IT MATTERS !

@ dollarside

FROM AFFORDANCES TO SIGNIFIERS

Tell Me About This 52

If you remember this… you are awesome

Now You See 54

There is no place like 127.0.0.1

Digital UI are not Different 55

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet mauris facilisis tellus viverra dictum. Maecenas commodo sapien a nulla blandit pellentesque. Pellentesque elementum purus eu eros hendrerit nec sagittis enim pretium. Proin commodo

fermentum ante, quis iaculis mauris pharetra nec. Suspendisse ac felis diam. Fusce quis felis enim, id ultricies nulla. Donec tincidunt posuere odio volutpat auctor. Aliquam erat volutpat. Maecenas porttitor, lectus eu dignissim consectetur, lorem risus

dictum urna, vitae tempus tortor lectus sit amet nunc. Praesent vitae laoreet ligula. Morbi laoreet, felis ac congue facilisis, turpis nulla luctus dolor, et gravida leo enim eget mi. Nulla facilisi. Duis blandit elit in metus eleifend gravida. Etiam dictum ante sed nisi

condimentum tempus. Morbi porttitor, dui eget gravida tempor, lorem sem scelerisque ante, in dictum justo ipsum ut sapien. Mauris lacinia varius sapien, a malesuada dui mollis ut. Ut viverra imperdiet erat, vel tempor erat laoreet eu. Aliquam leo felis, rhoncus in vestibulum in, venenatis commodo orci. Morbi aliquet quam ut mauris varius egestas. Sed quis ligula quam. Nullam

tincidunt lectus sed elit fermentum eget auctor risus blandit. Sed feugiat erat a enim sagittis id iaculis tortor vulputate. Praesent dui magna, dignissim et pulvinar at, congue eget nunc. In hac habitasse platea dictumst. Morbi a mi et enim mattis tincidunt et

nec lectus. Donec luctus ullamcorper commodo. Integer mattis, leo nec cursus sodales, purus ipsum euismod neque, ut porttitor felis neque sit amet nulla. Nullam mollis sem orci. Praesent elementum nisl vel nisl sodales ut accumsan nunc tincidunt.

Pellentesque ut tortor sollicitudin quam imperdiet laoreet.

Sed leo magna, tincidunt quis tristique at, ullamcorper in orci. Donec consequat, sapien at tincidunt porttitor, est quam laoreet nunc, scelerisque bibendum tellus eros et libero. Proin aliquet elit vitae velit congue sollicitudin. Aenean lectus massa, lacinia eget ultricies ac, blandit laoreet magna. Nullam malesuada diam non magna accumsan ac consectetur tellus sagittis. Fusce

interdum faucibus leo, eget placerat arcu lobortis eget. Integer pellentesque scelerisque mauris, non dapibus elit iaculis sit amet. Integer sollicitudin mi quam. Suspendisse eget erat leo. Pellentesque risus est, bibendum nec venenatis ac, dapibus in risus.

Donec mi magna, rutrum sit amet molestie id, tincidunt non lacus. Aliquam a enim id tortor fermentum fringilla. Cras quis mi justo. Phasellus placerat purus vitae urna ullamcorper convallis.

Aenean felis eros, accumsan vestibulum vehicula sit amet, eleifend vehicula neque. Nunc lobortis neque eu massa interdum consequat. Sed semper imperdiet libero a dictum. Mauris feugiat pellentesque purus, nec volutpat dolor tempus et.

Vivamus ultrices, dui non ullamcorper scelerisque, metus odio vulputate massa, eget egestas purus odio sit amet massa. Integer lacinia felis eget massa sodales condimentum. Praesent non tristique purus. In hac habitasse platea dictumst. Suspendisse ut felis libero, in eleifend magna. In suscipit dapibus convallis. Praesent egestas, lectus sit amet adipiscing aliquam, mauris sem porttitor magna, tincidunt facilisis eros elit id mauris. Donec elit mauris, vehicula in ultrices id, hendrerit in elit. Suspendisse

sagittis nibh et nibh fringilla sed lacinia elit placerat. Vivamus quis libero at mi aliquet consequat ut id urna. Sed vehicula libero ut augue commodo pellentesque.

I am a link, believe me

...TOO EASY ?

Catch Me a Link 62

Catch Me a Link 63

Red Font?

Catch Me a Link 64

Blue Bold Font?

Catch Me a Link 65

Button Style?

Also Spaces Have Affordances 66

#WHITESPACE

@ aetheros

hoang @ huynh.cc

hchuynh

It Shoudn’t Work that Way

Questions?

It Shouldnt Work That Way

Technology