Redesign FTUX #273

Closed
TheJaredWilcurt opened this Issue Oct 11, 2016 · 39 comments

Projects

None yet

6 participants

@TheJaredWilcurt
Member
TheJaredWilcurt commented Oct 11, 2016 edited

The "First Time User Experience" (FTUX), needs improvement.

Problems with existing FTUX:

  • A. The blank state is confusing and not helpful.
    • User's don't know what they are looking at or how it works.

ftux blank

  • B. The auto-guessed state can potentially be confusing
    • If it guesses wrong, the intention of the UI could be hard to understand.
    • User may not understand to click the link and point it to folder containing projects

bad guess

  • C. Many users may only want to import one project, or just may not have a folder filled with projects. This default view for "multi-project import" doesn't help them.
    • They would have to select the parent of the folder they want to import, which isn't very intuitive
    • Or use the Add Project button, hidden in the top navigation. We can't expect a new user to find or understand this workflow on first use.
  • D. This leads to users selecting their project folder as the projects folder

bad input

  • E. Which leads to a bad set of imports

bad imports

  • F. We aren't conveying to the user that it is possible to drag/drop folders into the app.

The FTUX screen should be revised to fix all of the above issues.

@TheJaredWilcurt
Member

@mejiaj @zdennis @StephanRaab @blackbetty @kimmihack

Do you have any input on how this could be redesigned.

@TheJaredWilcurt TheJaredWilcurt added the UX label Oct 11, 2016
@mejiaj
mejiaj commented Oct 12, 2016

@TheJaredWilcurt I see. Let me play around with the app and see if I can come up with anything. Hopefully by this weekend.

@TheJaredWilcurt
Member

The best idea I've had so far is to have two blocks/buttons on first load, where one says "Single Project Import" and the other says "Multi-Project Import".

               _________                   _________
              | Single  |                 |  Multi  |
              | Project |                 | Project |
              | Import  |                 | Import  |
               ¯¯¯¯¯¯¯¯¯                   ¯¯¯¯¯¯¯¯¯

Or the text under the button and the button having some type of iconography.

@mejiaj
mejiaj commented Oct 15, 2016

I wonder if we even need it? The great thing about the old scout app is you could just drag your project folders in. Whether it was 1 or 2. The language itself on those screenshots is kind-of confusing too.

@TheJaredWilcurt
Member

Drag and Drop is a feature that is on the to-do list but hasn't been implemented yet.

Maybe a design like this?

FTUX Wireframe Mockup

But with nicer designs/iconography.

@nic-bertino

Hi everyone,

I have to apologize, but I'm currently moving and don't have access to my normal prototyping tools - I had to create some really lowfi wires, but I hope they are helpful. Based on the use case, I think the importer has to do more to help here. It should actively look for SASS directories or .scss files within a given structure and import only what it needs. This would help greatly with multiple projects as well. See:

web 1920 1
web 1920 2

This should elegantly handle single, multi, and drag/drop. The only thing not accounted for here is error cases, in which I'd say that the user should be sufficiently notified that the importer wasn't able to find any SASS files.

Happy to clarify on anything presented here.

@TheJaredWilcurt
Member

@nic-bertino

Thanks for posting!

I was going to write up a big response, but decided that it would be easier to explain with a video

The original stuff I was writing is here, though it is covered in it's entirety in the video.

@MarGerix

My question is can the UI be a different color. The red is very distracting and looks like an anti-virus software screaming danger. Have your users had any problem with the color?

@TheJaredWilcurt
Member

@MarGerix

The default theme on Scout-App is Simplex. It currently ships with 19 themes. We will also accept submissions for customized CSS for new themes if you would like to contribute.

As mentioned in the initial post of this issue, since the user can switch between different themes, any design work should be theme agnostic.

You can download and familiarize yourself with the app here:

@nic-bertino

@TheJaredWilcurt

