Guide Creation Flow V2

[roryaronson]

Here is a mockup flow for how we can improve Guide Creation in a few ways:

• It integrates the timeline building feature. This was discussed in #510 though in this version I tweaked what the member enters and in what order to make it easier on them and a little more logical. Feedback?
• It simplifies the first screen to be just about choosing the Crop - nothing more (everything else was moved to the final touches page) This change is because we've had some feedback that uploading a crop photo on the first page seems weird and out of place. I agree. Notice I also reframed this photo as 'Choose a featured image for the guide' which would allow the member to choose from photos they've already uploaded to the Guide.
• Actions can be of type ordered or unorderd. This concept was lost in communication when Actions were builtout as they are today. The modal is replaced by showing the options in the same area as the questions. I think this is less interruptive to the member's flow/experience. What do you think?
• The 'Stage Overview' and 'Stage Actions' sections are now combined into one UI element (the left sidebar nav) I think this cleans up the page, helps focus attention, prevents the need to scroll after advancing to the next stage, and makes the data entry process for each section uniform.

What do you think? Is this improved? What other ideas do you have?

I think once we nail down a V2 design that we're all happy with, this should be the next step for us because the guides are our main 'product', so we should be making the creation of them as good (fun and easy) as it can be.

[simonv3]

Edit: I then undid that because it didn't actually make sense to do.

[simonv3]

All of these changes make sense to me. I don't know about timeline though, there's some easy things that can be moved around. Maybe this needs to be broken down more, I'll have a think.

[roryaronson]

Cool, let me know what you think about. I'm happy to make more mockups and throw around other ideas :)

[simonv3]

@roryaronson I really liked what Kevin got at in his email, copies here:

Some thoughts I had about software development and guide creation (summarized since my notes are back home). I see about 4 obstacles to guide creation. 1) time. 2 hours to make a guide to me seems impossible for gaining crowd sourcing momentum. 2) lack of confidence. People have no confidence in themselves as authorities for plant growing and even those I would deem beyond capable are intimidated. 3) significance. Who will see the guide these people made after all their hard work? Right now it's a dead guide. 4) Fun. Making guides is not fun. People say the process should be like turbo tax, but the huge obvious difference there is that taxes are mandatory. Therefore we must be even funner and easier than turbo tax (ideally).

Solutions I see are mostly software based. 1) I think we should try to get people some tangible product from their work after only 15 minutes of work. Just get them hooked even, and praise the heck out of every single thing they do. 2) to tackle the lack of confidence thing one idea I had is to tell a story. Expose newcomers with some rookie guide creators success story. Sally wouldn't call herself a great gardener, but one day she made a guide that ended up helping thousands of people. All the praise she got from these people made her feel good. Etc. 3) from pop up cards telling the creator how great their contribution is, to social verification by seeing how many people planted your guide in their garden, to forums and guide upvoting. 4) badges for everything, less time consuming, not needing to finish a guide, maybe even allowing guide collaboration, to Having other reasons for people to be on the site other than guides(creation or consumption).

I think what might be something good to explore is a modular way of building guides. We start with the basics (name, crop, pictures, basic timeline). The "back of the seed packet" stuff. Then we show the incomplete parts of the guide as some form of "fill this bit in" tags. "Make your timeline more complete". "What stages do you think require special attention?".

That way, users get the immediate feedback. Their guide is up in 15 minutes, and they're not drawn into this long process. It's also useful information right off the bat (if we get the timeline to work properly). Then we let them dive into fleshing out the details.

Thoughts?

[roryaronson]

I like that - kinda going back to the WYSIWYG idea from long ago. Definitely something worth exploring in a mockup. We would need to be careful of showing too much of an incomplete Guide because that gets intimidating. From what I remember, that's why we moved away from the total WYSIWYG creation model.

Something else we could think about is encouraging Guides with only a few stages. Like, 'Its totally okay to make a Guide just about harvesting apples. Not an expert in propagation? No problem!'

We also had talked about a 'Preview' button in the Create Guide Nav that the member could use to preview the completed Guide with for anytime/instant feedback. That's how creating a Kickstarter campaign works (which is a similar process).

@xbertolerox, regarding your 'lack of confidence' point, how do you think Instructables or a recipes website has gotten past this (if at all)? I like the idea of telling member stories as a solution, and also creating a video or something showing how easy and fun it is to make a Guide

[roryaronson]

I made a thing! Its a new iteration of the V2 flow I made above. This one squashes Timeline creation into 3 screens instead of 4, and moves some of the explanatory text into helpful hints from Bumble our :bee: mascot. Just ideas worth exploring I think :)

