workshop tools concept & design

[mimi-uxui-dev]

@todo

• make workshop tools concept & design
  • @input 📦 what have we built hackmd from History : How it all started #45
  • @input 📦 history content slides from History : How it all started #45
  • @input 📦 brief summary slide deck from project brief @mimi_uxui-dev #42
  • @input 📦 concept outline description from get familiar with wizardamigos #46
  • brainstorm UI/UX
    • video can be self explanatory so no need a 140-256 characters description; and if the user really must add description they can put it in the workshops info/desc. if we stick with this approach the workshop will stay clean and neat
      • @input ❓ idea in section C from #issue 59
    • each workshop has the info/desc section which is a markdown file, and if it's enough, users can create separate workshops and link them in the workshop.json#unlocks section.
      • @input ❓ idea in section C from #issue 59
    • Create workshop
    • Edit Workshop + preview
    • Delete Workshop
  • sub component concepts
    • Display workshop in a tiling window/folder manager (= "folder editor/tool") concept & design #59
    • Display workshop description/info (e.g. markdown viewer)
    • Display lesson content (e.g. video player)
    • Open in a new window skill tree from workshop
    • make json tool components #75
    • generic practice tool concept & design #53
  • create slides, wireframes and markdown files
  • @output 🏭 workshop viewer slides
    • next make workshop tool components #40
  • @output 🏭 workshop viewer linked markdown file per slide in "./slides/<slidename>.md"
    • next make workshop tool components #40
  • @output 🏭 workshop viewer wireframes
    • next make workshop tool components #40
  • @output 🏭 workshop data generator slides
    • next make workshop tool components #40
  • @output 🏭 workshop data generator linked markdown file per slide in "./slides/<slidename>.md"
    • next make workshop tool components #40
  • @output 🏭 workshop data generator wireframes
    • next make workshop tool components #40

---

@info

...

[serapath]

feedback 2022.03.17

edit/add exercises is similar to adding gigs ... probably the same process more or less.

it neds a tool to make new gigs/exercises and then to "publish" or "tag" or somehow "attach" it to a specific workshop, so they show up there.

creating the exercise (like a gig) is probably not part of the "workshop component"

[mimi-uxui-dev]

results 2022.03.19 :

• I have removed edit/add/delete exercises from the @todo above, in addition to delete/create/edit+preview workshop because the users are suppose to do this from their profile and put them in wizardamigos.github.io#65Workshop innerComponent

[mimi-uxui-dev]

Worklog 2022.03.20 : Workshop Wire Frames

[serapath]

feedback 2022.03.21

results 2022.03.19 :

• I have removed edit/add/delete exercises from the @todo above, in addition to delete/create/edit+preview workshop because the users are suppose to do this from their profile and put them in wizardamigos.github.io#65Workshop innerComponent

yes, maybe we need to rename "workshop innerComponent" to something more specific that captures what it actually is and does instead of "inner component" :-)

[serapath]

feedback 2022.03.21

Worklog 2022.03.20 : Workshop Wire Frames

I think the following feedback should probably be copied into todos and new or corresponding issues for each part of the feedback. we definitely need some extra components and probably wireframes for those :-) ...

our main goal is still the "WA summary slide deck", so some main slides and the sub slides of it might not be enough to capture all the content, so additional details that are important to specify exactly how things should work and be implemented later might need to go into the linked markdown files for those slides, where we can also link to additional screenshots of wireframes and descriptions if it does not fit into the main slide deck at the end, because the main slide deck should be just a summary.

---

regarding bottom right drop-up menu/overlay:
we could do it like that menu, but as a user i would never imagine whats behind that menu until i click it.

• what if the bottom menu bar had one tab for each lesson?
• maybe a user could use, e.g. <ctrl+alt+tab> or <ctrl+alt+shift+tab> to move back and forth between them ?
• what if each tab of those bottom tabs could have not one "content" but a tiling window manager grid of content?
  • so each lesson tab on the bottom could show a new tab grid with different video/notes/tools/etc...
• But the chat is for all lessons, so maybe then we need one tab that never changes and is split in maybe:
  1. chat
  2. lesson(s)
  3. gigs
• But maybe while doing the lessons you dont always need the chat or gigs and want to use all screen space for lessons
  • so "ZEN MODE" could temporarily pick a tile from the tile grid and make it "full screen" or "maximize" it to hide others
  • so when the lessons tile then takes all screen space to hide chat or gigs but user exist "ZEN MODE", the lessons would fit back into their original slot
  • so lessons would be again visible next to chat and gigs
• also there never should, but what if a teacher packs 30 lessons into a workshop?
  • they wont all fit into the tabs bar, especially on smaller screens
  • so we need to be able to deal with that...
