O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
3   9 7 1.F. {f. 

User Interaction Designer

7n. ..mv. .mu .  :‘- 1:1‘:  r= .I. .n. u-1:;  .'u:1 i: -‘. ?.%= .1'n_‘-. r=....
AFFORDANCE
Perceived Signal or Clue
that an object may be used
to perform a particular action
Affords Sitting
Affords Gripping
PUSH

IF THAT ooesrw woax

PULL

IF THAT DOESN'T WORK EITHER
IT'S BECAUSE WE'RE CLOSED

 

an
E‘—‘; JvANGIN

' CW5‘
—~ YANG ‘
EQ. ,»J cmglw f, |’-Y-JV€| D'J: $|'N

‘ T

l I 1%

.  v‘ f;  }

|  _ . L
Physical objects

SIZE
SHAPE
WEIGHT
Web, Mobi| e Interface

DESIGN
5597"! ’

 

Terms Privacy .  ' *' Posledbydomlnicpnrfl ‘H
ELEVEN ACTIONS

 

Input an Email address

Input a Password

Click the Question mark icon

Click the Log in button

Click ...
TYPES

Explicit
Pattern

Meta phorical
Hidden

False
Negative
EXPLICIT

Signaled by language
or
an object's physical appearance
Paying is easier  our new 

    
    
 

Mobile number (ex.  555-555-5555)

Text Yourself the App Link

By'o'on1'ni1g, you...
c; |icK +0 play +hc video
PATTERN

 

Established system for
Communicating

They rely on the wealth of time already spent
interacting with apps,  we...
Q envato S 1 ud jo cnsoomzs - cnsnz sznvncz NPOSYOLOVSKI -

