OneDrive SharePoint Mobile - Anirudh · • No view counts are displayed for this page since it is a landing page • Open in Safari: Opens the page in mobile web browser • No change

OneDrive SharePoint MobileApp Design and ToolkitPM: Aneetha Jayaraman

Design: Anirudh

Overview

Overview

SummaryWe want authors of Site Pages to not only experience a lightweight, WYSIWYG editing experience, but reader interaction on the content they create. The page action/social bar on site pages and news posts is a feature that will engage both readers and authors by keeping content live. It will also help drive conversation between readers, and give the author feedback and the ability to respond to readers via the commenting interface. This specific interaction will be covered in a separate spec. An affordance to bookmark a site page or news post will also be provided as part of this UI. That interaction will be covered as part of the “Me” spec.

This spec will define the user experience for the page action/social bar on modern site pages and News on the SharePoint mobile apps.

As an MVP, we will look at the following:- Affordances for share, follow, refresh and open in browser on all pages- Affordance to see the number of views on all modern pages- Affordance to comment on all modern site pages and news posts- Respect page-level setting to show/hide comments- Display counts of views and comments- Increment view count when page is rendered successfully- Add comments to news page or post

Overview

Post- MVP- Respect page-level setting to show/hide likes- Affordance to like all modern site pages and news posts- Affordance to bookmark all modern site pages and news posts- Display count of likes- Increment like count when a user likes the page- Decrease like count when a user removes a like- Update the activity store when a user likes a news page or post- Update the activity store when a user bookmarks a news page or post- Remove activity when the user removes a like or bookmark

Scenarios (V1)

P1 (MVP)• Any authorized user is able to perform appropriate page-level/social actions natively on a communication site:

• Affordances for share, follow, refresh and open in browser on all pages• Affordance to see the number of views on all modern pages• Affordance to comment on all modern site pages and news posts• Respect page-level setting to show/hide comments• Display counts of views and comments• Increment view count when page is rendered successfully• Add comments to the news page or post

Scenarios (V1)

P2 / vNext

- Respect page-level setting to show/hide likes- Affordance to like all modern site pages and news posts- Affordance to bookmark all modern site pages and news posts- Display count of likes- Increment like count when a user likes the page- Decrease like count when a user removes a like- Update the activity store when a user likes a news page or post- Update the activity store when a user bookmarks a news page or post- Remove activity when the user removes a like or bookmark

Functional Design

OneDrive App Redesign & Toolkit

SharePoint App Redesign & Toolkit

General Page Rendering

Behaviors/Details

• Visible content/elements:• Overflow menu on header near search with contextual actions

• Follow and contextual share options on every page

• Social bar visible as needed

• Need a new API that will eventually cover the following:• Page Type (May get this already from other site-level APIs)

• Home, News, Modern Page, Classic, External

• Counts for

• SiteShares

• PageShares

• Follows

• Views

• Comments

• Comment Replies

• Likes

• Page setting:

• CommentingEnabled?

• LikesEnabled?

• LikedPage?

• BookmarkedPage?

• Need an API to update the following:• Increment View count on successful page load

• Update PageLiked based on whether user like or remove like action

• Increment Like count when user likes page*

• Decrement Like count when user removes like*

• Increment SiteShares count when user successfully shares the site

• Increment PageShares count when user successfully shares the page

• Increment Comment count when user successfully posts a comment

• Increment Comment Replies count when user successfully posts a reply to a comment

• Decrement comment count, delete all associated replies, and set reply count to 0 when user successfully deletes a comment

General Page Rendering

iOS Android

Home: Header/Navigation bar

iOS Behaviors/Details

• New Overflow menu added to current header

• No page name is displayed near navigation bar

• No changes to the current share or follow options on the home page• Move current share site and follow options to the overflow

menu

• No changes to the responsive web canvas region

• No bottom page-action/social bar to display on scroll for this page.

Actions

• On Tap:• Overflow Menu: Brings up a native action control

• On Scroll:• Browser/page/social bar is not displayed

• No changes to rest of the actions

Android Behaviors/Details• No changes to Overflow menu added to current

header• Display page name: Home near navigation bar

• No changes to the current share or follow options on the home page (stays within overflow menu)



Actions• On Tap:

• Overflow Menu: Brings up a native action control

• On Scroll:• Browser/page/social bar is not displayed


Home: Full Header/Navigation bar

iOS

Overflow menu added to current header

