search

wizardamigos / wizardamigos.github.io

Intro page
https://wizardamigos.com
11 stars 9 forks source link

tiling window/folder manager (= "folder editor/tool") concept & design #59

Open mimi-uxui-dev opened 2 years ago

mimi-uxui-dev commented 2 years ago

@todo

@info

Inspirations & useful links

react-mosiac muuri golden-layout responsive land resizable grid based on Gridstack gridtack.js Gridster.JS svelte-grid 100% Svelte (or vanillajs) no jquery drggable React-Grid-Layout interactjs

serapath commented 2 years ago

feedback 2022.05.07

Worklog 2022.05.06

Wireframes

feedback on your issue comments:

You mention to "ditch" the quizzes. It is mentioned inside the tiling window manager and I totally agree it does not belong here. But, i still think it belongs as a feature into the gig/exercise component. A quiz is a very very basic exercise like gig. The author of the gig is a bot and it asks for answers to a quiz The learner can select it and work on the gig to deliver the correct answers The bot will allow the learner to either try again or not and in case the answers are correct the learner solved the gig :-) The entire quiz should use the "interaction style" any other gig has, but its just that the gig is answering a quiz :P

So the tiling window manager can load a workshop, but a workshop can have gigs attached and by default a workshop can have a quiz attached. That is the way we should treat quizzes - just like any other exercise or gig

task maybe move that description and the task for the quizzes to that gig/exercise component issue :-)

serapath commented 2 years ago

feedback 2022.05.07

Worklog 2022.05.06

Wireframes

formal feedback on your previous worklogs in general

You have 3 outputs

But they are missing in the todo list in the top level comment. They should be listing the output document with a link to from the worklog comment like you already did in the past :-)

task can you fix that maybe? :-)

I aready started to always say @output and not differentiate anymore between output and result.

Now when you have a new worklog with a new wireframe as @output for a todo in the todo list above, it could also have a bunch of previous wireframes or prototype outputs from previous todos ... as inputs, e.g.

for example:

...

