Homepage: UX for power-users or CSOs?

[jedm]

Mockup of homepage design makes start-a-search much easier than old site. But combination of Search box, All Contracts (left side), By Country (left side), Most Recent (left side) and four different summaries: contracts, country, by-year, by-resource (center area) creates many entry points with no clear visual priority.

A summaries-based homepage is great for experts and "power users" but less helpful to guide other user types (especially CSOs, civil servants, MSG members). So, suggesting two changes to make the design more launch-ready:

1) These other users (CSOs, MSGs, gov't) will need a simpler homepage design with fewer options. Of the 8 options in current design, most important are probably:

• Search
• Countries
• Resources

2) Current design does not have a prominent place for site introduction language, guidance for what to do first, samples of contracts or analyses (a "Tour") to help users know what they are seeing and get started with clear expectations. This may be okay for "insider" users (who are definitely a priority), but it will be better if version 1.0 of homepage includes this friendlier UX from the beginning, so we don't have to change too much to fix it later.

Am not requesting user-ready language now! But need a design that sets priorities among the many possible paths to documents and gives stronger priority to introduction, how-to and getting started.

Basically, would be better to streamline and beautify homepage to focus on:

• Search (with an easy way to "open" Advanced Search/All Filters)
• Introduction language, Visual how-to guide
• Countries
• Resources

Examples of cool tours through a data site: http://www.globalresiliencepartnership.org/surat-story/ http://datos.gob.mx/historias/

Mockup: https://projects.invisionapp.com/share/VZ3SHI63A#/screens/93792697

[anjesh]

I want to review the home page design for the subsites. We will work on something that will also address couple of other design related issues here. https://github.com/NRGI/resourcecontracts.org/issues/524 https://github.com/NRGI/resourcecontracts.org/issues/631 https://github.com/NRGI/resourcecontracts.org/issues/486

[anjhero]

Hi all,

Here're a new design proposal for the homepage. The design decisions in this mockup are made to address issues mentioned above and in the other issue pages ( #524 , #631 , #486 ). Please take a look:

The two designs have exactly the same structure (with difference in color of the map section).

The top section introduces the platform with a link to go to about page. The search functions similar to the current site. The card presents important stats (no. of contracts, countries and resources). It also shows a trend of number of contracts signed over the years. These data will be dynamically generated and will change based on the information in the platform. Clicking on the bars of the histogram will open up contract listing page filtered by the particular year of the bar.

The map below helps to visualise how the amount of contracts vary from a country to another. Clicking on each country will open up the specific country page.

Looking forward to hear on this.

[charlesyoung]

Looking good. I think that the second map looks better. Is the map updated dynamically? Also is the map and graph only showing contracts (main) or does it include associated documents?

[KaitlinCCSI]

I like the direction this is going, but a few points:

• It seems busy, and I think some things could potentially be cut. For example, not sure if the language above the search bar "This repository of mining ..." is necessary?
• I like having the pages in the top right -- I think they're easier to find -- but don't think they need to be at both the top and in the footer. Can we keep at the top, and then just have the API in the footer?
• What is the menu in the top left? If it is still the side bar, then I think it should perhaps be called something else, and maybe even have a different icon.
• What is the "contracts" at the top of the page? Does it take you to the "All contracts" page? Keeping in mind @jedm's original comment at top of this thread, I wonder if we need to provide more clarity to users regarding how they access contracts, since there would now be multiple routes to doing so from this page.

[anjhero]

To answer your comments:

@charlesyoung Yes, the map and the graph will update dynamically as and when changes are made in the system. They also include the main contracts and associated documents as well.

@KaitlinCCSI

It seems busy, and I think some things could potentially be cut. For example, not sure if the language above the search bar "This repository of mining ..." is necessary?

• Yes, it should be okay if we remove the sentence "The repository of mining and ...". It will make the UI look less busy.

I like having the pages in the top right -- I think they're easier to find -- but don't think they need to be at both the top and in the footer. Can we keep at the top, and then just have the API in the footer?

