[ZA] investigate putting NCOP and NA members on the MP profiles page

[JenMysoc]

The MP Profile page which you reach from the Hot Topics section on the main menu bar provides you with a list of MPs.

These MPs are only from the National Assembly and PMG would like it to show both the National Assembly and the NCOP.

We will need to find a way to indicate whether a member is a member of the NA or NCOP but we are waiting for feedback from PMG to indicate how they would like to do this.

[JenMysoc]

Ok clarification has come through; PMG would like this to look similar to their own website

With the NA and NCOP members in separate lists but side by side on the same page with a heading showing which list it is.

[mhl]

@JenMysoc Could we ask for some design time to look at this early in the next sprint? The code shouldn't be hard, but I'm not sure how it would be best to lay this out.

[JenMysoc]

Yep! It's on the spread sheet for next sprint :)

On Friday, 2 December 2016, Mark Longair notifications@github.com wrote:

Could we ask for some design time to look at this early in the next sprint? The code shouldn't be hard, but I'm not sure how it would be best to lay this out.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/mysociety/pombola/issues/2214#issuecomment-264489506, or mute the thread https://github.com/notifications/unsubscribe-auth/AD-ib_cY0W6aVuALgmHa5QImt6XBgCd1ks5rEEEwgaJpZM4K4LsP .

-- Jen Bramley Partnerships and Projects Manager, Democracy team mySociety | mysociety.org/ Skype: JenMySoc @mySociety

mySociety helps people around the world set up our code, sometimes for free! Please see https://www.mysociety.org/international/ for more details.

[zarino]

Styling them into two vertical lists, side-by-side, is a trivial task. But it raises a few questions:

• How do we deal with pagination? Paginating makes sense when there is one list per page. But once there are two lists on the same page, the mental model breaks down. Do we paginate both at the same time (ie: show 10 results in each column, with a single pagination control at the bottom) or do we let people paginate separately (ie: 10 results per column, with a separate pagination control for each column). The PMG page avoids this confusion by not paginating at all – which we probably won't want to do.
• How do we deal with the location and alphabet filters? Similar to pagination – should there be a "Where:" select box and an "A B C…" menu at the top of each column, or should there be a single set of controls that filter both columns at the same time?

I wonder whether @wrightmartin has any thoughts?

[wrightmartin]

I know PMG already do it, but the two lists side-by-side doesn't work for me

• There's no reason to do it, except to fill space on a large-screen layout. There's no relationship between the two lists that needs to be conveyed in this way
• On smaller screens (mobiles, tablets, old laptops, windowed browsers) there's not going to be room so we'll still have to put one before the other
• As @zarino rightly points out, this creates usability issues when it comes to bread and butter list stuff (pagination, filters etc).

[zarino]

The core problem we’re trying to solve is that, when you visit this "Member of any Parliament" page (which should probably, technically, be called "Members of Parliament" or "Members of any House"), you’re only actually being shown members from one of the two Houses in the South African Parliament.

It would be akin to TheyWorkForYou having a single "MPs and Lords" page, but only actually showing MPs on there.

Displaying two separate lists, side by side, is just one way of showing members from both Houses.

Another way we’ve not discussed so far, is just combining the members into a single, alphabetical list, with each person being shown with their name, photo, party, location, and the House they’re part of.

[zarino]

Out of interest (because I was sceptical that anybody even used the pagination on this page) I’ve had a quick rifle through the analytics.

For 1st Dec 2015–1st Dec 2016:

Turns out 'inner' pages, like /position/member/parliament/?page=2 account for almost half of sessions that visit the /position/member/parliament/ at all. So people are using the pagination links. God knows why.

The /position/member/parliament/ section—regardless of whether you’re on the first page of results, or a deeper page—is visited in only 0.04% of sessions.

(For bystanders: A "session" is a collection of pageviews or events where no more than 30 minutes has passed between one pageview/event and the next. ie: It’s what most people would call a single contiguous "visit" to a website.)

[wrightmartin]

Displaying two separate lists, side by side, is just one way of showing members from both Houses.

ah, my apologies, I didn't know that. Well there is a reason then - however it doesn't work on anything except large screens

[wrightmartin]

What about a top level page that shows the members in lists, but then a page for each of the houses after that? Something like...

You could show the search bar etc at that level, but detailed lists are a level down

[zarino]

I guess it comes down to why people are visiting this page.

When we did a small amount of research into this for the TheyWorkForYou redesign, we found the reasons people visited the /mps page were, in order:

