search

openfarmcc / OpenFarm

A free and open database for farming and gardening knowledge. You can grow anything!
https://OpenFarm.cc
MIT License
1.58k stars 243 forks source link

Creating Guides Wireframes #92

Closed simonv3 closed 10 years ago

simonv3 commented 10 years ago

I've been taking some steps to think about the creating guides steps.

Here's an initial design (bonus - also exploring a visual direction for openfarm).

Here's my reasoning for splitting things into a couple of steps:

Steps 1 & 2 are gathering basic information from the user, stuff we want them to definitely include in a guide.

Step 3 I was seeing similar to how you mentioned seeing it @roryaronson. The box could expand in width, and start looking like the actual guide. I like the idea of consistency there, but that might be something we need to try and actually build, and see how it works in action (this is one of the reasons I want to try VWO). The current edit page is actually a step towards that - pretty WYSIWYG.

I'll explore that a bit and show it here when I'm done with it. I'd love feedback/input on visual style as well - don't consider myself a visual designer at all.

roryaronson commented 10 years ago

I love the aesthetic! It makes sense to get the absolute basics from the user first as you suggest.

An idea is that Step 3 then redirects to the user's new Guide with their first bits now filled in. They are prompted to then go and press the edit buttons for each section and fill them out in WYSIWYG fashion. They can fill out the sections in whatever order they want, and could always press an edit button later to change a section. Essentially they can get instant feedback about what the final product looks like.

That's one approach, and the flip side to it is that the user may be overwhelmed by a nearly blank guide with so many fields to enter. So perhaps leading the user through each and all of the steps is better. Other thoughts?

Another point: I imagine some folks are not going to know off the top of their head what they do at each life stage, rather they may want to fill out the guide over a long period of time, perhaps the lifetime of the plant, and then publish at the end. This is where the WYSIWYG editor may be better, I don't know.

simonv3 commented 10 years ago

I think your final point is pretty important. I suspect there's a few farming folks with gardens that are very non-intervening. Maybe they're not the types to build guides though?

I think it should be possible to present someone with the blank slate in a way that is very "step" like. A percentage complete indicator would help, etc.

This might be an area that we should do some research in. Maybe the kickstarter is a great way to get some survey responses? Or to get a hold of people for testing and feedback? I would love to encourage an environment of feedback from people using the site, any thoughts on how to tackle that?

RickCarlino commented 10 years ago

Hey guys-

here's a good WYSIWYG editor for rails (I think it even supports versioning): http://railscasts.com/episodes/296-mercury-editor

Pasting it here so I don't forget about it. About to dive into some code right now.

On Sun, Aug 24, 2014 at 4:18 AM, Simon notifications@github.com wrote:

I think your final point is pretty important. I suspect there's a few farming folks with gardens that are very non-intervening. Maybe they're not the types to build guides though?

I think it should be possible to present someone with the blank slate in a way that is very "step" like. A percentage complete indicator would help, etc.

This might be an area that we should do some research in. Maybe the kickstarter is a great way to get some survey responses? Or to get a hold of people for testing and feedback? I would love to encourage an environment of feedback from people using the site, any thoughts on how to tackle that?

— Reply to this email directly or view it on GitHub https://github.com/FarmBot/OpenFarm/issues/92#issuecomment-53185222.

RaceFPV commented 10 years ago

Why not just use the built in, spellcheck: true ?

roryaronson commented 10 years ago

The Kickstarter folks are going to be a HUGE resource for us. 1,000+ people who like OpenFarm so much they gave us money, they'll certain be open to beta testing and providing feedback. Maybe we should make 2-3 mockups of the guide creation process and I can send out a survey to the Kickstarter folks? There's also this guy, Jeremy, who contacted me and wants to donate UX time to the project. He's legit and has a good eye, I'll tap into him again to see what he thinks.

simonv3 commented 10 years ago

Here's a take at the final step of guide creation:

add-details-guide-creation

What I'm going for here is an easy to fill in guide, based on conversations in #123, and #126 (including others). Users can opt out, create examples, and also just easily ignore those guides.