Something else I thought of while making this is how photo uploading works on Instructables. Basically they have a bottom bar where you can upload a bunch of photos. They all get uploaded and hang out in this bottom bar. Then the Instructable creator can drag and drop them into the appropriate step(s) in their Instructable. It seems to speed things up, especially when one doesn't know if they want to use a photo or not, or which step they want to use it in. It avoids double uploading too when using a photo in multiple places, and avoids having to open up a file picking modal repeatedly.

[xbertolerox]

I think as far as modular completion goes, LinkedIn does a decent job. I filled in my basic info, but every time I would log on it would have a highlighted segment brought to the top of the page asking me to complete it in order to look more professional/competitive. Every time I logged on it would ask me something, and over the course of a week I ended up with a pretty fleshed out profile. It also gives you a profile rating on the side. I've got a "superstar" profile so now I feel baller.

Rory I think one way recipe sites and instructables overcomes the confidence issue is by letting shitty content on the site. This is just a hunch, but if people see something they could easily improve on then they're less intimidated. They know where the standard is and that they can raise it. Especially if you add a competive edge such as featuring good instructables, giving gold stars, and holding contests. I wonder if it would be helpful to put the notion that we must serve our member nice guides on hold for a bit. Then we can try to get the ball rolling with any guides that get made, and challenge others to begin organically raising the standard of quality.

[simonv3]

Honestly I feel the same. Our content is very structured at the moment, and this is awesome, but maybe it's intimidating? I think it would actually work really well modularly. I'm imagining the power rangers robots. I'm happy to do some exploration sketches, though they'll probably be a lot more low-fi.

@xbertolerox, would you want to come up with some concepts as well? I think you and Kat might have the best idea in mind. I'll ask her on slack (unless she has a github account?) On Jun 11, 2015 15:48, "xbertolerox" notifications@github.com wrote:

I think as far as modular completion goes, LinkedIn does a decent job. I filled in my basic info, but every time I would log on it would have a highlighted segment brought to the top of the page asking me to complete it in order to look more professional/competitive. Every time I logged on it would ask me something, and over the course of a week I ended up with a pretty fleshed out profile. It also gives you a profile rating on the side. I've got a "superstar" profile so now I feel baller.

Rory I think one way recipe sites and instructables overcomes the confidence issue is by letting shitty content on the site. This is just a hunch, but if people see something they could easily improve on then they're less intimidated. They know where the standard is and that they can raise it. Especially if you add a competive edge such as featuring good instructables, giving gold stars, and holding contests. I wonder if it would be helpful to put the notion that we must serve our member nice guides on hold for a bit. Then we can try to get the ball rolling with any guides that get made, and challenge others to begin organically raising the standard of quality.

— Reply to this email directly or view it on GitHub https://github.com/openfarmcc/OpenFarm/issues/638#issuecomment-111141538 .

[xbertolerox]

Sure I will take a crack at it in the next few days. What would be most helpful to you? Are you imagining a reworking of the guide creation flow that we currently have, just to see where things could go? Put more ideas on the table kind of thing?

[simonv3]

@xbertolerox I was just thinking the roughest idea of what you think would be a good flow. We can iterate on that.

[roryaronson]

I think at this point we should be exploring as many ideas as possible, so this is all great.

The LinkedIn example is a good one. I wonder how that can apply to Guides though. On LinkedIn you have just one thing - your profile, which is about you, so you can feel comfortable updating it anytime. On OpenFarm you would potentially have multiple Guides, but maybe not be checking them regularly once you make them, and maybe not want to add to them, or maybe not have the content ready when the site prompts for it. I think about the Instructables I've made - I never check them or update them unless I get a comment I want to respond to.

On another train of thought, it seems like there are two use cases for Guide Creation:

1) Member makes a complete or partial (but complete to them) Guide in one sitting, potentially updating it with new content every once in a while, but maybe not. 2) Member is going to make a Guide incrementally as they grow the plant and learn about it - They make a partial Guide initially and then add Life Stages and new content regularly over a few months (a modular approach)

My hunch is that both use cases will happen often.

[farmanp]

Hello all!

My name is Farman and I'm excited about working with y'all. Two things this comment will be mentioning: 1) usability testing 2) life stages decision process

1) So I looked over all these comments and the creation flows but I was wondering if you have performed any usability tests on farmers/growers/plant hobbyists? I think that would also help make optimal decisions on the interactivity, accessibility, and functionality. What you have to offer so far is enough to perform a test for usability. It would also get a better sense of testing this out on users who aren't familiar with the design process but more just actually using the site.