1. Find their MP (by name or location)
2. Find a famous MP / an MP from the news (by name)
3. Download CSV of all MPs for analysis

I wonder whether it’s the same for this "Member of any Parliament" / "MP Profiles" page.

@JenMysoc do you know whether we, or PMG, know more about how this page is used?

[zarino]

Notes from a super useful call with Gaile and Megan at PMG:

• Gaile wants “speed of access” – even if it means losing other niceties like MP pictures etc. People need to find a rep by name as quickly as possible.
  • Can we drop pagination? One single alphabetical list is quick to navigate.
  • Can we load images only when they’re scrolled into view? (everypolitician.org does this, and it’s buttery smooth.)
• People might not necessarily know the difference between an NA member and an NCOP member. They just know the person’s name, and that they’re a representative of some sort.
  • We should present reps in a single list, rather than two.
• Often reps’ names are hard to spell, so searching can be difficult.
  • Can we make search fuzzier / more forgiving of spelling mistakes?
• When search doesn't work, being able to quickly scroll down a list and locate the person by name is an important fallback.
  • Can we sort the unified list of reps by surname?

[zarino]

Plan for this:

• Remove “view as a grid” link and view=grid URL param (position_detail.html).
• Remove pagination. Remove “Showing X to Y of Z” message.
  • Lazy load person images on scroll.
  • A-Z shortcut links (_alphabetical_pagination.html) link to section on page, rather than loading new page.
• Add A-Z subheadings inside the list, so you know how far down you are.
• Larger font-size (1.3em at least) for person names.
• Display house (National Assembly, or National Council of Provinces) below each person’s name. (Will need a new icon!)

Nice-to-haves:

• Live filter list on name <input> keyup?
• Affix A-Z shortcut links to top of window on scroll?

Does this look sensible @mhl?

[zarino]

@mhl I’ve done everything in my list, apart from the Nice-to-haves. Will have a go at them tomorrow.

[zarino]

@mhl – All done!

[zarino]

Notes from cross browser testing

Everything works fine in Chrome (accounting for 50% of PA sessions) and Safari on Mac and iOS (accounting for another 13% of sessions). Also fine in IE11 and IE9 (together accounting for about another 11% of sessions).

Opera Mini accounts for about 13% of sessions. Page loads fine in Opera Mini, but only the first few lazy image placeholders are replaced by real photos, and scrolling doesn't trigger more placeholders to be replaced. Live filtering doesn't work, I assume because keyup events aren’t being sent.

Generally on small screens, the list filtering UX isn't ideal, because the on-screen keyboard has a tendency to cover up everything below the search box, meaning, when you type, you can't see anything change below, making you more likely to just press "Search" or "Go" on your keyboard – leading you to the general search results page.

I'll look into scrolling the search input to the top of the screen when it's focussed, maybe limiting it to narrow short screens. – Done!

Will also look into whether there’s anything we can do about scroll and keyup events in Opera Mini. – Nope, Opera Mini doesn’t support the input, keyup, or scroll events (docs) so there’s no way round it. I can browser sniff for Opera Mini and force Blazy to replace the images but there’ll still be a significant delay before the images appear. Hmm…

[mhl]

Nice work, @zarino - I think we should see if PA are happy with this version of the page before taking a decision about whether we should aim for a workaround of some kind for Opera Mini.

[zarino]

@mhl – I’ve sent an email to PMG with a link to the staging site.

[zarino]

For the record, headline feedback from PMG was:

• Remove everything except the representative’s name
• Present names surname first, eg: "Abrahams, Beverley Lynnette"
• Fuzzy search in the live javascript filter box, to handle spelling mistakes

@JenMysoc is getting to the bottom of the first two points. (We’re a bit worried that removing photos, in particular, will make the page less approachable for non-specialists, and we’d like to know more about the reasons behind a surname-first display.)

For fuzzy search, this library looks pretty effective, fairly lightweight, and relatively simple for us to implement: https://github.com/krisk/Fuse

[JenMysoc]

The fuzzy search is detailed under #2249 :)

[zarino]

The fuzzy search is detailed under #2249 :)

@JenMysoc: Yes and no. #2249 concerns making database searches fuzzy. It’s probably not obvious, but the "live filtering" box I added in #2246 doesn’t actually hit the database – it just hides and shows stuff that is already on the page.

If a user ignores the live results, and presses the red Search button, or the Enter/Return key on their keyboard, then they get taken to the main search page, which does do a database search.

So I guess, ideally, we’d add fuzzy searching in both places. But it's not the same ticket.