• The reason they're in the footer is that in some cases the page might be too long and it might be easier for them to navigate through the footer rather than scrolling all the way to top. An alternative for this can be to have a sticky header that remains intact when user scrolls down. An issue with this is it will always be taking the header space. Another alternative is to have a "back to top" link when a user scrolls so that it is easier for the user to go back to the top menu section. However, in both the cases, it shouldn't be a worrying factor to have menu repeated in site's footer. It is usually a place which is used as a sitemap placeholder.

What is the menu in the top left? If it is still the side bar, then I think it should perhaps be called something else, and maybe even have a different icon.

• Yes, the menu in the top left is the sidebar. The menu written on it is to clarify in case a user doesn't understand the icon. Should we call it "Explore" instead? Let us know.

What is the "contracts" at the top of the page? Does it take you to the "All contracts" page? Keeping in mind @jedm's original comment at top of this thread, I wonder if we need to provide more clarity to users regarding how they access contracts, since there would now be multiple routes to doing so from this page.

• Yes, the "contracts" at the top of the page will take the user to the "All contracts" page. Users may not always want to search and simply want to view a contract listing. This is what the "contracts" will do. Keeping @jedm 's comment in mind about making search, countries and resources the main entry points, we've made them occupy the top above the fold section of the site. The stats section - 1052 contracts, 72 countries and 39 resources will also be linked to all contracts, countries and resources pages respectively.
• Should we rename "Resources" page link at the top to something else? This might be confused with the petroleum and mineral resources section.

Here's a revised version of the design without the "The repository of mining ..." text:

[anderspeders]

@anjhero: One additional comment from NRGI side is to distribute the Menu on the right side (vertical view) to the bottom of the screen (horizontal view).

[anderspeders]

Additionally - flagging the option that we could add "Country" to the search on the front page. More here: https://github.com/NRGI/resourcecontracts.org/issues/803

[jedm]

Hi @anjesh and @anderspeders - these are all good upgrades to the page! A few additional thoughts on UI and UX:

• The space under the 3 big numbers is an excellent teaching and promotional space. Instead of using it for the trend of year signed, recommend it be used to link to a sample contract, a sample country page, a featured term in the glossary or, eventually, a "tour" that shows the top 5 tasks you can do on a Contract page and the top 5 ways to get the most from the Search page.
• Can we add one more full-width panel above or below the map? An extra bar/row would be a perfect place for a 10-20 word introductory message that could include, for instance, text prompts to the top activities, with hotlinks, links to a prominent contract, links to the tour, or other key explanations or news. (See the OCP site or the Guinea site for (somewhat) good examples of what I mean.)
• It seems strange to have the little Advanced Search text where the Search button often is and the Search button to the left. Suggest a slightly smaller Search button flush right with the search box, with Advanced Search text below that, in more traditional place.
• Can YI choose a different map "projection" of the World map? This one wastes a large percentage of space at the top and requires more scrolling before you reach any countries, thus lengthening the page. Consider maybe using the world map projection we chose for the Resource Governance Index.
• Is there any way to include key pages in the collapsible left navigation (eg, Search, Resources, Glossary)? This has always been a confusing function for people and is only here now because the original design was borrowed from DevSeed 2011 site.
• If it is preferred to keep the left bar as it is, it would be good for @KaitlinCCSI and Sam to show it to Perrine once more to confirm CCSI is happy with it. (Personally I think it should at least be changed to show fewer options in each category).
• Should footer say "Publish Contracts" or "Submit ..."?

[KaitlinCCSI]

A few other things:

• For left bar: we still think it is too hard for users to understand with "Menu". "Explore" might work, but I'm not sure that it's intuitive enough. Is it possible to maybe have an arrow with "Find Contracts" or "Explore Contracts" rather than the menu icon?
• For left bar: Perrine asked whether the three categories (countries, commodities, signature years) could be collapsible/expandable? @jedm would that address your concerns?
• Also, "Publish contracts" should be "Publish Contracts" (capitalize the C) and "FAQ" should be "FAQs" (add an s)

[jedm]

@KaitlinCCSI, personally I think the left bar is duplicative of Search and the left menu should be repurposed as site navigation, which is missing, but if others think it is useful (any analytics on its usage, @byndcivilization?) then definitely not advocating for arbitrary change.

One bug I found in the left bar is that if I click on it then go back in my browser, I return to the homepage with left bar open, but left bar cannot scroll.

[KaitlinCCSI]

Yes, it is fairly duplicative. The only main benefits I see of this left bar as compared with other options for reaching Ks from front page are: (1) this bar is one of the only places that provides counts for all different types of contracts; and (2) it allows quick navigation to specific countries/resources/years without having to go first to country page or resource page. But for point (1), I'm sure we could find another place to add these counts if we think important, and for point (2), it's probably not a big deal to have to first go to a broader landing page.

I don't generally find the left bar that useful though just because it's too hard to even know it's there. I'm assuming most users don't see it. Perrine hadn't known it was there until I told her this morning.

[jedm]

If the top navigation is going to be implemented, I recommend deleting the left bar. From a web standards perspective, the icon with three lines (hamburger) stands for "nav menu" so it will be strange to have it provide something else - also, a nav menu is now proposed for the top of the page, so that is also likely to be confusing/duplicative.

Regarding the navigation bar across top of page:

• will this be global or only on homepage? (recommend only on homepage)
• if only on homepage, recommend repurposing the three lines/hamburger menu to repeat the same options on internal pages (instead of adding to internal pages with menu across top)
• Recommend removing FAQ, Publish/Submit Contracts and Contact from top and including these in footer only
• Probably obvious, but reminder that order in footer should be same as order across top

[anderspeders]

A few quick notes here:

• Traffic on left bar: We have very light traffic overall (as I recall 50-100) hits a day so there's little point in parsing this. NRGI would be glad to see left bar go but understand if CCSI wish to keep this on. @KaitlinCCSI Please confirm.
• Harmonization of menu across <-- Agree
• "It seems strange to have the little Advanced Search text where the Search button often is and the Search button to the left. Suggest a slightly smaller Search button flush right with the search box, with Advanced Search text below that, in more traditional place." <-- Agree
• "Recommend removing FAQ, Publish/Submit Contracts and Contact from top and including these in footer only" <-- Agree
• Should footer say "Publish Contracts" or "Submit ..." <-- I would suggest this to be turned into a section called: "Country sites" which would need some updated content from Guinea, SL and Philippines
• "Tour of site" <-- Agree. Until now we have not had the time to write this.

[jedm]

For this question, great point about promoting the country sites - maybe even worth a full "bar/section" in the single-page scroll.

I interpreted "Publish Contracts" as note to users that they can propose new contracts to add, which is a bit different.

Should footer say "Publish Contracts" or "Submit ..." <-- I would suggest this to be turned into a section called: "Country sites" which would need some updated content from Guinea, SL and Philippines

[KaitlinCCSI]

Re left bar: I think CCSI is fine dropping this.

Once we have consensus on moving forward, do we know when these changes will be implemented? Can they be implemented by the end of this week? We're putting together a how-to-use-the-OLC-site video that we had been planning on releasing before the WB conf next week, so a timeframe would be helpful in understanding how to proceed on the video, and if we should use current screenshots or not. Thanks.

cc @anderspeders @jesseccsi

[anjhero]

Hi all, to sum up:

• We're dropping left sidebar. So we will not have the menu hamburger icon (3 lines icon) and simply have the logo and the top navigation items (Contracts, Resources, About ...) - confirmed
• Have top navigation only in homepage. The top navigation will appear in the left sidebar for rest of the pages. The left bar will appear on clicking hamburger icon for pages other than homepage. We feel this might make the site look inconsistent for the users. - need confirmation
• Remove FAQ, Publish/Submit Contracts and Contact from top navigation and include only in footer - confirmed
• We will be using the space under the 3 big numbers to something else other than the trend. We'd appreciate it if we could finalise on the content for this space. The design might differ depending on the content for this section. - need confirmation and content
• We will be adding a horizontal space for an introductory text below or above the map. Please provide a finalised text for this. - need confirmation and content
• The search button will be flushed to left of the search field with advanced search text below the search box. - confirmed
• We will use a different map as suggested similar to the one in for the Resource Governance Index - confirmed
• "Publish contracts" changed to "Publish Contracts" - confirmed
• "FAQ" to "FAQs" - confirmed
• Vertical display of menu in the bottom will be changed to horizontal view at the bottom of the footer section. The menu in the footer will be - Contracts, Resources, About, Glossary, FAQs, Publish/ Submit Contracts, Contact - confirmed
• Country sites section in the homepage to promote country sites - need confirmation and content