No problem! Sorry it was unclear. Usually I'd prototype this a little bit better to reduce the confusion.

  • My initial reaction to your explanation is that the initial scan might be too aggressive for something not instantiated by a user. Is this to facilitate users who are migrating projects? If not, what disadvantages do you see to someone selecting a folder (OS Selection in the wire just meant using the file select from the OS) and scanning that particular folder recursively? I think this will help tremendously with onboarding.
  • Another note on the initial scan: even with something like GitHub projects, if it doesn't have SASS files, what can the product do for the user? Is this a use case you see frequently?
  • The project auto-guesser seems to be working in a way that will help the app determine what SASS directories are where - it seems odd that the current importer returns all subdirectories.
  • This is where I think the functionality I mentioned could help. Given the following file structure (simplified):
    image
    If a user selects the parent folder (scout-scan), the program should identify project1 and project2 as importable, but not wireframes (there's no SASS match there).

If a user selects only the project1 folder (or the SASS folder below), then only that project should be selected for import.

From there, you have a few options - you can walk your user through confirmation, making sure that the auto-guesser did its part (change project name, icons, SASS/export directories) or do something like what you have now which is the checkbox confirmation.

I hope that helps. Happy to continue the dialog!

@TheJaredWilcurt
Member

@nic-bertino

Again, crazy busy week, I actually recorded this the other night but haven't had time to upload it until just now. Sorry for rambling.

@TheJaredWilcurt
Member

From ewiggle on Reddit:

Ok so I took a wag at this with mspaint. Hopefully it gets the ideas across though.

Here's an example where the auto-guessed state is more clear just because of the wording, I think. But it could be clearer - for example if it's appropriate for a user to know if their folder directory actually has a sass file at that point, then you could show a "yes" under a "has sass?" column or something like that. I left a placeholder there for that.

Here's an example that corresponds with nic-bertino's suggestion from github, or at least I think it corresponds to that - just forget that he used the word "recursive". I did watch your video response but I think you might have misunderstood the idea he was suggesting - or maybe I misunderstood it, either way the idea is new to you lol. Basically you select the projects you want, and then, like an e-commerce site, you approve your own selection and press the green button to get to the next screen. I like this idea and it's ... well I use amazon a lot and they have a similar style.

And, in the case where you were to do one of those quick scans and find that none of the directories to look in were found? At that point I think you need basically a suitable 404 page that points the user to a button which lets them browse to a correct location. Here's a terrible rendition of what I'm talking about. But hopefully the idea gets across. Here's a prettier version for some website from a random image search.

@TheJaredWilcurt
Member

From @mejiaj:

The great thing about the old scout app is you could just drag your project folders in. Whether it was 1 or multiple.

Update: You can now drag and drop folders into the app at any point and it will auto-import them.

drag-in-files

The design could probably be improved, but the functionality is there. However there currently is no indication in the UI that you can do this.

I'm considering changing the language in the app to "Drag and drop project folders".

@TheJaredWilcurt
Member

Screenshots from ewiggle, with my responses.

First example

👍 I like the list of projects being displayed in a tabular way, with a "select/deselect all" checkbox being at the top. That simplifies a lot of things.

👍 And I like the checking for Input/Output folders in advance.

👍 The browse button to pick a different folder is the best part, way better than the clunk/hard to parse text I was using.

👎 I can grab the current computer username, but that may be weird or creepy. I don't see a lot of benefit in doing this.

I'm think that we will auto-check any projects that have both an input and an output folder found.


Example

👍 This does help to better explain the concept. Navigate the machine, checking folders that you want to import, then show a list of the checked ones to the right for easy review.

👎 Unfortunately I can't directly embed OS level folder trees. So I would need to scan and build the tree by hand in the UI. Which is very much possible, but kinda pointless when each OS supplies a file/folder browser that I can access. Also I think the first screenshot solves more problems in a more elegant way.


404 example

👍 I'm think having Scout the Puppy sniffing at the box. Here's my modifications. Let me know what you think. The dog image is a placeholder until I could get actual artwork made for it from Kim.

404

@TheJaredWilcurt
Member
TheJaredWilcurt commented Oct 26, 2016 edited

I think a lot of good groundwork has been laid for multi-project import. We've fixed all the issues in A. & B. listed in the first comment of this issue. But we still don't have a good solution for people who want to drag/drop in projects, or just import one singular project (C., D., E., & F.).

This is the best option so far for that:

FTUX Wireframe Mockup

It solves C through F but I feel like there is probably a more elegant way of doing it. I can still use this method if we can't think of anything better though.

@TheJaredWilcurt
Member

@ewiggle

FTUX Multi-import UI mockup

I made a mockup of the multi-import on CodePen. You can play around with it here:

@TheJaredWilcurt
Member

I spoke with someone who works in UX today and they recommended reducing the accordance given the the drag/drop field seen here:

FTUX Wireframe Mockup

Once people know they can drag and drop, they won't forget that feature. It's safe to make it a little more subtle, even just some text with a slightly different color.

Something to consider while planning out this design.

@TheJaredWilcurt
Member

From ewiggle on Reddit:

I didn't forget about this. Filled up some pages in my onenote and filled several pages in my sketchbook with notes/ideas/questions for this.

Once I get it into a digestible format, some rough mockups too hopefully, I'll send it along.

(lots of ideas, need to settle on a few of them)


awsome, look forward to it!

@TheJaredWilcurt
Member

From ewiggle on Reddit:

I'll fully explain the reasoning behind each thing in these screenshots later in a separate post, but I just wanted to slide them across the table to let you know what I settled on. So what I'm saying is, hold your judgement until I send you the explanation as to why I decided on these - unless, of course, you dig them, in which case judge away.

Anyways, here are two screens which I settled on:

(oh, forgive the weights, fonts, icons, and so on ... but hopefully the idea is straightforward)

The first one is just adding on what you already mocked up on github. Mostly what I did here was think about how to explain to users which button they should push. I tossed around several other ideas for this part but this one won out.

The second one, while it might not look like anything is different, basically has three new buttons which I think would be useful. They are shown as underlined links and one just as text but that was to reduce their spotlight.

Then there are these other two (one and two) which I basically made when I was trying to refine the ideas into something even simpler just to see how it could be. (I'll also explain these last two but I'll use them more for questions about the functionality planned/missing.)

Anyways, just sending these to you prematurely because I feel like it's taken so long for me to decide on a thing. And, again, I'll explain my logic behind all the decisions in a separate post with basically an image that has text and arrows pointing to things in the mockup. I'll also explain the use cases I was imagining and which had priority and all that.

Edit: oh yeah and I did also narrow down my thoughts for that last issue where users don't know they can drag and drop on the main screen. i'll send that along later too.

@TheJaredWilcurt
Member

From ewiggle on Reddit:

https://youtu.be/FrPc7OKFG5U

I mostly made this just to ... just because I liked your video feedback style and wanted to try it out. I'll still do the other write-up later.

@TheJaredWilcurt
Member

@ewiggle

I think I'm having trouble understanding the userflow in your designs. What is the end-to-end process, starting from launching the app, to having a project/projects imported.

It looks like some of your mockups are at different stages of the process. Can you give an example (or multiple), like this.

  1. User launches Scout-App
  2. They see this FTUX screen
  3. They drag in a project or multiple projects
  4. User now sees the imported project(s)

  1. User launches Scout-App
  2. They see this FTUX screen
  3. They click "Add a Project" and an OS directory browse window appears
  4. They select a project folder to import
  5. User now sees the imported project

Also, unrelated. I was looking at Mixture, one of several programs similar to Scout-App for assisting web designers and developers with a GUI (though it is now defunct). Its FTUX relied on users creating new projects based on one of their templates. The program heavily relied on projects being set up with specific structures and with special config files. I never liked that as it forces people to organize their project in ways they normally wouldn't, and it doesn't allow you to import an existing project without a lot of overhaul. But I do think the idea of having a "New project from template" or "New project from Boilerplate" may be good.

I'm still kicking around this idea. I'm not sure of how useful it would be or if it's a worthy feature or just cruft. Very much on the fence on this. I can see a lot of newbies finding it useful to have one-click access to an already set up and organized project.

Since I already had Mixture installed from a few years ago, and you can no longer download it, I took a screenshot to show what their FTUX looks like.

mixture-templates

I don't think we would need that many templates. Really just 1-3 would probably be good. I'm thinking about a general, unbiased/agnostic one that just comes with the bare essentials, based off of HTML 5 Boilerplate. Then maybe a Bootstrap 3, Bootstrap 4 (when it's officially launched), and Foundation one? or maybe Bulma? Or maybe have an option for people to add their own, similar to the themes that come built in. I'm not sure.

I wouldn't bring it up, but it seems like if we were to add that feature in in the future that it would affect the FTUX of the app. Since that seems like one of the starting places for a new user.

  1. Import single project
  2. Multi-Project import
  3. New project from template (???)
@ewiggle
ewiggle commented Nov 9, 2016 edited

@TheJaredWilcurt

  1. User launches Scout-App
  2. Scout-App runs auto-importer routine in the background.
  3. IF automporter finds nothing, then show the drag and drop screen, otherwise show the importer results screen.

Note: In the case where a user is first shown the [drag and drop] screen, after they browse to select a project or a directory of projects, they'll see the importer results screen next.

And here are additional insights into my reasoning which I promised to share.

Also, remember in some screenshots where I had an X button at the top right, making it a modal window? Well that's because I was imagining the app doing something like what google music does. I think you talked about having the app do that too. Anyways, this gif shows what that could act like.

As for your template stuff, yeah that would impact the design of your import functions because I think most users would be used to having "import" and "new" near each other when they first see them.

note: didn't send anything about drag/drop on main screen yet.

@ewiggle
ewiggle commented Nov 9, 2016

@TheJaredWilcurt

I've passively been thinking about the mixture template stuff and how that might be implemented. I've got a few ideas rolling around the head so I think it wouldn't necessarily have to be too far different from what you have, depending on how you plan on implementing it.

For example, if you want the import to be the first thing a user sees (i.e. not be modal, or not be something you select before it appears), then the import screen might have to adjust to be the "create or import" screen. And in that case that drag and drop screen would need to change its approach, in my opinion.

But that's just my initial inclination. In any case, I don't think the change that would be warranted would necessarily make the app look like a different beast altogether. So, yeah, while it will impact the design approach, I think it can still hang out there in the future if feature additions are still fuzzy. Or, could just make some mock-ups, and even do some brief testing, with the assumption that it will be implemented. Either way can work imo.

@ewiggle
ewiggle commented Nov 10, 2016 edited

@TheJaredWilcurt

Just to make sure I understand your end-to-end vision, I put these walkthroughs together so you could verify that's the process you're aiming for:

Are these correct?

Also, you mentioned that there was no indicator of being able to drag and drop except on that one part of the screen at the start. Well, here are some options for that part.

(Note: I simplified the screens for the sake of explanation and time.)

I do really like that idea about having the app let the user know it found projects, without actually taking the user to those found projects. That's interesting and gives the user more autonomy without first pushing them into the importer and risking the case where the user needs to find a way out.

I also like your option #2 where you separate the found files into the directories where you found the items. But does that mean your importer is no longer going to stop once it finds a directory of files - that would increase the completion time up to a couple seconds right, since it's scanning all the drive letters on the list?

Some other concerns:

  • You only get the importer table, where you can prematurely see if a project has input and output, if you select the group import button. Individual imports won't see that. Nor will drag and drops see it on anything except the multiple project import screen.
  • You can only add groups of projects with a button on the initial start of the app. After that, you have to drap and drop or do one at a time.
  • If the initial screen actually finds a bunch of projects and shows that fact with an indicator on the add group button, then the user will not be able to use that button to add their own group of projects. They'll be trading an initial "browse for multiple" button for a "show what the auto-importer found".
  • [x]'ing out individual items doesn't seem nearly as useful as [x]'ing out directories where you found stuff, and [x]'ing out the entire table such that you start from scratch. The x on individual items also seems to clutter the look, in my opinion. Because you can select the checkbox on each item, I don't think you need an x on each item.
  • I think the [x]'ing out individual items idea needs to be looked at a bit more. I can't imagine using it per item.
@TheJaredWilcurt
Member
TheJaredWilcurt commented Nov 14, 2016 edited

@ewiggle

I created an ftux branch today and started implementing this. Since the UX is pretty close to being done, I don't think it will take much effort to go back and alter the stuff I've done. So far the initial screen has been updated.

ftux

I ended up creating my own icon for "drag and drop", unfortunately it still didn't meaningfully convey the concept on it's own so I had to add a dashed border.

If you click inside the dashed board or on the "add a project" button, it will give you the directory browser to import 1 project.

The button colors are the best I can do without making the buttons look ridiculous in other themes (since Scout-App ships with 19 different themes, they all have to look at least okay).

Still need to work on the icons that are on the buttons themselves, and start on the multi-project import modal.

  1. Is there any text that should be changed before I add it to our localization system
  2. Are there any design aspects that need changed.
@TheJaredWilcurt
Member

From ewiggle on Reddit:

Just want to let you know that I did read this and watch the video and so on, like moments after you posted each. Glad the issues have all been addressed, at least somewhat.

My aim is to provide some comments, icon ideas for your designer (or you), and so on before too long. I'm hoping sometime this week.

Separately I did also want to cover some other opinions I had as well

  • user testing, insights, etc
  • consistency in the interface
  • something else I can't remember ...

That said, right off the bat I would consider saying "add project" (without the 'a') just to match the wording in the other button next to it.

@TheJaredWilcurt
Member

FTUX Drag and Drop

Toying around with how to make the drag/drop part of the design better

@bartclaeys

I like this version. Additionally I would get rid of the "File" dropdown on top, because it's redundant. I would move 'Preferences' outside of 'File' and maybe add it as a gear icon top right of the menu bar, or just as a text link 'Preferences' before 'About'.

@TheJaredWilcurt
Member

@bartclaeys

You can see in the File menu of this mockup, that additional things can be added

This seems like the most logical place to put things that are unique features (should not be combined with other views) but aren't something people will need immediate access to all the time (shouldn't be visible at all times). The only other options to this would be:

  • To have these additional features hidden inside of other dialogs, which just adds unnecessary clicks and may be confusing or unintuitive.
  • To display everything in the UI at all times, so nothing is every hidden or obscurred. However this lends itself to creating a very cluttered interface quickly, and the whole point of Scout-App is to be very simple.
@TheJaredWilcurt
Member

From ewiggle on Reddit

Been a bit but I didn't forget. I will share things either way once I set time for it. Wanted to chime in to say that.

Cool, still in the process of implementing what we've discussed so far. I'm running into some stuff that I want to run by you for input once I get further along

@TheJaredWilcurt
Member

@ewiggle @bartclaeys @nic-bertino

Here is what the current dev branch looks like, and the status of the FTUX


Here is the language that needs finalized

Menu:

menu

  • A. New from Boilerplate (Won't be in the upcoming version, but the one after it)
  • B. Multi-Project Import

FTUX:

ftux

  • C. <h3>Drag and Drop</h3> <h4>anywhere to import projects</h4>
  • D. Add a Project (Button 1)
  • E. select a project folder (Under Button 1)
  • F. Add Group of Projects (Button 2)
  • G. select the group folder (Under Button 2)
  • H. found 34 projects (Under Button 2 alternative)

Multi-Project Import Modal:

multi-project-import

  • I. Multi-Project Import (Modal title)
  • J. 15 Selected Projects (Panel header)
  • K. Project Name (Table header)
  • L. Input (Sass) (Table header)
  • M. Output (CSS) (Table header)
  • N. Drag & Drop (Panel footer)
  • O. Add another project (Panel footer)
  • P. Add Group of projects (Panel footer)
  • Q. Import 15 Projects (Button 3)
@TheJaredWilcurt
Member

After looking this over, N., O., and P. are the ones in need of the most improvement. The rest seem to work pretty well.

I've update the FTUX view so now it detects if the Auto-Guesser found a projects folder and if so it shows how many projects are in the folder under the button.

found 28 projects

And the number animates in using CountUp.js over 2.5 seconds. So it draws your attention to it.

I'll be making the icons soon, then that's about it.

@TheJaredWilcurt
Member

01
02

I updated some of the icons. Next up is localizing all of the text except for stuff in the footer of the Multi-Project Import modal:

  • Drag & Drop
  • Add another project
  • Add Group of projects

If I don't get any feedback from people I'll tinker around with it and see if I can come up with anything better for the language there, then localize it too.

@ewiggle @nic-bertino @bartclaeys

@mejiaj
mejiaj commented Dec 1, 2016

@TheJaredWilcurt are there any design guidelines for the app? Maybe it might be useful to document this + some patterns. That way you or other devs can easily build on the UI and still keep the design feeling unified.

Like a styleguide.

@TheJaredWilcurt
Member

Localized the FTUX/Multi-Import modal. Except for the 3 buttons mentioned previously.

FTUX

Multi-Project Import

Still need to translate all the other languages on these new KEYS.

Gotta run to work, will answer styleguide question later.

@TheJaredWilcurt
Member

@mejiaj

I just started writing up some UX docs and rules. It probably needs some more attention but it's a start.

I think this GitHub issue has served it's purpose for improving the FTUX. There is a new UX issue open for more general discussion. Thanks for everyone's input on the FTUX. If you have more ideas, post them in the new issue:

Closing this issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment