Improve discoverability on the home page

kruser commented 10 years ago

I'm seeing nearly a 50% dropoff on the front page of baseballmod.com. That's pretty crazy that 1/2 the visitors would come to the site and not look at a player page.

I think there are two problems....

1) the "find a player" input box isn't obvious 2) the visitor has to type to get somewhere, which is a lot to ask a first time visitor

We can do a couple things to improve this. Immediately, maybe we just make the search box more obvious with a simple animation like this: http://screencast.com/t/Zy8AqLiZJg4

I'm not in love with that though. I think animations aren't to be used lightly.

Another thing we could do is to offer a couple more sections before the fold on the first page. Something like..

hot performers - clickable images and names here would go a long way for ease of use
team links and pages - showing the most recent roster for each page when clicked.

I'm leaving this open as a discussion for now until I feel we're ready for some dev on it.

albertlyu commented 10 years ago

Have you filtered me out from Google Analytics (or whatever web analytics tool you're using)? :)

kruser commented 10 years ago

I don't have a filter on anything. I think in dev we're OK as you aren't coming from the baseballmod.com domain name.

If you want to filter yourself out of the site, you can install the opt-out plugin. This is for ALL GA sites. https://tools.google.com/dlpage/gaoptout

If you find yourself visiting the site a ton not as a normal user would then you should probably install that plugin for your browser. Otherwise I wouldn't worry about a visit here or there.

albertlyu commented 10 years ago

So it looks like I had already installed that opt-out plugin and enabled it a couple of days ago, so we're good on that front.

Aside from that, I definitely see your point. Whenever I visit BaseballMod.com now, I know exactly what to do and where to go to find the data/charts I want. For first-time users, it's not immediately obvious. I believe adding hot performers below the input box would be a good way to improve the home page for at least this upcoming iteration, then create team links / pages with rosters. For team links, you could create selectable buttons straight on the home page for division, then team, then top 5 batters and top 5 pitchers, all on the home page. Gives a first-time user motivation to click through to a player's page.

kruser commented 10 years ago

BTW, As of the new filters, I added animate.css to the project http://daneden.github.io/animate.css/

It's pretty great, but we should use it with caution :). Animations that may seem cool quickly get annoying. As long as they're subtle and serve a point we can make use of that library of animations.

So if you guys see me add an animation to the site that feels wonky let me know ;).

albertlyu commented 10 years ago

So given my idea above, I like the thought of having divisions div bounceOutLeft on click, with teams div bounceInRight, then selecting team on click, bounceOutLeft, and team's top 10 players bounceInRight. What do you think of the user experience of this? Gives users something to choose and click on, eventually getting to their favorite player's page.

kruser commented 10 years ago

Fancier yet... land on your nearest team first. http://www.w3schools.com/html/html5_geolocation.asp

But yes, some sort of team to roster clicking would be nice, directly below the first jumbotron. I think this would warrant it's own directive. Maybe only starting on divisions on mobile.

Also, I'd like to get a team page up as well, if only for SEO, and make the team name an anchor on the player pages, which drives back to the team roster.

patrickjmcd commented 10 years ago

I think splitting the home page down the middle and agreeing upon a few statistics to determine top batting performers and top pitching performers would be not only meaningful, but would also persuade viewers of the site into becoming users/watchers of the site. The info that is currently on the front page, while incredibly helpful to developers, probably doesn't mean much to the average user of the site. I'd suggest making a "Developers" tab on the navbar at the top or in the footer of the home page. Also, I really like @albertlyu 's idea of getting team links together. It might be cool to keep live, navigable divisional standings on the page, even if they just open a Bootstrap Popover to show current players on the roster.

Given the ability to sort players by team, it would be really neat to compare rosters year-to-year based on statistics. At one point I worked on an application using Sean Lehmann's baseball archive to attempt to build a "dream team" for each MLB team in hopes of trying to find the best franchise in baseball using each team's most irreplaceable players in each position by statistics. Given the data and framework y'all have already built, that could be a really neat sub-site of baseballmod.com.

kruser commented 10 years ago

So let's turn this into an enhancement then. The work should involve these things....

create an About page that includes all info currently on the home page, except the top jumbotron
put an About link in the headers
create a new directive called teamNavigator (referenced as in html) that goes right below the find a player jumbotron on the homepage
- this should allow users to navigate a list of teams and see the players from the latest roster on each team.
- this will require a new API into the games collection/table as we'll want to query the single latest game for the selected team, and use that roster.

Let's save the top performers for a later exercise.

albertlyu commented 10 years ago

Sounds like a plan. @kruser, do you plan to take this? If not, I've set aside time this weekend to take what you've already commented and navigate through the directives and controllers folders to put the pieces together in order to create a teamNavigator partial view. A couple more technical pointers would be helpful too, but I think I can make my way around by using the current model by the filters partial view or the others. Let me know if you think this is a good idea or not.

kruser commented 10 years ago

Sounds like you can get to it sooner. I want to finish another issue this weekend and then start in on the atbat-mongodb enhancements since I think it is holding us back.

So go for it.

on the node server you'll want to add a team API with functions to get the latest roster where the team code is in the parameters. See how the other APIs are built with calls into MongoDB. They should be a little more separated from the database, but it'll do for now.
Scaffold your new directive with yeoman: "yo angular-fullstack:directive teamNavigator --skip-add"
You'll also want a new AngularJS service for interacting with the team API, so scaffold that as well. This is necessary as we only want services to be the ones with $http access: "yo angular-fullstack:service team --skip-add"
add your newly created js files to scripts.html
From there you're just working with the scope defined in your directive.

