Design Gude - Best Practices

[tsherman]

Is there a design guide to best practices / solutions for a partner. My team will be programming an LTI App using API extensions, but I am the designer, not the engineer. Although I have briefly read the LTI and API documentation. My goal is design how our survey and reporting engine will be added to Canvas and where it will show up in the menu. Thanks.

[awilliams]

Hey  @tsherman ​, I think this is a great question and shows good foresight on your part. I am not a developer and I hope you get many great responses, but one thing that did occur to me when I read your question was the StyleGuide.  @jperkins ​ has created several documents that describe using different elements from the StyleGuide. Many of us in the admin/design world end up using the StyleGuide for our courses, but it's actually created for people like you to create LTI's that feel native and carry over best practices in design from Canvas.

You can find the two documents I referenced below:

Using the Canvas Styleguide: Buttons

Using the Canvas Styleguide: Icons 

[jperkins]

Todd,

If you are building an LTI tool the styleguide that Adam is referring you to is to help your app feel like a part of native canvas. However, it looks like your question is more in relation to where your app will show up. There are 4 places that it can show up that you can configure. Below are the documentation links for it.

Edu App Center - Extensions - Canvas: Navigation

Edu App Center - Extensions - Canvas: WYSIWYG

Edu App Center - Extensions - Canvas: Link Selection

Edu App Center - Extensions - Canvas: Homework Submission

Best of luck!

[tsherman]

Thank you Jeremy Perkins,

Correct, I was wondering where it would show up.

I had not yet discovered the Navigation or Homework extension so that is a huge help for me.

Course Navigation is interesting but looks like it should be used cautiously because it is declaring I am so important I need to be seen in the main navigation.

An early idea is for us to add a survey button to the WYSIWYG editor, then when the teacher selects it (I would suggest to the teacher to add it under quizzes and not assignments), we would show a list of the surveys the school has purchased. Although each survey requires its own key so not sure I can combine a total of five surveys. I need to see if we can ask for more than one key in the app configuration dialog. Still learning.

The Link Selection is not yet intuitive for me although I have seen other LTI apps use it. It may solve the problem where we want to the teacher to embed the report engine so he or she can see the results of the survey.

Thank you again.

Todd