var $modalMask = {};
var $modalFrame = {};
var $modalContent = {};
var toggleModal = function() {
$modalMask.toggleClass("modalHidden");
$modalFrame.toggleClass("modalHidden");
}
var updateModalContent = function(sourceId) {
var content = "";
if (sourceId) {
content = $("#" + sourceId).html();
}
$modalContent.html(content);
}
$(document).ready(function() {
$modalMask = $("#modalMask");
$modalFrame = $("#modalFrame");
$modalContent = $("#modalContent");
$(".openModal").click(function() {
$(this).addClass("active");
updateModalContent($(this).data("contentId"));
toggleModal();
});
$(".dismissModal").click(function() {
toggleModal();
updateModalContent();
$(".openModal").removeClass("active");
});
});
<div class="mainPage">
<h1>Content</h1>
<p style="background: red; color:white;">This has been moved to https://dl.dropboxusercontent.com/u/15842115/miscellaneous/modalIdea/index.html</p>
<p>As we design for <a href="http://www.nngroup.com/articles/responsive-web-design-definition/">different screen sizes and dimensions</a>, it is common to focus on the smallest of screens. We need our designs and interactive elements to fit and work on small screen devices, such as phones and watches. Many teams focus on resizing and optimizing menus, interactions, content, and experiences to work well on these small devices.</p>
<p>
<button class="openModal" data-content-id="modalContent1">Modal 1</button>
<button class="openModal" data-content-id="modalContent2">Modal 2</button>
</p>
<p>However, other screens are increasing in size and becoming touch-enabled. Some laptop and desktop monitors are touch-enabled. Larger tablets, such as the <a href="http://www.amazon.com/dp/B00OR29TAY?tag=useitcomusablein">Nabi Big Tab</a> with a <strong>24-inch touchscreen</strong>, are available and Tesla cars use a 17-inch touchscreen for most controls. Since screen sizes are measured on the diagonal, the Tesla screen has 3 times the area of a 9.7-inch <a href="/articles/ipad-usability-year-one/">iPad screen</a>, and the Nabi Big Tab has <strong>6 times the area</strong> of an iPad.</p>
<table>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
<p>Just as designing for small screens is different than designing for the desktop, designing for these larger screens has its<strong> own special set of considerations</strong>. What works well with a <a href="http://www.nngroup.com/articles/mouse-vs-fingers-input-device/">mouse on a large-screen device</a> may not work well on a large touchscreen. What works well on a <a href="http://www.nngroup.com/articles/tablet-usability/">smaller-sized tablet</a> may not scale to a large tablet.</p>
<p>What considerations do we have to take into account when designing for larger touchscreen devices? The following observations are a result of my family’s usage of the Nabi Big Tab, a 24-inch tablet aimed at parents and their children. (A perk of working in user experience and interaction design is occasionally buying a gadget in the interest of “research.”) My focus is not on reviewing the device or analyzing the usability of particular apps or games, but instead on how the size and scale of the device impacts our experience with it.</p>
<h2>Input: Typing, Forms, and Gestures</h2>
<p>On-screen keyboards are often awkward for input, but that <strong>awkwardness is amplified</strong> when the keyboard scales with the size of the device and becomes 24 inches across. Every key press on the BigTab required an arm movement, rather than a finger or hand movement. Typing with thumbs or even in a standard keyboard-typing position was not possible due to the size of the on-screen keyboard. You simply couldn’t reach each key without moving your arms.</p>
<p>In addition, the large size of the screen meant that the text being typed appeared far from the keyboard. On a small screen device, an on-screen keyboard is close enough to the selected field that a quick glance can check your spelling. On the large screen, answers were far from the keyboard, causing glances up and down between key presses. Between the <strong>split of visual attention</strong> and the arm movements, each keypress felt like an individual action —something noteworthy rather than unnoticeable because of the work involved reaching each key.</p>
</div>
<div class="modalMask modalHidden" id="modalMask"></div>
<div class="modalFrame modalHidden" id="modalFrame">
<button class="dismissModal" id="dismissModal">x</button>
<div id="modalContent"></div>
</div>
<div class="contentTemplate" id="modalContent1">
<h2>Modal 1</h2>
<p>With a larger screen, more is potentially visible at a time. However, when <strong>more is visible</strong>, more is also competing for the user’s visual attention. Normally when viewing a large screen, we sit at some distance away from it. A desktop monitor is 2 feet away on the desk. A TV may be halfway across the room. This gives us a broader view of the contents of the screen.</p>
<table>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
<p>A touchscreen device needs to be much closer to the user, by necessity: I needed to be close enough to the screen to touch the screen. But that physical proximity made it difficult to see the “big picture” when I was focused on one detail. For instance, an error message the top of the screen was easily missed because the user was focused on an action at the bottom of the screen.</p>
</div>
<div class="contentTemplate" id="modalContent2">
<h2>Modal 2</h2>
<p>As we design for <a href="http://www.nngroup.com/articles/responsive-web-design-definition/">different screen sizes and dimensions</a>, it is common to focus on the smallest of screens. We need our designs and interactive elements to fit and work on small screen devices, such as phones and watches. Many teams focus on resizing and optimizing menus, interactions, content, and experiences to work well on these small devices.</p>
<p><button class="">Save</button></p>
</div>
@import url(https://fonts.googleapis.com/css?family=Roboto:500,900italic,400italic,100,700italic,300,700,500italic,100italic,300italic,400);
body { background: #F5F5F5; color: #212121; font-family: 'Roboto'; font-size: 11pt; font-weight: 400; line-height: 1.64; height: 100vh; margin: 0; overflow: hidden; padding: 0; }
a:link, a:visited { color: #2962FF; }
a:hover, a:active { color: #2979FF; }
button { background: rgb(76, 142, 250); border-radius: 2px; border: 0; box-sizing: border-box; color: #FFF; cursor: pointer; font-family: 'Roboto'; font-size: .875em; font-weight: 500; line-height: 1; padding: 10px 24px; transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1); }
button:hover { box-shadow: 0 1px 3px rgba(0, 0, 0, .50); }
button:focus { outline: none; }
button.active { background: rgb(50, 102, 213); }
table { border-collapse: collapse; width: 100%; }
table th, table td { line-height: 1; padding: .5em 0; text-align: left; }
table th { color: #616161; font-weight: 500; }
table thead tr { border-bottom: 1px solid silver; }
table tbody tr { border-bottom: 1px solid #ddd; }
.mainPage { box-sizing: border-box; overflow: scroll; padding: 1em; height: 100vh; }
.mainPage h1 { margin-top: 0; }
.modalMask { background: #212121; opacity: .25; position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
.modalFrame { background: #FAFAFA; box-shadow: 0 0 2em rgba(0,0,0,.5); bottom: 0; left: 2em; overflow: hidden; padding: 2em; position: absolute; right: 2em; top: 3em; transition: all .1s ease; }
#dismissModal { background: transparent; border: none; color: #616161; font-size: 1.5em; line-height: 1; padding: 0 .5em; position: absolute; right: 1em; text-shadow: none; top: 1em; }
#dismissModal:hover { box-shadow: none; color: #212121; }
#modalContent { margin: 0 2em 0 0; overflow-y: auto; padding: 0; }
#modalContent > h2 { margin-top: 0; }
.modalHidden { height: 0; top: 100vh !important; visibility: hidden; }
.contentTemplate { display: none; }