Designed for the school office: Esopo's new design

Studio Futuro cover with the official Esopo mark.

We had designed Esopo while looking at a large monitor. The people who will use it, though, often work on an old notebook, with a screen of 1280 by 720 pixels. At that size the Scrivania, the desk view, did not fit. The month view of the Calendario needed almost twice the space. Two greys, side by side, were hard to read.

That was the mistake in our approach: designing for the screen of the person who draws, not for the screen of the person who does the work.

Esopo is the AI-native school secretary from Wacebo Europe. It works alongside the DSGA, the school's administrative director, and the school office staff: it understands the regulations, prepares the documents and watches the deadlines. The person still decides and signs. The task now is to make that work sit well on that screen, with those people.

They are often people close to retirement, who learn gestures by habit more than by following a computer scientist's logic. They want the result, not the procedure. Designing for them is not a fallback, and it is not a favour. It is a beautiful user experience case: an interface you recognise, that does not ask you to become a computer expert, and that does not force you to leave the document in order to ask a question.

What was not working

The earlier approach was a chat, with panels opening beside it. On a small screen it became a maze. Three things, in particular, broke down.

Opening a document from a project spawned a second horizontal panel. Half the sheet ended up off the screen. The person working on the text could no longer see the text.

From a full-screen app there was no way back to the chat, only back to the Scrivania. And in full screen the «Chiedi a Esopo» box disappeared. To ask a question you had to leave and start again.

The specification says this in plain words. The school office works on documents and deadlines, not on a chat. If asking for help means leaving what you are looking at, people stop asking.

It was not a lack of will. It was a drawing problem: too many states, too many steps, and a screen that was not the real one.

Recognition, not recall

Jakob Nielsen, in the Nielsen Norman Group's ten usability heuristics, calls this principle «recognition rather than recall». The interface should show what you need, when you need it. People should not have to remember, from one screen to the next, where a command lives or how they got there.

The same movement appears in the W3C cognitive accessibility patterns, in the note Making Content Usable for People with Cognitive and Learning Disabilities. Use patterns, words and controls that are already familiar, so no one has to learn a new language. Make sure paths do not depend on memory. Help people stay with the task, and find the thread again if their attention moves.

For the DSGA and the school office this is not a guideline in the abstract. It is how the work already exists. Gestures are learned by doing them, day after day, on the same kind of practice: a determination, a deadline, a calendar. A good design respects that memory. A poor one breaks it, and then asks people to study the program.

Two states, three movements

Esopo's new design starts again from a tight rule. The screen has only two states.

In Accanto, «Beside», the chat sits on the left and an app on the right. In Piena, «Full», the app fills the screen, and the Esopo box stays at the bottom. That box does not disappear. It always shows what you are looking at, for example «Calendario · 30 novembre». You can ask something without leaving the page, and without starting over.

There are three movements, and each one has a single meaning. Zoom goes into the detail. Vertical scrolling changes app. Widening or narrowing changes state. The arrow goes back. The X closes.

A document opens inside its own panel, with the zoom. A second pane does not appear and push the sheet off the screen. In the full-screen app there is «Torna alla chat», «Back to the chat». The way through is written out, visible, and it leads where you expect.

Animations last about three tenths of a second, with light effects, made for older computers. Nothing starts by itself, and nothing steals your eye while you are reading a deadline.

Designed for the school office

The rule of this work is a single sentence: you design for the school office. The easiest, calmest, emptiest thing. Large text. Buttons with the word written on them, large and with a visible border, not icons you have to guess. Nothing that is only revealed on mouse hover. Everything has to fit in 1280 by 720.

This is not a list of tastes. It is the answer to what already failed on the real screen: the two greys that blurred together, the calendar that would not fit, the commands that vanished.