No browser bar with scrolling for home

No changes to existing follow/share site options

Android

Keep existing overflow menu on current header


Home: Shy Header/Navigation bar

iOS



Remove existing follow/share site options

Android



Home: Android Super Shy Header/Navigation bar

Android

Hide header bar with site name, search, and overflow menu on current header


Behaviors/Details• No changes to current Comm Sites super-shy

behavior• Hide overflow menu

• Hide Search

• Hide Site name

• Show current navigation bar• Display hamburger menu

• Display page name: Home near hamburger menu



Actions• On Scroll:

• Browser/page/social bar is not displayed


Home: Overflow MenuiOS Behaviors/Details• Tapping on the overflow menu for full-header brings up a

native action control with the following options:• Refresh• Open in Safari• Cancel

• Tapping on the overflow menu for shy-header brings up a native action control with the following options:

• Refresh• Open in Safari• Share this site• Follow this site• Cancel

Actions• On Tap:

• Refresh: Reloads the page• No view counts are displayed for this page since it is a landing page

• Open in Safari: Opens the page in mobile web browser• No change to current experience

• Share this site: Opens Share options to share the Site URL or invite members to the site

• Follow this site/Unfollow this site option allows the user to follow or unfollow the site

• Cancel: Exits action control to return the user to the home page

Android Behaviors/Details• Tapping on the overflow menu brings up a native

action control with the following:• Share

• Follow this site/Unfollow this site

• Refresh page

• Open in browser

Actions• On Tap:

• Share: Opens Share options to share the Site URL or invite members to the site




Home: Overflow Options

iOS: Full Header

Tapping on overflow brings up actions below

Refresh option will refresh the pageThis will open the page in the mobile web browserExit the option sheet

Android


Tapping on Overflow menu brings up the following:

Share a link opens Share options to share the Site URL

Invite People allows users to invite members to the site

Follow option allows the user to follow or unfollow the site

Refresh option will refresh the page

This will open the page in the mobile web browser

iOS: Shy State

Modern PagesiOS Behaviors/Details• New Overflow menu added to current header• Page name is displayed near navigation bar• Move current share site and follow options to the overflow

menu• Add a bookmark option to the header near Overflow menu

• This will be enabled when this feature is available to ship

• No changes to the responsive web canvas region• Scrolling down should show the social bar at the bottom of

the page• Scrolling up should hide the social bar and scrolling down

should make it visible• Animation: Hide pixel by pixel on both ends (both header and social

bar) until the social bar disappears and a super shy state is reached for the header. (Will post a video/prototype of this)

Actions• On Tap:

• Overflow Menu: Brings up a native action control• Title: Takes you to home page

• On Scroll:• Browser/page/social bar is displayed or hidden

• No changes to any other actions on page

Android Behaviors/Details• New Overflow menu added to current header• Page name is displayed near navigation bar• Move current share site and follow options to the overflow

menu• Add a bookmark option to the header near Overflow menu


• No changes to the responsive web canvas region• Scrolling down should show the social bar at the bottom of

the page• Scrolling up should hide the social bar and scrolling down



Actions• On Tap:




Modern Pages: Shy Header/Navigation bar

Android


Social bar that is shown or hidden on scroll

Add bookmark option

iOS

Overflow menu added to current header: Share site and Follow actions are moved into Overflow


Add bookmark option

Add Page Name

Add Page Name

Modern Pages: Overflow Menu


• Tapping on the overflow menu for shy-header brings up a native action control with the following options:• Refresh

• Open in Safari

• Share this site

• Follow this site

• Cancel

Actions

• On Tap:• Refresh: Reloads the page

• No view counts are displayed for this page since it is a landing page

• Open in Safari: Opens the page in mobile web browser

• No change to current experience







• Refresh page

• Open in browser

Actions• On Tap:





Modern Pages: Overflow Menu


Android


Share Site opens Share options to share the Site URL or invite members to the site

Follow option allows the user to follow or unfollow the site




Opens the page in the mobile web browser

Opens options to share the Site URL or invite members to the site

iOS

Exit the option sheet

Allows the user to follow or unfollow the site




Opens options to share the Site URL or invite members to the site

News Posts

iOS Behaviors/Details• New Overflow menu added to current header• Page name is displayed near navigation bar• Add a bookmark option to the header near Overflow

menu• This will be enabled when this feature is available to ship

• No changes to the responsive web canvas region• Scrolling down should show the social bar at the

