What to display for No Data state for a Table at the bottom of a form?

Question

Which is the best way to treat no data states for table?

For context, this is a table that appears at the bottom of a form. Users can fill in the info, then add some records into the table.

^{download bmml source – Wireframes created with Balsamiq Mockups}

VS

^{download bmml source}

I'm at a cross roads with another designer. I'm more in favour of the latter bottom solution since it is simpler and cleaner and provides a way to help the user along.

My colleague is more preference for the former since it provides the sense that there's an empty table there so you should fill it. I think he's thinking affordance maybe? Or some sense of "Nature abhoring a vacuum" that the behaviour he is expecting is for users to want to fill this table?

What do you guys think? Open to any other solutions as well here.

Answer 1

There's a lot of articles to be found about empty states.
Example

I think all articles will concur with your second example and I agree.

Designing for the empty state is not just about filling empty space. It's about telling the user about what to do.
Showing an empty table might confuse users. Some might know they have to fill that table, but other might totally overlook the 'add entry' button.

As you might read in some of the articles, it's also a useful onboarding strategy.

I've only heard about the effectiveness of vacuum or emptiness to entice people to fill it in text inputs. This was in a discussion about "placeholder, yay or no". It stated that keeping an input blank with an inset shadow will make the user want to fill it. I'm not totally against placeholders, just not as the alternative to labels. But I see how vacuum can work in this case.
Your case however...

Just google "designing for empty states" and let your colleague read some of those articles ;)