• "pagination nav component" (but not classic pagination) ...imagine:
  • a tab can be a file so it shows the content in the content area of the tile
  • a tab can be a folder, so it shows a tile grid of its files in the content area of the tile
  • the tab in the tab bar shows maybe a current lesson folder, but next to it there exist other lesson folders in the workshop.
    • so the tab could have a small [<] and [>] button to to to previous/next lesson
  • "pagination" can also happen when you click on the tab itself, so you can then see an autocomplete dropdown to see all other folder options at once
    • e.g. lesson1, lesson2, lesson3, folders but also files
    • if you click on one file, its content replaaces the the "folder tile grid" in the content area with the file content
    • also there should be a ".." option to "go one folder up", in case you have many nested folders
  • the [<] and [>] buttons from the tab become the top and bottom arrow on the scroll bar when the tab dropdown is expanded
  • if e.g. a folder contains 70 other lesson folders, you can either scroll in the tabs drop down or type into the tab name a file/folder to autocomplete and jump to it
  • pressing enter or clicking on a folder or file in the drop down selects the different lesson and updates the tile grid with that lesson content:
    • video, info, tool, etc... as tile grid in the content area of the "lesson tile"
  • if a folder has a lot of content and therefore a very long dropdown list, maybe it can be expanded too, to temporarily to better see and select from all?
    • the dropdown could then have a status bar then with e.g. 24/70 to indicate to you which folder you currently scrolled to ...
      • maybe the "TAB BUTTON" itself should be the status bar and the dropdown collapses/expands when you click on it?
      • and you can type into that status bar to "jump" to an exact folder, e.g. [47]/70 + ...or autocomplete if you want...
    • maybe prev [<] and next [>] buttons to navigate very slowly folder by folder, maybe on top and bottom of the scroll bar itself?
    • maybe even similar to pagination a little input field to decide how many backward/forward items a button click on [<] or [>] does?
      • imagine 10.000 tab folders makes scrolling super sensitive and too fast, but clicking buttons would be too slow
      • or in that case a user would always use autocomplete search or type a number to jump and then from there click buttons to fine tune
      • or maybe a +/- button to increase/decrease scroll speed?
        *lastly: an ACTION button, so default means the content would open in the content area of the tile
    • either showing a tile grid of folder contents
    • or showing the content of a single file
    • BUT: maybe the user wants to open it instead in a new tile, just like links could be opened in current or new tab

So in summary:

• the little menu has "lessons", "Exercises/Gigs", "chat", "notes", and "description" which should all be tabs i think
• for progress we have the issue that we dont have a metric to define what progress means.
  • how do we test that? what if somebody quickly skims through all the lesson videos?
  • does that mean progress is no 100%?
  • maybe for now we have to leave out progress but we can indicate if somebody ever solved exercises/gigs, so there is only DONE or not for a workshop
• now when it comes to "recommendations" and "dependencies", those are technically in the "minimap" ...maybe thats what the little menu should become?
  • a minimap to only show recommendations and dependencies? :-)

---

regarding gigs and chat

• while lessons or info/description are file contents, a chat is not, but its dynamic content and gigs is also dynamic content
• so a chat program (component) will open in a tab and display chat content
• for gigs that will be quite similar, but the different is, the "content" of that chat are more structured messages
  • a github issue the way we make them can be seen as opening a chat with an initial description of the task
  • every comment on an issue has a specific type and structure (e.g. worklog video, feedback, results, ...and now also "payments" :-))
  • also instead of updating the initial comment with todos done or todos added, there will be messages referencing a todo or making a new one
  • so that would be the raw single gig chatlog, where each update to the chat log is digitally signed by a participant
  • a chat program component can take the log and display it more structured like a github issue
• the entire gig component will then be more like a "gig chat server" which has many gig rooms, where each gig chat room comes with a gig chat log
  • exactly how a candidate applies and then starts a gig made by an author will depend on some sort of application/selection process
    • initially probably "first come, first served" :-) ...we'll see
• in terms of FILES inside an e.g. "workshop folder" it might be called workshop/chat.json or workshop/gigs.json
  • it will each have a not yet well defined structure, like, e.g.: { type: "...address of default/preferred chat program to open the chat...", data: "...link to chat..." }

---

regarding notes
one more thing. in "file systems" you can of course make files and folders, but you can also make "links" to files and folders.
sometimes called bookmarks, sometimes called symbolic links and the likes.
So if somebody creates new notes, maybe with the "notes tool"? ...the workshop or place where it was created should definitely get a symbolic link to it.
Maybe a single note is a note for many workshops, not just one and maybe it contains embedded images and diagrams, but to me that says a note should a folder

• note1/index.md
• note1/media/diagram.jpg
• note1/media/**/*
  Also, the notes files should probably have a specific json file, e.g. note.json where we can store all the places (e.g. workshops) where a note is linked?

[serapath]

feedback 2022.03.21

e.g. when you click on top of lessons another overlay with a back button shows on top

that is great and kinda compatible with the "dropdown" or "dropup" menu from the lesson tab below the content iteself :-)
Just the "completed checkmark" can not be meaningful, because we dont have or plan any metric yet to verify lesson.
we could though define a quick "multiple choice" format for the "lesson player component" so a teacher could define quizzes.
If a learner solves a quiz exercise, we indicate it as progress... maybe some idea we should capture somebody to not forget.

Basically, the "bottom right menu overlay" is somehow already going into the form factor and content of that dropdown menu to select files/folders :-)

Main > Content Info wireframe to show a 3 split tiling with "content, tool, info"

I think we probably need "tiles in tiles" :-)

1. The bottom menubar would have a single tab called workshop title and the content would be split into 3 parts
2. the "info/description" tile
3. the "video content" tile
4. the "tool" tile

Now how to define the default layout of the grid based on the available files in a workshop?

• can you temporarily collapse a single tile, but not close it ....?
• can you temporarily expand a single tile in the grid to take 100% of the space so you see more details?
• can you re-arrange the tiles and have the browser remember it for you?
  ... those kinds of things i would maybe write down as questions in the info section of the top level tiling window manager component comment,
  but i would not yet try to find an answer, because that goes into too much detail and we want to also finish the presentation at some point :-)
  ...just so we wont forget about it :-)

