SharePoint is difficult. It is hard to use, confusing to set up and inconsistent. Now that I am done telling you what you already know, let me walk you through an inconsistency.

Recently I was working at a client site. They asked me to post my documents on Microsoft’s SharePoint so that everyone in the company can have access to the files. After hours of looking through all of the webparts, apps and what not that they jam into SharePoint I did not feel that I got very far providing access to all the documentation.

I soon found that it was not only the gross functionality that was all over the place but also the overall visuals combined with the basic interactions. Here is a walk-through of one page only looking at the hover-over actions and visuals. There are very few things on the page that do the same thing.

Visual affordance is key to knowing what to do. Guess what is clickable and what you expect it to do.

Office365 logo:

  • Cursor is a finger,
  • tooltip and
  • a footer URL

Sharepoint Office365 Logo

 How about the other white on red text such as “Outlook”?

  • Cursor is a finger and
  • the background goes lighter.

Sharepoint Outlook Tab

 And the toolbar changes to grey for the logged in user. It is a droplist.

  • Cursor is a finger,
  • tooltip,
  • the foreground gets darker and
  • the background gets lighter.
  • Droplist does not open.

Sharepoint Logged In User

Oh so the other 2 buttons: gears and the help “?” act the same way, right?

  • Cursor is a finger,
  • tooltip,
  • the foreground gets darker and
  • nothing happens to the background.
  • Share, Follow, Synch and Expand icon act the same way.

Why do they all get names and expand does not?

Sharepoint Help icon

The Browse secondary tab:

  • Browse.
  • Cursor remains an arrow,
  • tooltip and
  • the background is lightened.
  • No other visuals.

Sharepoint Browse Tab

The secondary tabs: Files and Library.

  • The resting state looks like a tab.
  • Cursor remains an arrow,
  • tooltip,
  • the foreground turns blue and
  • the background is lightened.

Sharepoint Files Library Tabs

Site name – the big grey “User Experience”

  • No visual change to the element.
  • The cursor turns to a finger and
  • the URL shows up at the bottom of the page.

Sharepoint Site Name

 The droplist “User Experience” under the site name – foreground is red

  • Cursor turns to a finger,
  • no visual change in text or background,
  • tooltip appears,
  • droplist automatically opens.

Sharepoint Page Name Droplist

Search box

  • Cursor changes to an insert icon,
  • the border turns red,
  • tooltip appears.

Sharepoint Searchbox

Left hand nav bar – bar title

  • The cursor turns to a finger,
  • the foreground changes from grey to red
  • and the URL shows on the bottom of the page.

Sharepoint Left Hand Nav Title

Left hand nav bar – item icon in the list

  • Cursor turns to a finger
  • and tooltip appears.
  • No other visual indicator.

Sharepoint Left Hand Nav Icon

 Left hand nav bar – item text in the list

  • Cursor turns to a finger,
  • tooltip appears,
  • and the text gets underlined.

BTW: the icon and the link go to the page.

Sharepoint Left Hand Nav Text

Left hand nav bar – expand triangle

  • Only the cursor changes to a finger.
  • No tooltip or other visual indicator.

BTW: the arrow does not navigate it only expands the tree

Sharepoint Left Hand Nav Expand Triangle

Site content – Documents title

  • Cursor turns to the finger,
  • tool tip
  • and underline.
  • No color changes.

Sharepoint Site Content Title

Add “+ new document”

  • Cursor changes to a finger,
  • tooltip,
  • and font turns darker

Sharepoint Add New Document

“or drag files here”

(which is just text and should not have an interaction)

  • Cursor turns to the insert icon

Sharepoint or drag files here text

 All Documents and” …”

  • Cursor changes to a finger
  • and the footer shows the URL.
  • No other visual change.

Sharepoint Ellipsis Button

Table row hover

  • Cursor turns to finger,
  • Checkmark goes in front of the row,
  • row background turns pink

Each column has a different result:

  • checkmark: cursor turns to finger, tooltip
  • icon: cursor turns to finger, tooltip 2 (different from above)
  • Name: cursor turns to finger, no tooltip, URL at bottom of page
  • Blank space in row: cursor turns back to arrow and no tooltip
  • Ellipses “…”: cursor turns to finger, tooltip, URL at bottom of page
  • Modified: cursor turns to insert icon, tooltip shows date/time
  • Modified by: cursor turns to finger, pops up MS contact card

Sharepoint Documents Table

This is the case of many teams and many product managers deciding they need the feature and that they will fix the “minor” issues later. These all are minor issues but the whole experience is like stabbing yourself with a butter knife. Yes it is true that no one stab will kill you. But after being stabbed many times you are left a bloody pulp.

Clean these issues up. Making the visual affordance consistent will let the user know what to click on and what to expect.