Launched: Redesigned Table Visuals and Interactions

We’ve been doing a lot of user research the past few weeks at Coda. One thing we heard was that while it feels exciting to build a powerful doc, it can be significantly less exciting when your friends and colleagues can’t figure out how to use it with you.

We’ve been testing some tweaks to tables and are excited to share some updates that significantly improved table visuals and users’ understanding of how to interact with tables.

Easier to select, reorder and delete rows

Previously, your doc collaborators had to know that they needed to click on a row and move their cursor to the left to expose the drag handle, which allows for drag-and-drop sorting and deleting.

Now, the “handle” is exposed wherever you hover on the row so that it can be accessed more easily and intuitively with a single click.

Easier to expand rows

You might also notice that we’ve updated the look and feel of the Expand Row button.

Previously, it blended in with the rest of the table interface…

…but now it looks and feels more like a button!

Easier to add rows

We’ve also made it easier to add rows to collaborative tables. Previously, you had to know to either hit Enter a few times, press Control + click on a row or hover your cursor in juuuuuust the right place to add a rowーespecially if your table had grouping.

We’ve made the option to add a new row much clearer.

Tip! If you’re working with Coda pros who won’t need this more-visible prompt, and you’d like to consolidate space in your table, simply right click the Add Row button to toggle it off. To turn it back on, go to your Table Options > Table display and the “Show add row button” setting.

Improvements to table visuals

We didn’t just improve the interactions for tables! We’ve also improved the visual designs for how you select rows, columns and groups. Say goodbye to the old blue borders…

…and hello to a more minimal grey selector.

Just like it did for our early testers, we hope these design updates make it easier for your colleagues and collaborators to understand how to use tables and make your docs look more beautiful to work in!

32 Likes

I love every single one of these updates. I have many collaborators in coda and manipulating my tables while they watch on zoom has been a huge point of friction. I’ve developed some muscle-memory to overcome many of the BEFORE fixes and I am thrilled that I can turn off the extra spaces in the AFTER for a slim look.

Many of my collaborators just dip in and aren’t super invested in the platform so they won’t even notice but I am excited to show these changes off to closest advisors. Huge kudos listening to users and continuing to build so dynamically for us. :pray:

8 Likes

Wow.
It’s the small things that make a huge difference. Thanks!

Quick Question: Recently the keyboard shortcut for Expand a cell (Shift + Command + E) stopped working. Has it changed?

1 Like

Wow. It’s the little things that make a big difference—Question: Recently the shortcut to expand cells (Shift+Cmd+E) stopped working. Has it changed?

1 Like

Hi SiNing – that shortcut ought to work on Macs (Alt+Shift+E for Windows). It still works for me, but there are a few cases that might cause it not to work. Specifically, I believe it has to be a text cell and also be within a text column. If something is mismatched, say a text cell in a column that you’ve since changed to a number column, the shortcut will not work for that cell. There are a couple other cases where we prevent it, such as URL reference values and mobile.

If you’re not seeing it work on a text cell in a text column, let me know and I’d be happy to look into it (and fix it if there’s a bug there).

2 Likes

Thanks for taking the time to share your encouraging feedback Nadia! And welcome to the Coda Community!

1 Like

Thank you for this! It seems way better!

Now, I would love better group tabs (colors options) and options.

6 Likes

That grey selector is :ok_hand:t2:.

3 Likes

Such small changes that make so much more sense. Great job!

4 Likes

Hi Zack -

This may not be the best place to post this, but your intro caught my attention: “One thing we heard was that… it can be significantly less exciting when your friends and colleagues can’t figure out how to use it with you.” I just had a bit of a painful experience that I thought I’d share.

I see three categories of Coda users:

  1. Makers
  2. Coda Document Users
  3. General Public

Category 3 is for information to be shared very widely with folks that don’t have an account at Coda (and may not even realize they are “using” Coda).