Main > Gigs list
This is pretty cool, i like it.
One thing to have in mind is that on a technical level, the list of gigs is like a list of chat rooms
Its unclear yet what the application procedure to enter a chat room looks like, but once you enter the chat room
you have a structured chat where gig author and gig worker exchange messages of certain types, like "worklog videos", "feedbacks", "payments", "results", etc...

I also love the "gig status" (open/taken/pending/...) those are also perfect to trigger notifcations to those who subscribe once something changes :-)

regarding notifications
super cool that you have a notification bell for the workshop and also a notification bell for the gig list

• Given the workshop has a tab bar
• and the content area of a workshop can have many tiles, each also with a tab bar
• and given we already have an open in new tile or open in current tile action button idea (from previous feedback)
• maybe yet another action could be "subscribe to notifications"
  • which means gigs or chat news when you click it there
  • but it could mean file updates when you click it on a description/info of a worksho
  • or notification for anything if you click it directly on the workshop itself

[mimi-uxui-dev]

Worklog 2022.03.22

Feedback 2022.03.22

• How about we put the menu in the top nav bar next to profile? it would be more accessible, and users won't have a difficulty noticing it
• Q : what if the bottom menu bar had one tab for each lesson? interesting feature, but what if the workshop had 50 or just 10 lessons wouldn't that be crowded; how about we make just 1 icon down there or 1 icon+title which is for Content then the user can click/hover it and it open a drop-up/overlay with all the lessons ?
• Q maybe a user could use, e.g. <ctrl+alt+tab> or <ctrl+alt+shift+tab> to move back and forth between them ? that's a feature we will use, maybe to toggle from tools to nots .. etc.
• what if each tab of those bottom tabs could have not one "content" but a tiling window manager grid of content? so each lesson tab on the bottom could show a new tab grid with different video/notes/tools/etc...But the chat is for all lessons, so maybe then we need one tab that never changes and is split That's the default behavior, i thought this from the start, each workshop have one chat, one tool, list of lessons, list of gigs and a list of exercises
• ZEN MODE i guess it's not the same as the case where the user toggles off the chat and tool and leaves just the content tile which will become full screen automatically 🤔 .. all add tile grid in addition to shortcuts :-)
• I think the idea of pagination nav component is 🔥
• Why would content be a folder or nested folders we can add to each lesson a list of links and downloadable like pdfs if that's the point .. What i'm trying to say is that if a lesson have a folder maybe that should be an entire new standalone workshop, isn't the goal of a workshop to be direct and straight to point, dedicated to just one thing.
• regarding note, so we're not gonna use HackMD, but we will create our own tool? i'm cool with the folder structure, it makes sense and is organized. Also, i think each workshop.
• Q. can you temporarily collapse a single tile, but not close it ....? i thought about this when i was designing, well, all the tiles available are collapsible but you cannot close them, because they are necessary if the workshop-creator didn't find a certain tile crucial then why would they bother to add it, therefor, a user can toggle everything which give them more control on the tiles layout :D
• Q. can you temporarily expand a single tile in the grid to take 100% of the space so you see more details? not yet, but if you toggle off all the tiles
  except the desired tile that you want to go 100% of the space, then yes it will take all the available space
• can you re-arrange the tiles and have the browser remember it for you? yes, you can rearrange the tiles and shrink/expand each tile as you with and the browser will remember them and save it for you :D
• regarding notifications, maybe we should have just one whish is for the entire workshop, if a user activates the notification for a workshop they will be notified for everything: chat updates, new gig, new message in the gigs chat, a file update and exercises update

[serapath]

feedback 2022.03.22

Worklog 2022.03.22

Feedback 2022.03.22

• How about we put the menu in the top nav bar next to profile? it would be more accessible, and users won't have a difficulty noticing it

not sure how that would look. if what you mean is what you showed in the worklog video, then i think that goes into the right direction, but maybe i'm not entirely sure what you mean here :-)

• Q : what if the bottom menu bar had one tab for each lesson? interesting feature, but what if the workshop had 50 or just 10 lessons wouldn't that be crowded; how about we make just 1 icon down there or 1 icon+title which is for Content then the user can click/hover it and it open a drop-up/overlay with all the lessons ?

yes. i thought thats what i also described in my last feedback further on :-)

• Q maybe a user could use, e.g. <ctrl+alt+tab> or <ctrl+alt+shift+tab> to move back and forth between them ? that's a feature we will use, maybe to toggle from tools to nots .. etc.

i think all these little snippets of information and micro decisions we have in the chat, worklogs and in the feedback discussion below issues will get lost, because we probably wont go again through it to read everything. I suggest making an issue or adding that kind of decision about e.g. <ctrl+alt+(shift)+tab> in the info section in the top level comment in the corresponding issue or even into a markdown document which we add to the datdot-ui repository, so we can later link to it from the slide deck, no?

• what if each tab of those bottom tabs could have not one "content" but a tiling window manager grid of content? so each lesson tab on the bottom could show a new tab grid with different video/notes/tools/etc...But the chat is for all lessons, so maybe then we need one tab that never changes and is split That's the default behavior, i thought this from the start, each workshop have one chat, one tool, list of lessons, list of gigs and a list of exercises

yes, it was more meant as each piece of content comes from a file or folder and gets visualized in the tiling window manager. a tile shows a file, but if a tile shows a folder, that tile would be split into a sub tiling window manager to show the content. i think i described that in a lot of details in the last feedback

