OppiaMobile Community

Potential UI updates

Hi all,
Over the coming couple of months we’re looking at making some UI updates to the core Oppia app (which will of course also then be able to be pulled into specific implementation versions too).

Some initial suggestions include:

  • Changing the black background for a lighter colour (very light grey/green)
  • Updating the courses list (on the homepage) to be a grid view rather than list view
  • Updating the course index page (where all the activities appear)

We’d welcome any other suggestions for what we can do to improve the UI and keep it looking ‘fresh’. The current UI is still a design from several years ago so certainly needs an update.

If there are other apps that you really like the design of… please also send us any suggestions for the particular design aspects you like, so we can see how to implement these in Oppia.

Looking forward to hearing your feedback.
Cheers,
Alex

1 Like

Hey Alex, +1 for a list format. The current grid system is very busy and with 15 different activities displayed at any given time. And advocating for the night owls out there, would you consider having a light/dark theme?

Two different learning app UIs come to mind to draw UI inspiration from: Khan Academy and LinkedinLearning (Lynda):

I like the list format a lot here. In Oppia, the topics structure is difficult to discern and a user cannot quickly scan all topics or activities. I think this shows how existing course/activity icons could be used more attractively. This would also make it much easier/efficient for a user to scan to find videos, text activities, and quizzes.

The LinkedIn Learning UI has a lot of similarities. Again, the list looks clean and simple.

I’ve been making some mockups for different UI updates that could be made for the app, I’ll be posting them as different posts per feature so we can discuss them separately.

First of all, getting rid of the dark colors, both for backgrounds and for tabs. I think it looks cleaner to have a unique color scheme for all the views, the dark accents break too much the consistency between views. Here it is how the main activity and tabs would look like.

Another interesting approach for this is what Nick suggested of having an alternative dark theme that users can select, but in that case everything would be dark, the issue being the combination of dark and light UI elements in the same screen. I can make some mockups on how everything would look like with a dark theme, but we would also need to take into account that the HTML contents define its own styles, so the app would need to override those styles (injecting them in the webView) if we also want the contents to be shown with a dark background.

1 Like

After looking at other e-learning apps (Khan Academy, Linkedin Learning, edX, O’Reilly…) and how some of the most popular apps structure content nowadays (Youtube, Drive, Google Photos, Spotify, Instagram…), I noticed that the bottom navigation bar is a very popular approach that would fit well for OppiaMobile.

