17

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.)

screenshot of spiral text

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?

11
  • 6
    I think the solution is mechanical. It only makes sense for round monitors to rotate.
    – Daniel
    Nov 29, 2011 at 15:17
  • 35
    Be honest; who else clicked the slider in the image?
    – Ben Brocka
    Nov 29, 2011 at 15:37
  • 4
    Actually, if they're used to reading a script written in a spiral, why would they need to turn it at all? That would be shimming their writing into your native reading style, which is horizontal.
    – zzzzBov
    Nov 29, 2011 at 18:35
  • 2
    I imagine these peoples' scroll-wheel would actually be a scroll-knob Nov 29, 2011 at 18:40
  • 3
    @zzzzBov They wouldn't... I never said they would. I'm saying, if you have more text than can fit into a spiral, then you need some way to move to the text so you can read the next part. Nov 29, 2011 at 22:17

11 Answers 11

22

enter image description here

8
  • 8
    You are a dangerously insane man, Roger. I like that.
    – Ben Brocka
    Nov 29, 2011 at 16:15
  • 4
    +1 for the 'Patent Pending' there. Should you copyright this too? ;-)
    – JonW
    Nov 29, 2011 at 16:22
  • 4
    @JonW, by posting this on StackOverflow Roger Attrill has opened it up to the SO's creative commons copyright.
    – zzzzBov
    Nov 29, 2011 at 18:33
  • 2
    Roger, Any more detail about how this would work? It seems to me that the radial movement is limited, making it poor for fine tuning. Further should the radial movement not also inherently cause rotation, since the coarse movement is continuous and not discrete? Is the circular portion restrained to being on the spiral path of the chapter markers, like both examples are? etc... Dec 1, 2011 at 0:11
  • 3
    This would clearly require more detail if considered in reality, and a usable prototype would be required along with various lengths of text to test with. Possible alternatives are that the roles are reversed; one complete revolution passes through one chapter; two buttons are used instead of one; radial motion is a continuous mouse motion rather than restricted to the length of the slider; and many more. I'd obviously normally be open to exploring these variations on a theme to determine the best possible solution, but in terms of providing an initial framework concept, my work here is done. Dec 1, 2011 at 7:24
10

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

Screenshot from BG&E

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!

8

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

etch-a-sketch

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.

Nest Learning Thermostat
(source: nestthermostat.net)

3
  • Around the outside of the scrollbar, you could add a menu. One knob would be used to jump to the different rings (text, scrollbar, menu, etc.) The other would be used to move the cursor through the text, scroll, or cycle through menu items, depending on which ring is selected. Nov 30, 2011 at 3:14
  • Have you ever tried drawing a circle, let alone a spiral, on an etch-a-sketch? It's not easy. Nov 30, 2011 at 19:13
  • @PeterOlson That's the point I'm trying to make. It might be as difficult for users of this fictional circular display to use a mouse as it is to draw with an etch-a-sketch. Forget about the mouse and think about what sort of input device would work well with your spiraling text and a scrollbar that wraps around the outside. Nov 30, 2011 at 19:30
6

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.

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. enter image description here

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.

4
  • Interesting idea, how do you think it should be placed with respect to the text? Maybe in the center with the text around it? Maybe you could have an interactive donut chart around the text? Nov 29, 2011 at 15:27
  • I'd keep it seperate, neither inside (too distracting as you'd be drawn to it rather than the text content) nor around the text (too large an area to scroll). No, keep the pie scroller in one of the corners. Smaller pie-scrollers could be used for shorter amounts of text, larger scrollers for ones with a lot of text so you can be more precise with where you're scrolling.
    – JonW
    Nov 29, 2011 at 16:07
  • 1
    @Jon Good point, but it's a round screen, so there are no corners. :) Nov 30, 2011 at 11:29
  • @PatrickMcElhaney ah yes, that's true, how remiss of me! Obviously here when I say 'corner' I mean different clock positions. Top-left 'corner' being 10:00ish. ;)
    – JonW
    Nov 30, 2011 at 12:05
5

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.

1
  • I noticed, when playing with the demo, that the farther out on the spiral you look, the slower the text rotates. You'll see the inside move more quickly than the outside. When you say "move in the same speed", which part of the text are you referring to? Nov 29, 2011 at 15:37
3

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.

3

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.

2

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.

2

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.

2

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.