Before submitting a pull request back make sure you also test in minified mode. You may have to alter your service and directive definitions to be arrays rather than straight function (see others) to support minification.

grunt serve:production

kruser commented 10 years ago

@albertlyu, you can IM me on hangouts or email me if you get stuck. You have my email.

kruser commented 10 years ago

Another note on this, when presenting the roster I think it would be nice to show the player mugshots to color up the page a bit. Keep in mind we need to block the logos.

So the markup should use the same markup and CSS classes as the player page mugs so they can get that stuff. Ideally we'd make this into a directive but it needs to remain server-side generated HTML for the player pages as I have all of them indexed in Google. But we'll get good reuse out of the mug-container. Just put the team key in a surrounding div class.

kruser commented 10 years ago

Another thing I forgot to mention here, please take care to provide a good mobile experience. That is, use the grid system to layout teams and players, like...

<div class="row">
  <div ng-repeat="team in teams" class="col-lg-2 col-md-3 col-sm-4 col-xs-6" ng-click="openTeam(team)">
      <h2 class="well text-center">{{team.name}}</h2>
  </div> 
</div>

...and big clickable things. It is better to put the ng-click on the entire player or team element rather than make the user click their name.

As for CSS, I'd be surprised if you need to write any for this item. When in doubt, try to go to getbootstrap.com first to see what the bootstrap way of doing something is.

albertlyu commented 10 years ago

So I went through a quick Angular seed app tutorial to get a feel for how to manipulate the DOM and pass and manipulate js objects through controllers and directives. From what I read about yeoman generators, when you say "scaffold this directive with yo," the yo package will do all the tedious work for that directive in order to make it usable correct? So we don't have to manually write in repeatable code that I tried out in the Angular bare bones app.

kruser commented 10 years ago

The yeoman generator won't build much code, but it will put it in the right place.

Still, refer to the other directives for questions of difference.

As for the DOM manipulation, you can add your data items right to the scope object in the directive's link function or create a separate controller to manage teams. I prefer the latter. Again scaffold that with yeoman. The controller then interacts with your new service, putting the rosters on the $scope as needed by the markup. I think your controller also can hard code an array of teams on its $scope. On Apr 18, 2014 7:19 PM, "Albert Lyu" notifications@github.com wrote:

So I went through a quick Angular seed app tutorial to get a feel for how to manipulate the DOM and pass and manipulate js objects through controllers and directives. From what I read about yeoman generators, when you say "scaffold this directive with yo," the yo package will do all the tedious work for that directive in order to make it usable correct? So we don't have to manually write in repeatable code that I tried out in the Angular bare bones app.

Reply to this email directly or view it on GitHubhttps://github.com/kruser/pitchfx-site/issues/67#issuecomment-40855238 .

albertlyu commented 10 years ago

Here's what I came with for the query to get the roster for the latest home game given a team's code:

db.games.find({"home_code":"tor"}).sort( { time_date_hm_lg: -1 } )[0].team[1].player

My plan is to create exports.getRoster in a new API called roster. Then I should be able to grab the IDs from that response, and pass the IDs into the players API to get players by ID. Let me know if I'm not on the right track throughout these intermittent updates.

kruser commented 10 years ago

I think you'll want to make sure you check home or away. Also limit it to 1 result from MongoDB's perspective using limit

db.games.find({'$or':[{'home_code':'tor'},{'away_code':'tor'}]}).sort({'start':-1}).limit(1)

Then on the result you'll have to check the two teams to be sure to grab the right set of players. That can be done in the javascript of the API file.

This query is slow right now, but you can add an index to the start field on your local games collection. If you land on a query like this let me know so that I can create the same index on production.

I also don't think you need to call the players API afterwards. That API isn't designed to do things in bulk either as it hits the MLB players API. Looking through the game.players info though, I think there is enough there to make the presentation interesting.

albertlyu commented 10 years ago

BTW, not sure if this was done in production, but I ran a db.games.ensureIndex({'start':1}); before creating the roster API.

kruser commented 10 years ago

Yes, I added the index in production. Thanks for checking. On Apr 21, 2014 8:38 AM, "Albert Lyu" notifications@github.com wrote:

BTW, not sure if this was done in production, but I ran a db.games.ensureIndex({'start':1}); before creating the roster API.

Reply to this email directly or view it on GitHubhttps://github.com/kruser/pitchfx-site/issues/67#issuecomment-40935736 .

albertlyu commented 10 years ago

By the way @kruser, are you able to track how users are landing on player pages? Hoping that you're able to see tangible results in improved discoverability via the rosters.

kruser commented 10 years ago

I have Google Analytics setup so I can see the page flows. That's how I noticed the 50% drop off from before. So we'll give it a couple weeks and then hopefully that will reveal any improvements.

On Mon, Apr 21, 2014 at 9:37 AM, Albert Lyu notifications@github.comwrote:

By the way @kruser https://github.com/kruser, are you able to track how users are landing on player pages? Hoping that you're able to see tangible results in improved discoverability via the rosters.

Reply to this email directly or view it on GitHubhttps://github.com/kruser/pitchfx-site/issues/67#issuecomment-40939868 .

albertlyu commented 10 years ago

Sounds good. I think we have good content - I'm going to send out tweets of screenshots of specific players' charts in the coming weeks. I think that's a good way of leveraging our baseball followers and getting the word out there. When we send out tweets, we should either tag @BaseballMod or BaseballMod.com to the end of the tweet, that way you can see if social media outreach leads to clickthroughs. Also, consider https://bufferapp.com/, which is another way to see if links to BaseballMod.com are being clicked on.

kruser / pitchfx-site

Improve discoverability on the home page #67