* [x] make TWM iteration 4
  * `@input` :package: [`wireframe iteration 3`](#link-to-figma-for-wireframe-iteration-3)
  * `@output` :package: [`wireframe iteration 4`](#link-to-figma-for-wireframe-iteration-4)
  * `@output` :package: [`prototype iteration 3`](#link-to-prototype-iteration-3)
* [ ] make TWM wireframe iteration 5
  * `@input` :package: [`wireframe iteration 4`](#link-to-figma-for-wireframe-iteration-4)
  * `@input` :package: [`prototype iteration 3`](#link-to-prototype-iteration-3)
  * `@input` :package: [`feedback on worklog51`](#link-to-issue-comment-123)
  * `@output` :question: `wireframe iteration  5`

...

which makes it look like:

...

...

serapath commented 2 years ago

feedback 2022.05.07

Worklog 2022.05.06

Wireframes

feedback on wireframes:

:+1: i like the default layout with the notes as part of the upper row ...cool. thats even better :partying_face:

:+1: for removing the top bar :-) ...awesome :rocket:

serapath commented 2 years ago

feedback 2022.05.07

Worklog 2022.05.06

Wireframes

DEFAULT LAYOUT

feedback about the bottom search bar

first impression, I see it has:

  1. icon (of program, e.g. workshop tool)
  2. title (name of file, e.g. workshop file name)
  3. back and forth arrows
  4. refresh button
  5. address bar + "new instance" action and file extension
  6. save button
  7. a target action button
  8. a plus button
  9. a subscribe/unsubscribe button
  10. an info button
  11. a profile button

that is quite a lot of stuff ... let's see how the video continues :slightly_smiling_face:

second impression, I see it has:

  1. icon (of program, e.g. workshop tool)
  2. title (name of file, e.g. workshop file name)
    • comment: ok, so you say clicking on it is like a HOME or RESET button to get back to where you started quickly...
  3. back and forth arrows
    • comment: ok, so the arrows are for moving back/forth between lessons, yeah, ok, cool, lets try.
    • comment: i do not understand at all what you mean with exercise/gigs and the refresh button
      • i assume we are building an entirely different gig/exercise program and it will or can be opened as one more tile
      • so basically th grif above would require an additional tile that we forgot, basically the exercise/gig tile, maybe next to the tool
  4. refresh button
    • comment: do we need that for real? a user can still click the refresh button on his firefox or chrome browser
      • also we could add a refresh action to each tab, but i think what is the use cases when that is needed? things should always be up to date, unless a notification signals that there are updates that need user consent, in which case maybe the notification should include a "confirm" action button to apply and refresh with the new changes, but i doubt we need a regular "refresh" button.
  5. address bar + "new instance" action and file extension
    • comment0: hmm, i think i personally actually liked the "path segments" a lot more
      • it is probably cool to allow also typing and autocomplete the entire path or copy/pasting a path
      • but also having the path segment mode that you should once was pretty cool, because we didn't need the "nested folders" anymore ...instead clicking a folder just opens/adds a new path segment
      • so autocomplete list path is cool ... but segment mode is cool too and should be the default unless the user switches into autocomplete list full path editing mode ...i remember we had a little youtube example video of a windows explorer where that feature was shown in some previous feedback comment on some issue.
    • comment1: to not lose the "overview" feature, i think MAYBE we should allow the user to open "folders" in tiles too.
      • while files and tile jsons and others get opened as tiles or tile json files as sub tile grids, opening a folder or dragging a folder into a tile will open it with the "FILE EXPLORER" version that you show in the wireframe, with all the nestedness for overview purposes, if a user really wants to see all the files and folders in parallel
    • comment2: the new instance problem makes sense, but not sure the solution is yet the best.
      • click+drag or touch+drag to a position to add a new instance as a tile in the position where we dragged it
      • if its just touch or click it just opens in or over the current tile ...if its the same file name and program, nothing changes
        • i think that should solve it, no?
    • comment3: regarding the extension (e.g. mp4 file)
      • i think every path segment should have an icon, so the my-note-1.md file for example has an icon for the markdown editor program, so that can be clicked to get a little additional overlay autocomplete dropdown to change the program
      • if a user types a file name that does not exist yet and selects a program it can be dragged too to make a tile with the new file and program and clicking or touching "save" to add it permanently to the file explorer overlay
  6. save button
  7. a target action button
    • comment: aha, that is "ZEN MODE" ...which according to previous discussions could now just be called a new tab :laughing:
  8. a plus button
    • comment i didn't get what that + button does ...can you repeat that?
  9. a subscribe/unsubscribe button
    • comment :+1: ...not sure if i like the location of the actions in general, but yeah, its cool
  10. an info button
    • comment :+1: ...not sure if i like the location of the actions in general, but yeah, its cool
    • comment THE PROBLEM :laughing: ...is tooltips dont work on mobile or tablet. ...but i agree, on desktop we could also show them on mouse hover, so the user doesn't need the info button, but desktop is not the only device we care for, so what do you suggest?
  11. a profile button
    • comment i think, especially the way we had the "path segments" before, the profile is already "covered", so i doubt we need it again here and could probably remove it from the "action bar"
serapath commented 2 years ago

feedback 2022.05.07

Worklog 2022.05.06

Wireframes

PROFILE AND ACCOUNT

feedback about the bottom search bar

first impression about options:

  1. manage profiles -> link to open in new window
  2. switch account dropdown
    • James doe
    • create new account
  3. logout

question1 you say the user has 2 accounts, but the second account name that is currently active is not even shown. in the path segment, i think that current user account should be visible, similar to a "home folder" on your computer

question2 if we again had the "path segments" could that not be

  1. show a list of accounts when you click the first profile segment of the path
  2. could actions like "logout" or "create new account" not show as actions when you are on the "profile" folder segment?

suggestion1 i think creating a "new account" is something that is more involved than what fits into an overlay. I think it should open the "manage account" page, but maybe already active the "create new account" section. That is because, in crypto/p2p we are dealing with programs called "wallets" and to make another account usually requires to also back up some sort of 12 or 24 secret words to restore your keypair, etc... it also is confidential, so we rather do that inside our wallet instead of on any random page, like a workshop that might expose the password we choose for our account to the creator of that particular e.g. workshop app ....so yeah, let create account be a job that has to happen on the "manage profile" page itself.

suggestion2 I guess the correct path would be /profiles/john-doe/workshops/workshop-title-xyz/lessons/...

serapath commented 2 years ago

feedback 2022.05.07

Worklog 2022.05.06

Wireframes

Open Files/Apps with another App

So you show the plus button from before and it has a menu with:

  1. save layout (tile)
  2. open new tile
  3. duplicate .... what?
  4. copy to folder ...

questions

  1. why do we have also another SAVE button, couldn't that be used to save a tile if it is a tile?
  2. every time you want to open a new tile, you need to also select the file/app to open in that tile, so...
    • wouldn't it be easier to first go to the file explorer overlay and select file/app and then have an action to open a new tile?
  3. what does "duplicate" mean? ...and how is it different to "copy to folder"? ...
    • wouldn't you also need to tell where to duplicate to?
    • if you don't choose a copy to folder, wouldn't it also choose a default folder name?
    • isn't that the same what would happen if you "SHARE" e.g. a file or folder with another account? it gets copied?
    • => i think we should decide for one word and use only that (e.g. copy, duplicate, share, clone, send?)
    • maybe a user can in all cases just click and then select one or more files and then drag them to the destination folder to duplicate/copy ...maybe we need just the regular copy, cut, paste ...so user can
      1. e.g. select one or more files/folders
      2. click copy or cut
      3. select a different folder then
      4. click paste ... which means it gets moved or copied, depending on whether it was cut or copy before
    • also, as mentioned in previous feedback with the option to open the file explorer program in a tile
      • the user has more overview in a tile file explorer to do all these file operations
  4. can the SAVE button be put into that menu too? ...and for tile grids it just means save as layout tile json file?
  5. can the new instance button not be something that would happen when a user chooses open new tile, but only selected an app and not a file?
  6. regarding new tile action, as i said in previous feedback above, wouldn't the drag'n'drop from the overlay menu not be enough maybe?
    • when dragging it a user might also drag it to a tab bar to make it another tab instead of into an area to make it another tile
    • making it a tab of an existing tile means the user can switch between the tabs to display any of the tab contents in its tile

I think all these things are basically ACTIONS and i think we need to merge those more together and right now i still feel its a lot and its a bit confusing :-)

serapath commented 2 years ago

feedback 2022.05.07

Worklog 2022.05.06

Wireframes

Zen Mode

Ok, so i click on the action icon "target" and then you get, wow...

  1. created layouts - tile json files?
    • layout 1
    • layout2
    • layout3
  2. active tiles - currently open tiles in the current saved/unsaved tile json file?
    • lesson 0
    • tool
    • markdown notes
    • info/desc
    • chat
  3. more files - regular file explorer overlay content
    • ... all of the file explorer overlay stuff

first thought - that's A LOT :laughing: ...i mean, it is all important, but it is quite verbose and i wonder if we can use tricks to slim things down at least a ittle bit, but ideally we slim it down like crazy :yum:

answer: you asked if layouts are for e.g. the current workshop. yes that is true, a "layout" is always a specific file with specific file+app entries so when that "layout" tile json file is opened, it will load all those specific file+app entries in tiles. Every layout is created specifically for one workshop and already includes the specific file+apps it will open.

There is no "generic layout file" that opens a specific layout but you can then choose which file+apps you want to open in each tile. ...if you want the same layout but with different contents, you have to make one tile json file for each of them.

more ideas:

  1. the select checkbox could also happen if a user clicks a file directly, it selects or unselects it and background color changes
  2. if a user drag'n'drops a file, it can also be dragged into a tile to open it
  3. of course, sometimes a user wants to have a different action when clicking on a file/folder
    • e.g. open the clicked file in current tile
    • ...what are all the behaviors we would want?
    • we also still have the action list, so what if the select action is the default, but a user can change?

Now otherwise we have:

  1. created layouts
  2. active tiles - which is for me the tiles of the active layout

So any layout has a saved or unsaved tile json file ...if its a new tile grid that hasnt been saved yet it could be a virtual tile json file ...which means those should show up in the "file explorer overlay", which means you can select them. AND those tile files, should be able to expand like a folder, which shows the path segment of the tile json file but the overlay has a list of all file/apps that are contained in that saved/unsaved/virtual tile json file ... so its all the the regular file explorer section and selected and active and open can be indicated by e.g. different background colors.

So maybe we don't need extra seperata sections?

AND FINALLY ...if its all just file explorer overlay, i think it should all be part of and happening inside the main overlay from the search bar and not re-creating the same overlay again when somebody clicks on some sort of action button :-)

the done action: Thats a good example of an action which could be just the default action, but other actions are possible. You explained it on the example of selecting an additional file+app for an additional tile in the current layout, but:

  1. where exactly should that additional file+app be opened in the layout?
    • you would need to drag'n'drop it to the correct position in the grid and maybe resize the grid size
    • maybe if you literally only click "select" and then you are done, it adds it in a default position, ok
    • ...i think i prefer selecting would not change the grid layout you have to drag'n'drop if you want to add
  2. otherwise, what if you want to add all the selected files into a new zen mode overlay?
    • maybe thats what you can choose as an action to be done with the selection instead of just "done"
serapath commented 2 years ago

feedback 2022.05.07

Worklog 2022.05.06

Wireframes

Notifications

:+1:

love it. so notification message are fine also the overlay is great

...BUT ....if you click on the icon to show the overlay to e.g. show unread notifications, etc... ==> How will you subscribe/unsubscribe? :-)

Additionally, "design wise", i think that because the notifications list can be long and you might also want to see and search your history of notifications in general, maybe the whole notifications overlay should more look like the facebook chats?

When you use facebook on desktop, you get those little tiny chat boxes aprox. the size of that little notifications overlay you have. could you try to make it look more like those chats so you can see the history of notifications?

similar to discord, it could draw a line in the chat to show you what are unread messages since the last time you checked.

serapath commented 2 years ago

feedback 2022.05.08

Worklog 2022.05.07

Wireframe Prototype

fucking ace :superhero_woman: :sunglasses:

formally, the sub bullet point list shown here should be todos and if you did finish all of them they should be marked as done and probably a note should be added to the markdown specification file of TWM

:+1: i agree, there is no maximize/minimize, but YES, you could go ZEN MODE on it :smile: haha, so true. love it :100:

I think that is amazing, just lets capture the specifics about this wireframe and how it works in also in the markdown spec and link it as an @output file next to the finished sub grid todo, right?

Then its perfect

mimi-uxui-dev commented 2 years ago

Worklog 2022.05.10-11

Feedback

Takeaways

  • Users can't subscribe to our system file -> can or can't ... why again? can you remind me? ...maybe we should also capture sometimes the reason why we decided like this or that... but ok.
  • what this is for is that I think we should make an exception for some files, the exception should be for our system files like tile.json file, users wont get notified about everything, especilly the tile.json, it just wont make sense

(still prefer copy or share or fork over the long and unwieldy "duplicate")

  • copy is just for copying, but paste where or should it be anywhere 🤔
  • share is for social media and basically coping the link
  • fork is a github thing
  • however duplicate workshop is going to dusplicate the workshop and paste it in another profile directory

comment: i do not understand at all what you mean with exercise/gigs and the refresh button

  • we have the next/prev arrows which are for the list of lessons and for exercices/gigs
  • Refresh is for tiles who have apps for e.g. chat
  1. refresh button
    • comment: do we need that for real? a user can still click the refresh button on his firefox or chrome browser
    • i thought about it before, and if we do so as you said, use the refresh in firefox/chrome that would refresh the whole thing, all the tiles in TWM, but we have agreed before that each tile is going to be an iframe, i've looked it up and we can for sure refresh iframes, thats why i have inculded the refresh action int the bottom bar so when the users selects a tile(which is an iframe) they can refresh it for whatever reason they want, however that i have typed this whole thing, i came to another decision, i think the refresh should be in every tab, because having it at the bottom bar gives the impression that its for whole TWM instead of the select tile

also we could add a refresh action to each tab, but i think what is the use cases when that is needed? things should always be up to date, unless a notification signals that there are updates that need user consent, in which case maybe the notification should include a "confirm" action button to apply and refresh with the new changes, but i doubt we need a regular "refresh" button.

  • i see and i agree, what if the chat/tool crashed for whatever reason, it happens, we never know, so having a refresh action for each tile will save us the trouble of refreshing the whole TWM.

instead clicking a folder just opens/adds a new path segment

  • what do you mean by add? like creating a file or folder?

new instance if its just touch or click it just opens in or over the current tile ...if its the same file name and program, nothing changes

  • i think it should open in a new tile, which is better

if a user types a file name that does not exist yet and selects a program it can be dragged too to make a tile with the new file and program and clicking or touching "save" to add it permanently to the file explorer overlay

  • how can a user open a file in a tile with an app but the file does not exsist in the first place?
  1. a plus button comment i didn't get what that + button does ...can you repeat that?
    • when the user click on the + action an overlay will open and it contains:
    • Save Layout action to save the layout
    • Open New Tile action which will open a new empty tile
    • Duplicate action will duplicate the selected tile and paste the copy below the original one
    • Copy To Folder: will copy and paste the tile to any folder we wish

comment 👍 ...not sure if i like the location of the actions in general, but yeah, its cool

  • which actions the one for tabs or in bottom bar?

comment i think, especially the way we had the "path segments" before, the profile is already "covered", so i doubt we need it again here and could probably remove it from the "action bar"

  • but we need a way to access the other actions like loggout and create new account for e.g.

you say the user has 2 accounts, but the second account name that is currently active is not even shown.

  • Fair point 🤔

could actions like "logout" or "create new account" not show as actions when you are on the "profile" folder segment?

  • i'd leave them under profile icon, and in the segment we'll have only accounts so users can swithc between them

the log in action could go to the new tab "manage profile" but an overlay form will allow to select an account to log in

  • what do you mean by new tab "manage profile"

every time you want to open a new tile, you need to also select the file/app to open in that tile, so... wouldn't it be easier to first go to the file explorer overlay and select file/app and then have an action to open a new tile?

  • the whole reason for this open new empty tile is for users to drag'n'drop folders and open them as subgrid tile, i think we should remove it tho and remplace it with right click to open an overlay with action to open it in a another tile, its more efficient this way

wouldn't you also need to tell where to duplicate to?

  • duplicate makes a copy and paste it under in the same folder, below the original file/folder with - copy - attached to its name

if you don't choose a copy to folder, wouldn't it also choose a default folder name?

  • nope, it would be the same file/folder, different folder to paste into

isn't that the same what would happen if you "SHARE" e.g. a file or folder with another account? it gets copied?

  • yes it will get copied and passed under its appropriate folder, for e.g. if the user shares a note it will be pasted in the notes folder or an overlay will apear to let the user picks up where the user want to paste it

=> i think we should decide for one word and use only that (e.g. copy, duplicate, share, clone, send?)

  • Clone it is

maybe a user can in all cases just click and then select one or more files and then drag them to the destination folder to duplicate/copy ...maybe we need just the regular copy, cut, paste ...so user can e.g. select one or more files/folders click copy or cut select a different folder then click paste ... which means it gets moved or copied, depending on whether it was cut or copy before

  • YES, Agreed

also, as mentioned in previous feedback with the option to open the file explorer program in a tile

  • Yes, in addition to changin the view from list to icons grid

can the SAVE button be put into that menu too?

  • what menu? ...and for tile grids it just means save as layout tile json file?
  • Yes

can the new instance button not be something that would happen when a user chooses open new tile, but only selected an app and not a file?

  • when the users clicks on 'new instance' it will create an new file of type of the select tile, for e.g. if the selected tile is markdown file then the new instance of it will be a new empty markdown file, it will be created and saved in the notes/markdown folder

regarding new tile action, as i said in previous feedback above, wouldn't the drag'n'drop from the overlay menu not be enough maybe? when dragging it a user might also drag it to a tab bar to make it another tab instead of into an area to make it another tile making it a tab of an existing tile means the user can switch between the tabs to display any of the tab contents in its tile

  • on a second thought i think we should remove the new tile action and remplace it with right click action like explained above

I think all these things are basically ACTIONS and i think we need to merge those more together and right now i still feel its a lot and its a bit confusing :-)

  • i feel the same too, how do you suggest to simplify it, what should we remove?

where exactly should that additional file+app be opened in the layout?

  • like Zen Mode will open, full screen

we also still have the action list, so what if the select action is the default, but a user can change?

  • i think its complecated enough, also if we give the user the ability to change the select action to somthing else that might make more damage

Takeaways

serapath commented 2 years ago

feedback 2022.05.12

Worklog 2022.05.10-11

Feedback

Takeaways

  • Users can't subscribe to our system file -> can or can't ... why again? can you remind me? ...maybe we should also capture sometimes the reason why we decided like this or that... but ok.
  • what this is for is that I think we should make an exception for some files, the exception should be for our system files like tile.json file, users wont get notified about everything, especilly the tile.json, it just wont make sense

i would not make exceptions - a user should be able to subscribe to everything in the same way. if you think workshop authors should be able to set the default subscription config for their workshop, so that e.g. subscribing to a workshop does not by default include this or that file/folder/... by default, then we should allow that to be defined.

I don't think that a tile json file would change often, so including it doesnt hurt much. of course - a tile json file the user made themselves would not trigger notifications.

i prefer generic mechanisms that work the same with no exception, but i also feel making a config (which would be generic) to allow a workshop author to define what subscription means by default might be a bit overkill ... you tell me :-)

