Uniform the look of Events / Infocentre / glossary / Guided Process Pages

[Leo-Moertenhuber]

Glossary / Common words page looks great, we can apply parts of it to the other pages.

Events & Information Centre Pages:

• remove the frame around the entries and work with horizontal separators just like at the Glossary
• use the same font style/size as it is at the glossary entries

• add the same A-Z/ alphabet to the right side of the screen as it is on the glossary page (same size & same colour)

  Guided Processes:

• use the same spacing/padding around the search/filter bar as it is on the Events/glossary pages
• use the same fontstyle/size as it is on the glossary page
• use the same style for the A-Z/ alphabet on the right side as it is on the glossary page

for all pages if possible: at the guided processes page, we use a header for each letter (so above the first entry that starts with A we have this gray bar with the letter A inside of it) - when the app gets filled with much content, these headers will be useful

• if possible have the gray bar fullscreen / from side to side, but keep the letter inside where it is (not pushing it to the edge of the screen) the goal is that it should like the image below, like the entries in a common phonebook at a smartphone

if anything is unclear le time know @GiuseppeCSI @ivchicano

[gi-dorio]

I have a couple of questions. The first is about the size of the letters on the phone-like list. Wouldn't the glossary size be too big for phones? For example the phonebook on my phone always has all the letters displayed, so you do not have to swipe to get, for example, to the W. I do not know what is preferred from the UX side, so i tought i would ask. The second one is about the list of guided processes. I can leave some white space at the side of the process no problem, but on a 320px screen wouldn't a process with a long name or with many tags look extremely crammed?

[Leo-Moertenhuber]

Thanks for the feedback, it is appreciated.

1) The first point you mentioned is correct, it indeed would be better to have A-Z on the screen, and not having to scroll down to the last letters. With this in mind I would say lets use the alphabet style from the guided processes (Font: Nunito Sans / size: 8px / line height: 12px) but with the lighter blue colour #1976D2

2) I am not sure if we are on the same page on this issue. I wanted to say that we keep the list as it is, but changing the font style from "Nunito Sans" to "Nunito" + allowing the gray header bar (before each new starting letter) to go the few extra px all the way to the edge of screen. Not changing the structure of Title / tags / or icons

To make sure I´ll create matching mockups until next weeks call.

[ivchicano]

I think the alphabet in the info center/events is not a good idea because these pages are not sorted alphabetically /they are sorted by creation or translation date). We should discuss in the next call if this sorting is correct or it should be sorted alphabetically.