4

I'm developing an Audio book player app for mobile. This app is mostly focused on blind people, so the UI must be comfortable in accessibility mode. For an open book, it shows a list of it's chapters.

I want to provide two options for the chapters:

  • Play chapter demo (which plays only the audio of that chapter for 5 seconds)
  • Play chapter (which shows the chapter's text and plays its audio)

Right now I've used Simple Click and Long click for these, however, it's confusing for people.

Current ui

What is the best way of providing these two options?

I have these in mind:

  • Putting two buttons on each row.
  • Opening a popup menu in click.
  • Using Click vs. Double Click.

But I'm not sure which is the best, or if there's another more elegant way.

Improve this question

5 Answers 5

Reset to default
2

If it is mainly for blind people, then the only important thing about the structure of the elements is their order. Accessibility features, such as Android TalkBack, make the focus jump from one element to another on left/right swipes.

What you should not do though, is use some fancy interaction styles and animations, like some answers here suggested (e.g. making buttons slide in from the side). Those make it really hard for blind people to actually understand what is happening and might also mess with the readng order of the screenreader.
The paper Usable Gestures for Blind People: Understanding Preference and Performance shows a lot of research on this and provides guidelines on how to design smartphone applications for blind people.

So I suggest you use your first idea and simply place two buttons in each row.

But fully blind people are much rarer than visually impaired people, who still have some residual vision left. So with a correct design you could provide them with a "shortcut", instead of making them go trough all of the elements with the screenreader first.

Things that help these users interact with your app are:

  • Size of element and text
  • Good contrast between the element and the background
  • Placement of important elements in easily accessble places (such as corners of the screen, since it is harder for the visually impaired to hit a target in the middle of the sreen)
Improve this answer
1
  • Yes the blind people are the main audience and I completely agree about visual effects. Yes it seems that having two buttons is the best option I have so far. Thanks for the paper, it looks valuable and I'm already reading to see what I can get.
    – Mousa
    Dec 15, 2015 at 9:29
3

How about slide left and right to show extra buttons? Like in Google Inbox. Or better yet, like Zoho mail. Here is a screenshot. Downside: you need to at least educate them once during onboarding, but the idea is picking up, it won't need education soon.

enter image description here

enter image description here

Improve this answer
2
  • 1
    That's an interesting visual way. However for blind people it complicates matters, won't it? They always enable Android's talkback, and it adds a gesture layer on top. In that mode sliding moves focus to next/prev element and to do a normal slide, you must slide with two fingers. Though, since visual effects are not important, I can replace slide with click in your approach.
    – Mousa
    Dec 13, 2015 at 20:53
  • 1
    I didn't see the blind people note, now I'm thinking i have zero experience in designing apps for blind people! How do they know where to tap? I think it should all be talk back
    – Ayyash
    Dec 14, 2015 at 3:20
2

I would say you should play the demo on touch enter event and stop when he enters another chapter by sliding his finger.

If he releases (on touch end) there are 3 cases:

  • the demo has been played once and he's still on that chapter > it will play the chapter from the start
  • the demo is still playing > it shouldn't stop (which covers the single tap case as well)
  • he's outside the touch zone > it stops the demo if it's still running

The good thing about this approach is that you can freely and easily skim through the book with only one touch and once you settle on something you just release and go.

Improve this answer
1
  • Oh thanks, that's a good choice too. I'll implement and test it to see if this approach answers well with users.
    – Mousa
    Dec 15, 2015 at 9:23
1

Slide up and down to navigate between chapters one chapter at a time with quick audio preview. Slide right and left to navigate in the chapter one sentence at a time with quick audio preview of the sentence. One single tap to pause/play

Improve this answer
1

I think putting two buttons on each row might be a good approach, you give them the option on the 1st level which is pretty straight forward. The only issue I see is it might cause clutter, if you have limit of room to add buttons. Icon type button might help.

Opening a popup menu in click is good too but it require an addition click, if they are just browsing around, it will become bothersome.

The 3rd approach of single or double click, i won't recommend. How are you planing to educate them the double click is the full version, when user doing a double click, it seems from something not working. Also how do you differentiate if user is intent to do a single or double click, how program time this matter?

Improve this answer
1
  • Yes seems that the best approach so far is to put two explicit buttons. It eliminates the need to learn. And about the technical issue you mentioned on click and double click, is no problem, because android does all the job.
    – Mousa
    Dec 15, 2015 at 9:19

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.