search

peacecorps / medlink

A project to make it easier for Peace Corps Volunteers to order their medical supplies from a local Peace Corps Office. Volunteers can order by sms or webform. PC Staff interact with the orders in a simple to use dashboard.
https://www.youtube.com/watch?v=uNkwizhzMVA
Other
39 stars 36 forks source link

Create separation between communications in History page #426

Open choquette33 opened 9 years ago

choquette33 commented 9 years ago

We need to do some work on the UI of https://pcmedlink.org/users/1/timeline. It's too difficult to quickly grasp the communications.

Couple of suggested fixes:

  1. Add a line, or shading to separate interactions from each other.
  2. Distinguish between incoming and outgoing by using left and right alignment. Similar to most text messaging apps: Incoming messaging could be aligned to the left and outgoing messaging could be aligned to the right.
  3. I'm not sure we need the mark as received or flag on this page. I don't think they will be taking action on this page, but rather using it for reference. If we do keep it, we need the buttons to line up well (same horizontal) with an order so that I can tell which interaction I am flagging for follow up. Right now I am confused on if I am flagging the interaction that appears above or below the buttons.
jamesdabbs commented 9 years ago

It seems like this is a pretty natural place to put flag / approve actions. If not here, we'd need a separate view for the user to do that in the web. What would that look like (if not this)?

Summoning @BigBossSR for his design expertise.

choquette33 commented 9 years ago

I had a couple people look at this and suggest that we group and organize interactions by order.

So as a PCV who has put in three orders over my time (orders not items) I look at this and see three clearly separated orders. On those orders, the easiest thing for me to do is to hit the got it button.

If I click on an order it would expand for me to look into the log of interactions, but only for reference.

image