Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Design - task messenger #12

Open
30 tasks done
Mirabrar-21 opened this issue Jun 4, 2024 · 28 comments
Open
30 tasks done

Design - task messenger #12

Mirabrar-21 opened this issue Jun 4, 2024 · 28 comments

Comments

@Mirabrar-21
Copy link

Mirabrar-21 commented Jun 4, 2024

@todo















@Mirabrar-21
Copy link
Author

tasks - 2024.06.4

  • read discord/github issues
    • read discord/github issues and took notes/ screenshots -16h03min
      • recorded, updated task and worklog -8min
    • @output 📦 task messenger notes

worklog

Worklog-26


feedback


proposal

@serapath
Copy link
Owner

serapath commented Jun 4, 2024

feedback 2024.06.04

Just some feedback while watching your worklog.

One spontaneous feature that comes to mind would be if there was a mechanism to help people who work on tasks to log/track time. Basically mechanisms to help them with all the steps that are currently tedious when preparing a worklog in markdown on github, creating the worklog video on youtube, updating the hackmd file, etc...

I do think, because you basically already go through this with us all the time, you have this extra insight into this process and what would really help to simplify the administrative overhead :-)


view
In the picture above you mention the number 24 at the end. That was indicating the "unread messages" in that chatroom.
The copy to clipboard button is the last icon is correct.
The plus button is for sub tasks, yes. We'll see if this is how we will leave it or not. Everything is still in an early stage.
The eye might show details or not.

Unlike the datdot app, everything is much less written in stone, so now you take notes, but we definitely need your opinion and we need to brainstorm what and why somthing would make the UI/UX better for users in the end.


applications

Now this is when you enter a specific task room which is in an early stage. When creating a task room, there might not yet be anyone assigned to work on a task.
In the real world, we reached out to you and now we work together on this "design task messenger" issue here on github. Sometimes we have multiple applicants for a given task or job. Maybe there is an assessment phase.

The same is true for people who want to help fund a task to get people paid who do the work. So this process needs to also be modelled in the task messenger.

What is the ideal process for it?
Imagine one day you get a bigger budget and you will maybe outsource some of the work you do to others.

Toshi did this and you could then manage who you work with and maybe even get other people to help you fund the tasks you want. So that is what this is about.

Of course - we are still in the middle of figuring out how this should work and what david did is just his proposal and maybe we can find better ways :-)


chat actions

Here for example we are talking about the send message field and choosing specific "chat actions" and then a form or steps that a user need to fill out to submit a specific task action.

Again, in VSCode or mnay tools, one can interact directly with the "file explorer" to edit/delete/add/... files or folders. In the same way, it remains a question what is the best way to express all that logic.

We want to keep it compact and concise and minimal. Maybe what david did so far here is good already or maybe we find even better ideas. For now this is what we have, but keep in mind, that all of this can change if we decide to make it even better :-)


contract amendment

So the above screen shows a chat user "Prof Dumbodole" writing:

"David A. made an adjustment to this task structure, kindly gothrough before accepting"

So the "popup" is a prompt to the maintainer or "manager" of the task to accept those proposed changes by clicking "accept". Alternatively they can "view contract amendment", which basically is supposed the before/after or difference or basically what exactly was changed in the task structure.
Finally, if the maintainer/manager does NOT agree with that change, they can "reject" it (an option missing here and probably that needs a reason to be provided) or better they can "re-modify" it to make a counter proposal on the new task structure and then accept it or maybe share it with David A. or Prof Dumbodole again for them to now go through the process of accept/reject/modify/etc...

In that way we get a more controlled back and forth with clear intents and clear acceptance of what is actually going on :-)

For example, in our methodology, in every worklog, at the end, you could provide under "proposals" a list of new or modified tasks to work on next and in my feedback comment i am supposed to accept/reject/modify those tasks and once accepted you could then go on and work on them.

So that is what this is about.


create task

create task
Yes, you correctly identified this as "create task".
Now as you can see or as i tried to say already, a "task room" or creating one can be used in different ways.

e.g. an "exercise" is usually an unpaid task created by a teacher.
e.g. a "paid task" is what we usually do so you work on stuff and we pay.
e.g. a "proposal" would be something that you create and we or others accept and pay you ... technically it could be like the kickstarter platform and multiple funders could support a specific task with lots of sub tasks ...a "project proposal" basically and then fund it.

So the modes in who creates a task. Who manages a task. Who funds a task... or if there are funds at all ..and in which order... might differ, but once those modalities are clear, then working on such tasks or projects follows the same logic regardless of how it was created.


task tree

Your explanation was good.
One thing to note regarding the links of outputs.
Those links are "next" links, which mean they link to tasks in which that particular output we are curently looking at, in our example it is button-repo, is used as one of the inputs for those linked future tasks.

The ❓ just means an output is planned (doesnt exist yet)
The 🏭 means it is work in progress. maybe the file or repo exists, but the task isnt done yet and not everything has been added to the output file yet.

The 📦 means the output is created and wont change anymore. The specific new output or new version of a file is now ready to be used as an input in future tasks.


task tree ppl

Here the main idea was to try to represent people assigned to a task and also candidates.

So a task to assess people might be a task in itself and while multiple candidates go in, only maybe one candidate is actually chosen and other candidates are either not chosen or maybe chosen for a different task.

are candidates themselves 1:1 chat rooms?
is there a group chat for applicants?
are candidates themselves inputs to a task?
...like a "human resource"?
are candidates an input to an assessment center or application task and the output is the candidate who is successfully chosen and then that candidate becomes an input to other tasks?

I don't think we have a clear answer yet, but tis is what is experimented with in this screenshot above.

@Mirabrar-21
Copy link
Author

Mirabrar-21 commented Jun 6, 2024

tasks - 2024.06.5

  • read discord/github issues
    • read discord/github issues and took notes/ screenshots -3h48min
      • recorded, updated task and worklog -10min
    • @output 📦 task messenger notes

worklog

Worklog-27


feedback


proposal

@serapath
Copy link
Owner

serapath commented Jun 8, 2024

feedback 2024.06.08

You ask on the last (Mobile Version 0.0.4), what the bottom menu shows, but i do think the idea was to have the navigation of task explorer on the bottom as well.

So you can send messages in a chat or switch to the task explorer and navigate to different task chats.

On desktop, you have enough space to also show both in parallel i assume :-)


You also ask about one icon in the upper right corner
icon

I have no idea what it was. Maybe david has a later worklog where he talks about this version, but i don't really remember what it is. Maybe that says it's not intuitive and we should reconsider? :P ...


Otherwise Great. I think if we now can implement a new prototype with all the features and all the components it uses, based off the information you have gathered, that would be great.

One complete wireframe that shows every possible feature, maybe following a little "example project" from start to finish, where participants create, apply, assign, work, give feedback, close tasks, etc...to basically walk through a prototype that shows off every aspect of the task messenger, that would be cool.

@Mirabrar-21
Copy link
Author

Mirabrar-21 commented Jun 8, 2024

tasks - 2024.06.7

  • read discord/github issues
    • read discord/github issues and took notes/ screenshots, updated notes ,wrote some ideas about the features and checked figma design as well -4h51min
      • recorded, updated task and worklog -23min
    • @output 📦 task messenger notes

worklog

Worklog-28


feedback


proposal

@serapath
Copy link
Owner

serapath commented Jun 9, 2024

feedback 2024.06.08

Overall, good ideas.
Below I didn't comment on anything where I agree with your explanation in the video :-)

How to aproach in general?

My main suggestion would be, because there are sooo many parts and features involved, that we sketch out this app section by section or component by component.

We already started with Ali to create and improve the "task explorer" component which we plan to re-use in the "task messenger" in the end.

But e.g. Form Wizards, Task Room Info, Input Action Bar, etc... we can probably try to break down the task messenger into some major components that cover the main features, and then we work out the details and put them together to slowly in detail work through everything without getting overwhelmed?

below is some extra feedback about your worklog video:


actions:

actions

