News:

Want to get involved in developing SMF, then why not lend a hand on our github!

Main Menu

[FREE/PAID] NO Upload Button & Improved Attachment User Interface Mod

Started by FrizzleFried, May 19, 2022, 10:44:18 AM

Previous topic - Next topic

FrizzleFried

We have all see a number of posts by a number of users (myself included) lamenting on the attachments system here.  It's very close... but needs a little help IMHO. 

First,  lets address the requirement to click UPLOAD or UPLOAD ALL.  This requirement is... from a user experience perspective... a pain in the backside.  Many of us have forgotten to click that damn upload button.  It's un-necessary.  If you select ONE file to upload... that file should upload.  If you select MULTIPLE files... they all should upload.  It's a simple interface that we've all be using for a long long time.  Adding the requirement to click that UPLOAD or UPLOAD ALL is unnecessary and confusing.

Now,  the next issue with the attachments user experience is the vast amount of "real estate" the system takes up down bottom.  Add 8 images and you will see what I mean.  At 5 images (for me,  you have to start scrolling... through just the attachments you're adding... how ridiculously obtuse).  Simply going from a single column to two columns reduces this ridiculousness by 100 fold IMHO...

(This is a quick photoshop mockup... please ignore the "same attachment" repeated... you get the idea)

You cannot view this attachment.

Can this happen?  Can we get a NO UPLOAD BUTTON and improved interface mod to greatly improve the user experience?!?  I'd PAY MONEY!  :D

FrizzleFried

Since it's my thread... why not talk about the padding within each of the attachment cells.

With a slight tweak,  you can fit 10 attachments in less space than 4 attachments currently fit.

You cannot view this attachment.

Antechinus

Yes, the amount of padding is bonkers at the moment. I mentioned that somewhere else.

gevv

ElkArte is a modern, powerful community building forum software. https://www.elkarte.net/

Antechinus

Just noticed that if you are drag/dropping images one at a time, you have to constantly chase the drop box down the page because it is underneath everything else. Clever. :P

(Yes, can fix...)

Sir Osis of Liver

Ashes and diamonds, foe and friend,
 we were all equal in the end.

                                     - R. Waters

Arantor


FrizzleFried


Antechinus

Ok, this is a roughed-out "improvement" based on simple template, CSS and js tweaks.

The js tweak is just changing  .show() to .css('display', 'flex'). IOW, show it as flex instead of the default block.

Template changes are basically just changing the order of stuff, so you don't have to chase new attachments down the page.

CSS is (frankly) a bit wilder than it would need to be if someone rewrote the order that js adds new things, but I can't get my brain around that at the moment. :P So, I cheated a bit with large CSS hammers. :D

Anyway, the copper.jg (copper tubes pic) is the last one uploaded. The green emerald pic was the first one uploaded. IOW, you don't have to go looking to see if you got your latest one done. It's always (visually) the first one in the previews.

Rearranged button order too, and made the "upload/upload all" buttons have bold text.

This is all functional code, but I haven't gone looking at responsive or different file types yet. Can't see those being an issue.

ETA: Oh yes, one thing that would make sense is to change the message about upload limits. At the moment it tells you the allowed total, and the amount you have taken up so far.

This is not optimal. It would make more sense to tell you the allowed total, and the amount you had left. This would save people having to do mental arithmetic when deciding what to attach next. :P

Should be an easy tweak to the text string in languages/Post.english.php.
$txt['attach_max_size_progress'] = 'The current total attachment size allowed per post is {currentTotal} KB. The total amount of the selected files is {currentRemain} KB.';
So that needs to be (more or less):
$txt['attach_max_size_progress'] = 'Total attachment size allowed per post is {currentTotal} KB. You can still attach ({currentTotal} - {currentRemain}) KB of extra files.';
It seems there may be a Sources bug here. Offhand it does not seem right that {currentRemain} is returning a value for (effectively) {currentUploaded}. Seems like bad naming of the variable to me.

Anyway, Im sure it's not hard to fix.

Antechinus

Gave it a bit more thought. Figure if the idea is to make things more compact, it's a bit silly having notifications sitting outside the drag/drop box. Might as well save space by using the box to hold most of the text, and use the text to make the box a bigger target.

Apart from that, gave it a bit more of a clean-up. The different states of the previews now have different icons, so you can tell even if you are colour blind. Since the inputs for height and width don't do anything once the post has been saved, they are hidden once they become pointless.

The most recent attachments are still at the top, so you don't have to chase them. They obviously all stack straight down the page on a phone (got the responsive done). I think these are all generally good ideas.

Have not attempted to fix the "Upload" button thing yet, but at least the "Upload all" is obvious and easily accessible, so that in itself should reduce the issues. It can easily be made more obvious. Making it work without an upload button is obviously possible though.

FrizzleFried


Antechinus

Made it a bit cleaner. I think that will do me for today. :)

Antechinus

Ok, solved this issue:
Quote from: Antechinus on May 19, 2022, 07:20:34 PMETA: Oh yes, one thing that would make sense is to change the message about upload limits. At the moment it tells you the allowed total, and the amount you have taken up so far.

This is not optimal. It would make more sense to tell you the allowed total, and the amount you had left. This would save people having to do mental arithmetic when deciding what to attach next. :P

It turned out to require another minor edit of the javascript, but it works nicely now. :)

davo88

So how does it work exactly? Looking at #9_Wotcha... and the ticked attachments on the green background, have they been uploaded/inserted at this stage? What's the next thing the user has to do?

Antechinus

Yes, they have been uploaded (otherwise they would have the grey background, and no icon, as per https://www.simplemachines.org/community/index.php?action=dlattach;attach=281571;image).

They may or may not have been inserted (that's up to the user). But, they and the post have been saved, which is why they have a green background and a tick icon.

If they had been uploaded, but the post had not yet been saved, they would have an orange background and a different (!) icon (as per https://www.simplemachines.org/community/index.php?action=dlattach;attach=281573;image).

davo88

Thanks for the explanation. This layout is certainly an improvement. However, it does rely on the user knowing the process in advance, what the colours and symbols mean etc.
Is it possible to add text or design it so that the process is completely self explanatory? 

The challenge is that there are a number of similar sounding steps
  • Add the file - Most users will get started OK, but not clearly understand what 'adding' means in this context. (Maybe it should be 'select'?)
  • Upload - Do I need to 'upload' as well as 'add'? If so, when to click the upload button? ...now, after adding? Or at the end when I've finished the text?
  • Insert - What does this mean? Do I need to 'insert' as well as 'upload' as well as 'add'? We all know that 2.1 offers inline attachments, but new users don't. They've never heard of "inline attachments".

It's all this forum-speak terminology that confuses users. Preferably, the attachment window would either explain the process, or guide them through it step by step so they can't miss.

Antechinus

Bear in mind that at this stage I have not attempted to rewrite all the back end shiz so that things work without an upload button. Wouldn't know how, at the moment. At this stage I'm just trying to get what is there presented as sanely as possible, in the hope that this will improve usability while we're waiting for someone to rewrite the whole shebang (and the presentation ideas will still be transferable then).

Quote from: davo88 on May 20, 2022, 09:13:21 PMThanks for the explanation. This layout is certainly an improvement. However, it does rely on the user knowing the process in advance, what the colours and symbols mean etc.
Can't see why that would be the case. If they drag/drop a file, or use the button to grab one, it appears with the grey background and no icon. It does this whether they have used it before, or not. The "Upload" and "Upload all" buttons are in bold text, and the former only appears in the preview of attachments that have not yet been uploaded. Seems pretty obvious to me (it's not something I would feel I needed an explanation for) but I can make the buttons flash and add dancing banana gifs to them if necessary.

So then they will presumably hit one of them there buttons, at which point the background will change and the upload button will vanish. This means the attachment is now on the server, which frankly should be obvious, given they will know they have just clicked an upload button. It doesn't have a green background yet, just to warn you that you have not actually saved the post (seemed like a good idea to me, but does not directly affect any process).

Green ones are ones that have already been saved last time you saved the post, and you don't have to do anything else with. But if you think having the orange background at the intermediate stage is confusing, that can easily be changed. I can make them any colour that works. For example, they could be orange when they have been dropped in the box, then turn green when uploaded, then default to grey for old ones that were saved last time. Whatever works.

QuoteIs it possible to add text or design it so that the process is completely self explanatory?
To who? Quite honestly, I find the default 2.1 interface self-explanatory, but I think the presentation could be significantly improved. I'm not sure it is possible to make anything self-explanatory to everyone. I assume you're familiar with "build a better idiot".

QuoteThe challenge is that there are a number of similar sounding steps
  • Add the file - Most users will get started OK, but not clearly understand what 'adding' means in this context. (Maybe it should be 'select'?)
  • Upload - Do I need to 'upload' as well as 'add'? If so, when to click the upload button? ...now, after adding? Or at the end when I've finished the text?
  • Insert - What does this mean? Do I need to 'insert' as well as 'upload' as well as 'add'? We all know that 2.1 offers inline attachments, but new users don't. They've never heard of "inline attachments".

1/ Surely most people are familiar with "adding" attachments to emails these days, or to something else. It's pretty clear English, but you can use any word you like (language strings are editable in admin). Personally I'm not sure "select" would be a improvement (because you can "select" something without doing anything with it) but this may be personal preference.

2/ Are people really this helpless? I mean in the real world, not just hypothetically. What does uploading anything have to do with writing text? They are separate operations. Always have been, on any platform that I am aware of.

3/ Well no, you do not need to insert the file if you do not want it inserted in the post body text. But that's too much text for one button. That would require a help link of some sort.

QuoteIt's all this forum-speak terminology that confuses users. Preferably, the attachment window would either explain the process, or guide them through it step by step so they can't miss.
That's what help pages are for. You are not going to want a complete instruction manual in your face, particularly on a phone, after you have read it the first time. But maybe some help links would be a good idea.

FrizzleFried

Green is pretty much standard for Go/Yes/Affirmative/Etc.

Red is pretty much standard for Stop/No/Negative/Etc.

A green checkmark is pretty much standard for Go/Yes/Affirmative/ETc.

A red cross is pretty much standard for Stop/No/Negative/Etc.

Now,  when you add both visual stimuli ... Green box + Green Checkmark or Red box + Red Checkmark it baffles the mind as to exactly what level of intellect would be confused at this point.

There has gotta be more to it.  No?

davo88

Quote from: AntechinusBear in mind that at this stage I have not attempted to rewrite all the back end shiz so that things work without an upload button.
Absolutely... and I appreciate all the time and skill you are putting in to this issue. So thanks for that.

My comments are probably not really suited to this topic because we're discussing a mod here. I'm thinking more about both the UI and the underlying supporting code.
But anyway...

The question of how simple and easy a UI should be, depends on the demographic of your forum. Younger users will just hack it until it works. Older users are intimidated more easily, disinclined to experiment and risk failure. If something goes wrong, that's it...  spit the dummy.
My forum is more towards the older end of the spectrum. They are nuts and bolts people, used to handling three dimensional objects, experts at getting old machines working.
Unlike us, they spend a tiny amount of their lives with their hands on a keyboard looking at screens.
Yet these are the people we want to contribute to our forums - they know stuff! Whether it's machines, gardening, religion, fishing, travel, cooking or marsupials - they are good at those things because that's where they spend their time.

Maybe it would be beneficial to look around and see how other platforms solve the problem before putting in a lot of effort in any one direction.

So a couple of things to look at...
Starting with a really, simple UI from Ebay.

You cannot view this attachment.
From the top...
  • The wording says "Add photos" (not a button or link) - just a very simple, clear description of what happens here.
  • The X in the top RH corner of each image is good for a delete button.
  • The + sign enclosed in an empty, dash bordered box - a clear indication of where to add more photos.
  • So you just add and delete until you are happy, then Send. Any user can figure that interface out.
  • Style? It has none. Nothing fancy here. But hell it's effective.

Now let's have a look at phpBB which does something similar to SMF.
It has to be more complicated because of the additional functionality. But it manages the complexity quite well and does a reasonable job.
It starts like this...

You cannot view this attachment.
Then once you start adding...
  • The Add files button both adds and uploads
  • The attachment list is compact
  • They use the phrase "Place inline" - probably better than just "insert", but it could be improved.
  • The Delete button removes both the file and the code from the text message.
  • No previews of the added images. (there might be, didn't look too hard)
  • Has ability to add additional text comments - not sure how these are displayed - maybe mouseover.

You cannot view this attachment.
Preview looks like this...

You cannot view this attachment.
I didn't experiment much further. But definitely worth trying out.

Xenforo starts like this...

You cannot view this attachment.
After the first file, an "Insert..." option overlay appears and a trashcan to delete.

You cannot view this attachment.
Adding a second file and mousing over the "Insert..." of the first file, produces further options - thumbnail or full image - nifty.

You cannot view this attachment.
Choosing thumbnail inserts and previews it.

You cannot view this attachment.
So some good ideas there - also worth looking at.

Discourse doesn't have a separate attachment UI.

You cannot view this attachment.
You just drag and drop the images where you want them.

You cannot view this attachment.

I don't use any of the major social media platforms so maybe they have some interesting solutions too.
What's the point of all this?
We can only go so far with a mod. But if we look around and see how other people solve the problem, maybe we can design something simple, yet powerful, that will help the authors of the underlying attachment code evolve the attachment UI into a winner.

Arantor

@davo88 would you also like comparison screenshots from MyBB, Flarum, IPS and Woltlab? I have instances of those to hand if it would be helpful.

Advertisement: