quran / quran-ios

QuranEngine is the engine powering the Quran.com iOS app.
Apache License 2.0
460 stars 160 forks source link

Improvements to the Arabic Reader Settings #375

Open imthath-m opened 2 years ago

imthath-m commented 2 years ago

The Settings for the Arabic reader view is shown below.

image

I suggest three improvements to the screens.

Word Pointer

Problem: The label next to the first toggle switch says "Word Translation Pointer". Once, I turn that on, I see the next picker with the label "Pointer Showing" through which I can select "Translation" or "Transliteration". The UX is confusing to get started.

Proposed Solution: Replace the switch and the picker with a single picker. The label can be "Word Pointer" with three picker options - "Off", "Translation" and "Transliteration"

Orientation

Problem: The two icons are not clear about what they convey. I had to make guesswork with the arrow. I am in portrait mode and only the portrait option seems to be enabled. If I tap it, the reader view switches to portrait mode. That's confusing but I got used to it eventually. Another confusion starts when I have the systems rotation lock disabled. So irrespective of what I chose in the app, it keeps changing based on how I hold the phone. Makes me what does the preferred settings do.

Proposed Solution: Use a picker (or checkboxes) with three options "Portrait", "Landscape", "System/Auto". . When "Portrait" or "Landscape" is selected do not change the orientation based on how the user holds the phone.

Choice of UI components

Problem: We have 3 preferences on the screen and each of them uses a different UI component. I'm wondering whether such usage adds to the confusion. I had to admit that it does look nice with all these components.

Proposed Solution: Use the same UI Component for all three preferences - we can choose from Picker, Checkbox, Segmented Control (like we have Arabic and Translation) at the top. But we need to stick to one component to reduce the cognitive load for the user.

mohamede1945 commented 2 years ago

Thanks for reporting this. I think in the future if you could separate each problem to different issues that would be great. But jazak allah khyran for reporting them.

Word Pointer

While what you are describing seems more logical but it would affect the most common use case of enabling the word pointer to be 2 taps away instead of 1. Besides, this would be even harder when we include more languages to the word pointer currently they are 2 choices for 1 language but in the near future we will expand this to 11 languages, enabling the pointer will be harder.

In other words, there 2 different use cases that I don't think we should mix into 1 use case:

  1. Choice of the language (currently only english translation/transliteration)
  2. Showing & hiding the pointer.

Orientation

Thanks! This is currently buggy and actually doesn't add a benefit. Rotating the device to landscape is just a natural thing for different reading apps in the iOS system and doesn't really need any discoverability.

Choice of UI components

I'm not really a designer and cannot defend the current design. However, I've developed this with the inspiration from Apple's Books app in iOS (screenshot below). But I'm always open to improvements. So, if you can maybe sketch something that would be great.

books