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).
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.
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:
The problem is that it’s hard to visually distinquish which icon corresponds to which skill. Help with layout suggestions would be appreciated.