06   using the elements - skeleton
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

06 using the elements - skeleton

on

  • 489 views

 

Statistics

Views

Total Views
489
Views on SlideShare
489
Embed Views
0

Actions

Likes
1
Downloads
3
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • {"24":"*Memory Load: pervading myth where people say “no more than 7 items on a nav menu because people can’t remember more than that.” Article called the magic number 7, plus or minus 2. Ideas was to measure short-term memory by the number of things a person can recall – key word here is recall. Becasue in that experiment they showed people info, then took it away, and after a few minutes asked them to recall what they’d seen. When was the last time you saw a website or app that did this? Never. Designing for the web isn’t a recall task – it’s a recognition task. As long as we recognize that “this is the navigation, these are the links” and the labels are meaningful, a larger navigation set presents no real problems. You’re more likely to be constrained by the device’s form factor (monitor size, resolution) than by the number of navigation items.\n","2":"we’re giving users the ability to see the structure, a way to move through it and a way to act on what they see. \n","25":"*Memory Load: pervading myth where people say “no more than 7 items on a nav menu because people can’t remember more than that.” Article called the magic number 7, plus or minus 2. Ideas was to measure short-term memory by the number of things a person can recall – key word here is recall. Becasue in that experiment they showed people info, then took it away, and after a few minutes asked them to recall what they’d seen. When was the last time you saw a website or app that did this? Never. Designing for the web isn’t a recall task – it’s a recognition task. As long as we recognize that “this is the navigation, these are the links” and the labels are meaningful, a larger navigation set presents no real problems. You’re more likely to be constrained by the device’s form factor (monitor size, resolution) than by the number of navigation items.\n","26":"things should always work the same way.\nThings look the same so people can recognize it once they’ve learned it.\n"}

