onedrive sharepoint mobile - anirudh · • no view counts are displayed for this page since it is...
TRANSCRIPT
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)
• 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
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
No browser bar with scrolling for home
Home: Shy Header/Navigation bar
iOS
Overflow menu added to current header
No browser bar with scrolling for home
Remove existing follow/share site options
Android
Keep existing overflow menu on current header
No browser bar with scrolling for home
Home: Android Super Shy Header/Navigation bar
Android
Hide header bar with site name, search, and overflow menu on current header
No browser bar with scrolling for home
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
• No changes to the responsive web canvas region
• No bottom page-action/social bar to display on scroll for this page.
Actions• On Scroll:
• Browser/page/social bar is not displayed
• No changes to rest of the actions
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
• Follow this site/Unfollow this site option allows the user to follow or unfollow the site
• 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
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
No browser bar with scrolling for home
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
• 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
• On Scroll:• Browser/page/social bar is displayed or hidden
• No changes to any other actions on page
Modern Pages: Shy Header/Navigation bar
Android
Keep existing overflow menu on current header
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
Social bar that is shown or hidden on scroll
Add bookmark option
Add Page Name
Add Page Name
Modern Pages: Overflow Menu
iOS Behaviors/Details
• 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
• Follow this site/Unfollow this site option allows the user to follow or unfollow the site
• 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
Modern Pages: Overflow Menu
Tapping on overflow brings up actions below
Android
Tapping on Overflow menu brings up the following:
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
Refresh option will refresh the page
This will open the page in the mobile web browser
Refresh option will refresh the page
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
Tapping on overflow brings up actions below
Refresh option will refresh the page
Opens the page in the mobile web browser
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
• 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• 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
• On Scroll:• Browser/page/social bar is displayed or hidden
• No changes to any other actions on page
News Posts: Header/Navigation bar
Android
Keep existing overflow menu on current header
Social bar that is shown or hidden on scroll
Add bookmark option
iOS
Overflow menu added to current header
Social bar that is shown or hidden on scroll
Add bookmark option
News Posts: Overflow Menu
iOS Behaviors/Details
• 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
• Follow this site/Unfollow this site option allows the user to follow or unfollow the site
• 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
News Posts: Overflow Menu
Tapping on overflow brings up actions below
Android
Tapping on Overflow menu brings up the following:
Refresh option will refresh the page
This will open the page in the mobile web browser
iOS
Exit the option sheet
Tapping on overflow brings up actions below
Refresh option will refresh the page
Opens the page in the mobile web browser
Bookmarks
iOS Behaviors/Details
• 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
• Add page to the Bookmarks section on “My SharePoint”
• No changes to any other actions on page
Android Behaviors/Details• 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
• Add page to the Bookmarks section on “My SharePoint”
• No changes to any other actions 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
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)
• 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
Actions• On Scroll:
• 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
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)
• 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
Actions• On Scroll:
• Browser/page/social bar is displayed or hidden (see animation details
Social Bar (Contd.)
iOS 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 “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
• No changes to any other actions on page
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
• No changes to any other actions on page
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
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)
Site Shares
Tapping on Share icon on the Social bar brings up the Share sheet for page shares
Tapping on Like icon allows user to remove the like on the page and decreases Like count
iOS Android
Page Shares
Tapping on Share icon on the Social bar brings up the Share sheet for page shares
Tapping on Like icon allows user to remove the like on the page and decreases Like count
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