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.

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)
  • 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 '15 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

  • 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 '15 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 '15 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.

  • 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 '15 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

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?

  • 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 '15 at 9:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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