Need HELP on designing UI for a Grid View or List View dashboard

[M_L]

Hello,

My organization has developed a great app in Airtable for our really unique use case (context at the bottom). The functionality of the app is really, really great. The user interface design and usability is poor and is now causing problems, and I'd like help improving the user interface.

The biggest problem is that we have so many different datapoints that we need to access, that our "Grid View" tables are too wide, so we can't see all the information at one time that we need to see. 

How can I transform my Airtable user interface into something that's really helpful and usable? All the data is there, and it works well, but the UI is too complicated. Does anyone have recommendations, best practices, or resources to help me understand how I can do this?

I also considered using "Record Viewer" interface, but I need the "high level view" of all records, not just "zooming in" to one record at a time.

I'd love to use List View and have a "2nd Row" of fields I could add underneath the initial line of a record so I wouldn't have to scroll to the right, but I don't see a way to do this.

TIA,

ML

Context:

My organization is a nonprofit that offers counseling appointments to individuals. We have developed a really great app that brings together a number of systems to 1) schedule volunteer counselors, 2) intake guest applications, and 3) schedule guests with counselors. There are a lot of logistics, and not having a good overview of these appointments (1 month at a time, for example) where we can quickly see the status of a month's appointments with some granular detail is becoming problematic.

[Pascal_Gallais-]

Hello,

I think you could build an interface starting with a list view dispalying only the most relevant fields. you could then add a link to a record review page to see the details that you want to display for a given record. Hence, by clicking on the "zoom icon", your users would access all the granular information that you want to display.

Regards,

Pascal

[M_L]

Thanks for your response @Pascal_Gallais-, could you clarify the 2nd half of your response? How do I add a "record review page", and how would I generate a link for it?

Thanks,

ML

[TheTimeSavingCo · Accepted solution]

re: I'd love to use List View and have a "2nd Row" of fields I could add underneath the initial line of a record so I wouldn't have to scroll to the right, but I don't see a way to do this.

Yeah, that only works when trying to display data from another table, so if you're trying to display lookups this might potentially work.  If not, @Pascal_Gallais- 's solution's your best bet

@Pascal_Gallais-   What do you think of using a List Interface for this instead?  That way we could turn on the setting to allow users to click in to record details and set which fields the users see there?

[Pascal_Gallais-]

@TheTimeSavingCo 

Hi Adam, you are right that's also a good option. I always prefer to link records to a single record review interface because i beleive that is gives more flexibility on how to display the information. 

Regards,

Pascal

[Pascal_Gallais-]

@M_L 

Hello, here are some screen captures to illustrate both option (sorry I am using a french database for these exemples).

Here is a list interface with 3 hierarchical levels:

Level 1: Car manufacturer group

Level 2: Brand

Level 3: car model

Option 1: when I click on a car model line, It opens a modal with more details:

Option 2: when i click on 🔎 for a given line, it opens a new interface:

Option 1 setup

Open the list interface edit mode, select the list and activate the option "click into record details":

Open the settings for the level that you want to display the details for:

Select the fields that you want to display:

Option 2 - detailed interface

Go in the edit mode and add a "blank layout" to your interface:

Hide this layout (so that the only way to display it is to click on 🔎 for a given line within the list)

Start by adding a "record peaker" element in the blank page:

Connect it to the source that you want to detail and select a record:

Design you page as you wish.

Publish this page, and copy the address up to the = sign:

Go into the table that you linked this page to and add a button field:

Set the label (press windows and ";" if you want the label to be an icon)

Formula is the address that you copied previously with & RECORD_ID()

Go back to the interface edit mode and add this new field into your list.

Regards,

Pascal

[M_L]

Thank you @Pascal_Gallais-  and @TheTimeSavingCo . I went with a List View interface, and created the magnifying glass 🔎 button that linked directly to the Interface Record in a List View Interface. This is great! 

I do have one follow up question, is there a way to make the 🔎 Magnifying Glass button only appear if there is a hyperlink in the table? 

This is a base of "Counseling Applications" which is linked to a "Sign Up Sheet"... so there is only a linked record (and thus there's only a hyperlink and magnifying glass button) after someone has signed up for a time slot. I was trying to enter the formula in the Button field that's something like "IF({Session Time},"","airtable link")" but it doesn't look like i can put formulas in the URL field of the Button column :).

Thanks for getting me this far. If you have ideas for this subsequent problem that'd be great.

-ML

[Pascal_Gallais-]

Hello,

Not to my knowledge, but you can do the following;

"Zoom_URL" field is the URL for each "record detailed page". Field details points to this field:

Hence, If "Zoom_URL" is empty, the icon appears as inactive with a "pale color"

Regards,

Pascal

[M_L]

Thanks! That's very helpful. The interface has landed in a great place, and the team likes it a lot compared to navigating tables and views like we did before.

-ML