If these changes are confirmed and we receive the content, we will update another draft by today. And if the changes are finalised then, we can start implementing it from tomorrow. Unfortunately it seems we can't complete the changes by this week as our front-end team is quite occupied. We can however structure the backend part of the homepage based on the design meanwhile. The implementation will take 3 days in total and can finish it by early next week. Looking forward to hear from you.

[jedm]

Responding only re. Search button, suggestion from me + @anderspeders was (emphasis added):

Suggest a slightly smaller Search button flush right with [ie, under] the search box, with Advanced Search text below that, in more traditional place." <-- Agree

[anjhero]

Sorry, I meant to the right of the search box.

Thanks! -- Jed

[KaitlinCCSI]

One more point to follow up on earlier discussion: the "Resources" page at the top should be changed to "Additional resources". If that's too long, it could be called "Guides", though not everything on that page is a guide. @anderspeders @jedm any suggestions? We're fine with either.

Whenever you rename this page, can you please make sure that this URL --> http://www.openlandcontracts.org/page/resources <-- does not break? You can redirect it if necessary, but it needs to remain valid. Thanks.

[jedm]

"Guides" is best. Says what you mean, preserves the word "resources" to consistently mean natural resources.

[KaitlinCCSI]

Works for us. Can you please change that page to "Guides" on both RC and OLC, but please make sure that the old URLs redirect and do not break. Thanks.

On Fri, Mar 11, 2016 at 10:49 PM, jedm notifications@github.com wrote:

"Guides" is best. Says what you mean, preserves the word "resources" to consistently mean natural resources.

— Reply to this email directly or view it on GitHub https://github.com/NRGI/resourcecontracts.org/issues/186#issuecomment-195660353

.

Spam https://antispam.law.columbia.edu/canit/b.php?i=01QsQNNIQ&m=fdf2f87d823e&t=20160311&c=s Not spam https://antispam.law.columbia.edu/canit/b.php?i=01QsQNNIQ&m=fdf2f87d823e&t=20160311&c=n Forget previous vote https://antispam.law.columbia.edu/canit/b.php?i=01QsQNNIQ&m=fdf2f87d823e&t=20160311&c=f

KAITLIN Y. CORDES

[anderspeders]

Thanks for the summary,

One addition: "Publish Contracts" should be changed to: "Country sites" as this will showcase the country subsites.

[KaitlinCCSI]

Please only change "Publish Contracts" to "Country sites" on RC. For now, please keep as is on OLC, because we have more info on that page than just country sites.

Thanks.

On Sun, Mar 13, 2016 at 8:10 PM, Anders notifications@github.com wrote:

Thanks for the summary,

One addition: "Publish Contracts" should be changed to: "Country sites" as this will showcase the country subsites.

— Reply to this email directly or view it on GitHub https://github.com/NRGI/resourcecontracts.org/issues/186#issuecomment-196093483

.

Spam https://antispam.law.columbia.edu/canit/b.php?i=01QtBabtg&m=f4fb929cb7b4&t=20160313&c=s Not spam https://antispam.law.columbia.edu/canit/b.php?i=01QtBabtg&m=f4fb929cb7b4&t=20160313&c=n Forget previous vote https://antispam.law.columbia.edu/canit/b.php?i=01QtBabtg&m=f4fb929cb7b4&t=20160313&c=f

KAITLIN Y. CORDES

[anjhero]

Hi all,

Thank you for the input. We still need confirmation (and contents in some) on following to work on design of the homepage:

• Have top navigation only in homepage. The top navigation will appear in the left sidebar for rest of the pages. The left bar will appear on clicking hamburger icon for pages other than homepage. We feel this might make the site look inconsistent for the users. - need confirmation
• We will be using the space under the 3 big numbers to something else other than the trend. We'd appreciate it if we could finalise on the content for this space. The design might differ depending on the content for this section. - need confirmation and content
• We will be adding a horizontal space for an introductory text below or above the map. Please provide a finalised text for this. -  need confirmation and content
• Country sites section in the homepage to promote country sites - need confirmation and content

