Suggestion: Improving the UI and UX for Beginners

[Luxapodular]

Hi Teaching Tech and Community,

This is such a great resource. As an excited hobbyist, I've been watching teaching tech and other 3d printing channels for years, and was finally able to purchase a machine myself about a month ago!

I found this guide to be super helpful, but was a bit intimidated by just how dense it is! (Which is a good thing, but also can be quite a shocker to a novice!)

I took a stab at throwing together a redesign, and would love to know if you think something like this could be helpful or needed!

The goals of the redesign were:

1. Improve the information hierarchy of the site. It can sometimes be hard to know where to look!

2. Improve the contrast of the text. Much of the text uses the teal/white color scheme, which might not have enough contrast for individuals with low-vision and strained vision to read them. I tried to use a contrast checker to keep some of the old style :)

3. Understanding which guides to review. I saw a really helpful suggestion from @Pun-e in issue 327 for breaking up the steps of the guide into more manageable chunks. I decided to incorporate those as well :D

4. Displaying just enough text. The guides aim to display less text at once, to help reduce the intimidating factor of seeing all the details at once!

This was a first attempt and I am not a designer (software engineer by trade) so I'd love community suggestions and feedback on whether this is even a desired update. I think potentially working together to simplify user experience could really make this guide even better for beginners like myself!

Thanks again for the resources!!!

This design was made in Figma, a web-based design platform.

You can check the design out here and remix if you have ideas! https://www.figma.com/file/xBYBPtyIJU1SaeuFyDyNt9/Teaching-Tech-3D-Printer-Calibration-Redesign?node-id=0%3A1)

[KieranHolroyd]

take a look at my pull request #328 i converted the styles to scss & improved the efficiency of the site, i think this design looks nice, the current way it's structured would make this a ground up redesign i think, also you'd be affecting a few other pages too; i'd be happy to collaborate on this

[KieranHolroyd]

i don't use figma myself but if you could work on the other pages, even just a wireframe to work towards for the other pages, i think that would likely be incredibly useful i think having a quick pass for mobile design would be good as i imagine while watching the printer, you want to see the examples to see if it's working, and currently mobile optimisations are lacking slightly by todays standards, i think also with all the work that goes into a redesign like this, we may aswell try to implement i18n support too; given how global 3D printing is i think this is an oversight right now

[Luxapodular]

@KieranHolroyd thanks for the follow up.

Before moving forward, I would love some input from @teachingtechYT to see if this change is something they'd be interested in :). I want to make sure that whatever time we're able to put in is done in as efficient a way as possible!!!

If so, happy to start jamming on what a mobile design could look like and the other pages. I also think that the pages are similar enough it could be that making a simple template could be all that's needed to get things rolling.

[teachingtechYT]

Firstly, I'm not going to change the structure of how the site is built. Considering I am the person who will be writing 99% of the content, it has to suit my strengths and existing knowledge. I'm not against expanding my knowledge but it's rare I have a big chunk of time to put into the site so I have to work efficiently when I do.

As I said in #327 , most people will disagree on what order the steps should be in and how they are grouped. That's because everyone has a different approach and different types of printing.

One thing I do think can work well here is moving the tab headings to a left hand column. That will allow some more categorization, which is already on each tab under the "When required" heading. I don't want anything under headings but I have another idea for what I hope is a good compromise.

[KieranHolroyd]

it would still be the same structure, just a slightly different design and some optimisations on the current site, because you're loading around 100MB of files to the browser for almost every page, which i outlined in #328 It would likely be a change where you'd upload GCode files to a server and we pull them down at runtime when it's required, so you have to load less resources when accessing the site. on i18n support, while it may seem complicated it's pretty much a few json files (en.json, es.json, fr.json) which would be setup similar to this en.json

{
  "catagory_of_text": {
    "heading_calibration": "Teaching Tech 3D Printer Calibration"
  }
}

fr.json (google translated)

{
  "catagory_of_text": {
    "heading_calibration": "Teaching Tech Étalonnage de l'imprimante 3D"
  }
}

which i think isn't too complicated for the ease of use it could introduce, it would simply require a js library to handle the translations client-side i think, which would allow you to keep the same structure but possibly adding a class to translation fields in the html. edit: obviously this would be setup in a way where it would fallback to english, and the translation fields could be edited easily through github allowing for community translations

[Luxapodular]

Nice suggestions and I agree with @teachingtechYT that you wouldn't want to make things too arbitrary in terms of categories.

@KieranHolroyd I think a server based solution for this might be out of scope as it's probably a good idea to keep things as simple as possible. That would likely be nice discussion for a separate issue/PR to make sure it was being considered thoroughly.

