2

I'm looking for the best way to present a list of chapters on an iPhone. My first stab was to create a vertically scrolling table with a row for each chapter. For example, when showing the chapters of the Book of Psalms from the Bible, it looks like:

Chapter 1
Chapter 2
Chapter 3
...
Chapter 149
Chapter 150

This can be slightly improved by showing an index on the right that lets you jump around the list more quickly (say, with 1, 10, 20, 30, etc.).

That works, but others I'm working with would prefer to have three columns, so that there is less vertical scrolling. My concern is that the user would then need to scan horizontally as well as vertically. Is there any research to suggest which way is better, or does anyone have experience with another solution that might work better than these?

4 Answers 4

3

Three columns aren't a good idea especially on a mobile device. As you already pointed out, people have to then think about horizontal and vertical continuity. Don't make me think!

Showing a long list with chapters and an index on the right is the simplest and best solution in my opinion. It requires no explaining, and I can navigate to any chapter very easily.

2

I have a hunch this is fairly specific to the Bible, given the number of chapters. One idea is to use a filtered nav:

Chapters 1-20    >
Chapters 21-40   >
Chapters 41-60   >
Chapters 61-80   >
Chapters 81-100  >
Chapters 101-120 >

Click on one, then get the shorter list of chapters that range.

2

You might consider adding a draggable "index tab" on the right. As you move it, a chapter number displays on the screen. When you release, you end up at the part of the list displaying that chapter number. The tab only appears when the user starts scrolling with their finger and disappears a few seconds after.

This is the solution used by the Amazon Cloud Player for Android. There's annoyingly little video of the feature but you can see the tab appear 2:29 into this video.

It works very well for getting to a particular section of a large dataset quickly.

1

Let them scroll as you have it currently, but with an input field so they have the option of typing the number as well.

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.