(still prefer copy or share or fork over the long and unwieldy "duplicate")

  • copy is just for copying, but paste where or should it be anywhere thinking
  • share is for social media and basically coping the link

ok, if share only gives you "links" its the best word.

  • fork is a github thing

yes, it is very programmer oriented - but then again we are about teaching the new literacy :P

  • however duplicate workshop is going to dusplicate the workshop and paste it in another profile directory

what about clone ? :-) ...its a bit shorter than "duplicate"

comment: i do not understand at all what you mean with exercise/gigs and the refresh button

  • we have the next/prev arrows which are for the list of lessons and for exercices/gigs

why is it fr exercise/gigs? ... i still dont understand

  • Refresh is for tiles who have apps for e.g. chat
  1. refresh button
  • comment: do we need that for real? a user can still click the refresh button on his firefox or chrome browser
  • i thought about it before, and if we do so as you said, use the refresh in firefox/chrome that would refresh the whole thing, all the tiles in TWM, but we have agreed before that each tile is going to be an iframe, i've looked it up and we can for sure refresh iframes, thats why i have inculded the refresh action int the bottom bar so when the users selects a tile(which is an iframe) they can refresh it for whatever reason they want, however that i have typed this whole thing, i came to another decision, i think the refresh should be in every tab, because having it at the bottom bar gives the impression that its for whole TWM instead of the select tile

also we could add a refresh action to each tab, but i think what is the use cases when that is needed? things should always be up to date, unless a notification signals that there are updates that need user consent, in which case maybe the notification should include a "confirm" action button to apply and refresh with the new changes, but i doubt we need a regular "refresh" button.

  • i see and i agree, what if the chat/tool crashed for whatever reason, it happens, we never know, so having a refresh action for each tile will save us the trouble of refreshing the whole TWM.

agree, with a refresh button on every tile, BUT ...i would suggest only where necessary, because:

refresh is an anti-pattern and things should always auto-refresh or prompt the user about available updates so they can confirm.

  1. It is true that traditional apps sometimes crash, but have you ever seen a website where one part of an app ...e.g. on facebook or instagram or tiktok crashed and the rest of the app just worked? this is super rare or impossible and you can solve it by restarting the whole app. ...never seen any app giving you a refresh button for specific elements :P ...lets please build things so they dont crash :D

  2. It is true that some iframes might not support the auto-update, therefore i would propose a refresh action as an "app specific action" for tools which are generic iframes.

i think we need to be aware that any app/tool we use to open files in tiles might potentially have a few app/tool specific action and for an iframe that can be "refresh" ...but "refresh" should not be a generic TWM action for all tiles imho.

instead clicking a folder just opens/adds a new path segment

  • what do you mean by add? like creating a file or folder?

no, the path segment of the path in the tab button input field refers to the current file/folder ... if you open a subfolder, the path adds another segment.

you made a wireframe where you showed the path and path segments and how they change already :-)

new instance if its just touch or click it just opens in or over the current tile ...if its the same file name and program, nothing changes

  • i think it should open in a new tile, which is better
  • i think when user clicks on a file to open it from a the file/folder explorer overlay it should open in a new tile instead of the selected tile, which is a better user experience, otherwise to do so, the user makes a new empty tile, selects it and then open the file/folder explorer to click the file which will eventually open in the new empty tile :-D .. thoughts?

but that is not always true from my experience, that a new tile is better - of course an empty open tile means just extra clicks, so new empty tiles are also not super great i think.

When you have lots of files open in your code editor, sometimes people want to change just the content of an existing editor tab for example - clicking different files in the file explorer in vscode will show the content in the same tab that is in focus and not in a new tab every time you click a different file in the explorer, right?

also - if you would open it in a new tab, ..then where exactly? which position? a new tile on top? left? right? bottom? next to an existing tile but as a new tab of the same tile? ...

user should always be able to open in:

  1. same tile
  2. another tab in the same tile (so the tile has now two tabs)
  3. a different tile
  4. a new e.g. second tab of a different tile
  5. a new tile entirely (positioned on top, bottom, left, right or in between, depending on how the current tile grid look like)
  6. a new tile in a new single tile grid ...which actually just means a new tab in the root tile of the current tile - thats "zen" mode
  7. but eventually even the option to open the "new file content in a new browser window"
    • => which opens a new browser tab with a url param that will open the workshop with maybe just that tile or whatever open as the only tile in that new browser tab ...

So we need to find a balance between allowing all these different options intuitively, but still making things with as few clicks and hoops as possible, so that it doesnt feel cumbersome... its a UI/UX challenge :-)

if a user types a file name that does not exist yet and selects a program it can be dragged too to make a tile with the new file and program and clicking or touching "save" to add it permanently to the file explorer overlay

  • how can a user open a file in a tile with an app but the file does not exsist in the first place?

The steps involved are:

  1. choose a program
  2. choose a tile position (see above for all the options)
  3. choose a new file name

So how to re-use UI to make it as easy/quick as possible to intuitively do the three steps above in a single gesture, click, touch, drag or whatever :P ....because you can always have an action button and walk through a little steps wizard form but thats clunky :-)

  1. a plus button comment i didn't get what that + button does ...can you repeat that?

  • when the user click on the + action an overlay will open and it contains:

    • Save Layout action to save the layout
    • Open New Tile action which will open a new empty tile
    • Duplicate action will duplicate the selected tile and paste the copy below the original one
    • Copy To Folder: will copy and paste the tile to any folder we wish

comment +1 ...not sure if i like the location of the actions in general, but yeah, its cool

  • which actions the one for tabs or in bottom bar?

comment i think, especially the way we had the "path segments" before, the profile is already "covered", so i doubt we need it again here and could probably remove it from the "action bar"

  • but we need a way to access the other actions like loggout and create new account for e.g.

:+1: yes, but why not have the user click on the "profile path segment" to make those actions available?

you say the user has 2 accounts, but the second account name that is currently active is not even shown.

  • Fair point thinking

could actions like "logout" or "create new account" not show as actions when you are on the "profile" folder segment?

  • i'd leave them under profile icon, and in the segment we'll have only accounts so users can swithc between them

possible, but it means we twice use UI space in an already packed UI to represent the profile. and user might even wonder on which to click to allow which actions. To me this gives a strong signal that there is redundancy we can get rid of somehow.

the log in action could go to the new tab "manage profile" but an overlay form will allow to select an account to log in

  • what do you mean by new tab "manage profile"

Sorry. I think new browser tab to open the "manage profile page" - because the profile (=wallet) is something separate from a WA workshop.

So when you click "log in" in the TWM UI, the new browser tab opens your wallet/profile and switches focus to that browser tab but also shows your wallet/profile page with some sort of overlay that represents a login request from a particular aoo (e.g. WA workshop) and a particular (file/app) that is gonna be opened in a tile to log in with one of your available accounts and if you choose an account, the focus switches back to the WA TWM browser tab and you can now see that account/profile you successfully logged in with or switched to so it also becomes visible in the path segment :-)

does that explain it better?

every time you want to open a new tile, you need to also select the file/app to open in that tile, so... wouldn't it be easier to first go to the file explorer overlay and select file/app and then have an action to open a new tile?

  • the whole reason for this open new empty tile is for users to drag'n'drop folders and open them as subgrid tile, i think we should remove it tho and remplace it with right click to open an overlay with action to open it in a another tile, its more efficient this way

:+1: lets try to go through those scenarios in wireframes.

just one thing - we don't open folders anymore in tiles or subgrid tiles, but instead we open "tile json files". If somebody wants to open a folder in a new tile, it will show the file explorer program in that tile (the file explorer which we otherwise only see in the overlay menu)

wouldn't you also need to tell where to duplicate to?

  • duplicate makes a copy and paste it under in the same folder, below the original file/folder with - copy - attached to its name

if you don't choose a copy to folder, wouldn't it also choose a default folder name?

  • nope, it would be the same file/folder, different folder to paste into

isn't that the same what would happen if you "SHARE" e.g. a file or folder with another account? it gets copied?

  • yes it will get copied and passed under its appropriate folder, for e.g. if the user shares a note it will be pasted in the notes folder or an overlay will apear to let the user picks up where the user want to paste it

=> i think we should decide for one word and use only that (e.g. copy, duplicate, share, clone, send?)

  • Clone it is

:100: for clone

maybe a user can in all cases just click and then select one or more files and then drag them to the destination folder to duplicate/copy ...maybe we need just the regular copy, cut, paste ...so user can e.g. select one or more files/folders click copy or cut select a different folder then click paste ... which means it gets moved or copied, depending on whether it was cut or copy before

  • YES, Agreed

:100: yay :-) so all the above solved. we now need a cool wireframe for that.

i guess the princple should be:

  1. remove as much redundancy in the UI as possible
  2. minimize the user interaction effort necessary to do what they need to do
  3. minimize the amount of actions, so generic powerful actions with good but customizable defaults are better than lots of specific actions for every possible use case

also, as mentioned in previous feedback with the option to open the file explorer program in a tile

  • Yes, in addition to changin the view from list to icons grid

i don't think i undertand "icons grid" - maybe i need a wireframe for it :-)

can the SAVE button be put into that menu too?

  • what menu?

haha, you made a little menu with the + button before that included potentially even a "save tile grid" button, but separate from that you have a big "SAVE" button in the search bar .... i thought all these different buttons that do something should somehow be merged to look and feel the same

...and for tile grids it just means save as layout tile json file?

  • Yes

can the new instance button not be something that would happen when a user chooses open new tile, but only selected an app and not a file?

  • when the users clicks on 'new instance' it will create an new file of type of the select tile, for e.g. if the selected tile is markdown file then the new instance of it will be a new empty markdown file, it will be created and saved in the notes/markdown folder

lets wireframe that. i think we have to do some rounds of wireframeing to nail all the details.

