Design issues

[amercader]

Catch-all issue with minor design things that I can't fix but that will be no problem for @smth (or maybe @roll)

Layout

• proper Header visual design including logo (:fire:)
• polish 404 page
• color coding:
  • success == green
  • failure == red
  • error/pending == yellow
  • no jobs/canceled == ??? (for now we use blue but I (roll) think it should be grey as on Travis. Blue we could use somewhere in the interface instead)

Home page

• Finish Home page implemenation #184 (:fire:)

Dashboard page

• Can't get to show 4 columns (or 3 centered) (:fire:)

• Source names overflow if columns are too small

  

• see prev picture - bottom side is not really clickable but mouse is a pointer on hovering

• icon-warning not displaying properly

  

Source page

• Tone down green / red / yellow on the top banner (:fire:)

• Valid files background color

  

• Add horizontal scrolling to error groups

  

• Close popups on next click (data-trigger="focus") - hide the whole i button for beta??? We don't have enough imformation to show here.

• In report filename is a link but it much wider than actual text. So clicking in the middle of the page could lead to link click

• in report errors we don't show headers for non-header (in-rows) errors (but we should!)

• we show only first 10 errors of error type - review UI/X for saying that output is trancated

• proper Jobs History visual design (a tab on /source page) (:fire:)

• on small screen there is a problem with text color:

• Source tabs Report/Job history should use anchor like #job-history to make browser back button to work correctly

Settings page

