search

medic / cht-core

The CHT Core Framework makes it faster to build responsive, offline-first digital health apps that equip health workers to provide better care in their communities. It is a central resource of the Community Health Toolkit.
https://communityhealthtoolkit.org
GNU Affero General Public License v3.0
468 stars 218 forks source link

Improve UI for profile page #1572

Closed abbyad closed 8 years ago

abbyad commented 9 years ago

We now have the person's details hidden by default: image

and expanded: image

@Lesterng, it would be good to revisit this page with some UI input.

abbyad commented 8 years ago

Moving to current iteration for design work only.

sglangevin commented 8 years ago

@abbyad should this design work include thinking on where in the profile we could indicate that a woman is pregnant and show her EDD?

abbyad commented 8 years ago

Yes @sglangevin, I think that falls in here too.

diannakane commented 8 years ago

-- formatting as shown in mockups. -- Updates to tasks, e.g. show “1 week / 2 week / View all” -- Place and people cards -- Add task notification bubbles to family members in list view

@Lesterng add mockups

ghost commented 8 years ago

Completed https://invis.io/XA7CTCBGU#/163504603_Area-person

screen shot 2016-06-08 at 2 43 40 pm
sglangevin commented 8 years ago

@diannakane @Lesterng what about the History section? Will that just be a list of everything that grows longer and longer? Or is there a plan to show the history by time period, similar to Tasks?

diannakane commented 8 years ago

For now, the list will grow, but this is another issue that we will be addressing as the profiles continue to evolve.

On Fri, Jun 10, 2016 at 10:08 AM, Sharon Langevin notifications@github.com wrote:

@diannakane https://github.com/diannakane @Lesterng https://github.com/Lesterng what about the History section? Will that just be a list of everything that grows longer and longer? Or is there a plan to show the history by time period, similar to Tasks?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/medic/medic-webapp/issues/1572#issuecomment-225239998, or mute the thread https://github.com/notifications/unsubscribe/ABmSXgEqd6hVG9_IzW3XET9LedMO3h5Qks5qKZn3gaJpZM4GilYY .

P.S. Join our community. Sign up for Medic Mobile's newsletter http://medicmobile.us8.list-manage.com/track/click?u=e5b07d2afb4b273eaff8e3c53&id=a3129fc799&e=c511575255 .

Dianna Kane | Senior Designer Medic Mobile http://www.medicmobile.org/ +1 216 262 2204 @_M_edic http://www.twitter.com/medic Facebook https://www.facebook.com/MedicMobile @diannakane

sglangevin commented 8 years ago

Ok, I figured that would get updated along with the tasks. We've gotten a couple of feedback points that the list gets very long pretty quickly and it seemed like that update would fit well within the profile UI update.

diannakane commented 8 years ago

I think we could apply the 1 week / 2 week / view all filters to the history tab in this update without doing any additional design work on it. The reason I said it was for a future update is because there are other issues related to the profile that we need to look at, like highlighting critical information (danger signs, EDD), showing personal targets, etc. and I had grouped revisiting the utility and functions of the history tab within that. However, I agree that managing the history list can fall within this update since we're solving a similar problem for Tasks.

On Fri, Jun 10, 2016 at 10:48 AM, Sharon Langevin notifications@github.com wrote:

Ok, I figured that would get updated along with the tasks. We've gotten a couple of feedback points that the list gets very long pretty quickly and it seemed like that update would fit well within the profile UI update.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/medic/medic-webapp/issues/1572#issuecomment-225249521, or mute the thread https://github.com/notifications/unsubscribe/ABmSXha0YTaQzND9rE-r6xUrCLXMpJL9ks5qKaNvgaJpZM4GilYY .

P.S. Join our community. Sign up for Medic Mobile's newsletter http://medicmobile.us8.list-manage.com/track/click?u=e5b07d2afb4b273eaff8e3c53&id=a3129fc799&e=c511575255 .

Dianna Kane | Senior Designer Medic Mobile http://www.medicmobile.org/ +1 216 262 2204 @_M_edic http://www.twitter.com/medic Facebook https://www.facebook.com/MedicMobile @diannakane

sglangevin commented 8 years ago

That makes a lot of sense and would be a great interim update as you continue working on the other updates you mentioned. Can that be added to the mock-up easily?

diannakane commented 8 years ago

I will add it to the list of changes in the issue. The mockups are supporting documentation. @lesterng, if you are doing other updates to the mockups, you could add this in, but calling it out in the list should also work.

On Fri, Jun 10, 2016 at 12:32 PM, Sharon Langevin notifications@github.com wrote:

That makes a lot of sense and would be a great interim update as you continue working on the other updates you mentioned. Can that be added to the mock-up easily?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/medic/medic-webapp/issues/1572#issuecomment-225274935, or mute the thread https://github.com/notifications/unsubscribe/ABmSXivSgQJvrCiuLmrfxGeZwkHDeslVks5qKbu9gaJpZM4GilYY .

P.S. Join our community. Sign up for Medic Mobile's newsletter http://medicmobile.us8.list-manage.com/track/click?u=e5b07d2afb4b273eaff8e3c53&id=a3129fc799&e=c511575255 .

