search

frictionlessdata / goodtables.io

Data validation as a service. Project retired, got to the current one at frictionsless/repository
https://goodtables.io
GNU Affero General Public License v3.0
69 stars 16 forks source link

UI/X wireframes for first release #112

Closed pwalsh closed 7 years ago

pwalsh commented 7 years ago

Description

Design the UI/X for release.

Tasks

Some examples:

https://travis-ci.org/ckan/ckanext-dcat https://travis-ci.org/ckan/ckanext-dcat/builds

https://circleci.com/gh/ckan/ckan

pwalsh commented 7 years ago

@amercader please review for emissions etc.

@smth please review for questions in prep to work on this.

@jobarratt please review as well

jobarratt commented 7 years ago

The question for me is how this works in terms of the paid service. @pwalsh and i need to discuss this because at the moment i’m not clear and have some questions/ideas.

@smth i think you have complete freedom when it comes to the branding. I think it is more important that it has its own strong identity rather than conform to any OKI/Frictionless Data brand. There will be other Frictionless Data ‘products’ such as the Registry, DQD and we could make a decision make them a group of products with a join identity - but this is your decision and i think there is no requirement for this.

In the long term we need to think about how this would might be included as part of a services.okfn.org / frictionlessdata.io website which features all of our paid-for products. So we should keep this in mind but i do not think that this should block things here.

amercader commented 7 years ago

@jobarratt I think that will become clear eventually as we flesh out #113 and #114 but my sense is that paid plans will allow access to more than X sources/files/GB and/or private sources. We could also consider offer in-premise installation support.

amercader commented 7 years ago

@smth We'll need some rough estimates for this. Do you want to split it in different issues per eg logo / layout / each page? Whatever it works better for you.

smth commented 7 years ago

Not having access to the working prototype, I'm basing this dashboard layout on the list above:

dashboard_wireframe_01

This begs the question: Do we have a sense of how many sources a user is likely to have? Is showing this many (on a medium sized screen) useful? If we think it will vary dramatically, maybe we should consider multiple layouts, perhaps determined by the number of sources.

smth commented 7 years ago

In terms of logo / brand, this is where I'm at:

brand_01
ghost commented 7 years ago

Love how this is looking @smth

amercader commented 7 years ago

I really like the image / brand @smth! particularly the tilted logo. Would that work on the header as well?

