Attachments - User interface suggestion

[davo88]

The ability to insert attachments is a powerful new feature in 2.1 - a big aid to effective communication.
But being powerful also means the user has more options and can make more mistakes.

We all want new members to join our forums, make it easy for them to participate and share their knowledge.
This post is a suggestion for a UI to help guide novice users through the attachment options and help them correct any insertion mistakes.

Experienced forum users may find this suggestion a bit wordy and cluttered. But there's a reason for that.
We want our novice, first time forum users to be successful on their first attempt at inserting attachments.
My experience has been that if new forum members have a tough time adding photos, they tend to dismiss it as "too hard" and don't try again.

We want to provide all the information they need to succeed right there on the screen in front of them.
No need to...

• Look up or read any help pages
• Know how the attaching process works
• Know or see any BB code
• Or even know what the word 'attachment' refers to

(Maybe the word 'attachment' is a bit outdated now that you can insert images within the text(?). 'Attachment' implies something being tacked on the end.)

Other admins will have more and better ideas than this. So please consider this suggestion just a starting point.
Please also note, the mockups below were done with really basic tools and are intended as rough sketches only.
The wording and button text could be polished up a bit.

The current UI

You cannot view this attachment.


Revised UI
We separate the 'other options' from the attachment process. They now appear as part of the main posting window.

The word 'Attachments' is replaced by a button - Add a photo or attachment
The button now includes the word 'photo' for those who are new to forum software and more used to sites like Ebay and so forth.

You cannot view this attachment.


Here are a few user scenarios..

User presses 'Add a photo..." button

On pressing this 'Add a photo...' button, a new window opens or maybe pops up, putting the user into attachment adding mode.
The posting window behind is slightly grayed out so we know we are in 'photo adding' mode.

The idea is you can switch back and forward between writing your text and adding the relevant images where you want them. The 'Return to post' button takes you back to the posting window to write more text or position the cursor for insertion of a file.
The drag and drop window is also made bigger to reduce the chance of missing the target and ending up with an error (see footnote 1 at bottom).

You cannot view this attachment.



User adds first photo
The user drops or adds the first photo. The top line within the window tells them what to do next. The four buttons at the bottom offer them the choices.
The text underneath the buttons, explains what the buttons do.

You cannot view this attachment.



User adds a second photo
If the first file is not inserted, and a second file is added, the files are just queued up in the same window.

You cannot view this attachment.



User inserts a photo and adds a second photo
If the first file is inserted, the insert step includes uploading the file. 
A thumbnail of the inserted file appears in the post at the current cursor position.
The attachments windows opens a 'Files Inserted' section at the top.

You cannot view this attachment.



User inserts second photo, adds a third photo
Here the second file is also inserted and a third file added to the queue.

You cannot view this attachment.



User inserts last added photo
Now the poster has inserted all files within the body of the text.
So all three attachments have been uploaded and the BB code has been added to the post.

Since there are no more images in the queue, two options disappear from the bottom row of buttons.
So the poster uses the 'Return...' button to return to the post and preview or post the message.

You cannot view this attachment.



Please note
I forgot to remind users they can drag and drop in most of the above sketches.
The heading for the 'Files in queue' section should have a reminder underneath it as shown in the last sketch above.


Footnote 1
What happens if you miss the drag and drop zone and lob it in the posting window?

Below is the posting window with some text. The user wobbles all over the place during the drag and drop or thinks he/she can put it straight into the posting window. This is what happens.

You cannot view this attachment.

Turning off the WYSIWYG editor, we see the image tags now have thousands of characters between them.
This would be one advantage of having a popup window for attachment adding operations. The posting window is inaccessible and the file can only be dropped in the attachment window.

You cannot view this attachment.

[davo88]

Any thoughts on this? Is it too difficult to code?

[Antechinus]

Revised UI
We separate the 'other options' from the attachment process. They now appear as part of the main posting window.

Not directly related to your main point, but re this...


"Return to topic after posting" is a Profile setting, which people usually set once and forget about. Arguably "Don't use smileys" should be the same. Most of the rest are only useful for mods and admins. Offhand I can't see why putting the attachment stuff first would be a bad idea. Put the (rarely used?) checkboxes last, and don't have more of them than are really required.