Help us Catch the "Catch-22s"

[eduguidepfl]

┆Attachments: Help us Catch the Catch-22s | Screen Shot 2017-06-29 at 2.43.38 PM.png | Screen Shot 2017-06-29 at 2.51.10 PM.png | Review of arrows in Path Interface | EduGuide HP.png | Demo Error Message.png | Demo Error Message.png | Suggestion Add Path Menu .jpg

[eduguidepfl]

➤ Scirella commented:

Screen Shot 2017-06-29 at 2.43.38 PM.png

On this screen shot, there are two triangles to represent a movement forward (and one to go back) then there's the logo and a greyed out logo. I kept thinking that the two forward arrows do something different. I'm still not sure. I think if I click the arrow underneath the text it adds extra text -- or another text box. Or, it gives me the option to add a comment. Maybe this icon should be something different. A plus sign may be better to represent more if there's more text. Or maybe a scrollbar in the textbox to let the user know there is more text to read. The plus sign could be used when you want to add a comment only. Just an idea...

[eduguidepfl]

➤ Scirella commented:

Screen Shot 2017-06-29 at 2.51.10 PM.png

This graphic makes me think there is something missing. As if my computer is not loading correctly. If nothing is supposed to be here it would be better left blank.

[eduguidepfl]

➤ Jon Morgan commented:

@scirella1 The logo is meant to be a placeholder. We intended it to appear more as a watermark. Do you think that it would be less confusing if it was made a little lighter?

[eduguidepfl]

➤ Jon Morgan commented:

@scirella1 The "next arrow" below the content of the page allows the user to move forward. It has the same function as the left/right arrow towards the top of the page. These also appear when you are responding in the comments to a questions, and clicking it will in that case submit your comment. We had introduced the arrow below the content to increase its visibility.

Can you share some additional thinking about changes we could make which might make the arrow a little clearer?

[eduguidepfl]

➤ UXDesignerJulie commented:

Hmmm...having arrows all over the place is a bit confusing. What does each one do? Why are they there?

Let's take a look at the arrow that is just off to the top left of the text box. When looking at it from a user flow point of view, the first thing the user see's is the arrow. Past experience has taught us that arrows are meant to be clicked on. I see the arrow before the text, so maybe I need to click it before I read the text. This arrows proximity is right next to the text box so they must be connected.

Let's look at the arrow that is at the bottom right corner of the text box. It's is close to the text box and has the same coloring to it, so it must be connected to the text box. Past experience has taught me that this arrow is in the place where I would expect it to be. It's after I read the text, so that must mean I need to read the text first and then I click on the arrow to go forward to the next step.

Let's look at that big arrow, that is a light blue color. It's off by it's own, so I'm not too sure if I'm suppose to click on it and what that would do, or just look at it. But, past experience has taught me that arrows pointing to the right are meant to be clicked.

Let's look at the set of arrows that are at the top right corner of the screen. They are all by themselves, so not too sure what they are connected to. Past experience has taught me that arrows at the top right corner of a window will take me to a totally different page, but it's not that common of a pattern.

I am seeing this page for the first time. Here is how my user flow might go: (1) I see the arrow at the top left corner of the text box. I would probably click on it first before reading that text. Or I might go straight to reading the text after wondering why that arrow is there. (2) If clicking on that arrow doesn't do anything or I skip it, I'll read the text. (3) Past experience has taught me that the arrow at the bottom right corner of the text box is the one I click to continue on after I read the text. The other arrows may confuse me, but I'll more then likely ignore them. Though some people might try to see what they do.

There is a rule in UX Design called Fitt's Law. One of the things it says is basically, the shorter the distance from one step of the task to another the better.

Recommendation: I would take out all of the arrows except the one at the bottom left corner of the text box.

[eduguidepfl]

➤ Jon Morgan commented:

@uxdesignerjulie1 @scirella1 I captured your description as a document (see attached). Review of arrows in Path Interface You raised some really strong points.

[eduguidepfl]

➤ UXDesignerJulie commented:

@jonmorgan15 - Happy to help. :smile:

[eduguidepfl]

➤ Scirella commented:

When I'm on the Dashboard, there's no link back to "The Path" This is where I was before when I couldn't figure out how to get back. This is my journey:

1. I was on MyPath and I closed the window to go do something else
2. I came back to work again and opened Chrome and went to EduGuide 3.The hamburger menu only has 4 options, neither of which I want

(https://trello-attachments.s3.amazonaws.com/58a3770f0649b4b72ef7275f/5943eb1acf393282e8af11bc/05dd0c52eba72b160b488815c15c9e60/EduGuide_HP.png)

1. I feel as though I have 3 choices that might make sense a I could log out and start again b I can click on the EduGuide logo at the top of the page c I can click on Demo

5 I choose Demo

1. I get an error message

   (https://trello-attachments.s3.amazonaws.com/58a3770f0649b4b72ef7275f/5943eb1acf393282e8af11bc/392203c934659d02a85c035f0f29dd71/Demo_Error_Message.png) ](https://trello-attachments.s3.amazonaws.com/58a3770f0649b4b72ef7275f/5943eb1acf393282e8af11bc/e673e6a2d217edc8b7afff47630b82b6/Demo_Error_Message.png)

2. Here, finally I can get back by pressing "Continue My Path"

Here's one solution: Suggestion Add Path Menu .jpg

[eduguidepfl]

➤ Scirella commented:

@jonmorgan15 I like the Plus sign you added into the text box. That makes it more obvious that you would add first and then use the upper right arrow to move to the next page

[eduguidepfl]

➤ Scirella commented:

@jonmorgan15 Reference to the Logo Screen Arrow

I"m not sure it's even necessary. I think removing it altogether is best. Other ideas: You could make the text box bigger to cover more of the page. Or, if consistency is what you are going for you could add a photo related to the question.

Overall, it's nice to have a blank clean page with only the important info on it. Less is More!

I know you mentioned making the screen even lighter but I think the problem is that the logo is an arrow. That just makes it too confusing. It doesn't add any value other than company identification -- which is nice but not really necessary :smile:

[eduguidepfl]

➤ Jon Morgan commented:

@scirella1 The Arrow that's shown is the symbol/arrow from our organization's logo. The original idea is that it is being displayed there as an avatar.

The broader idea behind the path is that somebody is talking to the student. I guess in modern terms the feeling would be that it is being generated by a chat robot of some kind. So, the logo and the name "EduGuide" is intended to make it feel personal.

But, if you are saying that the arrow could go, perhaps there is something more wrong with this approach?

What if the arrow was resized or designed differently so that it doesn't look so much like a button?

[eduguidepfl]

➤ Scirella commented:

@uxdesignerjulie1 Thanks for putting my info into a document. I guess that's a better way to explain an issue. Much easier to understand!

[eduguidepfl]

➤ Scirella commented:

Hi Jon, I suppose that approach may work. Maybe try it with and without. I'm happy to do some A/B testing on a few folks and see what their reaction is. Susan

[eduguidepfl]

➤ UXDesignerJulie commented:

@scirella1 I would take credit, except Jon is the one who put it in a document. :)

[eduguidepfl]

➤ Scirella commented:

@uxdesignerjulie1 Thanks anyway! Where are you located Julie? Just curious... :smile:

[eduguidepfl]

➤ UXDesignerJulie commented:

@scirella1 Boulder, Colorado. And you?