Yes, you can add a feedback entry to actions.
But let's keep in mind that all actions are meant to be "context relevant", so the actions available should somewhat depend on the context or focus.
e.g. is a task selected?
e.g. is a document selected?
e.g. is a person selected?
e.g. ...maybe like replying to messages - is a worklog selected?

It would make sense to display "give feedback" when a worklog is selected.

You also mentioned, that when a worklog is selected, there might be a sub thread or some section where just that worklog is discussed?


chat messages

also chat messages might need a little link to jump and link exactly to a specific chat message.

also, all feedback messages we discuss or at least selected ones can become "input" for the next tasks to create the next worklog. This process will probably be refined and improved once we actually start using the app :-)


action selection:

Also, we want to keep things compact and minimal, also for terminal UI. A "different page", when e.g. selecting an action like worklog, makes on lose the context of the chat and tasks that were selected, so maybe a popup or just a form that expands below or above the input field would be enough and then we copy the idea of the "steps wizard form" that we have when creating plans in datdot?

We can see and try what works best


notifications

having a little dot sounds good. let's see where and how :-)


learning the app - video

yes agree, a 5 minute video is kinda dull to watch.
Then again there are different types of learners.

  • some want to watch something to get a first impression
  • others prefer to read an instruction manual
  • again others like to just click around and explore
  • yet others want a support chat to ask questions
  • some prefer maybe tool tips or a docs/question button to highlight and explain elements

maybe options can be combined as well.
I don't know yet what the right answer is, but i would say - ...imagine you would play some sort of strategy game and/or tactical shooter and in single player mode you slowly get introduced to new items and abilities and have a little tutorial how to use them. Which game does it best?
how could we make it fun or even gameify it?

e.g. could there be a "bot" that creates tasks to learn about the task messenger and then you complete those tasks and get a badge? ...i dont know.

we can also save this question until the end and for now ignore the learning part.

Maybe the app will be so intuitive and self explanatory that it isnt needed to explain anything at all anyway :-)


task creation

task creation
So as far as i remember the idea was you can create a new task, ...give the task a name but also maybe a description, which will be converted into a quick "input document" which described the task in more detail in case a task needs more explanation.

Maybe this place isn't the best way to go about it and not every task even needs this.


applicants

yes, what i said that applicants are inputs and an assessment or hiring task can have the chosen candidate as an output is just a thought - an option.

It is at this point very unclear of what the best way of dealing with people is and how the task messenger could support the process of finding people to work with in the first place.

Maybe that is "out of scope" for the task messenger in general?

But then, if somebody is assigned a task to find candidates and hire them, those tasks will probably be managed through the task messenger ...and what is the output of a task to find new people to work with? ...i assume the task is completed when you found people to work with.
How can such a task be expressed in the task messenger?


create task form

create task form

One issue i have with this approach is, that although it looks slick and professional, it is using quite a lot of screen real estate.

I think i strongly prefer to find the most minimalistic "by the way" UI/UX for most things, so that i don't even feel that i did a big intimidating thing like filling out a big form with lots of information. (i am exagerating maybe, but in terms of clicks, typing, movements and visuals) i hope we can keep it super super lean.

So that's more a formal comment. Nothing is wrong with the form seen above. The content is good of course.

types
The above here is just templates, so not even sure if necessary. I think i commented on that already, that it is more a question of how a task is used and that implicitly makes it in our mind a "paid task" or an "exercise" (because there is little or no payment involved or payment is a certificate token?) or it makes it a "proposal", because the "funder" and "task manager" is not the same person or even the "worker" assigned themselves as worker and manager and looks for "funders" ....it's tehcnically the same and we as humans would just give it different names.

This "template" might influence the wizard or form to fill out, by showing some or skipping other fields when initially creating a task and assigning people to roles.


feedback form

feedback
you said this is fine apart from how it is designed, but i think as already mentioned last time - at least a "reject" button is missing i think.


apply and/or fund

apply or fund
Nah, the idea is all of that is happening inside the messenger.

you can click the task to enter the chat room and see all details and sub tasks.

you can click apply and that starts the process that makes you an applicant/candidate to maybe work on it.

or you click fund and top up the budget of a specific task.

if this task is e.g. a "proposal", then maybe somebody can apply as the "task manager" as well and a proposer/worker might accept the "task manager" if the task manager is a funder or maybe sent by a funder ... so that button isnt even shown.

There is no concept of actually leaving or clicking and going outside of the "task messenger" ever. all links and actions are happening within.

The only exception might be links as input or output documents. Those could technically live outside the task messenger, but nothing else should.

email
The above is also slightly misleading. There is no such thing as emails here and will never be.
If applying is not possible anymore, the apply button will not be visible or active.

You might still see the task as read only in the same way as you can go around github repositories and read github issues.
Also, you can see the roles or people who work, manage or fund a task and maybe you can click on them and if they allow private messages, send them a message.

**at the moment, it is not planned to make a "public square" where people can write into a chat without being first in a role of applying/funding/manging/working/etc...
Tasks are public but read only, unless you are part of that task.

Maybe there should be a way of opening a "new" task and relate it to a project, just like on github, somebody can open an issue related to a bug or a feature request.

I do think, that kind of option should exist not next to "tasks" in the task tree, but next to "outputs" in a task tree, because an output can be a component or an app and users might actually want to give feeedback or report bugs or feature requests and then ...that could be the start how others can apply for that task or fund that task or manage that task...


contract updates

technically, every worklog submitted with logged time and every feedback that doesnt reject but accept the worklog is a contract update, in the sense that now there is a requirement to pay for that logged time.

So the task messenger from applying as a candidate and getting some budget, all the way through managing the tasks and sub tasks and rounds of worklogs and feedback, until the final delivery of outputs... is all about creating/managing contracts if you want to "nit pick" :D

contracts
So the above is good, but we should always somehow include easy ways to review and see the details of what some sort of "update" is all about.

If every task is a contract or sub contract.
Then the chat history is the "contract amendment journal".
Basically a chronological list of interaction to update contracts with leads also to invoices and required payments, etc... ...and can maybe even used as proof in case there is a conflict and things need to be escalated and resolved (hopefully of course there is no need for these things), but it is good to have a provable history of what happened.

We just want to call them "tasks" and "worklogs" and "feedback" instead of "contracts" and "sub contracts" and "contract amendment journals" because... eh... i prefer to think in terms of "productivity tooling" and not in legal terms.


task explorer details

task explorer details
you said it is for project management and that is true, but consider this:

  1. you might work on datdot and later return to it
  2. you might work on task messenger now
  3. you might work on some other tasks as well
  4. you might at some point even get some budget and have helpers so you can delegate some more work and maybe more manage work as an "art director" or some sort of "project lead", which means you still submit worklogs, but you also receive worklogs from people you work with.

Maybe - you will even work on multiple projects - not just with me, but with others in the future, using this tool (maybe not you, but somebody else might do that).

How do i keep track of all my tasks and projects and what i am working on for others and what i am working on by hiring or delegating to others and how does it all fit together?

If somebody gets more experienced, they might take on bigger and bigger project and delegate a lot, but that all requires features to keep track of things.

Anyway - long story short - the goal is, that everyone can use it to manage their own projects (from a shopping list) ...to (building rockets to fly to mars)

The only different is the task trees become a lot biggger and a lot more people might be involved, but otherwise it all stays the same.

Let's for now just roll with what Ali created and we will slowly refine it and improve it maybe later when we have all the rest figured out and a nice theme and then we can start using it as well.

example: task message counts

  1. everyone should mainly see tasks they subscribe to or are involved in and others are kinda "muted" or "unfollowed"
  2. workers and managers have need to see if there are new messages
  3. maybe a counter is not important. discord has just a white dot or nothing if there are new or no new messages
    • but maybe the task name or even an icon color is enough to indicate this.
    • there are many ways to indicate something visually.

Probably rarely somebody would be interested in the exact number of new messages - if anyone is, they can still count, but it is probably too rare to reserve space for the actual number of new messages :-)

Also, the actual tasks somebody works on should be "pinnable" as well 📌 so you can just keep important stuff visible and navigate from your pin's to other stuff if important... or autocomplete search stuff.

