Design Review: “Create a list” experience on SharePoint Online

Stefan Bauer
6 min readSep 17, 2020

--

First of all, I like the new “Create a list” experience. The organisation of all the different possibilities is excellent now.

Design Review on Create a list in SharePoint Online

This wizard-like experience allows you to create list quickly and guides you to what you want to do. Also, it comes with great new features such as create a new plan based on existing across all site collections in your tenant.

The base idea of how it looks now is promising, but there are some design and user experience issues I like to uncover in this design review.

Issue #1: The button issue

A general rule is that content, and interactive elements should have a distinctly different appearance. The user gets a clear impression of where to click and where to read. When we look at the first screen, we have a mashup between clickable and non-clickable elements.

Content and Buttons look the same

Content and Buttons look the same — Which one is clickable, which isn’t

So the icon text combination does not make apparent which element is clickable and which coloured icons serve only a decorative purpose.

Clickable and not clickable text look the same

The better alternative, in this case, would be not to use coloured icons. Which this slight change it makes it more evident that the icons are just there for decoration and the support of the content.

Optimised version of the same user interface — Icons are now clearly not clickable in the content.

The icons still stand out from the design are just content and not something clickable.

Issue #2: No exit beyond this point on

When this panel accidentally got opened the wrong dialogue like shown here in the “Create a list” how do you exit?

Well, you cannot exit, or can you? It seems like there are two buttons in the far right corner. Not something obvious to the user and you would look around more for a close button on the top right corner. Well, there is no giant X there.

Another common practice is to click on the grey beside the panel, the background of this panel. There is an event missing that close the panel sadly so you are out of luck. This common practice is something Fluent UI Framework have never considered and is a missing gap in their implementation too.

On the previous screen, there are three design challanges.

Missing elements to close the panel

A click outside of the panel should close the panel one of the core issues in the Fluent UI Framework. On the other hand, the Fluent UI Framework states that a panel for “Best practices” should include a close button.

Close button should be on every panel as defined in Fluent UI / Office UI Fabric

The third issue is that a disabled button and a cancel, in the form of a ghost button, do not draw any attention for the user. The disabled state of that button gets changed once the user added a list title and it becomes solid green. When you on a screen size like this (1367x768) you might recognise the button state change. On the larger screen, you might get lost because the distance between the “Create a list” field and the buttons is very long and is out of your visibility context.

I am assuming that this form not used daily its purpose and handling should be more comfortable to access.

UPDATE: Emily Mancini, mentioned that one of the key law’s in good user experience was broken here and is not explicitly stated. This law is known as Fitts’s Law:

The time to acquire a target is a function of the distance to and size of the target.

The distance and the size in this example are not optimal here. If you want tho know more on this I would recommend the Video “What is Fitts’s Law” by Denise Nguyen or an article at Laws of UX.

Issue #3: Placeholders in Form Fields Are Harmful

The last thing might seem like a minor issue but is one of the most major ones on this screen. “Create a list” contains one mandatory field. This text field allows you to specify the name of your new list.

Placeholder used as label

It has a label inside the text box, known as a placeholder for the reals values, and this should be avoided at all cost because this design is harmful in many ways. That is a no-go in any application and usability design. I am not going into details, but there are great articles on why they are harmful.

So the key takeaways here are the loss of accessibility and a reliance on the users short term memory. When you purely look at the first impression, you will see the following screen.

Example on how placeholder is used as label

Once you started typing, it becomes apparent that you do not know what you are typing.

What was this textbox good for? Search? Listname? Lookup?

A label like “List name” above makes this issue less annoying for everyone not only people with accessibility challenges.

Verdict

When I saw this user interface, I had a tough time to get out of this panel and even now, when I use it do not feel that it has a great user experience.

It looks somewhat beautiful but even tho there are minor design and user experience issues that I haven’t cover here. The direction is the right one to go but leaves room for improvements. Things not covered here are the use of headlines and typography, separations between different zones to make it look more consistent and so on.

This article is just a small excerpt of design and usability issue with the modern design that I see throughout the day in SharePoint. I hope by uncovering these issue, I help the platform to grow and give the developer some insight on things that should consider when you develop your next SharePoint customisation.

Suppose you found this article helpful. Let me know, and I start to more reviews like this giving not only a developer but also information architects and designer more insights on how to get the best out of the platform.

Originally published at Stefan Bauer — N8D.

--

--

Stefan Bauer

Sharing ideas about art, design, web and development. I'm a professional #SharePoint consultant and developer. Microsoft Community Contributor Award 2011/2012