When I first used the site, I noticed a lot of bugs like making a garden was not responsive, but I can see that things have dramatically improved especially with the process of creating a guide now. I like that a lot! I might also add that I love this is a User Generated Farm Guide because that can really get more farmers involved to collaborate online and work across more than just their local farmer market. But, I digress.

2) I don't know if this has been mentioned but is the life stages offering too many options? I noticed there are nine and, from an amateur farmer's perspective, it looks like some of those can be under the same thing. For example, Preparation + Sow + Germination + Seedling = Seeding, Juvenile + Adult + Flowering = Growing, Fruit + Dormant = Production. This may have some inaccuracies, but it was just an example to explain the more simpler the design, the better the interaction.

[roryaronson]

Hey @farmanp thanks for jumping into the conversation! We have done some usability studies with a handful of people - and we got a lot great feedback from them. We have a summarizing document here if you want to browse through.

Though I agree with you that the more simple design is almost always the better one, a lot of the feedback we've received has been 'there aren't enough options'. At least part of what makes some online resources not that useful is that they are too generic. And it seems that people who are interested in contributing to OpenFarm want to be more specific because they find that to be the most valuable content. A major thing that people want too is 'location based' advice. So most people aren't looking for a catch-all generic guide, they're looking for something tailored to them in some way.

This all being said, it would be great to A/B test two different guide creation flows - one with all the life stages as we have it now, and one with just a few more broad groupings as you've described. Though we barely have enough development resources (at the moment) to build one! But, I think it would be well worth making mockups of alternate flows.

Also, if you're interested in doing more usability studies - that would be great! Kevin Bertolero and/or Kat Ying might be able to assist you in doing an interview cause they've done a few already.

[farmanp]

tl;dr - Let's use the "press and hold" function to give users more options when creating guides!

Awesome and if you need some help with creation flows and creating mockups, I can help!

When it comes to designing the step by step process, I see a great opportunity to implement the "press and hold" action for making advanced customizations to a garden guide, similar to this:

http://codepen.io/masterx2/pen/kFyCt

The mechanics could be altered but the takeaway is that simple options look like the core decisions you have to make, but if you really wanted to add more, you could press on one of the steps and hold it down to open more options. For example, let's assume that the options now are Seeding, Growing, and Production. If you wanted to make significant actions to the individual process of each stage, you could click down on the stage (click "seeding") and when you hold down, more options would show up. It's similar to the what Maya offers and you can see it being much more supportive to everyone's needs in the end so that it doesn't scare away some people from using it. I imagine it would have some difficulty to implement, but I thought it would be very unique to the user experience.

I'll speak with Kevin and Kat.

[simonv3]

My main concern with that technique is that I don't know how discoverable long presses are on websites. Do you have any research on that available?

Just a cursory search of UX StackExchange brings up this: http://ux.stackexchange.com/questions/24852/context-sensitive-click-long-click-yea-or-nay http://ux.stackexchange.com/questions/1257/indicate-long-click-option-to-user-on-android http://ux.stackexchange.com/questions/14284/tap-double-tap-long-press http://ux.stackexchange.com/questions/24460/press-and-hold-or-long-press-gestures-unintuitive

It looks like most people recommend staying away from long press, even on mobile, where I thought it might be permissible.

NNGroup also recommends against hidden navigation options: http://www.nngroup.com/articles/top-10-ia-mistakes/

I think a drop-down with "more options" might be a better option. Or an indicator that collapses or opens up hidden stages?

[roryaronson]

