goodtables.io icon indicating copy to clipboard operation
goodtables.io copied to clipboard

Published 20 hours ago • verified publisher icon frictionlessdata

Design issues

Open amercader opened this issue 8 years ago • 25 comments

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

Layout

  • [x] 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

  • [x] #184 (:fire:)

Dashboard page

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

  • [ ] Source names overflow if columns are too small

    r434mmx

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

  • [ ] icon-warning not displaying properly

    u2huthe

Source page

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

  • [ ] Valid files background color

    akksli5

  • [x] Add horizontal scrolling to error groups

    i8xewds

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

  • [x] 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

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

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

gtio

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

Settings page

  • [x] 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 avatar Apr 19 '17 13:04 amercader

@smth @jobarratt I marked with :fire: what I think is more pressing

amercader avatar Apr 24 '17 08:04 amercader

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

amercader avatar Apr 25 '17 15:04 amercader

@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)'

jobarratt avatar Apr 26 '17 23:04 jobarratt

Made these changes, plus some minor ones from my own

amercader avatar Apr 27 '17 10:04 amercader

@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 avatar May 02 '17 08:05 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)

gtio_app_02_report_01

smth avatar May 03 '17 16:05 smth

@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 31bc913750022d5c3a958c37d78202fa9ee825fb)

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!

amercader avatar May 03 '17 22:05 amercader

@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 avatar May 04 '17 14:05 roll

Mobile (picture is cropped):

screenshot_20170504-170028

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

homepage-mobile

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).

roll avatar May 04 '17 14:05 roll

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 avatar May 15 '17 07:05 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 avatar May 15 '17 07:05 smth

I've continued the conversation about the homepage in https://github.com/frictionlessdata/goodtables.io/issues/184, to avoid this thread getting confusing.

smth avatar May 15 '17 08:05 smth

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

gtio_app_02_report_01

Not logged in:

gtio_app_02_report_01_not-logged-in

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

gtio_app_02_dashboard_01

When there are no failing jobs:

gtio_app_02_dashboard_01_no-errors

Jobs:

gtio_app_02_jobs_01

Managing GitHub sources:

gtio_app_02_sources_01

When sources empty:

gtio_app_02_sources_01_empty

Collapsed sidebars:

gtio_app_02_report_01_collapsed

smth avatar May 16 '17 16:05 smth

@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.

amercader avatar May 17 '17 10:05 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.

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.

smth avatar May 17 '17 13:05 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.

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!

amercader avatar May 17 '17 13:05 amercader

Manage sources messages:

gtio_app_02_sources_02_messages

smth avatar May 17 '17 14:05 smth

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

gtio_app_02_report_02

smth avatar May 17 '17 14:05 smth

@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.

amercader avatar May 17 '17 14:05 amercader

@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.

pwalsh avatar May 17 '17 15:05 pwalsh

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 ?

logos

smth avatar May 17 '17 15:05 smth

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

amercader avatar May 17 '17 16:05 amercader

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

pwalsh avatar May 18 '17 04:05 pwalsh

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

smth avatar May 23 '17 11:05 smth

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

  • https://github.com/frictionlessdata/goodtables.io/issues/267
  • https://github.com/frictionlessdata/goodtables.io/issues/268
  • https://github.com/frictionlessdata/goodtables.io/issues/269
  • https://github.com/frictionlessdata/goodtables.io/issues/270
  • https://github.com/frictionlessdata/goodtables.io/issues/271

smth avatar Oct 03 '17 11:10 smth