Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Microsoft Teams community call-September 2019

782 views

Published on

This month’s agenda hosted by Michael Forney, Principal Design Manager for Microsoft Teams, discussed design priniciples and best practices to build on Microsoft Teams. Millions of people use Office 365 every day. Building for our platform puts your app at the center of all the action.

For more information, please visit:
https://developer.microsoft.com/en-us/microsoft-teams/

Published in: Technology
  • Could you use an extra $1750 a week? I'm guessing you could right? If you would like to see how you could make this type of money, right from the comfort of your own home, you absolutely need to check out this short free video. ➤➤ http://t.cn/AisJWUCf
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • High paying Twitter jobs? $25 per hour, start immediately ➤➤ http://t.cn/AieX6y8B
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • High paying jobs on Facebook? $25 per hour, start immediately ♣♣♣ http://t.cn/AieXiXbg
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Positions Available Now! We currently have several openings for writing workers. ▲▲▲ http://t.cn/AieXSfKU
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Ripley's Believe It Or Not Investigated Him After His 5th Win...(unreal story inside) ♣♣♣ http://t.cn/Airf5UFH
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Microsoft Teams community call-September 2019

  1. 1. Getting started Framework Components ResourcesMicrosoft Teams | Design Guidelines Build with us Millions of people use Office 365 every day. Building for our platform puts your app at the center of all the action.
  2. 2. Getting started Framework Components ResourcesMicrosoft Teams | Design Guidelines BUILD ON TEAMS
  3. 3. Getting started Framework Components ResourcesBuild on Teams Teams is about collaboration So make your app about collaboration. Collab in Channels Interacting in front of or with a group of people increases your app’s visibility and enhances discoverability. To meet this mark the content should be actionable and not simply informational Sharing Message extensions allow sharing and interaction in 1:1, Group chat, Teams, and from the Commandbox. Link Furling just makes that better in the future. Proactive in channel Help with discovery. Maximize usage with actionable messages User Customizable When users get your data the way they want it is satisfying. Customizing notifications is always a great start. Teams is the hub. Bring content to the user in the right place and at the right time. If they need to hunt for your app after they’ve started using it, you’ve already lost. 1:1 Apps create a hole that users can't get out of… DON’T BE AN APPHOLE
  4. 4. Getting started Framework Components ResourcesMicrosoft Teams | Design Guidelines SCENARIOS FIRST
  5. 5. Getting started Framework Components ResourcesScenarios first A bot is not a scenario… Jamming a scenario into a feature usually confuses users. Who is your hero? Who are they? What do they do? Name names. How do they feel now? How will they feel when you are successful? Tell the story first, ignore solutions at this stage We are all in the business of thinking about solutions. Don’t do that yet. Tell the story of the user journey like a children’s book first. Feelings matter here. Elevator pitch – in one breath Keep it Simple. You need this to sell the concept to your colleagues anyway! ”Make it easy to turn incoming requests into tasks and visually manage workflow” Use this one-liner to keep yourself on track and manage scope creep as well as shipping an MLP. Minimum Lovable Product. ?
  6. 6. Getting started Framework Components ResourcesScenarios first Decision Criteria How often will it be used? What ROI does it provide for the team? Does it solve a real problem ?
  7. 7. Getting started Framework Components ResourcesScenarios first Quickly outline your flow in front of your users Highlight status changes and events you can either automate, push as notification, or use as a manual input
  8. 8. Getting started Framework Components ResourcesMicrosoft Teams | Design Guidelines DESIGN TOOLS
  9. 9. Getting started Framework Components ResourcesDesign tools The most important tools are… Fast and don’t put a barrier between you and your discussion with the user. Fast and interactive Use a whiteboard, post-its, and markers. Detail the flow first then draw boxes and get some content in them. Be fast and loose. Make mistakes. That’s what an eraser is for. Your users You are not the user. Even if you are building this for yourself get another person who is not your friend to help you figure out the flow, and then the actual content. Questions not answers Be a 3 year old and ask “Why” until you have reduced the concept past a technology or a tool. Get to the most generic understanding of the flow. Even if you think you know the answer. Ask the question. You well be surprised how a small nuance can change everything Boxes and words For each major interaction ask other people what the words are that go in the box. What is the most important order of things
  10. 10. Getting started Framework Components ResourcesDesign tools You can draw a box …and doing it in front of your users is a fast prototype. Fail here or in code, your choice The more code you write the less happy you will be to change it. Getting it right here is very cheap, and the feedback loop is fast. This is agile. Document the key beats Sure you need to handle some error cases, but cover the golden path first, make sure your flow is appealing and you are bringing the right elements to your users at the right time. Backtrack and cover the rest What does setup look like, how do you handle errors or conflicts, secondary scenarios.
  11. 11. Getting started Framework Components ResourcesMicrosoft Teams | Design Guidelines YOU GET ONLY ONE FIRST DATE
  12. 12. Getting started Framework Components ResourcesYou only get one first date First impressions matter Even if your date looks great on paper, if they want to eat your brains there will be no second date. Build an MLP not an MVP As tempting as it may be to ship something there is very little forgiveness from users. They tend to hold a grudge. Ship a minimum LOVABLE product and remember you are not the judge. Bring in some users before sending your app into the world. Great documentation goes a long way Tell users what your app does in the long and short description fields of your app, not how awesome you or your company is. This is a swipe left or swipe right moment or you. Find a designer to do your icon Everyone knows someone who is a designer or wants to be one. You should specialize in code, don’t try and throw something together in paint. Also run the icon choices past your users before locking in. This is cheap if you have to hire someone. Find a writer Consistent style, good grammar, and correct spelling go a long way to instill confidence. Misspelled words, bad grammar, and Google translate make you look like a Twitter troll bot.
  13. 13. Getting started Framework Components ResourcesYou only get one first date
  14. 14. Getting started Framework Components ResourcesMicrosoft Teams | Design Guidelines Getting started Here’s everything you need to showcase your brand in Microsoft Teams.
  15. 15. Getting started Framework Components ResourcesThe basics This area hosts Activity, Chats, Teams, Meetings, Files, and Apps. If someone uses your app every day, this is where they will pin it. Immersive experience Work gets done in the canvas. Conversations happen here. When you build a tab for an app or a channel, they’ll show up here too. Tabs and conversations Get a bird’s-eye view of your work across different teams and channels. Have one-on- one conversations with bots, scan and organize your tasks, or search your recently viewed files. Personal apps
  16. 16. Getting started Framework Components ResourcesThe basics Each app uses this area differently, but in general, it allows users to navigate to specific content like a one-on-one chat with someone, a channel in a team, or a list of upcoming meetings. Instant notifications When users open a document, this is the view they will get. To keep things focused, we’ve moved the conversation to a narrow right pane. Keep that size in mind if your service inserts custom cards into chat. Stage View To keep Microsoft Teams easy to use on mobile, we’ve streamlined the functionality. Bots and connector cards will be available in this view and we’ve made sure that if you are using a standard card type, it will render perfectly in our mobile experiences. Mobile
  17. 17. Getting started Framework Components Resources Bots are conversational apps that perform a narrow or specific set of tasks. They give you an opportunity to communicate with users, respond to their questions, and proactively notify them about changes. They’re a great way to reach out. Bot framework The basics Message extensions allow you to share rich cards in a conversation. A card can hold instructions to complete a complex task or a simple GIF. These extensions are one of the best ways to create shareable content and serve information quickly. Messaging extensions Cards are actionable snippets of content that you can add to a conversation through a bot, a connector, or app. Using text, graphics, and buttons, cards allow you to communicate with an audience. Customizable cards
  18. 18. Getting started Framework Components ResourcesMicrosoft Teams | Design Guidelines Framework A short tour to help you understand how the Teams platform works for your app.
  19. 19. Getting started Framework Components ResourcesTabs Content and conversations, all at once Tabs are canvases that you can use to share content, hold conversations, and host third-party services, all within a team’s organic workflow. When you build a tab in Microsoft Teams, it puts your web app front and center where it’s easily accessible from key conversations.
  20. 20. Getting started Framework Components ResourcesTabs Guidelines A good tab should display the following characteristics: Focused functionality Tabs work best when they’re built to address a specific need. Focus on a small set of tasks or a subset of data that’s relevant to the channel the tab is in. Reduced chrome Avoid creating multiple panels in a tab, adding layers of navigation, or requiring users to scroll both vertically and horizontally in one tab. In other words, try not to have tabs in your tab. Integration Find ways to notify users about tab activity by posting cards to a conversation, for example.
  21. 21. Getting started Framework Components ResourcesTabs Conversational Find a way to facilitate conversation around a tab. This ensures that conversations center on the content, data, or process at hand. Streamlined access Make sure you’re granting access to the right people at the right time. Keeping your sign-in process simple will avoid creating barriers to contribution and collaboration. Personality Your tab canvas presents a good opportunity to brand your experience. Incorporate your own logos, colors, and layouts to communicate personality. Your logo is an important part of your identity and a connection with your users. So be sure to include it. • Place your logo in the left or right corner or along the bottom edge • Keep your logo small and unobtrusive
  22. 22. Getting started Framework Components ResourcesTabs Tab layouts Single Canvas This is one large area where work gets done. OneNote and Wiki follow this pattern. If you have an app that doesn’t separate content into smaller components this would be a good fit. Column Columns are great for workflows that move an item from one column to another to indicate a new status. Consider supporting drag and drop for those scenarios. We recommend using dialogs or inline expansion for detail views.
  23. 23. Getting started Framework Components ResourcesTabs Tab layouts List Lists are great for sorting and filtering large quantities of data and are great at keeping the most important things at the top. It is helpful to use sortable columns. Actions can be added to each list item under the ellipsis menu. Grid Grids are useful for showing elements which are highly visual. It helps to include a filter or search control at the top.
  24. 24. Getting started Framework Components ResourcesTabs PRO TIP Please work with our visual style so your service feels like a part of Teams. Avoid creating multiple panels in a tab, adding layers of navigation, or requiring users to scroll both vertically and horizontally in one tab. Best Practices Always include a default state Include a default state to make tabs easy to set up even if your tab is configurable. Deep linking Whenever possible, cards and bots should deep link to richer data in a hosted tab. For example, a card may show a summary of bug data, but clicking it can shows the entire bug in a tab. Naming In many cases, the name of your app may make a great tab name. But consider naming your tabs according to the functionality they provide.
  25. 25. Getting started Framework Components ResourcesBots Start talking Bots are conversational apps that perform a narrow or specific set of tasks. They give you an opportunity to communicate with users, respond to their questions, and proactively notify them about changes. They’re a great way to reach out.
  26. 26. Getting started Framework Components ResourcesBots Guidelines What does it do? The value proposition Explaining with a clear example what your bot does at the very beginning will give users a reason to engage, and the right words to use. Welcome messages should tell users the value of the bot, and how to interact with it for the main scenarios. Tours We love to see tours offered at the very beginning. This is a great opportunity to use a carousel and walk users through scenarios you offer. Listen for ”tour”, “help”, and “what do you do” to resurface this content Unauthenticated queries Before forcing users to sign in, how can you help them understand the value of your service? This bot will help you submit time away from work, and keep track of paid holidays. You can ask about “upcoming holidays” or submit “time off”. Take a tour to see all the things the bot can do and how to use its tabs.
  27. 27. Getting started Framework Components ResourcesBots Guidelines A good bot should display the following characteristics: Avatars Bot avatars in Teams are shaped like hexagons so people can quickly tell that they’re talking to a bot instead of a person. You’ll submit your avatar as a square and we’ll crop it for you. When it comes to avatars, we recommend making yours legible from 2 feet away and using a higher contrast. Buttons We support up to six buttons per card. Be concise when writing button text, and keep in mind that most buttons should only address the task at hand. Cards and graphics Graphics are a good way to tell a story, but not all bot conversations require graphics, so use them for maximum impact.
  28. 28. Getting started Framework Components ResourcesBots Fail with excellence Respond to users and failing gracefully, like this: Your bot should also be able to respond to things like 'Hi', 'Help', and 'Thanks' while taking common misspellings and colloquialisms into account. Your bot should be able to handle the following types of queries and inputs: • Recognized questions These are the ”best case scenario” questions you’d anticipate from users • Recognized non-questions Queries about unsupported functionality, random pieces of information, or when someone wants to curse at your bot. • Unrecognized questions Unintelligible inputs (i.e., gibberish).
  29. 29. Getting started Framework Components ResourcesBots Use LUIS and train to succeed ## SMS - text - text please - send text - txt pls - txt please - sms - sms pls - sms please - msg - msg pls - msg please - mssg - mssg pls - mssg please - message - message pls - message please - imessage - imessage pls - imessage please - im - im pls - im please - dm - dm pls - dm please You are not the user Age, vertical, and local jargon make a difference
  30. 30. Getting started Framework Components ResourcesBots Personality matters
  31. 31. Getting started Framework Components ResourcesBots Leave the user in control. Provide notification settings that include frequency and priority. How often should you use your bot to reach out to a user? When a state has changed For example, if an assignment is marked as complete, when a bug changes, when new social media is available, or when a poll has been completed. When the timing is right Your bot can act like a daily digest, sending a notification to the user or channel at a specific frequency. Avoid creating “notification blindness” from too many notifications that are not critical for the user. Bundle notifications, tune them to signals that are important and provide individual users and teams a way to customize how often bots interject themselves into a conversation
  32. 32. Getting started Framework Components ResourcesBots Using tabs Tabs make your bot much more functional. With tabs, you get the following: A place to host standing queries In one-on-one conversations, tabs can house user-specific information and lists. They’re also a good place to maintain bot responses to frequently- asked questions (so users don’t need to keep asking). A place to finish a conversation You can link to a tab from a card. If your bot provides an answer that requires a few more steps, it can link to a tab to complete the task or flow. A place to provide some help Add a tab that educates users about how to communicate with your bot. You can provide some context for what it does or FAQs.
  33. 33. Getting started Framework Components ResourcesBots Best Practices Bots aren’t assistants Unlike agents (like Cortana), bots act as specialists. Discourage chit chat Unless your bot is for conversation, find ways to redirect chit chat towards task completion. Introduce some personality Keep your bot personality consistent with the voice of your product. Think of your bot as speaking for your company. Maintain tone Determine whether you want your tone to be friendly and light, “just the facts”, or super quirky. PRO TIP When writing your bot script, ask yourself: “Will my company be embarrassed if a response is screen captured and shared?”
  34. 34. Getting started Framework Components Resources Encourage easy task flow Bots PRO TIP Embedding parts of your site in a tab will help someone maintain the context of a conversation as they use your service. It removes the need to launch your service in a browser and switch back and forth between apps. Best Practices Support multi-turn interactions while still allowing for fully formed questions. Anticipating the next step will help users get through task flows much easier. If a user takes several steps to complete a task, allow your bot to take them through each step, but finish by having it suggest a quicker path. For example, if a user has taken several conversational turns to set a meeting (by first specifying a meeting, then identifying with whom, then stating the time, then stating the day), finish the conversation with the following suggestion: “Next time, try asking if you can ‘schedule a meeting with Bob at 1:00 tomorrow”.
  35. 35. Getting started Framework Components ResourcesMessage extensions Share your content in a channel or chat Message extensions allow you to share rich cards in a conversation. A card can hold instructions to complete a complex task or a simple GIF. Microsoft Teams comes equipped with several message extensions already. If you look below the compose box, you’ll see a “GIF” icon. That’s a message extension! These extensions are one of the best ways to create shareable content and serve information quickly.
  36. 36. Getting started Framework Components ResourcesMessage extensions Guidelines A good message extension should display the following characteristics: Single parameters are easier Message extensions can hold up to five parameters, but we recommend limiting yourself to a single parameter as often as possible. Include a default query Even before your user types anything you can show a list of results. Whatever entity of yours the user has interacted with last is likely something they want to share. Track an MRU list in your web pages as well as what is used in teams and show it to the user when you load the control. Card file size If your card content is relatively large consider that it will impact performance on this list. Each result is actually a complete card so multiply your card size by the number of results returned.
  37. 37. Getting started Framework Components Resources Users can select an entity from your message extension… …and add it to their message Message extensions Now the conversation is about an item in your service and users can use the card to check out the details.
  38. 38. Getting started Framework Components ResourcesMessage extensions PRO TIP Try not to include optional parameters in your message extension. People tend to feel obligated to fill out every parameter before they execute a search. Keep it simple A message extension should be light-weight and fast or it will lose its utility. If your search requirements are very complex or multiple parameters are necessary even in the simplest case, it’s OK to include them. Best Practices Optimize your search results A snappy message extension will return an easily digestible list of search results. We recommend including an image and no more than two lines of text. Optimize your cards Each message extension produces in a card. Since it’s the last thing your user will see, make sure your cards are useful, good-looking, and easy to share.
  39. 39. Getting started Framework Components ResourcesCards Create a lightweight, adaptable card Cards are actionable snippets of content that you can add to a conversation through a bot, a connector, or app. Using text, graphics, and buttons, cards allow you to communicate with an audience. Our card framework eliminates the burden of designing a fully functional UX. We developed several standard card types and each one fits within our supported platforms.
  40. 40. Getting started Framework Components ResourcesCards Guidelines Think of a card as a response to a user question or a setting. A card can respond to a direct question (like, “How many open bugs do I have?”) or to a condition (like, “Send a list of my open bugs at 9 am every day”). A card should include any of the following elements: Envelope text Best used for chat messages. For example, if you want a bot to say: “Here’s what I found!” or “Time for your 1:00 news digest”, that message is best displayed in envelope text. Envelope text is a great way to inject a little personality into your service— just remember to keep it relatively short. Title Your title will always be the largest text in your card. It also serves as your “hook”, so try to keep the title short, memorable, and easy to scan. Subtitle Best used for attribution, taglines, or as a secondary directive. This component appears just below your title. 1 2 3
  41. 41. Getting started Framework Components ResourcesCards Text Best used for plain text in the body of your card. Your max length depends on the card type you’ve selected. Buttons Best used to open web pages, tabs, or additional chat content. Make sure to keep your button text short and to the point. You can include up to 6 buttons per card, but we’d recommend following a ‘less is more’ philosophy here. Tap region This is the clickable region of your card. Most users will want to click on images automatically, so try and craft your text so they know where they should tap or click. 5 6 7 Image Images scale to fit their container. Hero cards have a max width of 420px, thumbnails have a max width of 100px, and list views only allow for 32px in desktop mode. 4
  42. 42. Getting started Framework Components ResourcesCards Types of cards Some cards are best used to present standalone or individual pieces of content. We designed the following hero, thumbnail, and sign on cards for that purpose. Hero Our largest card. Best used for articles, long descriptions, or scenarios where your image is telling most of the story. Thumbnail Short and sweet. These cards are ideal for short answers, or if you want to return several cards at once so the user can choose from a bunch of options. We think these are a great way to deep link to another tab or a web service.
  43. 43. Getting started Framework Components ResourcesCards Types of cards Some cards are best used to present standalone or individual pieces of content. We designed the following hero, thumbnail, and sign on cards for that purpose. Connector Card From the Office connector framework Adaptive cards For more extensive layout control and the ability to handle forms inline
  44. 44. Getting started Framework Components ResourcesCards Types of cards Some cards are best used to present standalone or individual pieces of content. We designed the following hero, thumbnail, and sign on cards for that purpose. Sign in Some services require users to sign in independently of our authentication. In that event, you would present a sign-in card before the user can connect to your service.
  45. 45. Getting started Framework Components ResourcesCards Card collections We also have standard card types that are best used when you want to present several pieces of content at once or in quick succession. For that purpose, we have a carousel, a digest, a list, and what we call a ‘bubble merge’. Carousel Best used for articles, shopping, and browsing through cards. Digest Best used for news, digests, and whenever you want the user to view multiple cards at once. We recommend using thumbnail cards for digests.
  46. 46. Getting started Framework Components ResourcesCards Card collections We also have standard card types that are best used when you want to present several pieces of content at once or in quick succession. For that purpose, we have a carousel, a digest, a list, and what we call a ‘bubble merge’. Lists Lists are a great way to present a scannable set of objects in a “pick one of these” scenario. Lists are best used for items that don’t need a lot of explanation. Bubble merge Some interesting effects can be achieved by sending one hero and several thumbnails in quick succession. We recommend this approach when you want to serve a main result but include a few more related items.
  47. 47. Getting started Framework Components ResourcesCards PRO TIP There’s no need to include every element in each card you create. Let your content dictate your elements. Best Practices Keep the noise down It’s easy to send multiple cards into a conversation, but once cards scroll out of view, they become less useful. Try to limit yourself to the essentials. This is especially true in a channel where users have less tolerance for what they perceive as “noise”. Test on mobile Mobile environments are space- and bandwidth-constrained, so be cautious about including oversized images and large data sets in lists and carousels. Also, title widths and text lengths will truncate on mobile, so that’s another thing to keep an eye on. Check your graphics Graphics are going to scale, so be sure to preview them on all platforms. Avoid including text in a graphic Anything that needs to be read by a user should be included in a text field. Once an image is dynamically scaled, any text you add to a graphic may become unintelligible.
  48. 48. Getting started Framework Components ResourcesTask modules When a card isn’t enough Task modules let you open a dialog. When you need to do a little form entry, a lookup, or keep an interaction out of a channel, pop open a dialog.
  49. 49. Getting started Framework Components ResourcesTask modules Instead of multi-turn experiences Conversational bots asking questions for all the required fields in a “Make a meeting” flow is tedious. Pop up a task module with a form to fill out instead of asking lots of questions in a chat When there is validation or lookup Adaptive cards are great but when you need validation, or form elements that appear based on a previous selection like “Year, make, model” chained fields you need to use a task module to keep an open channel to your service. When you need more room Task Modules can be displayed in a variety of sizes. When you need a little more room to make your point or get things done. A quick 1:1 experience in context Showing an app tour in a channel is handy. Doing it without bothering everyone else is a snap if you host yours in a task module. Guidelines Task modules provide an immersive experience to get a specific task done
  50. 50. Getting started Framework Components ResourcesTask modules Task modules come in two flavors For a simple form interaction host an adaptive card. For more complex interactions like search or looking up a user you can host your UI in an iframe. Task modules can be opened from cards or tabs. Adaptive card forms We’ll strip the card border and make it feel like a native dialog. Mobile views will be responsive and pick up themes automatically. Iframe For lookups or validation, host your own. Make sure to check your work on themes and on mobile and use our theme aware script in the page.
  51. 51. Getting started Framework Components ResourcesTask modules PRO TIP Every good dialog has a call to action. Tell the user what you want them to do in the title. Best Practices In a channel Use task modules to have a 1:1 interaction with a user. Task modules keep you from cluttering the channel with unnecessary bot responses and avoids redirecting the user to a 1:1 chat and losing context. Test on mobile While adaptive cards hosted in a task module render well on mobile, if you choose to create custom HTML it will need to use our CSS to handle theme changes and responsive to handle the difference between desktop and mobile screen real estate. Short interactions You can easily create multi-step wizards but holding a user in a task module can be problematic as incoming messages encourage users to exit. Pop out to a web page instead of a task module if your task is really involved or time consuming. Errors Keep errors inline. Don’t pop a dialog on top of a dialog.
  52. 52. Getting started Framework Components ResourcesMessage actions Users can send a message to your app The starting place is a conversation. Let users send text to your app and you can use it to create new things, add to existing entities
  53. 53. Getting started Framework Components ResourcesMessage actions Send clear text directly Users can add message text to an entity on your service is easily. For instance adding a message to a notes field on a Run incoming text through NLP Natural language processing can help extract entities in text and provide meaning or more precise actions based on the incoming text Describe the action concisely Your icon will show up in the menu accompanied by your task name. Take time to label the action in short easy to understand terms. Guidelines Use message text as a starting place for rich actions NLP Service
  54. 54. Getting started Framework Components ResourcesMessage Actions Select, send, manipulate Send text to your app The message text gets sent to your action from the overflow menu. You can expand the selection to surrounding messages using the graph. Take advantage of a task module for custom interactions Once you have the text and have processed it, invoke a task module to allow further interactions or just to confirm the acton.
  55. 55. Getting started Framework Components ResourcesMessage actions PRO TIP Start with the basics. Sending conversations with timestamps to your entities with no extra processing can be valuable. Best Practices Simple action names Keep the name short, a couple of words at most. Use a task module Allow some control over the action by exposing it in a task module or just open it to confirm that the action was completed Try using Natural Language Processing NLP can help your service listen for keywords or synonyms to your entities. Try using graph queries too Once you are manipulating text sent by users you can take advantage of MS Graph to get more context. There are additional permissions required to do so and you’ll need to inform the user.
  56. 56. Getting started Framework Components ResourcesActivity Feed Initiate quick, easy communication Your notifications appear in someone’s activity feed right next to all the other notifications about their new @mentions, likes, and replies. There are many ways to use the activity feed to communicate information about your service or about a user’s content. Here are some ideas about the kind of notifications you can send to someone’s activity feed, depending on what your service does.
  57. 57. Getting started Framework Components ResourcesActivity Feed Notifications The activity feed is a great way to communicate with your audience. You can use it to tell people about recent updates or send important notifications. For example, if your app focuses on task management, you can send a notification to someone’s activity feed whenever they receive a new task. Notifications in the activity feed will show up on someone’s desktop app and their mobile app, which helps draw attention to important information. Task list A single notification that is part of a larger, ongoing list. For example, if your app deals with task management, you can publish a notification to someone’s activity feed whenever they receive a new task or when someone else updates an existing task. Updates A single notification that lets a user know that something has been updated or edited. For example, if your services helps people manage their files, you can allow a user to “follow” a file to receive notifications whenever the file is modified.
  58. 58. Getting started Framework Components ResourcesActivity Feed Notifications The activity feed is a great way to communicate with your audience. You can use it to tell people about recent updates or send important notifications. For example, if your app focuses on task management, you can send a notification to someone’s activity feed whenever they receive a new task. Notifications in the activity feed will show up on someone’s desktop app and their mobile app, which helps draw attention to important information. Reminder Service A notification that alerts someone about an important date (a due date or a meeting, for example). If your app is a time-sensitive reminder service, consider using the activity feed as your primary way of sharing those reminders. Sender – Usually the name of your app. Avatar – Your app’s avatar or icon. Timestamp – An indication of when your notification was sent Subject – This is included for notifications about chats. Message Preview – A short preview of the message content.
  59. 59. Getting started Framework Components ResourcesActivity Feed PRO TIP Be careful about how often you send notifications. People can mute notifications in Teams, and they’ll be more likely to do so if your service seems ‘noisy’. Best Practices Keep it short Make sure to keep things concise because longer messages get truncated. Bundle your notifications If your service regularly sends a lot of simultaneous notifications, try grouping them into a single notification. For example: “30 tasks were assigned to you”.
  60. 60. Getting started Framework Components ResourcesPersonal Apps Bringing it all together A personal app can bring your entities from all the channels in Teams into a unified view for the user. They combine all the framework elements we’ve talked about into one place for the user to get things done .
  61. 61. Getting started Framework Components ResourcesPersonal Apps Guidelines A great personal app can have the following elements. Conversation – A 1:1 interaction between the user and your bot My Tasks – This can be a purely personal view or an aggregation of the user’s tasks in multiple channels Recent – Don’t just focus on assignment or creation data, what has the user been looking at recently All tasks – Create an area to show all the containers or usage of your product that the user has access to Help – a good app has help content. While we all try to make our services so good our customers won’t need help, there is always something that can use explanation.
  62. 62. Getting started Framework Components ResourcesExamples Things you can start building right now Have a conversation about work items A tab with a list of work items it is easy to talk about what to do next and make sure everyone is working on the same project Find and share a class activity Use a message extension to find and share a class activity with a great summary and instructions for your students Notify users about changes in tasks Message specific people or call attention to entire channel about changes in assignments or status of tasks View all different team tasks in one place Personal apps create one place to see all the different things a person needs to do regardless of which team has created the work
  63. 63. Getting started Framework Components ResourcesExamples Look up a place to eat, just for yourself, or share it too Access your service from anywhere without missing a beat. Convert a chat to a sales opportunity Use the power of the graph and let users send chats to your app to get things done Create a team, add members, and a message Onboard users on your project the easy way. Things you can start building right now eam one place things a gardless ated the
  64. 64. Have a conversation about work items Tabs When your app needs a large area to present information to users a tab is a great place to show a list of work items or a dashboard
  65. 65. Have a conversation about work items Tabs When your app needs a large area to present information to users a tab is a great place to show a list of work items or a dashboard Chat in context Users can chat about your page, interact with it and draw people’s attention to important information all in one place
  66. 66. Have a conversation about work items Tabs When your app needs a large area to present information to users a tab is a great place to show a list of work items or a dashboard Chat in context Users can chat about your page, interact with it and draw people’s attention to important information all in one place Post tab threads Conversations within the tab will be posted in the team’s channel and promote your tab
  67. 67. Share a sales report Message extensions Search for or show recently viewed reports.
  68. 68. Share a sales report Message extensions Search for or show recently viewed reports. Compose with card Add comments and @mention the people who need to see the information.
  69. 69. Share a sales report Message extensions Search for or show recently viewed reports. Compose with card Add comments and @mention the people who need to see the information. Share to team Now everyone can see the summary, open a link to your content or take immediate action right from the chat.
  70. 70. Submit a social media post for approval Social media dashboard A great view of my company’s social media engagement and how we are trending
  71. 71. Submit a social media post for approval Social media dashboard A great view of my company’s social media engagement and how we are trending Submit a post for approval Approval workflows get routed to the right team for quick review and automated posting to your corporate social media accounts
  72. 72. Submit a social media post for approval Social media dashboard A great view of my company’s social media engagement and how we are trending Submit a post for approval Approval workflows get routed to the right team for quick review and automated posting to your corporate social media accounts Notify the right team Approvals are easier when no one person is a bottleneck. Route requests that are actionable without leaving your working environment. Approve from your desktop or on the go.
  73. 73. Customize approval notifications Start a workflow from a bot or a tab Use a Task Modal or an adaptive card to trigger your workflow.
  74. 74. Customize approval notifications Start a workflow from a bot or a tab Use a Task Modal or an adaptive card to trigger your workflow Bundle notifications When your flow is less time sensitive your app can send a digest of notifications instead of interrupting your users with every request.
  75. 75. Customize approval notifications Start a workflow from a bot or a tab Use a Task Modal or an adaptive card to trigger your workflow Bundle notifications When your flow is less time sensitive your app can send a digest of notifications instead of interrupting your users with every request Let your users have control A customized app is an app with user investment. The task modal on the left can be easily built by hosting an adaptive card
  76. 76. Your “task” hub The Development channel has some tasks for Daniella This is a project with specific goals and work items.
  77. 77. Your “task” hub The Development channel has some tasks for Daniella This is a project with specific goals and work items The Marketing channel is in another team But Daniella has things she needs to do here too.
  78. 78. Your “task” hub The Development channel has some tasks for Daniella This is a project with specific goals and work items The Marketing channel is in another team But Daniella has things she needs to do here too. Personal apps can create a unified view Daniella will likely start her day here, and it’s a great place to see all the work she has to do in one place… with handy links to take her to the channels where she needs to collaborate
  79. 79. Find a restaurant Find a restaurant without losing your place @mentioning your app in the command box gives users global access to your app, while they are anywhere in teams.
  80. 80. Find a restaurant Find a restaurant without losing your place @mentioning your app in the command box gives users global access to your app, while they are anywhere in teams. Search with one or more parameters You can make your app incredibly powerful with single parameter or multi parameter queries, and even default queries you save for everyone or per user.
  81. 81. Find a restaurant Find a restaurant without losing your place @mentioning your app in the command box gives users global access to your app, while they are anywhere in teams. Search with one or more parameters You can make your app incredibly powerful with single parameter or multi parameter queries, and even default queries you save for everyone or per user. Share Users can get the information they need and get back to work or share your card with others.
  82. 82. Convert chat to a sales opportunity Message actions Your users can send chats to your service and include time, sender information, text and if you use graph chats above and below the selection for additional context.
  83. 83. Convert chat to a sales opportunity Message actions Your users can send chats to your service and include time, sender information, text and if you use graph chats above and below the selection for additional context. Tasks where the conversation is happening Create one or more actions that appear in our context menus.
  84. 84. Convert chat to a sales opportunity Message actions Your users can send chats to your service and include time, sender information, text and if you use graph chats above and below the selection for additional context. Tasks where the conversation is happening Create one or more actions that appear in our context menus. Confirm with a task module Keeping the user in control but using natural language processing to extract the words you need to get the job done quickly and intelligently.
  85. 85. Onboard a team Kicking off a new project can be easier Using Teams templates and your app you can automate the onboarding process.
  86. 86. Onboard a team Kicking off a new project can be easier Using Teams templates and your app you can automate the onboarding process. Simplify known workflows Select users who will be team owners vs team members to comply with access and role limitations, pick documents in your service or on SharePoint to add to the mix. Add a welcome message.
  87. 87. Onboard a team Kicking off a new project can be easier Using Teams templates and your app you can automate the onboarding process. Simplify known workflows Select users who will be team owners vs team members to comply with access and role limitations, pick documents in your service or on SharePoint to add to the mix. Add a welcome message. Bot notification In the new team we start the project knowing what we are doing and where everything is.
  88. 88. Getting started Framework Components ResourcesMicrosoft Teams | Design Guidelines Thanks! Microsoft Teams wants to hear your feedback! If you would like to participate in future Microsoft Teams research, please sign up using the link below. Your privacy is important to us, and we will never share your information. URL: https://aka.ms/MSTeamsResearch
  89. 89. Appendix
  90. 90. Getting started Framework Components ResourcesMicrosoft Teams | Design Guidelines Let’s Build one
  91. 91. Getting started Framework Components ResourcesProblem Statement Michael is always getting asked to do things in chats. Managing all these requests is taking up a lot of time, it’s frustrating not to be able to share priorities with people requesting work. It’s not just what he’s working on its where your stuff in his priorities. MB Hey dude, I need a logo. Can you bang one out and send it to me by lunch?

×