Not a brief post, but thereโs a lot to touch upon. There will be further posts, as we develop, release and get feedback, but we wanted to let you know some things weโre up to. Still a lot in the works, and iterationโฆ
Weโve been researching and working on some patterns for desktop apps; these will start being released in the Preview Program, giving us some extensive use across variety of apps, and iterating along the way. We asked the community for some desktop use cases earlier this year as well.
The major desktop elements are discussed below:
Whatโs not in motion at this time:
Hereโs a high level overview and concept sketches of what weโre working on, and will be coming to the preview program:
When AppSheet is being used on a desktop, weโre exposing the app views as a visible navigation rail on the left side of the viewport.
Besides being present at all times, weโd like you to be able to work with this in two modes: Collapsed or Expanded. Hereโs a sketch:
When collapsed, youโll see the icon associated with the view, and on hover youโll see the view name in a tooltip. Collapsed means you can have more space dedicated to the content pane. Either mode is scrollable for apps with lots of views.
If you donโt show an app icon in your app bar, youโll see the app icon (and the app name) when you expand the drawer, similar to what you see today on mobile.
When expanded, it resembles the mobile navigation drawer you see today, except it occupies persistent space, i.e. the menu links are visible.
Following a more standard desktop web app pattern, you wonโt see the bottom app bar on desktop.
Tab nodes โ Top of nav rail
This means we map the visible tabs on mobile to the top of the view list in the sidebar, putting them in the top position in the list:
Another change weโre making is switching the position of the menu bars and the app logo (if you use one), so the menu control is directly aligned above the navigation links. Pressing the menu control toggles between Collapsed and Expanded states.
Weโre starting with detail views, as itโs one of the most important and potentially information dense, and currently itโs designed primarily for mobile.
Weโre looking to use the available real estate afforded by desktop to break out the content into sections. These sections can be laid out across columns.
Letโs look at the basic structure:
Starting from the top, youโll see a a common pattern when you drill down into a detail from a collection: a (hierarchical) breadcrumb bar:
This means thereโs one click up to the collection, and if a user lands in this view from a link, itโs clear what collection this instance belongs to.
The use of Overlay buttons (aka FAB: Material Floating Action Buttons) is a fairly standard mobile pattern. The core idea is that itโs for the ONE most important action, but AppSheet lets you add multiple.
Translated to the desktop, Material originally kept the floating overlays in the bottom right of the viewport, but after testing and research, transitioned to the top app bar, because of discoverability issues and content overlay. App creators weโve interviewed have brought this issue to our attention.
Right now, weโre starting with having the primary system action button, Edit appearing as a contained button with a label.
The remaining overlay buttons take are displayed as secondary action buttons, and other system actions (delete, sync) remain as icon buttons, and all buttons will have tooltips as well:
Hereโs a sketch of how we are structuring the top right of the app bar for Detail views:
For these, weโre moving to dedicated buttons for navigating sibling records. If you have to skim back and forth between records, the buttons are in a stable place, and close together. Weโre also exploring (future) keyboard shortcuts to aid in sibling navigation: This can aid in quickly traversing records, and is effective for power users.
You may have seen this pattern before: Weโre currently using it for detail views in dashboards:
Consolidating interaction patterns when possible is part of a larger push.
Right now, detail views form one long strip of mostly undifferentiated content.
Weโre working on a way of grouping these into the following types of sections.
These sections can be ordered, and sections can be arranged into columns.
So a layout on a browser can form up to 3 columns, containing multiple sections.
Hereโs an sketch of a detail view with 1. a primary section with an image and some overlay text, a medium amount of secondary properties, and 2 inline lists:
Consider a โprimaryโ section (name may change for clarity) as including some of the following:
There are many permutations of headers, images, and both combined, currently in apps. There are combination of headers and images, just headers (up to 6), or the card layout.
Right now weโre giving any and all of these prominent placements in the upper left of the content pane when multicolumn layouts are in effect.
Together a primary section of content allows you to:
Next are the remaining properties (columns) of the record. These can have tremendous variance: we have customer apps with anywhere from 5 - 70 plus properties represented in their detail views.
Tradeoffs: There will be some potentially large height differences in sections, simply due to how many properties a section contains.
To start with these will default to a single section, and we want to empower you to break these into more groupings, and weโd like to allow you to use the SHOW type header as one means of doing so:
The third section type is inline views, such as ref lists. These form other individual sections.
Next we have our collection views. Starting from the top:
Another common pattern is a visible search field. With large lists, a persistent field with a visible label provides a quick way to find items.
The other aspect is that the filter icon is visible, and can be accessed with a single click.
We notice that app creators are configuring interactive dashboards, setting up a table or similar collection, and adding a detail view. This is recreating the common collection - detail pattern (aka split pane or two-panel selector).
Weโd like to allow app creators to configure a collection view to accommodate a split pane, no dashboard creation required. This will facilitate working in context, and avoiding jumping from collection to detail and back to collection. Hereโs a concept sketch:
Youโll see this pattern in Gmail: users can invoke the split pane from an icon control, and a single click allows for viewing details.
Iโm displaying a data table for the concept mock, but this pattern can apply to other forms of collections (cards).
Itโs a long post, but we wanted to bundle this together to give you a heads up, and break down some of the core concepts and patterns. Thereโs a bunch of details weโll dive into more in other posts.
We put out a call for desktop views and use cases earlier this year, and have gotten some excellent examples of dense data displays. We look forward to receiving more as we go forward.
Stay tuned for more specific detailsโฆThereโs a lot of tuning to do, big and small.
Yes!!! I confess
@Mike_Moss, How to put millions of hearts?
Looks great! Love the proposed changes to the detail view!
This is going to be awesome! Iโm all in!
Sorry, I missed this. I hope I can help now.
Man, this is sooo important for me. As a tilling window manager linux user I feel really stupid clicking everywhere in order to make simple actions like selecting a certain record, openning the edit form, saving the forms, etc. This should be top 3 on priority list.
Thanks for the hard work!
Thanks you for all the works you and your team made for this thus far. This is what I have been waiting for years and years now.
As @MultiTech_Visions mentioned, there are so much detailed information, to grab those, only our hands on testing with new UI will tell all the story. Looking foward to testing through preview programme.
Among others, the multiple column settings for detail view is awaited. Detail view and Form view is kinda of sibline relationship, from my point of view, so I m just wondering the same new concept will be applied to form view, i.e. to split the sections into muliple column on Form View as well, is it in your plan and roadmap?
@tsuji_koichi weโre going to be tackling form view at a later date; and thereโs lots we can do there too. I donโt have an exact timeline for forms at them moment.
Hi @Mike_Moss thanks you for your clarification, all understood.
Wowwww !!!
Thanks so much, This will be a big improvement.
I hope there will be something like this about pdf reports.
I hope the split pane will be available on tablet landscape mode as well. It will be really useful.
I think a lot of other changes will look good on tablet landscape mode. Not only on desktop.
Wow โฆthe much awaited thing is hereโฆ Hope this keeps me hooked to onto appsheet forever for my business app. Kudos Team Appsheet
Thank you! When this is released, it will provide a higher UX for people who use AppSheet at their desks.
Iโll check the details when the Preview is released, but I personally feel that it would be easier to use if the System Action and Slideshow UI were replaced.
As you know, Sync Action has a special meaning in AppSheet, and it would be more natural if it is always displayed on the right side of the screen without being affected by the placement of Costum Action.
Maybe itโs because Iโm only using AppSheet now!
Love the coming desktop changes. Thank you for the hard work.
These recent UI updates are exciting!
Mike presented you with multiple changes all at once.
In terms of roll out to the Preview Program, weโll be rolling changes in stages as they are available. So for instance, the left nav menu will become available before the Detail View for desktop. That also means that an app enrolled into the Preview Program may not fully as Mike showed during this process.
Weโre proceeding this way because we know we cannot think of all edge cases and because weโll receive feedback faster.
Thanks @Arthur_Rallu
This changes coveres bunch of items and we need to review broad areas to see how new UI goes.
Releasing items piece by pieces should be welcomed by us to address new view one by one to provide feedback. We would like to hear your annoucement further once we are able to reach out to it through the preview once they get ready.
thanks again.
This is so welcome!!!
@Mike_Moss are yโall planning on taking on multi column form views as well?
WOWWWWW
Love it! been waiting for years for this.
This is brilliant, I still havent chosen to use appsheet though, opting or Bubble.io, because for small startups, less than 20 people, the google appsheet plan to allow external API usage blocks us out, they want minimum a 20 people paying, so much for google embracing startups to use its cloud.
Have you rolled out these new updates or yet to. I cannot see the new options on my app.
@Manish_Jain1 Not yet. We wanted to give you a peek into what weโre working on. Weโll have things rolling out in pieces to the Preview Program, and will let you know.
If you get this right, you have no idea how big this will be.
Until now it has been too unprofessional looking and lacking certain features.
Iโm guessing this may become your biggest market.
Hi Mike, what is the best way to be notified on when these features will become available in preview? Iโd like to try them out!
Thanks.
When these are available, weโll be announcing them.
As the various changes will be available at different times, weโll put new posts in the announcements section and we will also updated the status on this specific thread.
Hi there!
Iโm just curious. Is there any ETA?
Hy,
Looking foreword for all these improvements
Any chance a solution for this issue is included?
Thank you
OMG THIS IS GOING TO BE EPIC PAPUS!
(^_^)
I feel uncomfortable about the UI in the upper right corner of Detail View.
I understand that they are making changes to make it more Google-like, but I donโt think it blends well with the traditional AppSheet UI yet.
Specifically, I think the following points need to be fixed
Thanks
Iโm sorry.
The Detail View menu has always been arranged like this.
It was my mistake. Just forget it.๐โโ๏ธ
I agree, it doesnโt make much sense to duplicate actions both on the top bar and in the dropdown.
I'd would love to hide the delete action in the top bar but when you hide it the action in the corner dropdown disappears as well lol doesn't make any sense to have them connected since an "Are updates allowed? setting already exists.
What would the ETA be on this to start previewing? Been quiet for almost (4) months and chomping at the bit lol
same here!