A commt{r"1-i’§y. __qj_. _t, ;_a_L3g; gi§cc   '
and dgyglgpers...
Element

Navigation bar

Links

Logo

Link in top-right corner

“Categories” drop—down

Magnifying glass icon

Content mod...
P{W>FEH
Graphic De_sign
IS In love Wlth

I-Ielvetica

happy graphic design day! 

m aafreen bano
_T r
0/1115}  Send

Gr_aphic De_sign
IS in love with
I-Iclvctica

happy graphic design day! 

A_. 

aafreen bano



W
cocoa? 

Go to gym

Buy groceries

Mow lawn

Get haircut

Pick up dry cleaning

Buy anniversary present

Reply to moming e...
HIDDEN AFFORDANCES

‘

0-'4
0.

IQ; -u. 

Swipe to complete Pinch to change list Heatmap shows priority Pull to create item
Suitable only when the user has some buy-in

W
METAPHORICAL

Communicate using

Real world objects
METAPHORICAL

{J} J
C?  db cg: 

K
FALSE

Seems to afford a particular capability
BUT
actually affords a different capability
or NONE
V 156 likes

ca 13 buckets

‘

6
I

III

0 1.622 vnews

B Share

Tags

ipad
motorcycle
404

salt city builds
404 page

 

...
Sizes (px):  48
NEGATIVE

Doesn't afford
any capabilities at the moment
3;

_. ,/3 .4 

TO: 

Cancel
H(“l0

Much:  %

To: 

3 W
+Ramakrishna Gmail

Images

Goog| e+ notifications

Previously read Q

 

vfiamakrishna Gmail

Images : :: Cl

Googleo notifi...
Type

Explicit

Pattem

Hidden

Metaphorical

False

Negative

Pros

Unambiguous;  low risk
of user missing the
affordance...
%  SIGN UP FOR FREE LOG N
0

Create your online portfolio
without learning code.  For free. 

A free,  s'Tp'2-to-use sc'Jt...
HELP USERS UNDERSTAND

and subtly encourage them to take one action over another
Thank you
Affordance UX
Affordance UX
Próximos SlideShares
Carregando em…5
×

Affordance UX

2.868 visualizações

Publicada em

Affordance in User Experience is the most underrated word.But it offers a lot more when explored completely.

Publicada em: Design
  • DOWNLOAD FULL BOOKS, INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y3nhqquc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui

Affordance UX

  1. 1. 3 9 7 1.F. {f. User Interaction Designer 7n. ..mv. .mu . :‘- 1:1‘: r= .I. .n. u-1:; .'u:1 i: -‘. ?.%= .1'n_‘-. r=. IE-. : s’fL~I. ‘n. I.'n. r=. r"'—» " , . , L - . HY. ‘ Ya! ‘ BY; ., :'‘= . I a II: I}, :’L‘1_I, L J I 5 TH F 9
  2. 2. AFFORDANCE
  3. 3. Perceived Signal or Clue that an object may be used to perform a particular action
  4. 4. Affords Sitting
  5. 5. Affords Gripping
  6. 6. PUSH IF THAT ooesrw woax PULL IF THAT DOESN'T WORK EITHER IT'S BECAUSE WE'RE CLOSED an
  7. 7. E‘—‘; JvANGIN ' CW5‘
  8. 8. —~ YANG ‘ EQ. ,»J cmglw f, |’-Y-JV€| D'J: $|'N ‘ T l I 1% . v‘ f; } | _ . L
  9. 9. Physical objects SIZE SHAPE WEIGHT
  10. 10. Web, Mobi| e Interface DESIGN
  11. 11. 5597"! ’ Terms Privacy . ' *' Posledbydomlnicpnrfl ‘H
  12. 12. ELEVEN ACTIONS Input an Email address Input a Password Click the Question mark icon Click the Log in button Click the Sign up link Click the Terms link Click the Privacy link Click the Posted by dominiccperri link Click dominiccperri’s avatar image Click the Search Tumblr input field Hit enter to search for the input term
  13. 13. TYPES Explicit Pattern Meta phorical Hidden False Negative
  14. 14. EXPLICIT Signaled by language or an object's physical appearance
  15. 15. Paying is easier our new Mobile number (ex. 555-555-5555) Text Yourself the App Link By'o'on1'ni1g, youconfrmflIisisyoum: r|beIf‘ :37; :52, roceivoatoxt. Standard messafilg rates ‘ Iflhono Q: Andmld
  16. 16. c; |icK +0 play +hc video
  17. 17. PATTERN Established system for Communicating They rely on the wealth of time already spent interacting with apps, websites and other interfaces
  18. 18. Q envato S 1 ud jo cnsoomzs - cnsnz sznvncz NPOSYOLOVSKI - A commt{r"1-i’§y. __qj_. _t, ;_a_L3g; gi§cc ' and dgyglgpers avanIabI 1. Choose your provider 2. Supply your brief @ 3. Get work done v: 's: A 5 ”. '’? a V? ??” J . pr" I E‘-‘. ’- Qsz‘. -4:33 3 . ‘ '. H Vndeo H. Ammalnon Ecommuu 6. CMS Development Mobile 6. Apps Websites 3. Programmmg
  19. 19. Element Navigation bar Links Logo Link in top-right corner “Categories” drop—down Magnifying glass icon Content modules Affordance type Pattern Pattern Pattern Pattern Pattern Pattern metaphor Pattern Affords Navigating the website Clicking Returning to home page Managing account Accessing more options Searching Clicking modules
  20. 20. P{W>FEH
  21. 21. Graphic De_sign IS In love Wlth I-Ielvetica happy graphic design day! m aafreen bano _T r
  22. 22. 0/1115} Send Gr_aphic De_sign IS in love with I-Iclvctica happy graphic design day! A_. aafreen bano W
  23. 23. cocoa? Go to gym Buy groceries Mow lawn Get haircut Pick up dry cleaning Buy anniversary present Reply to moming emails Call mom Collect coffee beans
  24. 24. HIDDEN AFFORDANCES ‘ 0-'4 0. IQ; -u. Swipe to complete Pinch to change list Heatmap shows priority Pull to create item
  25. 25. Suitable only when the user has some buy-in W
  26. 26. METAPHORICAL Communicate using Real world objects
  27. 27. METAPHORICAL {J} J C? db cg: K
  28. 28. FALSE Seems to afford a particular capability BUT actually affords a different capability or NONE
  29. 29. V 156 likes ca 13 buckets ‘ 6 I III 0 1.622 vnews B Share Tags ipad motorcycle 404 salt city builds 404 page retina
  30. 30. Sizes (px): 48
  31. 31. NEGATIVE Doesn't afford any capabilities at the moment
  32. 32. 3; _. ,/3 .4 TO: Cancel
  33. 33. H(“l0 Much: % To: 3 W
  34. 34. +Ramakrishna Gmail Images Goog| e+ notifications Previously read Q vfiamakrishna Gmail Images : :: Cl Googleo notifications View posts In Googiev Previously read 0
  35. 35. Type Explicit Pattem Hidden Metaphorical False Negative Pros Unambiguous; low risk of user missing the affordance Communicates affordance quickly and cleanly Clean interface Easiest way to communicate complex affordances None Helps prevent frustration by signalling that an element has no affordance Cons Messier interface; might seem patronizing to some users Relies on previous experience with similar interfaces Capabilities might not be discovered Metaphors mean different things to different people Wastes the user's time by suggesting affordances that aren't there If an element has no affordance. it might not be necessary Use case Low-tech audience; to explain unintuitive affordances When patterns are firmly established; when audience is tech-sawy lnessential capabilities; when user has enough buy-in to experiment When affordances are too complex to explain without metaphors Avoid false affordance When supporting information and elements are necessary but do not have capabilities
  36. 36. % SIGN UP FOR FREE LOG N 0 Create your online portfolio without learning code. For free. A free, s'Tp'2-to-use sc'Jt': 't to a ow creative fc < to showcase the" wc'l<. Get Started Now >
  37. 37. HELP USERS UNDERSTAND and subtly encourage them to take one action over another
  38. 38. Thank you

×