UI Improvements

[umairidris]

Observations on staging:

• Settings are inconsistent and dispersed across multiple parts of the app which may make it difficult for users to find them
  • Language settings are in footer
  • In Surah page there is a sidebar with some settings (reciter, search, etc)
  • Some settings are in the player at the bottom (loop, etc)
  • Some settings are near the top (reading mode, etc)
• There are navigation links on top of homepage and also in the footer and they do not match
• There is a "quick links" section on homepage which is somewhat duplicated in footer "other links" section and do not match
• Sitemap link which I am not sure if it's working as intended
• There is no way to get back to home from a surah easily (Going back to homepage from surah #560)
• Mobile UI issues (View enhancement: Mobile view is not friendly enough  #539)
  • Help button floating on bottom right
• On surah page the playback controls are a small popup over the page on the bottom left corner of the screen

Recommendations:

• Follow Material design
• Mimic Play Music (a site implementing Material Design with similar functionality for ours)

Reasons:

• Material Design supports both desktop and mobile UIs
• Material Design is used by Google and majority of Android apps so majority of users will have exposure and understanding of it
• Many examples to use
• Will allow for greater synchronization/sharing between UIs of web app and Android app
• Well specced out and tested with good documentation (https://material.io)

Links:

• https://material.io/guidelines/
• http://www.material-ui.com/

Samples:
App bar:

Nav drawer:

Bottom bar with album/playlist view (Surah list can go here):

[mmahalwy]

@umairidris these are awesome! I pinged one of the designers helping us out about this. I'd love to break these down into issues to tackle them one by one.

Also, what's your email address so I can add you to slack?

[umairidris]

Can use my personal email umairidris93@gmail.com

[umairidris]

Possibly useful: http://www.material-ui.com, https://github.com/callemall/material-ui

[mmahalwy]

@umairidris can we create this to be a check list so we can work down the list?

[umairidris]

Done! I am not sure if you can modify my post but if you want me to change/add/remove anything feel free to post it here and I will.

[mmahalwy]

Yep, I certainly can!

[umairidris]

Might be useful to have one issue per major change (i.e. one for adding an app bar, one for settings, etc...) so each component is easier to discuss?

[mmahalwy]

Yes. We'd need to break it down

[umairidris]

Done. See: #578, #579, #580, #581

[mmahalwy]

Closing. Only missing is #581