User Experience Enhancement

[ceipher]

There are places of the UI itself to be optimized. Any feedback on current system interaction is welcome.

Current:

• Hard to select attributes with a tiny checkbox.
• Maybe there's a better way to display attributes selection guide.

[enewe101]

When the category search results are returned, displaying the query in red feels like an error message -- gets me every time. How about blue?

[enewe101]

Not a huge deal, but the text input for category search seems to drop keystrokes. Does anyone else notice that? It seems like a brief loss of focus on the text input while the autocomplete response is being parsed/rendered.

[priyasidhaye]

Also, after selecting an entry from the auto complete in the category search, we need to hit Search again to get the results. I searched multiple things one after the other, and the two clicks each time seemed a little off to me.

[asutcl]

I have looked at it briefly here are a few of my suggestions, I will take time do look at it more over the weekend:

Usability	Possible Cause	Proposed Solution
It is unclear what to do once on the ranked product/attribute selection page	The information is hidden by default	Have the additional information present by default with the option to hide it afterwards
Attributes can be difficult to read	Fonts are too small (makes it look like a secondary feature)	Make fonts bigger, a lot of space is used up by the product box that contains no information
Not clear always clear how the attributes contribute to the ranking	The only indication is that the list changes when you select an attribute	Exploit other Gestalt principles, such as colour (similarity): have the attribute div background change colour to match the product list background when selected, or even add an arrow that appears once selected and which points at the product list, to indicate that its now having a direct effect on the ranking, also the attribute screen real estate/visibility is not consistent with the importance it has in the overall process. The gestalt principle of closure is working against us here since the attributes and the products are encapsulated into to different visual components. There is no visual link between them.
Clicking on a product results in different behaviours	Products with broken urls don't redirect and reset attribute selection	First indicate that a product will redirect to the product page one the box is clicked e.g. View Product Page, in the case where no product page is available, we could potentially offer the option to search for product in some search engine, either way this should be clear to the user
Hover over requires you to keep your mouse over the attribute to see the information	Fonts are small (previous issue), users may be looking at a list of products and may want a quick reminder of what an attribute is	This is a bit more complex but we could potentially have selected attributes always show their description. Possibly we could have a little snippet of the description always present with a little more link/button which expands and shows the whole description. I believe this would make recall easier than having the move the mouse over the attribute and waiting for the hover to pop up.

[asutcl]

Usability	Possible Cause	Proposed Solution
How does an attribute weigh in	No indication of what values of this attribute are good or bad	Possibly include a little sentence that explains the direction field of attribute e.g. Higher values for this attribute usually improve overall score
What are the values? (induced by previous usability remark)	Unclear what values are being looked at	Products should display at least the values which were used for the product ranking in the product box. Or, the users should have the ability to see these values (click and expand), without going to the product page
Clicking additional check boxes doesn't always refresh the product list, this may lead tot he user wondering if the application is still working	New ranking is the same as the old one	Explanation should be given when clicking an attribute doesn't change the ordering. The proposed solution to the previous issue to display selected attribute values could solve this because the user would see that his selection did have an effect on the product list but that it didn't change the ordering

[enewe101]

I know the list is already long, but let me just note a couple things:

• checkbox labels in attribute selection area should be clickable --> <label for="id-of-checkbox">text</label>
• checkbox should show it's clicked state before the list refreshes, this way the user's request is shown as acknowledged even if we have to wait for the result -- feels "sticky" otherwise
• show a spinner while loading, so that the user knows if they are waiting for a result

[enewe101]

• Color of query on category page is same blue as results
• Checking features issues async request for less stickiness
• Checkbox labels are clickable, bigger, lighter
• A holder for images with styling has been added, no-image case is handled
• A holder for the one-liner has been added ...more to come

Changes are not deep, and no conflicts, so I am merging this branch to master and pushing.

[enewe101]

@ceipher I suggest you merge from master to sync this as you change the approach taken to issuing / satisfying requests.

[enewe101]

Added a spinner and a faded effect when refreshing the products list. This should help address some of the usability items relating to the user understanding what is happening after they've ticked a feature. Again, I will merge this into master.

Feedback is welcome!

[enewe101]

TODO - handle empty results set on category search

[enewe101]

Added handling of empty results sets in category search.

@asutcl, I feel that some of your issues are handled though not in exactly the way you specified. So I'd be open to hearing whether you think that there is still a gap there (and if you had any other suggestions). For example, I agree about the appeal to gestalt principles regarding the causal link between attributes and the results set, but breaching visual encapsulation to make the link is difficult to pull off with css. I'm hoping that the use of the spinner to indicate loading and adding the values associated to ticked attributes (which is coming in another issue) is enough. Let me know what you think.

So as of now, I'm satisfied with this issue, but I'll await feedback from others to gauge that.

[asutcl]

@enewe101 It looks good in firefox. The fact that it now indicates What feature do you care about? I think helps alot to understand what is going on and showing that the two panes are linked. The comments I had put were mainly suggestions based on experience, since we don't have any user data, but I am far from an expert and if people have other ideas great. I like the spinner and fadder, too.

One issue though, while it looks great in Firefox, if I open it in Chrome... text goes out of boxes, attribute labels and boxes aren't aligned and the shader/spinner doesn't appear.

[enewe101]

Oh boy! I'd hate to see what happens if you open it in IE! Thanks for the heads up, I'll look into it!

[asutcl]

I also wouldn't be adverse to the spinner/shader having a minimum time so that even on real small categories it appears, even if for just half a second, if possible.

Might have the added benefit of making our system seem smarter... just because it is "thinking" more. As long as it doesn't become a nuisance. But maybe this is just me liking the spinner too much. Everything should ideally be user tested (5 users could be enough). I don't mind finding 5 people next week and having them sit in front of our 0.4 as to possible identify stress points. If people want to test different layouts too this could be done with multiple branches.

If people are willing to work to have slightly different layouts. I am willing to ask a couple friends/lab mates for their input. As long is this doesn't cause any ethics issues...(@prmr)

[enewe101]

Okay, fixed for webkit-based browsers.

[priyasidhaye]

After the latest commit the product list goes awry in firefox after selecting/deselecting attributes. Has anyone else come across this? It's working in Chrome though

[enewe101]

I can't reproduce this. I think @ceipher solved it already?

[enewe101]

Ok, I'm going to close this. But feel free to post usability issues in connection with release 1.0.