Revised Design for My Projects Page

I posted this to Git Hub (Revised Design for My Projects Page · Issue #343 · thunkable/thunkable-issues · GitHub) but I thought I’d share it because it can definitely be improved upon.

This is an attempt to combine the My Projects page with the Details page. It allows for all important links/buttons to be in one place (e.g. edit project, download, preview on web or device, etc.). It also allows for sorting of projects by name, date modified, size, etc. I’m finding that the current layout is overwhelming and I tend to lose projects now that I’ve made so many copies (it doesn’t help that launching a web preview of someone else’s project now automatically remixes it into my own projects list). And it’s awkward to have to click Details to see a web preview when it should really say “Web Preview” or something along those lines. And why have a Copy button with the same icon as the Remixes button? And why does the Remixes button actually open the project editor? I’m hoping my re-design below offers a bit more of an intuitive interface.

Here’s a mockup I made. The current design is shown in the top half of the image and my new design is shown in the bottom half. Sorry for the tiny screenshot!

4 Likes

Thanks for the feedback @tatiang,

My understanding is that this has been added to the roadmap and will be added later in the year.

I’d definitely like to see something like this as I have so many projects at the moment! :joy:

1 Like

Hi @tatiang, Thanks for your suggestion and we really liked your design and we’re working on solving this problem now. I’d like to understand better what are the problems you have encountered and ask you a few follow up questions:

  • Could you explain more why you tend to lose projects?
  • what does this mean? how you launched a web preview of someone else’s project? and what do you expect to happen?
  • One more question, could you clarify which remix button, where is this button? (a screenshot will be super helpful.) what do you expect to see after clicking on the Remixes button?

thanks again for your time and effort!

2 Likes

@yuexi2009 That’s great! Glad you’re considering moving forward on an improved design.

When I say I “lose projects,” I mostly mean that the current thumbnail/grid view feels like it offers very little in terms of organization. That fact that I can’t read the entire project name means that sequentially named projects such as StudentYearbook v1, StudentYearbook v2, StudentYearbook v3, etc. end up all appearing as “StudentYear…” or something like that. So I can’t tell them apart. And then the sorting is automatic by most-recently opened. So if I click on a project to view it – whether or not I make any changes – it’s immediately moved to the front/top of the grid. If I have to click two or three similarly named projects to check what’s inside, they are then immediately moved to a different spot in the grid so I can’t even remember which was which at that point.

And there’s no way other than the browser’s built-in method to search for a specific project. I know I might be a little unusual in this community but I have something like 200 projects so far and I’ve only been using Thunkable for a few months. In addition to the sequential naming that I already described, I like to tinker with new tools like this. I really enjoy helping people in the forums, so I’m constantly creating little demos or testing things they said aren’t working. That all adds up and the list of projects gets very long and unwieldy.

And – at least recently – whenever I previewed someone else’s project, it was automatically added to my list of projects. I think this happened when I clicked a project link they shared in the forums. The project would open and already be part of my own project list at that point. And I don’t see an easy way to determine which projects are mine from the grid view. A little color-coding or iconic symbols would be so helpful. Plus, just the option to add or not add a previewed project would be a welcome addition.

The remixes button shows how many times a project has been remixed. I’ve highlighted it here with a red arrow:

Screen Shot 2020-03-06 at 9.01.37 PM

I would expect that an informational symbol like that would not have a clickable action. And that if it did, it wouldn’t just open the project (same as the EDIT button) but do something different. I’m not sure what. I just found it a bit strange that it opened the project when I clicked on it.

2 Likes

You can try changing the project page using the script for the Stylish browser plugin

stylish_for_thunkablex_projectpage.txt (2.9 KB)

It looks like this to me

3 Likes

@actech I appreciate that and may try it but I’m really hoping – and it sounds like it may happen – that the product gets improved to include an option for list view, detailed view, etc. along with the grid view that some people may prefer.

1 Like

To switch the project view, use Greasemonkey to add a check box, radio buttons, or links at the top of the page that will change the markup style when clicked. If this is interesting, you can instruct students to do this using Javascript.

Thanks @tatiang for sharing more details, they are super helpful for us to understand better what a power user like you have been struggling with.
Thanks @actech for being so active suggesting solutions and sharing it with the community.
We’re working on improving the “My project” page, hope the improvement will make navigating between 200+ projects more explicit and reducing confusion.
I may have more questions that will need you guys inputs later, in the meantime please feel free to share any other concerns/suggestions you have.

2 Likes

Hey @general, this is unrelated to this current topic. Please create a new topic or search for one (it may have already been created). That way the community is organised and somebody else can search for your issue too.

Thanks.

1 Like

OK, sorry about that, will do,have deleted.

1 Like