A better UI ?

[satyamtg]

Currently, the ZIMs created by the scraper has very basic UI which seems to be mobile device friendly. However, it doesn't seem to take advantage of all the screen real estate available to it. Also, since we now support topics scraping and are on the way to support playlists scraping, I think it'd be good to display some info about the topic/playlist. I like the way we currently arrange videos as a grid. Also, if we take a look at any playlist on ted.com/playlists, it has got a pretty nice UI. What I want to propose is to have a UI that displays info like the playlists UI but also keeps the grid arrangement that we currently do. I have made some mockups on the possible ways we can go with. @kelson42 @dattaz @rgaudin what do you think about this?

For the mobile devices, we can rearrange the blocks from top to bottom instead of from left to right on the video page.

[rashiq]

I think that would make for a great addition later down the road, but should not be a priority

[rgaudin]

Thanks for the mockups.

I think we all agree the current UI is decent and has no bugs. That said, the TED online UI looks better now and a refresh would be a good addition.

As @satyamtg is looking for an opportunity to do some UI work, this looks like a good candidate to me.

I've created a github milestone for the stuff that we should do before, then we'll release (so that zimfarm can start filling-up the videos cache) and after that we'll be able to work on improving the UI. I've attached it to the next milestone but to me it gets integrated once we're all satisfied with it, there is no rush for that.

@satyamtg maybe next steps would be to propose image mockups with real-content inside in order to clarify what it shall look like ; including all the features (filters, pagination).

Also, I'd like to point out that we have fixed dimensions for the videos we serve (smaller than TED) and that we of course needs to be responsive.

[Binoculars7]

@rgaudin I have designed a single screen UI for the TED Talk ZIM website. The current UI needs a lot of improvements and we all know that irrespective of how good a solution is, a bad design can cause users to get bored and drive them out.
Can I go ahead and attach my proposed UI

[rgaudin]

@Binoculars7, yes please post your proposal. @benoit74 is in charge of the scraper now.

[Binoculars7]

@rgaudin @kelson42
it would be easier to explore and enjoy TED Talks offline on a single page, without the stress of moving from one page to another. This transformation will significantly improve engagement and reduce boredom.

[benoit74]

@Binoculars7 I basically like the idea, please develop it a bit further by explaining the different components:

• what is a collection?
• what are TECH, TED, IDEAS "tags" ? Does something happens when we click on them ?
• what are related collections ? Looks like it is more a list of related videos, so I'm a bit puzzled
• what happens when you click "All collections" ?
• what happens when we click "UK" ? What having "UK" selected here means ?

Also we need more resolution since this needs to be responsive, we at least need a portrait mobile and a tablet landscape design, assuming the desktop will be the same as tablet with big blank margins on the left and right.

A more personal taste: I don't feel like the left icons or the outside black frame are adding much value ; they make the UI look very "Apple-style" from my perspective, which is good for some users ... but horrible for others ; could you explain what this is used for and what will happen with the 3 icons?

Maybe for latter:

• how can one see a author profile? all videos from this author?

Please also have a look at #178 and #179 for ideas on what the new UI needs / could be used to fulfill ; every video on TED has information about these related videos and topics, so it might be more appropriate to display them instead of just a list of videos in same topic

[benoit74]

@Popolechien your feedback is also welcomed

[Popolechien]

I have similar questions. My main questions at this point is what the three left-side round icons do, how "related collections" are supposed to be defined (ted.com has "related topics"), and what UK stands for next to "All Collections" (which you might want to simply call "videos", uness each collection is a playlist or a topic).

[Binoculars7]

Thank you. @benoit74 @Popolechien @rgaudin

1. Collections are basically the categories of of videos. e.g tech category, idea category etc.

2. Yes, they are clickable. Those tags are used to categorize each video under the niche they belong to.
   Any video with TECH tag is under TECH niche and if you click on the tag, it will automatically fetch all the videos in that niche.

3. The related collection is more like the queue of the next videos to watch.

4. "All collections" section is where you filter or sort the video categories you want. e.g..
   All collections - shows all the videos
   Tech collections - shows all the videos under tech
   Ideas collections - shows all the videos under idea.
   etc.

5. The "UK" section, this is where you pick the language you want the website to be translated to.
   UK/US - English. French, Arabic etc.
   Once the user selects the language they want, the website would be automatically translated to their preferred language.

6. About the mobile and tablet design, they will be available and I will document them in my GSoC proposal.

The latter part
7. When the author name is clicked, his/her profile will popup and their videos will be listed below.

Thank you for #178 & #179 reference, I will check it out to improve my solution.