Review of the HOT Tasking Manager v2 homepage mockup designs

[ghost]

We have designed the mockups of the HOT TM v2 homepage. After discussing with the mentors, we came up with the below designs. On the main / first page we thought to have the list of programs, on which the user can click to go to the list of the projects of that particular program aka second / target page. On the main page, we also have a button to view the complete list of projects without selecting any program.

The user can apply the filter on the second / target page to view the list of project as per their needs on the basis of filtering categories mentioned in the mockup design.

Please provide with your suggestions and valuable feedback on the mockup designs for improvement.

Thanks, Nitika

[bgirardot]

These look great to me. I only have a couple of comments:

1. EDIT: Bah, never mind, I see My Projects is on there. My eyes must be going, I promise I looked twice :)
2. How difficult will it be to change the Activations/Programs page with images and could it be longer than 6 "groupings" ? I am just thinking we might want to easily change or add to the groupings on that page. I am sure we can work with it even if it needs to go through editing and merging via github, but I thought I would mention it.

Really looking forward to the new pages.

[althio]

I find it very good overall, congratulations.

The structure and the flow from first page to second page looks good. If i understand, a click on the first page on a program will give you the second page with the filter 'program' set. With the suitable underlying fields structure, it appears to address well #347 and #486. The coordinators and project managers will hopefully give more valuable feedback.

Note: you may want to request feedback from a larger user base via mailing list.

I can give more minor suggestions since I am happy with the overview.

main / first page

