AppSheet apps are getting a material upgrade

, ,

Hi everyone,

As mentioned previously there, we’re adopting Material design and this is starting to get reflected in your apps. As mentioned by Mike, these changes are UI refinements and should not change how your apps behave. If you see a different behavior, please contact us preferably at support@appsheet.com.

We’ve already rolled out some of the changes (see screenshots below) to some of you for these views:

  • Card View
  • Map View
  • Onboarding View
  • About View

These are all the views that have been updated at this point, but it is possible that other views are affected as well. This is only transient. This happens because views share different components and we’ve already updated a component used in another view. We’ll continue our work to update all other views over the next couple of weeks and make them look consistent.

We’ll follow up with other posts starting next week and onward, to let you know changes you can expect to see soon or that have been deployed.

Thank you,
-The AppSheet Team


List card view on mobile:

List card view has a different layout now on desktop:

Map view on mobile

Map view on tablet and desktop now opens the selected record in a side panel on the right side

Onboarding view on mobile

Onboarding view on desktop

About view

14 Likes

Nice! I like the new desktop views. :+1:

Seeing that new card view on Desktop makes me really want click and drag functionality between whatever is set as the Group By.

3 Likes

Good stuff!

Hi @Arthur_Rallu

I just noticed the ABOUT view on browser seems to be bit buggy. The Okey button horizontal alignment should be addressed, as it is not fully aligned based on the screen width.

Just to give you a head up.

3 Likes

Thank you @tsuji_koichi . We’ll fix that.

1 Like

Thank you .

Button element seems to lie in the separate div tab rather than text titles, both having different padding, which might cause the problem, as i see.

2 Likes

Hello again everyone,

Some of you may have noticed that two other views have been updated recently: the map view and the table view. They should be available to everyone in the next 10 days or so.

Map View: when users click on a location icon on the map, it now opens a record on the right side, instead of the left, on tablets and desktops. This is consistent with common applications.

Table view: We removed the alternating stripes and have changed headers and font for increased legibility. An additional change is that all table views will have horizontal scrolling if there are too many columns to fit on the screen. More can be found about horizontal scrolling on this thread.

Table view on mobile:

Table view on tablet (records are not grouped together)

Table view on tablet: records are grouped by state and columns are ordered differently

6 Likes

I noticed the new look for the Grouping headers. I think that now it is quite hard to tell the difference between a group header row and a row for a record. Maybe if the text for the group headers was a little bolder or bigger it would look more distinguishable?

8 Likes

I agree @Marc_Dillon

Contrast of the background colors could be blaimed? Grouping row is with gray color. Many people claiming it is not able to apply color format to the background applied to the row. Ideally we have option to change color, but for now, it is little too much white-ish gray, so it is not really distingushed it is row or group row.

Yes, apply bit more bolder and little more bigger font for grouping name text.

8 Likes

I agree, it’s a bit muted looking. We’ll see how she fares.
I’m curious how the fully collapsed grouping looks.

3 Likes

The colour selecting of the group headings and items feel a little counterintuitive. When scanning a list, it feels like the headings should have more contrast, e.g. black text on white, so that you can more easily find the right “neighbourhood” of the item your looking for. Then the items should have slightly less contrast, like the black text on grey.

But I’m not familiar with the finer details of Material design, so maybe I’m contradicting some of its design principles.

In any case, I agree with the above comments. The group headings need to pop a little more. When my eyes try to scan the group headings, I feel them naturally drifting to the higher contrast item rows.

6 Likes

Hello again,

First of all, thank you all for your feedback and in particular around the table view when there are groupings. We’ll take that feedback into consideration.

For now, here are screenshots of how we’re updating the UI for the footer and the calendar view.

The footer has three UI options and we’ll still be providing three options. Only the first one is updated. Until now, the first UI option for the footer did not use the primary color of the app and the icon for the selected option was simply made bold. Moving forward, it’ll be highlighted as follows - more in line with what you see in the world of apps and also at Google.

The two other UI options are unchanged and look like these:

The calendar view is now more closely aligned with what you can see on a Google calendar.

  • Typography was updated for better hierarchy and contrast as well.
  • The button to get back to the current day’s date should be more obvious.
  • The monthly calendar view is more structured with lines separating the different days.

Here are some screenshots on mobile for all 3 configurations of the calendar view (monthly, weekly, daily):

And here is the monthly view on a tablet form factor:

Again, feel free to share your thoughts with us!

Thank you

Arthur

6 Likes

Localize is still not possible in Calendar View.

1 Like

I like this option with the clean color indicator, it just seems like it should match the width of the text… As you can see in this case that indicator bar doesn’t really match any of the other items, the icon nor the text. So now it just becomes a third element instead of highlighting the element

image

4 Likes

Sorry to nag, @Arthur_Rallu, but I hope that you or someone else at AppSheet will be able to give “Feature Release Notes” an easy-to-find home in this menu bar:

Personally, I think that a place in “What’s New” would be nice.

8 Likes

Has this grouping changes been rolled out to everyone yet? Mine are all Big and bold.

1 Like

I meant to comment the other week. I see the change, and it is a big improvement. @Arthur_Rallu, appreciate the changes.

1 Like

Hi all,

We’ll soon be rolling out some changes to the look of our forms (views of type ‘form’).

We wanted to make it more obvious to users what was expected of them in a form, so we added contrast between label and content and we added a bounded box around the field value to make it obvious when a field was empty or had a pre-filled value. We also made the form a little bit more dense to fit in more entries on a screen. This is to reduce scrolling from app users when your forms become quite long. It should not feel too crowded though.

Below are some screenshots of different forms that illustrate what they’ll look like in the future.
The first screenshot is a very simple form.
The second one is taken from a variation of one of our sample apps.
The remaining screenshots should give you a sense of how most data types will render in a form. I’ve used the data type name (e.g. LatLong) as the name of the field so that you can recognize each one easily.

Again please share your feedback with us.


16 Likes

I very much approve of these changes. :+1:

5 Likes