Cleveland Web Design by Designing Interactive
April 8, 2008
Designing Data Collection Forms
By: Josh Walsh in User Experience
When designing a new web application, I wrongfully turn my brain into data collection mode. I determine what data entities I need to collect (people, orders, products, etc…), what fields I need to collect (name, sku, weight, etc…) and how to most logically group everything together into a usable interface. This process is all wrong.
Often I ignore, or worse… neglect, to account for the business procedure that is in place to actually collect and account for that data.
Let the Process Define the Workflow
When I begin developing a user interface I often begin by segregating my design into show, create and edit screens. It’s the de-facto CRUD standard and definitely works well. However, there are many times when this can be improved upon. Data is changed in many ways throughout an application and not just in a “create” or “edit” mindset.
Interfaces should be task oriented more than data oriented. The persons workflow should be defined alongside the data, rather than the data defining the workflow. Your design is a means of communication between the people using the system and the data you are collecting.
Don’t let your ego get in the way of a great design. Ask the people who use the software what they think of it and what they would do differently. Take a look at their paper forms and the workflows they have created for themselves. Gather this information, play with different ways of designing the users experience.
I keep an 8′ long whiteboard in my office for just this purpose. I draw out workflows, data and UI concepts before I ever touch the computer. Here’s a really low quality photograph of my whiteboard as it stands right now in the middle of this process.
Bad vs. Good
Here is one of my favorite examples of a bad design which negatively impacts workflow.
Here is an example of how I fixed this workflow problem for Simpli5 (Shameless Plug). The way we represent the data, and what data we collect is slightly different - but the purpose of the page remains the same.
Comments
Dana Kashubeck » April 8, 2008
Great post. I’m actually in this process all the time, as data gathering is the main function of the company I work for. I’m still learning, but I am totally beginning to see that our forms are all wrong.
We, too, generally look at the data, the fields, and logical groupings. I’m learning to look at it from the user’s standpoint and rework the forms to fit the user’s process.
I loved seeing the pic of the whiteboard. So often you see the end result and hear the reasons for the decisions made, but you rarely get a glimpse at the process to get there. This is what I am really interested in. I hope you post more.
Nate Klaiber » April 8, 2008
Excellent article! I think too many people get caught up in the ’scaffolding’ stage that they forget to think about how people actually interact with their data. If you are constantly thinking CRUD, then you are limiting yourself.
I think it goes even beyond just the basic crud and associations, but how you can gather and smart format the data without getting in the way of the user. I despise forms that don’t tell me the format they need (or need a ridiculous format) - when I know full well that they could format the incoming data to their needs.
I agree with what you have said 110%.
Josh Walsh » April 8, 2008
I couldn’t agree more. Things like improper formatting on phone numbers which fail validation drive me bonkers. A whole post in itself.
Thanks for reading.
Joe F. » April 8, 2008
First off, awesome article man! What little form design I’ve had to do in the past, I always try to think of logical ways of grouping/laying out the data. Makes it much easier to navigate the form and easier for the user to know what goes where.
What does the form for changing/editing data look like in your second example? Is it all edit-in-place or is there a separate page for that? I’d be interested in seeing that!
Bridget Stewart » April 8, 2008
Excellent article. Really fits with what we were discussing last night about processes for establishing an intuitive user interface. Good read!
Josh Walsh » April 8, 2008
It’s kind of a mix of inline and some page changes. Depends on the context, and I think will be quite intuitive. I’ll post more when I have more to show.
Danny Sedor » April 8, 2008
Excellent Post. I all-to-often find myself in “Data Collection Mode” as Josh has described above. It’s easy to ignore the standard. Thanks Josh!
Joseph James Frantz » April 8, 2008
Who the hell is this Danny Sedor guy. I read this blog all the time, and it’s delightful. Then I get to the end and the comments by this bot ruin it. I mean I swear to christ this guy posts on every page! WTF.
Josh Walsh » April 8, 2008
Ok, come on people. Let’s not be nasty. Everyone is welcome to read and participate here without being harassed.