One more thing.
Most task will probably always have only 2 participants.

  1. the funder who is also the task manager
  2. the applicant who is then also working on it

So there shouldn't be too many new messages and if there are, they are probably important :D

This idea is on purpose to avoid big spammy rooms with lots of messages. This messenger's goal is to be very task/purpose focused on goals unlike all other messengers :-)

It might even be important to visually indicate if a task has a new "text message" vs. a new "contract amendment proposal" (e.g. a submitted worklog) or a "accepted contract amendment" (e.g. a feedback that accepts a worklog). These differences might deserve different indicators ...and if somebody wants to put an alter or indicate spontaneous urgency in one task, maybe they want to indicate that as well.. maybe by tagging somebody or by submitting a special "deadline action" to the task chat.


tasks inside other tasks

Whatever works well.

If i am in a specific task room and work on that task and then i or we figure out specific parts of that task will take more effort, it would be cool to create a little sub tasks directly which will then also be visible in the task tree and easily see inside a task how many unfinished subtasks the current task room has.

actions
For example, if you are in a task room, you can chat with text messages or attach a file ...but actually that should probably always be a worklog.

The sub task icon here means to create a sub task of the current task room also visible in the task tree explorer.

The input and output means to add another input or output to the current task room (also visible in the task tree explorer as inputs and outputs to the current task then).

The invite action means to generate an invite link to the current task room.

What is missing here seems to be to create a worklog, but maybe that is an option only available once you have the role of a "worker" in a task and ...a maintainer would only be able to post "feedback" but only when there is already a "worklog" posted.


time tracking

yes - let's experiment to see what works best in practice.
you express good ideas.

@Mirabrar-21
Copy link
Author

feedback 2024.06.08

You ask on the last (Mobile Version 0.0.4), what the bottom menu shows, but i do think the idea was to have the navigation of task explorer on the bottom as well.

So you can send messages in a chat or switch to the task explorer and navigate to different task chats.

On desktop, you have enough space to also show both in parallel i assume :-)


You also ask about one icon in the upper right corner
icon

I have no idea what it was. Maybe david has a later worklog where he talks about this version, but i don't really remember what it is. Maybe that says it's not intuitive and we should reconsider? :P ...


Otherwise Great. I think if we now can implement a new prototype with all the features and all the components it uses, based off the information you have gathered, that would be great.

One complete wireframe that shows every possible feature, maybe following a little "example project" from start to finish, where participants create, apply, assign, work, give feedback, close tasks, etc...to basically walk through a prototype that shows off every aspect of the task messenger, that would be cool.

@Mirabrar-21
Copy link
Author

Mirabrar-21 commented Jun 11, 2024

tasks - 2024.06.10

  • created wireframes
    • created wireframes of task messenger 1 to 8 pages -2h51min
    • prototyped the wireframes -16min
    • read discord messages/checked terminal links of task messenger components -15min
      • recorded, updated task and worklog -11min
    • @output 📦 wireframes

worklog

Worklog-29


feedback


proposal

@Mirabrar-21
Copy link
Author

Mirabrar-21 commented Jun 13, 2024

tasks - 2024.06.12

  • created wireframes
    • created wireframes of task messenger, notifcations and feedbacks-1h41min
    • gathering ideas - 2h13min
    • prototyped the wireframes -7min
    • read discord treads of task messenger components -32min
      • recorded, updated task and worklog -10min
    • @output 📦 wireframes

worklog

Worklog-30


feedback


proposal

@serapath
Copy link
Owner

feedback 2024.06.13

I'll give feedback per screen for worklog 29 here.

Generally, I'd prefer to start with a dark theme, because opening it full screen
is quite bright and blinding on my desktop :-)

Also, this time, your microphone quality was really bad, so i could not really
understand what you were saying in worklog 29, but the screens explain themselves luckily.
Basically your audio was absolutely incomprehensible, so i couldn't get any questions
or anything you described, but i could guess what you might have said.


Generally my goal is to leave out EVERYTHING we can to make it feel ultra minimal,
even though it will pack loads of features in it.

Also, it would be great to structure the entire messenger into powerful components.
I identified a few, which are:

  1. chat room
  2. action wizard bar + steps wizard
  3. task navbar + task tree explorer

This brings some high level structure to all the details we need.

screen 0

Let's remove the "Task Messenger [reminder]" bar.
Without any tasks, there are not reminders yet.
Also, a user probably knows which app they started, so we can skip that as well.
The bottom bar should have a small ? icon to toggle, which, when active,
will make every clickable or otherwise interactable element show a tooltip popup,
to describe it's functionality. I do think we have that in the DATDOT APP as well.

screen 1

Related to screen 0.
Currently:

  1. user clicks +
  2. user clicks task type
  3. user clicks proceed
  4. user sees form

I'd prefer to display task type on screen 0 as dropup menu next to + button.
With Paid Task preselected

So then UX becomes:

  1. user clicks + to select paid task
  2. user sees form

screen 2

is the optional dropup menu if user wants to select a different task type,
but selecting automatically means "proceed" to get to the form.
Also clicking outside the dropup menu closes it, so no "back".

If we actually have a multi-stage process, then the steps should be displayed
on the bottom with a cancel option, just like the DATDOT APP does. We can copy the component.
We can actually maybe even link to the version controlled figma component on that figma :-)

screen 3

goes away

screen 4

The form for "task name", "payment", "time estimation", "budget", etc...
Will definitely become a sophisticated component itself.
Also, if input field names are written inside the input field, it becomes more minimal.
The "create task" should probably be on the bottom in the "steps wizard".
The subtitle "select the task type you'll like to create" should probably be a tooltip,
of when a user clicks the ? and then clicks the "create task" wizard step.
Again, makes it more minimal and compresses things down.
The "back" and "proceed" buttons, would be part of the "steps wizard" bar at the bottom.

screen 5

When an action wizard is completed (e.g. "create task") one returns to the "home screen".
Which means returning to the current active task and if there was no task, then the new task
is the active one by default.

As said in screen 0, the top title bar should be removed and the notification icon.

The bottom should instead be changed into two bars on top of each othre.

  1. action wizard bar -> turns into step wizard when action is selected
  2. task navbar

The task nav bar show the currently active task, e.g. "roadmapping".
It is a dropup or slideup, so when clicking it, it expands and shows the task explorer tree

1. action wizard bar

is context sensitive and only shows actions available in a given context.
Initially when first time opening the app, there should be only 2 actions available
-> create new task
-> questionmark (to toggle and show what is what)

when a task exists, the default action is "send text message" to the active task room.

2. task nav bar

initially doesn't exist, because no tasks exit yet
once a task exists, it shows at the bottom.

It also contains the reminder/notification bell.
This one will blink/flash in different styles, depending on the type of notification,
for example when being in task room A and somebody personally mentions you in task room B.
If clicked, just like in datdot app, it would show the history of notifications.
It can have the small "red dot" to indicate there are unread notifications.
clicking it would expand the task tree explorer, but filtering out only tasks with
notifications, so a user can click through to navigate from chat room to chat room
to catch up on what is happening. Each entry in the task tree explorer definitely needs
a good status indicator, not just 🏭 ❓ or 📦, but also colors,
to indicate if there are unread messages, mentions or special types of actions,
such as worklogs waiting, etc...

screen 6

This shows a conversation in the roadmapping task.
The top bar should be removed to give more space for messages in the chat room.
Instead the bottom task nav bar will have it selected and gives quick access to switch rooms at any time, so no need for back button.

The chat room displays messages and if one returns to a chat room, it shows a red line,
where one last stopped reading and a way to jump to the present message.

The commands menu is probably a dropup clicked from the action wizard bar

It is ok, but again, quite verbose.
I do think having an autocomplete dropup of commands starting with /...,
so when in the normal text message input mode, a user starts a message with /,
it would autocomplete show available commands and if the command or action requires
to fill out a form, it would start the "steps wizard" for the command.

