2

Consider the following data:

Operating System: Windows, Linux
RAM: 1 GB, 2 GB, 4 GB, 8 GB
Hard Drive Space: 500 GB, 1 TB
Brand Name: Dell, Lenovo, HP, Gateway, Acer

Each row has different number of values. What would be the ideal way to ask for a user to input both the row headers (i.e., the user should be able to input 'Operating System' or 'OS' if they want to) and the row values?

Placing input elements in a table format seems ugly and is somewhat misleading as each row does not have the same number of values/columns.

Improve this question
1
  • Can you give us more context? If they can enter anything they want into both the label and the data area, is there any strong reason to keep them fields in the first place? Could this instead be simply a large freeform text area?
    – DA01
    Aug 15, 2015 at 1:57

2 Answers 2

Reset to default
1

I agree with Xabre that you seem to be designing from the perspective of the database rather than the user. Nevertheless, the following might be an appropriate solution.

Start from the display of the data, showing all possible attributes:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

When the user clicks add or edit, the data display gives way to an in-place form to add or edit the data. The form for each attribute can be tailored to the type of data.

This communicates clearly to the user what the effect is, the whole bag of data doesn't have to be entered in one massive, brittle operation and the display of missing data triggers the user to action.

Some further considerations:

  • If there are many attributes, and most can be left empty, a special add attribute option can be added using a dropdown or combobox to find the available attributes.
  • If all data must be entered before the object can be used, I would recommend a special "unfinished" state for objects that have not been completed yet.
  • If attributes require a form that is too large to be displayed in place, a modal dialog with a greyed out background can be used.
Improve this answer
0

What's the exact purpose of doing it with free key/value types? It would be a mess to search in it... perhaps the best design here is no design and simply using a textbox with a basic markup e.g. everything before the ':' is in bold, everything after is not...

Always think about the problem the users wants to solve, the goals he has in mind.

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.