Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

In an intranet UI, when creating or editing a news post, the user is able to attach a file to the post.

This is done by selecting the file which can be found through either:

  • a file name search directly in the input field OR
  • through selection from a list displaying the contents of the upload folder OR
  • by uploading a new file

When editing the news post later on, the input field still displays the file name and allows for removal or replacement of the file attachment.

It is easy to find examples of search-as-you-type - the most obvious is of course Google Instant. However, a combination of search and input is harder to find - actually, I haven't found any good examples...

An initial (however, insufficient) mockup of the UI might look something like this:

Initial mockup of UI

The problem here is that users might interpret the dropdown button as a required part of the search process - even though, in reality, it's an alternative. We want to encourage the user to using the search-as-you-type over the select from folder feature, while preserving both options.

It probably wouldn't help much by placing the dropdown inside the input field like this:

The UI mockup with the dropdown inside box

Taking these things into consideration, my question is:

  • How to best design such an input field with embedded search?
share|improve this question
    
to clarify: the attached file can either come from a common library stored on your servers for which the look-ahead function covers or from the local environment of the user? –  colmcq Sep 12 '11 at 13:01
    
The select file option covers files stored on the server. The upload file option enables the user to upload a file stored local on his/her computer to the server. The "look-ahead" only works on files on the server. –  agib Sep 12 '11 at 13:58
add comment

2 Answers 2

up vote 3 down vote accepted

I would be inclined to keep them separate. They are different functions and the down arrow does not explain the distinct functionality very well.

Also: overlap between 'upload file' and 'select file', which one could argue amount to the same thing, namely, 'selecting a file to attach with a post'.

I would do this:

enter image description here

and even then you might want to play with the ordering of fields as it might be more likely that the local upload is the more common user behaviour.

Hope this helps and that I havent got hold of the wrong end of the stick!

edit: I've missed off the field submit to the right of the predictive field by accident

share|improve this answer
add comment

I would keep the two separate, but in the same group, because of the different location concepts the user has to grasp.

Mockup example:
mockup example

ux.stackexchange.com is also a good example of this separation of concepts:
ux stackexchange example

share|improve this answer
1  
heh. I can safely say we have a consensus on this thread! –  colmcq Sep 12 '11 at 13:36
    
yeah, definitely, i just missed you for a few minutes. after i finished my answer i saw yours already here! :) –  herkulano Sep 12 '11 at 13:40
    
yeah, it's a very obvious answer tbh :) –  colmcq Sep 12 '11 at 13:46
    
i agree, again! ;) –  herkulano Sep 12 '11 at 13:56
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.