Role: Web design
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
Role: Web design
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?
If we want to do this using PURE, we should
@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.
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:
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?
(For now, only by Jan, second evaluator needed)
[Standard system dialog]
[standard system dialog]
Adding step scores: 2+2+1+2+1+1 = 9
Worst score over in all steps: 2
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"
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 –
Here are my points in no particular order. Main themes are: how to communicate trust, interface suggestions, and tone.
<h2>; file size restriction (“max size: 16MB”) further down, near upload button.
P.S. could be shorter – “Upload your file to clean its metadata!”
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…
<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.
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!
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)
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:
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
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!