The idea, following the Material guidelines (https://material.io/design/components/bottom-navigation.html#) would be that the bottom navigation bar is used for top-level destinations well diferentiated, and is only visible in this top level destinations (so it would be no longer present inside a course detail, for example).

I would split the main sections of the app in this four:

  • Home: this is initial screen with the list of currently installed courses
  • Sync: this would be for everything related with content synchronization, both for sharing courses with another device and for managing the pending and downloaded media.
  • Scorecard: Here we would show the user activity reports and quiz performance
  • Points: this section would be to show everything related with the gamification (points charts, leaderboards, badges…)

Another nice thing about it would be that we can include badges to give additional information. For example, we could add a badge to the sync icon to express that there are media files pending to download.

Some mockups of the different screens would look like:

1 Like

(edited 08/16, the forum does not allow more than 3 posts from the same user)

Courses list

A couple of proposals for how the courses homepage could look like:

  • For both of them, we would get rid of the horizontal progress bar to show the current progress and use a pie chart around the course icon instead. This takes less space and gives a nicer look
  • In the toolbar, add a search button to filter the courses from within this main view

Then, there are two options:

  • Using a grid view to display the courses. If the course icons are big and nice this can give a great look, but can also lead to some issues (for example, when there are courses in the same row with very different title lengths). Also, the secondary description gets lost.
  • Using a list view, where each course is shown within a card. This is just and update of the current UI giving it a nicer look&feel - I think this one is clearer, like the Khan Academy app.

Other apps like edX or Linkedin Learning display the courses in cards with a full width image, but that approach would require to change the course format to define somehow that full width image for each course.

Course index

Here are some proposals for the course index.

First of all, just trying a light theme, keeping the scrolling sections as they are right now. Additionally, we could add some bar to show the progress for each section.

Then, following the content structure from other learning apps, we could change the course index so the section topics are presented in a list format. It seems like a more intuitive way to explore course contents. I kept the activity images instead of just using a common activity icon, I think it can help identify better each content.

Also, I think it would make it nicer to have the course title below the toolbar (the way it is right now in the LMH app), since most course titles are too long for the title bar and get cropped. Having the “Course index” as a permanent title, we can use the rest of that toolbar space to explicitly put some of the most interesting options as actions, like accessing the scorecard or searching for something within the course.

With this structure, we could also add the progress bar for each section (see in this mockup how the completed activities could be highlighted). Additionally, we can think about having a expand/collapse icon, so you can speed up the way to access different sections.

Any feedback or suggestions will be much appreciated!

1 Like

Additional features for course index

In addition to the new course index design, Alex and I thought about some features we could add to that page in the title section. Here I include mockups of both possibilities (could even have both at the same time?):

  • Next activity: A direct link to jump to the first activity of the course that the user has not completed yet, to be able to continue the course where you left it. Any ideas for the caption? Khan Academy for example shows “Up next” as the label for this functionality. This card could be dismissable.

  • Scorecard summary: just the most important figures of the user activity for that course, like the number of completed activities and quizzes

Drawer

If we decide to go with the bottom navigation bar, several of the current functionalities will be directly accessible from the main view, so we could remove them from the drawer.
Also, here I show a possible approach for the profile editing menu icon (to implement yet). Using this collapsible user menu, it would make sense to put the logout option there too.

Joseba, thanks so much for providing so many options for the UI updates. I’m including specific feedback and questions for each below. Overall the light colors and the list format look great and make everything much cleaner, but I do think there’s room to simplify even further.

  1. Updated color scheme
  • Love the light background and tabs. Having a dark theme for users to select would be nice and would be great to see mock-ups if easy, but is not high priority
  1. Bottom navigation
  • In the current LMH app, the scorecard, points, leaderboard and badges are all under the Scorecard page. Would this proposal separate the scorecard from the points? I’d propose keeping points as a tab on the scorecard page and only link to scorecard in the bottom navigation
  • I’d also propose removing the sync button from the bottom menu and keeping it in the drawer, since many users are in low-connectivity environments and won’t use the sync functionality often, and then using the space on the bottom navigation for other links (search, drawer, or profile, maybe?)
  • Like the idea of adding badges to the bottom navigation icons when they need attention
  1. Courses list
  • Agree that using the pie chart instead of the horizontal progress bar looks cleaner, and a search button would be helpful either in the bottom navigation or in the top toolbar
  • Also agree the list view with each course within a card is cleaner, but would actually remove the secondary description from the course index page and only show it on the course detail page when the course is opened
  1. Course index
  • Definitely prefer the list view instead of the continuous scrolling for the course index, and like the activity images instead of a common activity icon
  • Like keeping the course title below the toolbar and using the toolbar space for additional actions. Is it right that the bottom navigation will not be visible from this page, so it won’t be redundant to have links to the scorecard and points?
    • Is the scorecard in the mockup just for that specific course, or is it a link to take you to the scorecard page?
    • Does clicking the points total bring you to the points page or is it just displaying the total?
  • I like the expand/collapse option and the way that completed activities are highlighted, but think the progress bar makes the page a bit too busy. What if you kept the x/y activities completed but skipped the progress bar, or removed the progress bar entirely and just keep the progress circle on the icon?
  1. Additional features
  • Like the idea of both features, but think including both in that same space will make the screen too busy. What if you included the summary scorecard in a dropdown option? If only picking one I’d prioritize the Next Activity button over the summary scorecard
  • For the Next Activity banner, what happens if someone leaves in the middle of an activity? Will the link bring them back to their incomplete activity or to the first incomplete activity of the course?
    • Think the name should definitely be something short like Khan’s ‘Up next’ or ‘Continue’ or even ‘Welcome back’
    • Is there anywhere else you could add the link to pick up where you left off - maybe to the top of the course list so you see it right when you open the app?
  1. Drawer
  • The proposed updates to the drawer look good, assuming you switch the the bottom navigation. Would it make sense to move the link to the drawer as a button on the bottom navigation?

I know this is a bunch of feedback - let me know if there’s a better way to include feedback and questions for specific options. Thanks!

1 Like

Hi, Julie!
Thanks for all the feedback! In the next days I’ll post new mockups with your suggestions. I’ll try to answer all your questions:

Yes, the way I thought about it was to keep separated the scorecard (student’s performance and activity) and everything related to gamification, so the scorecard would show the activities completed, videos watched, quiz scores and so on, and the points section would have three tabs for the gamified part: points, leaderboard and badges. We can merge both sections and have the part about student performance as an additional tab.

I agree with you. Although the sync functionality can be important, it is not something that will be used very often, so we can think about a different option… I like the profile idea

Yes, the bottom navigation bar would only be visible in the main sections (whichever they end up being) and get hidden for any detail view. It is the way Google specifies it in its guidelines, as the navigation can get a bit confusing the other way.

Clicking on each of them would take to the scorecard and points pages for the specific course you are on (like in the last version of the app), i.e. only showing achieved points and stats from that course.

This is something we need to define. I can think of different possibilities:

  • The next activity as the first incompleted activity, that is, the first activity not marked yet as completed sequentially from the top of the course index
  • The next activity based on user last activity. The app keeps track of user activity, so in this case it will take to the last activity in case it was not completed, or to the inmediate next if it was completed. With this approach if would make sense to alsoo have the “Up next” banner in the courses list like you propose in the next question
  • A mix of both: it takes you to the last activity in case it was not completed, or to the first activity not marked yet as completed otherwise. This could be a bit confusing, I don’t know.

I think it would be against Google guidelines (https://material.io/design/components/navigation-drawer.html), and can be a bit confusing, since most apps that use the navigation drawer show it using the hamburguer icon in the top toolbar. Also, I think it should be an aside element instead of a permanent section, because is just a menu for accesing other screens, not a screen by itself.

Hope all this makes sense! Next I will prepare those other mockups and share them here, and we can start thinking on how to prioritize all these changes.
Cheers!

I made a couple of mockups to visualize some of your proposals.

First, things about the course index:

  • I agree that all the progress bars in the collapsed sections can make the view a bit messy. Here I removed the progress bar for each section, just highlighting the ones that are fully completed.
  • For the features in the top bar, maybe we could start with the scorecard collapsed, and it is shown if you press the course icon? This is how both bits would look together.

For the courses list, I liked your idea about having a general next activity proposal, so I added to the next mockup. I also removed the secondary description for each course as you suggested, and changed the sync action in the bottom bar with the profile one.

Thanks all for the mockups and feedback!

The new designs are looking very good, although we still have some decisions to make as to exactly which design we’ll go for in the end.

We’d really welcome any feedback/input from those using Oppia in other countries (Pakistan/Uganda/Niger etc) to ensure we can incorporate your preferences/ideas.

Cheers,
Alex

Two different layouts can actually be created for this:-
The Grid view layout can be set for devices with bigger displays like tablets, then for the smaller displays , the list view can be used.

2 Likes

Thanks Hakim :slight_smile:
Don’t know why I didn’t think of using both the layouts for different screen sizes!

We’re loving the simplified mock-ups! One last thought is whether it’s confusing for the user to have the navigation to the scorecard on the bottom navigation on some pages and the top on others? Would it make sense to have the bottom navigation visible on all pages, and only the search button in the top right?

1 Like

Hi all,
After call with the LMH team, I put up a selection of the ‘final’ mockups that we’ll work with in the upcoming sprint, see: https://docs.google.com/presentation/d/1EoNcl0Uet2CnDFeq7_29jRzzmbfoMDQ1JEkX6M0BXpU/edit?usp=sharing

So I wanted to share this here in case anyone has any burning issues/problems (!) with what we’re proposing to do.

@Julie & @hakimks - we’ll add in the idea about using the grid layout for the homepage when viewed on a tablet device - but probably there is a lot more that could be done to make the layout/UI more appropriate and make better use of the space available on tablet devices.

Cheers,
Alex

Regarding the use of the bottom navigation bar in all views, I think we should give it a second thought. I think it goes against Google guidelines, and can throw some navigation issues (all that I am talking is about user experience, but it can be problematic as well from the programming side). I’ll try to argue the best (and shortest) I can why we should only keep the navigation bar in the top-level views :grin:

Different quotes from the guidelines and Google blog:

  • Bottom navigation bar destinations should be of equal importance > destinations are top-level and disconnected from each other.
  • Each destination should be a discrete parent, not a sibling of the other destinations.
  • When the app navigates to a destination’s top-level screen, any prior user interactions and temporary screen states are reset, such as scroll position, tab selection, and in-line search.
  • Don’t use bottom actions to give users controls that act on elements in the current screen or app mode. If you need to provide this, use a toolbar action instead.

Besides sticking to the guidelines, I see two major issues:

Consistency

If the bottom bar is displayed persistently, there is a problem with the outcome of that button. It will be the same button in the same position, but depending on where we are in the hierarchy of the app, it will behave differently… this is confusing in terms of user experience, one user interaction should always present the same outcome.

Also, how can a user access now the global scorecard? One action hides the other.

Navigation

Another thing we need to keep in mind is that in Android, there are two ways to navigate through the views: using in-app navigation elements and the back button. We need to consider what would happen in each scenario when the back button is pressed. The back button usually means to go back (up) in the app views hierarchy, but what happens if we expose a child view at the same state as a parent view?

Let me explain it with an example (there are more scenarios like this one, it is just one of them):

  1. We are in the home screen, viewing the course list (home option active)
  2. We select a course and go to the course index (home option active?)
  3. We press the bottom scorecard option, taking us to the course scorecard (scorecard option active). Having the button work this way (being persistent and only changing the inner content), it gives a sensation that the course index and course scorecard are at the same level of hierarchy
  4. So now, what happens if we press the back button? Should it takes to the course index or to its parent view (course list?). This gets even more confusing if we are inside a course activity…

Also, inside a course scorecard, where should the courses bottom action takes us? To the list of courses? to the course index of the course scorecard we are visiting?

When we have to answer this questions making decisions and the user cannot tell beforehand where that action will take her, that’s a navigation issue that should be avoided.

So my recommendation is to keep the bottom navigation only for the three top-level destinations, and hide it when we are inside a course or any other child view. Or, if we want to keep it persistently, make its outcome consistent through the app: always take to the global destination (global points, scorecard, ect) - but this can also be confusing for the user.

I hope I’ve explained myself, let me know what you think!

Sources:

Hi Joseba,

Thanks for taking the time to explain the downsides and potential confusion of adding the bottom navigation to all pages. We’re happy to do what you think is best and keep the bottom navigation only for the three top-level destinations, but would still prefer to keep the top menu bar as clean as possible and keep either the scorecard or points with the search button, or eliminate both and just keep the search function in the course index.

Thanks!

Taking this into account I created a proposal for the Courses list screen for tablets. It has a layout called Staggered Grid which keeps the same column width size but respects the different heights of each element (depending on texts lengths) avoiding empty spaces in each row.

I think it creates a cool effect. What do you think?

I think it would look even better if each is given the same width and and height as well. I dont think the empty spaces in each row will affect it that much.

Ok, this is how it looks with the vertical alignment.
Now we have these two alternatives to compare