regarding new tile action, as i said in previous feedback above, wouldn't the drag'n'drop from the overlay menu not be enough maybe? when dragging it a user might also drag it to a tab bar to make it another tab instead of into an area to make it another tile making it a tab of an existing tile means the user can switch between the tabs to display any of the tab contents in its tile

  • on a second thought i think we should remove the new tile action and remplace it with right click action like explained above

i am ok with those suggestions but we need to make them work on tablet and mobile there are lots of environments that do not have a "right click"

I think all these things are basically ACTIONS and i think we need to merge those more together and right now i still feel its a lot and its a bit confusing :-)

  • i feel the same too, how do you suggest to simplify it, what should we remove?

maybe not remove. have one place for all actions some are TWM default actions some are tile app specific users should have quick access to the default actions (maybe customize whats default) and other actions maybe need a popup or dropdown or whatever to select maybe next time the selected one is remembered? maybe all actions can be shown if there is enough screen space and we only use the menu/dropdown/popup/etc... when there are too many actions for the screen space available?

where exactly should that additional file+app be opened in the layout?

  • like Zen Mode will open, full screen

we also still have the action list, so what if the select action is the default, but a user can change?

  • i think its complecated enough, also if we give the user the ability to change the select action to somthing else that might make more damage

true - it should be simple it should also work in predictable ways but we also need all these different actions in a way...

serapath commented 2 years ago

