I'm currently working on a web app, which has different kinds of status. It can either be nothing, claimed, verified or claimed and verified.

enter image description here

This is the current version for status "verified". I'm wondering which is the best solution to show the different status types as icons within the corner by changing the icon or color. What's the appropriate icon to show "claimed"? Or should I use different colours and badge shapes?

I was wondering if that's a possible solution:

enter image description here

The shape of claimed is part of the combined status and also the shape of verified is in the final shape. Also petrol is the company color, so the combination of blue and green is petrol. Would it make sense?

Really appreciate your feedback and input :)

  • I'm voting to close this question as off-topic because this is a user experience question and should be asked on ux.stackexchange.com – AndrewH Aug 12 '19 at 16:45
  • I had the same question at UX and it also said it's off topic. Where should I post it? @AndrewH – chillmao Aug 12 '19 at 17:08
  • 1
    For myself I think it can fit either here or in UX - I think it's a valid question here, if re-formatted as a critique question. @chillmao - please take just a moment and look through How to Ask and look especially at the portion around critique questions, and see if a few minor tweaks won't make this question fit - I think it will! – GerardFalla Aug 12 '19 at 18:33
  • I wouldn't issue the same icon in the last two badges but I think the concept of combining the first two badges has merit. – Zach Saucier Aug 14 '19 at 2:57

Do you have to use badges? Because an Exclamation point doesn't remind me of a claim being completed. That reminds me of an important notice.

Depending on the application, I think a checkmark next to each word "Claimed" and "Verified" would make it more clear. Another idea is to use a greyed out icon and then it turns green when done.



I think my trouble with this concept is that the shapes are so generic / arbitrary seeming that I don't gestalt read "Claimed & Verified" as being a combination of the two earlier statuses - I can understand it as a design concept ex post facto, but it doesn't immediately leap to the fore when simply viewing these.

I would, I think, apply some of the thinking behind Google's Material design interface guidelines and Apple's iOS design guidelines - perhaps using shadows to imply Z-axis motion, or you could consider using only one background shape which has a stroke type A in first state, a stroke type B in second state, and finally no stroke but a fill in final state.

Or you could in fact allow the Claimed & Verified status background shape to be an overlay of the two lower statuses, rather than boolean unioning them as you've done:

enter image description here

I'm just thinking in terms of supporting your conceptual framework in which each status is a clear sequence ending with a visibly final status.

Hope this helps.

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.