Details
-
Type:
Improvement
-
Status: Closed (View Workflow)
-
Priority:
Major
-
Resolution: Done
-
Affects Version/s: None
-
Fix Version/s: None
-
Labels:None
-
Story Points:1
-
Epic Link:
-
Sprint:Fall 4 : 30 Sep to 11 Oct
Description
This will need to be tested/reproduced using major browsers on Mac and Windows. Please on your test appstore site and provide links for testing before submitting a PR.
The problem:
When using the query interface (box) at the top of the App Store home page, the browser typically suggests some values to enter. If you select something, a weird highlight appears over the entire text entry box, also covering the "sign in" link. If you mistakenly try to click the magnifying glass (to run the search), you will likely accidentally click the "sign in" link. Instead, you have to remember to press ENTER key. This is very awkward and needs to be fixed so that the weird highlight thing does not appear. Also, it should not be easy to screw up a search by accidentally clicking "Sign in".
Please look at apps.cytoscape.org as a comparison implementation that seems to work pretty well and provide a better user experience for searching the site. Notice how when you click in the "Search the App Store" text box, the background turns white, which provides good feedback letting the user know they have correctly activated this part of the UI. Also notice that the Search text entry is larger and it contains text that is easier to read. Notice that if you begin typing something, suggestions appear, but they do not cover up the UI. Please examine how apps.cytoscape.org styling is working and use that approach to improve our UI.
Attachments
Activity
Thanks for deploying on-line!
Change requests:
- When user starts typing, background of search text box should turn white and text should be black for best visibility and feedback
- Search text box should be longer; enough space for 28 characters to be shown without scrolling
- If user enters more than 28 characters, the text should scroll to the left instead of being drawn outside the text box
- If user presses the mouse button to get suggestions whilst typing query string, the box showing the suggestions should only extend as far as the box itself, and not cover anything to the right or left of the search box
- Text shown in the text box should exactly read: "Search the App Store"
(similar to apps.cytoscape.org)
Unrelated to this, but if it can be done now, that would be great:
- When user mouses over the "Sign In" link, the text should become brighter white instead of becoming underlined to indicate it can be clicked (underline is subtle and easy to miss; turning a brighter color is easier to see)
Hi Prof. [~aloraine],
Could you please try the devappstore in incognito mode as I have already deployed all the changes that you have requested.
Will do.
Items from above:
Checked using Safari browser, and "incognito mode" (Chrome) on Mac
Item 1) - background is still dark and text is still white
Item 2) - only 20 characters could be typed without scrolling
Item 3) - fixed
Item 4) - fixed
Item 4) - text is still "Search Apps ..." (Should be: "Search the App Store" with no ellipse character)
Updated the Pull Request with the Requested Changes.
Deployed on devappstore instance.
Completed as a part of IGBF-2039
Merged and deployed to https://dev-appstore-2.bioviz.org
It is working as expected.
Pull Request submitted :
https://bitbucket.org/lorainelab/appstore/pull-requests/126/igbf-2035-imporve-search-ui/diff
Changes are live on:
https://dev-appstore-1.bioviz.org