8

Ask DN: "Difficulty Rating" Design Pattern

over 4 years ago from , UI Developer / Full-Stack Designer

Hey everyone!

I'm trying to figure out the best way to show how difficult something is; what are some interesting but clear design patterns you've seen that do this well?

IE: 5 stars for movies

Thanks!

16 comments

  • Sam Pierce LollaSam Pierce Lolla, over 4 years ago

    I think Officevibe does a good job at Likert-style rating UI. Great illustrations for each stage and text to make it especially clear.

    Officevibe UI

    Great question btw.

    3 points
    • Jason Etcovitch, over 4 years ago

      Thanks! And yeah, those are great! I want something like that for sure; illustrations that carry the message clearly, but still add the right attutiude

      0 points
  • Wes OudshoornWes Oudshoorn, over 4 years ago

    Just some ideas:

    difficulties

    2 points
    • Jason Etcovitch, over 4 years ago

      Haa! I love the emojis, it's not something I'd considered but could work really well for my app. It would need to be very clear though, which is challenging. But I love the idea.

      0 points
  • E BensleyE Bensley, over 4 years ago

    Very contextually dependant, but in areas involving complex tasks with specific skills, you could use examples like education or age. Perhaps a slider between 'Simple enough for a child to complete' to 'probably needs a masters degree' or 'novice' to 'expert', maybe using green to red colour scale i the mix?

    Rating

    1 point
  • Eduardo Ramirez HolguinEduardo Ramirez Holguin, over 4 years ago

    Besides what's already been mentioned I'd consider if "difficulty" is the correct metric. What makes the "something" difficult? That could be relevant for your scale.

    Is it difficult for everyone or just beginners? Other similar parameters are: complexity, intensity, familiarity/expertise

    While the colors and illustrations are not great aesthetically, some Rate of Perceived Exertion (RPE) scales do a good job of clearly communicating difficulty when rating physical activities or, as in the example below, pain.

    RPE Scale

    1 point
    • Jason EtcovitchJason Etcovitch, over 4 years ago

      I see what you're saying; our decision to call it difficulty was not an easy one. Maybe its not the right word, since these ratings have to do with a timespan (a longer timespan is a 10 vs. a short timespan is a 1). However, having the keyword duration just doesn't say enough about what the rating entails. I know I'm not giving you a lot to go on here.

      Anyways, I do like the RPE example you've shown. I think that something that detailed would work when assigning a level of difficulty, but something simpler would make more sense when just displaying the predetermined level.

      0 points
  • Darren Treat, over 4 years ago

    Intent: To give a clearly recognizable scale (assuming 1:10)

    So To tackle this you are going to want to use something like the 5-star rating system. HOWEVER stars have a very clear connotation with rating something. Because difficulty doesn't equal quality rating, I would avoid the use of stars.

    Perhaps the use of simple dots could convey it well, I don't see a need otherwise for anything else.

    depending on what you are working on, Consumer reports uses a center weighted scale that goes from normal to bad or to great. Food for thought.

    1 point
    • Jason Etcovitch, over 4 years ago

      I agree against the use of stars, for sure.

      Simple dots could do the trick, but a line of 10 dots is rather long. Cutting some of them in half is so close to how stars are used, its too similar.

      What about having a numbered system, where the user sees the number rating?

      0 points
      • Stef KorsStef Kors, over 4 years ago

        Numbers don't mean anything without reference. How about just telling the user? Easy, moderate, hard. If you need more level you could use 6 step bar alongside the word to give a visual que.

        0 points
  • jj moijj moi, over 4 years ago

    recently i noticed that more and more ratings on websites are skewed to have only 1 or 5. rating between 2-4 is apparently too much work for the users. so something binary like thumbs up / down works for me.

    0 points
  • Anthony Short, over 4 years ago

    It could be worth looking at video game UI patterns for this. Difficulty rating is something that games frequently use and could be a pattern people could be accustomed to.

    0 points
    • Jason Etcovitch, over 4 years ago

      Thats a great suggestion! I've looked at a few, and they all seem very tailored to the specific game. Super Smash Bros. has some interesting ways of solving this.

      0 points
  • Alex ChanAlex Chan, over 4 years ago

    Aside from a visual paradigm which many have already proposed in this thread, I would also pay attention to anchoring. Give the user a baseline either in the manner of an example (i.e., this task is harder than task X but easier than task Y) or something more general like time to finish (similar to how recipes typically have a time to prep and time to cook stat).

    0 points
    • Jason Etcovitch, over 4 years ago

      I absolutely agree; that's something that users will learn as a part of onboarding and ideally will be clear once the rating has been displayed (if they see the number 2 they get a description of what a 2 is)

      0 points
  • Nicola Di Marco, over 4 years ago
    1. 1 to 5
    2. Stars
    3. Sorting up down next elements
    4. Sorting all elements
    5. Top 1 / 3 / 5 etc
    6. Sorting from the best to the worst
    7. versus + versus charts
    8. thumbs up
    9. thumbs up / down

    I would say that it depends a lot on the context.

    Consider also that things become way more difficult when you want to introduce items to an already underway voting

    0 points