It also will have some /config option to open the "steps wizard" (maybe only a single verbose step with many options to choose from, to configure notification settings or search/filter settings and what have we, maybe including theme...

3. commands list

The commands listed always depend on context, e.g. "feeback" is only available as a command,
if a "worklog" has been selected in the chat. Maybe every chat always automatically
has the last message in the chat selected, so every message is always an explicit
reply to the last message unless the user changes what they want to reply to.

Or maybe all messages that have not been replied to are selected by default,
so sending a message is by default always a combined reply to all previous messages,
which havent been replied to yet.

A user can also mark one or multiple messages as "done" or something, so the messenger knows,
there wont be a reply to those messages.

All messages in a task room that are not marked as "no reply" and havent been replied to,
should somehow be quick accessible AND some messages might also be marked as "INPUT" to a future task or sub task, maybe even an entire set of messages or message thread.
...these are details that also go into the earlier mention "chat room" component.

maybe you could structure my feedback into notes categorized based on the ui component they belong to, e.g.:

  1. chat room
  2. action wizard bar + steps wizard
  3. task navbar + task tree explorer
  4. commands list
    ...

Otherwise, commands we have identified (but should probably be listed per context)

  • /text (always autoselected)
  • /feedback
  • /worklog
  • /output
  • /input
  • /invite (as reviewer, as worker, as sponsor to fund task, ...)
  • /task (=subtask of current task, but can be changed in step-wizard)
  • /config (settings maybe for stuff)
  • /fund ... to fund a task
  • /apply ... to apply to a task
  • /review ... offer to be a reviewer in a given task (by default the task author)

One more important thing:
e.g. the "text" is the type of action selected by default.
It has a step wizard with a single step, which allows to pick gifs, emojis, etc..
to customize the message and the message input field shows the preview.
completing the steps wizard with send with send what is seen in the text input field.

THE SAME should happen for every action, thus,
while filling out the stpes wizard for worklog or feedback or task or anything,
the "input field" should preview e.g. a card of what will be posted to the task room upon completion.
==> The steps wizard shows BELOW the preview input field!
==> a step in the step wizard can itself include complex UI expandable/collapsible

There should probably be a filter to show all messages that have not been replied to.
Or a filter in general to search for stuff

screen 7

This is the worklog steps wizard form

  1. the "task name" is probably shown in the bottom task navbar anyway, because all actions are context sensitive and this is the selected context, so no need to show it in the form

  2. total time is good and if we have a time tracking feature, should fill it out by default with the recorded time

  3. outputs might lead to sub steps to select one or more links or documents of what was created.

Generally, if this can be again way more compressed, e.g. ? will show tool tips,
otherwise, hint/explanation is shown inside input fields.
Worklogs usually never need titles and the app can take care of numbering worklogs.

Double check our "task management youtube video playlist".
Our worklogs currently have the sections:

  • tasks
  • worklog video
  • feedback
  • proposals

The proposals section are proposed task, possibly where the submitted worklog outputs
are used as inputs to work on next.
These tasks do not get created in the task tree yet, but only once the reviewer
accepted the worklog with their feedback comment, which then creates the tasks,

so a worklog needs another "sub steps wizard" to create/propose one or more additional tasks each with their own inputs and outputs, etc... and even with more sub tasks, etc...
...depends on how far you want to push the planning.

A proposal can also include changing/deleting/renaming/etc... existing tasks,
which again, gets only applied when accepted by the reviewer.

avatar

Just like in the DATDOT APP (please check), we need an additional icon in the bottom
left corner with the users avatar. clicking it alows to switch avatar or configure it.
All similar to the DATDOT APP.

While the "notification icon" prefixes the task explorer tree
The "avatar icon" prefixes the "action wizard bar"
Because all actions are context sensitive on the selected entry in the "task explorer tree",
but always executed and signed by the current user represented by the "avatar"

@serapath
Copy link
Owner

serapath commented Jun 13, 2024

feedback 2024.0613

Ok, general feedback on the versioning.
We are now versioning high level, the entire task messenger app. I guess at some point this needs to be split/fork/merge versioned to break out sub components from the high level wireframing into more specific detailed sub components.
Especially the ones mentioned in the previous feedback :-)

Now I'm ok, to show a relatively plain version of e.g. the
"task explorer tree" as a placeholder in the overall wireframe and we can have the fully featured in the details.

Of course, towards the end we put a high res interactive prototype together that goes into every possible edge case based on a usage scenario that of an example project that uses every possible feature at least once :-)

maybe add that as a task in a github issue so we don't forget for later

(of course, do this with all details mentioned in feedback comments, so we don't miss anything we discuss here - which happened a lot with previous collaborater and is kinda hard to constantly remind ourselve of when we discuss all this stuff here - it's a lot and a lot of details)

Again, "guiding principle":
The task messenger should be as compact and minimal as possible, without being not informative.


Ok, quick feedback based on wireframes first:

  1. the notifications could be shown like this, but it is verbose. See previous feedback for where to put the notification icon and how it should behave.

Now when notification icon is clicked to display task tree filtered by rooms and maybe ordered by "impotance" of the type of notification and the notification settings taken into account, maybe it could display in small below each room or entry, which user did what kind of action to show those details and settings allow to configure whether you want that extra detail of information or not.

Of course, those details might pop up in actualy system level android/iOS/desktop notification popups, but that's different from the list of notifications.


The last screen has a visual of a "worklog card".
This card already includes the avatar and name.
The header of that card is/was the generic message header,
so we don't need the avatar and name on white background that you put generically around every message.

Let's maybe split every message in the task room into a room post. A room post has some generic parts in "post header",

  • e.g. such as avatar and name of poster
  • e.g. what was replied to (1+ messages)
  • e.g. maybe a time/date stamp
  • e.g. a ... button for quick actions on a messge?
    • but if messages are selectable, actions can also be executed from the "action wizard bar"
  • e.g. message content area

The "post header" should be a bit technical and informative, but compact. Maybe include an icon to indicate the posted message type, e.g. "worklog" :-)

The "message content area" should show the actual message or e.g. worklog card, etc... and doesnt need to show anymore the generic "room post" data displayed in the head of every message i think.

The "message footer" could have some possible quick actions. Those would need to be the same as what a user can select from the action wizard bar after messages have been selected by clicking on them.
the available actions change based on which message or messages have been selected.


additional feedback for worklog video

command list

Here you said, if somebody has a feedback, it gives you an indicator in the command list, but that should not be the case.

You would get a notification via the regular system level popup notification or when you are in the app, you see them via an indicator on the "notification icon", all described in previous feedbacks above.

The command list or action list or "command dropup menu" is only for creating actions yourself and you can only create based on context and role.
e.g. if you are reviewer and a worklog has been posted and selected by a worker, you can create a "feedback message" for it.

