Concept J · Touch-first for iPad
The same app, sized for fingers
Bigger targets, more space between them, an explicit button for every swipe, and a layout that follows the width of the app, so it works full screen, in portrait, in Split View and in Slide Over. Change the width below and tap the controls.
Today
Tuesday 20 October · Ava Brooks, Year 7
Up next
-
Equivalent fractions Was due Sun 11 Oct · you are on Q3 9 days late
-
Adding fractions Was due Sun 18 Oct · not started 2 days late
-
Class with Maya Tomorrow, 10:30 am · 45 min Tomorrow
Every row has a button. Nothing needs a swipe, a long press or a hover.
Practice · question 1 of 6
Which fraction is the same as 1/2?
Tap an answer.
Controls at touch size
What changed from the desktop sketches
| Part | Desktop sketches | Touch (this page, and "Touch size" on any page) |
|---|---|---|
| Buttons | 44 to 48 px high | 56 px, and 64 px for the main action |
| Tabs and segments | 56 px | 60 px |
| List rows | 56 to 64 px | 72 to 88 px, with a real button in the row |
| Fields | 48 px, 16 to 17 px text | 60 to 64 px, 18 px or more so Safari does not zoom in, and a numeric keypad where the answer is a number |
| Checkboxes and switches | 22 px box | 28 to 32 px box inside a 64 to 72 px row; the whole row is the target |
| Space between targets | 8 px | 12 to 16 px |
| Text | 15 to 16 px | 17 to 20 px |
| Navigation | Top bar and links | Sidebar when the app is 900 px wide or more; tab bar below that, with room for the home indicator |
| Hover and keyboard hints | Hover lifts, "press K" hints | Hover only as a bonus for a trackpad; keyboard hints hidden; clear focus ring for a Magic Keyboard |
Same controls, two sizes
Desktop: 44 px buttons, 8 px apart
Touch: 56 px buttons, 12 px apart
- Can a student use the whole screen with one thumb on each side, holding the iPad in both hands?
- Do 56 px targets still feel comfortable on an iPad mini, or do they feel too large on a 12.9 inch iPad Pro?
- Does the tab bar in portrait and Split View feel like the same app as the sidebar in landscape?
Sizes: CSS pixels on an iPad are points. Apple's minimum is 44 pt, about 8.5 mm on a 10.2 inch iPad. NN/g recommends about 1 cm for adults (about 52 pt) and at least 2 cm for young children (about 104 pt on that iPad). That is why every control a child taps in concept G and in F's Grades 1 to 3 view is at least 104 px, with or without Touch size. Grown-up links, the motion switch in F and the design-lab bar stay at 56 px or more. Limits: tested only in a desktop browser window of iPad sizes, not on a device or in Safari. It does not respond to the iPad's text size setting, and it has no drag. The home indicator padding is in the CSS but shows nothing in a desktop browser.