Blog Post

E-Learning Challenges
2 MIN READ

Using Button UI Kits to Jumpstart E-Learning Course Development #360

DavidAnderson's avatar
4 years ago

Button Starter Kits for E-Learning #360: Challenge | Recap

Stop Designing from a Blank Canvas! Get a Jump Start on Your Next E-Learning Project with Button Starter Kits 

  • Fantastic starting point for many e-learning projects
  • Mock up projects with button kits to give clients a general idea of how the course will look
  • Customize the buttons after you’ve decided on the general design and layout
  • Save development time by using existing buttons 

  

Today’s authoring tools make developing e-learning easier than ever. However, that doesn’t mean course designers always have extra time to play with new design ideas, much less start every project from scratch. 

The goal for most designers should be to find ways to reuse common course elements like content slides, quizzes, interactions, and, of course, UI elements. 

We have already looked at course starter templates and how they can help designers create a general structure for their projects. This week, we’re going to look at a smaller component of course starters: button kits.

Button Starter Kit Example

Here's an excellent example of a button starter kit that contains prebuilt buttons for navigation, quizzing, and content slides. 

  Example | Download | David Lindenberg | Website | @dvdlindenberg

Maija Perfiljeva

Maija's button starter kit comes in two colors and features a rich collection of core button styles, including radio buttons, checkboxes, and toggle buttons.

 Red: View project | Download | Blue: View project | Download | Maija Perfiljeva | Website | @GamayunTraining

Challenge of the Week 

This week, your challenge is to share a button starter kit using common button styles. Include as many different button types and styles as you’d expect to use in a typical course.

Resources

Share Your E-Learning Work 

  • Comments: Use the comments section below to share a link to your published example and blog post.
  • Forums: Start  your own thread and share a link to your published example..
  • Personal blog:  If you have a blog, please consider writing about your challenges. We’ll link back to your posts so the great work you’re sharing gets even more exposure.
  • Social Media: If you share your demos on Twitter or LinkedIn, try using #ELHChallenge so your tweeps can track your e-learning coolness.

Last Week’s Challenge:

Before you get started clicking this week's challenge, check out the Valentine's-themed examples your fellow challengers shared over the past week:

 

  

Love-Themed E-Learning Examples RECAP #359: Challenge | Recap

New to the E-Learning Challenges? 

The weekly e-learning challenges are ongoing opportunities to learn, share, and build your e-learning portfolios. You can jump into any or all of the previous challenges anytime you want. I’ll update the recap posts to include your demos.

Learn more about the challenges in this Q&A post and why and how to participate in this helpful article.

Published 4 years ago
Version 1.0