I don't think long-presses are good on the web because they are not common (Or maybe they are and I have just never discovered them!! ;p). And definitely not anything with a 'middle click' - that codepen example doesn't work on either of my laptops :(

I think we're onto something here though - at every step of Guide Creation, we want to find a balance of which options to show by default and which ones to 'hide' but still have available for those who want them. Furthermore, finding the best way to 'hide' the extra options be it menus, dropdowns, just making them smaller, etc.

Here's a new idea: What if we had both generic and specific options for life stages. So we had both a 'Growing' stage, and also the Seedling, Juvenile, Adult, Flowering, etc stages. Depending on how the member thinks or how they want to setup their guide, they could choose the generic route, or the more specific route. Mockup:

[xbertolerox]

I think Farman is definitely on to something

Reducing the life Stages could be a good way to reduce guide creation time and lower the intimidation barrier. I've never used long clicks on a computer, but I like your mockup Rory (love the mascot/comment comb!).

I like the idea of nesting more complex actions or stages. The simple guides can be made with more ease, yet the site can still feel technically suited for growers.

-Kevin

On Friday, June 26, 2015, Rory Aronson notifications@github.com wrote:

I don't think long-presses are good on the web because they are not common (Or maybe they are and I have just never discovered them!! ;p). And definitely not anything with a 'middle click' - that codepen example doesn't work on either of my laptops :(

I think we're onto something here though - at every step of Guide Creation, we want to find a balance of which options to show by default and which ones to 'hide' but still have available for those who want them. Furthermore, finding the best way to 'hide' the extra options be it menus, dropdowns, just making them smaller, etc.

Here's a new idea: What if we had both generic and specific options for life stages. So we had both a 'Growing' stage, and also the Seedling, Juvenile, Adult, Flowering, etc stages. Depending on how the member thinks or how they want to setup their guide, they could choose the generic route, or the more specific route. Mockup: [image: more options life stages] https://cloud.githubusercontent.com/assets/5524043/8386314/2bd69782-1c04-11e5-8c8f-d9ff94cf8e4f.png

— Reply to this email directly or view it on GitHub https://github.com/openfarmcc/OpenFarm/issues/638#issuecomment-115863803 .

Kevin Bertolero Forestry & Natural Resource Management, Cal Poly (209) 312-1075

[simonv3]

@roryaronson just for clarification, what's the green circle mean in your mockup, and what does it mean when something is selected in the more options and on the "generic options". Does it make sense to show both? Should they maybe be made more distinct? What "more options" fall within Preparation? Do they break down that easily?

[roryaronson]

@simonv3 the green circle means that that stage has been selected to be used.

I think we could go in two directions here.

1) Generic options and Advanced options are separate. You can either choose from the generic three OR the advanced dozen. But you can't pick from both at one time.

2) All advanced options are 'children' of the generic options as though the generic options were categories or 'meta-stages'. So each advanced stage would have to fit into one of the generic stages. One can either pick JUST generic options, OR by picking advanced options the 'parent' generic option is also automatically selected. This might involve displaying somewhat of an extra layer on the timeline because this would imply the generic life stage would be occurring concurrently with the advanced option. For example, on the current Timeline mockups, the 'Plant's Lifetime' is already somewhat of a 'meta-stage' that encompasses all advanced life stages. Imagine adding in generic options to the hierarchy: 1) Plant's Lifetime, 2) Generic Life Stages, 3) Advanced Life Stages, where everything is nested and occurring concurrently.

Am I making sense here? ;p

I think I am in favor of option 2. Are there other options?

[roryaronson]

Here is a mockup for what option 2 could look like:

[simonv3]

I like where this is going.

What happens when a user doesn't have "Production" selected in the first step? Do we still show the production options when "More options" gets selected. Or are they just not high-lighted? If they have production selected - are all of them highlighted?

What if we went about this a slightly different way and focused on the timeline drawing to also select the steps?

[warpling]

That's pretty cool Simon! Definitely includes everything. I'd still worry about how users get taught when they're dropping on an empty timeline. What if it defaulted to something adjustable/expandable? I forget if the sections can overlap…

[simonv3]

That's cool! We just automatically create a timeline? It's even less thinking and I think we can come up with some good visual to indicate that things can be dragged around.

How would you remove a section? I'm not sure the '+' is the best indicator there, but I'm not sure whether I can think of anything better - it certainly affords pressing.

I think the issue is though that things could technically overlap. But in that case, why don't we just gantt chart it?

[warpling]

Reducing that cognitive load ;) Dragging hint/visuals can definitely be improved, as well as that splitting/reducing process. I'll think on that interface a bit more (I was stuck on trying to make the pressing clear and accessible too).

Gantt chat style would work although I think it's not as clear for a beginner and doubles the draggable points and complexity. Maybe if it's a rarity it could be turned on:

Have overlapping sections? Enable advanced mode.

[roryaronson]

I like where this is going! I feel the concern too of dropping someone into an empty timeline. "Uh, what do I do here?" I also feel a concern about giving someone a timeline they don't want. Maybe my Guide is just about harvesting (adult, flowering, fruiting, dormancy) and as a guide author I now feel pressured to make a 'complete guide' and/or I don't realize I can remove timeline sections.

Another thing we have talked about being a major distinction on the timeline is the life stage vs the window. Eg: the seedling life stage might only last one week, but you can do it anytime within a 4 month window. The best idea I came up with for this is having the member create a timeline as though they are growing the crop as early in the season as possible, and then having them take that whole timeline and shifting it to represent the latest start possible.

Something else that could be cool is using the Timeline as the navigation between life stages when filling out the stage details.