• if the main page is restricted to important programs and activations then the page stays clear
• if the main page is open to all programs (activations, missing maps, training, mapping parties, by community, ...) we may need a catchall folder for all less important Programs and Project without Program (check #347 and #486).
• alternatively we need filters on first page (and associated tags) for programs just like filters on second page for projects.
• text "List of Programs / Activations" > "Programs"
• text "List of Projects" > "View by Projects"

The pictures to illustrate a program/activation are nice to have, very visual. Maybe provide a logo/badge overlay in a corner to display graphically the requesting organisation (HOT badge for Activations, MissingMaps logo for their programs, ...)

second / target page

• for the sake of real estate for filters and search options, consider removing "About" and "Questions" blocks on second page. [EDITED to add] Or these blocks should appear and disappear with a tickbox, a drawer, ...
• as noted by Blake "Your projects" could be "My projects" and it should stand out (top of the list in filters or separate on main frame) - by the way is #408 still necessary?
• Add button back to first page "View by Programs"
• more filters: difficulty, ... [related to #83 #487 and #528, anything with a field in the database and fixed values is eligible for a filter but most important filters should be on the top or logically ordered]
• sorting option: reverse sort order #435 with hidden secondary sort by priority
• more sorting: progress done, progress validated, difficulty, high priority
• list of project: if possible avoid two controls (page switcher + scroll bar)

[ethan-nelson]

Nevermind, althio already covered it :). :+1: all around on the designs!

[pyrog]

I find it very good overall, congratulations.

I'am agree with @althio :smile:

if the main page is restricted to important programs and activations then the page stays clear

:+1:

From HOT wiki or HOT website, we could link to the filtered project/programs pages to find less important or archived projects.

consider removing "About" and "Questions" blocks on second every page. these blocks the About page should appear and disappear with a tickbox, a drawer, ... only "once".

In practice we could add a checkbox " :ballot_box_with_check: Hide about on startup" on the about page itself, or in the preference page (it doesn't exist :wink: )

alternatively we need filters on first page […] for programs

I'am not sure. May be if you thing there will be a lot of actives programs in the future. See "main page is restricted to important programs" upper point.

So the first page could look like this:

As you could see, the description of each activation take a lot of space… so it's difficult to add a second row.

To keep space, we could put Title, search field, (filters ?) and sort listbox on the same line:

And replace text by "icons" on the footer (see #531):

[bgirardot]

Pyrog, I am not sure the space savings are worth it for the vertical, in fact I'd rather have both the text and the icons to have the greatest possible chance a person will understand what they are indicating. We get users of all different backgrounds, ages, abilities, I am not sure everyone know what those icons mean if they are alone.

But either way is fine I am sure.

[pyrog]

I'd rather have both the text and the icons to have the greatest possible chance a person will understand what they are indicating

You don't see it on this screen copy, but I use the title attribute to display textual description :wink: But we could keep text and icons (yes, I want to keep vertical space) :smile:

[pyrog]

Add button back to first page "View by Programs"

We could use a breadcrumb:

We could also replace Programs by the name of the program of this project

[bgirardot]

Oh, so there is "hover" text, ok, good idea, I think that covers my concern, most people know to hover over stuff I think. I don't know, but that sounds fine to me too.

[pyrog]

The user can apply the filter on the second / target page

I think that the filter shouldn't be always visible on the (second) page because it take space and there is too much informations on the screen.

I suggest to put an Advanced search or a Filter button associated with shortcut URLs:

Breadcrumb	shortcut url	search url
Home	/
Home > Advanced search	/search	note: produce URLs below
Home > Programs	/program
Home > Program > Ebola	/program/ebola	?search=ebola&in=programs
Home > Organization	/organization
Home > Organization > MSF	/organization/msf	?search=MSF&in=organizations
Home > Countries	/country
Home > Country > Philippines	/country/philippines	?search=philippines&in=country

[pierzen]

The design of the Main page is important considering the multiplication of actions with more then 700 TM jobs listed. Actually, the major activations are on the same level as the various individual projects.

Both the Hierarchy and priorities are important aspects. Flexibility is also an important aspect to consider. We should avoid as much as possible to make categories permanent and let the main Task Manager Activators collectively take care to define these categories as the actions evolve.

It is also important to remember that we are in a community driven organization with both developpers, main activators and support team quite involved in the development and the management of the organization And the Task Manager is quite at the center of many actions.

While introducing the new V2 in the middle of the Ebola Activation, a lot of changes were introduced without prior consultation. We can say that the Developpers had taken the control of the content without prior consultation with those responsible of the content, The group of main Activators should have been consulted prior to such drastic modifications. The removal of Projects as they where in V1 and then using Project to represent the individual jobs was not justified by the developpers and was incoherent with our practice. We should simply come back to V1 definition.

This Mockup proposal has

• Sections (left, Hierarchy, right, Content)
• Left panel hierarchy
• Content Layout (Square boxes)
• Content ( Text plus images in the boxes)

I agree about such a Project Hierarchy but not with the terminology proposed. Program is more a bureaucratic term or refer to a computer script. For the Terminology, I propose instead

1. Categories (ie Activations, Missing Maps, Espace Francophone, Latin America, other projects ...) 2.Projects / Activations (ie. Ebola Activation, London Hackaton, etc.)
2. Actions or Jobs (ie. add buildings to Monrovia, Import Place names, etc )
   1. Tasks (individual squares or polygons to select)

To provide Flexibility to the Main Activators is also an important factor to consider in the development of the Task Manager.

For the Left panel Content Layout, simple boxes should be planned with an editor widget to let Super-Editors define the content. This would show the Categories.

For the Right panel Content Layout, there could be a simple box with an editor widget.

The Content should be independant of the layout.

The Design should also be tought to not make permanent various groups and layout content. Instead of a fix number of Projects. There should be a Categories / Projects Edit Panel that only Super Administrators can access, create new projects, edit the content.

• Category Name, status and Sort id (this to prioritize the Categories in the Main page list (ie Activations, Missing Maps, etc.)
  • Right panel box content
• Project Name status and Sort id (In each Category, this to prioritize the Projects.
  • Right panel box content This way discussion about the Content can be done independantly of the Task Manager development and be revised more simply, adapted when necessary.

Status

• active
• archived
• hidden (not listed but still archived)

Then for the Various pages

1. Main Page - List of Categories Left Panel - Editable Boxes of Categories Right Panel - Editable Box for the right panel content
2. List of Projects for each Category. As for the main page, a right editable panel is provided. This let revise informations for a project, announce important aspects, new instructions, thanks people.

Filter is also an interesting aspect. Will let others react before discussing about it.

[MarkCupitt]

I agree prett ymuch with Pierre, especially on the following, I have proposed similar previously

Categories is essential, Activation's, Training, Testing, Education, MissingMaps, different countries projects, etc

Under Activation, by Crisis, eg: Hayian, Runy, Ebola, South Sudan, etc

The creation of the different categories/Criss/Project should be for the senior Activation Coordinators, not for Project managers otherwise you will have so many they become useless.

Url-rewriting could be used for a nice looking access, tasks/ hotosm.org/ebola/777 if needed

Priorities should be displayed withing the different Categories/Projects

Projects Themselves could be prioritized so that people lookingthrough the Task Manager can see what is more important.

Cheers

Mark

[bgirardot]

Is there a reason why simple tags or keywords on projects would not handle groupings (aside from status)?

When we say "categories" it sounds like just one per project, with tags a project can be in multiple "groupings" and tags keep it free form so the activation coordinators can decide on the fly, but with auto complete for existing tags to keep consistent, what groups to put projects in.

I am sure a project could be in Red Cross, Ebola, training, Africa, buildings groups, that is across several different "types" of categories: org, location based, activation, difficulty, and mapping type.

If you say categories now you are going to end up wtih 3 or 4 different "types" of categories, with some defined list of options.

Just a simple tagging scheme (not key=value, just value) would let you create groups, adjust groupings and with auto complete for existing tags, to help keep them consistent.

Just an idea (I have an issue open with that suggestion), i have seen applications with both approaches and simple tagging or key wording I have found to be more flexible, but can get messy too so it is a trade off and something to look out for.

Right now from the mockup it looks like Nitika has these types of groupings in mind:

Status Priority Programs Organization Category/Label

What would be missing? Area/Location/Geographic Difficulty Type of Mapping

Are there others that need to be included? Do we not need the others?

Does a somewhat fixed set up for some types of groupings make sense and let free form tagging take care of the rest? Is my idea of tagging or keywords just the same as "Category/Label" ?

[MarkCupitt]

Tags/Keywords already there now, you can search on keywords in the subject line. It is not obvious how to do it as well. Pierre had to point it out to me.

New mappers who want to contribute are more likely to click on a Haiyan Link to contribute than type Haiyan or Yolanda in some kind of search box.

There is no structure to tagging, just look at OSM. project=haiyan, project=hayan immediately becomes of little value.

Last year I ran an automated process over all tasks trying to categorize them by keyword contained in the subject string. I forget the percentage I was able to identify and classify into an activation or some kind of group, but I am sure it was less than 60%

Why not group into an activation/project? That's how HOT works. It focus's on an activation or specific project. Everything else is fill in until a disaster happens, and still very worth while.

Training is training, Activation is Activation, Ebola Training is exactly that, training and you do not want people distracted with training jobs when an activation is in progress.

I do not want to see training or irrelevant jobs in an activation I am coordinating, it distracts from the main tasks in a Crisis.

It happened during Ruby, someone added 'Ruby' to two old jobs that were no where near the activation area in the hopes of getting some attention on them as part of the activation. They suddenly popped up under Ruby. Currently, anyone can do that. It should not be this way. everyone is busy enough in an activation as it is.

Think about it, when there is an Activation in progress, which is the focus of HOT, we want all the resources focused on the Activation Tasks. I would even go as far to say that the other project's should be disabled at times of Crisis so that HOT can do its thing.

The counter argument that other people use the Tasking Manager for their own does not swing. HOT is for HOT, any one of those other groups can set up the own Tasking Manager Instance. It is not hard, I did it on one of my servers, quite straight forward and easy to deploy.thanks to the excellent instructions.

The point being, HOT has a mission and a specific Role and in times of Crisis, we need to be able to make the tools work so that HOT can focus on THAT Crisis until it is over, often just a few days, maybe more depending. The Pre-disaster Mapping is very intensive .. Once past that stage, everything can go back to normal.

Cheers

Mark Cupitt

[bgirardot]

Mark: Tagging instead of structured categories does not affect groupings at all.

You want only Ebola2014 activation related projects, the url for the Ebola 2014 grouping would just have that string in it. That it also happened to be a useful project for training would make almost no difference.

Except that if someone was looking for beginner learning oriented tasks and wanted to contribute to the Ebola 2014 activation, they could easily locate one to contribute while they improved thier skills.

The idea that we can put tags in the project title is exactly the sort of ad hoc kludge I am trying to get rid of.

Oh I might add: When there is a crisis activation, if no one is thinking about training you are going to end up with some mighty messy data just at a time when we don't need ugly data. Someone taking literally an hour or two to learn to map the area correctly could save many wasted hours later.

[pyrog]

@bgirardot

put tags in the project title is [a] sort of […] kludge

:+1:

@others see #528 Simple tags on projects

@MarkCupitt

Tags/Keywords already there now, you can search on keywords in the subject line.

It is not obvious how to do it as well.

:+1: That why we must use one or more specific fields.

There is no structure to tagging, just look at OSM.

Categories and/or tags: we should use words in a defined list. As in github with #Issue or @user MD syntax, a popup list could appear to select quickly (and safely) "keywords"

[MarkCupitt]

I still do not see how tagging could be easier than seeing a list of current activation's, then just clicking a link for the activation a person is interested in working on.. :)

So now it is 2015, they put in Ebola 2015, nothing comes up, So now we have to know to put in Ebola 2014. If we just enter Ebola will all the ebola tasks show??

The list can be presented like this, with only items with Active Tasks displaying, or a toggle to shopw active, On Hold, Acrchived or whatever

Activations
   Ebola
   Ruby
   Tharparker

Training University of Mindanao Missing Maps Sudan Congo

Click the second level activation you want to work on, then all the active tasks list out on a new page, voila. easy for anyone to understand and visualize

You could extend this to show the number of active tasks beside each project

That has got to be simpler and easier than trying to use tag and people can actually SEE what is happening and what projects are being worked on.

Sorry, just my web design self coming out (my other life) :)

Also, as an Activation Coordinator, I really believe we should be able to temporarily disable all tasks not part of a current activation to keep focus on what HOT does, its mission.

Of course, there may be two Active Tasks, A typhoon or a Bush Fire, or whatever, but all the non essential tasks during an activation should be restricted until the activation is at a lower priority. When there is an Emergency, then non essential tasks should not be able to attract mapping resources.

Cheers :)

Mark Cupitt

[MarkCupitt]

A comment on the Interface as well, We have to keep in mind that the task Manager is a Tool and designed to get a specific job done, mapping. Filters and the like are great for Project Managers or the like for back end browsing, but not relevant to most of the people who come to the task manager to map stuff

Adding Images for each task looks cool, but someone has to do it, create an Image and so on. When there is an Activation, especially pre-disaster mapping, the Activation Coordinator simply is to busy and it really adds nothing of value.

Additionally the images will all have to be original works, you cannot add pictures form the internet due to copyright and licensing issues.

I do see that something like this should be on the main HOT Web site as a record of what HOT has achieved and should be done Post Activation, or when someone has time.

I strongly encourage the KISS approach, minimal keystrokes and options to get mappers working on Current Activation Tasks, which is the whole purpose of HOT in the first place.

I really believe that the first thing a user should see when he hits the Tasking Manager is a list of Current Activation's, with some way to indicate Urgency or Priority, nothing else. That's why they came to the task manager in the first place. Make it as easy as possible for them to get mapping without seeing a lot of information that is not relevant. If it is too overwhelming or confusing, they just may go away.

I would believe that we want users focused on the highest priority Activation's before any of the lower priority ones, especially in a pre-disaster mapping phase.

Cheers

Mark Cupitt

[ghost]

Many thanks to all of you for providing with your suggestions on the mockup designs.

@bgirardot 1. Yes, its My projects.

2. The programs/ activations can be longer than 6 groupings. it would appear same as http://hot.openstreetmap.org/projects.

I think We should also mention about the filter categories (Area/Location/Geographic, Difficulty, Type of Mapping) that you have mentioned.

@althio Yes, Programs seems better than List of Programs. thanks for reviewing, I have noted down the suggestions to discuss with the mentors.

@pyrog Your Advanced Search proposal looks great to me. I need to discuss this with the mentors.

@pierzen @MarkCupitt Thanks!

[ethan-nelson]

From a discussion with @pierzen in IRC, it would be great to have a sort of "Message of the Day" like in IRC that is editable by admins/project managers on the front page. This could range from nothing to links specifically of trainings for a given event occurring, what to be careful for, updated times help may be available on google hangout etc. As crises evolve, so too should additional information on the front page. An admin-changeable message would also not require a small--but redeploy-necessitating--change currently for right panel content.