In terms of the dashboard, remember that users should probably only see the last job for each source (gh repo or s3 bucket), and we can limit to only the 5 / 10 / whatever more recently updated ones. Definitely not as many as in your case :) Another option is to show the status of the last x jobs per source and not just the last one (like in here but with sources instead of branches https://travis-ci.org/frictionlessdata/goodtables.io/branches)

I think it's reasonable to expect most users to have 1 to 10 sources, with some power users more than that.

One thing that should be prominent is the buttons / links to add new sources, specially on a first visit (Add Repository and Add Bucket buttons on the current site):

zvw4w3g

Sorry about not having a live site, we'll try to get something up asap

smth commented 7 years ago

Sorry, that wireframe was pretty unclear. Each box was intended to be a different source, so you are only seeing one job per source (and there are 30+ sources).

If we are saying maximum of ten sources, plus two button, then it might make sense to include multiple jobs, on larger screens at least.

Another option (as we've probably got space) might be to show the latest source or job detail view, in the dashboard view?

amercader commented 7 years ago

If we are saying maximum of ten sources, plus two button

The idea is to add support for more source types in the future (eg Google Drive, Dropbox, etc)

I quite like the idea of showing the status of the last 5 jobs per source to get an overview (I'm going to probably regret this when I need to write the DB queries) and we can show source and job details as you said.

It's worth noting that the dashboard it's important because it's what the users will first see but once you've configured your sources I don't think people will visit it often. Most people will arrive to the job report page linked from Github or a notification.

roll commented 7 years ago

@smth @amercader I suppose we should take into account that this problem has been already solved pretty successfully earlier by services like https://travis-ci.org/, https://circleci.com etc So I think we could get an inspiration from services like this about UX because they solve exactly the same problem.

In some aspects they different by I think we could learn a lot from their UX. For example I work with Travis on every day basis and that's a good example of don't make me think experience - just seamlessly getting all data I need for work.

amercader commented 7 years ago

I agree, in terms of user flow and experience I would definitely look into travis or circleci

smth commented 7 years ago

So rather than drawing wireframes based on Travis, shall we use Travis as the wireframe?

I've been trying to visualise what this does, for the landing page: gtio_home_01

smth commented 7 years ago

After some more thought I decided there are enough differences to warrant wireframes. I started working on one for the source page, based on the Travis layout:

source_wireframe_01

It occurred to me that we may not need as much space for our reports. The screenshots that I have suggest that we don't, but I'm guessing that reports could be longer. Can anyone clarify? If there is more info to go in there, could I have some examples please.

smth commented 7 years ago

And a dashboard that includes latest job: dashboard_wireframe_02

smth commented 7 years ago

As for he landing page, if we have any copy on:

that'd be useful.

amercader commented 7 years ago

@jobarratt can you work on the copy?

smth commented 7 years ago

I have added a couple of missing items from the dashboard. Was also thinking that in this view, maybe a job with a failed test should be highlighted (because it presumably requires attention). This is feeling much more like a dashboard to me now:

dashboard_wireframe_03

The dashboard described in the original post could essentially become an 'all sources' view:

sources_wireframe_01

If we have this page, it seems like it might be a more logical place to do the adding and removal of sources (rather than a settings page).

This would leave just the enabling and disabling of integrations on the settings page (maybe even this could be done from the sources page). I'm not really sure what this process entails at the moment though.

settings_wireframe_01

(Need more info on the plans before I can wireframe that section in more detail)

ghost commented 7 years ago

@amercader yep i will do this tomorrow

smth commented 7 years ago

This is what I'm anticipating the landing page content to look like:

landing_wireframe_01

Styling:

gtio_home_01

amercader commented 7 years ago

@samsmith this is looking more and more exciting :clap: . I'll provide more feedback tomorrow

@jobarratt testing testing

amercader commented 7 years ago

@smth here are some thoughts (I just realized I've been pinging the wrong sam for a while :p )

maybe a job with a failed test should be highlighted (because it presumably requires attention)

Does this mean that when loading the dashboard the main details on the right will be of the last failed job (not the most recent one)? I'm not sure if that's what I would expect, but I'm not a big fan of showing the last job ever like Travis does (https://travis-ci.org), so let's give it a go. Perhaps we can add a "Last failing job" heading somewhere to make this clear. The other option as we discussed before is having just a list of sources with the last status (like CircleCI https://circleci.com/dashboard), but let's stick with what you think and iterate on it.

The dashboard described in the original post could essentially become an 'all sources' view: If we have this page, it seems like it might be a more logical place to do the adding and removal of sources

I'd really like to have the option to add sources on the dashboard and not having to navigate to some other page, perhaps as a plus sign next to the tabs?

Some more context on enabling/disabling integrations and adding sources. It really depends on the source type.

For Github "activating the integration" means authorizing the app via OAuth. Right now this is done in one step when you log in with GitHub (basically we ask for all perms just to log in), but eventually this will be split into a separate oauth call (https://github.com/frictionlessdata/goodtables.io/issues/124). So the process will be:

  1. Log in
  2. Go to a settings page
  3. Click on "Authorize GitHub" and accept the perms
  4. Synchronize account to get the big list of repos (what's in http://staging.goodtables.io/github/settings)
  5. Flip the switch on the repo(s) you want to validate

I think this needs a dedicated page on its own. This is where people will remove the integration with a particular repo as well. I guess you can Inactivate the intgration by removing all perms given and disabling all repos (if necessary, other users might have also set it up)

For S3 the process is really different as the authorization model is also really different, basically:

  1. Log in
  2. Go to a settings page
  3. Submit form with bucket name, access key and secret

If all goes well the bucket gets added and that's it. There is a list of your buckets with a link to remove the integration for each of them. There is no global Activating / Disabling integration per se.

I guess my point is that we need a dedicated page for each source type, whether if that's in Settings or Add source I don't know

(Need more info on the plans before I can wireframe that section in more detail)

There's not much info on the plans as far as I'm aware but I think we'll start with just 2, free and paid (cc @pwalsh)

Landing Page looks great

jobarratt commented 7 years ago

@smth I agree this is looking great! Hoping to speak to @pwalsh this week but i know i need to get this to you.

jobarratt commented 7 years ago

@smth @amercader you mentioned you had done the copy for this. Do you have all you need for now, and i can i review it somewhere?

p.s. i think i am getting notified now. A strange thing going on and a not strange thing but i think i've cracked it.

amercader commented 7 years ago

@amercader you mentioned you had done the copy for this

@jobarratt I haven't done any copy

jobarratt commented 7 years ago

@amercader i missunderstood a conversation on the new standup then. I'm on this now.

pwalsh commented 7 years ago

two levels: free (default plan) and paid

smth commented 7 years ago

@amercader

Does this mean that when loading the dashboard the main details on the right will be of the last failed job (not the most recent one)?

That's what I meant, but just an idea.

I'd really like to have the option to add sources on the dashboard and not having to navigate to some other page, perhaps as a plus sign next to the tabs?

That is there, above the list of sources.

@pwalsh so we don't have details about the differences between the plans yet?

pwalsh commented 7 years ago

Yes we do, here https://github.com/frictionlessdata/goodtables.io/issues/113 but admittedly it is rather cryptic for non-programmers, sorry about that.

Free:

Paid:

Also I think S3 support will be on the paid plan at first, but need to decide.

smth commented 7 years ago

Dashboard mock-up is about at the stage of the wireframe https://smth.github.io/goodtables-ui/dashboard/

As is the landing page https://smth.github.io/goodtables-ui/

amercader commented 7 years ago

Closing in favour of individual pages issues