feedback 2022.05.13`

Takeaways

  • quiz is a feature that belongs to gig/exercise component

:+1:

  • The author of the gig is a bot and it asks for answers to a quiz

:+1:

  • The learner can select it and work on the gig to deliver the correct answers

:+1:

  • The bot will allow the learner to either try again or not and in case the answers are correct the learner solved the gig :-)

:+1:

  • The entire quiz should use the "interaction style" any other gig has, but its just that the gig is answering a quiz

:+1:

  • add exercise/gig tiles to the TWM

:+1:

  • add refresh action for in tabs instead of bottom bar

:+1: but see above - maybe only if a user opens something in the "iframe tool", but otherwise we try to avoid it

  • add to TWM Specs file:

    • allow typing and autocomplete the entire path or copy/pasting a path in search bar that has path segments

:+1:

  • clicking on the segments opens an overlay that has the content of the folder

:+1:

  • how to open folders

  • new instance:

    • click+drag to a position to make a new instance as a tile

:+1:

  • use the icon of the file as an extention indecator to change the app that opens the file

:+1:

  • save button

:+1: but its an action that belongs where all actions belong

  • "ZEN MODE" is now called New Tab

hehe, but additional tab for the root tile, and i would not think of it as zen mode when its a new tab for a sub tile in an existing grid

  • remove tooltip action, just hover for web and for responsive it would be a long press or let the user lean by trying things out

:+1: interesting ... a long press to show the tool tip could work ok ...

  1. we just need to figure out if users will understand that
  2. drag'ndrop will also have a "long press" ...combined with a move, but still a long press

it could work, maybe we can try - i am only afraid that tablet users might not have the idea to try a "long press" what do you think?

  • users have access to tiles only if they are logged in with the right account, if users sign in with second account

    • profile

  • Add profile name

  • add username in path segment

:+1:

  • show a list of accounts when you click the first profile segment of the path

:+1:

  • Create account action will be in a seperate page, its more secure

:+1:

  • user can click and then select one or more files and then drag them to the destination folder to clone them, in addition to the regular copy, cut, paste, so user can:

:+1: we need a detailed wireframe for the file explorer and also the version that can be opened in a tile, in case a user drops a folder into a tile or opens a folder in a new tile...

we should probably make an issue for that too.

the "file explorer tool" ...which we use also as an overlay in the TWM tab button menu

  • select one or more files/folders

:+1:

  • click copy or cut

:+1:

  • select a different folder then

:+1:

  • click paste ... which means it gets cloned, depending on whether it was cut or copy before

:+1: copy means "clone" ... cut&paste means "move"

  • any layout has a saved or unsaved tile json file ...if its a new tile grid that hasnt been saved yet it could be a virtual tile json file ...which means those should show up in the "file explorer overlay", which means you can select them. AND those tile files, should be able to expand like a folder, which shows the path segment of the tile json file but the overlay has a list of all file/apps that are contained in that saved/unsaved/virtual tile json file ... so its all the the regular file explorer section and selected and active and open can be indicated by e.g. different background colors.

:+1:

  • notification displayed like discord or facebook chat

:+1: what is meant here is when you check facebook in full screen on desktop and browse the wall, the chats open one or more little chat boxes on the bottom of the page for each chat you are having ...of course you can switch into full screen, but they are otherwise those little "chat boxes"

mimi-uxui-dev commented 2 years ago

Worklog 2022.05.13-14

Feedback

comment: i do not understand at all what you mean with exercise/gigs and the refresh button

we have the next/prev arrows which are for the list of lessons and for exercises/gigs why is it for exercise/gigs? ... i still don't understand

  • because users need a way to navigate to the next/prev lesson/exercise/gig without opening the the file/folder explorer overlay

It is true that traditional apps sometimes crash, but have you ever seen a website where one part of an app ...e.g. on facebook or instagram or tiktok crashed and the rest of the app just worked? this is super rare or impossible and you can solve it by restarting the whole app. ...never seen any app giving you a refresh button for specific elements :P ...lets please build things so they dont crash :D

  • Fair point :D, I thought we have many apps not just one, the way i see it is that the Markdown is an app, video player is an app .. etc so WA is a collection of apps whcih are independent of each other

It is true that some iframes might not support the auto-update, therefore i would propose a refresh action as an "app specific action" for tools which are generic iframes.

  • Agreed

i think we need to be aware that any app/tool we use to open files in tiles might potentially have a few app/tool specific action and for an iframe that can be "refresh" ...but "refresh" should not be a generic TWM action for all tiles imho.

  • i agree, I'll try to make a list of actions for each app

also - if you would open it in a new tab, ..then where exactly? which position? a new tile on top? left? right? bottom? next to an existing tile but as a new tab of the same tile? ...

  • Always to the right of the selected tab

if a user types a file name that does not exist yet and selects a program it can be dragged too to make a tile with the new file and program and clicking or touching "save" to add it permanently to the file explorer overlay

how can a user open a file in a tile with an app but the file does not exist in the first place? The steps involved are:

  1. choose a program
  2. choose a tile position (see above for all the options)
  3. choose a new file name So how to re-use UI to make it as easy/quick as possible to intuitively do the three steps above in a single gesture, click, touch, drag or whatever :P ....because you can always have an action button and walk through a little steps wizard form but thats clunky :-)
    • I think the problem is with the steps order, and to solve it we can rely on the files extension; we can open these files using our programs based on their extension, therefor the order should be:
    • Option 1:
  4. click on the file, our system detects which app to use based on the extension, open it next to the selected tile (on click and your done 🔥)
    • Option 2:
  5. Right-click on your file
  6. An overlay will open, pick an opening method (one of the ones that you have suggested above)

👍 yes, but why not have the user click on the "profile path segment" to make those actions available?

  • I'll wireframe it and see how will that'll look like :D

So when you click "log in" in the TWM UI, the new browser tab opens your wallet/profile and switches focus to that browser tab but also shows your wallet/profile page with some sort of overlay that represents a login request from a particular aoo (e.g. WA workshop) and a particular (file/app) that is gonna be opened in a tile to log in with one of your available accounts and if you choose an account, the focus switches back to the WA TWM browser tab and you can now see that account/profile you successfully logged in with or switched to so it also becomes visible in the path segment :-)

does that explain it better?

  • can we do it this way which is more simple, the user click on log in an overlay will appear on the workshop to show accounts and an action to create an account, after logging-in, the workshop will load with the chosen account and a new browser tab will open with your profile, thoughts :D ?
  • Question: where is the log in action button located? is it when the user forks a workshop, or finds its link, the workshop will be blured and an overlay will appear to ask the user to login/signup?

i am ok with those suggestions but we need to make them work on tablet and mobile there are lots of environments that do not have a "right click" + it could work, maybe we can try - i am only afraid that tablet users might not have the idea to try a "long press" what do you think?

  • Two options to solve this:
  • Option 1: in tablet/mobile users can tap+hold (I've looked it up lol)
  • Option 2: instead of tab+hold, user can tab just once on the file/tile.json and the overlay will appear that has all the actions necessary :)

what is meant here is when you check facebook in full screen on desktop and browse the wall, the chats open one or more little chat boxes on the bottom of the page for each chat you are having ...of course you can switch into full screen, but they are otherwise those little "chat boxes"

  • Interesting! but i think the layout will be crowded.

Takeaways

serapath commented 2 years ago

feedback 2022.05.14

now its details, i guess we need quite a lot of wireframes to show alle the latest UX decisions and make gitbub pull requests to add markdown files which capture all the feature descriptions as a spec and to also add the figma files that show them.

also modular files are better than one big file to capture it all. lefs work on that next until we brainstorm and refine further i think.

mimi-uxui-dev commented 2 years ago

Worklog 2022.05.14-15

Wireframes

mimi-uxui-dev commented 2 years ago

Worklog 2022.05.06 Wireframes

serapath commented 2 years ago

feedback 2022.05.16 to this worklog

Worklog 2022.05.13-14

Feedback

comment: i do not understand at all what you mean with exercise/gigs and the refresh button we have the next/prev arrows which are for the list of lessons and for exercises/gigs why is it for exercise/gigs? ... i still don't understand

  • because users need a way to navigate to the next/prev lesson/exercise/gig without opening the the file/folder explorer overlay

understand that for "lessons" dont get it for gigs/exercises :-)

maybe a wireframe could clarify how that would work for gigs/exerises?

It is true that traditional apps sometimes crash, but have you ever seen a website where one part of an app ...e.g. on facebook or instagram or tiktok crashed and the rest of the app just worked? this is super rare or impossible and you can solve it by restarting the whole app. ...never seen any app giving you a refresh button for specific elements :P ...lets please build things so they dont crash :D

  • Fair point :D, I thought we have many apps not just one, the way i see it is that the Markdown is an app, video player is an app .. etc so WA is a collection of apps whcih are independent of each other

It is true that some iframes might not support the auto-update, therefore i would propose a refresh action as an "app specific action" for tools which are generic iframes.

  • Agreed

i think we need to be aware that any app/tool we use to open files in tiles might potentially have a few app/tool specific action and for an iframe that can be "refresh" ...but "refresh" should not be a generic TWM action for all tiles imho.

  • i agree, I'll try to make a list of actions for each app

:+1:

also - if you would open it in a new tab, ..then where exactly? which position? a new tile on top? left? right? bottom? next to an existing tile but as a new tab of the same tile? ...

  • Always to the right of the selected tab

if a user types a file name that does not exist yet and selects a program it can be dragged too to make a tile with the new file and program and clicking or touching "save" to add it permanently to the file explorer overlay how can a user open a file in a tile with an app but the file does not exist in the first place? The steps involved are:

  1. choose a program
  2. choose a tile position (see above for all the options)
  3. choose a new file name So how to re-use UI to make it as easy/quick as possible to intuitively do the three steps above in a single gesture, click, touch, drag or whatever :P ....because you can always have an action button and walk through a little steps wizard form but thats clunky :-)

  • I think the problem is with the steps order, and to solve it we can rely on the files extension; we can open these files using our programs based on their extension, therefor the order should be:

    • Option 1:

    1. click on the file, our system detects which app to use based on the extension, open it next to the selected tile (on click and your done fire)

      • Option 2:

    2. Right-click on your file

    3. An overlay will open, pick an opening method (one of the ones that you have suggested above)

+1 yes, but why not have the user click on the "profile path segment" to make those actions available?

  • I'll wireframe it and see how will that'll look like :D

So when you click "log in" in the TWM UI, the new browser tab opens your wallet/profile and switches focus to that browser tab but also shows your wallet/profile page with some sort of overlay that represents a login request from a particular aoo (e.g. WA workshop) and a particular (file/app) that is gonna be opened in a tile to log in with one of your available accounts and if you choose an account, the focus switches back to the WA TWM browser tab and you can now see that account/profile you successfully logged in with or switched to so it also becomes visible in the path segment :-) does that explain it better?

  • can we do it this way which is more simple, the user click on log in an overlay will appear on the workshop to show accounts and an action to create an account, after logging-in, the workshop will load with the chosen account and a new browser tab will open with your profile, thoughts :D ?

sadly the above way is the only way - this is sercurity related. The same as metamask wont be part of the browser but as a wallet it has its own extension UI In our case our "wallet" is a designated website in its own browser tab and we sadly have to do it like that for security reasons.

  • Question: where is the log in action button located? is it when the user forks a workshop, or finds its link, the workshop will be blured and an overlay will appear to ask the user to login/signup?

Nah, you would probably be logged in with some sort of guest/dummy account by default. You can log in or identify your progress and copy all progress you made so far on that workshop to your profile.

Clicking on the account/profile path segment in the beginning of the file path might show you the log-in as one of the possible actions.

i am ok with those suggestions but we need to make them work on tablet and mobile there are lots of environments that do not have a "right click"

it could work, maybe we can try - i am only afraid that tablet users might not have the idea to try a "long press" what do you think?

  • Two options to solve this:

    • Option 1: in tablet/mobile users can tap+hold (I've looked it up lol)
    • Option 2: instead of tab+hold, user can tab just once on the file/tile.json and the overlay will appear that has all the actions necessary :)

:+1: makes sense. The question is whether the touch will auto-open the file/app in a tile like a click or whether it will show the overlay with actions instead. ...it might not always easy to differentiate. My laptop for example has a mouse and keyboard, but i can convert it into tablet mode and use a pen or fingers to touch ...not always easy for the app to know how i'm using the app :-)

what is meant here is when you check facebook in full screen on desktop and browse the wall, the chats open one or more little chat boxes on the bottom of the page for each chat you are having ...of course you can switch into full screen, but they are otherwise those little "chat boxes"

  • Interesting! but i think the layout will be crowded.

Takeaways

  • Generic mechanisms: No exception files and no config that's not just an overkill but also unnessary

  • actions

    • drag'n'drop to move file/folder
    • share action: which give a link to workshop/files
    • fork action: for workshop
    • move action to copy and paste workshop/files/folders
    • clone action to clone a workshop to another profile
  • add refresh action to each tile only where necessary, if the app crashes or if the there is an update

:+1: all the above

  • Make action list for each App because not all apps have/need the same actions especial refresh action

maybe for each component/app/tool we might make and use in tiles in wizardamigos we already have an issue? maybe we need to just add an "action" section to each to list the actions relevant to those?

But actions are always shown in this overlay or whatever we choose - so there should be an issue for that component and we can link to all other issues taht deal with actions :-)

  • user are able to open in:

    • same tile
    • another tab in the same tile (so the tile has now two tabs)
    • a different tile
    • a new e.g. second tab of a different tile
    • a new tile entirely (positioned on top, bottom, left, right or in between, depending on how the current tile grid look like)
    • a new tile in a new single tile grid ...which actually just means a new tab in the root tile of the current tile - thats "zen" mode
    • but eventually even the option to open the "new file content in a new browser window" => which opens a new browser tab with a url param that will open the workshop with maybe just that tile or whatever open as the only tile in that new browser tab ...

:+1: :100: :+1: :100: :+1: :100: :+1: :100:

  • Right click action

  • we don't open folders anymore in tiles or subgrid tiles, but instead we open "tile json files"

    • If somebody wants to open a folder in a new tile, it will show the file explorer program in that tile (the file explorer which we otherwise only see in the overlay menu)

:+1:

  • open the file explorer program in a tile :+1:

    • In addition to changing the view from list to icons grid

  • WF

    • when the users clicks on 'new instance' it will create an new file of type of the select tile, for e.g. if the selected tile is markdown file then the new instance of it will be a new empty markdown file, it will be created and saved in the notes/markdown folder

:+1:

serapath commented 2 years ago

feedback 2022.05.16 for this issue

Worklog 2022.05.14-15

Wireframes

:+1: for listing the action sections in issues :-)

minute 0:44 action menu

otherwise "open in..." minute 4:30

profile minute 6:16

facebook style chatbox When I saw the tabs in your wireframe and the subscribe/unsubscribe icon (which might indicate with a little number how many unread notifications you have ... i remembered the little chat box which could show the notifcations history of all notifications for that tile

cleaner search bar :+1: :100: YAY :-) YES! That looks soooo much more neat. Thx for the cleaner search bar.

I still wonder if we can "merge" the:

  1. icon + workshop title to have it indicated in the path segment in the search bar, so we dont need it on the left part of the search bar
  2. the save tile action as one of the possible actions in the search bar input field next to (+) new and others, so it can only show in case we are dealing/selecting a tile json and change it and it is currently unsaved ...because thats when we need the action, otherwise we dont need it

right click menu So as you say in the end - it solves all of our problems But while it does - i would be happy to use all the feedback and suggestions i gave above to try to minimize it or get rid of it. ...if we could manage it all with just action icons ...some shown by default and some behind a vertical ... menu where the (+) New button is ...that would be sweet. ...users can still use hotkeys and also see tool tips to know the name of actions behind icons or see the keyboard shortkey displayed, but it would make things much more tablet and touch friendly maybe :-)

serapath commented 2 years ago

feedback 2022.05.16 for this issue

Worklog 2022.05.06 Wireframes

minute 0:31 notification overlay message

**minute 0:49 notification history

idea what if instead of the left side bar, the notifications list would open on the bottom, but full width in any of three modes:

  1. open on top of the search bar, but full width and shift all tabs/tiles a bit to the top
  2. open on top of the search bar, but ful width and overlay the tabs/tiles
  3. open on top of the search bar, but FULL SCREEN

The search bar would temporarily switch to the notifications search input field and had actions to filter for e.g. only change log entries?

mimi-uxui-dev commented 2 years ago

Feedback

maybe for each component/app/tool we might make and use in tiles in wizardamigos we already have an issue? maybe we need to just add an "action" section to each to list the actions relevant to those?

But actions are always shown in this overlay or whatever we choose - so there should be an issue for that component and we can link to all other issues that deal with actions :-)

  • We have an issue for Action List, i suggest that we put them there :D

also one button could just open the file explorer in its own tile where there is more space to have more options which means some actions (especially rename/clone/fork/move) could be reserved for when then file explorer is open in its own tile instead of just the quick overlay from a search bar?

  • What do you mean by reserved.., sorry i don't fully understand ?

the "default program" to open a file with could be shown as a little icon right next to the file name, but clicking it could show a separate overlay to switch the program ... instead of having the open with... sub overlay

  • yes we could, but its not intuitive, users wont even think to click on a file icon, but having the sub overlay open with … is self explanatory and when the user clicks it they will know what is going to happen. Lets say the user clicks on the icon of the file by accident, they will discover the feature (open file with diff apps), but next time, the wont remember its place, then they will just try and click around or even worst, write to us about it haha, so its a bad ux imho :)

the open in... option is cool, but again, realistically ... (you listed all modes in the take aways last time 👍 💯 ) a. clicking the file would just always select the file or folder ...unless you hold and drag'ndrop it of course b. open it as a new tab or new tile or tab of another tile or "zen mode tile", this should all work through drag'n'drop only so clicking and dragging the file/folder into a specific region ...near an existing tab or tile will indicate where it would go in case you drop the file there ...as a tab or tile c. the visible action items need to be big enough to be usable on touch screens, so maybe they should be shown based on selection next to the search bar including that "menu" to show more possible actions one default action should be to open the selection in the current tile and replace whats currently open in that tile d. but shift clicking or ctrl clicking or hold the "open action" icon to select the opening method could change the mode of where things are opened unless you use drag'n'drop?? :-) ...including one for new browser tab (e.g. maybe ctl+click?) e. of course dropping it as a new tab on the bottom search bar would turn it into a a new full screen zen mode tile

  • a. Yes, obviously
  • b. The fact that you explained it this way, makes things more intuitive, i thought of them this way at first, but when you mentioned it in the previous feedback made me add it, therefor i will delete open in .. option for the wireframe, the only thing will remain is the open in browser tab which i will add it next to the search bar as an icon
  • c. we can increase the font size to make them more visible, but we will remove the open in.. action,
  • d. Each action will have a key binding, but action have to be visual in the UI first
  • e. Cool Feature

also the "save" action should be a legit action in case the file or tile json file or whatever contains changes ;-)

  • save action is only for tiles, the only file that the user can write in will be the tool and markdown which are auto-save by default

    if they use keyboard only, one they execute the "open in new tile" action, it would show them a transparent colored area in the tile grid and the user can move it with and then confirm for the tile to be created in that position ... any thoughts? :-)

  • Agreed, YES

choosing the "create new folder" action triggers the process that focuses the new browser tab with the user wallet profile page so the yser can select or make a new account and confirm, which switches back to the wizardamigos page and updates and shows the new or selected e.g. MyNewUserAccount/ folder in the overlay

  • "create new folder" is "create new user" ?

👍 for the "external link icon" :-) comment ..but same as above - to be not to tiny for touch screens, maybe that should show at the end of the search bar once the user select a profile and wants to choose that manage or create action?

  • the external link icon is just a symbol to tell the user that when you click this it will open in an external tab in the browser. please note that if icons/fonts are small is just for demonstration purposes, when we reach the high fidelity designs, those things are always considered :D

we need some way to quickly see the history of notifications in case a user missed it :-)

  • if a user missed a notification it will be shown in the side overlay, the notifications are dismissed/removed only and only if the user clicks the x

I still wonder if we can "merge" the: icon + workshop title to have it indicated in the path segment in the search bar, so we dont need it on the left part of the search bar the save tile action as one of the possible actions in the search bar input field next to (+) new and others, so it can only show in case we are dealing/selecting a tile json and change it and it is currently unsaved ...because thats when we need the action, otherwise we dont need it

  • not sure if i understand

maybe we need space for buttons like e.g. cancel or confirm/apply/accept in case its an update that needs user consent before it is applied

  • what if the user doesnt want the update ? are we going to update when the refresh the page or log back in? if a user clicked or took too long or too many notifications happen at once, some might be lost they might still be indicated as little numbers next to the notification icons
  • what do you mean?

probably it also needs to be scrollable qutie soon, because all notifications that happened are visible, so like any discord chat, that can be a looooong list :P

  • Yes of course obviously :p

but also a "change log entry" is a notification, so it should also be in the notifications list

  • yes of course, its still a notification, but we need to keep track of it, thats why it has its own page and a list

i think notifications should have a type ...so change log is one of the possible types

  • not necessary, the notification card, has an image, title, description and in the next WF iteration it will have a CTAs, we can use all these to indicate that the notification is a changelog not a regular notification

👍 that you can search the change log, ...but i think we also need to be able to search notifications

  • not necessary, but sure why not :)

idea what if instead of the left side bar, the notifications list would open on the bottom, but full width in any of three modes:

  1. open on top of the search bar, but full width and shift all tabs/tiles a bit to the top
  2. open on top of the search bar, but ful width and overlay the tabs/tiles
  3. open on top of the search bar, but FULL SCREEN The search bar would temporarily switch to the notifications search input field and had actions to filter for e.g. only change log entries?
      1. how about height ?
        1. taking the full screen and full width is not necessary, so much breathing space
    • i think the way i made it is perfect .. for now ;)

Takeaways

serapath commented 2 years ago

feedback 2022.05.20 on previous worklog

Feedback

maybe for each component/app/tool we might make and use in tiles in wizardamigos we already have an issue? maybe we need to just add an "action" section to each to list the actions relevant to those? But actions are always shown in this overlay or whatever we choose - so there should be an issue for that component and we can link to all other issues that deal with actions :-)

  • We have an issue for Action List, i suggest that we put them there :D

:+1: just be aware, that later, when we work on a specific component, we need to know all the actions per component, so we can make the component support that action and "talk to" the action bar (or action dropdown or action button or whatever) to show the available actions for that specific app/tool/component/etc... that is currently selected

  1. have an action issue to implement the "action bar" and how it works as such regardless of the specific actions it shows
  2. have an action section in each app/tool/component which has actions that can be shown in the "action bar"

also one button could just open the file explorer in its own tile where there is more space to have more options which means some actions (especially rename/clone/fork/move) could be reserved for when then file explorer is open in its own tile instead of just the quick overlay from a search bar?

  • What do you mean by reserved.., sorry i don't fully understand ?

sry - i just meant if the "file explorer tool" is responsive and can be opened also as an overlay but also in its own tile, then maybe when it is opened in a tile it can offer more actions and options then when the user interacts with the slimmed down version inside the search bar overlay :-) ...just as an option. a full tile gives more space for extra UX.

the "default program" to open a file with could be shown as a little icon right next to the file name, but clicking it could show a separate overlay to switch the program ... instead of having the open with... sub overlay

  • yes we could, but its not intuitive, users wont even think to click on a file icon, but having the sub overlay open with … is self explanatory and when the user clicks it they will know what is going to happen. Lets say the user clicks on the icon of the file by accident, they will discover the feature (open file with diff apps), but next time, the wont remember its place, then they will just try and click around or even worst, write to us about it haha, so its a bad ux imho :)

i guess there are many ways, like for example

but last time you showed a very cleaned up search bar already, so there is literally only one element left and that is the action bar element or action item ...so there is not many options where a user can actually click, so they wont forget maybe? Also the drop down indicator makes it more obvious, for example.

the open in... option is cool, but again, realistically ... (you listed all modes in the take aways last time +1 100 ) a. clicking the file would just always select the file or folder ...unless you hold and drag'ndrop it of course b. open it as a new tab or new tile or tab of another tile or "zen mode tile", this should all work through drag'n'drop only so clicking and dragging the file/folder into a specific region ...near an existing tab or tile will indicate where it would go in case you drop the file there ...as a tab or tile c. the visible action items need to be big enough to be usable on touch screens, so maybe they should be shown based on selection next to the search bar including that "menu" to show more possible actions one default action should be to open the selection in the current tile and replace whats currently open in that tile d. but shift clicking or ctrl clicking or hold the "open action" icon to select the opening method could change the mode of where things are opened unless you use drag'n'drop?? :-) ...including one for new browser tab (e.g. maybe ctl+click?) e. of course dropping it as a new tab on the bottom search bar would turn it into a a new full screen zen mode tile

  • a. Yes, obviously
  • b. The fact that you explained it this way, makes things more intuitive, i thought of them this way at first, but when you mentioned it in the previous feedback made me add it, therefor i will delete open in .. option for the wireframe, the only thing will remain is the open in browser tab which i will add it next to the search bar as an icon

:+1: lets try :-)

  • c. we can increase the font size to make them more visible, but we will remove the open in.. action,

we could try that, but if we didnt have a context menu like that old school desktop thing would be even cooler i think.

  • d. Each action will have a key binding, but action have to be visual in the UI first

:+1:

  • e. Cool Feature

:100: yeah, cool that you think the same. i think its not even an extra feature, its basically just part of (b.)

also the "save" action should be a legit action in case the file or tile json file or whatever contains changes ;-)

  • save action is only for tiles, the only file that the user can write in will be the tool and markdown which are auto-save by default

Good example for why i tried to mention earlier that we need context dependent actions based on selected app/tool/component. So the TWM or a grid that has changes needs the "save" action option :-)

:+1: yes, so to me that means the "save" action is a context sensitive action which will show when the user selects a tile json file or tile json tile, which means the user selects a tab that belongs to a (sub) tile grid... ...this will show the relevant actions and of course - ....there is "subscribe/unsubscribe" and there is "close" and ...basically the standard ones, but then there is "save as tile json" or whatever because we are dealing with a grid and it might have changes that the user wants to save ...if it doesnt it might not even show the action :-)

if they use keyboard only, one they execute the "open in new tile" action, it would show them a transparent colored area in the tile grid and the user can move it with and then confirm for the tile to be created in that position ... any thoughts? :-)

  • Agreed, YES

:+1:

+1 for the "external link icon" :-) comment ..but same as above - to be not to tiny for touch screens, maybe that should show at the end of the search bar once the user select a profile and wants to choose that manage or create action?

  • the external link icon is just a symbol to tell the user that when you click this it will open in an external tab in the browser. please note that if icons/fonts are small is just for demonstration purposes, when we reach the high fidelity designs, those things are always considered :D

:+1:

we need some way to quickly see the history of notifications in case a user missed it :-)

  • if a user missed a notification it will be shown in the side overlay, the notifications are dismissed/removed only and only if the user clicks the x

I still wonder if we can "merge" the: icon + workshop title to have it indicated in the path segment in the search bar, so we dont need it on the left part of the search bar the save tile action as one of the possible actions in the search bar input field next to (+) new and others, so it can only show in case we are dealing/selecting a tile json and change it and it is currently unsaved ...because thats when we need the action, otherwise we dont need it

  • not sure if i understand

Ok, so the bottom search bar has:

  1. the icon + workshop title on the left
  2. the search bar with the (+) new action in the middle
  3. the "save tile" action on the right?

If the (+) new action in the middle next to the search bar could expand or also list a "save" action when it is relevant, for example because we are dealing with a selected tile which is an unsaved tile json, so basically a grid of tiles, then we would not need that extra save button on the right

Also, if the search bar path segment for the workshop would already display the icon + workshop title in it's name, then we would not need it on the bottom left :-)

Maybe the path segment of the current website we are visiting could get a special color on the path segment and in the file explorer overlay, just so the user knows what page they are on, because technically they can open any file/folder in the TWM regardless of which workshop they are visiting at the moment.

maybe we need space for buttons like e.g. cancel or confirm/apply/accept in case its an update that needs user consent before it is applied

  • what if the user doesnt want the update ? are we going to update when the refresh the page or log back in?

nope, we keep them on the old version. also we should always allow the user to migrate back to the old workshop version. the p2p technology we are using has that option baked in, so its easy to do. Refreshing the page would open the version of the page the user wants.

if you open https://datdot.org and check the dummy page for downloading the datdot app, you will see there are many versions and a users can change them.

if a user clicked or took too long or too many notifications happen at once, some might be lost they might still be indicated as little numbers next to the notification icons

  • what do you mean?

i think you said it above already that a user can always see a missed notifications by going to the side bar. which i recommend we merge with the change log, but yes, so all fine. i think you covered it already.

probably it also needs to be scrollable quite soon, because all notifications that happened are visible, so like any discord chat, that can be a looooong list :P

  • Yes of course obviously :p

but also a "change log entry" is a notification, so it should also be in the notifications list

  • yes of course, its still a notification, but we need to keep track of it, thats why it has its own page and a list

:+1: Thats why i recommend the notification types and allow people to search/filter and toggle types.

i think notifications should have a type ...so change log is one of the possible types

  • not necessary, the notification card, has an image, title, description and in the next WF iteration it will have a CTAs, we can use all these to indicate that the notification is a changelog not a regular notification

:100: yes i agree. i thought that is obvious anyway. the reason for suggesting a type is more so we can merge notifications regardless of type into a single notification history and the user can search & filter those :-)

+1 that you can search the change log, ...but i think we also need to be able to search notifications

  • not necessary, but sure why not :)

:100: yes thx :-) lets make them all searchable/filterable.

idea what if instead of the left side bar, the notifications list would open on the bottom, but full width in any of three modes:

  1. open on top of the search bar, but full width and shift all tabs/tiles a bit to the top
  2. open on top of the search bar, but ful width and overlay the tabs/tiles
  3. open on top of the search bar, but FULL SCREEN The search bar would temporarily switch to the notifications search input field and had actions to filter for e.g. only change log entries?
    1. how about height ?

:+1: lets try all the options. i guess seeing helps

      1. taking the full screen and full width is not necessary, so much breathing space

:+1: ok - lets see what works in the next Wireframes :-)

  • i think the way i made it is perfect .. for now ;)

haha :-)

:thinking: :thinking: :thinking:

maybe...

:thinking: :thinking: :thinking:

but given the "side bar" could be on the left or right ... and on mobile it would be very squeezed to have it on the left, so maybe top or bottom would work better.... what do you think about opening it in a tile? ...so the user can resize or position it anywhere they want? :-) ...also makes it more generic like any other app/tool/component

should we try that?

I think your proposed way is perfect, but not for mobile.

And also there is some future feature that i did not mention yet, because i didn't want to go there yet, but maybe now is the time.

  1. imagine the search bar, where you select file/app and have actions (some of them with params) where you suggested an overlay to fill out those and then execute the action
  2. imagine a workshop with multiple authors, one of them editing the info markdown of a workshop and saves it
  3. that will trigger a notification for all learners that workshop and other workshop authors notes have been updated
  4. if a workshop author checks the notification history they will see the save edit command from the other workshop author

...so the whole notifications menu in some way becomes some sort of terminal, with the history showing all previous actions (which would also be notifications - just like discord chats can notify you about news) ...and it also has an action bar to issue new actions (=commands) ...so it becomes similar to a terminal, but the actions available depend on the context

Given that the notifications are or can become quite similar to a terminal though, positioning them as tiles itself or below a specific tile, because the terminal is the corresponding terminal for a specific file/app tile would make a bit more sense maybe :-)

Does that make sense? :-)

choosing the "create new folder" action triggers the process that focuses the new browser tab with the user wallet profile page so the yser can select or make a new account and confirm, which switches back to the wizardamigos page and updates and shows the new or selected e.g. MyNewUserAccount/ folder in the overlay

  • "create new folder" is "create new user" ?

:+1: :100: yes, haha :-) So a new user is basically a new folder - that is true.

So now you already know from the previous feedback comment, that the notification area in addition to the search bar command field together forms some sort of terminal where possible commands/actions depend pretty much on the context, you can see that is also true for the profiles/ folder.

If a user selects the profiles folder. The notifications history would show all the changes or updates relevant to that path or profile/folder. A user can also use the available actions from the search action bar.

does that make more sense now? :-)

Which actions are available in specific situations is up for brainstorming, but for example:

  1. So for a selected file, the available actions are the default actions the TWM always offers and the ones connected to the default program associated with the file extension, but switching the program can show different actions associated with the file
  2. For a selected folder its the default options (which means e.g. open folder as a file explorer tile) but i guess in our case we should also be able to associate specific folder paths with actions, similar to how files can be associated with specific programs, thus the profile folder would by default have those additional folder specific actions

Somewhere we have a config for all known file extensions and the default programs/actions Somewhere we have a config for all known paths and the default programs/actions

serapath commented 2 years ago

feedback 2022.05.20 on [previous worklog](

Takeaways

  • Wireframes

    • Understand that for "lessons" don't get it for gigs/exercises :-) maybe a wireframe could clarify how that would work for gigs/exercises?

:+1: addition: we might also have a new type of item called a (grant) proposal.

  1. exercise: task made by teacher paid by sponsors in scholarship/grant/badges?/nothing?
  2. gig: task made by task author paid by task author or sponsors in currency
  3. proposal: task made by learner paid by funders in currency

Basically there are at least 3 types of projects (1. exercise project) (2. gig project) (3. proposal project) ...they can be large or even just a single task ... we might get to it once we actually start wireframing the details about it.

They all have in common that they start with some sort of application ... and then enter into an interactive process of working and getting feedback from (1. a bot?) (2. one or more gig authors) (3. a proposal sponsor) ... which in practice has the form of some sort of chat between relevant parties which includes agreements and payments and worklogs and can be simple or long and complex ...and even has the options to create sub tasks during the interactive process

The inspiration will come from the way we work on WA at the moment, our todos, worklogs, feedbacks, etc... but might include additional steps for exercises and proposals, but ...think of it, the "proposal" happens already when you create todos and issues and i agree to them, while the gigs happen when i create tasks and you start doing them ...and exercises is what happened before we started when you went through the "hyper modular web development" workshop ...but yeah, lets keep all that for the specific issue about gigs/exercises/proposals :-)

  • Users can be logged in with some sort of guest/dummy account by default. You can log in or identify your progress and copy all progress you made so far on that workshop to your profile.

:+1:

  • User click "log in" in the TWM UI, the new browser tab opens your wallet/profile and switches focus to that browser tab but also shows your wallet/profile page with some sort of overlay that represents a login request from a particular aoo (e.g. WA workshop) and a particular (file/app) that is gonna be opened in a tile to log in with one of your available accounts and if you choose an account, the focus switches back to the WA TWM browser tab and you can now see that account/profile you successfully logged in with or switched to so it also becomes visible in the path segment :-) We have to do it this way for security reasons.

:+1:

Make action list for each App because not all apps have/need the same actions especial refresh action

  • Open the File/folder explorer in a tile in the TWM
  • clone workshop => should be just clone (depends on the file)
  • fork workshop => should be just fork (depends on the file)
  • get shareable link => should be just copy link (or copy link address)
  • Responsive Layout

:+1:

  • Tap + Hold in mobile/layout is the equivalent for Right Click in Web or Tap and the overlay will appear instead of Left Click
    • add a little vertical ... file explorer entry so users can click it to see the menu
    • add ... to tab
    • dropping files on the bottom search bar would turn it into a a new full screen zen mode tile

:+1:

  • also i can see in the search bar the (+) New button, which i think should be also an action like the ones you show in the context menu ...in fact the search bar has space for a few default action icons a user can touch (lets always think touch so we can make sure it works on desktop and tablet) ....but then have the vertical ... icon or some icon for a menu to show the remaining actions for the current selection, where selection happens by clicking on one or more files/folders in the overlay

:+1:

  • or selection happens by autocomplete typing in the search bar and just activates the default action shown in the menu bar, while ...pressing another key ...maybe could open the actions and then can change the action ...or also show hotkeys
  • i think the subscribe/unsubscribe icon should also be an action for a given selection :-)
  • the refresh action is probably/hopefully a rarely used one and not relevant to all, so should go behind the ... more actions button imho

:+1:

  • if they use keyboard only, one they execute the "open in new tile" action, it would show them a transparent colored area in the tile grid and the user can move it with and then confirm for the tile to be created in that position. also - that mode can be used to *move" an existing tile around in the tile grid to position it somewhere else
  • add Guest Account to the profile overlay
  • make the profile actions like folders
  • clicking on the notification will make it go away, remove the "x"
  • add show more action to notification
  • add confirm, cancel actions to notification card
  • the mark all as read button could be on the bottom rather than on top
  • change log: reverse the order, top to bottom
  • merge change log with notifications and add filter

:+1:

serapath commented 2 years ago

feedback 2022.05.20

just a comment about the notification style terminal described above.

if you check vscode and open a terminal and then you click on the little [] bash icon in its bar, a dropdown shows and you can select "move terminal into editor area" ...which, once you do it can still be "below the editor" but you can now freely move it.

if an editor was perfectly related to a specific tile content (e.g. a file content), it could even use colors/borders/etc... to indicate/highlight which tile a "terminal" belongs to.

now in our case that would be a "notification terminal" or whatever we'd call it.

mimi-uxui-dev commented 2 years ago

Worklog 2022.05.19 Copied all the wireframes that we created from Figma to the wireframes folder in the master directory

@output :package: wireframes folder

mimi-uxui-dev commented 2 years ago

Worklog 2022.05.23

Feedback 2022.05.23

Feedback

sry - i just meant if the "file explorer tool" is responsive and can be opened also as an overlay but also in its own tile, then maybe when it is opened in a tile it can offer more actions and options then when the user interacts with the slimmed down version inside the search bar overlay :-) ...just as an option. a full tile gives more space for extra UX.

  • I think we shouldn't do this, it's not generic, also confusing, the file explorer have enough space to include as many action as we want, and if thing began to look crowded we can group them in an overlay.

If the (+) new action in the middle next to the search bar could expand or also list a "save" action when it is relevant, for example because we are dealing with a selected tile which is an unsaved tile json, so basically a grid of tiles, then we would not need that extra save button on the right

  • the save button on the right is for the entire tile, i will add a save button in the tab when its relevent.

Also, if the search bar path segment for the workshop would already display the icon + workshop title in it's name, then we would not need it on the bottom left :-)

  • sure

Maybe the path segment of the current website we are visiting could get a special color on the path segment and in the file explorer overlay, just so the user knows what page they are on, because technically they can open any file/folder in the TWM regardless of which workshop they are visiting at the moment.

  • I think it would be better if we keep things generic

And also there is some future feature that i did not mention yet, because i didn't want to go there yet, but maybe now is the time.

  1. imagine the search bar, where you select file/app and have actions (some of them with params) where you suggested an overlay to fill out those and then execute the action
  2. imagine a workshop with multiple authors, one of them editing the info markdown of a workshop and saves it
  3. that will trigger a notification for all learners that workshop and other workshop authors notes have been updated
  4. if a workshop author checks the notification history they will see the save edit command from the other workshop author ...so the whole notifications menu in some way becomes some sort of terminal, with the history showing all previous actions (which would also be notifications - just like discord chats can notify you about news) ...and it also has an action bar to issue new actions (=commands) ...so it becomes similar to a terminal, but the actions available depend on the context Given that the notifications are or can become quite similar to a terminal though, positioning them as tiles itself or below a specific tile, because the terminal is the corresponding terminal for a specific file/app tile would make a bit more sense maybe :-) Does that make sense? :-)
    • No it doesnt make sense haha just joking!
    • however, i think we should seperate the two, we must have notifications and terminal, the notifications like i showed you in the last wireframes and the terminal will display notificications but for commands also users can add submit commands
    • make sense :-) ?

👍 addition: we might also have a new type of item called a (grant) proposal.

exercise: task made by teacher paid by sponsors in scholarship/grant/badges?/nothing? gig: task made by task author paid by task author or sponsors in currency proposal: task made by learner paid by funders in currency Basically there are at least 3 types of projects (1. exercise project) (2. gig project) (3. proposal project) ...they can be large or even just a single task ... we might get to it once we actually start wireframing the details about it.

They all have in common that they start with some sort of application ... and then enter into an interactive process of working and getting feedback from (1. a bot?) (2. one or more gig authors) (3. a proposal sponsor) ... which in practice has the form of some sort of chat between relevant parties which includes agreements and payments and worklogs and can be simple or long and complex ...and even has the options to create sub tasks during the interactive process

The inspiration will come from the way we work on WA at the moment, our todos, worklogs, feedbacks, etc... but might include additional steps for exercises and proposals, but ...think of it, the "proposal" happens already when you create todos and issues and i agree to them, while the gigs happen when i create tasks and you start doing them ...and exercises is what happened before we started when you went through the "hyper modular web development" workshop ...but yeah, lets keep all that for the specific issue about gigs/exercises/proposals :-)

  • we should skip the whole todos, worklogs, feedback things, it get daunting most of the time, however we should stick to proposals, comments and then the last comment is the solution :-)

Takeawys

serapath commented 2 years ago

feedback 2022.05.23

Worklog 2022.05.23

Feedback 2022.05.23

Feedback

sry - i just meant if the "file explorer tool" is responsive and can be opened also as an overlay but also in its own tile, then maybe when it is opened in a tile it can offer more actions and options then when the user interacts with the slimmed down version inside the search bar overlay :-) ...just as an option. a full tile gives more space for extra UX.

  • I think we shouldn't do this, it's not generic, also confusing, the file explorer have enough space to include as many action as we want, and if thing began to look crowded we can group them in an overlay.

are you sure?

its not crowded if ppl dont use it.

it would give the user an option to make a full height tile on the left side of the website ...maybe 200-300px wide that shows the file explorer in a tile. That way they would get what vscode has all the time, a permanent view of your files and folders while you work or sort files, but if users dont want it they just dont use it to not make things croweded.

but ok - if you think so, lets skip it for now and see if that works out too :-)

If the (+) new action in the middle next to the search bar could expand or also list a "save" action when it is relevant, for example because we are dealing with a selected tile which is an unsaved tile json, so basically a grid of tiles, then we would not need that extra save button on the right

  • the save button on the right is for the entire tile, i will add a save button in the tab when its relevent.

:+1:

Also, if the search bar path segment for the workshop would already display the icon + workshop title in it's name, then we would not need it on the bottom left :-)

  • sure

:+1:

Maybe the path segment of the current website we are visiting could get a special color on the path segment and in the file explorer overlay, just so the user knows what page they are on, because technically they can open any file/folder in the TWM regardless of which workshop they are visiting at the moment.

  • I think it would be better if we keep things generic

yes i understand. i was thinking of it as generic. i thought of it similar to "FOCUS" ...an element might get a highlight color when it is focused. but if you visit workshopA website and workshopB website ... you could technically change the TWM to show the same content on both pages, right? ...

But still, you are still on the current domain of workshopA or workshopB and if you quickly want to see which page is which and/or maybe "jump back" to that default you know and click and open that default tile json file to restore the workshop view of that workshopA or workshopB.

...if we don't have it, how would a user know?

And also there is some future feature that i did not mention yet, because i didn't want to go there yet, but maybe now is the time.

  1. imagine the search bar, where you select file/app and have actions (some of them with params) where you suggested an overlay to fill out those and then execute the action
  2. imagine a workshop with multiple authors, one of them editing the info markdown of a workshop and saves it
  3. that will trigger a notification for all learners that workshop and other workshop authors notes have been updated
  4. if a workshop author checks the notification history they will see the save edit command from the other workshop author ...so the whole notifications menu in some way becomes some sort of terminal, with the history showing all previous actions (which would also be notifications - just like discord chats can notify you about news) ...and it also has an action bar to issue new actions (=commands) ...so it becomes similar to a terminal, but the actions available depend on the context Given that the notifications are or can become quite similar to a terminal though, positioning them as tiles itself or below a specific tile, because the terminal is the corresponding terminal for a specific file/app tile would make a bit more sense maybe :-) Does that make sense? :-)
  • No it doesnt make sense haha just joking!
  • however, i think we should seperate the two, we must have notifications and terminal, the notifications like i showed you in the last wireframes and the terminal will display notificications but for commands also users can add submit commands
  • make sense :-) ?

haha, no it does not make sense :stuck_out_tongue: ...just joking :stuck_out_tongue_winking_eye:

I think in all modern apps, most of all discord, notifications, even system updates or whatever ...come in the form of chat messages. Maybe by bots, maybe from other users or even from discord. you can follow/subscribe to channels and have announcement channels to notify you on other channels. many channels that are just for updates are "read only", but in others ppl can write ...bot commands or just regular chat messages.

I believe this trend will spread, so while "notifications" where separated in the past, i think notifications is just a system talking to a user to inform them ... representing that properly is basically saying that is a "bot" that represents your app or system. and any interaction is there too ... its like a ping pong between you the user and the system and you can see the history of that.

sometimtes things are initiated by you and you get notified when things are done or change. sometimes things are initiated by the system and you have to read (e.g. confirm/cancel) sometimes things are initiated by the system but just inform you with nothing to do.

you might want to search through the history you might want to filter it ...and so on... some apps, might not allow any user input so the "terminal" becomes only a "notification log"

again ... we are building it to teach people programming literacy and tech and get them more in the mindset of thinking from that perspective - even though thinking about notifications like that might not be the way most non-tech users think of it

+1 addition: we might also have a new type of item called a (grant) proposal.

exercise: task made by teacher paid by sponsors in scholarship/grant/badges?/nothing? gig: task made by task author paid by task author or sponsors in currency proposal: task made by learner paid by funders in currency Basically there are at least 3 types of projects (1. exercise project) (2. gig project) (3. proposal project) ...they can be large or even just a single task ... we might get to it once we actually start wireframing the details about it.

They all have in common that they start with some sort of application ... and then enter into an interactive process of working and getting feedback from (1. a bot?) (2. one or more gig authors) (3. a proposal sponsor) ... which in practice has the form of some sort of chat between relevant parties which includes agreements and payments and worklogs and can be simple or long and complex ...and even has the options to create sub tasks during the interactive process

The inspiration will come from the way we work on WA at the moment, our todos, worklogs, feedbacks, etc... but might include additional steps for exercises and proposals, but ...think of it, the "proposal" happens already when you create todos and issues and i agree to them, while the gigs happen when i create tasks and you start doing them ...and exercises is what happened before we started when you went through the "hyper modular web development" workshop ...but yeah, lets keep all that for the specific issue about gigs/exercises/proposals :-)

  • we should skip the whole todos, worklogs, feedback things, it get daunting most of the time, however we should stick to proposals, comments and then the last comment is the solution :-)

YES - it is daunting - i think we don't get around that. its the same for every single tool in the TWM :-) ...without it it isn't realistic to expect people to try our tools and then use them for real, but..

yes, you are right.

  1. first is the proposal initially
  2. then followed by a bunch of comments by both sides
  3. and then the last comment is the solution or end of the task (gig/exercise/proposal/...)

...but some comments include special elements important for a paid contractual relationship

for example

so the comments have specific "types" and specific types can have a special meaning including specific actions.

for example, when a task author or teacher accepts a specific output or exercise answer as correct, it would automatically trigger the payment or assign a success badge

This is super important, because wizardamigos tasks/gigs should be able to allow real work to be done and not just be a toy. We can add features that support that work process, so it becomes less manual work and motivates users to stay on WA instead of leaving it after accepting a gig and then use the traditional proprietary closed source centralized tools and in order to keep things simple but supporting all this, we can focus on UX that makes it easy.

for example: you upload a worklog video to youtube every time after you worked and then edit the description to include the issue link and then add it to the github issue comments and then update your youtube playlist too and then update your timelog, and then update todos with the outputs of your latest worklog, etc...

=> That is something we can make simpler by adding UX for it, but not having it means people can't do serious work :smiley: ...otherwise, yes, its just comments and a final comment the way you mentioned :-)

idea:

serapath commented 2 years ago

feedback 2022.05.23

Takeawys

  • delete open in .. option for the wireframe, the only thing will remain is the open in browser tab which will be added next to the search bar as an icon
  • add dropdown menu to the file icon to open open with ... overlay
  • add save button in tabs
  • remove icon + workshop title at the bottom left

  • Add to notes:

    • we should always allow the user to migrate back to the old workshop version. the p2p technology we are using has that option baked in, so its easy to do. Refreshing the page would open the version of the page the user wants. if you open https://datdot.org and check the dummy page for downloading the datdot app, you will see there are many versions and a users can change them.

    • So a new user is basically a new folder - that is true.

    • So now you already know from the previous feedback comment, that the notification area in addition to the search bar command field together forms some sort of terminal where possible commands/actions depend pretty much on the context, you can see that is also true for the profiles/ folder.

    • If a user selects the profiles folder.

    • The notifications history would show all the changes or updates relevant to that path or profile/folder.

    • A user can also use the available actions from the search action bar.

    • does that make more sense now? :-)

    • Which actions are available in specific situations is up for brainstorming, but for example:

    • So for a selected file, the available actions are the default actions the TWM always offers and the ones connected to the default program associated with the file extension, but switching the program can show different actions associated with the file

    • For a selected folder its the default options (which means e.g. open folder as a file explorer tile) but i guess in our case we should also be able to associate specific folder paths with actions, similar to how files can be associated with specific programs, thus the profile folder would by default have those additional folder specific actions

    • Somewhere we have a config for all known file extensions and the default programs/actions

    • Somewhere we have a config for all known paths and the default programs/actions

  • Add types to notifications
  • Swith to old versions
  • add terminal as components that opens in a tile

:+1:

mimi-uxui-dev commented 2 years ago

Feedback '2022.05.24'

Feedback

are you sure? its not crowded if ppl dont use it. it would give the user an option to make a full height tile on the left side of the website ...maybe 200-300px wide that shows the file explorer in a tile. That way they would get what vscode has all the time, a permanent view of your files and folders while you work or sort files, but if users dont want it they just dont use it to not make things croweded. but ok - if you think so, lets skip it for now and see if that works out too :-)

  • On a second thought, i think we should open the file explorer in a tile

yes i understand. i was thinking of it as generic. i thought of it similar to "FOCUS" ...an element might get a highlight color when it is focused. but if you visit workshopA website and workshopB website ... you could technically change the TWM to show the same content on both pages, right? ... But still, you are still on the current domain of workshopA or workshopB and if you quickly want to see which page is which and/or maybe "jump back" to that default you know and click and open that default tile json file to restore the workshop view of that workshopA or workshopB. ...if we don't have it, how would a user know?

  • I think the user can tell where they are from reading the path segment, i'll explain this in the worklog