@teachingtechYT If the above design is something you'd be interested in, let me know. I can try to take a stab at the left hand column design. If you'd rather attempt the draft/update yourself that's also fine. Happy to keep things as simple as possible with basic JavaScript/HTML, and the project having the same folder structure.

[KieranHolroyd]

@Luxapodular i was thinking more that a static site generator would be perfect here, no need for server stuff, just a build step with npm and you're done, it would make maintaining the lessons 10x easier i believe because you could develop it like a component based SPA, but compile it with the SSG down to some html pages.

[cyberman]

it would still be the same structure, just a slightly different design and some optimisations on the current site, because you're loading around 100MB of files to the browser for almost every page, which i outlined in #328 It would likely be a change where you'd upload GCode files to a server and we pull them down at runtime when it's required, so you have to load less resources when accessing the site. on i18n support, while it may seem complicated it's pretty much a few json files (en.json, es.json, fr.json) which would be setup similar to this en.json

{
  "catagory_of_text": {
    "heading_calibration": "Teaching Tech 3D Printer Calibration"
  }
}

fr.json (google translated)

{
  "catagory_of_text": {
    "heading_calibration": "Teaching Tech Étalonnage de l'imprimante 3D"
  }
}

which i think isn't too complicated for the ease of use it could introduce, it would simply require a js library to handle the translations client-side i think, which would allow you to keep the same structure but possibly adding a class to translation fields in the html. edit: obviously this would be setup in a way where it would fallback to english, and the translation fields could be edited easily through github allowing for community translations

I'm interested in to translate this great tool into my native language too.

But it's currently not easy to handle at the moment cause I have to do that in source code.

Some pieces of text are included in HTML, and other in js.

Maybe it would be a good idea to define a future route how to do it. Using json files sounds good to me. So interested people can focus their work on it so we could have some translations available from scratch with upcoming version.

Just my 2 cents... 🤗

[teachingtechYT]

I'm all for translations but time and time again people have told me how passionate they are, pledge that they will tranalate this site or my videos to make them more accessible and very soon after they lose interest and vanish. I can set something up but there is a very good chance no one will be willing to keep coming back as content is added and significant portions of the site will be missing in other languages.

[KieranHolroyd]

isn’t that still better than nothing? Also there’s a high likelihood most translations would be from google translate, which could be automated even and is something most people could do. People just leaving isn’t really an amazing reason to not try, and all the work is being done for free so it’s difficult to expect anyone not intimately involved to stay around if they get busy or something, but it only needs one person who tries to use the language which happens to have a missing translation to pop the English version in google translate then possibly fix some obvious google-isms I don’t think it would be too much effort on your part, and if you slap a “Community translations” message somewhere most people will understand and don’t expect expert translations from open source

On Tue, 26 Oct 2021 at 22:28, teachingtechYT @.***> wrote:

I'm all for translations but time and time again people have told me how passionate they are, pledge that they will tranalate this site or my videos to make them more accessible and very soon after they lose interest and vanish. I can set something up but there is a very good chance no one will be willing to keep coming back as content is added and significant portions of the site will be missing in other languages.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/teachingtechYT/teachingtechYT.github.io/issues/329#issuecomment-952342385, or unsubscribe https://github.com/notifications/unsubscribe-auth/AGB6QKCMOTE76ET366XF7PLUI4MRRANCNFSM5ARHJZZA .

-- Regards, Kieran Holroyd

[teachingtechYT]

It depends on the structure. You could have a page that has been updated and the translated version is not in sync and then half the text is missing. Or maybe a subtle change has been made to add a correction and make a process safer. If the traslation is not up to date, users are potentially following the wrong advice.

[KieranHolroyd]

You could simply version it, and set it up in a way that it can default to English if no other language is available

On Wed, 27 Oct 2021 at 21:59, teachingtechYT @.***> wrote:

It depends on the structure. You could have a page that has been updated and the translated version is not in sync and then half the text is missing. Or maybe a subtle change has been made to add a correction and make a process safer. If the traslation is not up to date, users are potentially following the wrong advice.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/teachingtechYT/teachingtechYT.github.io/issues/329#issuecomment-953306716, or unsubscribe https://github.com/notifications/unsubscribe-auth/AGB6QKEHXMVGH6GSWEVVSDLUJBR4TANCNFSM5ARHJZZA .

-- Regards, Kieran Holroyd

[cyberman]

I'm all for translations but time and time again people have told me how passionate they are, pledge that they will tranalate this site or my videos to make them more accessible and very soon after they lose interest and vanish. I can set something up but there is a very good chance no one will be willing to keep coming back as content is added and significant portions of the site will be missing in other languages.

I know what you mean, and I can understand it. I've translated for open-source software for more than 10 years (cms, ecommerce, forums and yes, also Matomo/Piwik).

