TexRx · February 4, 2015 19:04
diff --git a/So close yet so far away b/So close yet so far away
 # So close, yet so far away

 ##The setup
 Except for my obstinate 8-year old, people read from top to bottom; some left to right, others right to left. No one reads bottom to top. Well, maybe [Billy Crystal][1].

 [1]: http://www.goodreads.com/work/quotes/844335-when-harry-met-sally "When Harry Met Sally quotes"

 Web pages load with the topmost part of the page in view (linked anchor sections not withstanding). To view any [below-the-fold][2] content, you have to scroll down* . As you scroll down, the page content moves up into view.

 [2]: http://en.wiktionary.org/wiki/below_the_fold "Below the fold on Wikipedia"

 Yeah, so?

 I recently read an [article][3] that discusses the transition of a button into a modal dialog. The demo is intuitive and engaging, and I appreciate the natural, contextual clue of the morph transition. On desktop, and larger portable devices, everything is cool. However, on smaller devices (e.g., iPhone), an unfortunate, opaque, distracting undertone hovers over the clean, modern design. Take a minute to [interact with the demo][4], ideally on a smaller handheld device.

 [3]: http://codyhouse.co/gem/morphing-modal-window/ "Smashing Magazine - Morphing modal window in CSS and jQuery"
 [4]: http://codyhouse.co/demo/morphing-modal-window/index.html "Smashing Magazine - Morphing modal demo"

 ## Location, location, location
 I have issues with the location of modal dialog close button. On larger screens, the position of the close button is not an issue. On smaller handheld devices, it's distracting and ergonomically challenging. Hear me out.

 ###Issue 1
 When the modal dialog is visible, you see the modal content, and a modal close button positioned at the upper right of the dialog.

 ![Handheld screencast](https://dl.dropboxusercontent.com/u/242824/OneNorth/Articles/Assets/screencasts/MorphingModalWindow.gif "View of modal on handheld device")

 In the demo, there is a reasonable amount of dialog content, thus you must scroll down to view the rest. As you scroll the modal dialog, off-dialog content moves up to displace the viewable content. Also as you scroll, the upper right side of the content "underlaps" the round close button. As such, the last few characters of a few sentences are always obscured by the close button. This is jarring to the reading experience.

 #### Yeah, so?
 On smaller devices, the modal maximizes use of the viewable content area by utilizing minimal whitespace between the content and the edge of the dialog. Because the content is so close to the dialog edge, the close button must be semi-transparent to avoid completely obscuring the content. As an alternative, the design could have pushed the modal button far to the top right, while also making it a bit smaller, to minimize or eliminate the interference between the button and the content. Doing the former is questionable. Doing the latter should be unacceptable because of recommended minimum required touch sizes. But let's table issue 1 for a sec.

 ###Issue 2
 Placing the button at the top right corner of the screen places the close button in a hard-to-reach area of the screen. With one-handed use, stretching your thumb to the top right corner of the screen is tough. I have big hands, and it is often difficult for me to thumb-reach the top right corner of the screen on my iPhone 5S. It's difficult for right-handed people, and virtually impossible for left-handed people.

 #### Phones
 Based on human observation, most people hold their phone with their right-hand, and predominantly use their thumb to navigate their phone interface. Most phone usage emphasizes right-hand thumb usage. Even when two hands are used, the right hand index finger is used as a pointing device.

 ![Holding a phone](https://dl.dropboxusercontent.com/u/242824/OneNorth/Articles/Assets/images/tnav-touch-phones.png "How to hold a phone")

 As such, generally accepted "touch target" placement recommendations have emerged, based on ergonomics and common usage scenarios.

 ![Phone Touch Zones](https://dl.dropboxusercontent.com/u/242824/OneNorth/Articles/Assets/images/tnav-touch-phones2.png "Phone touch zones graphic")

 ###Tablets
 Tablets do afford more room than phones, although the differences are narrowing with the introduction of new models such as the iPhone 6+ and the Samsung Galaxy S5. Nonetheless, even on tablets, the touch targets are similar to what we see on the phone. The top areas of the device are harder to reach, the bottom areas of the device are easier to reach.

 ![Tablet device Touch Zones](https://dl.dropboxusercontent.com/u/242824/OneNorth/Articles/Assets/images/tnav-touch-tablets2.png "Tablet touch zones")

 Further, on both small and medium-sized handheld devices, the optimal touch targets are at the bottom of the screen. On smaller screens, the entire width of the bottom of the screen is appropriate. On medium-to-large handheld devices, the left and right bottom corners are the most ideal location for interactive elements.

 ![Multi-device Touch Zones](https://dl.dropboxusercontent.com/u/242824/OneNorth/Articles/Assets/images/device-touch-area-small-medium-large.png "Multi-device touch zones")



 ##And so it is just like you said it should be

 Take a look at that multi-device touch zones graphic again. What is touch area is common amongst all illustrated device types? The bottom right area of the screen. Thus, the most logical placement of the modal dialog close button is the bottom-right part of the screen.

 Therefore, I recommend placing the modal close button at the bottom right corner of the screen. Yes, the button will still overlap the content as it does in the current demo, but it will overlap content that you have not yet read, and as you move the content up, the button will not overlap the content that you are currently reading.

 <iframe height='350' width='320' scrolling='no' src='//codepen.io/askesian/embed/EawMJG/' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='http://codepen.io/askesian/pen/EawMJG/'>Button Morph Modal Redux</a> by Chris Wigley (<a href='http://codepen.io/askesian'>@askesian</a>) on <a href='http://codepen.io'>CodePen</a>.
 </iframe>

 To take this further, in addition to placing the modal close in the bottom right area of the screen, I would have the button morph from the Circle X shape to a capsule-shaped, full width button with the label "Close Modal" when you reach the bottom of the modal dialog content.

 [*] Or up, for you MacOS "natural" scrollers
	# So close, yet so far away

	##The setup
	Except for my obstinate 8-year old, people read from top to bottom; some left to right, others right to left. No one reads bottom to top. Well, maybe [Billy Crystal][1].

	[1]: http://www.goodreads.com/work/quotes/844335-when-harry-met-sally "When Harry Met Sally quotes"

	Web pages load with the topmost part of the page in view (linked anchor sections not withstanding). To view any [below-the-fold][2] content, you have to scroll down* . As you scroll down, the page content moves up into view.

	[2]: http://en.wiktionary.org/wiki/below_the_fold "Below the fold on Wikipedia"

	Yeah, so?

	I recently read an [article][3] that discusses the transition of a button into a modal dialog. The demo is intuitive and engaging, and I appreciate the natural, contextual clue of the morph transition. On desktop, and larger portable devices, everything is cool. However, on smaller devices (e.g., iPhone), an unfortunate, opaque, distracting undertone hovers over the clean, modern design. Take a minute to [interact with the demo][4], ideally on a smaller handheld device.

	[3]: http://codyhouse.co/gem/morphing-modal-window/ "Smashing Magazine - Morphing modal window in CSS and jQuery"
	[4]: http://codyhouse.co/demo/morphing-modal-window/index.html "Smashing Magazine - Morphing modal demo"

	## Location, location, location
	I have issues with the location of modal dialog close button. On larger screens, the position of the close button is not an issue. On smaller handheld devices, it's distracting and ergonomically challenging. Hear me out.

	###Issue 1
	When the modal dialog is visible, you see the modal content, and a modal close button positioned at the upper right of the dialog.

	![Handheld screencast](https://dl.dropboxusercontent.com/u/242824/OneNorth/Articles/Assets/screencasts/MorphingModalWindow.gif "View of modal on handheld device")

	In the demo, there is a reasonable amount of dialog content, thus you must scroll down to view the rest. As you scroll the modal dialog, off-dialog content moves up to displace the viewable content. Also as you scroll, the upper right side of the content "underlaps" the round close button. As such, the last few characters of a few sentences are always obscured by the close button. This is jarring to the reading experience.

	#### Yeah, so?
	On smaller devices, the modal maximizes use of the viewable content area by utilizing minimal whitespace between the content and the edge of the dialog. Because the content is so close to the dialog edge, the close button must be semi-transparent to avoid completely obscuring the content. As an alternative, the design could have pushed the modal button far to the top right, while also making it a bit smaller, to minimize or eliminate the interference between the button and the content. Doing the former is questionable. Doing the latter should be unacceptable because of recommended minimum required touch sizes. But let's table issue 1 for a sec.

	###Issue 2
	Placing the button at the top right corner of the screen places the close button in a hard-to-reach area of the screen. With one-handed use, stretching your thumb to the top right corner of the screen is tough. I have big hands, and it is often difficult for me to thumb-reach the top right corner of the screen on my iPhone 5S. It's difficult for right-handed people, and virtually impossible for left-handed people.

	#### Phones
	Based on human observation, most people hold their phone with their right-hand, and predominantly use their thumb to navigate their phone interface. Most phone usage emphasizes right-hand thumb usage. Even when two hands are used, the right hand index finger is used as a pointing device.

	![Holding a phone](https://dl.dropboxusercontent.com/u/242824/OneNorth/Articles/Assets/images/tnav-touch-phones.png "How to hold a phone")

	As such, generally accepted "touch target" placement recommendations have emerged, based on ergonomics and common usage scenarios.

	![Phone Touch Zones](https://dl.dropboxusercontent.com/u/242824/OneNorth/Articles/Assets/images/tnav-touch-phones2.png "Phone touch zones graphic")

	###Tablets
	Tablets do afford more room than phones, although the differences are narrowing with the introduction of new models such as the iPhone 6+ and the Samsung Galaxy S5. Nonetheless, even on tablets, the touch targets are similar to what we see on the phone. The top areas of the device are harder to reach, the bottom areas of the device are easier to reach.

	![Tablet device Touch Zones](https://dl.dropboxusercontent.com/u/242824/OneNorth/Articles/Assets/images/tnav-touch-tablets2.png "Tablet touch zones")

	Further, on both small and medium-sized handheld devices, the optimal touch targets are at the bottom of the screen. On smaller screens, the entire width of the bottom of the screen is appropriate. On medium-to-large handheld devices, the left and right bottom corners are the most ideal location for interactive elements.

	![Multi-device Touch Zones](https://dl.dropboxusercontent.com/u/242824/OneNorth/Articles/Assets/images/device-touch-area-small-medium-large.png "Multi-device touch zones")



	##And so it is just like you said it should be

	Take a look at that multi-device touch zones graphic again. What is touch area is common amongst all illustrated device types? The bottom right area of the screen. Thus, the most logical placement of the modal dialog close button is the bottom-right part of the screen.

	Therefore, I recommend placing the modal close button at the bottom right corner of the screen. Yes, the button will still overlap the content as it does in the current demo, but it will overlap content that you have not yet read, and as you move the content up, the button will not overlap the content that you are currently reading.

	<iframe height='350' width='320' scrolling='no' src='//codepen.io/askesian/embed/EawMJG/' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='http://codepen.io/askesian/pen/EawMJG/'>Button Morph Modal Redux</a> by Chris Wigley (<a href='http://codepen.io/askesian'>@askesian</a>) on <a href='http://codepen.io'>CodePen</a>.
	</iframe>

	To take this further, in addition to placing the modal close in the bottom right area of the screen, I would have the button morph from the Circle X shape to a capsule-shaped, full width button with the label "Close Modal" when you reach the bottom of the modal dialog content.

	[*] Or up, for you MacOS "natural" scrollers