Wording and workflow: status and actions, labels and colors

[althio]

In a TM2 project, the tiles [squares/tasks] can have different 'statuses' (eg: locked=active; done; invalidated; validated...). An 'action' is something that modifies the status (eg: lock / start mapping; unlock / stop working; mark as done; review=lock; invalidate; validate).

I am trying in this issue to improve the wording of each status and action (on buttons, labels, modifying also colors and maybe later tooltips). I am referring to buttons and displayed labels, not internal 'under the hood' variables.

[CURRENT STATE]

OR #157 OR #401

action	color	icon	Progress status	Lock status
creation			[none]	unlocked
Start mapping	green	forward arrow	[none]	locked [cur. worked on]
Edit with ...	blank	forward arrow	[none]	locked [cur. worked on]
Unlock	blank		[none]	unlocked
Mark task as done	green	tick	Done	unlocked

[PROPOSAL]

action	color	icon	Progress status	Lock status
creation			Ongoing	Available
→ Edit	green	forward arrow	Ongoing	Locked [Edit in progress]
→ Edit with ...	blank	forward arrow	Ongoing	Locked [Edit in progress]

1 tickbox (TOGGLING only 1 button visible)

• [ ] Mark as complete (empty by default)

action	color	icon	Progress status	Lock status
(only 1 button visible)
■ Stop editing	orange	'Stop' square	Ongoing	Available
✔ Stop and mark	green	tick	Completed	Available

---

[CURRENT STATE]

action	color	icon	Progress status	Lock status
Review the work	green	thumbs up/down	Done	locked [cur. worked on]
Unlock	blank		Done	unlocked
Invalidate	red	thumb down	Invalidated	unlocked
Validate	green	thumb up	Validated	unlocked

[PROPOSAL]

action	color	icon	Progress status	Lock status
✔? Review	green	tick & question mark	Completed	Locked [Review in progress]

1 radio button out of 3 to select (TOGGLING only 1 button visible)

• [ ] Unmet requirements
• [x] Undecided (selected by default)
• [ ] All requirements met

action	color	icon	Progress status	Lock status
(only 1 button visible)
← Stop and unmark	orange	backward arrow	Ongoing	Available
■ Stop reviewing	orange	'Stop' square	Completed	Available
✔✔ Stop and validate	green	2x ticks	Validated	Available

---

For information, I am using the following guidelines:

• consolidated and reduced set of words
• match between action (verb) and status (noun/substantive as result of action)
• short labels on buttons, tooltips can be longer
• differentiate active status from passive.
• clear meaning, less ambiguity
  • eg: "Done": misread "contributor is done for now" instead of "tasks are done and ready for review"
• avoid as much as possible wrong clicks by mistake and misunderstanding
  • 2-click process to mark (checkbox and button)
• thumb up/down may have pejorative meaning in some cultures, check/tick a little less.
• friendlier words 'not-too-scary-for-beginners' (avoid color red, 'invalidate', 'work'...)

---

Related to

• Confusing names: "Start mapping" #157
• add a "stop working" button #401
• added "stop working and unlock button" and changed link descriptions #403
• Change text on "Review the work" hover. #423 #459

[bgirardot]

Hi Althio, hopefully we can find a way to get together with Nitika and pgiraud to help get some of these suggestions into the tasking manager. Well, we have a way, this github repository and "issues", but maybe we can find a slightly more interactive way to get together and discuss ideas.

Right now the tasking manager UI is quite good, but could use some refinements like you outlined above to make the interface a little more consistent and perhaps more clear to mappers. I like the guidelines you used (I have to digest them a little more) and will try to follow them myself in my contributions.

It is quite a complex set of things the TM UI has to manage and convey to mappers, project managers and validators so I suspect there will always be a little room for adjustments.

[pgiraud]

Wow, this is an impressive work. Though it doesn't appear clearly in the current interface, I'm an advocate for good UI/UX. I have myself a few UI guidelines in mind. Sadly I haven't been able to stick to them.

I'm happy you enlighten the potential mistakes and I agree to most of your proposals.

I hope I can come back with more questions or comments soon.

Can you please provide some mockups showing your proposals?

Note: currently, behind-the-hood, lock status and progress status are distinguished. They are called "lock" and "state". "progress" makes more sense here.

[althio]

Blake, Pierre,

Thanks for reading and for the feedback.

I agree that github is not the easiest platform to discuss interface.

I can try a mockup with some drawing software. Or is there an existing tool to build only the interface? I am not familiar with web design.

[pgiraud]

@althio using https://moqups.com/ (or similar) is worth I think. And in my opinion, relying on github issues is still a good option

[althio]

This proposal is now drafted in this mockup. Anyone can access to view. All comments and questions welcome.

This mockup can be edited collaboratively, modified, forked... So do not hesitate to ask me. I will share it and give you editing rights.

[althio]

Revised version of the mockup available here where you can 'navigate' in the process for all statuses.

On the right side of each page there is a informative board. It is not for direct display; this is still the place meant for the map in the real page. Rather it shows the internal state (variable in the code: DONE, VALIDATED...) of the selected tile. It also shows for each state my wording intended for other elements (history, activity, map legend/key...) in the UIs (admin/owner and user).

[adamvoss]

I would like to express caution about adding too many tooltips. While I they can help create more compact UIs; they are not something that users typically look for on web sites and are somewhat out of favor due to the increase of touch interaction.

If tooltips are desired in HOT's UX, what I typically recall seeing on webpages are either a dashed underlined under the hover-able content or a graphical indication more information is available ex. a question mark and text saying to hover for more information.

[bgirardot]

@vossad01 Touch interaction's lack of a hover over tooltip type text is one of the major failings of touch interfaces in my view and are not a reason to abandon them. Some touch UI's allow for "long hold" to get the "hover over" text. Which from a UI design perspective is terrible, but it is there.

I do 100% agree that tooltip'ed text or buttons should have a visual indicator there is more information to be gained by hovering over, clicking or long holding, that is an excellent point.