1

enter image description here

I'm designing a vertical responsive timeline for a health-tech company, and the timeline is supposed to show different "events" throughout a patient's physical rehab program, each being represented by interactive cards. To emphasize the difference between cards/content, we're using icons (see image). The issue arises with the icon placement. I tried placing them in front of the bold text, as they're related to that content, but it just looks kind of awkward visually, plus it doesn't work well responsively with mobile. As a possible fix, i put the icons on the top right of the cards (see image), which works well responsively, but I didn't know if that would create a problem with how patients relate the information in the text with the meaning of the icons - especially when the cards are in their larger desktop version, with more white space separating the title and icon. Does that make sense? Appreciate any thoughts/feedback!

Improve this question
4
  • 1
    Maybe also use color. For the icon or along one of the edges of the cards. Then revisit the icon placement, my guess is that it is fine where it is.
    – user109724
    Commented Aug 2, 2018 at 15:05
  • I see no problems with the placement of the icons. But you might consider that icons by themselves don't usually convey the right meaning. {Citation}
    – Ken Mohnkern
    Commented Aug 2, 2018 at 16:47
  • Hey @KenMohnkern, thanks for the feedback, and great point; I dont think the icons in themselves are doing enough work to communicate the meanings I'm trying to convey. I'll have to think on that, but good to know the icon placement is okay. Thanks again!
    – Conor
    Commented Aug 3, 2018 at 15:28
  • Hey @gerstemout that's a great idea, I just added a sliver of color on the left of the cards and it does a lot to differentiate the card categories beyond just having the icons. Thanks for that!
    – Conor
    Commented Aug 3, 2018 at 15:30

3 Answers 3

Reset to default
1

Could you integrate the icons into the orange circle you have on the left? That way the user can scan their time-line for icons of interest a bit quicker. That or left align it next to the date and title. It should fit snugly next to both those. (instead of just the title as suggested).

Edit: furthermore try to the left of the entire card in between the card and orange circle.

Good luck!

Improve this answer
1
  • Thanks Trevor W! I thought about integrating the icons into the circles, but it gets tricky when there is more than one "event" card on the same day; so there might be up to 4 different event categories all taking up one orange circle ie day. But i'm intrigued by your idea to put the icons between the card and circle; think i'll give it a shot. Thanks again!
    – Conor
    Commented Aug 3, 2018 at 15:24
0

Rather than "in front of the bold text" maybe just place them in a left-hand margin:

enter image description here

Improve this answer
2
  • thanks @tripehound, i like that! I'll see what it looks like in mobile, hopefully the text won't get split. Thanks for the idea/mockup!
    – Conor
    Commented Aug 3, 2018 at 15:32
  • @Conor I also like the idea of a sliver of colour mentioned in one of the comments.
    – TripeHound
    Commented Aug 3, 2018 at 15:50
0

You could also work with colors for quick recognition.

I am not that great with design; however I hope the I could mediate the concept

enter image description here

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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