06 using the elements - skeleton Presentation Transcript

  • 1. UX D
  • 2. UX D using the elements: skeleton
  • 3. UX D S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY
  • 4. defining the skeleton S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D
  • 5. defining the skeleton S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY function is given form UX D
  • 6. defining the skeleton S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY function is given form the skeleton plane focuses on concrete issues of presentation: UX D
  • 7. defining the skeleton S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY function is given form the skeleton plane focuses on concrete issues of presentation: ➡ what form will the product take? UX D
  • 8. defining the skeleton S U R FA C E SKELETON function is given form the skeleton plane focuses on concrete issues of presentation: ➡ what form will the product take? ➡ how will users move around and do things? STRUCTURE SCOPE S T R AT E GY UX D
  • 9. defining the skeleton S U R FA C E SKELETON function is given form the skeleton plane focuses on concrete issues of presentation: ➡ what form will the product take? ➡ how will users move around and do things? STRUCTURE SCOPE S T R AT E GY ➡ how will content be presented and manipulated? UX D
  • 10. defining the skeleton S U R FA C E SKELETON function is given form the skeleton plane focuses on concrete issues of presentation: ➡ what form will the product take? ➡ how will users move around and do things? STRUCTURE SCOPE S T R AT E GY ➡ how will content be presented and manipulated? the skeleton plane is created through interface design, which provides users with the ability to do things. UX D
  • 11. defining the skeleton S U R FA C E SKELETON function is given form the skeleton plane focuses on concrete issues of presentation: ➡ what form will the product take? ➡ how will users move around and do things? STRUCTURE ➡ how will content be presented and manipulated? SCOPE the skeleton plane is created through interface design, which provides users with the ability to do things. S T R AT E GY it’s also comprised of navigation design, which provides users with the ability to go places. UX D
  • 12. defining the skeleton S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D
  • 13. defining the skeleton S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY enabling positive experiences UX D
  • 14. defining the skeleton S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY enabling positive experiences our work on the skeleton plane has to enable several key principles of positive user experience: UX D
  • 15. defining the skeleton S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY enabling positive experiences our work on the skeleton plane has to enable several key principles of positive user experience: ➡ rapidly establish the product’s value in the user’s mind UX D
  • 16. defining the skeleton S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY enabling positive experiences our work on the skeleton plane has to enable several key principles of positive user experience: ➡ rapidly establish the product’s value in the user’s mind ➡ lead user toward continuing the experience (and furthering the relationship) UX D
  • 17. defining the skeleton S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY enabling positive experiences our work on the skeleton plane has to enable several key principles of positive user experience: ➡ rapidly establish the product’s value in the user’s mind ➡ lead user toward continuing the experience (and furthering the relationship) ➡ Introduce specific content at the most relevant, most appropriate points in the experience (relationship) UX D
  • 18. defining the skeleton S U R FA C E SKELETON STRUCTURE SCOPE enabling positive experiences our work on the skeleton plane has to enable several key principles of positive user experience: ➡ rapidly establish the product’s value in the user’s mind ➡ lead user toward continuing the experience (and furthering the relationship) ➡ Introduce specific content at the most relevant, most appropriate points in the experience (relationship) ➡ every click should add immediate value S T R AT E GY UX D
  • 19. defining the skeleton S U R FA C E SKELETON STRUCTURE SCOPE enabling positive experiences our work on the skeleton plane has to enable several key principles of positive user experience: ➡ rapidly establish the product’s value in the user’s mind ➡ lead user toward continuing the experience (and furthering the relationship) ➡ Introduce specific content at the most relevant, most appropriate points in the experience (relationship) ➡ every click should add immediate value S T R AT E GY ➡ every interaction should add positively to the overall experience over time UX D
  • 20. defining the skeleton S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D
  • 21. defining the skeleton S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D
  • 22. S U R FA C E SKELETON many features defining the skeleton SCOPE S T R AT E GY few features STRUCTURE UX D
  • 23. defining the skeleton SKELETON many features S U R FA C E UX D SCOPE S T R AT E GY few features STRUCTURE poor usability good usability
  • 24. defining the skeleton SKELETON many features S U R FA C E UX D SCOPE S T R AT E GY few features STRUCTURE poor usability good usability
  • 25. defining the skeleton SKELETON features vs. usability many features S U R FA C E UX D SCOPE S T R AT E GY few features STRUCTURE poor usability good usability
  • 26. defining the skeleton SKELETON features vs. usability many features S U R FA C E UX D at any given point in time, the number of functions available onscreen has a direct effect on how useful the product is. SCOPE S T R AT E GY few features STRUCTURE poor usability good usability
  • 27. defining the skeleton SKELETON features vs. usability many features S U R FA C E at any given point in time, the number of functions available onscreen has a direct effect on how useful the product is. STRUCTURE S T R AT E GY the more functions, the less useful. few features SCOPE UX D poor usability good usability
  • 28. defining the skeleton S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D
  • 29. defining the skeleton S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY conventions UX D
  • 30. defining the skeleton S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY conventions habit and reflex account for much of our daily interactions. UX D
  • 31. defining the skeleton S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY conventions habit and reflex account for much of our daily interactions. our ability to do anything depends on the accumulation of reflexes, most of which are pretty small. UX D
  • 32. defining the skeleton S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY conventions habit and reflex account for much of our daily interactions. our ability to do anything depends on the accumulation of reflexes, most of which are pretty small. convention is what allows us to use those reflexes. UX D
  • 33. defining the skeleton S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY conventions habit and reflex account for much of our daily interactions. our ability to do anything depends on the accumulation of reflexes, most of which are pretty small. convention is what allows us to use those reflexes. conventions often match our expectations of what something is supposed to do or be like. UX D
  • 34. defining the skeleton S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY conventions habit and reflex account for much of our daily interactions. our ability to do anything depends on the accumulation of reflexes, most of which are pretty small. convention is what allows us to use those reflexes. conventions often match our expectations of what something is supposed to do or be like. UX D
  • 35. defining the skeleton S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY conventions UX D
  • 36. defining the skeleton S U R FA C E UX D conventions the only time you should deviate from well-established conventions is when there’s a clear, obvious benefit to doing so. SKELETON STRUCTURE SCOPE S T R AT E GY
  • 37. defining the skeleton S U R FA C E UX D conventions the only time you should deviate from well-established conventions is when there’s a clear, obvious benefit to doing so. SKELETON STRUCTURE SCOPE S T R AT E GY
  • 38. defining the skeleton S U R FA C E UX D conventions the only time you should deviate from well-established conventions is when there’s a clear, obvious benefit to doing so. SKELETON STRUCTURE SCOPE S T R AT E GY
  • 39. UX D S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY
  • 40. interface design S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY interface design UX D
  • 41. interface design S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY the balancing act UX D
  • 42. interface design S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY the balancing act success in user interface (UI) design is determined by the degree of balance between visual form & technical function. UX D
  • 43. interface design S U R FA C E SKELETON the balancing act success in user interface (UI) design is determined by the degree of balance between visual form & technical function. and that means: STRUCTURE SCOPE S T R AT E GY UX D
  • 44. interface design S U R FA C E SKELETON UX D the balancing act success in user interface (UI) design is determined by the degree of balance between visual form & technical function. and that means: STRUCTURE ➡ you have to give people the things they want or need. SCOPE S T R AT E GY
  • 45. interface design S U R FA C E SKELETON UX D the balancing act success in user interface (UI) design is determined by the degree of balance between visual form & technical function. and that means: STRUCTURE ➡ you have to give people the things they want or need. SCOPE S T R AT E GY ➡ you have to give it to them when and where they want it.
  • 46. interface design S U R FA C E SKELETON UX D the balancing act success in user interface (UI) design is determined by the degree of balance between visual form & technical function. and that means: STRUCTURE ➡ you have to give people the things they want or need. SCOPE S T R AT E GY ➡ you have to give it to them when and where they want it. ➡ you have to deliver it in a visual format that ensures they can—and want to— access all of it.
  • 47. interface design S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D
  • 48. interface design S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY every element counts UX D
  • 49. interface design S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY every element counts although the functionality of an app or site is important, the form used to deliver that functionality is equally important. UX D
  • 50. interface design S U R FA C E SKELETON every element counts although the functionality of an app or site is important, the form used to deliver that functionality is equally important. ➡ organization of content STRUCTURE SCOPE S T R AT E GY UX D
  • 51. interface design S U R FA C E SKELETON every element counts although the functionality of an app or site is important, the form used to deliver that functionality is equally important. ➡ organization of content STRUCTURE SCOPE S T R AT E GY ➡ layout of the screen UX D
  • 52. interface design S U R FA C E SKELETON every element counts although the functionality of an app or site is important, the form used to deliver that functionality is equally important. ➡ organization of content STRUCTURE ➡ layout of the screen ➡ use of audio and video SCOPE S T R AT E GY UX D
  • 53. interface design S U R FA C E SKELETON UX D every element counts although the functionality of an app or site is important, the form used to deliver that functionality is equally important. ➡ organization of content STRUCTURE ➡ layout of the screen ➡ use of audio and video SCOPE ➡ the ways people use their hands and fingers to move through data S T R AT E GY
  • 54. interface design S U R FA C E SKELETON UX D every element counts although the functionality of an app or site is important, the form used to deliver that functionality is equally important. ➡ organization of content STRUCTURE ➡ layout of the screen ➡ use of audio and video SCOPE ➡ the ways people use their hands and fingers to move through data S T R AT E GY no matter how technically superior the code is or how deep its functionality, the bottom line is...
  • 55. interface design S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D
  • 56. interface design S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D an app or site whose interface is difficult to use
  • 57. interface design S U R FA C E SKELETON UX D an app or site whose interface is difficult to use won’t be used. STRUCTURE SCOPE S T R AT E GY feature feature feature feature feature feature feature feature feature feature feature feature feature feature feature feature
  • 58. interface design S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D
  • 59. interface design S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY a few ground rules UX D
  • 60. interface design S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY a few ground rules to most people, the UI is the system. UX D
  • 61. interface design S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY a few ground rules to most people, the UI is the system. a well designed interface allows people to start using something immediately. UX D
  • 62. interface design S U R FA C E a few ground rules to most people, the UI is the system. SKELETON a well designed interface allows people to start using something immediately. STRUCTURE interface design has to be audience-appropriate – just because you understand it doesn’t mean someone else will. SCOPE S T R AT E GY UX D
  • 63. interface design S U R FA C E a few ground rules to most people, the UI is the system. SKELETON a well designed interface allows people to start using something immediately. STRUCTURE interface design has to be audience-appropriate – just because you understand it doesn’t mean someone else will. SCOPE inappropriate design is the number one killer of great product ideas. S T R AT E GY UX D
  • 64. interface design S U R FA C E a few ground rules to most people, the UI is the system. SKELETON a well designed interface allows people to start using something immediately. STRUCTURE interface design has to be audience-appropriate – just because you understand it doesn’t mean someone else will. SCOPE inappropriate design is the number one killer of great product ideas. S T R AT E GY it’s better to perfectly meet the needs of the critical few than to poorly meet the needs of many. UX D
  • 65. UX D S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY
  • 66. core principles of good UI design S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D
  • 67. core principles of good UI design S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY predictablilty UX D
  • 68. core principles of good UI design S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D predictablilty labels, instructions, icons, and images can all be used to set expectations about:
  • 69. core principles of good UI design S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D predictablilty labels, instructions, icons, and images can all be used to set expectations about: ➡ what to do (touch here!)
  • 70. core principles of good UI design S U R FA C E SKELETON predictablilty labels, instructions, icons, and images can all be used to set expectations about: ➡ what to do (touch here!) ➡ what will happen (open STRUCTURE SCOPE S T R AT E GY UX D this, drag this over there)
  • 71. core principles of good UI design S U R FA C E SKELETON UX D predictablilty labels, instructions, icons, and images can all be used to set expectations about: ➡ what to do (touch here!) ➡ what will happen (open STRUCTURE this, drag this over there) ➡ where the visitor will go (foster a SCOPE S T R AT E GY sense of place)
  • 72. core principles of good UI design S U R FA C E SKELETON UX D predictablilty labels, instructions, icons, and images can all be used to set expectations about: ➡ what to do (touch here!) ➡ what will happen (open STRUCTURE this, drag this over there) ➡ where the visitor will go (foster a SCOPE sense of place) ➡ how the screen will respond (do X and Y will happen) S T R AT E GY
  • 73. core principles of good UI design S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D
  • 74. core principles of good UI design S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY consistency UX D
  • 75. core principles of good UI design S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D consistency usability is improved when similar parts are expressed in similar ways.
  • 76. core principles of good UI design S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D consistency usability is improved when similar parts are expressed in similar ways. functional consistency leverages existing knowledge about how something works.
  • 77. core principles of good UI design S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D consistency usability is improved when similar parts are expressed in similar ways. functional consistency leverages existing knowledge about how something works. ➡ familiar meaning & action
  • 78. core principles of good UI design S U R FA C E SKELETON STRUCTURE consistency usability is improved when similar parts are expressed in similar ways. functional consistency leverages existing knowledge about how something works. ➡ familiar meaning & action ➡ navigational reference points SCOPE S T R AT E GY UX D
  • 79. core principles of good UI design S U R FA C E SKELETON STRUCTURE consistency usability is improved when similar parts are expressed in similar ways. functional consistency leverages existing knowledge about how something works. ➡ familiar meaning & action ➡ navigational reference points SCOPE S T R AT E GY UX D ➡ simplifies usability
  • 80. core principles of good UI design S U R FA C E SKELETON STRUCTURE consistency usability is improved when similar parts are expressed in similar ways. functional consistency leverages existing knowledge about how something works. ➡ familiar meaning & action ➡ navigational reference points SCOPE S T R AT E GY UX D ➡ simplifies usability ➡ increases intuitive learning
  • 81. core principles of good UI design S U R FA C E SKELETON STRUCTURE consistency usability is improved when similar parts are expressed in similar ways. functional consistency leverages existing knowledge about how something works. ➡ familiar meaning & action ➡ navigational reference points SCOPE S T R AT E GY UX D ➡ simplifies usability ➡ increases intuitive learning
  • 82. core principles of good UI design S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D
  • 83. core principles of good UI design S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D progressive disclosure
  • 84. core principles of good UI design S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D progressive disclosure everything should progress naturally, from simple to complex.
  • 85. core principles of good UI design S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D progressive disclosure everything should progress naturally, from simple to complex. only the necessary or requested information is displayed at any given time.
  • 86. core principles of good UI design S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D progressive disclosure everything should progress naturally, from simple to complex. only the necessary or requested information is displayed at any given time. this helps people manage complexity without becoming confused, frustrated or disoriented.
  • 87. core principles of good UI design S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D progressive disclosure everything should progress naturally, from simple to complex. only the necessary or requested information is displayed at any given time. this helps people manage complexity without becoming confused, frustrated or disoriented. Information presented to a person who isn’t interested – or ready to process it– is noise.
  • 88. core principles of good UI design S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D progressive disclosure everything should progress naturally, from simple to complex. only the necessary or requested information is displayed at any given time. this helps people manage complexity without becoming confused, frustrated or disoriented. Information presented to a person who isn’t interested – or ready to process it– is noise.
  • 89. core principles of good UI design S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D progressive disclosure everything should progress naturally, from simple to complex. only the necessary or requested information is displayed at any given time. this helps people manage complexity without becoming confused, frustrated or disoriented. Information presented to a person who isn’t interested – or ready to process it– is noise.
  • 90. core principles of good UI design S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D
  • 91. core principles of good UI design S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY intuitiveness UX D
  • 92. core principles of good UI design S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D intuitiveness intuitive really means “single trial learning.”
  • 93. core principles of good UI design S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D intuitiveness intuitive really means “single trial learning.” we learn behaviors from experiences across the web, devices, and real-world places and objects.
  • 94. core principles of good UI design S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D intuitiveness intuitive really means “single trial learning.” we learn behaviors from experiences across the web, devices, and real-world places and objects. interactions should be easy to learn and easy to remember.
  • 95. core principles of good UI design S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D intuitiveness intuitive really means “single trial learning.” we learn behaviors from experiences across the web, devices, and real-world places and objects. interactions should be easy to learn and easy to remember. ➡ ideally people use it once, learn it rapidly, remember it forever
  • 96. core principles of good UI design S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D intuitiveness intuitive really means “single trial learning.” we learn behaviors from experiences across the web, devices, and real-world places and objects. interactions should be easy to learn and easy to remember. ➡ ideally people use it once, learn it rapidly, remember it forever ➡ in reality they use it a few times, learn it, and hope they remember it for next time
  • 97. core principles of good UI design S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D intuitiveness intuitive really means “single trial learning.” we learn behaviors from experiences across the web, devices, and real-world places and objects. interactions should be easy to learn and easy to remember. ➡ ideally people use it once, learn it rapidly, remember it forever ➡ in reality they use it a few times, learn it, and hope they remember it for next time
  • 98. core principles of good UI design S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D
  • 99. core principles of good UI design S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY context & hierarchy UX D
  • 100. core principles of good UI design S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D context & hierarchy ➡ are items that are functionally or logically connected grouped together visually?
  • 101. core principles of good UI design S U R FA C E SKELETON UX D context & hierarchy ➡ are items that are functionally or logically connected grouped together visually? ➡ is the information presented in order STRUCTURE SCOPE S T R AT E GY of importance to the user?
  • 102. core principles of good UI design S U R FA C E SKELETON UX D context & hierarchy ➡ are items that are functionally or logically connected grouped together visually? ➡ is the information presented in order STRUCTURE of importance to the user? ➡ does the visual hierarchy on the SCOPE S T R AT E GY screen and functional behavior match what the user expects to do first? second? third?
  • 103. core principles of good UI design S U R FA C E SKELETON UX D context & hierarchy ➡ are items that are functionally or logically connected grouped together visually? ➡ is the information presented in order STRUCTURE of importance to the user? ➡ does the visual hierarchy on the SCOPE S T R AT E GY screen and functional behavior match what the user expects to do first? second? third? ➡ is the visual layout consistent with the mental model of the person using it – and is the approach used consistently?
  • 104. core principles of good UI design S U R FA C E SKELETON UX D context & hierarchy ➡ are items that are functionally or logically connected grouped together visually? ➡ is the information presented in order STRUCTURE of importance to the user? ➡ does the visual hierarchy on the SCOPE S T R AT E GY screen and functional behavior match what the user expects to do first? second? third? ➡ is the visual layout consistent with the mental model of the person using it – and is the approach used consistently?
  • 105. core principles of good UI design S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D
  • 106. core principles of good UI design S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY hick’s law UX D
  • 107. core principles of good UI design S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D hick’s law every additional choice increases the time required to make a decision.
  • 108. core principles of good UI design S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D hick’s law every additional choice increases the time required to make a decision. the more choice you give people, the easier it is to choose nothing.
  • 109. core principles of good UI design S U R FA C E SKELETON STRUCTURE hick’s law every additional choice increases the time required to make a decision. the more choice you give people, the easier it is to choose nothing. “it’s not information overload – it’s filter failure.” - Clay Shirky SCOPE S T R AT E GY UX D
  • 110. core principles of good UI design S U R FA C E SKELETON STRUCTURE hick’s law every additional choice increases the time required to make a decision. the more choice you give people, the easier it is to choose nothing. “it’s not information overload – it’s filter failure.” - Clay Shirky SCOPE S T R AT E GY UX D in the era of infinite choice, people need better filters!
  • 111. core principles of good UI design S U R FA C E SKELETON STRUCTURE hick’s law every additional choice increases the time required to make a decision. the more choice you give people, the easier it is to choose nothing. “it’s not information overload – it’s filter failure.” - Clay Shirky SCOPE S T R AT E GY UX D in the era of infinite choice, people need better filters!
  • 112. UX D S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY
  • 113. navigation design S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY navigation design UX D
  • 114. navigation design S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D
  • 115. navigation design S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY where the sitemap meets design UX D
  • 116. navigation design S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY where the sitemap meets design the navigational system – along with content and context – should help a visitor understand where they are. UX D
  • 117. navigation design S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY where the sitemap meets design the navigational system – along with content and context – should help a visitor understand where they are. navigation design typically starts with a site map. UX D
  • 118. navigation design S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY where the sitemap meets design the navigational system – along with content and context – should help a visitor understand where they are. navigation design typically starts with a site map. UX D
  • 119. navigation design S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D
  • 120. navigation design S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY passing the ‘trunk test’ UX D
  • 121. navigation design S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY passing the ‘trunk test’ ➡ where are you? UX D
  • 122. navigation design S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY passing the ‘trunk test’ ➡ where are you? ➡ how did you arrive here? UX D
  • 123. navigation design S U R FA C E SKELETON passing the ‘trunk test’ ➡ where are you? ➡ how did you arrive here? ➡ what can you do here? STRUCTURE SCOPE S T R AT E GY UX D
  • 124. navigation design S U R FA C E SKELETON passing the ‘trunk test’ ➡ where are you? ➡ how did you arrive here? ➡ what can you do here? STRUCTURE SCOPE S T R AT E GY ➡ where can you go from here? UX D
  • 125. navigation design S U R FA C E SKELETON passing the ‘trunk test’ ➡ where are you? ➡ how did you arrive here? ➡ what can you do here? STRUCTURE ➡ where can you go from here? correct answers to all four mean the navigation design: SCOPE S T R AT E GY UX D
  • 126. navigation design S U R FA C E SKELETON passing the ‘trunk test’ ➡ where are you? ➡ how did you arrive here? ➡ what can you do here? STRUCTURE ➡ where can you go from here? correct answers to all four mean the navigation design: SCOPE S T R AT E GY ➡ provides a strong sense of place UX D
  • 127. navigation design S U R FA C E SKELETON passing the ‘trunk test’ ➡ where are you? ➡ how did you arrive here? ➡ what can you do here? STRUCTURE ➡ where can you go from here? correct answers to all four mean the navigation design: SCOPE ➡ provides a strong sense of place ➡ sets the correct expectations S T R AT E GY UX D
  • 128. navigation design S U R FA C E SKELETON passing the ‘trunk test’ ➡ where are you? ➡ how did you arrive here? ➡ what can you do here? STRUCTURE ➡ where can you go from here? correct answers to all four mean the navigation design: SCOPE ➡ provides a strong sense of place ➡ sets the correct expectations S T R AT E GY ➡ makes it possible for people to accurately predict outcomes of interactions UX D
  • 129. UX D S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY
  • 130. core principles of navigation design S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D
  • 131. core principles of navigation design S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D finding what you want
  • 132. core principles of navigation design S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D finding what you want ➡ browsing via a navigation system
  • 133. core principles of navigation design S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D finding what you want ➡ browsing via a navigation system ➡ searching via keywords/phrases
  • 134. core principles of navigation design S U R FA C E SKELETON UX D finding what you want ➡ browsing via a navigation system ➡ searching via keywords/phrases ➡ using filters to narrow large lists STRUCTURE SCOPE S T R AT E GY and sets of information
  • 135. core principles of navigation design S U R FA C E SKELETON UX D finding what you want ➡ browsing via a navigation system ➡ searching via keywords/phrases ➡ using filters to narrow large lists STRUCTURE and sets of information ➡ use pagination controls to provide: SCOPE S T R AT E GY
  • 136. core principles of navigation design S U R FA C E SKELETON UX D finding what you want ➡ browsing via a navigation system ➡ searching via keywords/phrases ➡ using filters to narrow large lists STRUCTURE and sets of information ➡ use pagination controls to provide: SCOPE S T R AT E GY - location information
  • 137. core principles of navigation design S U R FA C E SKELETON UX D finding what you want ➡ browsing via a navigation system ➡ searching via keywords/phrases ➡ using filters to narrow large lists STRUCTURE and sets of information ➡ use pagination controls to provide: SCOPE - location information - sense of depth/breadth S T R AT E GY
  • 138. core principles of navigation design S U R FA C E SKELETON UX D finding what you want ➡ browsing via a navigation system ➡ searching via keywords/phrases ➡ using filters to narrow large lists STRUCTURE and sets of information ➡ use pagination controls to provide: SCOPE - location information - sense of depth/breadth S T R AT E GY - the ability to move around within a large information set
  • 139. core principles of navigation design S U R FA C E SKELETON UX D finding what you want ➡ browsing via a navigation system ➡ searching via keywords/phrases ➡ using filters to narrow large lists STRUCTURE and sets of information ➡ use pagination controls to provide: SCOPE - location information - sense of depth/breadth S T R AT E GY - the ability to move around within a large information set
  • 140. core principles of navigation design S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D
  • 141. core principles of navigation design S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY revealing depth UX D
  • 142. core principles of navigation design S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D revealing depth how can we reveal depth of site content before people navigate?
  • 143. core principles of navigation design S U R FA C E SKELETON UX D revealing depth how can we reveal depth of site content before people navigate? ➡ dynamic sub-menus on main navigation menu (mouseover) STRUCTURE SCOPE S T R AT E GY
  • 144. core principles of navigation design S U R FA C E SKELETON UX D revealing depth how can we reveal depth of site content before people navigate? ➡ dynamic sub-menus on main navigation menu (mouseover) STRUCTURE ➡ search results: volume, filtering and pagination SCOPE S T R AT E GY
  • 145. core principles of navigation design S U R FA C E SKELETON UX D revealing depth how can we reveal depth of site content before people navigate? ➡ dynamic sub-menus on main navigation menu (mouseover) STRUCTURE ➡ search results: volume, filtering and pagination SCOPE S T R AT E GY Both provide feedback along with a clear sense of place.
  • 146. core principles of navigation design S U R FA C E SKELETON UX D revealing depth how can we reveal depth of site content before people navigate? ➡ dynamic sub-menus on main navigation menu (mouseover) STRUCTURE ➡ search results: volume, filtering and pagination SCOPE Both provide feedback along with a clear sense of place. S T R AT E GY use indicators and context to provide a sense of place – all elements of the page contribute to this!
  • 147. core principles of navigation design S U R FA C E SKELETON UX D revealing depth how can we reveal depth of site content before people navigate? ➡ dynamic sub-menus on main navigation menu (mouseover) STRUCTURE ➡ search results: volume, filtering and pagination SCOPE Both provide feedback along with a clear sense of place. S T R AT E GY use indicators and context to provide a sense of place – all elements of the page contribute to this!
  • 148. core principles of navigation design S U R FA C E SKELETON UX D revealing depth how can we reveal depth of site content before people navigate? ➡ dynamic sub-menus on main navigation menu (mouseover) STRUCTURE ➡ search results: volume, filtering and pagination SCOPE Both provide feedback along with a clear sense of place. S T R AT E GY use indicators and context to provide a sense of place – all elements of the page contribute to this!
  • 149. core principles of navigation design S U R FA C E SKELETON UX D revealing depth how can we reveal depth of site content before people navigate? ➡ dynamic sub-menus on main navigation menu (mouseover) STRUCTURE ➡ search results: volume, filtering and pagination SCOPE Both provide feedback along with a clear sense of place. S T R AT E GY use indicators and context to provide a sense of place – all elements of the page contribute to this!
  • 150. core principles of navigation design S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D
  • 151. core principles of navigation design S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY information scent UX D
  • 152. core principles of navigation design S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D information scent people typically estimate – based on what they see – how much useful information they’re likely to find on a given path.
  • 153. core principles of navigation design S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D information scent people typically estimate – based on what they see – how much useful information they’re likely to find on a given path. after going down the path, they compare the actual outcome with their predictions.
  • 154. core principles of navigation design S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D information scent people typically estimate – based on what they see – how much useful information they’re likely to find on a given path. after going down the path, they compare the actual outcome with their predictions. when a visitor no longer expects to find useful info on the current path, they move to another source or path.
  • 155. core principles of navigation design S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D information scent people typically estimate – based on what they see – how much useful information they’re likely to find on a given path. after going down the path, they compare the actual outcome with their predictions. when a visitor no longer expects to find useful info on the current path, they move to another source or path.
  • 156. core principles of navigation design S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D
  • 157. core principles of navigation design S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D the path is rarely direct
  • 158. core principles of navigation design S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D the path is rarely direct people meander and follow links based on contextual relevance, interest, and whim.
  • 159. core principles of navigation design S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D the path is rarely direct people meander and follow links based on contextual relevance, interest, and whim. when we don’t know where we are or how we got there, we attempt to back out or navigate to a known location.
  • 160. core principles of navigation design S U R FA C E SKELETON STRUCTURE UX D the path is rarely direct people meander and follow links based on contextual relevance, interest, and whim. when we don’t know where we are or how we got there, we attempt to back out or navigate to a known location. although nav bars are common, they’re not the only method for finding your way. SCOPE S T R AT E GY
  • 161. core principles of navigation design S U R FA C E SKELETON STRUCTURE UX D the path is rarely direct people meander and follow links based on contextual relevance, interest, and whim. when we don’t know where we are or how we got there, we attempt to back out or navigate to a known location. although nav bars are common, they’re not the only method for finding your way. SCOPE S T R AT E GY search, filters, tags and contextual links can all be used to find information.
  • 162. core principles of navigation design S U R FA C E SKELETON STRUCTURE UX D the path is rarely direct people meander and follow links based on contextual relevance, interest, and whim. when we don’t know where we are or how we got there, we attempt to back out or navigate to a known location. although nav bars are common, they’re not the only method for finding your way. SCOPE S T R AT E GY search, filters, tags and contextual links can all be used to find information.
  • 163. core principles of navigation design S U R FA C E SKELETON STRUCTURE UX D the path is rarely direct people meander and follow links based on contextual relevance, interest, and whim. when we don’t know where we are or how we got there, we attempt to back out or navigate to a known location. although nav bars are common, they’re not the only method for finding your way. SCOPE S T R AT E GY search, filters, tags and contextual links can all be used to find information.
  • 164. core principles of navigation design S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D
  • 165. core principles of navigation design S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY icons and labels UX D
  • 166. core principles of navigation design S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY icons and labels representational icons have clear meanings based on their similarity to familiar objects and/or actions. UX D
  • 167. core principles of navigation design S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D icons and labels representational icons have clear meanings based on their similarity to familiar objects and/or actions. abstract icons typically require context and experience to learn their meanings.
  • 168. core principles of navigation design S U R FA C E SKELETON STRUCTURE UX D icons and labels representational icons have clear meanings based on their similarity to familiar objects and/or actions. abstract icons typically require context and experience to learn their meanings. ➡ how important is it that someone SCOPE S T R AT E GY can recognize and act on an iconbased cue?
  • 169. core principles of navigation design S U R FA C E SKELETON STRUCTURE UX D icons and labels representational icons have clear meanings based on their similarity to familiar objects and/or actions. abstract icons typically require context and experience to learn their meanings. ➡ how important is it that someone SCOPE can recognize and act on an iconbased cue? ➡ is there additional context that tells S T R AT E GY them what to do or what this is?
  • 170. core principles of navigation design S U R FA C E SKELETON STRUCTURE UX D icons and labels representational icons have clear meanings based on their similarity to familiar objects and/or actions. abstract icons typically require context and experience to learn their meanings. ➡ how important is it that someone SCOPE can recognize and act on an iconbased cue? ➡ is there additional context that tells S T R AT E GY them what to do or what this is? ➡ is there time for them to figure it out?
  • 171. core principles of navigation design S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D
  • 172. core principles of navigation design S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D navigation that works
  • 173. core principles of navigation design S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D navigation that works use meaningful labels for the navigation, links and buttons.
  • 174. core principles of navigation design S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D navigation that works use meaningful labels for the navigation, links and buttons. reduce memory load by ensuring the navigation and links are visible, findable and informative.
  • 175. core principles of navigation design S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D navigation that works use meaningful labels for the navigation, links and buttons. reduce memory load by ensuring the navigation and links are visible, findable and informative. reduce cognitive friction by ensuring that people don’t need to study or decode the navigation system.
  • 176. core principles of navigation design S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D navigation that works use meaningful labels for the navigation, links and buttons. reduce memory load by ensuring the navigation and links are visible, findable and informative. reduce cognitive friction by ensuring that people don’t need to study or decode the navigation system. you want them to find things quickly and use the information – not spend time looking for it.
  • 177. core principles of navigation design S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D
  • 178. core principles of navigation design S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY no scavenger hunts UX D
  • 179. core principles of navigation design S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D no scavenger hunts the navigation system isn’t a treasure map – so it shouldn’t be cryptic.
  • 180. core principles of navigation design S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D no scavenger hunts the navigation system isn’t a treasure map – so it shouldn’t be cryptic. don’t force people to search for or chase the information, features and functionality they need.
  • 181. core principles of navigation design S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D no scavenger hunts the navigation system isn’t a treasure map – so it shouldn’t be cryptic. don’t force people to search for or chase the information, features and functionality they need. bring information and interactivity – contextually meaningful content – to the person when (and how) they need it.
  • 182. core principles of navigation design S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D
  • 183. core principles of navigation design S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY be consistent UX D
  • 184. core principles of navigation design S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D be consistent use the same interactions, behaviors and visual styles throughout the site or app.
  • 185. core principles of navigation design S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D be consistent use the same interactions, behaviors and visual styles throughout the site or app. elements of navigation should never:
  • 186. core principles of navigation design S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D be consistent use the same interactions, behaviors and visual styles throughout the site or app. elements of navigation should never: ➡ appear and disappear
  • 187. core principles of navigation design S U R FA C E SKELETON STRUCTURE be consistent use the same interactions, behaviors and visual styles throughout the site or app. elements of navigation should never: ➡ appear and disappear ➡ rearrange their order SCOPE S T R AT E GY UX D
  • 188. core principles of navigation design S U R FA C E SKELETON STRUCTURE be consistent use the same interactions, behaviors and visual styles throughout the site or app. elements of navigation should never: ➡ appear and disappear ➡ rearrange their order SCOPE S T R AT E GY UX D ➡ move to a different location
  • 189. core principles of navigation design S U R FA C E SKELETON STRUCTURE UX D be consistent use the same interactions, behaviors and visual styles throughout the site or app. elements of navigation should never: ➡ appear and disappear ➡ rearrange their order SCOPE S T R AT E GY ➡ move to a different location even changing the organization of the page underneath the nav disrupts the person’s understanding of how things work.
  • 190. core principles of navigation design S U R FA C E SKELETON STRUCTURE UX D be consistent use the same interactions, behaviors and visual styles throughout the site or app. elements of navigation should never: ➡ appear and disappear ➡ rearrange their order SCOPE S T R AT E GY ➡ move to a different location even changing the organization of the page underneath the nav disrupts the person’s understanding of how things work.
  • 191. core principles of navigation design S U R FA C E SKELETON STRUCTURE UX D be consistent use the same interactions, behaviors and visual styles throughout the site or app. elements of navigation should never: ➡ appear and disappear ➡ rearrange their order SCOPE S T R AT E GY ➡ move to a different location even changing the organization of the page underneath the nav disrupts the person’s understanding of how things work.
  • 192. core principles of navigation design S U R FA C E SKELETON STRUCTURE UX D be consistent use the same interactions, behaviors and visual styles throughout the site or app. elements of navigation should never: ➡ appear and disappear ➡ rearrange their order SCOPE S T R AT E GY ➡ move to a different location even changing the organization of the page underneath the nav disrupts the person’s understanding of how things work.
  • 193. UX D S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY
  • 194. convention and metaphor S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D
  • 195. convention and metaphor S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY setting (and keeping) standards UX D
  • 196. convention and metaphor S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY setting (and keeping) standards the appearance and location of common navigation systems have evolved over time to become conventions (e.g tabbed navigation). UX D
  • 197. convention and metaphor S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY setting (and keeping) standards the appearance and location of common navigation systems have evolved over time to become conventions (e.g tabbed navigation). those conventions tell us what to look for and where to look when we need them. UX D
  • 198. convention and metaphor S U R FA C E SKELETON STRUCTURE setting (and keeping) standards the appearance and location of common navigation systems have evolved over time to become conventions (e.g tabbed navigation). those conventions tell us what to look for and where to look when we need them. putting them in a standard place lets us locate them quickly. SCOPE S T R AT E GY UX D
  • 199. convention and metaphor S U R FA C E SKELETON STRUCTURE setting (and keeping) standards the appearance and location of common navigation systems have evolved over time to become conventions (e.g tabbed navigation). those conventions tell us what to look for and where to look when we need them. putting them in a standard place lets us locate them quickly. SCOPE S T R AT E GY standardizing their appearance makes it easy to pick them out among everything else. UX D
  • 200. convention and metaphor S U R FA C E SKELETON STRUCTURE setting (and keeping) standards the appearance and location of common navigation systems have evolved over time to become conventions (e.g tabbed navigation). those conventions tell us what to look for and where to look when we need them. putting them in a standard place lets us locate them quickly. SCOPE S T R AT E GY standardizing their appearance makes it easy to pick them out among everything else. how frustrating is it when one of these conventions is broken? UX D
  • 201. UX D S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY
  • 202. web conventions S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D
  • 203. web conventions S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D
  • 204. web conventions S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY site ID UX D
  • 205. web conventions S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY site ID search UX D
  • 206. web conventions S U R FA C E site ID search main nav SKELETON STRUCTURE SCOPE S T R AT E GY UX D
  • 207. web conventions UX D site utilities S U R FA C E site ID search main nav SKELETON STRUCTURE SCOPE S T R AT E GY
  • 208. web conventions UX D site utilities S U R FA C E site ID search main nav SKELETON STRUCTURE SCOPE S T R AT E GY shopping cart
  • 209. web conventions S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D
  • 210. web conventions UX D S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY local navigation (things at the current level)
  • 211. web conventions S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D
  • 212. web conventions UX D S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY page name
  • 213. web conventions S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D
  • 214. web conventions UX D S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY current / new feature
  • 215. web conventions S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D
  • 216. web conventions S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY social proof UX D
  • 217. UX D S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY
  • 218. the value of conventions S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D
  • 219. the value of conventions S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D habit and reflex
  • 220. the value of conventions S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D habit and reflex if not for both, we’d accomplish a lot less every day.
  • 221. the value of conventions S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D habit and reflex if not for both, we’d accomplish a lot less every day. convention allows us to apply those reflexes in different circumstances.
  • 222. the value of conventions S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D habit and reflex if not for both, we’d accomplish a lot less every day. convention allows us to apply those reflexes in different circumstances. conventions often become standard for devices that have nothing to do with the one which started the idea.
  • 223. the value of conventions S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D habit and reflex if not for both, we’d accomplish a lot less every day. convention allows us to apply those reflexes in different circumstances. conventions often become standard for devices that have nothing to do with the one which started the idea. your interface design should be consistent with others your users are already familiar with.
  • 224. the value of conventions S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D habit and reflex if not for both, we’d accomplish a lot less every day. convention allows us to apply those reflexes in different circumstances. conventions often become standard for devices that have nothing to do with the one which started the idea. your interface design should be consistent with others your users are already familiar with. it should also be consistent with itself.
  • 225. the value of conventions S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D habit and reflex if not for both, we’d accomplish a lot less every day. convention allows us to apply those reflexes in different circumstances. conventions often become standard for devices that have nothing to do with the one which started the idea. your interface design should be consistent with others your users are already familiar with. it should also be consistent with itself.
  • 226. UX D S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY
  • 227. using metaphors S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D
  • 228. using metaphors S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D intuitive and obvious
  • 229. using metaphors S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D intuitive and obvious just like spoken metaphors provide shortcuts in language, visual metaphors provide shortcuts for use
  • 230. using metaphors S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D intuitive and obvious just like spoken metaphors provide shortcuts in language, visual metaphors provide shortcuts for use intuitive interfaces often lean on metaphors that we instantly recognize from day-to-day life.
  • 231. using metaphors S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D intuitive and obvious just like spoken metaphors provide shortcuts in language, visual metaphors provide shortcuts for use intuitive interfaces often lean on metaphors that we instantly recognize from day-to-day life. these are called affordances, visual cues for what you can do and how you can do it.
  • 232. using metaphors S U R FA C E SKELETON STRUCTURE UX D intuitive and obvious just like spoken metaphors provide shortcuts in language, visual metaphors provide shortcuts for use intuitive interfaces often lean on metaphors that we instantly recognize from day-to-day life. SCOPE these are called affordances, visual cues for what you can do and how you can do it. S T R AT E GY gaming or entertainment apps benefit greatly from metaphor.
  • 233. using metaphors S U R FA C E SKELETON STRUCTURE UX D intuitive and obvious just like spoken metaphors provide shortcuts in language, visual metaphors provide shortcuts for use intuitive interfaces often lean on metaphors that we instantly recognize from day-to-day life. SCOPE these are called affordances, visual cues for what you can do and how you can do it. S T R AT E GY gaming or entertainment apps benefit greatly from metaphor.
  • 234. using metaphors S U R FA C E SKELETON STRUCTURE UX D intuitive and obvious just like spoken metaphors provide shortcuts in language, visual metaphors provide shortcuts for use intuitive interfaces often lean on metaphors that we instantly recognize from day-to-day life. SCOPE these are called affordances, visual cues for what you can do and how you can do it. S T R AT E GY gaming or entertainment apps benefit greatly from metaphor.
  • 235. using metaphors S U R FA C E SKELETON STRUCTURE UX D intuitive and obvious just like spoken metaphors provide shortcuts in language, visual metaphors provide shortcuts for use intuitive interfaces often lean on metaphors that we instantly recognize from day-to-day life. SCOPE these are called affordances, visual cues for what you can do and how you can do it. S T R AT E GY gaming or entertainment apps benefit greatly from metaphor.
  • 236. using metaphors S U R FA C E SKELETON STRUCTURE UX D intuitive and obvious just like spoken metaphors provide shortcuts in language, visual metaphors provide shortcuts for use intuitive interfaces often lean on metaphors that we instantly recognize from day-to-day life. SCOPE these are called affordances, visual cues for what you can do and how you can do it. S T R AT E GY gaming or entertainment apps benefit greatly from metaphor.
  • 237. UX D S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY
  • 238. (ab)using metaphors S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D
  • 239. (ab)using metaphors S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D use with caution
  • 240. (ab)using metaphors S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D use with caution metaphors are culturally subjective.
  • 241. (ab)using metaphors S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D use with caution metaphors are culturally subjective. metaphors require mental effort.
  • 242. (ab)using metaphors S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D use with caution metaphors are culturally subjective. metaphors require mental effort. metaphors can obscure the nature of the feature instead of revealing it.
  • 243. (ab)using metaphors S U R FA C E SKELETON STRUCTURE UX D use with caution metaphors are culturally subjective. metaphors require mental effort. metaphors can obscure the nature of the feature instead of revealing it. metaphors that have universal understanding are hard to come by. SCOPE S T R AT E GY
  • 244. (ab)using metaphors S U R FA C E SKELETON STRUCTURE UX D use with caution metaphors are culturally subjective. metaphors require mental effort. metaphors can obscure the nature of the feature instead of revealing it. metaphors that have universal understanding are hard to come by. SCOPE S T R AT E GY
  • 245. (ab)using metaphors S U R FA C E SKELETON STRUCTURE UX D use with caution metaphors are culturally subjective. metaphors require mental effort. metaphors can obscure the nature of the feature instead of revealing it. metaphors that have universal understanding are hard to come by. SCOPE S T R AT E GY
  • 246. UX D S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY
  • 247. information design S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D
  • 248. information design S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY it’s the glue UX D
  • 249. information design S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY it’s the glue UX D
  • 250. information design S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY it’s the glue UX D
  • 251. information design S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY it’s the glue how do we present information so people understand it more easily? UX D
  • 252. information design S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY it’s the glue how do we present information so people understand it more easily? information design is visual, but doesn’t mean we’re focused on the finished look & feel. UX D
  • 253. information design S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY it’s the glue how do we present information so people understand it more easily? information design is visual, but doesn’t mean we’re focused on the finished look & feel. our focus is on the effectiveness of the form – does it communicate clearly? UX D
  • 254. information design S U R FA C E SKELETON it’s the glue how do we present information so people understand it more easily? information design is visual, but doesn’t mean we’re focused on the finished look & feel. STRUCTURE our focus is on the effectiveness of the form – does it communicate clearly? SCOPE think of it as “sense-making.” S T R AT E GY UX D
  • 255. information design S U R FA C E SKELETON it’s the glue how do we present information so people understand it more easily? information design is visual, but doesn’t mean we’re focused on the finished look & feel. STRUCTURE our focus is on the effectiveness of the form – does it communicate clearly? SCOPE think of it as “sense-making.” S T R AT E GY good information design supports the goals of both user and creator. UX D
  • 256. UX D S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY
  • 257. appropriate organization S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D
  • 258. appropriate organization S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY context is everything UX D
  • 259. appropriate organization S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY context is everything group and arrange information elements in ways that: UX D
  • 260. appropriate organization S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY context is everything group and arrange information elements in ways that: ➡ reflect how users think UX D
  • 261. appropriate organization S U R FA C E SKELETON context is everything group and arrange information elements in ways that: ➡ reflect how users think ➡ match what they expect STRUCTURE SCOPE S T R AT E GY UX D
  • 262. appropriate organization S U R FA C E SKELETON context is everything group and arrange information elements in ways that: ➡ reflect how users think ➡ match what they expect STRUCTURE SCOPE S T R AT E GY ➡ support their tasks and goals UX D
  • 263. appropriate organization S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D
  • 264. appropriate organization S U R FA C E state email address SKELETON job title phone number STRUCTURE street address name SCOPE zip code company S T R AT E GY city UX D
  • 265. appropriate organization S U R FA C E state email address SKELETON job title phone number STRUCTURE street address name SCOPE zip code company S T R AT E GY city UX D
  • 266. appropriate organization S U R FA C E UX D company street address street address city state zip code zip code company S T R AT E GY job title name SCOPE job title phone number STRUCTURE name email address SKELETON state phone number city email address
  • 267. appropriate organization S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D
  • 268. appropriate organization UX D alphabetical S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY
  • 269. appropriate organization UX D alphabetical S U R FA C E ➡ information is referential e.g. dictionary, encylopedia SKELETON STRUCTURE SCOPE S T R AT E GY
  • 270. appropriate organization UX D alphabetical S U R FA C E ➡ information is referential e.g. dictionary, encylopedia SKELETON STRUCTURE ➡ efficient, non-linear access to specific items is required e.g. contact list SCOPE S T R AT E GY
  • 271. appropriate organization UX D alphabetical S U R FA C E ➡ information is referential e.g. dictionary, encylopedia SKELETON STRUCTURE ➡ efficient, non-linear access to specific items is required e.g. contact list SCOPE S T R AT E GY ➡ no other organizing strategy is appropriate
  • 272. appropriate organization S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D
  • 273. appropriate organization UX D categorical S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY
  • 274. appropriate organization UX D categorical S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY ➡ clusters of similarity exist within the information e.g. college catalog, statistical report
  • 275. appropriate organization UX D categorical S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY ➡ clusters of similarity exist within the information e.g. college catalog, statistical report ➡ people will naturally seek out information by category e.g. department store, ecommerce site
  • 276. appropriate organization S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D
  • 277. appropriate organization UX D continuum S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY
  • 278. appropriate organization UX D continuum S U R FA C E SKELETON ➡ organizing by magnitude: lowest to highest, worst to best e.g. search engine results, baseball stats STRUCTURE SCOPE S T R AT E GY
  • 279. appropriate organization UX D continuum S U R FA C E SKELETON ➡ organizing by magnitude: lowest to highest, worst to best e.g. search engine results, baseball stats STRUCTURE SCOPE S T R AT E GY ➡ comparing things using a common measure e.g. search engine results, baseball stats
  • 280. appropriate organization S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D
  • 281. appropriate organization UX D location S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY
  • 282. appropriate organization UX D location S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY ➡ orientation and wayfinding are important e.g. emergency exit maps, travel guides
  • 283. appropriate organization UX D location S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY ➡ orientation and wayfinding are important e.g. emergency exit maps, travel guides ➡ information is contextually related to geography e.g. historic site
  • 284. appropriate organization S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D
  • 285. appropriate organization UX D time S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY
  • 286. appropriate organization UX D time S U R FA C E SKELETON ➡ presenting and comparing events over fixed durations e.g. historical timeline, channel guide STRUCTURE SCOPE S T R AT E GY
  • 287. appropriate organization UX D time S U R FA C E SKELETON ➡ presenting and comparing events over fixed durations e.g. historical timeline, channel guide STRUCTURE SCOPE S T R AT E GY ➡ a time-based sequence is involved e.g. step-by-step procedure
  • 288. UX D S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY
  • 289. appropriate form S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D
  • 290. appropriate form S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY what’s the best representation? UX D
  • 291. appropriate form S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY what’s the best representation? UX D
  • 292. appropriate form S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY what’s the best representation? UX D
  • 293. appropriate form S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY what’s the best representation? UX D
  • 294. appropriate form S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY what’s the best representation? UX D
  • 295. appropriate form S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D
  • 296. appropriate form five part essay S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D
  • 297. appropriate form five part essay S U R FA C E introduction SKELETON STRUCTURE SCOPE S T R AT E GY UX D
  • 298. appropriate form five part essay S U R FA C E introduction SKELETON STRUCTURE SCOPE S T R AT E GY UX D
  • 299. appropriate form UX D five part essay S U R FA C E introduction SKELETON narration STRUCTURE SCOPE S T R AT E GY
  • 300. appropriate form UX D five part essay S U R FA C E introduction SKELETON narration STRUCTURE SCOPE S T R AT E GY
  • 301. appropriate form UX D five part essay S U R FA C E introduction SKELETON narration STRUCTURE affirmation SCOPE S T R AT E GY
  • 302. appropriate form UX D five part essay S U R FA C E introduction SKELETON narration STRUCTURE affirmation SCOPE S T R AT E GY
  • 303. appropriate form UX D five part essay S U R FA C E introduction SKELETON narration STRUCTURE affirmation SCOPE negation S T R AT E GY
  • 304. appropriate form UX D five part essay S U R FA C E introduction SKELETON narration STRUCTURE affirmation SCOPE negation S T R AT E GY
  • 305. appropriate form UX D five part essay S U R FA C E introduction SKELETON narration STRUCTURE affirmation SCOPE negation S T R AT E GY conclusion
  • 306. appropriate form UX D five part essay S U R FA C E introduction SKELETON narration STRUCTURE affirmation SCOPE negation S T R AT E GY conclusion inverted pyramid
  • 307. appropriate form UX D five part essay S U R FA C E introduction SKELETON narration STRUCTURE affirmation SCOPE negation S T R AT E GY conclusion inverted pyramid
  • 308. appropriate form UX D five part essay inverted pyramid S U R FA C E introduction most critical information SKELETON narration STRUCTURE affirmation SCOPE negation S T R AT E GY conclusion
  • 309. appropriate form UX D five part essay inverted pyramid S U R FA C E introduction most critical information SKELETON narration STRUCTURE affirmation SCOPE negation S T R AT E GY conclusion helpful (but not critical) information
  • 310. appropriate form UX D five part essay inverted pyramid S U R FA C E introduction most critical information SKELETON narration STRUCTURE affirmation SCOPE negation S T R AT E GY conclusion helpful (but not critical) information nice to know (unnecessary) information
  • 311. appropriate form UX D five part essay inverted pyramid S U R FA C E introduction most critical information SKELETON narration STRUCTURE affirmation SCOPE negation S T R AT E GY conclusion helpful (but not critical) information nice to know (unnecessary) information
  • 312. appropriate form UX D five part essay inverted pyramid S U R FA C E introduction dominant visual elements most critical information SKELETON narration STRUCTURE affirmation SCOPE negation S T R AT E GY conclusion helpful (but not critical) information nice to know (unnecessary) information
  • 313. appropriate form UX D five part essay inverted pyramid S U R FA C E introduction dominant visual elements most critical information SKELETON narration STRUCTURE affirmation SCOPE negation S T R AT E GY conclusion helpful focal points; items (but not critical) of equal importance information nice to know (unnecessary) information
  • 314. appropriate form UX D five part essay inverted pyramid S U R FA C E introduction dominant visual elements most critical information SKELETON narration STRUCTURE affirmation SCOPE negation S T R AT E GY conclusion helpful focal points; items (but not critical) of equal importance information nice to know details for (unnecessary) those who information want more
  • 315. appropriate form S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D
  • 316. appropriate form UX D occam’s razor S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY
  • 317. appropriate form UX D occam’s razor S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY the simplest solution is usually best.
  • 318. appropriate form UX D occam’s razor S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY the simplest solution is usually best. simple is always better than the opposite.
  • 319. appropriate form UX D occam’s razor S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY the simplest solution is usually best. simple is always better than the opposite.
  • 320. appropriate form UX D occam’s razor S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY the simplest solution is usually best. simple is always better than the opposite.
  • 321. appropriate form UX D occam’s razor S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY the simplest solution is usually best. simple is always better than the opposite.
  • 322. appropriate form S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D
  • 323. appropriate form UX D progressive disclosure S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY
  • 324. appropriate form UX D progressive disclosure S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY information presented to a person who isn’t interested – or ready to process it – is noise.
  • 325. appropriate form UX D progressive disclosure S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY information presented to a person who isn’t interested – or ready to process it – is noise. only necessary or requested information is displayed at any given time.
  • 326. appropriate form UX D progressive disclosure S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY information presented to a person who isn’t interested – or ready to process it – is noise. only necessary or requested information is displayed at any given time. helps people manage complexity.
  • 327. appropriate form UX D progressive disclosure S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY information presented to a person who isn’t interested – or ready to process it – is noise. only necessary or requested information is displayed at any given time. helps people manage complexity.
  • 328. appropriate form UX D progressive disclosure S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY information presented to a person who isn’t interested – or ready to process it – is noise. only necessary or requested information is displayed at any given time. helps people manage complexity.
  • 329. appropriate form S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D
  • 330. appropriate form S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D hick’s law
  • 331. appropriate form S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D hick’s law every additional choice increases the time required to make a decision.
  • 332. appropriate form S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D hick’s law every additional choice increases the time required to make a decision. the more choice you give people, the easier it is to choose nothing.
  • 333. appropriate form S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D hick’s law every additional choice increases the time required to make a decision. the more choice you give people, the easier it is to choose nothing. In the era of infinite choice, people need better filters!
  • 334. appropriate form S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D hick’s law every additional choice increases the time required to make a decision. the more choice you give people, the easier it is to choose nothing. In the era of infinite choice, people need better filters!
  • 335. appropriate form S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D hick’s law every additional choice increases the time required to make a decision. the more choice you give people, the easier it is to choose nothing. In the era of infinite choice, people need better filters!
  • 336. appropriate form S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D hick’s law every additional choice increases the time required to make a decision. the more choice you give people, the easier it is to choose nothing. In the era of infinite choice, people need better filters!
  • 337. appropriate form S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D hick’s law every additional choice increases the time required to make a decision. the more choice you give people, the easier it is to choose nothing. In the era of infinite choice, people need better filters!
  • 338. appropriate form S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D hick’s law every additional choice increases the time required to make a decision. the more choice you give people, the easier it is to choose nothing. In the era of infinite choice, people need better filters!
  • 339. UX D S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY
  • 340. wireframes S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D
  • 341. wireframes S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D what’s a wireframe?
  • 342. wireframes S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D what’s a wireframe? a wireframe is a skeleton of a screen. 
  • 343. wireframes S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D what’s a wireframe? a wireframe is a skeleton of a screen.  it shows priority and the organization of things on the screen.
  • 344. wireframes S U R FA C E SKELETON UX D what’s a wireframe? a wireframe is a skeleton of a screen.  it shows priority and the organization of things on the screen. it details how users will get to other parts of the site or app.  STRUCTURE SCOPE S T R AT E GY
  • 345. wireframes S U R FA C E SKELETON UX D what’s a wireframe? a wireframe is a skeleton of a screen.  it shows priority and the organization of things on the screen. it details how users will get to other parts of the site or app.  STRUCTURE SCOPE S T R AT E GY wireframes reflect the designer's ideas about:
  • 346. wireframes S U R FA C E SKELETON UX D what’s a wireframe? a wireframe is a skeleton of a screen.  it shows priority and the organization of things on the screen. it details how users will get to other parts of the site or app.  STRUCTURE wireframes reflect the designer's ideas about: ➡ placement of elements on the page SCOPE S T R AT E GY
  • 347. wireframes S U R FA C E SKELETON UX D what’s a wireframe? a wireframe is a skeleton of a screen.  it shows priority and the organization of things on the screen. it details how users will get to other parts of the site or app.  STRUCTURE wireframes reflect the designer's ideas about: ➡ placement of elements on the page SCOPE S T R AT E GY ➡ labeling of those elements
  • 348. wireframes S U R FA C E SKELETON UX D what’s a wireframe? a wireframe is a skeleton of a screen.  it shows priority and the organization of things on the screen. it details how users will get to other parts of the site or app.  STRUCTURE wireframes reflect the designer's ideas about: ➡ placement of elements on the page SCOPE S T R AT E GY ➡ labeling of those elements ➡ navigation
  • 349. wireframes S U R FA C E SKELETON UX D what’s a wireframe? a wireframe is a skeleton of a screen.  it shows priority and the organization of things on the screen. it details how users will get to other parts of the site or app.  STRUCTURE wireframes reflect the designer's ideas about: ➡ placement of elements on the page SCOPE S T R AT E GY ➡ labeling of those elements ➡ navigation ➡ functionality, behavior and feedback
  • 350. wireframes S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D
  • 351. wireframes S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D wireframes vary in their level of detail
  • 352. wireframes S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D wireframes vary in their level of detail
  • 353. wireframes S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D wireframes vary in their level of detail
  • 354. wireframes S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D wireframes vary in their level of detail
  • 355. wireframes S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D
  • 356. wireframes UX D wireframes don’t show S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY
  • 357. wireframes UX D wireframes don’t show S U R FA C E ➡ colors SKELETON STRUCTURE SCOPE S T R AT E GY
  • 358. wireframes UX D wireframes don’t show S U R FA C E ➡ colors SKELETON STRUCTURE SCOPE S T R AT E GY ➡ typography
  • 359. wireframes UX D wireframes don’t show S U R FA C E ➡ colors SKELETON STRUCTURE SCOPE S T R AT E GY ➡ typography ➡ images
  • 360. wireframes UX D wireframes don’t show S U R FA C E ➡ colors SKELETON STRUCTURE SCOPE S T R AT E GY ➡ typography ➡ images ➡ visual style of any kind
  • 361. UX D S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY
  • 362. so why bother with wireframes? S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D
  • 363. so why bother with wireframes? design has to consider: S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D
  • 364. so why bother with wireframes? design has to consider: S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY ➡ how each screen fits in with the site/app/system as a whole UX D
  • 365. so why bother with wireframes? design has to consider: S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY ➡ how each screen fits in with the site/app/system as a whole ➡ what content, links, and interactions are needed to meet both user and business goals UX D
  • 366. so why bother with wireframes? design has to consider: S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY ➡ how each screen fits in with the site/app/system as a whole ➡ what content, links, and interactions are needed to meet both user and business goals ➡ how all of these elements relate to each other UX D
  • 367. so why bother with wireframes? design has to consider: S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY ➡ how each screen fits in with the site/app/system as a whole ➡ what content, links, and interactions are needed to meet both user and business goals ➡ how all of these elements relate to each other UX D
  • 368. UX D S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY
  • 369. what wireframes tell us S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D
  • 370. what wireframes tell us what to look for S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D
  • 371. what wireframes tell us what to look for S U R FA C E ➡ what content will be included SKELETON STRUCTURE SCOPE S T R AT E GY UX D
  • 372. what wireframes tell us what to look for S U R FA C E ➡ what content will be included SKELETON STRUCTURE SCOPE S T R AT E GY ➡ how the content is organized UX D
  • 373. what wireframes tell us what to look for S U R FA C E ➡ what content will be included SKELETON STRUCTURE SCOPE S T R AT E GY ➡ how the content is organized ➡ which content is most important UX D
  • 374. what wireframes tell us what to look for S U R FA C E ➡ what content will be included SKELETON STRUCTURE SCOPE S T R AT E GY ➡ how the content is organized ➡ which content is most important ➡ a given screen’s location in the system UX D
  • 375. what wireframes tell us UX D what to look for S U R FA C E ➡ what content will be included SKELETON STRUCTURE SCOPE ➡ how the content is organized ➡ which content is most important ➡ a given screen’s location in the system ➡ where users can go and what they can do S T R AT E GY
  • 376. what wireframes tell us UX D what to look for S U R FA C E ➡ what content will be included SKELETON STRUCTURE SCOPE ➡ how the content is organized ➡ which content is most important ➡ a given screen’s location in the system ➡ where users can go and what they can do S T R AT E GY ➡ how users will move around the system
  • 377. UX D S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY
  • 378. the wireframing process S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D
  • 379. the wireframing process 1. revisit needs and goals S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D
  • 380. the wireframing process 1. revisit needs and goals S U R FA C E ➡ why is this valuable to my intended user? SKELETON STRUCTURE SCOPE S T R AT E GY UX D
  • 381. the wireframing process 1. revisit needs and goals S U R FA C E ➡ why is this valuable to my intended user? SKELETON STRUCTURE SCOPE S T R AT E GY ➡ what can it do to make their life better? UX D
  • 382. the wireframing process 1. revisit needs and goals S U R FA C E ➡ why is this valuable to my intended user? SKELETON STRUCTURE SCOPE S T R AT E GY ➡ what can it do to make their life better? ➡ how can I make it easier for them to act? UX D
  • 383. the wireframing process UX D 1. revisit needs and goals S U R FA C E ➡ why is this valuable to my intended user? SKELETON ➡ what can it do to make their life better? STRUCTURE ➡ how can I make it easier for them to act? SCOPE ➡ what actions are most valuable on each screen? across the entire system? S T R AT E GY
  • 384. the wireframing process UX D 1. revisit needs and goals S U R FA C E ➡ why is this valuable to my intended user? SKELETON ➡ what can it do to make their life better? STRUCTURE ➡ how can I make it easier for them to act? SCOPE ➡ what actions are most valuable on each screen? across the entire system? S T R AT E GY ➡ how can I measure the impact of this action?
  • 385. the wireframing process S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D
  • 386. the wireframing process 2. establish cores and paths S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D
  • 387. the wireframing process 2. establish cores and paths S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY cores are the primary pieces of content and functionality you want users to see and interact with. UX D
  • 388. the wireframing process 2. establish cores and paths S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY cores are the primary pieces of content and functionality you want users to see and interact with. users take paths to enter and leave each screen. UX D
  • 389. the wireframing process 2. establish cores and paths S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY cores are the primary pieces of content and functionality you want users to see and interact with. users take paths to enter and leave each screen. the goal is to prioritize content on the screen, and delineate clear “paths” for people to get to and from each screen. UX D
  • 390. the wireframing process 2. establish cores and paths S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY cores are the primary pieces of content and functionality you want users to see and interact with. users take paths to enter and leave each screen. the goal is to prioritize content on the screen, and delineate clear “paths” for people to get to and from each screen. UX D
  • 391. the wireframing process 2. establish cores and paths S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY cores are the primary pieces of content and functionality you want users to see and interact with. users take paths to enter and leave each screen. the goal is to prioritize content on the screen, and delineate clear “paths” for people to get to and from each screen. UX D
  • 392. the wireframing process 2. establish cores and paths S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY cores are the primary pieces of content and functionality you want users to see and interact with. users take paths to enter and leave each screen. the goal is to prioritize content on the screen, and delineate clear “paths” for people to get to and from each screen. UX D
  • 393. the wireframing process 2. establish cores and paths S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY cores are the primary pieces of content and functionality you want users to see and interact with. users take paths to enter and leave each screen. the goal is to prioritize content on the screen, and delineate clear “paths” for people to get to and from each screen. UX D
  • 394. the wireframing process 2. establish cores and paths S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY cores are the primary pieces of content and functionality you want users to see and interact with. users take paths to enter and leave each screen. the goal is to prioritize content on the screen, and delineate clear “paths” for people to get to and from each screen. UX D
  • 395. the wireframing process 2. establish cores and paths S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY cores are the primary pieces of content and functionality you want users to see and interact with. users take paths to enter and leave each screen. the goal is to prioritize content on the screen, and delineate clear “paths” for people to get to and from each screen. UX D
  • 396. the wireframing process S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D
  • 397. the wireframing process 3. start sketching! S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D
  • 398. the wireframing process UX D 3. start sketching! S U R FA C E you’ll be tempted to skip this phase. DON’T. SKELETON STRUCTURE SCOPE S T R AT E GY
  • 399. the wireframing process UX D 3. start sketching! S U R FA C E you’ll be tempted to skip this phase. DON’T. SKELETON STRUCTURE SCOPE S T R AT E GY ➡ quickly generate thumbnail sketches
  • 400. the wireframing process UX D 3. start sketching! S U R FA C E you’ll be tempted to skip this phase. DON’T. SKELETON STRUCTURE ➡ quickly generate thumbnail sketches ➡ goal is to get down several decent ideas of what the screen(s) should look like SCOPE S T R AT E GY
  • 401. the wireframing process UX D 3. start sketching! S U R FA C E you’ll be tempted to skip this phase. DON’T. SKELETON STRUCTURE ➡ quickly generate thumbnail sketches ➡ goal is to get down several decent ideas of what the screen(s) should look like SCOPE S T R AT E GY ➡ don’t think about usability or information hierarchy – just get as many different ideas out of your head as possible.
  • 402. the wireframing process UX D 3. start sketching! S U R FA C E you’ll be tempted to skip this phase. DON’T. SKELETON STRUCTURE ➡ quickly generate thumbnail sketches ➡ goal is to get down several decent ideas of what the screen(s) should look like SCOPE S T R AT E GY ➡ don’t think about usability or information hierarchy – just get as many different ideas out of your head as possible.
  • 403. the wireframing process S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D
  • 404. the wireframing process 4. rapid prototyping S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D
  • 405. the wireframing process 4. rapid prototyping S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY first, find a tool that works for you: visio, omnigraffle, balsamiq, axure, etc. UX D
  • 406. the wireframing process UX D 4. rapid prototyping S U R FA C E SKELETON first, find a tool that works for you: visio, omnigraffle, balsamiq, axure, etc. DON’T use powerpoint, illustrator, indesign, etc. STRUCTURE SCOPE S T R AT E GY
  • 407. the wireframing process UX D 4. rapid prototyping S U R FA C E SKELETON first, find a tool that works for you: visio, omnigraffle, balsamiq, axure, etc. DON’T use powerpoint, illustrator, indesign, etc. STRUCTURE SCOPE S T R AT E GY try not to use “lorem ipsum” text – content is just as important to the design as button placement and navigational elements. remember that what you’re creating is not final design (or anything close to it).
  • 408. UX D S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY
  • 409. reviewing wireframes S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D
  • 410. reviewing wireframes questions to ask S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D
  • 411. reviewing wireframes questions to ask S U R FA C E ➡ is anything important missing? SKELETON STRUCTURE SCOPE S T R AT E GY UX D
  • 412. reviewing wireframes UX D questions to ask S U R FA C E ➡ is anything important missing? SKELETON STRUCTURE SCOPE S T R AT E GY ➡ is the most important content noticed first?
  • 413. reviewing wireframes UX D questions to ask S U R FA C E ➡ is anything important missing? SKELETON STRUCTURE SCOPE S T R AT E GY ➡ is the most important content noticed first? ➡ is there anything that shouldn't be here?
  • 414. reviewing wireframes UX D questions to ask S U R FA C E ➡ is anything important missing? SKELETON STRUCTURE SCOPE S T R AT E GY ➡ is the most important content noticed first? ➡ is there anything that shouldn't be here? ➡ which content is related and how?
  • 415. reviewing wireframes UX D questions to ask S U R FA C E ➡ is anything important missing? SKELETON STRUCTURE SCOPE S T R AT E GY ➡ is the most important content noticed first? ➡ is there anything that shouldn't be here? ➡ which content is related and how? ➡ can you get to all of the major areas from here? should you be able to?
  • 416. reviewing wireframes questions to ask S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D
  • 417. reviewing wireframes questions to ask S U R FA C E ➡ do all of the labels make sense? SKELETON STRUCTURE SCOPE S T R AT E GY UX D
  • 418. reviewing wireframes questions to ask S U R FA C E ➡ do all of the labels make sense? SKELETON STRUCTURE SCOPE S T R AT E GY ➡ do you know what all of the elements are? UX D
  • 419. reviewing wireframes questions to ask S U R FA C E ➡ do all of the labels make sense? SKELETON STRUCTURE SCOPE S T R AT E GY ➡ do you know what all of the elements are? ➡ is the purpose of each element clear? UX D
  • 420. reviewing wireframes UX D questions to ask S U R FA C E ➡ do all of the labels make sense? SKELETON ➡ do you know what all of the elements are? STRUCTURE ➡ is the purpose of each element clear? SCOPE ➡ does the flow of tasks or information match the user’s need or expectation? S T R AT E GY
  • 421. reviewing wireframes UX D questions to ask S U R FA C E ➡ do all of the labels make sense? SKELETON ➡ do you know what all of the elements are? STRUCTURE ➡ is the purpose of each element clear? SCOPE ➡ does the flow of tasks or information match the user’s need or expectation? S T R AT E GY ➡ are additional features or functions needed?
  • 422. UX D S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY
  • 423. skeleton takeaways S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY things to remember UX D
  • 424. skeleton takeaways S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D things to remember the skeleton plane is created through interface design, which provides users with the ability to do things, and navigation design, which provides users with the ability to go places.
  • 425. skeleton takeaways S U R FA C E SKELETON UX D things to remember the skeleton plane is created through interface design, which provides users with the ability to do things, and navigation design, which provides users with the ability to go places. STRUCTURE SCOPE S T R AT E GY good interface design uses progressive disclosure to maximize signal and minimize noise.
  • 426. skeleton takeaways S U R FA C E SKELETON UX D things to remember the skeleton plane is created through interface design, which provides users with the ability to do things, and navigation design, which provides users with the ability to go places. STRUCTURE SCOPE S T R AT E GY good interface design uses progressive disclosure to maximize signal and minimize noise. a product with a poorly designed interface won’t be used – no matter how technically superior the code is or how deep its functionality may be.
  • 427. UX D S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY things to remember
  • 428. skeleton takeaways S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY things to remember UX D
  • 429. skeleton takeaways S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D things to remember good navigation design reveals the depth of site content, provides a sense of place and allows users to predict the outcome of an interaction.
  • 430. skeleton takeaways S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D things to remember good navigation design reveals the depth of site content, provides a sense of place and allows users to predict the outcome of an interaction. good information design is the glue that holds things together – supporting the goals of both user and creator.
  • 431. skeleton takeaways S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D things to remember good navigation design reveals the depth of site content, provides a sense of place and allows users to predict the outcome of an interaction. good information design is the glue that holds things together – supporting the goals of both user and creator. the only time you should deviate from wellestablished conventions is when there’s a clear, obvious benefit to doing so.
  • 432. UX D S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY
  • 433. skeleton exercise S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D
  • 434. skeleton exercise labeling for navigation S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D
  • 435. skeleton exercise labeling for navigation S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY Find a website of a large, complex organization, such as a news site or a university website. UX D
  • 436. skeleton exercise labeling for navigation S U R FA C E Find a website of a large, complex organization, such as a news site or a university website. SKELETON STRUCTURE SCOPE S T R AT E GY Find an example of particularly good or bad labeling within the main menu system. UX D
  • 437. skeleton exercise labeling for navigation S U R FA C E Find a website of a large, complex organization, such as a news site or a university website. SKELETON STRUCTURE SCOPE S T R AT E GY Find an example of particularly good or bad labeling within the main menu system. For example, the sub-navigation within a specific category. UX D
  • 438. skeleton exercise S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D
  • 439. skeleton exercise consider the following: S U R FA C E SKELETON STRUCTURE SCOPE S T R AT E GY UX D
  • 440. skeleton exercise UX D consider the following: S U R FA C E ➡ are the words chosen for the labels meaningful? SKELETON STRUCTURE SCOPE S T R AT E GY
  • 441. skeleton exercise UX D consider the following: S U R FA C E ➡ are the words chosen for the labels meaningful? SKELETON STRUCTURE SCOPE S T R AT E GY ➡ are they distinct from one another?
  • 442. skeleton exercise UX D consider the following: S U R FA C E ➡ are the words chosen for the labels meaningful? SKELETON STRUCTURE SCOPE S T R AT E GY ➡ are they distinct from one another? ➡ can you predict and remember which labels are under which top-level category?
  • 443. skeleton exercise UX D consider the following: S U R FA C E ➡ are the words chosen for the labels meaningful? SKELETON STRUCTURE SCOPE S T R AT E GY ➡ are they distinct from one another? ➡ can you predict and remember which labels are under which top-level category? ➡ can you tell where you are in the hierarchy when you are several levels down?
  • 444. skeleton exercise UX D consider the following: S U R FA C E ➡ are the words chosen for the labels meaningful? SKELETON STRUCTURE SCOPE S T R AT E GY ➡ are they distinct from one another? ➡ can you predict and remember which labels are under which top-level category? ➡ can you tell where you are in the hierarchy when you are several levels down? ➡ do the navigation labels also serve as page titles?
  • 445. skeleton exercise UX D consider the following: S U R FA C E ➡ are the words chosen for the labels meaningful? SKELETON STRUCTURE SCOPE S T R AT E GY ➡ are they distinct from one another? ➡ can you predict and remember which labels are under which top-level category? ➡ can you tell where you are in the hierarchy when you are several levels down? ➡ do the navigation labels also serve as page titles? ➡ if not, should they?