Information Centre: Provide more user-friendly overview

balcse commented 4 years ago

The current table gives no good overview and is not very user friendly. The many icons and attributes use a lot of space that could better be used to display more text. Make the columns with attributes narrower. Maybe don’t display the whole text, but shorten longer paragraphs (like [...])

ivchicano commented 4 years ago

I can add a show more functionality to the descriptions. @Leo-Moertenhuber What do you think? Maybe the mockups need to be adapted.

Leo-Moertenhuber commented 4 years ago

A show more option is a good idea - and yes of course the mockups need to be adapted. But maybe I think I need to generally rethink the structure of the page. Maybe we need to change the layout of attributes vertical instead of horizontal. So that the info/ text is on top, and when opening the user will see the category/ user type / etc. I will try it out and let you know as soon as possible. I would suggest I will rework the mockup first and then we can implement it if we agree on it to avoid unnecessary coding.

Leo-Moertenhuber commented 3 years ago

Mockups are adapted. I tried to make the columns narrower, but it did not do very much in terms of user-friendliness. If we have some content entries with many topics/ types selected but not much description text it would give us some new problems. Therefore I would propose to go with a horizontal layout instead of the vertical one for the description and attributes.

row - title
row - attributes (category / types / topics)
row - description (Now 15px in text size (instead of 17) and with a character limit of 250 - after 250 characters we can use a "read more" option)
row - images in case there are some uploaded (After reviewing the image issue with my colleagues we think it makes more sense to add the images with an attachment, pretty much like it is shown at the bottom of emails)
Publish toggle moved to the right end of each entry

additionally a small update for the filter bar on the left side - to make it more user friendly, we can always show the first 3 options for each type of filter (Category/ Topic / User type) as the default mode.

here is a preview of the 1 of the 3 new mockups in Figma info centre update

https://www.figma.com/file/i2iikyHbwCfngbNETXqHPK/MICADO-Migrant-APP---look-%26-feel?node-id=78%3A20

ivchicano commented 3 years ago

I think if we go with these changes then the events and the glossary editors should be adapted to this type of look and feel. Also the components for these pages are reused so changes to the information centre look & feel get reflected upon the glossary and the events pages

Leo-Moertenhuber commented 3 years ago

This is a good point and it's correct that events and glossary should have the same look and feel as the information centre. I was hesitant to update the other pages (events/glossary) at the moment since it's currently, even without these changes, a stressful time.

But do you think it would be feasible to update all 3 pages for the first APP release from your point of view?

ivchicano commented 3 years ago

The components are being reused for all these pages so it would actually be harder to just update 1 page and not all 3

Leo-Moertenhuber commented 3 years ago

Okay, thats good to know. Then I would say I´ll update the mockups for the events page and the glossary as well (hopefully by the end of the day) and when you agree with the proposed changes we could start implementing them?

ivchicano commented 3 years ago

I am going to start implementing the changes and correct them when the mockups are finished so that there is some work done by then

Leo-Moertenhuber commented 3 years ago

perfect. Thank you very much!

ivchicano commented 3 years ago

Changes have been done to the information centre, the events and the glossary. Please provide feedback on these pages.

Leo-Moertenhuber commented 3 years ago

Thank you, you're quick! The Mockups in Figma are now updated as well for all 3 pages.

For all 3 pages:

please use font size of 15px (instead of the current 17px for the descriptions)
please make the "read more" button smaller. Currently, if I checked correctly it is at 116x32 - let's try 85x20px
add a "read less" button, so users can close it again if they want to. (instead of a grey button with white text use a white button with a grey outline and black text so we have a clear difference between the 2 buttons (examples are in figma)
is it possible to show a maximum of 2 rows of description text? and then showing the "read more" button if more text is available. At the moment the length of text before the "read more" button differs between the entries.
top right button (add event/info/term) has a different blue than the rest of the "add" buttons in the app. Please change the colour to #0B91CE

Information centre & Events page:

please have the size of the icons for topics and user types 24px instead of 30px (both at the filters and the actual content)
please add a 5px spacing between the icons (if more icons are shows as for example at the "Integration summit" on the Events page)

Events Page:

please move the start/ end dates below the description

ivchicano commented 3 years ago

All the changes have been done. Please check on them. One thing I am not to sure about is if the show more/less limited to 2 rows should also apply if there is an image. (In the current content there is an example you can check) chrome_5KXJPo7JAg Should the full image be shown or should it be cut like this?

Leo-Moertenhuber commented 3 years ago

Great Job, Thanks!

The image is a good question, if its cut like this it looks a bit weird. But I have the fear that if we show it fully, and people start uploading many images it will look confusing as well. I would say we keep it for now like this, and if this is a big issue during the first user tests we can still change it. What do you think of this solution?

also at the events page:

I think we should hide the start and end date as well behind the read more button. So that the button is always the last thing per event/ information entry
I´m sorry, I forgot about the icon for the side menu on the events page. I will send them by mail in the next minute.

please make 2 small adaptions to the read more buttons

please remove the drop shadow
please add a 16px padding below the button (if it's not possible to add padding only on one side then let's do 10px above and below)

ivchicano commented 3 years ago

I think it is a good idea to wait for feedback on this topic from users. The changes have been done, the site should be updated in a bit.

Leo-Moertenhuber commented 3 years ago

Looks great! Thank you very much.

micado-eu / pa_application

Information Centre: Provide more user-friendly overview #91