Botframework-composer: Simplify the Create menu (Templates and Examples)

[yochay]

Describe the bug

The create menu is confusing:

• mix examples with templates
• the templates (examples) are too small and do not include enough info to know what template to chose
• there is huge over lap between the template list to the example list to the right

Version

ec07d07f

To Reproduce

Steps to reproduce the behavior:

1. click on new

What is a template

• A template is defined as a shaped piece of metal, wood, card, plastic, or other material used as a pattern for processes such as painting, cutting out, shaping, or drilling.
• In computing (software) a template preset format for a document(s) or file(s), used so that the format does not have to be recreated each time it is used.
• In Bot Framework SDK we use templates in the code generator to create a bot with enough boilerplate code to run and perform basic functionalities.

Templates in Composer

• In Composer, templates are pre-defined bots that include basic functionality and serve as a starting point for developers.
• Developers do not expect to delete a a lot of Actions and dialog from a template

Experience

• User chooses to create a new bot from a curated list of templates
• Once created, the user see a bot that is 1) functional – runs upon clicking the start button; 2) provide the minimal required actions and dialogs - aka a ‘good (clean)’ starting point for a bot.

Name | Functionality | Purpose
-- | -- | --
Echo | Should Echo be the Blank bot? -          ConversationUpdate -          Echo back anything a user says | Simplest form of a functional bot that deals with conversation update (for user greeting – only sone some channels) and
ToDo with Luis | -          ConversationUpdate -          Basic Todo functionality (as exists today) -          Using LUIS | Starting point for a bot using LUIS and small/simple enough to delete/ change
Language & Knowledge | -          ConversationUpdate -          Simple help to show LUIS -          Unknow intent to show QnA | Show using both LUIS and QnA in a bot including use scores.   Majority of customers use / start with QnA   Note – we need to handle error case when QnA is not setup because Composer doesn’t take care of that

A template needs to include meaningful template description

Proposed changes to the create menu

1. Change title of menu to Create a bot
2. Change create from scratch to Create blank (or empty) bot
3. Create from template needs to include the list of templates describe above

Why do we need blank or empty?

• Mainly because dev are accustom to software tools creating empty bots

Why examples/ samples are not good templates?

The purpose of example and/or samples us to learn how to use Composer, the LG and LU system. Samples/ examples are a learning tool. The bot created from samples/ examples are functional but include many actions and steps that are use to illustrate how to use LG, specific Actions, etc.
Some of the example are very big and if we position them as templates, developer swill need to work hard to delete many actions and dialog that they don’t need.
Template should be used as a starting point from which it is easy to build a bot.
Most of the current example includes bots that do not fit the Template description.

[yochay]

Ping @christopheranderson and @DesignPolice

[DesignPolice]

@yochay got it... How quickly does this need to happen? I have some previous iterations, but will need to look at some different approaches - so I could use a ballpark date.

[christopheranderson]

Some examples of project creation flows that I'm using as inspiration from Microsoft properties:

Visual Studio 2019

• They've got a landing page that has a "create new project" button on it, then it transitions to this UI:

• Everything is a template. They are not differentiating between an "empty" project and a project "from a template". I like this approach.
  
  
  
  • They indicate what's included tags, which is helpful for folks that like scanning. (And we know that folks like scanning alot - it's in Microsoft's Voice guidelines)
  
  

Logic Apps

• After you create your Logic App and you navigate to your resource, you are presented with this UI:

• They've got a "Common triggers" section at the top, which when you click starts you off with a Logic App that just has that trigger. This is smart for Logic Apps, but I don't feel it fits our scenario. I don't think this is the equivalent of promoted "Hero" scenarios.
• Then they have templates section. Just like VS, they have blank next to everything else, rather than it being a separate option.
• The templates section is designed to have a lot of templates, just like VS.
• Separate discussion, but I like the video which explains how the UI works being in this same space.

Function Apps

• This isn't as clean of a comparison as Logic Apps or VS Projects, since each Function is independent from other Functions in a Function App.
  
  
  
  • When your app is empty, you get prompted to create a new function:
    
    
  
  
  • You then choose your development model
    
    
  
  
  • If you choose in portal (which is the closest to our experience), you get two "Hero" scenarios, then an option for more templates.
    
    
  
  
  • Then you get dropped on this page:
    
    
  
  
  • Overall, I'm not a fan of this page. It's kind of hard to scan and get a good sense of what I can do.
  
  

[christopheranderson]

