CalBug: Tutorial images

[cerabilia]

We would like to see a page right at the beginning, that new users can access that have the page basics mapped out like in these images that Pete made. In discussion about this with @arfon he thought it should be a link right off of the dialog with the button on it that says "Got it! Let me transcribe". Perhaps there can be two buttons, that one plus one that says "Quick Start Guide" or something like that. The latter would lead to the page with these images and a small amount of text if needed.

[chrissnyder]

Those seem quite helpful. I need to think a bit how we should integrate them into the interface. Adding buttons and options and whatnot is a slippery slope.

[poboyski]

I have these images in their separate components as layers in Photoshop (original image, text overlay, arrows, etc.) if someone wanted to make them "prettier" for the NfN website.

[damagedgoods]

I think I can help here. Could I get the original images without the text overlays?

Thanks!

[damagedgoods]

Hi.

This is how I would do it:

1. At the top module, over the photo, a new "Learn how to do it" link that will lead to the tutorial page.
2. The tutorial page keeps the same header, with the "Start transcribing" green button in a prominent position.
3. A first paragraph explaining each field: what does it mean, value examples, ranges and expected formats, etc.
4. Different samples. For each sample, I think it's a better idea to mark in the image the position of the required & non required fields, and list them under the image, explaining them if necessary.

Does it sound ok?

[poboyski]

I like the idea of an introduction at the top followed by descriptions of the fields (I can provide the text for those). I am not crazy about the annotation of the image. I think it fits the site aesthetic better to use the actual transcription (like in my original examples above), the numbers make it look a little cluttered and you have to look elsewhere for their explanation. I like the transcription information next to the image where the eye can see all the information more quickly and easily. Admittedly, my images cobbled together in photoshop are not ideal. So I am attaching the original image and transcription screen capture if someone can make it prettier. - Pete

[damagedgoods]

The idea of the annotations was to indicate where in the image is located each field, instead of forcing the user to search for them. I would remove the non considered fields annotations (collecting method, etc) and talk about them in a footnote or additional paragraph. I think the original design gives them more importance than to the transcription fields.

Please find a new proposal, removing the annotations and using the right column to list the fields. I would remove the green / orange color coding, as its meaning is not clear in this context and I think it's clearer to explicitly say the field is not present in the image.

[cerabilia]

Hi, Not sure I understand this last iteration. It looks less informative than the actual entry screen. The orange/green for standard/additional is used on the actual entry page and if it is retained there it should look the same in the help. One of the main points of this is to indicate what the fields they do not need to transcribe look like and tell them they don't need to transcribe them (an EMEC#### tag is on every specimen that is not transcribed). Based on the comments on talk this comes up a lot. Sample 2 posted before but with the actual list of fields as they see it on the entry page and some text explaining the colors seems optimal to me.

It is important to know how soon we will get the "other information field" added, as it is the catch-all and should be explained here. @kycan might know if that addition will happen sooner or later.

[poboyski]

I think we should be cautious about indicating "(unknown)" for a field when there is no data for that field. "Unknown" is an actual value for some fields (like Country), which may confuse people (eg. Do I enter "unknown" or leave it blank?). The color coding is a bit deceiving - in the transcription green means entered, red means not entered (it does not refer to 'standard' and 'additional') - so maybe black and white is better. And I think data on labels that are not captured (like the unique identifier & determination/identification labels) should be explained as such, perhaps even if there is an "Other data" field. In short, I think all the information I tried to convey in my original mock up images should be there, just in a prettier presentation. I expect most users will only look at these examples once or twice. But it would be good to explain as much as we can about what they are seeing.