Dianna Kane | Senior Designer Medic Mobile http://www.medicmobile.org/ +1 216 262 2204 @_M_edic http://www.twitter.com/medic Facebook https://www.facebook.com/MedicMobile @diannakane

ghost commented 8 years ago

@diannakane @sglangevin Working on the mobile versions. I will add date filters to the History in mobile views. Should the time frames be months??? Having to adjust things for mobile. I'll back track to the web view once I got the mobile views working.

diannakane commented 8 years ago

I support the "months" suggestion! How about "last month," "last 3 months," and all?

On Fri, Jun 10, 2016 at 1:45 PM, Lester NG notifications@github.com wrote:

@diannakane https://github.com/diannakane @sglangevin https://github.com/sglangevin Working on the mobile versions. I will add date filters to the History in mobile views. Should the time frames be months??? Having to adjust things for mobile. I'll back track to the web view once I got the mobile views working.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/medic/medic-webapp/issues/1572#issuecomment-225291141, or mute the thread https://github.com/notifications/unsubscribe/ABmSXkafoUSv_9rbtkiky0mOLcvLP9mVks5qKcz9gaJpZM4GilYY .

P.S. Join our community. Sign up for Medic Mobile's newsletter http://medicmobile.us8.list-manage.com/track/click?u=e5b07d2afb4b273eaff8e3c53&id=a3129fc799&e=c511575255 .

Dianna Kane | Senior Designer Medic Mobile http://www.medicmobile.org/ +1 216 262 2204 @_M_edic http://www.twitter.com/medic Facebook https://www.facebook.com/MedicMobile @diannakane

sglangevin commented 8 years ago

That sounds great!

ghost commented 8 years ago

@diannakane @sglangevin Mobile mockups for person tabs. District: https://invis.io/QD7ML6T7C#/166036779_MContacts-District Branch: https://invis.io/QD7ML6T7C#/166037295_MContacts-Branch Area: https://invis.io/QD7ML6T7C#/166037415_MContacts-Area

Added history date filters in months

ghost commented 8 years ago

@diannakane @sglangevin updated history screen. Used: 1 month | 3 months | View all Last month refers to the previous month. So if you are in June, last month would be May. History refers to entries dating back from present date back 1 month. Let me know if this makes sense. https://invis.io/XA7CTCBGU#/163504603_Area-person

abbyad commented 8 years ago

Can we start listing out all of the desired changes explicitly for the mobile version too? Eg It appears that the headers are a different colour for each level of the hierarchy

ghost commented 8 years ago

@diannakane

  1. Removed phone numbers from all Places: Branches, Areas, Households.
  2. Made bar at top of all places and people the same color, Rose.
  3. Increased font size on everything for mobile view
  4. Removed Edit from FAB
  5. Added 3-dot menu icon the top header right with drop down for "Edit" and "Delete" global actions
  6. Made all list items 100% width of mobile screen. This differentiates "Card" from list items on mobile view.
  7. Added person icon to "Person" card https://invis.io/QD7ML6T7C#/166036779_MContacts-District

Usability observations:

  1. District and Branch level screens only shows locations when on the "Peoples" tab. This is confusing.
  2. When Drilled into a Branch, Area or Household, "Search" is no longer available. Hard to know where to find a person.
  3. Drilling down from Branch > Area > Household > person > task of far to many steps. Going back to the top level with the back arrow takes the same amount of steps.
  4. Making the top header the same color makes it harder to distinguish between places and people.
  5. No animations for routing makes it hard to know where you are at in the application.

Although this mirrors the Web app views with responsive logic, the mobile usability falls short of an application.

diannakane commented 8 years ago

Creating a design issue for updates top-level header and app navigation from @Lesterng's observations above

SCdF commented 8 years ago

So is this still blocked on requiring design work? Or is there something for a developer here?

diannakane commented 8 years ago

This is done, as shown in these mockups: https://projects.invisionapp.com/share/QD7ML6T7C#/screens/166340657

Detailed specs for many of the elements are attached below.

@lesterng is there another file that contains detailed specs for the family and individual profile pages, that includes Tasks?

garethbowen commented 8 years ago

Split off the Tasks and Reports filters so they can be done separately: https://github.com/medic/medic-webapp/issues/2721

estellecomment commented 8 years ago

This is a design issue, please don't add implementation details or commits to it.

@Lesterng, can you give the status on mocks? Are they done? For all types of logged in users, and all levels, both desktop and mobile?

Is there a place where we can either list the mockups to have them all together, or maybe an invision shared folder? Right now we're relying on links to invision scattered among the github issues (when you lose the link you lose the mockup!)

estellecomment commented 8 years ago

(LGTM @garethbowen)

sglangevin commented 8 years ago

What is the status of this issue? It's not clear what needs to be done (if anything). I would suggest opening a new issue or editing the title of this one to clarify what is needed.

abbyad commented 8 years ago

This had been kept open as an overarching issue but now makes sense to close in favour of the newly spawned issues. If further design work is needed for the profile page it can be opened in medic-design.