1

I have a page with multiple groups of text fields in various (in-page) tabs which the user has to fill out. One of those groups is a list of chemical reactions. The species inside those reactions need to be used in the other tabs to fill out those text fields, though those fields are not limited to a single species:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

I need some way of facilitating the input of species into the other tabs. Currently, I have something like the following:

mockup

download bmml source

Unfortunately, I don't really have a good place to put the box of species (the upper left has a number of buttons in it, which also need to be accessible all the time. I could allow for the box to be dragged around, but I'm not sure how to make that obvious to users. I've considered a number of different options for input: using an autocomplete list or some kind of popover that appears when the text box is selected. However, it is useful for the user to see a list of the species even when a text box isn't selected.

I'm really not sure of the best method to take here.

Note: I'm currently using the bootstrap framework, so a native (or natively styled) option might be preferred.

Improve this question
7
  • Are the species names easy to type out? It can be a lot easier to type short letters than to drag and drop or insert them.
    – tohster
    Mar 16, 2015 at 16:01
  • @tohster That depends on the user, but the names can range from a few characters to fairly long (20 or more characters)
    – Daniel
    Mar 16, 2015 at 16:11
  • Thanks @Daniel, one more question: how expert are your users? Is this a system they will use once a month, week, day, hour or minute? There is a speed vs learnability tradeoff with these complex interfaces
    – tohster
    Mar 16, 2015 at 16:25
  • @tohster Probably a few hours once every couple weeks for most users, but much less for some and the most prolific users will probably be using it for multiple few hours several times a week.
    – Daniel
    Mar 16, 2015 at 16:38
  • Question: How many species are used for a typical series of reactions? Your example shows 5. Is this typical or is it more likely to have 10+
    – nightning
    Mar 16, 2015 at 19:49

2 Answers 2

Reset to default
1

This is a business/technical and not a consumer app so I'm going to assume that effectiveness is more important than beauty in the UX.

  • Improve the visual flow. Currently the workflow has users starting from the top left, working down the fields (flipping to the right of the screen to add species), then going to the bottom-right to submit the form. This zig-zag flow is confusing.

    • Assuming you want the fields to be filled out before submit, just lay out the fields top to bottom, and put the submit button below the last field so there is a clear vertical flow to the form.

  • Provide both click and typeahead options. The species can range from short to long words, so alternating between keyboard and mouse to click and type can be really annoying. Allowing users to enter species by typing (with autocomplete) and also click on the species palette provides multiple paths to getting the job done.

  • Avoid putting the species palette on the far right. This may look cooler, but on today's wide screens it can be annoying to move the mouse the extra distance to click on the species (see Fitt's law).

Hope that helps.

Improve this answer
1

Assuming in most cases you have a smallish set of species.

Consider something like a wysiwyg editor:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

This pretty much supports everything tohster mentioned. Your species list is right next to the field for easy access. Submit / Action buttons can be placed right below your fields. The typeahead (autosuggestion) is very important if you have a large set of species or for power users to enter things quickly.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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