But if there's no option for an easy translation, no one will do it. And no one will do a job like me and go into the sources. Cause it needs some knowledges for the coded sources. But coders are seldom translators. Coders don't like to translate.

So it's a need to provide a way to include also 3D enthusiasts for translations of your genius tool.

[cyberman]

isn’t that still better than nothing? Also there’s a high likelihood most translations would be from google translate, which could be automated even and is something most people could do. People just leaving isn’t really an amazing reason to not try, and all the work is being done for free so it’s difficult to expect anyone not intimately involved to stay around if they get busy or something, but it only needs one person who tries to use the language which happens to have a missing translation to pop the English version in google translate then possibly fix some obvious google-isms I don’t think it would be too much effort on your part, and if you slap a “Community translations” message somewhere most people will understand and don’t expect expert translations from open source On Tue, 26 Oct 2021 at 22:28, teachingtechYT @.***> wrote: I'm all for translations but time and time again people have told me how passionate they are, pledge that they will tranalate this site or my videos to make them more accessible and very soon after they lose interest and vanish. I can set something up but there is a very good chance no one will be willing to keep coming back as content is added and significant portions of the site will be missing in other languages. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#329 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AGB6QKCMOTE76ET366XF7PLUI4MRRANCNFSM5ARHJZZA . -- Regards, Kieran Holroyd

Please please not Google translation - beside you like comedy. Google translate doesn't work very well for technical stuff.

I'm using deepl.com for technical translations. It's not perfect to 100 percent, but much more understandable like other translators.

[cyberman]

It depends on the structure. You could have a page that has been updated and the translated version is not in sync and then half the text is missing. Or maybe a subtle change has been made to add a correction and make a process safer. If the traslation is not up to date, users are potentially following the wrong advice.

That's the risk of every open-source software which needs community or team work. After my experience, it's not really possible to synchronize all translations.

If so you need a strong community of enthusiasts which make it possible to set appointments for translation of a new version.

[cyberman]

It depends on the structure. You could have a page that has been updated and the translated version is not in sync and then half the text is missing. Or maybe a subtle change has been made to add a correction and make a process safer. If the traslation is not up to date, users are potentially following the wrong advice.

That's the risk of every open-source software which needs community or team work. After my experience, it's not really possible to synchronize all translations.

If so you need a strong community of enthusiasts which make it possible to set appointments for translation of a new version.

It depends on the structure. You could have a page that has been updated and the translated version is not in sync and then half the text is missing. Or maybe a subtle change has been made to add a correction and make a process safer. If the traslation is not up to date, users are potentially following the wrong advice.

An option could be versioning of translated files. When community translation version differs to your version, you can show a warning mark "translation is based on version x.xx".

A lot of community based tools (for example WordPress) are using separate translation tools like transifex. So you have also an status overview for every translation.

https://transifex.com/open-source/

[cyberman]

I'm all for translations but time and time again people have told me how passionate they are, pledge that they will tranalate this site or my videos to make them more accessible and very soon after they lose interest and vanish. I can set something up but there is a very good chance no one will be willing to keep coming back as content is added and significant portions of the site will be missing in other languages.

Some times ago I was going a little bit into YouTube Studio. If I remember right, there it's possible to create videos of existing videos but with translated under titles.

That was my idea for video translation

[cyberman]

Nice suggestions and I agree with @teachingtechYT that you wouldn't want to make things too arbitrary in terms of categories.

@KieranHolroyd I think a server based solution for this might be out of scope as it's probably a good idea to keep things as simple as possible. That would likely be nice discussion for a separate issue/PR to make sure it was being considered thoroughly.

@teachingtechYT If the above design is something you'd be interested in, let me know. I can try to take a stab at the left hand column design. If you'd rather attempt the draft/update yourself that's also fine. Happy to keep things as simple as possible with basic JavaScript/HTML, and the project having the same folder structure.

Could you provide a merge for that layout? Or a different layout which make it easier possible to create a web app of this genius tool?

[KieranHolroyd]

honestly i think possibly a good idea for this may be rewriting the site for vuepress, which could bring two benefits a) it will be much easier for adding new or changing existing content and b) they have internationalisation support https://vuepress.vuejs.org/guide/i18n.html It'll also seperate the tools from the heavily markdown based text sections

[cyberman]

honestly i think possibly a good idea for this may be rewriting the site for vuepress, which could bring two benefits a) it will be much easier for adding new or changing existing content and b) they have internationalisation support https://vuepress.vuejs.org/guide/i18n.html It'll also seperate the tools from the heavily markdown based text sections

I think a complete rewrite needs a lot of man power. This couldn't be the way at the first step. Maybe later.

The current page is using jquery. There's similar stuff available for i18n too. Please read this article

https://lokalise.com/blog/localizing-apps-jquery/

All is available - i18n, json, locale switch and fallback with HTML5 attributes.