88 Comments

  • Hello!

    If a standard 2D button set isn't quite working for you, why not build a button set in MS Paint 3D?

    DON'T TOUCH THAT BUTTON

    Demo: https://bit.ly/elhc360
    Download: https://bit.ly/elhc360download

    I've included the original 3D models in the resources tab, if you would like to adapt them for your own projects. There are also two use cases for this design in the demo - an experimental Pick One and Pick Many quiz.
    • OseNdebbio's avatar
      OseNdebbio
      Community Member
      Haha! My brain and fingers interpreted don't touch as 'touch it' right away. Very creative and engaging.
    • KarinLorbeck's avatar
      KarinLorbeck
      Community Member
      It was very satisfying to push the buttons. Your reverse psychology worked great on me!
    • Ron_Katz's avatar
      Ron_Katz
      Community Member
      Jacob, this is a well designed button set. I noticed the "menu" button didn't quite work as expected.

      Also, when comparing your set to others from the past, I noticed that the buttons used to describe the various states changed when clicked, whereas, in the examples we saw earlier they were just examples of the states so that we could see the changes in the actual buttons. What I mean is that, the five buttons near the top of your slide should not necessarily be interactive, but more of a guide to let the user know what to expect from each state.
    • AnuradhaGopu's avatar
      AnuradhaGopu
      Community Member
      Nice one Jacob! I loved the clean look and the color combinations.
    • Ron_Katz's avatar
      Ron_Katz
      Community Member
      I made the Storyline file available for download under Resources tab.
    • Jonathan_Hill's avatar
      Jonathan_Hill
      Super Hero
      I like how you've maintained the colour contrast through the states so the text remains legible.
  • UI Button Kit for Literacy Learners

    17% of Canadians can't read their own medication label. Do you design for an audience with low literacy levels? You probably will at some point, even if you don't realize it.

    Demo: https://360.articulate.com/review/content/2848b5a6-312d-4bfa-a189-16132c33e9d3/review

    File: https://sloandesign.s3.us-west-1.amazonaws.com/UI+Button+Kit+for+Literacy+Learners.story

    Blog write-up on the reasons for my choices: https://aliciadebilly.com/blog/f/storyline-360-ui-button-kit-for-literacy-learners
    • OseNdebbio's avatar
      OseNdebbio
      Community Member
      I love the size options. The larger buttons are very easy on the eyes. Great reminder to always consider accessibility. Thanks for sharing
    • JodiSansone's avatar
      JodiSansone
      Community Member
      FYI---I tried Atkinson this week with a client, just on an instructional design draft. I really like it but my client didn't like how the zero's were rendered. She thought it looked too technical, but I see how they tried to differentiate zero from "O". :)
      • AliciaSloan-5d2's avatar
        AliciaSloan-5d2
        Community Member
        Interesting feedback, thank you! I agree it seems a bit jarring but I recognize the purpose of it. Glad to hear you tried it out.
    • Jonathan_Hill's avatar
      Jonathan_Hill
      Super Hero
      Very pertinent use case for the importance of readability in button design. Sharp!
  • ENTRY #1 UPDATED: Was able to take a second look at the shadow effect settings I had in place - particularly for the Down state - and, thanks to your suggestions/feedback, made adjustments that effectively eliminated that pesky white fringing I was seeing (also noticed that the shadow effect from the Normal state was indeed "bleeding" into the Down state - thanks again, Jon, for pointing that out!)


    Simple, bold, and clean button set...though there is that annoying white border to deal with (see project feedback):

    https://360.articulate.com/review/content/771f54ce-c76a-4716-a32b-b67cfe824be5/review


    ________________________________________

    2nd Entry

    Came across this sleek UI kit and figured I'd try replicating bits of it in SL:

    https://www.pinterest.com/pin/168673948518013046/?utm_source=extension&utm_medium=click&utm_campaign=muzli


    https://360.articulate.com/review/content/b3965a36-a907-4ef5-9d48-28f103cf2aa8/review
    • Ron_Katz's avatar
      Ron_Katz
      Community Member
      I see you added a 2nd entry. I love the slider button and the "reostat" (I think that's what you call the dial that changes the brightness/color.

      Very cool!
    • Jonathan_Hill's avatar
      Jonathan_Hill
      Super Hero
      Good compositions, very usable. I too am seeing a little hint of white edging, which if I had to guess is due to the internal shadow at that scale. Perhaps tweak the size/blur of the shading effect?

      I've also had experience of states 'bleeding' into one another, especially when building buttons from multiple shapes embedded in the Down and Hover states. I've got round that before by adding same-colour masks within the body of the button, to hide any elements still showing through from other states.
      • DanielCanave618's avatar
        DanielCanave618
        Community Member
        Thanks, Jonathan! Ah - that's a thought! I'll be sure to experiment with that. Good tip!
    • Ron_Katz's avatar
      Ron_Katz
      Community Member
      I like the dual layer look of these buttons, like they are coming out at me. Thanks for providing the download which shows the extra steps you took to make this work (i.e. changing the color of the base when the color of the button changed) Tha nk you, Daniel.
      • DanielCanave618's avatar
        DanielCanave618
        Community Member
        Wish I didn't have to employ that second set of buttons, but it was the quickest solution I could find to prevent the blue hover state to show through once a button was visited.
  • JodiSansone's avatar
    JodiSansone
    Community Member
    Very Peri Button Set
    Demo: https://jodisdemos.s3.amazonaws.com/360+Button+Set/story.html
    Download: https://jodisdemos.s3.amazonaws.com/360+Very+Peri+Buttons.story

    Here's an informal flat button set, done with several shades of Pantone COTY Very Peri, and a touch of my favorite companion color, Touramaline. I included my AI files in the resource tab in case you want to take the original art and change the colors. I also added a blank button so you could add your own icon.
    • KarinLorbeck's avatar
      KarinLorbeck
      Community Member
      Very peritty :) I like the soft lines and colors. Easy to use the buttons and pleasing to the eyes.
    • Jonathan_Hill's avatar
      Jonathan_Hill
      Super Hero
      I particularly like the offset edging on these buttons. Truthfully, I didn't know whether this year's Pantone color would suit a button set, but once again you've shown your keen eye for visual design and made some distinctive but easily readable buttons here.
      • JodiSansone's avatar
        JodiSansone
        Community Member
        I'm with you--I'm skeptical about how often this color can be leveraged. I've tried it about three times and I'm a little fatigued with it already. :)
    • KarinLorbeck's avatar
      KarinLorbeck
      Community Member
      Great button set! I like all the on/off switches and the light switch as it is turns off :)
    • Jonathan_Hill's avatar
      Jonathan_Hill
      Super Hero
      What a neat selection of buttons. I can see many uses for these.