• ZEN MODE i guess it's not the same as the case where the user toggles off the chat and tool and leaves just the content tile which will become full screen automatically thinking .. all add tile grid in addition to shortcuts :-)

how would the user "toggle off" the chat?
where would the chat go? just close?
how can they toggle it on?
of course the user can always close tiles and later go to the tab bar and open it again.

...but what if there are 5 open tiles and one of them is the video and the user wants to see the video full screen? ...zen mode would enable that.

here is zen mode in vscode
but i figured out it doesn't work exactly like in some older editors.

1. it does get rid of unnecessary menues and stuff and shows only your editors

• but multiple if you have a grid of editors open in vscode

2. i was hoping for zen mode to take ONLY the editor tile in the grid which i focus or the editor tiles which i selected and then when i go into ZEN MODE, it hides all the other editor tiles i did not focus and/or select ....but vscode just puts all editor tiles into zen mode

Many tiles are great for overview
One or a few selected tiles are great for a temporary focus, until i exit and go back to the overview tile grid with everthing. thats the idea.

• I think the idea of pagination nav component is fire

🔥 🔥 🔥 🚀 👩‍🎤

• Why would content be a folder or nested folders we can add to each lesson a list of links and downloadable like pdfs if that's the point .. What i'm trying to say is that if a lesson have a folder maybe that should be an entire new standalone workshop, isn't the goal of a workshop to be direct and straight to point, dedicated to just one thing.

haha, yeah, i see, the idea wasn't yet well described i think.

the workshop.json describes a little file system with files and folders, just imagine

{
  "title": "create workshop",
  "icon": "https://i.imgur.com/Ph0WP2l.png",
  "chat": "https://gitter.im/ethereum/play/~embed",
  "lessons": [{
    "title": "Step-by-step tutorial for creating workshops",
    "lesson": "//slides.com/ninabreznik/deck-17/embed",
    "info": [
      "In this step by step tutorial we will walk you through every little step ",
    ]
  }, {
    "title": "Step-by-step tutorial extended",
    "lesson": "https://www.youtube.com/watch?v=DEH0eoppbyc",
    "tool": ''https://wizardamigos.com/make-workshop",
    "info": "./info.md",
  }],
  "needs": [
    "https://other-workshop-1.com",
    "https://other-workshop-2.com",
    "https://other-workshop-3.com",
  ],
  "unlocks": [
    "https://recommended-workshop-1.com",
    "https://workshop-2.com",
    "https://workshop-3.com",
  ]
}

means

`/docs/create_workshop/icon.png`
`/docs/create_workshop/chat.json` // from https://i.imgur.com/Ph0WP2l.png
/*=>*/ { "type": "https://gitter.im/", "data": "ethereum/play/~embed" }

`/docs/create_workshop/needs/1.json`
/*=>*/ { type: "https://wizardamigos.com/workshop-viewer", data: "https://other-workshop-1.com" }
`/docs/create_workshop/needs/2.json`
/*=>*/ { type: "https://wizardamigos.com/workshop-viewer", data: "https://other-workshop-2.com" }

`/docs/create_workshop/unlocks/1.json`
/*=>*/ { type: "https://wizardamigos.com/workshop-viewer", data: "https://recommended-workshop-1.com" }
`/docs/create_workshop/unlocks/2.json`
/*=>*/ { type: "https://wizardamigos.com/workshop-viewer", data: "https://workshop-2.com" }
`/docs/create_workshop/unlocks/3.json`

`/docs/create_workshop/lessons/`
/*=>*/ { type: "https://wizardamigos.com/workshop-viewer", data: "https://workshop-3.com" }
`/docs/create_workshop/lessons/Step-by-step_tutorial_for_creating_workshops/`
`/docs/create_workshop/lessons/Step-by-step_tutorial_for_creating_workshops/lesson.html` // from "//slides.com/ninabreznik/deck-17/embed"
`/docs/create_workshop/lessons/Step-by-step_tutorial_for_creating_workshops/info.md` // content: "In this step by step tutorial we will walk you through every little step "

