cancel
Showing results for 
Search instead for 
Did you mean: 
Highlighted
Navigator

Do you use InstUI? We want to hear from you!

Hi, Canvas developers! Our UI team is working on way to improve InstUI, Instructure's UI library, from an open source standpoint. If you are using InstUI in your projects, our UI team would like to hear from you!

Please reply and share your experience. Some things we'd like to know:

  • Why you are using InstUI
  • How you are using InstUI in your projects
  • What you currently like about InstUI
  • What changes would improve your InstUI experience

...and anything else you'd like to contribute about InstUI.

Thanks!

Erin

Labels (2)
36 Replies
Highlighted
Surveyor

Hi Erin,

First, I'm excited to start looking into what instui can do for projects, and I appreciate you sharing this resource. However, looking around, I had no idea this even existed, and according to the Community Search, this is the very first topic to mention InstUI. https://community.canvaslms.com/search.jspa?q=InstUI

When was this released? It's current version 5.8.0...

I'd love to answer the bullet points above, but will need to take some time to evaluate and possibly work InstUI into some projects.

The link in the OP are for the docs, here's the repo...

GitHub - instructure/instructure-ui: A UI Component Library made by Instructure, Inc. 

Highlighted
Navigator

Hi, Robert,

We know that some customers may have been using it, but we actually don't know much. We know some customers were previously aware of the Canvas style guide and used that until InstUI was created, but we have never promoted it because InstUI is designed for the engineering department and requires using React components. However, we want to make some improvements if anyone IS actually using it and just want to learn more about how it is being used. And if not, we're actually okay with that because of that whole customization management thing when you choose to create your own custom tools... Smiley Wink 

Thanks,

Erin

Highlighted
Community Member

Hi Erin - We started using InstUI earlier this year and have integrated it (v5.5.0) into 3 of our LTI apps. The main reason for using InstUI was our switch to React and desire to provide a seamless user experience with native Canvas style. Specifically we have used the below components so far:

  • Elements: Badge, Button, Pill, Spinner, Table
  • Forms: All components
  • Dialogs: All components except Tray
  • Layout: Flex, Grid, View
  • Navigation: Breadcrumb, Link, TabList
  • Typography: Heading, Text
  • Utilities: ApplyTheme, CloseButton, Mask, ScreenReaderContent
  • Many Icons

Some of the most helpful components have been the layout components, autocomplete select, and data/time inputs.

Regarding improving our InstUI experience: We started with v4.7.0 release and have upgraded several times. There have been a few upgrades that have broken behavior not mentioned in the release notes. Where would the team like this feedback?

Thank you and great work!

Highlighted
Navigator

Hi, Ismail,

Go ahead and post them here if you wouldn't mind. Our UI team is aware of this thread and check it periodically!

Thanks,

Erin

Highlighted
Community Member

Hi Erin Hallmark‌,

This is coming from an end user rather than developer, specifically Course and Instruction Designer.

Our school serves students with Special Needs (Autism). To ensure that the Online Learning Environment on Canvas is autism-friendly, our e-Learning Team is putting in efforts to ensure that the learning interface is consistent and easy to understand by our students with autism. The contents need to be properly chunked into small bite-size portions to be easily readable and understand by our students with autism.

We use the following UI components from the Style Guide to help us organise and chunk the contents:

  • Accordions
  • Tabs
  • Modal Popups

Our e-Learning Team would be interested to be updated when will InstUI 2.0 be available on Rich Content Editors so that our Course Designers can use it on our course contents.

Here are some examples on how we use the (soon to be deprecated) UI Components on our course pages:

Accordion

308152_pastedImage_2.png

Tabs

308221_pastedImage_1.png

Modal Popup

308154_pastedImage_6.png

General Layout of Contents

308153_pastedImage_4.png

Highlighted
Navigator

Hi, Daniel,

We're appreciative of your feedback! I've made sure that our UI team is aware to help them plan improvements to InstUI accordingly.

Thanks,

Erin

Highlighted
Community Member

I am not using it at all.  As an end user, I could follow the old style guide because I am looking for simple things to organize my content

  • Buttons
  • Tabs
  • Accordions

However when I access this information, it appears that the functionality to add buttons, tabs, and accordions has gone away.  This is functionality that I need because I have lots of information to organize since our lecture and lab classes are taught under that same class section number.  This just made things harder for me and this is especially problematic since we are switching to Canvas on May 15th, 2019.  

I need more support in the area of organization. Please create more documentation and training for organization of materials as you plan the future.  I feel like I am in the wild, wild, west of design and quite lost at that. 

Highlighted
Navigator

Thanks for your feedback, Joressia!

Erin

Highlighted
Community Member

This. All of this. ^^^^^^^

The old styles--and, just as importantly, the old style guide--were accessible to users in the context of courses. Instructional designers could use the elements to create engaging, responsive, accessible course designs that actually enhanced education and user experience, and they could do it completely within the context of a course, using basic ID knowledge.

InstUI is only available in the context of LTI, which means it can no longer be used by ID's to create courses; it can only be used by developers to create tools that exist outside of Canvas itself. Worse, unlike the former standard, straightforward, HTML/CSS implementation, the ReactJS classes are complete gobledeygook to anyone who isn't a full-time React developer, and who can afford those?

While I'm sure it's great for third parties who want to sell institutions pricy workarounds for the soon-to-be insurmountable shortcomings of Canvas's lackluster editor, this makes it useless to most institutions, and, frankly, may make *Canvas* useless for many institutions. If making successful user experiences is going to mean ripping out more and more modules and replacing them with custom external tools and hiring web developers to supplement the instructional staff and maintain the mess of spaghetti code, what is the attraction of Canvas, and particularly SaaS Canvas, in the first place? If we're going to recreate Moodle and all it's problems, at a certain point we might just as well go back to the original...

I *really* hope the designers realize their mistake, here, and refocus on their actual users in the actual Canvas UI before they put too much more effort into making things easier for third-party vendors creating LTI tools.