Tag Info

Hot answers tagged

25

Since this is a form, I would actually just provide two buttons inline to choose the image, and not a separate dialog or a set of radio buttons. I believe this is actually better (in this instance) than having a single image button which opens a dialog to choose the option to then choose your picture. If you're choosing from your computer, the button on ...


20

I would go with Dropbox's approach. 'Choose files' is clear enough to tell you the action it performs and concise enough to fit within two words. 'Select files' also works. When labeling buttons, try to explain what the button does. Are choosing files and uploading two steps or a single step? Since in dropbox's case, you choose the files and then press ...


14

I recommend not restricting to jpeg only: Social media sites (usually) rely on people creating profiles and becoming active on the site. If at any point it becomes a pain to create a profile, users won't do it. If they have only a .png, they likely aren't going to go create a .jpeg to create a profile unless there is a huge incentive for them to continue. ...


11

Drag & drop is absolutely an expected behavior to support. It's like asking "Should we support keyboard shortcuts?". While the feature may not be used by the majority of users, the ones that do use it really rely on it.


10

I think I would agree that one option should be more prominent than the other especially if there is a strong preference for one option. Perhaps something like this can work.


8

If you are concerned about the number of options being overwhelming, then you should consider the concept of progressive disclosure, where the more advanced features are generally hidden until specifically requested by a user action. That keeps the interface simple, but lets power user have access to the features they want/need. ...


7

To answer the last part of your question first: how uploading an image works on different devices depends largely on the support for and implementation of HTML5 features such as the File API and file form input fields. On iOS, for example, a prompt appears asking whether the user wants to take a picture with the camera or upload an existing file (see this ...


7

The default file uploading element can be confusing for non-power users, who might be seeing it for the first time. You should redesign it to something more user-friendly, which tells the user what he's doing exactly - like Facebook: there's a link saying, "Upload pictures", and when you click it it shows the OS window for uploading files. Also, looking at ...


6

Our very own Stack Exchange has this implemented relatively well (just click the image icon in the toolbar above the answer field): Though, I would just improve the switch between the 2 modes by increasing the clicking affordance of the inactive method (right now it doesn't look clickable). The key in this patterns is having some semblance of tabs: they ...


6

I like using link UI conventions in this case, because that is what the user is doing... linking. download bmml source – Wireframes created with Balsamiq Mockups


6

Are users genuinely confused by how the file input element works? Only you can answer that specific to your users. You could try attaching some behind the scenes logging to record the number of times someone chooses a file but then doesn't save the form, and especially if they choose a file, navigate away without saving, and then they come back to ...


5

I think TinEye's approach is great, even though it does take up a lot of space.


5

My company's desktop software implements multiple file selection. Like you noted, most users miss it even though the title bar on the File Open dialog says "Select One or More Files". However, our power users really appreciate the feature and can't imagine not having it.


5

Choose or Select are equally descriptive terms. Depending on your users, you could also choose to be more elaborate with something like Select files from your computer


5

I'm going to be the wet blanket and suggest that there may not be a big benefit. The fact that these are being used more often is more about changes in technology. We can do it this way now, so let's do it this way. Yes, drag-and-drop is not a new concept. It's been part of our systems GUIs for 4 decades. But note that the process of uploading a file via ...


4

Your sample guy doesn't look like he enjoys following instructions... Don't use a random sample, use a dedicated picture with annotations (e.g use a generally bright photo, and circle the important elements in red, and label them): You xhamster.com your username Use a few smaller ones to show common mistakes, e.g. like that: Rationale: People don't ...


4

In my opinion 'Choose Files' or 'Choose File' (for single file upload) is the best way. as said it's clear. and it isn't large. My experiences with long labels for upload are that people ain't going to read what's on the label. So limit your words to like 2 instead of 4 of more. (Choose files to upload) for example.


4

I just tested uploading a header photo on Twitter. It uploads automatically after I select the file I want to use. So there is no submit button. Google does this for avatars, as does Facebook. If you can pull that off with your avatar upload (so the user can see results before having to click "submit"), that would probably offer the best user experience. ...


4

As a user, I hate running into limits after I've invested time. For example, say I've uploaded 50 pictures thinking I can make a slide show with all 50 pictures. If there is a limit of 10 slides, and I don't discover this limit until I go to add the 10th or 11th slide, I'm gonna be unhappy. So, my first suggestion is to indicate from the beginning what the ...


3

Yes, the need to upload an image to a 3rd party server, then going there, retrieving the URL, going to your site and pasting it there - is annoying. It makes you work much harder to share an image and many users just decide it's not worth the trouble. However, this doesn't necessarily mean you need to develop the whole image hosting infrastructure by ...


3

I was very pleased with how Pinterest handled this conundrum, but I thought it could be improved a little (and made more generic). I created the below wireframe for an internal process, and would recommend it for you, too. Wherever it says "Product," substitute "image" or whatever element you intend. This wireframe was for a specific form to add products ...


3

While I don't like having to click to choose an option, I think it's the lesser of several evils. Google does a good job with their image search input:


3

Other way is to show clearly what is happening , like showing the percentage of uploaded data or a good progress bar and time remaining. This makes most of the users to wait for it and a javascript popup is always safe to keep for accidental navigation.


3

I'd like to add that behavior of the control is prior to the wording. There is not one true best wording; the wording depends on the behavior and the purpose; and there are many different ways to approach this. Assuming the user first selects the file, then submits: Do you want to support selecting several files, before submitting? Will a user be able to ...


3

YES, people get confused! For a change, I am honored to answer with some real evidence: During my last usability testing, a significant amount of people got confused. They were sure they uploaded the file, but in reality they have just chosen the path, and missed the "upload" button. Two major issues generated these results: Uploading files is done in a ...


2

A recent blog from Zurb talked about this issue on Facebook. Have a look at it, http://www.zurb.com/article/515/podcast-of-julie-zhuos-talk-on-how-facebo Problem: The team found that of 85% who uploaded a photo would only upload one photo. Solution: The team thought perhaps people don’t know how to hold down shift and select multiple photos to upload. ...


2

Personally I think WordPress's method of uploading is fairly intuitive, i.e the directory structure (Year/Month/), with a plethora of options available after uploading, size, float, style, alt...etc. ModX CMS uses a similar fashion whereby you have one resource browser, and the user may create additional folders if required, or just upload to a central ...


2

Two possible options (that avoid an additional selection of the type of input) are: Selectively enabling/disabling the unused control When the user fills in the URL field, disable the file upload and vice-versa. Here it is important to clearly communicate the either-or relationship and give the user an clearly visible way to change his mind at any time. ...


2

Definitely this is something that can be confusing for users. I would separate the two halves of the pane - with a divider between image and details, thus making the 'Update Profile' button more clearly related only to the fields. Yes, immediately upload and display the picture, and immediately delete the picture as soon as the delete button is pressed, ...


2

One thing I personally stay away from is putting both options equally visible on a same page. Speaking generally, I'd say first determine whether from your or the point of view of your company, one option is more desirable than another. Do you expect one option to be more frequently used than another by your users? Unless, your and users points of view are ...



Only top voted, non community-wiki answers of a minimum length are eligible