`/docs/create_workshop/lessons/Step-by-step_tutorial_extended/info.md`
`/docs/create_workshop/lessons/Step-by-step_tutorial_extended/lesson.json`
/*=>*/ { type: ''https://www.youtube.com/watch?v=", data: "DEH0eoppbyc" }
`/docs/create_workshop/lessons/Step-by-step_tutorial_extended/tool.json`
/*=>*/ { type: ''https://wizardamigos.com/make-workshop", data: null }

• regarding note, so we're not gonna use HackMD, but we will create our own tool? i'm cool with the folder structure, it makes sense and is organized. Also, i think each workshop.

We might totally use hackmd for the beginning but we might also create our own tool or rather use hackmd and adapt it, because the code behind hackmd is open source :-)

• Q. can you temporarily collapse a single tile, but not close it ....? i thought about this when i was designing, well, all the tiles available are collapsible but you cannot close them, because they are necessary if the workshop-creator didn't find a certain tile crucial then why would they bother to add it, therefor, a user can toggle everything which give them more control on the tiles layout :D

Interesting. Technically if they close something they could go to the "tab bar" and open it again from the dropdown/dropup menu, but would be cool to have wireframes to play around with the ideas.

• Q. can you temporarily expand a single tile in the grid to take 100% of the space so you see more details? not yet, but if you toggle off all the tiles

yes, technically if you toggle off all tiles according to what you said about toggeling this would work, but would maybe be a lot of work if there are many tiles open, so the "ZEN MODE" idea was or is to select a specific tiles or a few and make them "full screen", thus maximize them and hide the other tiles behind them, probably by making the selected ones an overlay? ...and then when exiting "ZEN MODE" put every tile back into the tile grid where they belong or where they were before basically.

except the desired tile that you want to go 100% of the space, then yes it will take all the available space

• can you re-arrange the tiles and have the browser remember it for you? yes, you can rearrange the tiles and shrink/expand each tile as you with and the browser will remember them and save it for you :D
• regarding notifications, maybe we should have just one whish is for the entire workshop, if a user activates the notification for a workshop they will be notified for everything: chat updates, new gig, new message in the gigs chat, a file update and exercises update

maybe or maybe not. its technically not super hard to differentiate.
imagine a workshop is very active and has lots of gigs and updates... similar to a github repository with lots of updates and many issues ...maybe you want to only get updates around a specific issue and not everything else.

[mimi-uxui-dev]

Worklog 1/2 2022.03.24
Worklog 2/2 2022.03.24

Results 2022.03.24
Wire-frames iteration 5

[serapath]

feedback 2022.03.24

Worklog 1/2 2022.03.24

---

regarding Content drop down menu

It looks good and has the "dropdown pagination element thing" from previous feedback, otherwise:

1. action icons:
   • creating files/folders is probably cool, so a learner can make new notes, but lets not forget to "link" existing notes into the workshop instead of creating new ones
     • because the autocomplete list by default should only show files/folders of that workshop but not any other file the user might already created elsewhere
     • but if that other file was maybe a note, maybe the user wants to link it here under this workshop?
   • we should definitely allow the actions to open an existing file/folder in the same or a new tile window though
2. It duplicates the information about "currently open tabs"
3. the bottom bar already shows me the currently open tabs, so we can save space and don't need that again
4. also the currently open ones could alternatively be sorted" on top of the "content list" of all available lessons or just have a different color or be inverted (e.g. black background, white font)
5. BUT: indicating the FOCUS with a darker green is great and lighter green with open non-focused tabs and and white for the rest is great :-) maybe we can keep it black/white for now though
   • but still use this even with black and white to get rid of the "currently open" or "currently focused" ..this can all be indicated by e.g. bold font for focus, e.g. black background/white font for open
6. regarding "hover", we should keep in mind that all navigation should also work on mobile with touch, so hover doesnt exist there
7. for not focused and not open but hovered files/folders (hover doesnt exist on mobile anyway), i would just use an even lighter color (e.g. grey? to keep things black/white for now)
   * i think the "closed eye" is overkill
   * closing a tab via "eye" icon is interesting, but will a user ever use it?
   • => wouldn't a user expect a little "x" next to the tab to close it.
   • to keep things more minimal i would focus on "only one way for everything", so closing is either on the tab or in the menu to keep the screen less cluttered and everyone learning the same way to use the app
     I think we need a more general concept (not just open/closed eye), but for actions that you want to do to a certain list item
   • open in current tile window
   • open in new tile window
   • close tile window
   • minimize tile window?
   • maximize tile window?
   • select tile window ...maybe to "maximize it together with some other tabs into "zen mode"?
     So while in text editors you have the "file menu" on the side of all your editor windows (e.g. vscode)
     I think in our case, the "file menu" should be what opens as a dropdown/dropup menu on each TAB if you click it.
     While the file menu is collapsed, it just shows the current tiles file/folder name in the tab button
8. brilliant to have the Folder XYZ ">" icon to show content, because instead of opening the folder as a new "sub tile grid", a user might just navigate to a specific sub file and open that instead

• when clicking on the folder, its again yet another actions, could be:
  A. open all folder content as a sub tile grid in currently focused tile window
  B. open all folder content as a new tile window tab (with all content as a sub tile grid), but its not yet focused
  C. expand the folder in the menu to see what is in it without yet opening it in the tile grid
• now regarding option (C.) this can quickly lead to endlessly expanded trees and you have to scroll a lot
  • e.g. on macos, you can just instead go a level in or a level out, which means:
    1. all the top level files/folders shift out of view to the left side of the menu
    2. all the content of the folder shifts into view from the right side of the menu
    3. a little "back button" or "pathname", e.g. "workshop title > FolderXYZ > subfolder ABC > lesson1: blablabla" allows you to move back up to any of the parent folders
  • that way menu content does not become overwhelming and users still know where they currently are

---

regarding menu menu

you say that we might only need to bottom tab bar for the lessons
and that we dont need a tab button for "tool" or "info/desc" in the bottom tab bar.

I agree that we should not have a "tool" or "info/desc" button in the bottom tab bar.
BUT :-) ...each tile (maybe only if you focus the tile) could have a small little tab that slides/fades in when focused?
And that little tab button shows the file name and works similar to the lesson tabs in the bottom menu bar, but just for that tile

---

regarding tool button in title bar

its interesting that toggle decides how the different tiles show, i was more imagining that you can drag'n'drop them like in vscode instead or use action buttons to minimize/maximize.
I think i would still prefer that over toggeling things on/off until i have the right order of tabs.
I think i would just love to "grab" a specific tile window by click/press and hold its tab and then drag it to a new position

Also, the way i was imagining this earlier is, that there can be no tab without an associated tool

1. It means every single tab has a tool.
2. The lesson tab uses for example a video player
3. The support chat tab uses a chat program
4. The info/description tab uses a document viewer tool
5. the tool tab basically uses a custom tool based on the workshop
6. a folder tab uses the tiling window manager tool where each tile is based on the tool and content of the folder content

file/folder/tool-idea
All those tool tabs also always come with a specific file opened by default
If you select from the "dropdown" menu a specific file/folder,
that will open a new tab with the tool which depends on the "file extension" of the selected icon,
but the tool will load the selected file/folder content immediately

---

regarding info/desc button in title bar

same feedback as for tool in the sense that everything is supposed to be a tool, etc...

---

regarding chat button in title bar

same as info/desc or tool button.
again, if its part of the tile grid, instead of toggle on/off, it would be cool to also resize it or even maximize it to focus on chat and give more space to talk.
Thats of course true not only for the chat but for any tile a user wants to focus on so it would be a feature of the tiling window manager

---

regarding gigs button in title bar

yeah, same as the previous buttons in title bar

Now how should this work in general regarding the tool and content?
The "gigs" content looks maybe the way you designed it but it represents a "list of chat rooms" and people need to apply to enter those rooms
We don't have a detailed concept yet for how the application process works, but you gig description screen is definitely part of it.

again, should a user be able to have the "gigs" list open in one tile, but then open one or more gigs in parallel in different tiles to read through them and compare them before applying?
I think that would be useful.
So a user would open the "gig chat tool", which is what maybe gets opened when a user selects a "gig room" from the gig list
The gig list itself might be a different tool... these are details we can brainstorm about.

But This would all make it fit into the bigger picture* where:

1. everything is files/folders/links
2. a tiling window manager opens all of it in one or more tiles and even nested tiles
3. each tile has a very small minimal tab showing the file name and allows to

• click and drag it to reposition the tile in the grid
• click an action on it to maximize/minimize/select the tile
• click the tab to expand a dropdown/dropup menu for that tiles tab to select other files/folders to open them in this same tile or a new tile

---

1. TECHNICAL
One thing is ... when you think of the gig list as compared to our dropdown/dropup menu for files/folders

1. each gig item has an action (e.g. apply ...maybe more than that)
2. each gig can be opened in same or new tile window
3. you can autocomplete search through the list (same as in the files/folders dropdown)

...so WHAT IF each "gig" was made by the author with the "gig-editor" and was saved as a "gig file", which means the gig list tool is just showing the list of gig files ???

Now if that is the case, maybe the "gig list" is just our "files/folder dropdown with a bunch of extra custom defined actions in addition to the standard ones and it has a slightly different theme and in this case,
it (=the files/folders dropdown) gets opened as a tool inside a tile instead of when you click on the tab of a tile

...still, we could re-use the logic and the entire component we are going to implement for gigs and it works in the exact same way regarding UX

---

2. CONTRACTUAL
Another thing is, that clicking a "custom action" like apply for a gig just means some sort of special "chat message" (or "chat action")
For example, when you get an invite to another discord server on discord, you can see that a a special "chat messages" that you can accept or reject.
There are in fact many chat actions, for example a "friend request" which you can accept or reject.
In fact, when doing a gig and talking to the author of the gig and working on it, there are many such "chat actions", for example:

1. an initial application for the gig
2. an acceptance by the author
3. adding worklog videos or some results to the chat or a link to it
4. having the author accept those results or reviewing them and giving feedback
5. ...
6. submitting the final results
7. accepting final results and paying the gig bounty

In between are of course also just normal chat messages to communicate information

So when a user clicks "APPLY" on a gig, thats the first message in that chat.
The response of the author could be an accept/reject or some text before the accept/reject is issued
once accepted, maybe the gig disappears from the public list or is in progress and others are then not able to apply
But if the author rejects, the gig is again open for others

Now details whether that discussion is public or private is for later and for now i would all keep it open, because thats how we work and how github works and its for now one less thing to worry about.
Also: other applicants can already learn from previous applicants and the conversations instead of going through all the questions again and again :-)

[serapath]

feedback 2022.03.24

Worklog 2/2 2022.03.24

---

regarding exercise

ii think the only meaningful difference between gigs and exercises is, that gigs pay real money and that you chat with a gig author instead of a bot, but otherwise they are literally the same.
ttechnically that means you can use the "gig editor" to make exercises, but you would add some sort of scripted bot gig author and not pay real money,
so therefore they should probably show up in the same list of gigs/exercises.

The only difference is probably a tiny indicator whether its a real author gig or a bot exercise and maybe you can autocomplete/filter/sort based on that.

Again - you visually center them, which feels like "ZEN MODE".
But otherwise, you might totally want to watch the exercises or many of them next to maybe tools or notes or a chat to write or talk about them and compare them.
So even here - the tiling window manager that allows you to arrange, and resize, maximize/minimize things the way you want makes more sense.
It is much more flexible to (re)arrange things how you want instead of toggeling in the correct order to get something you can work with but its not really what you would want

example:
you might even open "figma" in an iframe and then use "ZEN MODE" to go full screen or watch it next to the exercise or gig chat.
you can litterally start working on tasks/gigs using existing professional tools one day.

---

regarding notes

same thing as for all previous tools in previous feedback

---

regarding maintainers

so yeah, thats a pretty special section.
great that you added it, but its not just "maintainers" :-)
its "value network" (or supply chain network)
there are lots of information about "the people" who make and enable a workshop.

1. the teachers who made and update the content
2. but also the tools they use, each of the tools is again maintained by people
3. the dependency workshops that enable the teachers of the current workshop to even offer it
4. ...etc... list goes on

