codefordayton / daytonreap

Web application to streamline Dayton's REAP (Real Estate Acquisition Process) Program
MIT License
7 stars 14 forks source link

Various improvements to the css of the site #73

Open DavidEBest opened 8 years ago

DavidEBest commented 8 years ago

I enjoy working on UI/UX design, so I thought I would offer some initial impressions. Overall I think the tool is easy to use and provides very useful information to help users ease into this process. Having said that, here are some actionable items that might help improve the experience, in no particular order:

1.) The top navigation bar isn't really providing any value currently. I suggest moving the search box up there, right after the application title. For example, more like the design used by Google after entering a query: https://www.google.com/?#q=code+for+dayton

2.) You could also consider moving the land bank logo to the upper right of the navigation bar as well, so it is always visible and makes better use of the screen space.

3.) The search box felt a bit sluggish as I was typing on a pretty beefy machine, in particular Firefox seemed worse than Chrome. Maybe performance could be improved a bit somewhere.

4.) Add some padding to the sides of the search box so the text isn't up against the border and consider adding a search magnifying glass icon at the front.

5.) The selected item panel doesn't feel particularly helpful. I think it would be more useful if the 2 links were just added to the map marker popup so that when the marker is selected I don't have to move my focus all the way back to the left side of the screen.

6.) When a search result is clicked in the drop down list, it should pan/zoom the map to that marker and auto-select it so the user can easily find it and get to the links.

7.) When a query is entered or possibly marker selected, consider adding it to the URL fragment so that people can bookmark/share a specific property within the tool. Maybe even have actions to share it on social media?

8.) Add a clear button to the search box so it's easy to start over with a new search.

9.) It wasn't obvious to me what the leaf icon meant vs. the house icon initially until I eventually found it in the FAQ. I think it would be less confusing if the icon was more related to property, but in the absence of a good metaphor it might be better to just use a plain map marker for vacant stuff and then add the home icon for occupied. It would also be helpful to add the vacant/occupied text to the marker popup. Lastly, maybe include a small overlay in the lower right corner of the map that could act as both a legend and filter so the user could only show one type or the other if they wanted. It would show a check box, icon, and label for each category.

10.) I think it would be really cool if you could show some sort of photo of the property. Perhaps there is a way to integrate a link with Google or Bing street view so the user could easily preview the location?

11.) I find the text on the side panel to be a bit too verbose because users tend to avoid big walls of text when initially exploring new sites. Basically, the goal is that on initial page load, the user will not feel as overwhelmed with reading so much content until they are hooked enough to delve further in.

11a.) I think the main headline should be something like "Montgomery County Land Acquisition", which tells me more about the focus of the site vs. "GoGetProperties.com Search Tool".

11b.) After the main headline, try to summarize the goal to the user as succinct bullets. How does it work?

11c.) After that you could have the frequently asked questions list. I would suggest collapsing all the rest of the text into other FAQs. For example, most of it could probably be under something like "How does this program work?" and "What about properties in the city of Dayton?"

11d.) Try to keep the FAQs to a single line so they are quicker to skim. For example, "What makes a property eligible for acquisition?" might fit the screen space better.

11e.) Suggest renaming "tool" to "site" in the FAQ, as tool is more in the realm of programmer jargon.

11f.) Make the tiny footnote it's own FAQ. "How often is the site updated?"

11g.) Add clear contact information so they can talk to a person for more information.