bottom of the page• Scrolling up should hide the social bar and scrolling

down should make it visible• Animation: Hide pixel by pixel on both ends (both header and

social bar) until the social bar disappears and a super shy state is reached for the header. (Will post a video/prototype of this)

Actions• On Tap:

• Overflow Menu: Brings up a native action control• Title: Takes you to home page



Android Behaviors/Details• New Overflow menu added to current header• Page name is displayed near navigation bar• Add a bookmark option to the header near Overflow

menu• This will be enabled when this feature is available to ship

• No changes to the responsive web canvas region• Scrolling down should show the social bar at the

bottom of the page• Scrolling up should hide the social bar and scrolling

down should make it visible• Animation: Hide pixel by pixel on both ends (both header and

social bar) until the social bar disappears and a super shy state is reached for the header. (Will post a video/prototype of this)

Actions• On Tap:




News Posts: Header/Navigation bar

Android



Add bookmark option

iOS



Add bookmark option

News Posts: Overflow Menu


• Tapping on the overflow menu for shy-header brings up a native action control with the following options:• Refresh

• Open in Safari

• Share this site

• Follow this site

• Cancel

Actions

• On Tap:• Refresh: Reloads the page

• No view counts are displayed for this page since it is a landing page

• Open in Safari: Opens the page in mobile web browser

• No change to current experience







• Refresh page

• Open in browser

Actions• On Tap:





News Posts: Overflow Menu


Android




iOS

Exit the option sheet




Bookmarks


• Bookmark option to the header near Overflow menu• This will be enabled when this feature is available to ship

• Allows the user to quickly toggle the bookmark on or off for the page on tap

• Toggling the bookmark on or off on the page will:

• Shows the page as bookmarked (filled) or not bookmarked (unfilled)

• Adds it to or Removes it from the Bookmarks section in “My SharePoint” (more details as part of My SharePoint spec)

Actions

• On Tap:• Bookmark:

• If previously unbookmarked, then • Bookmark page

• Add page to the Bookmarks section on “My SharePoint”

• If previously bookmarked, then• Remove bookmark on page



Android Behaviors/Details• Bookmark option to the header near Overflow menu


• Allows the user to quickly toggle the bookmark on or off for the page on tap

• Toggling the bookmark on or off on the page will:• Shows the page as bookmarked (filled) or not bookmarked (unfilled)• Adds it to or Removes it from the Bookmarks section in “My

SharePoint” (more details as part of My SharePoint spec)

Actions• On Tap:

• Bookmark: • If previously unbookmarked, then

• Bookmark page


• If previously bookmarked, then• Remove bookmark on page



Bookmarks iOS

Tapping on bookmark icon bookmarks the page

Tapping on bookmark icon removes bookmark on the page

Unbookmarked State Bookmarked State

Bookmarks Android

Tapping on bookmark icon bookmarks the page (currently unbookmarked)

Unbookmarked State

Tapping on bookmark icon removes bookmark on the page (currently bookmarked)

Bookmarked State

Social BariOS Behaviors/Details• Scrolling down on the page should show the social bar at

the bottom of the page• Scrolling up should hide the social bar and scrolling down



• The following features are shown as part of the social bar and will be enabled as they become available:

• Likes• Affordance to like a page or remove like• Number of likes on the page• Ability to see who liked the page

• Comments (details part of Commenting spec)• Affordance to comment on a page• Number of Comments on the page• Ability to see who commented on the page

• Shares• Affordance to share a page• Number of page shares• Ability to see who shared the page and how

• Views• Number of page views• Non-actionable data


• Browser/page/social bar is displayed or hidden (see animation details)

Android Behaviors/Details• Scrolling down on the page should show the social bar at

the bottom of the page• Scrolling up should hide the social bar and scrolling down



• The following features are shown as part of the social bar and will be enabled as they become available:

• Likes• Affordance to like a page or remove like• Number of likes on the page• Ability to see who liked the page

• Comments (details part of Commenting spec)• Affordance to comment on a page• Number of Comments on the page• Ability to see who commented on the page

• Shares• Affordance to share a page• Number of page shares• Ability to see who shared the page and how

• Views• Number of page views• Non-actionable data