regarding timer action:
This makes sense.
good to show a running timer in the task tree.
this will need lots of consideration.
e.g. if a task timer is running and the user switches task room, it prompts user if timer should be stopped.
e.g. if user closes the app or hibernates it, when the user comes back it should prompt the user to select how much time was spent and offer multiple options, e.g. when the task or app was hibernated or put in the background, etc...
e.g. if timer is running, it should probably display a notification every 15 minutes or every 30 minutes or every "pomodoro unit" (if you are familiar with pomodoro time tracking, to remind the user and allow them to stop the timer...

also again, regarding actions:
All action technically start a "steps wizard" (even if it is only a single step.

Some actions are basically customizing a message, so e.g. EMOJI's are not an action (=command), but instead they are part of the "steps wizard" to customize a text message.

And the text mesage in the input field is a preview of what would be sent to the chat room if the steps wizard is completed.


regarding task explorer tree

stats
In order to see stats, not just how much time is being logged, but also how much time went for a task, if it kind of shows the summary of all time spent for sub tasks combined or how much time is still available for the task if there is a deadline or a maximum time budget allocated.

Those are really useful feedback.

So maybe the "eye" icon could show/hide those details in or below a task when the task tree explorer is expanded.
Or even better is no eye, but you just click an entry in the task tree to see details and you click outside of the task tree to collapse the task tree.

When collapsed, it would be good to maybe expand/collapse a "STATS" or "INFO" section to show the info for the current task room, but only when the user clicks e.g. an "eye" icon or something like that.

Needs a bit of overview (=macro) planning.

  • task room
  • action wizard bar
  • task navbar
  • avatar icon
  • notification icon
  • ? help icon
  • info/stats toggle icon

We slowly need to puzzle it together.
it's tough :-)


By the way - here another example of how maybe input fields can be more compact

input field

@Mirabrar-21
Copy link
Author

Mirabrar-21 commented Jun 15, 2024

tasks - 2024.06.14

  • created wireframes
    • created new wireframes structure of task messenger -3h03min
    • dicussion -17min
    • gathered ideas - 1h08min
      • recorded, updated task and worklog -15min
    • @output 📦 wireframes v0.0.2

worklog

Worklog-31


feedback


proposal

@serapath
Copy link
Owner

feedback 2024.06.15

screen 1

screen1
nice improvement. I was thinking though, the e.g. "paid task" option was written in the middle of that action wizard bar, so if you click + it starts making a new paid task, but if you click on "paid task" in the middle of that action wizard bar, it gives you a drop up to select a different option, like "exercise" or "proposal" ..and of course you can also select an entirely different action command, but when you dont have any tasks yet, the options you have are probably limited.

screen 2

screen2
This is better imho, but i do think the ? needs to be always visible, so a user can on any screen always click it and figure out what the elements are all about.

screen 3

screen3
This is good, but the
top entry
should be removed, because that should be displayed in the bottom task navbar instead.

Of course, the bottom task navbar has only space to display a single entry, which is why you can expand it or slide it up to see and navigate the full task tree.

screen 4

+1

screen 5

+1

screen5
Only comment, the tasks you can use at any moment depend on the context, so for example /feedback would not be accessible here, unless you are in the role of "reviewer" and you selected a posted "worklog" ...which the screen does not show at the moment.

Also: the "task navbar" shows a filter symbol, but it wasnt there on the previous screen, so it would be good to know how exactly that works.

Last: The "emoji" (as i mentioned in the previous feedback), is not an action, but part of the "steps wizard" of creating a "test message".

screen 6

+1

(i guess we do the task explorer tree component details in a separate wireframe)

screen 7

This screen looks incomplete.

screen7
Now as said above under "last", the emoji is not an action, but part of the "steps wizard" for a regular text message.

imagine it like this. the "action wizard bar", when starting an action, will only turn into the steps wizard, which

  • starts with an [x] for cancel
  • ends with a [>] for submit (which can be clicked when all required steps are filled out)

A text message has only a single step, which is a form to write the text message and that form includes features to format the text message and add emojis, etc...

Now if those features become too many, e.g. like a rich text editor, then we can divide it into multiple steps and the user can jump back and forth to add emojis and change text formatting.

The text message as such is previewed, the same as any action (e.g. a worklog card preview for a worklog action) and is only submitted to the task room, when the user finally completes the steps wizard for that action command.

last:
The last screen misses the "task navbar".


All in all not super consistent yet, but goes into the right direction.

@Mirabrar-21
Copy link
Author

Mirabrar-21 commented Jun 19, 2024

tasks - 2024.06.19

  • created wireframes
    • created new wireframes structure of task messenger -3h27min
    • draw wireframe sketches -23min
    • dicussion -9min
    • gathered ideas - 1h29min
    • recorded, updated task and worklog -15min
    • @output 📦 wireframes v0.0.2

worklog

Worklog-32


feedback


proposal

@Mirabrar-21
Copy link
Author

Mirabrar-21 commented Jun 22, 2024

tasks - 2024.06.19

  • created wireframes
    • created new wireframes structure of task messenger -2h04min
    • gathered ideas - 20min
    • recorded, updated task and worklog -11min
    • @output 📦 wireframes v0.0.3

worklog

Worklog-33


feedback


proposal

@serapath
Copy link
Owner

feedback 2024.06.23

  1. SCREEN1: 💯 (start screen)
  2. SCREEN2: 💯 (create paid task form)
  3. SCREEN3: 💯 (home screen + expanded actions)
  • the selected action is not "text message"
  • => so it should NOT show the emoji in the input here.
  • ALSO: the ? in screen 0 and 1 was in the action wizard bar and the steps wizard, but now when a task navbar exists after creating the first task, the ? is not anymore in the action/stepswizard bar, but in the task navbar. Somehow ? is still an action and should be part of the action bar.
  • if it helps, we can experiment with flipping the action wizard bar and the task navbar and see pros/cons
  • ALSO: in screen 0 and screen 1 we had a ➕ for starting an action and then a ✅ for completing wizard steps, but now we see a "send" icon instead of a ➕ when selecting the action from the dropup.
  1. SCREEN4: 💯 (home screen: txt mode + unread msgs)
  • here we seem to be in text input mode (so current action selected is text messages and until that is canceled or completed, it should show probably again either the the steps wizard cancel ❌ and confirm ✅ and select action ➕ buttons, but it shows the "send" and no "cancel: (= ❌ ) buttons, which is not completely consistent imho. Maybe we have to choose icons that work for all cases well.
  1. SCREEN5: 💯 (home screen + expanded task tree)
  • the selected action is not "text message"
  • => so it should NOT show the emoji in the input here.
    • 💯 for the idea of allowing to resize/maximize tree
  • ALSO: same issue as previous screen with txt input mode and the steps wizard cancel ❌ and confirm ✅ and select action ➕ buttons instead of "send" and no "cancel" actions
  1. SCREEN6: 💯 (home screen + emojis expanded)
  • same as previously. we are currently in a /text action and the steps wizard is used to add text and emojis, but unlike other actions, the steps wizard is not consistent with the steps wizard cancel ❌ and confirm ✅ and select action ➕ buttons, but has again no cancel and only a "send" button. something has to be done about consistency with out general action wizard bar and steps wizard idea that would apply for text and everything else in the same consistent way.
  1. SCREEN7: (make worklog action)
  • i will add this below via commented screenshot

screen 7: (make worklog action)

screen7
So here we have to talk a bit more.

  • worklog video link is 💯
  • comments is 💯
  • The proposal section seems good, but i guess we will do details when we focus on wireframing the interaction with all the different kinds of task tree and the features.
  • BUT: The time & output section is problematic, because:
  • an output needs to be attached to a specific task
  • the time also needs to be logged to a specific task
  • if many tasks are done in a worklog, each task can have one or many outputs and each task has times, which results in a structure similar to "proposal", it's a part of the task tree, but annotated with logged times and work in progress or completed tasks

Similar to "proposals", but instead of showing changes of new or changed future tasks, it shows changes of work in progress and completed tasks. ...it's past vs. future
But in both cases, it uses the task tree to show whats done or show whats next

So the difference is:

  1. the bottom task navbar has the normal task tree
  2. the proposal task tree is similar to the task navbar to rename and/or create or even delete/cancel tasks, but the preview of that proposal tree will show yellow/green/red font or other UI/UX techniques to show the diff of before/after what has been proposed to be added or changed or removed in the task tree
  3. the tasks/outputs section will need the ability for the task tree to log time to tasks and edit/attach new links/files/folders/repo as output

FINALLY: if we are currently in a worklog action selected from the action wizard bar, then we now are in the "steps wizard", so the screen should show the remaining steps and the cancel ❌ and confirm ✅ icon

screen 8: (make worklog action + preview)

preview
This is problematic too.

The idea of the structure to be consistent is bottom is task navbar and action wizard bar, which you can expand to show task tree or select action and when you start steps wizard, just like in datdot there is one or more steps to guide you through a form to execute an action, but the preview will display in the visible content area... which means in our case the chat log, where the message or in this case the "worklog card" will appear and it looks like the real worklog card once sent, but in a state where it is only half filled out and not yet really sent, because sending or rather submitting happens when we complete the steps wizard and press ✅ at the end.

We should choose the right amount of steps in the steps wizard to make it convenient to fill out the worklog form without overwhelming a user.

The preview card can additionally be interactive, so just like a text mesage, you might be able to interact with the preview to fill out things instead of following the "steps wizard.

If you choose a previous or future step from the current step, it will jump to that part of the step wizard and maybe the "preview" highlights what part of the preview is being edited. Also clicking in the preview card into t different part, might jump the steps wizard to the corresponding step.

Hope that makes sense.

regarding the worklog preview
This is not a good preview. We already had a preview of a worklog card in a previous worklog and also from david, which looked way more compact and better than this one.
The one here looks a bit generic, boring and not optimized, but fair enough if we are not yet there.

Also, lets try to make sure we always have the best version of the wireframe and all elements across all previous versions we discuss in worklogs :-)

I think what i remembered when looking at the "worklog card preview", that already with david we went through some sort of optimization of doing a compact informative card...but anyway, lets keep up the good work. we'll get there.

To answer your question:

  • the preview card is a compact card, possibly expandable, like what you show on screen 8 but without any quick actions yet.
  • the steps wizard has the generic steps wizard steps bar with cancel ❌ and confirm ✅ and select action ➕ buttons and you have to decide how many steps make for the best balance and UI/UX. In each step you focus on filling out one thing, e.g. maybe tasks/outputs with time logging ...or worklog video link + comments ...or task proposals. Maybe 3 steps would be good.

The worklog preview could be collapsed by default to just show summary while you fill out.


screen 9: (home screen: txt mode + unread msgs)

This screen is similar to screen4 and has the same issue with the cancel ❌ and confirm ✅ and select action ➕ buttons.

Additionally of course is shows the worklog with actions.
Again, this is 💯
But the parts that would need refinement are the same as in the previous screens about worklog and are mainly related to detailed task tree wireframing for different use cases, that need to be done at some point.

Anyway,
It's a good worklog. Thanks :-)

@serapath
Copy link
Owner

feedback 2024.06.23

Yes, I agree with the "Applicants" Screen and that it should be part of the "task tree" as well.

The main issue I have with the screen is, that it is just a screen. There is no clear action, steps wizard and generally the flow that leads to this page, adds an applicant? ...is there an invite link to join, etc... we have a lot in Davids work about that and if we do this, this deserves a wireframe that illuminates all these steps and different phases and interactions. As a standalone screen, it does not tell me much of how i would work with this feature.

applicants


top bar
This screen cannot stay like this.

It's not a normal messenger, but a task messenger.
Our concept is now focused on the "action wizard bar" and the "Steps wizard". The top bar in that screenshot does not fit into that concept.

The delete or star or copy or back? button... are clearly either actions and should be part of the "action wizard bar", or they are features of a step in the "step wizard".

Now what is always possible is, that preview or individual messages in the chat (e.g. accept/reject/modify/... of the worklog card), will have some quick actions associated with that particular type of message chat post entry.

But everything that might be available from such a quick action on the post itself, like the accept/reject of worklog cards, ALWAYS needs to be available also from the generic action wizard bar

For prior art or inspiration, I do think discord does a good job of enabling plenty of quick actions from the every individual posted chat message which in our case would be called task chat posts, but what we have in addition is to select one or more task room posts and then use the "action wizard bar" to display all available actions in that context and then go through the step wizard to execute one of them.


One more thing we could consider is, that when you are currently NOT in "steps wizard mode" (for text messages that looks like an input bar), then you are in action select mode, but we could literally allow this to be displayed as a bar with lots of action icons and a "..." icon.
And you might be able to select from the "..." icon all the actions or unselect actions that you want to be visible in the action bar ...or you allow to swipe left/right to see more of actions

If you click expand on the action bar instead of an action icon, it would still go into the dropup mode and display he /... action name list

Only when you finally select an action, it will go again into the steps wizard.

The actions you do list seem to be somewhat useful, but again, we need to start to find a more systematic way of not forgetting all the different kinds of actions and things we talk about to make progress and avoid regression at all costs.


A new thought about the "filter" icon.
We will have search and filter and some customization, like sorting and many more details that fall all into the same category and once you did a search and have a perfect view, you might even wanna send and share that search of filter view as a task room post.

Hence, i do think, search/filter/etc... with a "steps wizard" to configure it, should be yet another action in the action bar and when selected gives you options in the action wizard.

In the end, when you are done, you can cancel it to get out of that search instead of sending it.

Somehow that direction would neatly fit into our current systematic way of dealing with actions and putting all functionality in a generic standardized way into the task messenger.


create task

Create Task screens are interesting, but i do think again, the "steps wizard bar" is missing so i dont know in which step i am and how to confirm everything and where is the "task tree snippet preview" of the task tree entry or subtree i am creating while i am filling out the steps wizard.

This whol form of both screens hsa to be adjusted to this generic mechanism we already have, which is steps wizard, task tree, action wizard bar action, etc...

We had "applicants" and you said they might need to show up in the "task tree" and I agree, but then why is the assigned applicant not shown in the task tree that lists those things here as well?

The form needs to change with this in mind.

The "description" for example might be an optional step in the task wizard, but if it is filled out, then that will create some sort of freshly created single "description.txt" input document for the new task, that will contain that task.

That input is special in so far, that this input was never created as an OUTPUT of a previous task. Those kinds of input exist every time, we upload a file from our disk that was not created through submitting a worklog.

Regarding additional details of task creation, I think david has plenty of screens and we can even search in the github issue and wizard amigos discord channel from david if we find additional related information when we focus on the exact details.

Lastly, in the bottom menu bar, you made an icon to "edit" the thing.
The bottom bar is the "task tree navbar", but the "action bar" is missing. You should select such an edit action from the edit bar ...or if you already are in edit mode i guess, then you should navigate to the right step in the step wizards or use quick editing in the "preview" of your current action output.


Recommendation

There are a lot of thoughts you mention for each part of the task messenger and i would highly recommend to slowly create pages for each major component and even if we dont wireframe those components individually yet, because we are still in "overview mode", we could collect in v0.0.0 of that component just a big text box to collect "features & thoughts" about what needs to be considered and a collage of little screenshots with notes and so on.

The first real draft of the component to include that set of listed ideas or thoughts, can be v0.0.1

I am otherwise a bit afraid that we will forget to capture some of the ideas we are talking about :-)

@Mirabrar-21
Copy link
Author

tasks - 2024.07.01

  • noted points/suggested
    • noted points in hackmd about features of taskmessenger-2h17min
    • gathering ideas - 2h51min
    • feedbacks from comment to discord -23min
    • read discord messages of skill_value_network and gathered ideas -21min
    • recorded, updated task and worklog -8min
    • @output 📦 hackmd-task messenger notes

worklog

Worklog-34


feedback


proposal

@serapath
Copy link
Owner

serapath commented Jul 4, 2024

feedback 2024.07.04

action wizard

So on the first screen, the "task nav bar" or whatever we call it does not exist yet, because there are no tasks, so the bottom starts with the "action wizard bar".

Once we created a first task, the "task nav bar" will also exist and hence the "action wizard bar" is now on top of the "task nav bar".

Eventually we might change the first screen to have a "task nav bar" from the beginning, but without task, but it at least contains the "user profile" ...but we'll see.

I am definitely for your idea of making the "action wizard bar" always look like the "action wizard bar", so screen 1 and screen 3 should somhow show the "action wizard bar" in the same style, whatever we choose.


ACTUALLY thinking a bit more, see:
questionmark
The ? button is initially in the "action wizard bar", but later on it is all of a sudden part of the "task nav bar".

I was thinking /? is an action, but it is also available inside of a "steps wizard", so it cant be an action.

So maybe we need also an empty "task nav bar" on screen 0 so that can already include the ? and maybe show the user account as the "root entry" in an otherwise empty "task tree explorer", which get filled with the "roadmapping" task once you created that task using the "action wizard bar" with "create task" :-)