I think the scenario of basing a guide on another user's guide, and creating a fork, would probably go through a fundamentally different flow, but allow for a lot of overlap. I'm seeing the page that is here as the default "edit" page for a guide. I can flesh out some ideas about that here.

cc @roryaronson, @andru, jeremy (is he on github?)

I'm starting to implement this in 89bc58d1b8c29fe12345c17e7ce8d1e22483ae25

RickCarlino commented 10 years ago

Looks great! I like the format.

On Sat, Sep 6, 2014 at 12:34 AM, Simon notifications@github.com wrote:

Here's a take at the final step of guide creation:

[image: add-details-guide-creation] https://cloud.githubusercontent.com/assets/485583/4174322/9546e790-3586-11e4-9972-e055b1ac95e2.png

What I'm going for here is an easy to fill in guide, based on conversations in #123 https://github.com/FarmBot/OpenFarm/issues/123, and #126 https://github.com/FarmBot/OpenFarm/issues/126 (including others). Users can opt out, create examples, and also just easily ignore those guides.

I think the scenario of basing a guide on another user's guide, and creating a fork, would probably go through a fundamentally different flow, but allow for a lot of overlap. I'm seeing the page that is here as the default "edit" page for a guide. I can flesh out some ideas about that here.

cc @roryaronson https://github.com/roryaronson, @andru https://github.com/andru, @jeremy https://github.com/jeremy (is he on github?)

I'm starting to implement this in 89bc58d https://github.com/FarmBot/OpenFarm/commit/89bc58d1b8c29fe12345c17e7ce8d1e22483ae25

— Reply to this email directly or view it on GitHub https://github.com/FarmBot/OpenFarm/issues/92#issuecomment-54703301.

roryaronson commented 10 years ago

Great start! I'd like to see a progress menu on the top with the different steps of Guide Creation. I think you had something like that in your other mockup? Maybe like this: (1) The Basics --> (2) Prerequisites --> (3) Growing Instructions --> (4) Preview/Publish

I'm concerned that the user might be mislead to use the "Growing Process Overview" input as a place to write a lengthy, verbose story, not realizing the structured Growing Instructions are the really important part coming up. Maybe renaming the box to something like: "About This Guide" might be more appropriate, along with a 250 word limit? An example text would be helpful too to set the tone of the content - "This Guide will help you grow the juiciest, sweetest, cutest cherry tomatoes anyone ever did see, mmmhmm!" lol

As far as user experience goes upon first creating the Guide, of course they have not added any prerequisites, so it seems goofy to tell the user that. Maybe a change of help text to something like: "Add some Prerequisites to your Guide to let readers know what they need to be successful." On second thought, if they skip the step and come back, it would be nice to have your wording choice.

I love the suggested prerequisites. Makes it super easy. As a user clicks and adds one, we could put another suggestion in its place until we have no other suggestions?

An additional Save button on the bottom is always nice :)

alpha-ninja commented 10 years ago

Love @simonv3's design.

simonv3 commented 10 years ago

Thanks for the feedback. I guess overview might be a bit of the wrong word for it then?

@roryaronson I think your wording works for both freshly created and already existing guides actually!

What is a problem right now though, is that we should do some thinking about sensible defaults based on the crop? Or what if we know nothing about the crop? Just go with medium's all around?

Also, what are all the options for each prerequisite? We have 8 at the moment (I think, I just made that up) do we stick to just those for now?

roryaronson commented 10 years ago

Possible Prerequisites I was thinking about:

We don't have to start with them all, and some may not be that useful. Thoughts?

I think the sensible default is that a prerequisite should not be included if the user doesn't explicitly add it. So in this case, I imagine a UI tweak would be to have the user select the Prerequisite Type first, and then enter in the value as a range, from a dropdown, etc.

Leaving out prerequisites should not negatively affect compatibility scores, though maybe we should consider another score/rating for the "completeness" of the guide, as well as "popularity"? This to be discussed in #194 and #195.

simonv3 commented 10 years ago

Most of the things discussed in here are on staging, and will be pushed live. See commit 6e74fef49b94e7ff25f646a8fa624f6105e54dec.