I created a document to track drivers for a friend needing cancer treatment daily. I used the calendar table view. When I was done, I published the document to all the drivers involved and e-mailed them a link. None of them have ever heard of Coda. Here’s what happened:

  1. Somehow I did something wrong and none of them had access. I thought I clicked the “everyone with link can view”. I even went back and it showed clicked. Probably user error on my part. In any cases, I had emails from many, “I can’t see the schedule”, requests to join Coda e-mails, etc. Argh…
  2. Once I worked through this, then I find the calendar view of the table doesn’t work on mobile. So, they see this very non-user-friendly table (I hadn’t organized it by date since I was using calendar view).
  3. So I re-organize the table columns, make the date the key column and put it first. I turn it back to calendar view for folks that are coming from non-mobile devices. Then, here’s what I see on my phone:

image

Notice the date column is shown twice and there is no driver column. Argh.

I think this is a bug. If I go to a computer and simply change the display to Table, and then go back to a mobile device, I see what I would expect:
image

  1. Finally, I wanted to publish just the schedule page (and not the page that has the list of driver names on it). But it appears I can only publish the entire document with all pages.

I bet all of these are already on a list… I bring it up, though, as a data point to consider the number 3 Coda user category–those that don’t even know they are using Coda. For many of my use cases, this will be the easiest way for me to increase my use of Coda. I.e., where I can confidently publish information from a document to a wide group of people and know they will have access and be able to see exactly what I see.

By the way, let me close by again saying nice work. I see a VERY bright future for Coda. I’ve imagined building something just like it since the first time I used Microsoft Excel!

Eric

2 Likes

Thank you for this valuable feedback, Eric! We’re investing a lot in making sure Makers, Editors and Viewers all have positive experiences in Coda, and spending a lot of time thinking about how we can make it easier for people who make awesome solutions in Coda (user type 1 in your write-up) to share them as docs, apps, websites or whichever “shape” makes the most sense for their collaborators (user type 2) and the general public (user type 3).

As a PMM at Coda, I really appreciate the way you laid this out and that you took the time to share this feedback with us.

More than anything though, I hope your friend’s treatment is going positively, and that they and all of the amazing volunteers in your supportive community are safe and well!

3 Likes

Thanks, Andrew, for your concern. He is handling the treatment well so far, although he is only getting started. Things have come a long way in cancer treatment so we have high hopes.

I hope I wasn’t too negative in the post. What you guys have embarked on is an incredible journey and you’ve made excellent progress so far! I’ll do my best not to just “complain” about what is not yet done…

Eric

Not too negative at all! We really appreciate the feedback, and I hope we can help even a little as your community rallies around your friend. We’ll be cheering them on too!

1 Like

I agree.

Would really like to push for the non-coda users workflow to be improved.
Right now it is super easy to get confused and also worried that you delete some rows, columns or data (that is the feedback I get from non-coda users and clients).

But overall, I really like the product, but the example above is something that would greatly improve our day to day work with Coda.

Thanks,
Anders

1 Like

Hello :slight_smile: I’m not sure this is the right place to ask but It’s possible to remove the “Add new row button” also in the Detail View of a table? (the blue one)

It can create a little bit of confusion sometimes :slight_smile:

Thanks :slight_smile:

1 Like

I can second what @Mario mentioned! Just bumped into the same issue with shared docs where “add new buttons” appeared in detail views.

1 Like

Hi @Zsolt_Bako :slight_smile:
Today i’ve resolved this “little issue” with the locking feature blocking the “Add rows”

Screenshot 2020-07-22 at 13.07.11

If you’re in hurry this can help :slight_smile:

Update: this effectively block users from adding new row, i have to understand if i can lock one page and have the data in another page…

Hi @Mario,

Are you wanting to just hide the “Add row” button on detail view to make it cleaner and easier for users in your doc or are you wanting to prevent them from being able to add rows all together?

Locking can prevent them from adding rows and the locking settings are on a per-page basis. You can set a default that will apply to all pages or you can set them for individual pages. Lets say you have table views on two pages, one page has locking and the other does not. Users will still be able to edit information on the page without locking. This is useful if you want to have a display page and a data entry page.

I am not finding that the “right click on add row to make it go away” functionality is working. What I get is the the hover item saying I can do that appears and disappears, and I get a new row. (Mac, Safari)

Hi @BenLee, thanks for your answer
I’d like to just hide the button, and i need them to add new row but once with a button because this is a personalized view for that user :slight_smile: (so they should not add new rows but use instead the one it’s already there)

1 Like