@Mirabrar-21
Copy link
Author

Mirabrar-21 commented Jul 5, 2024

tasks - 2024.07.04

  • refined wireframes
    • refine task messenger wireframes -2h49min
    • gathering ideas - 1h41min
    • discussion -26min
    • gathered ideas -58min
    • prototyped -19min
    • recorded, updated task and worklog and updated hackmd -35min
    • @output 📦 wireframes v0.0.4

worklog

Worklog-35


feedback


proposal

@serapath
Copy link
Owner

serapath commented Jul 5, 2024

feedback 2024.07.05

missing-navbar
Here, the second screen, when the "step wizard" is on, the navbar is hidden.
I think the ? should stay in the navbar and the navbar should still be visible below the steps wizard.
The steps wizard temporarily replaces the "action wizard bar".


dropdown
maybe here we have to differentiate between

  1. actions
  2. stuff like "copy message link"

same for your second version:
version2

clicking the ... button, i'm not sure what version is better.

Maybe the menu is the same. If a message is selected, a user can always use the command bar to type /... and see the commands available for the context of the current selection, e.g. a selected message.

But the same can be achieved by clicking ... on the selected card itself.

Now if multiple cards are selected then the card ... makes no sense anymore, because which card is it? for all the selected ones?

So maybe the best option is to not have quick actions on a message but just click a message to select it and click it again to unselect it