cc @anderspeders

[charlesyoung]

@anjhero the draft RC country sites content can be found in below Google doc.

https://docs.google.com/document/d/1sgR4LxITP0bICn8Pjd9zFSRKprpqS3n6M-AWB9gmWN0/edit#

[anjhero]

@charlesyoung Thanks. I was referring to a section in the homepage (landing page) itself (to promote the country sites) rather than their own page content.

We're still waiting for confirmation and content on following:

• Have top navigation only in homepage. The top navigation will appear in the left sidebar for rest of the pages. The left bar will appear on clicking hamburger icon for pages other than homepage. We feel this might make the site look inconsistent for the users. - need confirmation
• We will be using the space under the 3 big numbers to something else other than the trend. We'd appreciate it if we could finalise on the content for this space. The design might differ depending on the content for this section. - need confirmation and content
• We will be adding a horizontal space for an introductory text below or above the map. Please provide a finalised text for this. -  need confirmation and content
• Country sites section in the homepage to promote country sites - need confirmation and content

If we can act on these by this Friday, we can start working accordingly early next week. @jedm @charlesyoung @KaitlinCCSI @anderspeders

[KaitlinCCSI]

@anderspeders @jedm @charlesyoung Do we need a quick call next week to finalize decisions on this?

[jedm]

Unrelated to decisions requested by @anjhero:

• Buttons noted below should say "View All" not "View All [xxxxx]" (because it is documents that user will get, technically, not a list of the resources or countries)
• An alternative would be to say "View by Resource" or "View by Country"
• Capitalization is inconsistent currently - what is site standard for capitalizing second word in a button? (Also noted in #808)

[jedm]

Have top navigation only in homepage. The top navigation will appear in the left sidebar for rest of the pages. The left bar will appear on clicking hamburger icon for pages other than homepage. We feel this might make the site look inconsistent for the users. - need confirmation

We have decided on NO top navigation on homepage or inside pages. Only left bar navigation (contents being confirmed in #862).

We will be using the space under the 3 big numbers to something else other than the trend. We'd appreciate it if we could finalise on the content for this space. The design might differ depending on the content for this section. - need confirmation and content

Keep size and location of this space but make following changes:

• make text above the graphic bigger
• change graphic to an image cropped from this contract (sample image attached but YI should select correct size for image and recreate using sample as a guide)
• when user clicks this space, they go to this result: http://www.resourcecontracts.org/search?q=&country%5B%5D=cd&country%5B%5D=lr&country%5B%5D=mn&resource%5B%5D=Gold&annotation_category%5B%5D=Arbitration+and+dispute+resolution%2F%2FArbitrage+et+règlement+des+différends
• change text to "Explore contract terms: Arbitration and dispute resolution"
• this area should have admin functions to be editable so user can change text, image and link destination

We will be adding a horizontal space for an introductory text below or above the map. Please provide a finalised text for this. - need confirmation and content

Please design this area for maximum 2 lines of text, centered, with a different background color than map or top section. @anderspeders is developing suggested text with others.

Country sites section in the homepage to promote country sites - need confirmation and content

Please design this section as full-width section similar to "introductory text" section:

• section title: Country Partners
• section contents: 2 column list of partner country contracts site in format: • Title of Partner Site (Country)

[jedm]

Hi, @anjhero - previous comment has replies on 4 outstanding questions from March 15. Please continue with mockups and @anderspeders and CCSI will supply exact language for 2 new text sections.

The order of the homepage sections should be:

TOP - same as current, with the Search edits and new elements as agreed previously in this thread

COUNTRIES | RESOURCES - same as current, with 2 small changes

• per recent comment, change button capitalization to: "View all Countries" "View all Resources"
• can YI shorten height of this section?

INTRO TEXT BAR - new

MAP - with changes as agree previously in this thread

COUNTRY PARTNERS BAR - new

Many thanks!

[anjhero]

Please refer to this issue: https://github.com/NRGI/resourcecontracts.org/issues/873