• Browser/page/social bar is displayed or hidden (see animation details

Social Bar (Contd.)


Actions

• On Tap:• Like: Toggle Like on or off

• Show that user has liked the page when on OR remove like when off

• Increment the like count when on OR decrease count when off

• Add user profile to list of those who have liked the page when on OR remove user profile from list of people who have liked the page

• Comment

• Open the “View all activity” page to view or add comments

• Details on counts and other behavior is part of Commenting Spec

• Share

• Opens Share options to share the page URL


Android Behaviors/Details

Actions• On Tap:

• Like: Toggle Like on or off• Show that user has liked the page when on OR remove like when off• Increment the like count when on OR decrease count when off• Add user profile to list of those who have liked the page when on

OR remove user profile from list of people who have liked the page

• Comment• Open the Social Page to view or add comments• Details on counts and other behavior is part of Commenting Spec

• Share• Opens Share options to share the page URL


Likes: iOS

Tapping on Like icon allows user to like the page and increments Like count

Tapping on Like icon allows user to remove the like on the page and decreases Like count

Not yet liked State Liked State (to come)

Likes: Android

Tapping on Like icon allows user to like the page and increments Like count


Not yet liked State Liked State (to come)

Site Shares

Tapping on Share icon on the Social bar brings up the Share sheet for page shares


iOS Android

Page Shares

Tapping on Share icon on the Social bar brings up the Share sheet for page shares


iOS Android

View All Activity PageiOS Behaviors/Details• This page has 3 pivots

• Likes• Comments• Shares

• When user taps on comments on the social bar, this page comes up

• The user is always landed on the Comments pivot• Swiping left or right will bring up the Likes and Shares pivots

• Similar to current app swiping behavior

• Likes pivot shows profiles of users who have liked a page• Also contains profile metadata and when the page was liked

• Shares pivot shows profiles of users who have shared the page• Also contains profile metadata, when the page was shared and by which

medium

• Comments pivot contains the native UI to comment on the app (details covered as part of Commenting spec)

• Tapping on back button takes user back to the page or news post that they accessed this page from

Actions• On Tap:

• Back button: Takes user to previous page

• On Swipe:• Left: Navigate to next pivot• Right: Navigate to previous pivot

Android Behaviors/Details• This page has 3 pivots

• Likes• Comments• Shares

• When user taps on comments on the social bar, this page comes up

• The user is always landed on the Comments pivot• Swiping left or right will bring up the Likes and Shares pivots

• Similar to current app swiping behavior

• Likes pivot shows profiles of users who have liked a page• Also contains profile metadata and when the page was liked

• Shares pivot shows profiles of users who have shared the page• Also contains profile metadata, when the page was shared and by which

medium

• Comments pivot contains the native UI to comment on the app (details covered as part of Commenting spec)

• Tapping on back button takes user back to the page or news post that they accessed this page from

Actions• On Tap:

• Back button: Takes user to previous page

• On Swipe:• Left: Navigate to next pivot• Right: Navigate to previous pivot

View all Activity: Likes

iOS Android

View all Activity: Shares

iOS Android

View all Activity: Comments (UX TBD)

iOS Android

Redlines

Redlines

Telemetry / Accessibility

Instrumentation

• Header:• Back button, overflow tap target

• Number of shares, invite friend and follow/unfollows

• Navigation• Menu views and taps

• How many links are opened on the responsive canvas by Type

• Responsive Canvas• How many links are opened on the responsive canvas by Type

• Comments• Comments page views and responses

• How many hyperlinks are opened on the responsive canvas by Type

• Number of comments authored

• Number of replies

Accessibility

• On entering the page, the title should read out along with the type of communication site• Communication Site 101, marketing site

• For each webpart, the following will be included• Label: “<title> <description>”• Hint: “Webpart name” double tap to open or activate• Description: Read the number of elements within the webpart if it is a list of items or a roll up OR read the

content of the webpart

• Beyond this we follow the same conventions as for team sites• For buttons, if present

• Label: “<button name>”• Hint: “button”

• For links, if present• Label: “<link name>”• Hint: “link”

• For lists, if present• Label: “<list name>”• Hint: <list> # X of Y items• Etc.

• Keep the focus orders the same- start with the first element on the header and move sequentially down each screen element

Misc

Spec Updates

Date Modification By4/28/2017 Spec with initial requirements Aneetha Jayaraman5/04/2017 Spec Review Aneetha Jayaraman

Appendix

Samples

Extras

Documents

OneDrive SharePoint Mobile - Anirudh · • No view counts are displayed for this page since it is a landing page • Open in Safari: Opens the page in mobile web browser • No change