The point is, if you see the entire WORKSHOP as the basic "tab" and all the lessons and tools and stuff inside,
which includes chat program and gigs as more "sub tabs" in the tiling window manager (which itself is a tool)

THEY ALL HAVE MAINTAINERS and entire supply networks, so we need to find a more generic solution.

The same way you can maybe minimize/maximize every single tab
The same way you can or should also see the maintainers behind a tab (content + tool)

NEXT STEP:

• once you see the maintainers, you might also see news about new versions of that particular content or tool
• maybe you want to discuss the tool
• maybe you want to check the source code
• maybe you want to check out the currently open issues and some of them are bounties (=gigs)
• maybe you want to contribute and become a maintainer yourself

...this needs to all be taken into account

So while you are a learner, you go through and learn and do gigs
BUT: occasionally you check who are the maintainers behind certain tools or content and what are they using and what are the maintainers of that
=> you essentialy can start exploring the entire supply chain and if something is of interest to you you can reach out and even start helping maintain something yourself and solve gigs around it.

in summary maintainer doesn't just mean a "teacher" or whatever of a workshops content - there is much more to it, its like github almost, but different :-)

[mimi-uxui-dev]

Worklog 1/2 2022.03.26
Worklog 2/2 2022.03.26
Wire Frame Iteration 5

[serapath]

feedback 2022.03.26

Worklog 1/2 2022.03.26

regarding profile

1. list and search to find anything is cool,

• => but maybe it should similar to browsing history a thing that people open on their profile.
• when a user is doing a specific workshop, checking other past workshops sounds niche.
  • also if a workshop belongs to us or others or are we one of many a co-maintainers?
  • => ...its interesting, but it would be a rarely while users visit a specific workshop
• IF this is meant to search throug the skill tree, then i recommend this as a feature on the skill tree page instead
  *QUESTION: "can we include gigs in here that we took?"
  • of course, browsing history is important and we will save it and a user can navigate it.
  • => but i think the profile dropdown is the wrong place for that feature and it should be similar to browsers history not just limited to wizard amigos stuff
  • => ISSUE: please add that to the "profile issue" :-)

2. create X (as i said in previous feedback somewhere)

• => should be something a user should not be able to do from a specific workshop
• UNLESS: a user can customize the "create actions" like a bookmark bar, so no matter what app a user uses (maybe a WA workshop or something else)
  • => they always have a hot key or quick action bar to access their most common and important actions which could be "gig", "exercise" "workshop", but also "note" :-)
  • => again... this feedback will get lost in the large amount of feedback in the issues, so please add this as a todo or info note in the appropriate isse or make a new issue for it.

3. show skilltree is something specific to wizardamigos but profile should only support generic features

• => as i said in previous feedback, the profile will be used with many different apps, not just wizard amigos
  • so we cant assume the profile includes anything custom to wizard amigos unless it works the same way for any app

4. email is an interesting profile detail, but the same as e.g. "twitter profile", it needs to be free form input,

• => because email is nothing we need and some people might use email and want to share it and some dont want to

The settings button though is not bad, but just editing the name, avatar and details is too little.
So pressing that button should for sure give more option, but also at least should open the "profile page" full screen in a new tab

regarding notifications

i like the dropdown menu (especially the last entry: (e.g. "Lesson Update! \newLine Marketing 101 Workshop")
also the "green dot" or whatever to indicate new notifcations is good.
The "bell icon" should also have a small "number of unread notifications" counter.

a dropdown to show you the history of notifications, but filtered to only what is relevant for this current workshop

• cool to have a "do not disturb" button and also to make the bell icon change to disabled! cool :-)
• it also should have subscribe/unsubscribe option
  • => but again ISSUE: as said in earlier feedback, this should be more granular to every tab/tile
    • => why? because like for github projects, each repository and each issue of it can be subscribed to seperately to control better how many notifications to receive
  • Settings showing all the "sub notifications" goes into the right direction, but:
    • when i am doing a gig i want to automatically or manually subscribe to it
    • the list can show me all the "sub items" on that workshop i am subscribed to and disable it
    • at the end all the items that show up here are similar to what you can open in a tile in the tiling window manager
    • so the autocomplete list should maybe search through all of them in a similar way, but instead of opening it, you can subscribe/unsubscribe/mute, etc...
      • => ISSUE: it is just yet another "action icon" of what you can do with a menu item
        => for ""show all" notification history", a user should go to their profile page notification instead
• BUT: maybe a little button to quickly open profile page with all notifications in a new tab should be available? ...but maybe clicking on the profile is fast enough
• ISSUE: please add a litte note or todo to the "profile issue" or also to the "workshop notifcation issue"
  • => so we know exactly what we want to display where, so we can later include it in our SPECIFICATION we currently are working on, which means:
  • => so we can include it on the 1. summary slide deck
  • => or we can include it on the 2. markdown files for more details about specific slides

[serapath]

feedback 2022.03.26

Worklog 2/2 2022.03.26

regarding dark/light mode

one thing to have in mind is we are working on a "theme picker" component for datdot.
we are also working on a "style guide page" for datdot to present all components.
now we and others can make more themes and the theme picker can apply those.

In this context, a "dark mode" and "light mode" will be maybe default themes,
but every workshop maker can submit their own themes.
and a user can technically select one of those or their own theme and switch between them.
all workshops will then use those.

Thats just a feature we need to have in mind when doing dark mode / light mode :-)

I also think reserving a "dark mode / light mode" button in the main bar is a bit much.
It is something people configure and sometimes change, but not that often that it deserves such a "good spot" in the UI :P