[simonv3]

Here's some more thoughts along the lines of getting straight on a timeline. When the user chooses the stages they could be shown something like @warpling's splitting, or a more gantt style thing (like the existing concepts.

@roryaronson I just realized that how I'm seeing these stages represented on the timeline is "when you do them" as opposed to "how long they take", which I feel like is fairly standard for growing instructions. Is it worth showing a couple of people who grow plants the timeline, and asking them how they interpret the timeline?

[farmanp]

First off I just have to say it's awesome how strong the production flow is on this project. You all really care about this! And the new mockups look amazing. I'm glad it was cleared up about the function I offered because it doesn't make sense to use something that will just get buggy and be choppy design.

Are there plans to improve the "cognitive load" that @warpling was mentioning? I like where he's getting at. I've seen a lot of applications provide a quick tour and tutorial for how to use their sites. It's normally short and sweet but I think sometimes it helps to get hints involved, but not intensive hints like the infamous Microsoft paperclip.

[simonv3]

@farmanp All talk about this is very welcome. Have a look at issue #540 for some past conversations, but Rory also mentions the tour thing above (that's what the bee is for). In slack we've also discussed how the bandcamp tutorial works and some other things (which is subtle, and I like).

If you want to talk in real time, you should join Slack! Here's a sign up page: http://openfarm-slack.herokuapp.com/ (we'll be integrating that into the actual website soon).

[farmanp]

thanks @simonv3. I'll be sure to make my comments more constructive on here from now on.

[simonv3]

@farmanp I didn't mean to imply that they weren't constructive! It's good to keep these things in mind, and all contributions are welcome :). Once we have some properly built things, I think we would all love whatever help we can get testing them with users and getting user feedback.

[simonv3]

Anyone have any more thoughts on this? I'm doing a major restructure at the moment of the API, and it doesn't make much sense to me to rebuild this part if we're going to change it again so soon.

[roryaronson]

@simonv3, interesting thought on the "when you do them" as opposed to "how long they take". I think I see it as 'both are important' for these reasons: As a grower, its important for me to know both when can I sow the seeds and how long should I be caring for the plants as seedlings.

If a timeline is only showing "how long they take" information and there isn't the flexibility of a 'window' then as a Guide reader I might feel boxed into "Oh my gosh I missed when this Guide started by a month! Now I don't know if these plants will survive if I start them now, it might be too late, I guess I won't grow them". When in reality, the Crop maybe could be sowed anytime during a 4 month period, and the Timeline was only showing an early start. It would also be helpful from a planning perspective to know how I might want to spread out when I sow my seeds in order to get a full season of tomatoes vs just one big crop of them.

If a timeline is only showing "when you do them" information then I might misunderstand a 4 month long seedling bar as my plants will be seedlings for 4 months. Doing it gantt style would solve this, but may look messy and overwhelming, and not really convey to me when my next stage is going to start. The 'when you do them' windows could also be really long. Imagine a guide for growing in a greenhouse. Is every stage just the entire year because you can grow stuff year round? That's a useless timeline.

Maybe we don't need to show windows for every stage though. What if we simply showed the reader the Growing Season window and the Guide duration (and sub-stages) as though they are going to start using the Guide today. If its not the right timing (the Guide Duration falls outside of the Growing Season), then we show a warning message to the tune of "Warning: You're 3 weeks early to start using this Guide". Within timeline creation, we have the member create a non-gantt (non-overlapping) style timeline that represents their whole guide duration. And then we have them specify an earliest and latest start time for their Guide.

On another note, I really like the concept of combining life stage selection with timeline creation. I'll make another mockup right now. Keep the convo going! :bee:

[roryaronson]

So I thought a lot about all this. It seems that the most important 'window' to show is the 'Starting Window' - the period of time when someone should start following a Guide. I think this is best input by first creating a complete Timeline for an early start, and then shifting it to represent a late start. Visually this makes the most sense to me (rather than trying to drag the starting window itself and imagining what all the other stages would then look like). The other stuff like 'Growing Season' can be easily inferred from the available information IMO and it isn't correct to show on Guides that may only have to do with a few life stages.

Re: splitting life stages. I don't know if that's a good idea. Essentially all life stages are the same thing (periods of time that are labeled). So while we can have a 'Preparation' Stage, I don't think it needs to have sub-stages. I guess I'm saying we should just let the member choose whatever stages they want and they all should act the same - just be labeled according to whatever makes the most sense to the Guide creator. We can start the member off with a couple 'generic' stages.

Enough blabbing from me, here's my mockup ;p