Visual representations of job skill levels

Design Lounge Interaction design
1

Greetings! I’m working on the Outreachy internships website (which needs a lot more design work, I know, I have limited time to make things better).

One of the goals this round was to make it really clear what skills were important for Outreachy applicants to have for each internship project. Before, mentors made a list of skills they wanted applicants to have like “Javascript, HTML, Go”. Applicants would assume they would need to be experts in all those skills, and opt out of applying to that project.

Now we gather a bit more data about each skill:

  • Skill name
  • Whether the mentor has a hard requirement for the applicant to have that skill, or they will prefer applicants who have that skill, or it’s a bonus if someone has that skill
  • What skill level the mentor expects:
    • 0 - Mentors are willing to teach this skill to applicants with no experience
    • 1 - Applicants should have read about the skill
    • 2 - Applicants should have used this skill in class or personal projects
    • 3 - Applicants should be able to expand on their skills with the help of mentors
    • 4 - Applicants who are experienced in this skill will have the chance to expand it further

Of course, breaking out skills this way makes displaying project skills difficult. I end up with a table with a wall of text, and it feels like it really needs some icons to make it easier for non-native English speakers to understand.

skills-breakout

I think the skill level could be indicated with either a thermometer or maybe a pyramid that has different sections lit up. E.g. a skill level of 0 would be a blue low thermometer, and a skill level of 4 would be a full red thermometer.

However, I struggle with what icons might represent required, preferred, and bonus skills. Any thoughts?

I’m also not sure if the table is going to display on mobile well. I could replace the text with just the icons, and have a tooltip. Tooltips with bootstrap do work on mobile, but people have to realize they can tap the icon.

I could do something like this:
skills-icons

The problem is that it’s hard to visually distinquish which icon corresponds to which skill. Help with layout suggestions would be appreciated.

2

Hi Sage

I don’t have any more context other than your explanation, so take my suggestions with a pinch of salt :slight_smile:

  1. An icon is nice, but a numeric scale will work just as well. Why not just showing a number from 0 to 4? You could have a legend at the top of the page that explains what each grade of the scale means, and no harm in adding the tooltips as well on the tables.

  2. The table is very verbose, both the headings and the descriptions. That makes it hard to scan. I think it should be possible to cut down the number of words and still convey the message.

  3. On mobile, simply linearise the table or turn it into a definition list, since it’s a fairly simple one.

I’ve added a couple of very quickly drawn sketches. I hope they make sense.

desktop_table

mobile_table

1 Like
3

Thanks for the input! I now have something that looks like this:
skills-breakout-2

4

Thanks for the help! If you’re curious, here’s the final page: https://www.outreachy.org/apply/project-selection/

1 Like
5

Hi Sage,

IMHO, that is a massive improvement. Although as usual, the only way to be sure is testing it with your users! :slight_smile:

Feel free to post any further questions: Outreachy is doing amazing work, and I would be happy to help in any way I can.