Ontwerpnotities
Hoe de vouw een rug werd
Elke vouwbare telefoon heeft een lijn in het midden. Voor de meeste apps is dat iets om omheen te werken. Voor een boek is het de natuurlijkste zaak van de wereld: boeken hebben er altijd een gehad. Zo leerde de lezer van Tomelet de vouw als rug te behandelen, en dit zijn de ontwerpregels erachter.
Gratis, zonder account. Twee pagina’s naast elkaar horen bij de gratis lezer.
Het probleem: een telefoonpagina, uitgerekt
Klap een vouwbare telefoon open en een app die voor een telefoon is gemaakt, wordt gewoon breder. Regels worden te lang om te lezen, tekst loopt over de vouw en een knop kan er precies op belanden. Klap de telefoon dicht en het scherm wordt opnieuw opgebouwd, een pagina of een hoofdstuk verwijderd van waar je was.
Apple publiceerde ontwerprichtlijnen bij de iPhone Duo; Android heeft eigen richtlijnen voor vouwbare toestellen. Ze zijn het over meer eens dan oneens, en Tomelet volgt ze allebei met één lezer, op een iPhone Duo en op een Galaxy Z Fold. Vijf regels gaven hem vorm.
1. De vouw is gereserveerd gebied
Apple noemt de vouw een gereserveerd gebied: een deel van het scherm dat een app vrij moet houden. Android vertelt een app precies waar de vouw zit, en Tomelet legt de binnenmarge tussen de twee pagina’s precies daar, en houdt tikzones, knoppen en selectiegrepen erbuiten. Een penstreek die over de vouw gaat, wordt tussen de twee pagina’s verdeeld, zodat elke pagina de inkt houdt die bij haar hoort.
Op iPhone Duo geeft Flutter, de toolkit waarin Tomelet is geschreven, de positie van de vouw nog niet door aan apps (flutter/flutter#192515), dus centreert Tomelet de binnenmarge op het scherm.
Dat is de stap van vouw naar rug. Ook in een gedrukt boek staat in de binnenmarge niets. Daar komen de twee pagina’s samen.
2. Dichtklappen is niet weggaan
Apple vraagt om een doorlopende ervaring terwijl het toestel open- en dichtgaat. Samsung vraagt apps de scrollpositie en elke tekst die wordt getypt te bewaren. Tomelet behandelt dichtklappen als een verandering van schermgrootte, nooit als navigatie.
Paginanummers overleven dat niet: het buitenscherm toont één pagina op een ander formaat, dus heeft het boek na elke vouw een ander aantal pagina’s. Tomelet onthoudt je plek daarom als positie in de tekst: het eerste teken op de linkerpagina. Het maakt het boek opnieuw op en opent de pagina met dat teken, en het vorige beeld blijft staan tot het nieuwe klaar is. Markeringen, notities en inkt zijn aan woorden verankerd, dus ze bewegen mee.
Niets gaat opnieuw open en er verschijnt geen advertentie: dichtklappen haalt je nooit uit het boek.
3. Grootte, niet draaiing
Het binnenscherm van de iPhone Duo negeert de rotatievergrendeling van een app, en Android 17 doet hetzelfde op grote schermen. Hoe een telefoon gedraaid is, kan de indeling dus niet bepalen. Tomelet kijkt hoeveel ruimte de pagina heeft: twee pagina’s als elke pagina comfortabel leesbaar blijft, één als dat niet zo is. Dezelfde regel geldt op een tablet, een telefoon die je dwars houdt en een desktopvenster.
De paren komen uit het gedrukte boek, niet uit een fotocarrousel. De eerste pagina staat alleen, daarna 2–3, 4–5, zodat een dubbele pagina die de uitgever heeft ontworpen altijd als één geheel valt. Arabische, Hebreeuwse en verticaal Japanse boeken beginnen rechts en slaan naar links om. Een fixed-layout boek dat een oriëntatie opgeeft, krijgt een hint van één regel die je kunt wegtikken; de lezer draait je telefoon nooit voor je.
4. Houding verandert de opstelling, niet het boek
Volgens de richtlijnen van Apple is de scharnierhoek “voor interacties en effecten… niet voor de lay-out”. Tomelet is het daarmee eens, dus geen pagina-effect volgt het scharnier. Wat een houding op Android verandert, is de compositie rond het boek.
Op een vouwbare Android-telefoon die meldt dat hij half open is en die je vasthoudt als een boek, krijg je aan elke kant van de vouw één pagina, met de knoppen aan de buitenranden. Zet de vouwbare Android-telefoon half open op tafel en de pagina gaat naar boven terwijl de knoppen naar beneden gaan: paginaschuif, inhoudsopgave, notities, weergave. Het is het idee van Flex Mode, op Android in de lezer ingebouwd.
Op iPhone Duo houdt Tomelet bij elke hoek de indeling van een opengeslagen boek aan, klaar voor de dag dat Flutter de scharnierstand aan apps doorgeeft.
5. Het toetsenbord
Klap de telefoon dicht terwijl het toetsenbord openstaat, en het zoekveld of de notitie waarin je typte, houdt zijn tekst, focus en cursor.
Het scherm delen
Naast een andere app, in Split View op iPhone Duo of in gesplitst scherm op Android, toont Tomelet één pagina, gokt het niet waar de vouw zit en houdt het zijn knoppen aan de buitenranden.
Een pen in de marge
Apple brengt Apple Pencil (USB-C) naar beide schermen van de iPhone Duo, en de pentools van Tomelet staan klaar: schrijf in de marge van EPUB en PDF allebei, markeer een regel met één streek, schrijf met de Pencil terwijl je vingers bladeren, schuiven en zoomen. Inkt is aan de tekst verankerd, dus een notitie in de marge blijft naast haar alinea wanneer een vouw de pagina opnieuw opmaakt. Een streek over de vouw wordt tussen de twee pagina’s verdeeld.
Wat we niet hebben gebouwd
Pagina-effecten die de scharnierhoek volgen
Een pagina hoort niet te wiebelen als je je greep verandert.
Een tweede Tomelet-venster op iPhone
Eén venster dat het scherm goed deelt, is genoeg.
Waarom een rug
Een boek is het oudste vouwscherm dat er bestaat. De rug is waar het buigt, waar niets gedrukt staat en waar twee pagina’s elkaar ontmoeten. De vouw als rug behandelen was geen metafoor die over de techniek is gelegd. Het was de kortste weg naar een lezer die zich gedraagt zoals een boek dat al doet.