The Nielsen Norman Group, in its research with people over 65, has found the same obstacles for years: small type, weak contrast, tiny targets, elements that move. In a 2013 article, Jakob Nielsen recommended at least 12-point type as the default, buttons and links large enough to hit without pixel-perfect aim, and a still interface instead of menus that slide away under the cursor. In 2019 Lexie Kane comes back to the same point: choices made for twenty-year-olds with fresh eyes become a barrier for everyone else. And, as she notes, those choices irritate younger users too.

The W3C patterns point the same way. One, Limit Interruptions, asks you to avoid interruptions: moving content, noises, alerts that arrive on their own while someone is finishing a task. Another, Let Users Control When the Content Moves or Changes, says that changes should start from a person's request, not by themselves. That is why, in Esopo's new design, there is no autoplay and nothing that animates just to be noticed. The screen stays still until you move it.

We are not the first to take this seriously

This way of designing already has serious company, even far from the Italian school office.

Consool is management software for Nigerian nursery, primary and secondary schools. On its own site it says something very concrete: every screen has big buttons and plain words, and it works on a phone as well as on a computer, including on a slow connection and an older device. In an article on MobilityArena, the person who built it tells the same idea in other words: speak the school's language, not the language of the people who wrote the program, and fit the way people already work.

In 2015 John Kuefler, with his father, published Simplicity Center, an iPad app meant to make the internet and email simpler and safer for older people. A Pittsburg State University article describes it: large, colourful buttons, an interface built around the needs of Kuefler's grandmother. The App Store page is no longer reachable. The point remains: a serious interface can start from a real person, and from a gesture that person must be able to repeat without fear.

Code for America, in the Benefits Playbook of November 2024, writes about public-service sites that often get in the way: complicated language, forms that do not fit a phone screen. When a site is simple and accessible, the organisation writes, it is one less thing to worry about for someone who may already have a lot to worry about. The setting is different, American social benefits, not the office of an Italian school. The lesson is the same: if the tool fights the person who uses it, the work stops.

We are bringing that care to Esopo's new design. Not because school office staff «are not technical». Because their craft is something else, and it is already hard enough.

This is a work in progress

We should be honest about where we are. The specification is a draft. Part of it is already built, and the design guide is under way. The typeface and the phone version are still to be decided. We do not yet have feedback from the people who work in a school office, and the test in a pilot school is still to come. We cannot say that «it works in schools» or that «offices have already adopted it». We can say how we are designing, and why.

On this too the W3C patterns are clear: in the end you have to test with real people. That will be the next step. Until then this is a work in progress, and we are telling it as such.

The part we care about, though, is already visible. It is not a «simplified» interface for people who would not cope. It is a respectful interface for people who have a craft, a small screen, and a memory made of gestures. The person decides and signs. The design should step aside, and stay close.

Want to see how a work tool can be redesigned without asking people to become computer experts? Write to us: we start from the screen you actually use, and from what should stay easy to remember.

Sources

• Jakob Nielsen, 10 Usability Heuristics for User Interface Design, Nielsen Norman Group, 1994, last reviewed 30 January 2024 (heuristic 6, «Recognition Rather than Recall»).
• Lexie Kane, Usability for Older Adults: Challenges and Changes, Nielsen Norman Group, 8 September 2019.
• Jakob Nielsen, Usability for Senior Citizens: Improved, But Still Lacking, Nielsen Norman Group, 28 May 2013.
• W3C, Making Content Usable for People with Cognitive and Learning Disabilities, Working Group Note, 29 April 2021.
• W3C WAI, Limit Interruptions and Let Users Control When the Content Moves or Changes, cognitive accessibility patterns first published in Content Usable.
• Consool, official site, and Mister Mobility, Good Tech Gets Out of the Way: How I Built Ease of Use Into a School App, MobilityArena.
• Pittsburg State University, Programmer develops app to help grandmother, 2015, on John Kuefler's Simplicity Center.
• Code for America, Benefits Playbook, November 2024.

In short: Good design for a school office is not a fallback. It is an interface people can recognise, that fits the screen they already have, and that leaves them to decide and to sign. This work is in progress, and the real test will come with the schools.