2

I am working on a web product that deals with music education. Teachers can give assignments and attach instructions to that assignment.

Not every assignment will have instructions attached to it. So the first icon next to "assignment name" will indicate that there were indeed instructions attached to an assignment, and the second will indicate that the student actually looked at it.

The question is whether the state should be indicated by placing additional icons, or whether we can indicate the state with the word itself?

Current setup

  • Hi there, you don't appear to have asked a question? – Joel Tebbett Jul 18 '17 at 13:30
  • So is this a view for teachers only? And what's the yellow circle at the left indicate? – Mike M Jul 18 '17 at 13:31
  • You appear to be asking about icons. Because icons mean different things in different cultures and icon trends come and go, we cannot recommend or validate icon choices. – Andrew Martin Jul 18 '17 at 13:31
  • @AndrewMartin sorry: The question is whether the state should be indicated by placing additional icons or whether we can indicate the state with the word itself? – Sam Rao Jul 18 '17 at 13:37
  • @JoelTebbett sorry: The question is whether the state should be indicated by placing additional icons or whether we can indicate the state with the word itself? – Sam Rao Jul 18 '17 at 13:38
2

Icons are subject to interpretation. You could try small text indicators. I'm not sure if your intention is a list or cards.

Instead of the icon, you can put a simple header for instructions (I just put a light gray header here; you could fit more data in a simple list, where this would be a column header).

Since you haven't posted a mock, here's a try:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

I didn't put a checkmark in the instructions column, because reading instructions didn't seem synonomous with completing the assignment.

3

According to research done by Nielsen/Norman, icons alone are rarely clear enough to convey their meaning; it's better to include labels with them.

So you really have two options: (1) icons with labels or (2) just labels.

  • i was thinking of doing a small pop up on mouseover that would explain what they are about? But your comment has made me pause and think. – Sam Rao Jul 18 '17 at 13:50
  • 1
    If you ever move into touch, the pop-up will be useless. – DarrylGodden Jul 18 '17 at 13:53
  • 1
    Not necessarily - transforming hover effects to touch effect in CSS isn't difficult, and if you can justify having an element as "hover to see", you can justify having is as "touch to see". – dennislees Jul 18 '17 at 13:57
2

Something like this may work if you need/want to use icons.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.