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:

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.

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...

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?

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:

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.

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.

I guess as an end-user, instructor, I am very confused. So, you deprecated the old tools, but have not fully rolled out a new solution? Am I understanding this correctly? What are the thousands upon thousands of instructors, TAs, and staff support members with no React background or access to do now that we can't customize our own course pages?

After this weekend's release broke all our tabs and accordions, I tried to follow the links to InstUI. It is only accessible to programmers. The ease of use of the style sheets is now gone and I don't see an easy solution to fixing our tabs and accordions layout. What was the thinking on releasing it without putting the rich content editor interface in place? From the comments I've been reading, I believe you have thousands of instructors scrambling today to make their content layout usable.

Daniel's solution will probably work better for most institutions than what I did since what I did ties into the bigger Cidi Labs DesignPLUS Design Tools. However, you may want to test the Canvas Embed Image tool in the rce toolbar to make sure you can still add files from the Canvas course or Flickr. When I loaded jQuery back into Canvas, it broke that functionality. Granted, I was adding more than just the accordion JavaScript so you might be good but I thought I would pass that on as something that was an unintended consequence.

Thanks for the heads up! I am seeing the same as Daniel. The search box is there. I can type search terms but the text doesn't display or even highlight. I can search though and the results do populate.

I did a quick look at the CSS and found that there is a "font-size: 1em;" that if I remove it the text field displays.

This update (from a year ago) is helpful info. I very much want to use InstUI, but the required resource allocation (namely time) makes it impossible for me to do so. I'm a solo ID managing the school's subaccount of our institution's instance of Canvas. Just keeping up with the maintenance on any changes is prohibitive, given that I'm also wearing a number of other hats related to the school's ed design + tech resources and services.

I know I'm not alone in this type of circumstance where we may have the skills to use InstUI (or the stubbornness to figure it out!) but we have to limit what we can maintain and support over the long term. It's something I bump into frequently with Canvas, and is my biggest frustration with the platform (or maybe second to the lack of parity between the browser UI and the apps).

I wish Instructure would provide:

a detailed explanation of the path forward and the progress made to date that can be understood by an end user that has zero experience with coding (e.g., https://instructure.design/#index); and

clear explanations re: the intended audience in context with the resources available (i.e., on the instructure.design page note that end users might consider contacting their LMS admins for support in implementing these features, or note that the intended user for those materials are developers and not teachers or instructional designers)

leading up to your solution(s) for fully implementing these affordances in the default Canvas themes (via the RTE or HTML or something functional for the average end user who may not know what to do with HTML much less InstUI).

Canvas's current reliance on the community for providing these explanations and support (as wonderful as this community is!) leads to a lot wasted time and effort by those us of who are tasked with supporting use of the platform by faculty/adjuncts/admins who vary considerably when it comes to being able (DIY <> facilitated course builds) and willing (luddite <> techno-utopia) to use the LMS effectively.

The reason we created this thread is so that we can learn more about how the previous style guide was being used. I'm not sure if you've read InstUI: Instructure’s Style Guide 2.0, but it outlines some of the background and thoughts that could come from generating more feedback. Like any Canvas project, our teams have to collect research and create a plan that would best serve our customers and incorporate that plan into existing resources and timelines.