Role: Web design
Skills:
This is a companion discussion topic for the original entry at https://opensourcedesign.net/jobs/jobs/2019-02-03-improving-the-two-webpages-of-a-simple-web-interface-to-a-metadata-removal-tool
This is a companion discussion topic for the original entry at https://opensourcedesign.net/jobs/jobs/2019-02-03-improving-the-two-webpages-of-a-simple-web-interface-to-a-metadata-removal-tool
Hi Julien!
Simply Secure is happy to offer pro bono help here. I also talked to @jdittrich who’s interested in joining us. Shall we set up a call to discuss your specific questions?
All best,
Eileen
1 Like
If we want to do this using PURE, we should
- Find out what the target group/persona/… should be
- Though this is very likely “Clean image metadata”, find out what the to-be-evaluated task should be.
@bumbleblue: Is Julien on Open Source Design Discourse and can answer here?
Random thoughts, freely inspired from doobry’s ones.
I guess that the target group might be journalists and activists, who will use mat2-web prior to posting media on the web (new articles, social network, instant messaging, …). Also, windows and mac users, because mat2 is curently only available on Linux.
I think that most of them will know that their files could contain metadata, but won’t have a clear idea of what those are: there are some confusions about network vs. file metadata (“We kill people based on metadata” vs “When I’m taking pictures with my iPhone, they do contain GPS coordinates”), so I guess having a small explaination about what mat2-web is removing from media might be useful.
Technical users won’t use mat2-web, they’ll use the command line interface, which is more powerful.
Side note: we do plan to translate the web interface.
1 Like
OK, so I would assume our user wants to post an image on a social network. They know that “metadata” exists and that it is “in” images and that it can be used to identify people or location somehow. They have experience in using the web, but are necessarily tech-interested.
For the task, I would decompose it into the following steps for a new user:
- Going to https://metadata.systemli.org/
- Understanding what the tool does
- Understanding what they need to do
- Choose image
- Trigger upload
- Understand confirmation
- Download cleaned file
I agree with @jvoisin that an explanation on what kind of metadata the service is about would be helpful.
@jdittrich, your approach sounds very reasonable to me 
Here is my evaluation according to the PURE Method.
@bumbleblue: Can you go through the steps too, write down your score (see the end of the post for the rubric) and tell where you would score differently?
Scores
(For now, only by Jan, second evaluator needed)
Step 1: Understanding what the tool does
Score: 2
Comments:
- There is quite some text
- Somehow I get the file back
- Mat2 is recommended, however, it leads to a page probably confusing even for somewhat more tech savvy users.
Step 2: Understanding what they need to do
Score: 2
Comments:
- The upload elements follow the standard pattern, but is probably not the first element people look at
Step 3: Choose image
Score: 1
[Standard system dialog]
Step 4: Trigger upload
Score: 2
Comments
- The upload elements follow the standard pattern, but is probably not the first element people look at
Steps 5: Understand confirmation
Score: 1
Comments:
- There are relatively few other elements on the page, and the button is easy to see
Step 6: Download cleaned file
Score 1
[standard system dialog]
Overall Score:
Adding step scores: 2+2+1+2+1+1 = 9
Score: 9
Worst score over in all steps: 2
Scores Rubric:
The step can be accomplished easily by the target user, due to low cognitive load or because it’s a known pattern, such as the acceptance of Terms of Service agreement.
The step requires some degree of cognitive load by the target user, but can generally be accomplished with some effort.
The step is difficult for the target user, due to significant cognitive load or confusion; some target users would likely fail the task at this point"
Recommendations
General:
- Evaluate pages that also have upload/download mechanisms like https://send.firefox.com/
- Consider reducing text and reduce the logo size to make it easier to focus on the main task: Select or drop file, Download file.
Upload flow
- Firefox send directly uploads the file after selection, getting rid of step “Trigger upload”
Understand confirmation
- The primary action (download) should be easier to recognize
Preview
- Some of your filetypes can be previewed in browser (luckily the ones that are needed for quick uploads to social media), others could still be symbolized in an icon (using a free/libre icon library)
Visualization of metadata
- What about visualizing file+metadata directly? It could be some sort of table that appears “attached” to a preview of the uncleaned file. After cleaning, the cleaned version does not have it.
Tone down secondary actions
- If you want to give non-essential information (like “this metadata has been removed”) try to fold it away or use a lower (though still readable) contrast to distinguish essential from non essential information
Example from firefox send for putting infos “behind” a link: 
Ah @jdittrich spoiler alert !!! ^^’ 
:o) Aren’t these evaluations supposed to be separate and independent? I was hoping we could bring our evaluations and then aggregate together…
OK. Will do my own review and ignore this post as best as I can. I’ve never done the PURE method before, maybe you can show me on Friday what these scores are!
Looking forward –
Eileen
Initial reactions:
- Love the overall simplicity of the page!
- Great logo — you’re helping to destroy the hidden (and potentially dangerous) part of the ice berg. I think it works well and is a memorable image. Now… if there were something to help me remember
mat2…
((The upper half has a nice 3D effect - is it possible to do the same for the lower half underneath the water? >> consistency)) - Yay for easy meta data cleaner! Nay for online version of it. Initial thought: Can I trust this?
Here are my points in no particular order. Main themes are: how to communicate trust, interface suggestions, and tone.
Interface
- Drag & Drop: consider using one of those responsive rectangles.
- Buttons at the bottom: can they be of the same type?
- Collapse button - the list of supported formats is pretty long, consider a pop-up info box instead?
Hierarchy
- Title is “>> Remove metadata”, and then later on you mention “mat2” – at this point I don’t know that the two are the same technology…
- Value proposition (“Upload your file, get a cleaned one in response.”) should be
<h2>; file size restriction (“max size: 16MB”) further down, near upload button.
P.S. could be shorter – “Upload your file to clean its metadata!”
Context
- What is metadata? [explainer, e.g. “Learn more…” could link to a small window/collapse box]
- Why should I run mat2 locally? [“Don’t trust us? Run mat2 locally!”]
P.S. but if I don’t trust you, why should I download a script instead? I don’t have the time/ability to audit your code…
Language/Tone
- “See the supported formats” is enough!
- Have the buttons, and then underneath that “… or drag & drop your file here”
- For success screen, remove “Just for fun” – I’m not here for fun!
- “Please note that while we do not keep a copy of your file, there is no way that you could be certain about this: act accordingly.”
The tone is a little condescending and confusing – are we supposed to use this tool or not? I will feel like I’m doing something wrong while using this interface; I might even feel dumb for not being able to use the CLI.
Going deeper: What is your recommendation here – maybe the policy is for high-risk user to not use this tool at all? Distinguish recommendation and disclaimer - you can very well add a disclaimer about security risks at the bottom. (You probably need to anyway >> GDPR.)
Example: “mat2 is an open source project run by volunteers. It does not collect or process your data etc etc. You can [visit our code repository] and download a local version if you wish (command line usage required).”
System status
- Consider giving system status (removing data - data removed) its own element -
<h1>doesn’t feel right here. You could, for example, color code for success, or have a status bar/indication as to which part of the process the user is in.
Questions
- Does the local version (as included in Tails) look similar? I would highly recommend visual consistency across browser and desktop app. (Communicates trust.)
I think this is an excellent tool and 
would recommend to all who don’t want to or cannot install a metadata tool. Rock on!
1 Like
Aren’t these evaluations supposed to be separate and independent?
The scores, yes. I did not spoiler-hide it since I could not remember the numbers and reasons after a brief read (and it is not a super big concern anyway). But in case it was a problem I gladly hide them the next timeÂą
The recommendations are not secret and not part of PURE.
Here’s the review from Ame + Georgia (Simply Secure) 
General notes on frontpage
-
Consider adding the name (Mat? MAT? Mat2?), a tagline, and an explanation of what the user should expect. This could connect to the logo, which seems to be an iceberg. A rough starting point for the tagline: The file you see is just the tip of the iceberg. Remove the hidden metadata with [name]. [Heuristic(s): Visibility of System Status]
-
The ReadMe includes some nice sentences about privacy and metadata, but a clarifying example could help. This is the place to have a statement of your benefit. Remove hidden data that could compromise your privacy by revealing your location, company name, etc. on files you share on the internet. [Heuristic(s): Help users recognize, diagnose, and recover from errors, Help and documentation]
-
This seems overly threatening. Is it that you don’t want porn? Or crime photos? Or? Is it necessary? If it’s meant to be educational, expand on the description to educate the user, rather than scaring the user and causes them to question trusting you. [Heuristic(s): Match between system and the real world, Error Prevention]
-
This seems like an advanced feature. Could this move to the source info block at the bottom? Or link to something that’s more obviously a thing to download if a regular person could download it. This could also be more of a call to action: “Host mat2 yourself, and have full control over the data and tool.” [Heuristic(s): Flexibility and efficiency of use, User Control and Freedom]
-
That’s a really impressive list! I think having that a click away from the home screen makes sense. There’s something kind of funny happening with the two different >> styles so close to each other, and then they aren’t actually the arrows you click. Consider making the link the key point: “See which 26 file types you can upload for metadata removal.” [Heuristic(s): Consistency and standards, Help and documentation]
-
From a usability point of view, the uploading worked fine, but without shading or an edge, it didn’t look like a target for drag-n-dropping.
Think about distinguishing this “action area” from the “information area” above it with a border, shading, something. This would also be the place to put the 16MB size limit, and possibly the disclaimer: think before you upload, we don’t want your porn. If you think that’s helpful. Also, I think the blue-shaded “download” button on the cleaned page is a clearer call to action. That could be a consistent button style used on the first page too. There are really 3 steps to this process:- Select file
- Upload file
- Download file
I’d suggest renaming 2) with a verb like “clean” or “remove metadata” And make that the big blue button. Upload and Download may be accurate, but they undersell the unique, cool thing you’re doing.
[Heuristic(s): Consistency and standards, Visibility of System Status]
General notes on the download page
The list of removed data is really impressive!
-
I didn’t get that >> Remove Metadata and >> Metadata Removed on the following page are kind of a pair until I looked at it a while. They seemed too similar/the same if I wasn’t paying close attention. That list of removed things is so impressive though, maybe different formatting might make that point stronger. [Heuristic(s): Consistency and standards, Visibility of System Status]
-
“Managed to remove all metadata” sounds a little tentative and humbled. What about something like a check mark and Success! For example:
Download Cleaned File
Success.
39 metadata fields removed from IMG_0013.
I’d experiment with Download above or below the list. It’s really cool to see the list!
1 Like
Yay, thanks for doing this!
I dumped everything into the bugtracker, and will keep you updated 
Following @jdittrich’s pointer, I’m also submitting my PURE scores for this review
Step 1: Understanding what the tool does
Score: 2
Comments:
I assume the target user already knows what metadata are; however, there’s still little context/explanation of how mat2 works.
Step 2: Understanding what they need to do
Score: 2
Comments: (Having a clearer drag/drop area would help, see my comments above.)
Step 3: Choose file
Score: 1
Comments: No issues here!
Step 4: Trigger upload
Score: 1
Comments: Pretty straightforward button; could be more consistent in style though.
Step 5: Understand confirmation
Score: 2
Comments: The different file name, along with the info on what was removed, could be a little bit clearer. (Again, see my comments above!)
Step 6: Download cleaned file
Score: 1
Comments: 
Overall Score:
Adding step scores: 2+2+1+1+2+1 = 9
Score: 9
Worst score over in all steps: 2
(Agreeing with Jan here. I think the text warning people of security issues adds to people not knowing what’s best to do…)