Design Anti Patterns - How to Design a Poor Web Experience
-
Upload
bill-scott -
Category
Design
-
view
38.125 -
download
4
description
Transcript of Design Anti Patterns - How to Design a Poor Web Experience
![Page 1: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/1.jpg)
When Designers Get Too CleverAnti-Patterns: Avoiding the Traps of Bad Design
Bill ScottDirector, UI Engineering
![Page 2: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/2.jpg)
background
![Page 3: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/3.jpg)
![Page 4: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/4.jpg)
7,500,000Netflix subscribers
55,000,000DVDs in inventory
90,000 DVD titles
1.8 million shipped on average daily
95% of inventory shipped each quarter
7,000 Instant Watching titles
2 billion+user ratings
2 millionmovies rated daily by users
100+shipping points
![Page 5: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/5.jpg)
The traps of bad design: anti-patternswhat are anti-patterns?
“Anti-patterns, also called pitfalls, are classes of commonly-reinvented bad solutions to problems. They are studied as a category so they can be avoided in the future, and so instances of them may be recognized when investigating non-working systems. The term originates in computer science, apparently inspired by the Gang of Four's book Design Patterns, which displayed examples of high-quality programming methods.” - Wikipedia, Anti-Pattern.
interaction design anti-patternsLike the software anti-pattern counterparts, the following anti-patterns are common pitfalls to avoid.
pitfalls with a pithy name
![Page 6: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/6.jpg)
anti-patterns
big ball of mud. meandering way. borg idiom. tiny targets. mystery meat.
buried treasure. hover and cover. pogo stick navigation. novel notions.
against the flow. metaphor mismatch. jabberwocky. double duty. linkitus. blind type.
windows aplenty. animation gone wild. misguided misdirections. unmarked hazards. missed
moments. missing scene. one at a time. non-symmetrical actions.
Note: anti-patterns denoted in bold are discussed in this talk.
![Page 7: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/7.jpg)
anti-pattern. meandering waysummaryNormal flow through the page takes the user on a meandering journey with the mouse.
alternate nameszig-zag interaction, scenic route
exampleActions hidden under hover (in context tools) that require the user to hover an area, then move the mouse to an area that would normally be outside the object’s space (back and forth operation)
![Page 8: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/8.jpg)
anti-pattern. meandering wayY! Teachers (first version)
Hover revealed extra tools
Required lots of mousezig zag to delete an item
And overshooting as you move across (eye zig zag)
![Page 9: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/9.jpg)
anti-pattern. meandering wayY! Teachers (first version)
Hover revealed extra tools
Required lots of mousezig zag to delete an item
And overshooting as you move across (eye zig zag)
![Page 10: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/10.jpg)
anti-pattern. meandering wayY! Teachers (first version)
Hover revealed extra tools
Required lots of mousezig zag to delete an item
And overshooting as you move across (eye zig zag)
copydelete
preview
title stuff that runs long
![Page 11: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/11.jpg)
anti-pattern. meandering wayY! Teachers (first version)
Hover revealed extra tools
Required lots of mousezig zag to delete an item
And overshooting as you move across (eye zig zag)
copydelete
preview
title stuff that runs long
![Page 12: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/12.jpg)
anti-pattern. meandering wayY! Teacher’s Redesign
Solution
Reveal hidden tools on hoverPlay on spatial memory
Avoid popupAvoid page jitter
![Page 13: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/13.jpg)
anti-pattern. meandering wayY! Teacher’s Redesign
Solution
Reveal hidden tools on hoverPlay on spatial memory
Avoid popupAvoid page jitter
![Page 14: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/14.jpg)
![Page 15: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/15.jpg)
![Page 16: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/16.jpg)
anti-pattern. meandering wayNightmare of endless meandering
Drawing flow arrows is a great way to visualize a flowRefactoring can follow
![Page 17: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/17.jpg)
refactoring. meandering wayAnnotate the current flow. Think of flow arrows as a way to debug an interaction
Draw the ideal flow. Display only elements needed for each interactionWill clarify important interactions
Watch out for hovers. In-context tools should require minimal mouse effortAvoid fly-outsAvoid page jitter
Follow spatial consistency. Play off of user’s spatial memory.
![Page 18: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/18.jpg)
anti-pattern. pogo stick navigationsummaryRequiring the user to go down a level or two, perform an operation, come back to the top and then have to go back down again. Name comes from hopping up and down through the site.
creditJared Spool
![Page 19: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/19.jpg)
Netflix. Older version of add to queue
anti-pattern. pogo stick navigation
![Page 20: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/20.jpg)
anti-pattern. pogo stick navigationNetflix. Newer version of add to queue
SolutionEncapsulate alternate click stream in an overlay
![Page 21: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/21.jpg)
anti-pattern. pogo stick navigationNetflix. Newer version of add to queue
SolutionEncapsulate alternate click stream in an overlay
![Page 22: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/22.jpg)
anti-pattern. pogo stick navigationNetflix. Newer version of add to queue
SolutionEncapsulate alternate click stream in an overlay
![Page 23: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/23.jpg)
anti-pattern. pogo stick navigationNetflix. Newer version of add to queue
SolutionEncapsulate alternate click stream in an overlay
![Page 24: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/24.jpg)
Y! Teachers
anti-pattern. pogo stick navigation
No obvious close for overlay
Back Button goes to wrong place
![Page 25: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/25.jpg)
refactoring. pogo stickDraw flow arrows between pages to catch the zig-zag bouncing from page to page (see Meandering Way).
To avoid pogo effect:- Use in-context tools to bring actions into the current page- Use hover details to reveal information in context- Use overlays for encapsulating an alternate navigation path to allow temporary exploration without losing the original context of navigation- Use in page actions like inline editing, etc. to provide functionality inline.- Use in-context expands to reveal information on the page.
Watch out for overlaysCan make users resort to back button anyway
![Page 26: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/26.jpg)
anti-pattern. tiny targetssummaryMaking key interaction points too small increases the likelihood that users will be frustrated with the interface.
Fitts’ lawThe time to acquire a target is a function of the distance to and size of the target.
examplesdivots for expand/collapse
![Page 27: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/27.jpg)
anti-pattern. tiny targetsThe identity card area has a summary view and an expanded view.
Divot for expand/collapse is hiddenShown on picture hover only
Divot is small (8x8)
![Page 28: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/28.jpg)
anti-pattern. tiny targetsAmbiguity in targetingIs it just the divot? Or anywhere in the title?
SolutionsLarger target, to the upper rightOr spell it out
![Page 29: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/29.jpg)
anti-pattern. tiny targetsAmbiguity in targetingIs it just the divot? Or anywhere in the title?
SolutionsLarger target, to the upper rightOr spell it out
![Page 30: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/30.jpg)
anti-pattern. tiny targetsAmbiguity in targetingIs it just the divot? Or anywhere in the title?
(hide details)
SolutionsLarger target, to the upper rightOr spell it out
![Page 31: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/31.jpg)
anti-pattern. tiny targetsThe Yahoo! Gobbler has done well in tests due to the larger nature of the project drop targets.
Issue: small text drag target
![Page 32: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/32.jpg)
anti-pattern. tiny targetsThe Yahoo! Gobbler has done well in tests due to the larger nature of the project drop targets.
Issue: small text drag target
![Page 33: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/33.jpg)
anti-pattern. tiny targetsApple iPhone keyboard
![Page 34: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/34.jpg)
anti-pattern. tiny targetsApple iPhone keyboard
iPhone has revolutionary dynamic target sizing
![Page 35: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/35.jpg)
anti-pattern. tiny targetsApple iPhone keyboard
apple web site has the play controls as an
8 x 8pixel target!
iPhone has revolutionary dynamic target sizing
![Page 36: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/36.jpg)
strategies. tiny targetsActivation targets and important commands need to be large enough, visually distinct and in proximity to operation.
Use in-context tools to support proximity.
Use “Call to Action” style buttons for most important operations.
If titles will expand/collapse, at least use hyperlink underline when hover happens to provide a bigger target.
Never use 8x8 for targeting
![Page 37: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/37.jpg)
anti-pattern. hover & coversummaryHover reveal of information and actions has become more and more popular. Hover & Cover is when the hover actually hides important contextual information around the object or gets in the way of other actions.
![Page 38: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/38.jpg)
anti-pattern. hover & coverOriginal hover was extremely annoying as itCovered the item to the right (natural flow is left to right)Partially covers text edit area (bug: sticks open)
![Page 39: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/39.jpg)
anti-pattern. hover & coverOriginal hover was extremely annoying as itCovered the item to the right (natural flow is left to right)Partially covers text edit area (bug: sticks open)
![Page 40: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/40.jpg)
anti-pattern. hover & coverplum.com. Drop down menu on hover gets in the way. Accidentally opens.
![Page 41: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/41.jpg)
anti-pattern. hover & coverYahoo! Local originally had this hover beast.
Thankfully it no longer functions this way :-)
![Page 42: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/42.jpg)
anti-pattern. hover & coverThis one almost leads to a new anti-pattern-- hover madness
Seriously what were they thinking?
![Page 43: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/43.jpg)
refactoring. hover & coverUse click for tools that will cover context
![Page 44: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/44.jpg)
refactoring. hover & coverUse click for tools that will cover context
![Page 45: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/45.jpg)
refactoring. hover & coverReserve same space for both hovered and non-hovered state
For hover details, allow a slight delay before activation
For hover details don’t cover important context.
For in-context tools, show immediately and hide immediately
![Page 46: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/46.jpg)
refactoring. hover & coverReserve same space for both hovered and non-hovered state
For hover details, allow a slight delay before activation
For hover details don’t cover important context.
For in-context tools, show immediately and hide immediately
![Page 47: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/47.jpg)
refactoring. hover & coverReserve same space for both hovered and non-hovered state
For hover details, allow a slight delay before activation
For hover details don’t cover important context.
For in-context tools, show immediately and hide immediately
![Page 48: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/48.jpg)
anti-pattern. borg idiomsummaryNot all idioms play well together. Some idioms are more powerful than others. For example, tree controls, drag and drop, selection mechanisms all set up an “interaction theme”.
Just like visual styles need to be consistent, interaction styles also need to be consistent throughout the entirety of the interface
Borg Idiom is the phenomenon of an idiom (once adopted) assimilating the rest of the interface. Sometimes the assimilation is just the fact that one idiom dominates due to the way the interface clues the user to their presence.
![Page 49: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/49.jpg)
anti-pattern. borg idiomHere was an early attempt on Yahoo! Bookmarks to blend drag and drop with item selection (checkbox idiom). It has odd side effects during the interaction.
![Page 50: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/50.jpg)
anti-pattern. borg idiomHere was an early attempt on Yahoo! Bookmarks to blend drag and drop with item selection (checkbox idiom). It has odd side effects during the interaction.
In Yahoo! Photos (no longer available) drag selection was implemented well. One issue was the page metaphor + drag selection + a tray idiom.
![Page 51: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/51.jpg)
anti-pattern. borg idiomThree idioms living in parallel with each other. The old style overwhelms the other two.
![Page 52: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/52.jpg)
anti-pattern. borg idiomThree idioms living in parallel with each other. The old style overwhelms the other two.
![Page 53: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/53.jpg)
anti-pattern. borg idiomThree idioms living in parallel with each other. The old style overwhelms the other two.
![Page 54: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/54.jpg)
anti-pattern. borg idiomNetflix recently added drag/drop to their movie queue.
Notice they were able to mix two idioms without one taking over from the other.
![Page 55: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/55.jpg)
anti-pattern. borg idiomTwo approaches. Object selection (highlight idiom). Item selection (checkbox idiom). Is it possible to marry the two?
![Page 56: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/56.jpg)
anti-pattern. borg idiomTwo approaches. Object selection (highlight idiom). Item selection (checkbox idiom). Is it possible to marry the two?
![Page 57: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/57.jpg)
anti-pattern. borg idiomCurrent Yahoo! Mail successfully married the two interaction idioms. It did it in a way that you can use either idiom as both have their advantages.
![Page 58: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/58.jpg)
refactoring. borg idiomFor content-oriented rich sites, avoid becoming control-heavy. Stay away from the tree control and other strong desktop style controls.
Make your content interactive, thus making the content the control.
Before adding any interaction style, make sure it will scale across all know parts of your interface.
Watch out when mixing drag and drop with checkbox style selection.
Avoid mixing selection styles.
![Page 59: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/59.jpg)
anti-pattern. novel notionsummaryCreating a new interface for a common idiom that is more confusing than the original. Sometimes it is just misusing a component for a new purpose.
examplesUsing drag and drop for simple attribute setting; using odd navigation schemes for some supposed effect
![Page 60: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/60.jpg)
anti-pattern. novel notionThis is just bizarre. Especially the “Search Jobs” link. And it plays music ;-)
![Page 61: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/61.jpg)
anti-pattern. novel notion
anti-pattern. name.
This is just bizarre. Especially the “Search Jobs” link. And it plays music ;-)
![Page 62: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/62.jpg)
anti-pattern. novel notionThis guy won an award! Look it’s just marking stuff as ‘favorite’.
![Page 63: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/63.jpg)
anti-pattern. novel notionThis guy won an award! Look it’s just marking stuff as ‘favorite’.
And this is yet another novel approach to favorites
![Page 64: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/64.jpg)
anti-pattern. novel notionThis guy won an award! Look it’s just marking stuff as ‘favorite’.
Already solved.
And this is yet another novel approach to favorites
![Page 65: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/65.jpg)
anti-pattern. novel notionnovel approach to putting candy in a box... how about drag and drop?
![Page 66: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/66.jpg)
anti-pattern. novel notionYahoo! Photos (going away) tried a novel approach to selection. It involved the new concept of a “tray” for holding temporarily selected items.
Technically perfect. But design-wise misguided. Created two targets for commands: selected items and items in the tray.
As a result the menu commands were duplicated for the tray and for the current selection. Confusing.
![Page 67: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/67.jpg)
![Page 68: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/68.jpg)
refactoring. novel notionUnderstand the purpose of each type of component- Carousels do not replace scrolled lists- Drag and drop is not for single attribute setting
Don’t construct an artificial interface to support an idiom (don’t create the house for the nail)
A novel approach will work if it is intuitive (but what is intuitive?)
If you think you need something never created before, think twice about it
![Page 69: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/69.jpg)
anti-pattern. linkitussummaryThe syndrome of having no idea where a link will lead you. could be an in page action, could reveal information, could take you to new page, could popup something, could engage on hover. Can also be aggravated by inconsistent use of links on the same page.
examplesyahoo.com inconsistent use of links on main page, teachers.yahoo.com around id card
![Page 70: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/70.jpg)
anti-pattern. linkitusOn the home page, there are three kinds of links:- Reveal other content in context- Take you to the article- Expose area (hover to reveal, click to go to tool)
![Page 71: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/71.jpg)
anti-pattern. linkitusBizarre use of links. Hover reveals information. Click does nothing.
Very close to being a candidate for Novel Notions.
![Page 72: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/72.jpg)
![Page 73: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/73.jpg)
![Page 74: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/74.jpg)
anti-pattern. windows aplentysummaryThe practice of throwing up unnecessary idiot boxes.So many reasons this is just wrong...
![Page 75: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/75.jpg)
anti-pattern. animation gone wildsummaryAnimation effects that become the central focus instead of being part of reinforcing a message.
examplesamazon carousel, tab animation, (stuff from transition talk)
![Page 76: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/76.jpg)
anti-pattern. animation gone wildWhy the extra little slide in?
![Page 77: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/77.jpg)
anti-pattern. animation gone wildanimated menus... so 90’s
![Page 78: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/78.jpg)
anti-pattern. animation gone wildtoo many things animating on hover
![Page 79: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/79.jpg)
anti-pattern. animation gone wildWow! What more can I say?
Seems to be either a pixel at a time or going so fast you can’t use it
![Page 80: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/80.jpg)
anti-pattern. animation gone wildMore from the gratuitous animation department...
![Page 81: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/81.jpg)
anti-pattern. animation gone wildNot sure how much animation does for a tab control -- tab-o-sel?Candidate for Novel Notions
![Page 82: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/82.jpg)
anti-pattern. animation gone wildthe stalker pattern. can also see an example from Netflix community.
![Page 83: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/83.jpg)
anti-pattern. animation gone wildthe stalker pattern. can also see an example from Netflix community.
![Page 84: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/84.jpg)
anti-pattern. animation gone wildthe stalker pattern. can also see an example from Netflix community.
![Page 85: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/85.jpg)
anti-pattern. gratuitus animation
![Page 86: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/86.jpg)
anti-pattern. gratuitus animation
anti-pattern. name.
![Page 87: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/87.jpg)
anti-pattern. gratuitus animation
![Page 88: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/88.jpg)
anti-pattern. gratuitus animation
anti-pattern. name.
![Page 89: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/89.jpg)
refactoring. animation gone wildTransitions should mean something. They communicate.
Understand the hierarchy of transition communicationRapid movementRapid color changeSlow movementSlow color change
If you are refactoring a wild interface, simply turn off all animations and start by communicating fully without it, then add it back in one at a time.
![Page 90: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/90.jpg)
anti-pattern. missed momentssummaryNot providing feedback throughout an interaction. These missed moments can confuse the user about what to do.
examplesDrag and drop is classic example.
solutionsUse interesting moments grid to think through each moment
![Page 91: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/91.jpg)
anti-pattern. missed moments
![Page 92: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/92.jpg)
anti-pattern. missed momentsno feedback during interaction... less “learnable”
![Page 93: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/93.jpg)
anti-pattern. missed moments
![Page 94: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/94.jpg)
anti-pattern. missed moments
![Page 95: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/95.jpg)
anti-pattern. missed momentsUsing Y! Photos as example again. Notice missing feedback at key point piles on the problems.
![Page 96: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/96.jpg)
anti-pattern. missed momentsTurns out that a number of events exist during drag and drop that we can use to our advantage.
![Page 97: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/97.jpg)
refactoring. missed momentsMap out all the interesting moments.Use the interaction matrix or other technique to map events to actors on the page.
Use the moments to communicate.Its the nuance that matters.
Think... "interactive directions"Moment-by-moment directions are the key. Users get lost easily
![Page 98: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/98.jpg)
anti-pattern. one at a timesummaryWhen you can only update small pieces of the interface instead of doing things in a group.
examplesbackpackit
![Page 99: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/99.jpg)
anti-pattern. one at a timeKey is what is the workflow? One at a time or mutiple operations allowed.
These kind of interfaces (in context tools) always present a problem for doing operations on multiple items.
![Page 100: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/100.jpg)
anti-pattern. one at a timeKey is what is the workflow? One at a time or mutiple operations allowed.
These kind of interfaces (in context tools) always present a problem for doing operations on multiple items.
![Page 101: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/101.jpg)
anti-pattern. one at a timeTakes one at a time check box to the extreme
![Page 102: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/102.jpg)
refactoring. one-at-a-timeThink about what happens when the data/information scalesIt affects space issues but also affects interaction density.
Think about doing multiple operations at onceBalance with immediacy
Watch out for in-context tools, in-page actionsThese give immediacy but also will trap you into not handling multiple items at once.
Don't forget about the lowly checkboxNot as sexy, but very serviceable.
![Page 103: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/103.jpg)
anti-patterns
big ball of mud. meandering way. borg idiom. tiny targets. mystery meat.
buried treasure. hover and cover. pogo stick navigation. novel notions.
against the flow. metaphor mismatch. jabberwocky. double duty. linkitus. blind type.
windows aplenty. animation gone wild. misguided misdirections. unmarked hazards. missed
moments. missing scene. one at a time. non-symmetrical actions.
![Page 104: Design Anti Patterns - How to Design a Poor Web Experience](https://reader037.fdocuments.us/reader037/viewer/2022103109/53f1cde98d7f72e94b8b4b58/html5/thumbnails/104.jpg)
my blog. looksgoodworkswell.comthis prez. billwscott.com/share/presentations/2008/webappsummit/my email. [email protected]
NETFLIX is hiring!
Visual/Interaction DesignersWeb Engineers