What's a good scroll bar equivalent for a spiral script?

Question

One of my friends is writing a fictional story about a people who use a script that is read in a spiral from the inside out. They write on long coils of flexible material, and longer texts are fed into a mechanical device which feeds the coils into a spiral path. One can crank a handle to rotate the spiral and progress through the text.

Evidently, they are technologically advanced enough to have computers, and my friend wants me to help him figure out how their computers would work differently than our own. We've decided that they would probably use a circular screen instead of a rectangular one, and we've had lots of interesting ideas about how different user-interface metaphors would apply to them.

Anyway, we've had a hard time figuring out how page scrolling would work. That is, if there is more text than can be displayed on one screen, how should one scroll to see different parts of the text?

I have created a demo of text displayed in a spiral (in English, but imagine it in a script designed to be that way.) There is a horizontal slider at the top of the page that you can use to spin the spiral inward or outward. (Here's an animated demo, just for fun.)

The problem with this is that a horizontal (or vertical) scrollbar is a bad metaphor for a spiral text. I've thought of using a circular scrollbar around the spiral, but I'm not sure if that would be any better for usability.

I've also thought of clicking and dragging in a circular motion, counterclockwise to scroll the spiral inward, and clockwise to scroll it outward, but that doesn't give any indication of how far through the text you are, and I'm not sure if circular clicking and dragging is a good idea anyway.

How should spiral text be scrolled?

Answer 1

Answer 2

In the 2003 Ubisoft videogame Beyond Good & Evil, players input text using a spiral interface:

Here's a video: http://www.youtube.com/watch?v=euquOpUmUyk

Some observations about this UI:

• Letters are always displayed upright, which helps with the readability. But these people would likely design a script that is optimized for reading at various angles, so that might not matter.
• Letters remain the same size regardless of whether they're far away or up close (as shown in the image). This helps readability as well.
• Each item doesn't need to be just a letter (as indicated by "Erase" and "Validate" options). Although this is a user interface, as a script it suggests to me that glyphs in this people's script may work more like Asian languages than Western ones, where for instance one glyph means different things depending on context and orientation. (Does that mean the meaning of the words changes as you scroll through the text? Could you feasibly write a script that works that way, where the words combine to form different sentences depending on where in the loop they are in relation to other glyphs?)
• The spiral loops, so once you reach the top you just end up back at the bottom again. This is great for input. What would it mean for reading (and is it physically possible in the real world? I guess it depends on how the coils in the device loop back)
• There's no "scrolling", just forward and back at a reasonably constant speed. I imagine this would probably easier on the eyes (for humans - these people would probably have evolved to interpret data differently than we do) than using a precise control like a scroll bar which isn't meant for reading, but specifically for not reading and instead speeding past things you want to skip. But you'd probably want some way to skip through text. Perhaps a second switch could move the coil faster?
• The current selection is highlighted. For a UI that makes sense but for reading perhaps it's useful as a bookmark of sorts?

Despite BG&E offering this UI in a game 8 years ago, no other games that I know of have copied it. It worked surprisingly well, however. Glad to see a question where it's of some use!

Answer 3

As others have suggested, these people would likely have input devices that afford continuous circular motion, such as cranks, thumbwheels, or knobs.

_{image from fimoculous on Flickr.}

They would probably find our mouse very unnatural, although it might form the basis for a popular child's toy. :-)

To show where you are in the document, I think it would make sense to take the scrollbar and wrap it around the outside of the circle.

A good source of inspiration is Tony Fadell's Nest Learning Thermostat, which is composed of a knob and a round touchscreen.

_{(source: nestthermostat.net)}

Answer 4

If this society evolved with spiral scrolling, they probably evolved with a user interface that maps to their historical technology. After all, we call it "scrolling" because we used to read things on scrolls of paper or skin. For them, they read on coils, so the action would be called "coiling," and the interface would need to work similarly.

For reading in a linear fashion, I would expect them to have some sort of twisting interface, like a stereo dial or rotating wheel.

For jumping from one section to the next, I would expect to just scan the legible part of the lines, jumping outward in the spiral until I see a marker that tells me I'm in the right place. That could be handled by pushing in or pulling out the wheel along the z axis … or moving it like a joystick to move up or down. Perhaps pushing and pulling zooms in and out of the overall document, while up and down lets you jump lines. (And twisting lets you read a line from where it lies.) I would map the twisting so that one rotation equals a set length of line, rather than a full turn, otherwise the scrolling would go too fast as you get further out in the spiral.

The view of the spiral would give context to how far you are from the beginning. IF you look far into the text, the spiral's lines would come closer and closer to looking like parallel lines within the limited view of the text you're reading. Growing up in a society like this, I would expect people's perception acute at detecting curvature. More curvy means beginning of text; more parallel means deeper into text.

There would also be markers inline with the text to show the beginning of each section. Zooming out would let you see the markers, relative to the center. Finding exactly which one is before the other wouldn't be easily discernable, since they could be at different degrees, but that's just the nature of the beast.

Answer 5

Nice question.

I think the scrollbar metaphor is still useful, as you say it gives you an indication of how far through the text you are. However you could do this with an interactive 'pie' chart instead. You just drag the edge of one of the pie 'mouths' so it's between 0% - 100%. Once the pie chart is 100% complete you're then at the end of the text, and at 0% you're at the beginning. Here's my quick and dirty example.

Yes, this takes up more room than a single line that the scrollbar takes up, but if you're in a world where everything is done in spirals then you have to work within that limitation.

Answer 6

I would use a wheel for scroling this spiral text, because for me it was more important to get a clue where the slider is positioned in relation to the spiral.

Having a wheel you can grab it where ever you want, say a grab it at North, and rotate it rightwards to South. I would expect the spiral to move in same speed and same direction as me steering the wheel. And get a better readablity.

As a (rotating) spiral is endless, I think you won't need information how long text will go.

Answer 7

Instead of scrolling through the text, you could have the scrollbar re-size the text so more of it is visible. The further you move the scrollbar to the right, the smaller the text gets, allowing more to be displayed. When the text becomes too small to read, just notify the user to move closer to the screen. Also you can offer zoom functionality to zoom in on the small text.

Answer 8

I think the answer here is to step away from scrollbars and borrow from the scroll-wheel on a mouse, or the touchpad on laptops. Basically, the location on the interface doesn't have a 1:1 mapping to the location on the screen, like a touchscreen usually does.

The idea I have is that the spiral text is on a touchscreen, and sliding your fingers along it will spin the spiral in the same fashion as if it was a physical wheel. Your spanning/zooming of the text can happen as it spins. This way, users can treat it as a scrollbar on any side of the spiral, or move their hands circularly, etc.

It has the added advantage over a scrollbar-type interface, like a mousewheel, in that where your finger is on the screen doesn't correlate to a location on in the text, but a scrollbar would, and would require very precise aiming with long text.

Answer 9

Classical multitouch scrolling (used in a non-classical way) seems like the ideal solution, or more generally a touch based interface that allows "dragging" of text. I've seen many video games (notably Wario Ware) that use exactly this sort of "Spiral Scrolling" with a touch or pull "dragging" of the item. In Wario Ware for example a picture may be distorted in a spiral and the user "pulls" the image in a spiral until it is correctly shaped.

This could be adapted to the spiral of text simply by scrolling as current multitouch does; with or against the "grain" of the page. The key difference is that the "grain" is not up or down, it's along the spiral. It's computationally much more complex than top down/left right reading, but it's a logical way to operate on such text.

Answer 10

In a spiral context you can consider scrolling like zooming. So:

• For pointing devices typical zoom buttons ( [+][-] ) can be used to make more text apear from the spiral center (as if we were going into it by zooming in). An alternative is to map the zoom in action to the spiral center and the zoom out to the external zone and use mouse proximity to mae the text move.

• For touch devices pinch gesture can be used to zoom in and out.

Answer 11

Maybe the previous answers were to technical or correct, but you should not search for an equivalent, but another way of achieving the goal of reading a book. If it's just too familiar or very iphoney would kill the originality or alien-ess of the device. my answer: Something strange yet familiar, like a mechanical nipple or an eye tracker that works this way: if the reader looks into the center of the screen, the text goes back, if the reader looks up, the text goes forward. Also a not so coherent mixture of the great previous answers would work, giving it a functional justification and also the alien factor.