When messages are selected, a user can use the command bar to use any action, like /reply or /like or whatever we will have.

It seems to make the messenger simpler.

What I am thinking is, maybe we again should take inspiration from "datdot" and have an action bar with action icons.
So while a user can always use the input field to type /like, maybe a action item bar could appear right above the "action wizard bar" and you can swipe left and right to scroll through all the available actions.
These actions would give the most important actions and just like in datdot, you could technically customize those actions. ...a "quick action bar" so to speak.

The "quick action bar" adapts to context.
The "quick action bar" might have the ... button.
clicking the ... button maybe is the same as typing /... into the "action wizard bar" and reveals all possible actions.

How about that?


regarding worklog preview

worklog preview

Somehow this does not seem right.

  1. the preview would need to show ABOVE the steps wizard form ... where it would go in the chat if it was submitted (but it isnt yet)
  2. the preview of a worklog should look like a worklog card and not like a text message ...
  3. The steps in the steps wizard need names and in the case of a worklog, those steps would probably be:
    • finishes tasks with outputs and time logged
    • worklog video and comments
    • proposals for new or changed tasks

Now next, the x should probably prefix step1
and the v should probably postfix step3
The x and v should not be part of the navbar.

Clicking on the step "worklog video" would show or jump to the field were the worklog video link can be edited.

If a steps wizard has too many steps, then < and > or scrolling/sliding should be able to move between steps and scroll them into view.

Lastly, as told on discord (even though the preview here makes no sense to look like an "editor", if we had an editor, those features of showing bold/italic text or bulletpointsm etc... which look more like what should be possible for a text message type, should be BELOW the editor, no bars above.

@Mirabrar-21
Copy link
Author

Mirabrar-21 commented Jul 11, 2024

tasks - 2024.07.11

  • refined wireframes
    • refine task messenger wireframes -51min
    • gathered ideas about feature and UX - 2h23min
    • discussion -15min
    • hackmd comments reply - 18min
    • recorded, updated task and worklog -12min
    • @output 📦 wireframes v0.0.5

worklog

Worklog-36


feedback


proposal

@Mirabrar-21
Copy link
Author

Mirabrar-21 commented Jul 14, 2024

tasks - 2024.07.14

  • refined/created wireframes
    • refine/created task messenger wireframes -2h21min
    • gathered ideas about feature and UX - 1h47min
    • discussion -10min
    • recorded, updated task and worklog -13min
    • @output 📦 wireframes v0.0.6

worklog

Worklog-37


feedback


proposal

@serapath
Copy link
Owner

feedback 2024.007.29


regarding worklog 36

Looks good.
A few things i noticed

question

Pressing the questionmark allows people to click on anything and instead of executing actions, it will show them a description. Elements can be everywhere and description might need to be long or short, hard to say.

How about we have the description in a box on the bottom and it can be resized to take more space if needed and scolling is possible as well to make space for more and longer descriptions. That way we don't have to bother with how to position tool tips and what to do if there is too much content in the tool tip.


Another thing is the "action wizard bar" and the "steps wizard".

actions

The action displayed in the input field on the left could show text instead of worklog or maybe reaction if a user was to react to an existing message. I assume the user currently did not click on the input field so it is not focused.

  1. Clicking on the input field to focus it would show the steps wizard for that action. In the case of a react action it would need to allow the user to select one or more messages to react to.
  2. If the action was reply, then the steps wizard would probably allow a user to select one or more messages that will be quoted or referenced when replying and once sent, other chat members could see and click on those quoted message links in the reply to scroll to the messages that were replied to.
  3. Clicking on the worklog (or text, or react or reply) action name would make it editable and show the drop up menu on the right to select a different action.
    • I would assume, the x to cancel an action is only shown once some steps have been taken to prepare an action. For example, as soon as the first character is typed in a text message, there should be an x to cancel the action. That is similar to how e.g. google search allows you to clear the search field by clicking on the x. The submit button or next button should only become available once all required input has been provided. For a text message, that is at least a single typed character. For a worklog message it is more than that :-)

Text message can be selected by default.
When a user cancels an action it will always go back or enter into the default message type.
Maybe the "drop up menu" could show a pin/unpin/make_default option at the end of each line that lists actions. That way a user could change the "default action" if they wanted.

Also action, once submitted, will have some sort of entry in the chat. If it is a text message, it will show the new message posted. If it is any other message, it will have some sort of indication for that other action. How exactly each type of message is displayed in the chat history is what we can design per chat action when we come to it. Now, when typing a new text message, even when typing the first letter, it should already show the message in the chat, but somehow indicate that this action is currently being drafted and not yet committed or submitted to the chat. This will duplicate things while you type the text, but on the other hand, it is useful to see the formatting of your text when you use e.g. markdown:

  • bold text VS **bold text** :-)

If a text message is long, you have to scroll the chat history to see it all and you have to scroll in the input field to see all text input as well. I think that's okay.

One thing not to forget is, that the text message is a "step wizard"

  1. you can confirm it to submit the message
  2. you can x it to cancel the message (backspace is valid too, but not on mobile)
  3. you can select all options from the form in that single step, which should include e.g. emojis, gifs, etc... basically typical options for customizing a text message, maybe including a cheat sheet for "markdown syntax" :-)

actionbar

Now here you show three options.

Until you click the "input" field to start e.g. a text message, the input field UI serves no purpose. What if instead of the input field, the blue button would show a + and once clicked, it would show a focused input field to start typing, just the same as the input field would otherwise. It is the same amount of clicks, no difference.

Because the blue button is so much smaller than the entire input bar, the input bar itself could show a /... button to show the "drop up" menu that shows all actions and you can type to autocomplete select the right action, BUT you can also select default/pin/unpin any action in that list to show action icons in the bar that would otherwise just show that input field.

If the bar is full, all additional pinned actions will only show if you click the /... and the pinned actions are listed first and then all the non pinned actions in alphabetical order.

How about that?

Every action icon is the size of a smiley, so you can "quick select" them with a single click or touch gesture :-)

Finally, apart from pin/unpin, you could also see the "keyboard shortcut" behind each action if one is assigned. The description for an action might be very short and more details can be learned if the user clicks the ? and then selects an action to get information about it.
For example - for "cancel" (=[X]), the <backspace> key is maybe the shortcut for it :-)


selection

When one or more message is selected it could offer quick actions.
I assume those could be shown just like what i described above.
So the pinned or default actions might need to be custom per context.

Having no message selected is the default context.
Having a specific message or messages selected are different contexts and the available
actions adapt and the user can pin/unpin to select the order in which to display them.

If they don't fit all into a single row, a user can click [...] to get a drop-up and see more. Now horizontal scrolling is an alternative to the drop-up menu.

At this point i dont have an opinion what is more usable.
A click on [...] might be faster than one or multiple swipes.
Also, once the "drop-up" is visible, it is scrollable but also supports "autocomplete", so a user could type to select the right action :-)


worklog

This section looks good. The steps wizard with cancel x and next v buttons
I think the "steps wizard options" should show between the cancel/next buttons.
It is always possible that a step wizard might have 10 steps and we need to deal with it.
If there are too many, we maybe need to slide scroll and have < and > indicators?