Comments on the current proposal:

1. Blank or empty has more evidence to be useful since all 3 experiences had some equivalent.
2. Let's not differentiate an "empty" bot from "template" bots. "Empty" is just a template choice. So I wouldn't have the "from scratch" option unless we have some reason to believe it's more obvious what it's doing than "empty".
3. While we might not like all the examples we have as templates, I'd advocate that we spend time fixing the examples or building equivalents. Most of these UIs are designed with a dozen or more choices in mind. For my money, I prefer the Visual Studio 2019 design for our use case. We will have more bot templates (such as ones with custom code, ones that talk to Logic Apps, ones for Teams, etc.). Let's design for many, then trim the ones we have to be the right ones as we progress through the preview.
4. We should allow for a description section for the templates. I like the tags in the VS design.
5. Icons appear to be useful since all 3 designs include them.

[christopheranderson]

Also, we have two ways to create a bot. From the +New and from the right nav. I think we should steal the right nav experience and move it into +New (or remove +new and leave the right nav, I can see both options being viable)

[christopheranderson]

It's not clear based on the proposal, but I don't think we should have "templates" and "samples/examples". If we think there is a class of projects that are purely reference material, I'd advocate we stick them in GitHub/docs for the time being. Bifurcating that experience is just going to cause confusion, especially today where I can't open two bots at the same time.

[DesignPolice]

Solid thoughts Chris, let me try and taper a few things this week - I will add a meeting for next week. We also chatted this morning at standup about the option of having a library option in the future, may need to loop Chris and Marieke in for his thoughts so whatever we build aligns with the future.

That said this new box full of these crazy boxes is a mess, and I want to get this solved quickly.
The two ways to make a bot is strange for sure as you noted.

thanks
m

[mareekuh]

@christopheranderson - above we're talking about BOT (ex)samples/templates - we haven't talked much about designing sub-dialogs, but do your thoughts also apply to the approach for creating new DIALOGS? (note: currently we present todowithLUIS as a BOT but it could very well be one of the capabilities/sub dialogs of an 'office utilities' bot that somebody might want to create for their customers.

[christopheranderson]

@mareekuh - creating dialogs vs creating bots are going to have some differences, but I think one of those differences is key:

When you create a bot from template, you have no other context. When you create a dialog, there is existing context (intents, other dialogs with conflicting names, in memory state, etc.). I'd imagine that if/when we do dialog templates/snippets, that we'd need to consider that context and ask if it makes sense for us to a) have more than one entry point b) help fill in that context. If a dialog snippet requires 3-4 manual steps after creating it to be useful, it will feel like we should wizard that.

I'm inclined to think that we should delay the dialog snippets stuff until we have some killer scenario (qnamaker probably being the scenario). I think that Skills integration is probably actually closer to what people want in terms of reusing stuff like an office utilities set of functionality.

[christopheranderson]

Summarizing notes from meeting/offline chat with Yochay:

1. The UI only knows about templates
2. We remove the Examples section of the Home page (because examples don't exist in our UI)
3. We keep the +New modal for starting a new project
4. We want a "hero templates" section (in the modal) with 3 templates called out (like one of the older designs)
5. We want a list of the rest of the templates (that can be arbitrarily long)
6. We want an icon, title, and description for each template

FYI @DesignPolice @mareekuh @yochay

[DesignPolice]

@christopheranderson this on my radar for today, what are the 3 Hero Templates... I'm not sure where that debate landed "empty, echo etc etc"

[DesignPolice]

Now that everyone is back, lets try and land this plane...

Last versions I set up -
https://www.figma.com/file/Ux0vucOvaLL2xH22WpFgV65X/MarcB_Composer-UI?node-id=4320%3A0

Let me know. :-)

[mareekuh]

Updated. Show list of samples in sam manner as list of recent files:
https://www.figma.com/file/HLtKaKHctLldivPnzQ7BqQOI/Composer-MI-lotsotings?node-id=1405%3A4999

@cwhitten, @hibrenda and FYI @DesignPolice

[mareekuh]

Can we close this one and add a new item to incorporate topic/asset/skill /sample and re-usable dialog browsing? Reason: this was from the Yochay era, it's extremely lengthy and not that relevant anymore.

(here's concept sketch for the 'Asset library' idea).

[mareekuh]

@cwhitten can we close this item?
I believe there is another item for the 'Create' or 'New dialog' wizard/dialog that covers this and is more recent and to-the-point. (-: