search

wizardamigos / wizardamigos.github.io

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

UI/UX/concept design #39

Open serapath opened 2 years ago

serapath commented 2 years ago

@todo

@info

...

mimi-uxui-dev commented 2 years ago

Results 2022.03.01 : Wizard Amigos Slide Deck

serapath commented 2 years ago

feedback 2022.03.01

Results 2022.03.01 : Wizard Amigos Slide Deck

see concept & slide deck feedback hackmd

mimi-uxui-dev commented 2 years ago

Results 2022.03.01

First Slide Deck about Wizard Amigos: Summery

mimi-uxui-dev commented 2 years ago

Worklog Video 2022.03.03 : Commentary on feedback 2022.03.01: concept & slide deck

mimi-uxui-dev commented 2 years ago

Worklog Video 2022.03.04 : Commentary on feedback 2022.03.01: concept & slide deck

mimi-uxui-dev commented 2 years ago

Results 2022.03.04 : Updated Wizard Amigos Slide Deck

mimi-uxui-dev commented 2 years ago

Worklog 2022.03.06 : Final touches on the concept slide decks

serapath commented 2 years ago

feedback 2022.03.06 part2:

also, going through the latest iteration of the slide deck, the chapter page and chapter page maker tool is missing (which means a page for a group of people which meets regularly in physical space. ...sadly all the existing chapter page demos are broken at the moment because of the "corsanywhere.org" service being broken, which prevents downloading all the meetup events of a given chapter to display them on the chapter page. so one important part is that chapters is where people regularly create events during which they can meet to go through workshops or codecamps and do them together. ...maybe online or maybe by meeting somewhere in physical space in the same room or venue.

We did not make one time "events" that are not bound to a chapter a thing, because coding cannot be learned in a weekend, so a serious effort needs regular events and a small group of people to support each other regularly, therefore the events should always be connected to a chapter and not a one-off event somehow in the air after which all efforts stop again.

serapath commented 2 years ago

feedback 2022.030.8

a goal for wizardamigos is:

because wizardamigos is decentralized, which means anyone can use the tools to make their own workshops, codecamps, etc.. with their own logo and theme and host it on their own domain .... probably wizardamigos.com should not be special if we don't have to be special.

  1. imagine somebody making an image editor tool in the web.
  2. also then they would make a workshop about how to use their image editor tool

...

  1. we just happen to make workshop editor tools in the web
  2. and we make a workshop about how to use the workshop editor tool
  3. in fact we have quite a few tools and we can make workshops about those tools

...maybe we will even start using some other peoples tools to make our stuff (like css pixelart editor?) ...and others use our tools to make workshops about how to use their tools. In the end we are just one of many people using workshops and making tools :slight_smile:

If we can be humble and blend into the background in a global network of people making tools and workshops and linking to each other, that would be preferrable, so our website should ideally not be necesary at all or it should be at most some sort of entry point/portal into the networked game where many people participate by making tools and workshops. ...where in the future many such entry point websites do exist, not just ours

mimi-uxui-dev commented 2 years ago

Results 2022.03.08 : for feedback 2022.03.06 part2 I updated the Wizard Amigos slide deck

mimi-uxui-dev commented 2 years ago

Results 2022.03.08 : Commentary on Feedback 2022.03.08

I see what you mean that changes everything, I think we should :

serapath commented 2 years ago

@mimi-uxui-dev Worklog 1 2022.03.07 : Stared Wireframing Worklog 2 2022.03.07 : Stared Wireframing Results 2022.03.07 Wizard Amigos Draft 01

serapath commented 2 years ago

feedback 2022.03.07`

we have different types of users (roles), which can use our tools to do something based on our "use cases" and we should probably create issues for each of those ...and later that should be written in a markdown file and a slide for each of them.

gig

  1. a gig will only be displayed next to a workshop in the list of tasks/exercises/gigs/exams/whatever we call it

  2. a gig can be created, it is like a chatroom with a gig description in the topic or the first message followed by the messages people who work together (gig author + workshop learner) exchange doing the gig ...it could look a bit like github issues i guess

  3. all the gigs made by an author show up in the authors personal page

  4. all the gigs a learner participates in show up in the personal page of that learner/worker/artist ?

workshops

there is no list of workshops on wizardamigos other than maybe a skilltree. wizardamigos does not maintain any workshops other than maybe a few workshops which teach what wizardamigos is and how the tools work, but all other workshops are maintained by the authors who make them.

codecamps

the same is true for code camps, so also for code camps we dont have a list (see workshops)

no signup/login

The main page can be structured the way it is, but its totally old school too :slight_smile:

Like, we do not have a "sign up" or a "login", because we dont have a database.

the website just generates a so called "cryptographic keypair" for first time visitors and later it just loads it from the local cache and if the person clears their cache they lose the keypair, so even later we will store it in a users wallet (like metamask) ....

no blog

we do not plan to have a blog at the moment

no FAQ

we do not have an FAQ, because everything should be self explanatory and if not there should be workshops.

a game does not have an FAQ, you just start and learn it by playing if the game is good

STORY TELLING

maybe the wizard amigos website should be the the first page of the game?

...maybe it should all start with a workshop?

...or it should start with an empty profile page that needs to open the default workshop that explains what wizardamigos and the workshop is about?

And the tool in that first workshop is the profile page maker?

And when you finish it, you can get back to your profile with the successfully completed "profile page workshop" where you used the "make profile tool" to create your account and which shows you the recent workshop you did (which is the first workshop) and what workshops you can do from here?

...but if you load wizardamigos and you made already a profile, it loads that instetad?

AND also because that is how wizardamigos would work, the workshop itself already has our contact data (=chat) and maybe the first task which is listed is "make profile task" ...which when you finish it gets added to your profile and you can do the next workshops.

The little minimap shows you the current workshop and the dependencies and what other workshops you can unlock, but if you click full screen on that minimap, maybe thats how you see the whole skill tree?

In the chat you can click on other learners to view their profile?

or you can click on the author of a gig in the gig list?

serapath commented 2 years ago

feedback 2022.03.08:

ok, i now listend to the videos too.

regarding the FAQ

true, there is an issue, but it was always meant as something temporary while we dont have awesome apps yet to be self explanatory and support everytying well, but i would make it unnecessary to have an FAQ because everything is clear :-)

regarding the blog maybe a blog can be added in the future, but at the moment we dont have the time or budget to maintain one. I have also never seen a game where they maintain a blog.

  1. chapter pages have updates or rather news though.
  2. also workshops need a way to notify learners about updates to the workshop.

these updates have more the form of updates of system notifications, etc... and each piece of software and in our case each workshop, each chapter, etc... would or should have an updates log where people can subscribe and receive notifications. More similar to how you can subscribe to github repos and issues. At the moment i think a blog is rather traditional and not sure it would fit with our overall game concept.

regarding workshop gigs the owner or rather authors and maintainers of a workshop usually do not add the gigs. Instead, anyone can add gigs to the workshop without being author or maintainer of the workshop.

basically, if a workshop is a blog post or a tweet or a ...or even beter, a github repository, then a gig is more like a github issue, anyone can open one.

serapath commented 2 years ago

@mimi-uxui-dev Worklog A 2022.03.08 : Wire frame iteration 2 : new layout

Worklog B 2022.03.08 : Wire frame iteration 2 : new layout

serapath commented 2 years ago

feedback 2022-03-09

  1. json files for profile/workshop/chapter-page/code-camp are a good idea :-)

    • we probably have to refine them in the future, but for now they are good.
    • e.g. for example to add "version", but there is a repo for the workshop generator tool which we can check

  2. code camp: i think the maintainers dont yet exist in json, but only as presented on one of the slides in an old slide deck, which is another reason we will need to refine the existing json files at some point :-) and probably we might merge the entire thing into part of package.json at some point, but not yet and maybe never, because there are pros and cons for that.

  3. awesom that you found all these screenshots of workshop examples and how you put it on the slides. maybe you could also add the screenshot of the maintainers and percentage payments json to the other jsons?

    • and probably we need to add a new gig.json, which links to the issue chat url where author and maintainer discuss
    • the entire flow of how to apply and/or accept a gig was mentioned in the WASL project (which i just remembered needs to be added to the history)

  4. workshop app layout: in fact the workshop layout is responsive already and shows different layout based on what is specified in the json file as far as i remember, so e.g.: *so if there is no info, it just shows the community chat.

    • if there is no tool it splits the screen in half (one side learning materials, other side info/chat)
    • gigs for example could be something visible only after you went through the materials and maybe should be collapsible?
    • the UX should depend on whats given in a workshop and also when do you need it when going through the workshop as a learner
      • maybe even to be able temporarily make the learning material section expand or shrink, based on whether you are currently watching/reading or if you maybe use the tool to practice or if you chat about some issues you are experiencing.
      • basically your 3-split-view gives very little space to a tool, so sometimes that might not be enough for the tool to still be usable.
    • also the context menu is something i am not sure about.
      1. the skilltree should probably be reachable from the little minimap preview which shows the unlocks and needs, either by expanding it as an overlay or even clicking to open the skilltree in a new window, so it doesnt need to be in the context menu
      2. actions, like create workshop or add to playlist (=create/edit codecamp) should at most be an option on my personal profile page, but even then, its essentially just using specific tools that are nor different from any other tool in the browser, like an image editor and an image editor can also have a workshop that explains how to use it. ...so in order to not make us special, maybe we can offer a user to "bookmark" a bunch of tools to his profile page and then those are listed there (e.g. create workshop tool, add to playlist/codecamp tool, ...)
      3. the playlist option in the context menu is also strange, because there are many codecamp playlist, so i wonder what that option means and if we dont have it, the only remaining option is "profile" which means that could just open the profile page when the user clicks on their avatar so we dont need a context menu at all.
    • anyway, i think the best would be to have a "default layout" and then let users re-arrange those layouts any way they want, a little bit like a window manager and those options can be saved as the user preferences and even per workshop. actually as a visual element it is called a tiling window manager, which is for example what you have in VScodium ... differnt tiling areas and each tiling areas can have one or more menu tabs :-)

  5. in general, on the skilltree page all paths and workshops and codecamps a user did already or gigs they did could be displayed on the skilltree map as colors or other icon indicators

  6. the gigs when you click on gigs, you see immediately one gig with a title and description and below some sort of ongoing conversation, but it would need to first show a list of available gigs and when you select one or apply for one, then it can show you those details for that gig, but you should be able to get back to the list of all gigs

    • also on your profile page it should show you all you currently ongoing gigs so you can quickly jump back to the workshop into the view of your gig :-)
    • btw. the gig view will let you do messages of type comment (like on github issues), but also some other "chat actions" (= type of messages), like:
    • a worklog messages (where you record/upload a short screencast video)
    • a feedback message
    • probably some other more contract related type of messages to set, review, accept, confirm, etc.. work and issue payments :-)

  7. create workshop

    • i think the "create workshop" should not be started from any workshop directly and it should also not start as an overlay, but instead be a completely standalone tool for now.
      • it is always possible to later create a menu and an overlay and embed the workshop editor tool in it, but given the normal use cases or user flow, it seems unlikely that it would be a common use case for a learner learning workshop materials or doing work to all of a sudden switch into teacher mode and create their own workshop and once they finish they go back to the workshop they were just learning? ...when would that use case happen? ...it sounds unlikely to me
    • it definitely needs a preview of the workshop while it is being edited :-)
    • also, one idea we were thinking about is that the "editor" can be switched to "json" mode to edit the json directly instead of using the UI for adding or changing workshop content, because that is allowing users to learn about json and wizardamigos is also about teaching coding as the new literacy instead of trying to hide that from people.
serapath commented 2 years ago

@mimi-uxui-dev Worklog 2022.03.14: Wire-framing iteration 3

Results 2022.03.14 : Commentary on feedback 2022.03.09

serapath commented 2 years ago

@mimi-uxui-dev Worklog 2022.03.15 : Wire-Framing iteration 3

serapath commented 2 years ago

feedback 2022.03.15

Worklog 2022.03.14: Wire-framing iteration 3

Results 2022.03.14 : Commentary on feedback 2022.03.09 :+1: yes, WASL has inspiration for when it comes to gigs and outsourcing gigs and managing gig related work

:+1: regarfing UX. we need more than just simple resizing, but at the very least we need that :-) I think we need a tiling window manager.

regarding HackMD notes taking YES! :-) so i imagine a user can see all their notes on their profile page, each linked to the workshops where they wrote/update their notes. If a user is doing a workshop and wants to take notes too, they should probably be able to open or load an additional tiling window tab with their notes in that workshop ...which means we need one more window tile next to chat, lesson, info, tool, ...

  1. the "skilltree table of content" with link is/was meant to appear on the minimap when you click the workshop icon logo
    • do you think thats good?

regarding playlist interesting idea. so a user can see all their playlists on their profile to basically "bookmark" workshops.

*tiling window manager we can create a basic tiling window manager by resizable container boxes and then over time upgrade that component if we need it, so we just call that simple thing "tiling window manager", but the first version is just what you said we need

4. regarding "no json mode" I agree with your argument, but thats the thing about wizardamigos. It is targeting every profession to teach the new literacy which is coding. So everyone, no matter if they are designers or marketers or whatever... should learn coding to upgrade their profession.

So people who are scared of JSON (the "english" of data formats regariding its wide spread use and its also simple) and it is relatively human readable too. It also makes it easier for somebody to copy the json of a given workshop when they want to modify it to create their own. it enables people to look behind the scenes and encourages them to copy to create their own.

I would agree with your assessment if it wasnt for wizard amigos being exactly about teaching coding as the new literacy :-) ...so everything we do should always make it as easy as possible for anyone to take a look behind the scene and switch from just a consumer user to become a coder and creator themselves :-)

regarding description yes maybe... i have more on that in the next feedback comment

regarding info on gig-maker/workshop-creator YES! ...also i have more info on that in the next comment :-)

serapath commented 2 years ago

feedback 2022.03.15

Wireframes:

1. full screen workshop video

2. nice idea to have icons to toggle other views

3. the "video area" might actually not always be a video

4. the "info" section is more a summary and it can include links to additional resources

5. idea: "add workshop description to workshop.json"

more on gigs/exercises:

the gig details in the end is where you mention the gig page could be maybe a seperate page. YES! :-) ..or maybe it could be similar to a workshop? ...more below

A workshop is supposed to be an atomic unit to convey one skill or concept. So ppl either dont know the workshop yet or they finish it, which means they should now have the new skill or knowledge. Any gig/task somebody chooses to attach is attached to a workshop, but not to a particular lesson.

So if a user could finish only the first 3 lessons in a workshop and can already do a gig then.... then the remaining lessons should be a different workshop. obviously a user can already do something new by just doind the first 3 lessons, so adding more lessons into the same workshop is not a good modular boundary for splitting lesson content

That kind of view could be good though if we are talking about a codecamp that groups multiple workshops. Each workshop in the codecamp can have gigs attached ...so there it would make sense :-)

NEXT: we will at some point also help people to create gigs and that includes:

  1. links to some additional information (=info)
  2. maybe a short document or screencast video recording to explain the task/gig/exercise in more detail
  3. maybe a chat where you can apply and then talk with the gig author while you work on the gig and have questions

so in some ways, a "gig" is quite similar to the elements a workshop has.

also, while the learner is working on the gig, they might use the same tool the workshop was providing, which means they need to see the gig description in parallel to their work and maybe ask something while they work.

ALSO: imagine a specific gig is described in more than one short summary video. the person applying for the gig would maybe need to jump back and forth between the job description and scroll in the chat with the gig author so see all the information relevant to the current step in their work on that gig. (again similar to a workshop in the first place)

...so i am not sure the popup overlay would solve the use case well

more thoughts on "summary description": Tabs to open content feels like an easy to understand visual metaphor to me. An overlay popup or a menu are kind of less general and more arbitrary and have to be learned. Every button, menu or whatever have to be learned by a user first.

In general, i think we are dealing with two types of information:

  1. derived auto-generated information
    • table of content
    • chat
    • tool
  2. manually maintained information
    • e.g. workshop.json, videos, markdown files

For example, i was thinking that clicking the "title bar" of the "lesson window", could give a dropdown/dropup menu to the user to list all the available lessons and then jump to the next if they want. That makes for a table of content but at the same time also an easily accessible menu to jump between lessons. It could also indicate workshop progress with icons or colors when the user clicks on it and is on lesson 7/10 for example

Also, to keep things more generic and less specialized, a workshop could always have a very short lesson one with a summary about the workshop. Imagine the first lesson would have: no tool, no info, and a short markdown tutorial instead of a video That way, the first lesson itself could easily be the "summary" of the entire workshop instead of having an extra summary section.

Also, i have used many online learning platforms and also youtube and they often have summaries before or for example below youtube videos. I think the majority of people dont bother to read and just jump right in. So is it worth having it?

Also if every repository on github at some point has a little workshop about the repository itself and a bunch of lesson. Would people bother updating the summary? Would they make one? ...maybe.

What about displaying the summary instead of video1 ...basically by generating some sort of "lesson 0" before things start?

Alternative would be to include in the workshop tool and in our docs or our workshop about making workshops, that lesson 0 is seen as the "summary lesson". The summary lesson is enough if the workshop literally has only one lesson. If it has more than one, there can be a summary.

BUT also the point of workshops is to have good titles and to be so short, that people literally dont need summaries. Workshops and their table of contents should be able to stand on their own with no summary explanation needed.

That is of course different from "codecamps" :-)

serapath commented 2 years ago

feedback 2022.03.16

6. profile icon

technically: visiting a wizardamigos workshop for the first time means the wizardamigos workshop page generates an invisible iframe (0px x 0px) with iframe.src="https://mimi-ui-ux.com/wallet.html" for example or if we dont know a user yet, we use the default profile page, maybe iframe.src="https://wizardamigos.com/profile/index.html" but a user can switch to use a different profile page instead. Once that happened and loaded, the wizardamigos workshop page can send and receive messages from that iframe page, which means it can request all available profiles from the users profile page iframe and receives back in json a list of those profiles, including user name and avatar pictures and so on ...so the workshop page can display that

onmessage = ({ source, data: message }) => {
  if (source === iwin) handle(message)
}
const iframe = document.createElement('iframe')
iframe.src = "https://wizardamigos.com/wallet/index.html"
document.body.append(iframe)
iframe.onload = () => { iwin = iframe.contentWindow }
var iwin

function handle (message) {
  const { type, data } = message
  switch (type) {
    case: 'ready': return iwin.postMessage({ type: 'request-profile' })
    case: 'profile': return updateProfilePicture(data)
    // ... we can define more protocol messages to interact with our profile iframe "database"
  }
}

Worklog 2022.03.15 : Wire-Framing iteration 3

2. The profile page feels relatively traditional at the moment. One thing to be aware of, that the profile page will probably be something (re)used across many different apps, not just wizardamigos and not build by us ...here we are almost borderline entering datdot territory so we will definitely spend a lot more time on the "profile page issue" when we get into datdot. The technicalities are being worked out by us at the moment. A few things are definitely for sure:

...anyway, there should probably be a profile.json section that displays generic profile information and is unrelated to wizardamigos entirely, Those dont change unless the user updates (maybe with the help of a profile editor tool) their profile.json file.

regarding code camps are code camps the ones a user attended or did? or are they the ones a user created or contributed to? or are they the ones wheree the user posted gigs? or are they the ones where a user applied for or did gigs in the past?

also, a user clicks on a code camp, its cool to preview maybe the json in the form you show, but: => a code camp is technically a standalone website similar to a workshop website It can have a theme, a title, a description, a logo or icon, a code camp community chat, etc... Many people can participate in a code camp or do the code camp when they open the page.

Maybe a codecamp could look like a part of the entire skilltree? a path or an area or multiple areas of the skilltree game map where users can also see unlocks and needs workshops of the workshops listed in the codecamp, even though those are not part of the code camp json file, but still something a user needs to see and do if they do not yet have the needs (=prerequisite workshop knowledges or skills) that the workshops included in the code camp demand :-)

skilltree: cool little preview picture. also lets not forget the interesting games ans inspirations you already found. for example the isometric city was interesting. what if there were multiple layers of such an isometric city? or what if it was more like a dungeon? you could go up and down layers ...maybe with some sort of an elevator. maybe a workshop has a "booth" on each layer, but some layers have different other workshops attached to it?

...imagine a workshop has 20 needs, but there is only a few slots space around a workshop, so the remaining "needs" can be next to that workshop on a differnt layer and a user/player/learner can just use the elevator or teleporter to get there.

...just kidding :-) maybe your little skill tree map with boxes picture is good enough? :-)

there is a type of game called roguelike which is probably the direction we should go for :-) cool thing its often done with pixel style, which makes it easier to do.

in a map of workshops the codecamps are areas that encircle a bunch of workshops. different codecamps can overlap in terms of the workshops they reference.

regarding indicating that on the skilltree.

  1. maybe there is a button something to toggle the view to show what is done and what not
  2. many games have maps where a user sees where they already where and where not
  3. in super mario maps each finished level gets some sort of achievement icon. a changed color dot or a flag or something

see here

But, by browsing through different wizardamigos workshops, each workshop will talk to the users profile page (=wallet) and request information or store worksgop progress or accomplishments or open gigs by sending that data to the users profile page, so when the user returns to a workshop, the workshop can request all that information again to let the user continue where they left off ...basically the users profile page iframe is our user database :-)

BUT: the users profile page is used in many contexts, not just wizardamigos So the same as a crypto wallet (like metamask) is (re)used across many different apps, we have to keep that in mind. So designing the users profile page means we only should treat it as generic user profile information and a section where different pages (e.g. like a workshop page) can store some information it wants about that workshop page, etc.. ...which can be displayed on the users profile, but in what format? how?

one more thing:

  1. the WASL slides have some more inspiration about "user profile"
  2. also github itself has plenty of inspiration about how to do profiles (we are code is the new literacy centered) and on github every repository is basically what we might want to call a project

also the way github does UI and how github does their dashboard could inspire how we do things :-)

serapath commented 2 years ago

@mimi-uxui-dev Worklog 2022.03.16 : Results & commentary on feedback 2022.03.15 feedback 2022.03.15 feedback 2022.03.16

serapath commented 2 years ago

feedback 2022.03.16

you have a hackmd in the video, but cant find the link to it anywhere, can you add the link to it somewhere here?

did you already somewhere update issues with that todo list in the hackmd? those should be listed somewhere in an existing or new issues

we definitely need to have one or more slides for each of them ...and what is too much for the slide deck goes on those hackmd files for each slide that list further details and links

regarding tiling window manager: the only feature needed is the "split screen" which is the tiling. we dont need overlapping windows and those other common features. a feature i could imagine is some sort of "editor zen mode" where temporarily one or more tiles become full screen until minimized back into their tile positions.

even more than that. our tiles should be able to have a tab bar, just like in a text editor. some tile contents might actually be iframe sandboxes.

each tile view should always consist of:

  1. tab bar title (below the tile
  2. tile program (e.g. video player, text editor, chat program)
  3. tile content (e.g. a video file, a text file, a growing chat history)

....so we can always open the program component or iframe in a tile. ....so we can load different data into that program

Later we need to upgrade that system so the programs in each tile can even communicate to other tiles, in case of iframes via .postMessage

all of that is definitely something supported by no off the shelve window manager component out there :P

regarding default maintainer

the default maintainer is definitely the maintainer and yes, they will get paid.

every workshop you make in the future will list you and if other workshops build on top of those and many of them will and if they list gigs and they get done or anyone donates, you will get paid for it 😛 ...you made it, hehe 🙂 so yes, for sure

serapath commented 2 years ago

feedback 2022.03.17

is says "make designs for everything". is it wireframes or designs?

and also are the following maybe sub components of the workshop component? (and maybe also the codecamp or maybe not?)

is the following a sub issue of the "profile component" ?

serapath commented 2 years ago

Results 2022.03.17 for feedback 2022.03.07