Maybe having it as a "config" option in a config menu would be good enough?

ISSUE: so a general "config" section is a users custom settings for using a specific app stored with the users profile

• but its specific to a specific app
• every app has maybe some different settings
• every app is maybe allowed to save some settings data in the users profile and load it again next time and display it

regarding layout

now given the previous feedback on the previous set of worklog videos which you did not read yet
when working on the worklog i am writing about right now, i suggested to put more focus on the:
tiling window manager which kinda makes a pretty flexible layout.

A browser can remember a specific layout for next time.
But technically it wouldnt be hard to allow a user to "save" a layout and multiple layouts.
So the browser doesnt restore the layout from the last visit,
but allows the user to load/restore any of their saved custom arranged layouts

All the options, resizing, zen mode, selecting multiple, draging tiles to different positions, minimizing, switching tabs, etc...
Whatever the user arranged, it can be saved as a named layout.

Now the "top bar" and whether to move it around - its an interesting idea, but lets first re-do how the tiling window manager works in general.
That way we also don't overwhelm the user with so many icons like the user can see now.
Once we changed that to the new concept, lets see how and what we can do next with the top bar :-) ...maybe we can get rid of it entirely?

ISSUE: the options listed under layout is something to consider adding to a "tab bar button" as described in previous feedback

• so a user can click/select/drag/rearrange/etc... to achieve what the tiling window manager allows them.

ISSUE: also to quickly remind about a potential "view source code" option or "look behind the scenes" option

• maybe even on every tab button a user could submit feedback or even an improvement proposal, maybe even a classic "github pull request"
• basically a user can explore how and who made the thing they are using at the moment and reach out and start contributing
• i said more about this in the previous feedback. If you have some good ideas how to integrate this everywhere, please share :-)

regarding shortcuts

similar to what i wrote about the config above.
The hotkeys or shortcuts the user uses or even redefines get saved to the users config.
Technically, each tile is a tool.
So each tool can have its own set of shortcuts.
Those can technically conflict with each other.
Of course it also depends on which tool the user focuses.
But even the tiling window manager itself will have shortcuts.
But then again the tiling window manager itself is a tool that can open in a tile as a sub tile
And also the tab bar button dropdown/dropup is a tool.
In the case of e.g. the exercise or gig screen, this can open in a tile itself.
It also has hotkeys.
So every tool in a tile has a "tab button", which might include settings to set/change the hotkeys/shortcuts?

maybe thats how we can integrate it very generically into any tool any user might make?

also - you say the shortcuts have a "search bar"
but then again, the "tab button" when you click it to expand also comes with an autocomplete search.
so maybe we can again think how to standardize this into a generic feature? :-) it seems to have some potential to think about that.
The shortcuts you show has a "full screen toggle" button, but the tab button might also need that for the current tab, but maybe for settings?

off topic: issue each tab bar button technically has a shows a tool and content with maintainers and also has its own config ...how to integrate that? :-)

...i like how you even say how the "shortcuts search" is similar to the content icon search and you said you would not yet have a name for it...

[mimi-uxui-dev]

Worklog 2022.03.27

Feedback 2022.03.27

regarding Content drop down menu

1. Action icons:
   • we should users to open an existing file, (or a file in a folder) new tile window, the content tile can have multiple tile window
2. you said in here the bottom bar already shows me the currently open tabs, so we can save space and don't need that again
   • the bottom bar already shows me the currently open tabs Yes, that's correct
   • so we can save space also correct
   • and don't need that again i'm confused haha, what is it that we don't need again?
3. the currently open files in the file/folder dropdown are sorted by date and time of opening them, it's like a list that we keep adding to it (we open a file and then open the second file. the second file will be under the first one in the list)
   • quick thaught for zen mode: zen mode removes all distructions, in our case the top and bottom bar, it doesnt take in considiration the open tiles, for example you can have content tile, tool tile and chat tile open, if you hit activate zen mode, you'll still have three tiles open.
4. Noted 👍
   • when you open a file, it will automatically open in a new tile. soo to open a file in a current tile doesn't make sense

regarding tool button in title bar

• Drag'n'drop it is :)
• Every tab has an associated tool

regarding chat button in title bar

• I just want to note, that chat/info-desc/tool are all tile windows that you can toggle them for quick efficient access, resize them and drag'n'drop them as you wish :D

regarding gigs button in title bar

• again, should a user be able to have the "gigs" list open in one tile, but then open one or more gigs in parallel in different tiles to read through them and compare them before applying? I think that would be useful. YES of course :D

So a user would open the "gig chat tool", which is what maybe gets opened when a user selects a "gig room" from the gig list The gig list itself might be a different tool... these are details we can brainstorm about. I always thought that the gigs are just a special instance of the workshop, when toggeling the gigs icon, a tile will apear, in side that tile a list of gigs will apear, when clicking on a certain gig's room a descriptions of the offer will appear and an apply button, when you click on the button, a chat room will append next to the gigs room. this is how i see it :)

• Since everything is files/folders/links then maybe we should structure gigs like workshops are.

Regarding Profile

2. => should be something a user should not be able to do from a specific workshop what do you mean by this
3. the skill tree should display all workshops/CodeCamps that a user did, so it's related to the user(profile). Unless the skill tree is related to the workshop (which means it shows dependencies + recommendation of just the workshop)

[mimi-uxui-dev]

Worklog 2022.03.29 : Fixing issues