I am confused by the empty text input area though as a preview...
I imagine you can focus the worklog/video or the comments input field and edit,
so the text area should probably be the comment with text inside and not the preview.
The real preview should appear as a preview of the submitted message in the chat history instead.


theme explorer
task explorer

Nice that you worked on it and the styling looks clean, but a lot of things have to change here, as we already discussed on discord anyway - so maybe that's not even up to date anymore.

Anyway, one thing we currently try to keep in ALL our designs is that all menu bars go to the bottom, not to the top. We can make some themes that change it, but we want to try to be consistent with that choice for now.

Basically:

  1. the "theme explorer" is a "graph explorer" just like the "task explorer" and will need to look like that with the option to expand different types of "super" and "sub" entries for each entry in the graph. For example "Nina" has a super component "Contributors", but might also use one or more css files associated with a selected theme.
  2. The actions below the editor might move into an action bar below the explorer instead of below the editor.

Otherwise - I think we should avoid the repeating arrow -> behind every entry as well.
That looks just weird to me. Maybe it can appear when a specific entry in the explorer is selected if we want to show possible actions also behind entries instead of just below the explorer.

Regarding the "select" button, we should probably put that below the tree as well.
When a user is on a desktop keyboard and presses "SHIFT" it should automatically enable the "select" button. I would even chose to not have a select button for now. Why do we need it?
What would we do with selecting multiple entries at once? Isn't that an advanced use case we might not need or maybe at least we think about it later?

@serapath
Copy link
Owner

feedback 2024.07.31

regarding worklog 37

tooltip
The tooltip should probably be in a section on the bottom that is potentially scrollable if it contains more text.
That way we don't have to bother with where to display the tooltip.

When it comes to the "action bar".
I think all the feedback of my previous feedback still applies.

timer
The solution for the timer is great. I like it.

text msgs

Regarding text messages, the feedback from my previous feedback comment applies.

  • text message action will show a step wizard with one step
  • message preview is inside the chat history
  • steps wizard might include option to include/select multiple existing messages to either quote or reply to, but maybe that type of message is called a reply instead ot just text, but maybe we don't need a reply and make it just an option in the steps wizard to select multiple messages to reply to, by allowing a user click select multiple messages from the chat history ...but i said that in my previous feedback above :-)

selected msg actions

If a given message is selected, then the available actions adapt to that context and e.g. allow to delete or edit that message, etc... that is good.

The one thing i am not sure of is the "copy message link".
Unlike the others, that doesn't really seem to be an action that changes anything. It's a read only action. Maybe every message should have a little 📎 in the corner to quickly copy a link to a specific message?

But in general, the way how the action wizard bar and actions should work is what i described in my previous feedback comment for worklog 36.


thread

I was thinking again about the threads and it is a tricky one.

The problem we have at the moment is, we do have a "worklog channel" on discord with an endless amount of worklogs, so to bring a little bit of structure to it, we try to create threads for worklogs to discuss the worklog in that thread.

Now in the task messenger we will have a much easier time to merge what we do on discord with what we do on github in one tool and it is very easy to make sub tasks, which are already like threads in a way.

Usually, a worklog submitted will finish a task, which means usually a worklog ends a specific task room and we can continue in the super task room or other sub task rooms.

It might sometimes happen that a worklog needs refinement or does not yet close the task room, but that should probably be fine.

I think creating rooms that are threads and not task rooms is a feature i would like to avoid for now until we can try the task messenger and see if that's enough and only add additional non-task rooms, such as threads, if really needed.

So no need to create any thread room names, because the task explorer will always show the current task room we are in.

messages

Message history looks pretty good to me.

task rooms

Now this shows your idea of a thread, but let's just imagine this was a regular task room.
A task room can be edited or closed or deleted as well.
A task can probably not be an inpute as such, but an invite or link can be copied, but this is a "read only action", so maybe we should be able to copy such a task room link from the task explorer.

Otherwise, on the right side, the message that shows the creation of a thread should instead show up when we create and accept task proposals to create new tasks. Those show up in the task explorer, but also in the submitted action message, that created those sub tasks.


Cant wait to see figma version controlled components for each type of message and how it looks in the chat history. Same for step wizard for creating those :-)

@Mirabrar-21
Copy link
Author

Mirabrar-21 commented Aug 20, 2024

tasks - 2024.08.19

  • refined/updated wireframes
    • refine/updated task messenger wireframes -4h37min
    • read feedbacks on discord -20min
    • gathered ideas about feature and UX - 30min
    • discussion -20min
    • recorded, updated task and worklog -15min
    • @output 📦 wireframes v0.0.7

worklog

Worklog-42


feedback


proposal

@serapath
Copy link
Owner

feedback 2024.08.21

docs
This is great.
If the task graph explorer is later expanded on the bottom and i want to use the ❓ to get more information about an entry in that task graph, the box would display above the expanded task graph, but for elements in the chat it would display in the box below the chat.

So this leads me to think, the box should probably appear at the very bottom, even below the bar that contains the ❓ button.


chat actions

This is great.
I like that clicking the + button will focus the input bar.
It also means, the space next to the + icon` could contain a bunch of "quick actions" which the user might "bookmark" from the list of all possible actions.

By default, there would be NO QUICK ACTIONS, so it would look exactly the way it looks now in your wireframe.
The quick actions only get added once the user selects some quick access actions ...probably pinning them when the list of all actions is expanded.


text preview
+1 text preview. thats awesome :-)

The text input field is still basic with no extra features, like the option to select 1 or more messages as being replied to, etc... but maybe fine for now.


action list

This is the action list and maybe the pin icon could pin it as a quick access action icon to the action bar, while the selected circle checkmark makes an action the "default action" when clicking the + button i guess.


navigation

clicking these messages to jump to the referenced mesage is great, but

  1. we need a way to also "navigate back" especially if a message is very far in the past and that scrolls a lot
  2. if a message replies to 10 messages, thats a long list, so we might need a < and > button to swipe or click through the replied to messages so you can click and jump to one of them.

In your example there are only 2 referenced messages, but it could be more.

Maybe we need a temporary navigation bar that can appear above the bottom bars ... similar to how on some websites or in messengers, there is a button "scroll to bottom" that appears only if you are not scrolled to the bottom at the moment.

we could just extend that concept with more navigation options that appear when needed.


tree
great, but we need to make an entire separate github issue and also use the "theme widget" project in playproject to make a really great "graph explorer" to be used here as well.

This includes an ability to display DIFFs.
e.g. created/changed/removed indicated via icons or names or just text color of the entry names and so on...


step wizard
That is great.
Have in mind - conceptually:

We are here filling out the "step wizard form" to execute a "text type action"

So we should make sure this always is designed to fit into the general structure of:

  1. action bar with + button and potential quick access action icons and text as default action
  2. step wizard bar with 1 or more steps showing up to fill out all data needed to submit a new action

The "step wizard" has a cancel option. It has a next step option (if there are more than one step) and it finally has a submit action ...and of course a preview.

In this particular screen, many of those generic fields are missing.

  • it isnt showing the preview for "hey there how's it going?"
  • it isnt showing the cancel button
  • etc...

Generally, no matter which "step wizard" we are defining for which action type, e.g. text type, worklog type, etc...

=> We should make sure they always follow the same general "Step wizard" rules for any action type.


graph
This is great.
But lets design this in the "Graph explorer" wireframe.
We have the same capabilities for the "theme widget" as well.

Yes we do need version control.
And yes, we do need the DIFF capabilities also for widgets.
It is important to see where a designer did changes for a css theme, so seing that and going back in time is useful.

I dont exactly know what you mean by "parallelogram law" or why it would apply here. We will do versioning for sure.
We will show the DIFF (create/remove/change) parts too.
We will do necessary math, but i'm not sure i understand what the problem is.

@Mirabrar-21
Copy link
Author

Mirabrar-21 commented Jan 8, 2025

tasks - 2025.01.8


worklog

worklog-52


feedback

Made an explanation video of the task messneger and updated the task and worklog


proposal

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants