On-hover cards provide insights without losing context
Mouseover files, people, site names, and topics in Microsoft 365 to discover a world of knowledge and expertise.
Hi Peer,
We all love a good hovercraft (“These aren’t the droids you’re looking for.”). You might have had, or have been, a hovering helicopter parent. Or recent US military “sightings” might have you wondering what’s hovering above 👽… No matter - the question at hand today, “What happens when you hover over Microsoft 365?” 🤔 (Not all segues are created equal).
Just below the surface of pages and apps awaits interaction into the depths of content and people to learn more - without losing context. As Microsoft CPO, Panos Panay likes to say to “Stay in the flow.” The focus of this article is what lies beneath the primary user experience across Microsoft 365, and how to get there. All you must do is on-hover.
A quick note on the terminology, “on-hover.” The common behavior for cards to appear in Microsoft 365 starts when you mouseover a file’s title, a person’s name, an acronym you don’t know, or a site’s title. You’ll first see a small card pops up, then expand as you linger-hover a little longer. And the, to see more, click toward the top of the card to see it in its full-size, overlay glory. You do this all within task at hand. This, too, applies to numerous mobile experiences (tap versus click).
Thus, I propose a short-form card mantra: Click in, expand, learn, return. Say it with me, “Click in, expand, learn, return.”
Excellent. On-hover cards may feel a little hidden, by design and awareness. Let us change that. Once you know they are there and what they provide, you might just hover off your chair with excitement. Let’s ground that thought and learn more about four on-hover card experiences in Microsoft 365.
File cards - get content insights before opening
We often try to figure out if this is the file (like the droids) that we are looking for. And if it is, what a nice treat to get a glance into the file before committing to opening it.
With files cards (for content stored in OneDrive or SharePoint), you get quick insights. Just point to and hover over a file, and then wait for the file card to appear. The file card tells you if a file is popular among your peers, how long it might take to read it, and a summary of the author’s key points.
There are four common components of a file card - once fully open:
Inside look | Get a sense of time to read the document and a summary of the author’s key points.
Activity highlights | You’ll see a log of recent comments, @mentions, and edits.
Conversations | Review and jump into various chats and emails that reference the file - to see the context of conversations with your peers over time.
Viewers and Views | As you begin to share files, it’s important to know who has viewed it - to give you a sense of reach, or a reminder to amp up awareness.
Note: The security and compliance behaviors of cards derive from Microsoft Graph. The file card is only visible to people who have access to the file, so the information on the card is just as secure as your files. Also, what’s shown on the file card is personalized to you.
Learn more about file insights before you open a file.
People (Profile, Contact) cards - get to know your peers
Who is that? Not an uncommon question in the enterprise. And beyond the answer of who they are - it’s helpful to know what they know and who they work with, plus a hierarchical or community view of who they work for or know.
When you click or tap someone’s name or picture in Outlook or other Office apps and services, you’ll find information related to them on their profile card via a set of tabs pulling through information from Azure Active Directory, Microsoft Graph and LinkedIn (if enabled).
In reference to the image above, here is a quick rundown of the main information and tabs on a people card:
Overview with profile photo and Contact information.
Organization chart of who reports to who along with collaborates with who beyond hierarchy.
Recent Files and Email messages between you and the person whose profile you are looking at.
LinkedIn information (if enabled, and subject to an individual’s visibility settings on LinkedIn)
Learn more about profile cards in Microsoft 365.
Group cards - a who’s who and app bar for your team and team site
This one might be the most hidden. The Group card lies behind a SharePoint site’s title or logo - in the upper-left of your sites; or if you click a group name in Outlook. Try it. Mouseover and discover quick access to view site information, a list of members (listed by Owners and Members), and shared group resources (aka, other Microsoft 365 apps connected to the team).
Beyond group information and apps, some card innovation is actionable:
Search for members | Click into the Members tab and “Search for members.” This makes it easy to find if someone is or is not a member, plus if they are an owner of the group.
Renew your groups | Similar to how you can renew your groups from email notifications, now you can do so directly from the hover card and get on with your day.
Approve pending members | Similar to how you can accept pending members from an email, now you can do so directly from the hover card.
Learn about Microsoft 365 Groups.
Topic cards - knowledge at your fingertips
Topic cards are the new kid on the block. And they truly lead to depth of knowledge and people. If you have Microsoft Viva Topics deployed, you can discover more about topics and acronyms through topic cards (that you’ll see highlighted) on a SharePoint page.
Open a topic card to view and select related team members, resources, and other topics. It’s all AI-powered to help discover, organize, and surface what matters for content and expertise across your systems and teams. People, your peers, don’t need a separate application or search—knowledge simply finds them in the apps they already use.
And when you click on View details in the Topic card, you’ll be taken to the topic page (separate example below):
Click here to see a guided demo of Viva Topics - including use of Topic cards.
If you want to learn more Microsoft Viva, I recently wrote this article, “The personal side of Microsoft Viva“ - and encourage you to visit its main page.
Note: Later this year Microsoft plans to release a set of APIs which will allow customers to highlight topics and show topic cards in applications other than Office 365. This is an essential ingredient in allowing other Microsoft application teams and our ISV partners to build integrations into Microsoft Viva - growth as an employee experience platform (EXP).
BONUS | Program management (engineering) interview about file card design and development
On a previous episode of The Intrazone 🎙, I spoke with CJ Tan (LinkedIn), principal program manager on the SharePoint engineering team who (at that time) focused on all things file hover card experiences and site analytics; she know focuses on Microsoft Viva Topics. Have a listen below (CJ’s interview starts at 5:20 into the episode):
Final thoughts
Mouseover experiences through cards of all kinds throughout Microsoft 365 help reduce clutter and encourage learning via contextual interaction. Microsoft designers and developers share a lot of common code, patterns, and practices. The result takes us back to our new card mantra - click in, expand, learn, return; and to do this with powerful, consistent insights that give us what we need when we need it most.
Cheerios, Mark “hover’crafty” Kashman
P.S. (Pun Sharing)
Get your eye rolls ready to bake… one pun from me, @mkashman 🙄, and one from the world:
Very interesting! As a developer, the first thing that comes to mind is: how to include this in our own solutions? I know of the Graph Toolkit that offers the person card, but comparing this to the person card in your screenshot I see they're not identical. Also, I don't see file, group or topic cards in GTk yet. Are you using some not-yet-released version of GTk and should I wait for GA or is there another way to use these cards in our SPFx solutions? Thanks for the fun post, another Mark.