1

I have a multi-step form that requires filling in relevant details in each step. On each step we save the data. If a user leaves the form at any time, the draft will be saved and can be accessed from his profile page. Also, when a user wants to submit a new item, any draft items will be shown as a notification to start from where he left or continue with a new submission.

I currently show a card for every submitted or draft item on my profile page. The card contains some basic details. The missing data is currently shown with a hyphen/dash. Is there a better way to represent missing field (image, location, publication, patents, etc) (Refer Card 2) or a standard practice ?

enter image description here

3 Answers 3

0

In my opinion, it should be understood that it's a card but also that it's incomplete or without real content, that is, a double narrative.

Graphic double narratives are not easy to make, not so much for the practical aspect, how to do it, but for the perceptive one, it has to be understood by any type of user.

Regarding the first point, I would include all the components of the card, with their corresponding location but without legibility. The most immediate effect and the best result is blurring the content:

enter image description here

Regarding the second point, it's clear the reason for this illegibility should be indicated: it's an incomplete but editable object. I would look for a way to indicate the possibility of changing the state, for example with a visible editing icon, with a semi-transparency effect of the background when rollover:

enter image description here

1
  • In my case there could be 1 or more information missing (Publication or Patents) so cannot make the entire card blurred. Thanks for the suggestions and definitely use it whenever applicable. Apr 18 at 13:57
0

One reason the dash might not be ideal is that it doesn't distinguish between required missing info and optional missing info. People often use a dash as shorthand for N/A.

I would suggest iconography, along with colours for faster identification and properly accessible readable text behind the scenes.

1
  • Thanks for the iconography suggestion. I was thinking to go with iconography approach but once again it leads to multiple similar icons. Apr 18 at 13:59
0

What is missing in your current design is a trigger to actually add the details. Instead of the dashes you can add links. It doesn't matter if they appear multiple times and lead to the same edit modal, the point is to show what's missing and provide a direct way to add it.

enter image description here

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.