• Review the whole /settings page - visual design just a bad copy from what we had in three-column layout (:fire:)
• Make the "Refresh your repos and orgs" button more apparent so users know that they must click this to get something on this page (especially if it's the first time they arrive) (:fire:)

[amercader]

@smth @jobarratt I marked with 🔥 what I think is more pressing

[amercader]

@smth I added an item under Settings page that we forgot to include

[jobarratt]

@smth @amercader i think the home page looks great. I've got a few small suggestions of changes below:

remove the ‘meet goodtables.io’ because i think it’s self explanatory
on text below the icons, remove the full stops
perhaps change the question in quotes to a statement so ''ensure, in a detailed and automated fashion, that data sources meet the quality requirements for further analysis and integration’
hyberlink ‘frictionless data’ to frictionlessdata.io
remove '(the answer is good tables.io)'

[amercader]

Made these changes, plus some minor ones from my own

[smth]

@amercader regarding that refresh button issue, something like http://bootstraptour.com/ might be a good solution. I would create a PR, but I'm not sure how/where to add the CSS and JS to GT.

[smth]

@amercader @jobarratt I had a chance to look at the app issues from a design perspective today, and have taken them into account to produce a revised design. I have started with the report page, as that was where most of the challenges were.

Principle changes:

• Putting dashboard, jobs, report, and settings on separate pages
• Less emphasis on status (colours)
• Inclusion of header (actually a sidebar)

[amercader]

@amercader regarding that refresh button issue, something like http://bootstraptour.com/ might be a good solution.

My feeling is that rather than giving users a tour the interface should tell them what to do, but happy to test it out

I would create a PR, but I'm not sure how/where to add the CSS and JS to GT.

SASS goes to frontend/styles, JS in the components. If you need to add a requirement add it to package.json (see 31bc913)

Remember to run make frontend-watch to rebuild the frontend on the fly.

@amercader @jobarratt I had a chance to look at the app issues from a design perspective today, and have taken them into account to produce a revised design. I have started with the report page, as that was where most of the challenges were.

It looks really nice. It's worth keeping in mind that this is the source page, by default displaying the last job run. So not sure what the "Jobs" link in the sidebar would link to?

Quick comments, not sure that the job history is something that needs to be always visible.

Also remember that this page is accessed by non-logged in users (and those will be the majority) so the header/sidebar might look much more empty (just with logo + Sign in link), so worth keeping in mind.

Good work!

[roll]

@smth
On manage sources page I've used X icon for deactivating a repo only because there is no - icon. So I would say it should be:

• + for adding
• - for deactivating
• x for removing (may be)

[roll]

Mobile (picture is cropped):

---

If screen size around 600px wide there is a green line on homepage text:

---

I would say homepage is really good. And about an idea to have a report example on homepage (https://discuss.okfn.org/t/launching-goodtables-io-tell-us-what-you-think/5165/13?u=roll) - may be it could be a slider with changing screenshots in first screen area (current picture, picture of report etc).

[smth]

It looks really nice. It's worth keeping in mind that this is the source page, by default displaying the last job run. So not sure what the "Jobs" link in the sidebar would link to?

Sounds like that just needs to be renamed.

Quick comments, not sure that the job history is something that needs to be always visible.

My intention was that the history panel be collapsable. Could be collapsed by default..

Also remember that this page is accessed by non-logged in users (and those will be the majority) so the header/sidebar might look much more empty (just with logo + Sign in link), so worth keeping in mind.

Yes, had thought of that. My plan is to replace the navigation items with a short introduction to GoodTables, with a link to find out more. Again, this panel could be collapsable.

[smth]

+ for adding
- for deactivating
x for removing (may be)

As we are using x for "Failed", we should use something else "Remove". Probably a trash can.

[smth]

I've continued the conversation about the homepage in #184, to avoid this thread getting confusing.

[smth]

Report, with a breadcrumb like menu. Clicking the arrow would reveal the "Jobs" item.

Not logged in:

Dashboard, now giving an overview of failing jobs, rather than a full report:

When there are no failing jobs:

Jobs:

Managing GitHub sources:

When sources empty:

Collapsed sidebars:

[amercader]

@smth This looks fantastic, a massive improvement and a much clearer user experience.

From my point of view this looks pretty much done, just a couple of tiny things that would be great if you could work on:

• The "Jobs" item on the sidebar and the "Jobs" page should be named "Sources". ("Latest Jobs" in the dashboard is correct)
• We need a place for flash messages, specially in the Manage Source page (to display things like "Source added", or errors when adding/removing sources)

I know the "Resync" flow on Manage Sources is on your mind as well. With the new design it's easier to see that it needs to be clicked if the list is empty and maybe we don't need a button but I'll leave that to you.

[smth]

@amercader Doesn't all the meaningful information on the Jobs/Sources page pertain to jobs though? A sources page would suggest to me a list of sources, which is what you find on the "Manage Sources" page.

Are there any other specific places where flash messages will appear?

Regarding resync, see above. I added a version containing instructions when the list isn't populated.

[amercader]

@amercader Doesn't all the meaningful information on the Jobs/Sources page pertain to jobs though? A sources page would suggest to me a list of sources, which is what you find on the "Manage Sources" page.

I see now. The previous version of the dashboard was effectively a Sources list page, as it displayed all your sources (styled depending on the last job run on them). This is now the the "Latest jobs" on the Dashboard, and I see the See all link.

TBH I think we can drop the Sources/Job page completely and just display all sources on the Last jobs column with a scroll.

So there are only three pages:

• Dashboard
• Manage sources
• Source page (eg http://goodtables.io/github/amercader/car-fuel-and-emissions)

Are there any other specific places where flash messages will appear?

Eventually we will have them on the Source page (eg "Job restarted"). I can't think of a current use case for them in the dashboard but it might come up in the future.

Regarding resync, see above. I added a version containing instructions when the list isn't populated.

Ace!

[smth]

Manage sources messages:

[smth]

Do you think it would make sense to have "Job restarted" in the job history @amercader ?

[amercader]

@smth actually if the job restarts the whole report should be removed and we could display a message there.

This is actually not going to be implemented any time soon, so don't worry about it for now. The important messages were the Manage Sources page ones, which look great.

[pwalsh]

@smth do you think we could make goodTables.io -> goodtables.io ? If this was conscious and you think it is better as is now then ok.

[smth]

It was conscious, I like the way it breaks up the words. I'm not completely opposed to changing it though. What's your reasoning @pwalsh ?

[amercader]

The "official" name has been goodtables.io so far and is consistent with the library name so I'm +1 on the lower case

[pwalsh]

@smth just that it "feels" better to me.

[smth]

OK, logo will be updated in the new version http://p.smth.uk/goodtables/dashboard/

[smth]

Removing myself from this issue, in favour of the below (let me know if I'm missing anything).

• Dashboard UI Design #267
• Report UI Design #268
• Jobs UI Design #269
• Manage sources UI Design #270
• 404 UI Design #271