Feedback for the New Web Design

[egekorkan]

The new playground web interface is available at https://playground.thingweb.io and we can start collecting feedback. You can provide any feedback you have but some questions that come to mind are:

• How snappy/fast it feels
• What do you think of the colors? Did you test the different color styles under settings?
• Do you manage to find what you are looking for? Is the UI intuitive?
• What do you think of the new examples? The example content is going to update but feedback on the overall design would be interesting.
• What do you think of the "Save" pop-up page?
• What do you think of the tabs below (validation, visualization)?
• The different areas (editor, console below, buttons on the left) are resizable. Does resizing work well for you?
• Any features you want or any feature you feel is useless for you?

[danielpeintner]

Some points form my side

• Nit: the initial loading icon "illustrates" to me a construction site. Maybe because of the shovel 🤷‍♂️. I personally think a loading bar or so is better... or gives a better impression ;-) ... and YES I know.. it comes from playground
  
• the icons in the left bottom corner keep circling ... I need to click "validate" or so to make it disappear
  
• when trying to use examples
  • It takes more time to find an example to start with... more clicks
  • I have to click "use as template" which wasn't clear to me when first looking for the "Apply/OK" button
  • the containers "Basic TD" or "contentType" looked more like a container for several examples in it.. not sure why 🤷‍♂️
  • in general it was a bit unclear how the dialog is structured .. also the filtering on top (does it work? I don't think so in my case). Does it make sense to have a tree structure of the examples .. like in Github.. just for example
    
• clicking "X"on a tab immediately removes the tab.. this kind of clicking might happen on accident

As said.. just some feedback... visually I like it much better 👍

[FadySalama]

Alright here we go 😄

• The UI feels great. It's clean, fast and honestly nice to look at.
• The themes are nicely implemented but I do hate that awful green color (you probably know that already 😉). Nothing bad technically only my personal taste
• The UI is clear and intuitive. Everything is where it is supposed to be, no issues at all with that
• The examples section is nice, but I have one remark and I did find some bugs (not sure if you already know they exist... I haven't checked)
  • The filtering dropdowns are not labeled. So you don't know what each dropdown is filtering ( you can assume it, but being clear is always good). I would also make sure that all acronyms are fully capitalized (URI, TD, TM)
  • The search bar is not working? I tried it but I wasn't able to get it to work. I also don't know where it is actually searching (name, description, inside the document itself?)
  • When clicking on an example, you have 2 options viewing or using as a template. Viewing does not work and I don't know what would be its benefit opposed to using it as a template (you can still view it this way). I would just have one button for selecting the example for viewing/editing
• As for saving:
  • Open in ediTDor feature does not work correctly (ediTDor always says it couldn't parse TD from link)
  • The text In link textbox is always black, even in dark theme
  • The Save As feature is not working ( I am using chrome btw.)
• Tabs below:
  • Validation loading animation starts automatically whenever the website is opened and remains like this until actual validation happens
  • Clicking on a "deactivated" Graph button still causes the Graph to reload (and the graph forgets that it was expanded/minimized)
• The resizing works pretty well all Things considered (One remark: When the browser window is very small, the title spills out of its area)
• Nothing seems useless.

[SergioCasCeb]

Hello there, thank you so much for the feedback. I am working on it and hopefully most of the issues should be fixed soon.

In regards to the problem with ediTDor, after checking with Ege and trying multiple things, it seems like the problem is most likely coming with how they are doing the caching in ediTDor. If you do a hard refresh on ediTDor the feature should correctly.

[egekorkan]

A new deployment has fixed:

• the icons in the left bottom corner keep circling ... I need to click "validate" or so to make it disappear
• Validation loading animation starts automatically whenever the website is opened and remains like this until actual validation happens

Additional comments to @danielpeintner :

the containers "Basic TD" or "contentType" looked more like a container for several examples in it.. not sure why

This will be fixed, the concrete examples and categories are quite flexible and I want to have a separate discussion on this.

Does it make sense to have a tree structure of the examples .. like in Github

We can have an alternate, I agree that the current design takes longer to explore since there are more buttons etc. They are already in that style at https://github.com/eclipse-thingweb/playground/tree/master/examples/td

It takes more time to find an example to start with... more clicks

Technically speaking it is 3 instead of 2 like before :D Or do you mean you need to "explore" more?

To @FadySalama:

• I see quite some comments on the examples page and we should have a discussion together with Daniel too. I think some parts are not clear and some parts are annoying (from UI).
• @SergioCasCeb search really seems to not work. Also, most TDs have same title and description so it is annoying to test
• Forgot to mention that "Show Snippet" is not working but the idea is to sneak peak into the relevant part of the TD, like showing the additionalResponses

The rest are real bugs that need to be fixed

[FadySalama]

Sure let us discuss this together @egekorkan @danielpeintner

[relu91]

Another cosmetic comment, I think a shorter navbar would be better to highlight the working area (smaller icons, text, and height)

[egekorkan]

Fixed in the deployed version

[mkovatsc]

Examples

• The boxes are quite big (the padding is way to large) for a good overview and typical file/TD selectors. I would reduce the padding and make it similar to the button dimensions.
• I got even more confused when I clicked (with the intent to load it) and they turned out to be collapsed info tiles. An indicating icon (down arrow/arc) left of that vertical line would be nice.

Tools

• When selecting a different main tab, the tool tab at the bottom becomes unselected. Because everything is grayed out now, it looks like the stuff is disabled. The tool tabs are not really recognizable as tabs. I would always keep one tool selected, either keep the same, save per main tab, reset to validation. (Also unclear why there is a trash can to deselect the tool tabs -- what gets deleted here?)
  • If it is about the cost of executing the tool, maybe introduce the possibility to minimize the tool panel (but still have a selection, which is executed on opening again). Trash can can become the minimize icon..
• Under Settings there is the "Auto Validate" setting, but when disabled, there is no explicit manual way to start validation -- I guess it is combined with the tool tab selector, but this is not so clear. Also it seems related to the previous point...

[egekorkan]

Under Settings there is the "Auto Validate" setting, but when disabled, there is no explicit manual way to start validation

Actually that is done via the validate button at the top left but I guess intuitively you expect something in the validation tab?

[mmccool]

I have a TD I want to validate, but it's not clear how to upload it. I can cut and paste but it's annoying as my TD is quite large. An upload button to read from a local file would be nice.

[SergioCasCeb]

Thanks for bringing that up! We’re actually working on a new feature that will allow you to import your TDs/TMs either manually or from a file. Additionally, we’re planning to support conversions from other formats like AAS AID.