Thursday, July 26, 2012

a hack is still a hack

One problem with using divs with background images instead of proper imgs is divs don't have an exact equivalent of the "alt" tag, for screen readers and webcrawlers.

I found a coworker using "text-align:-9999px;" for the div -- this moved the text off the page but allowed him to use an image instead. (He was concerned about some of the nuance of the font and character rendering.)

It's a clever idea, but I think not a good practice. It smelled a bit off to me, and as I research it I see some bots like Google consider it a bit of a red flag.

A good trick to know of, but I'm not recommending it.

Sunday, July 22, 2012

the alleyoop "ignite" hackathon

the design for the hackathon shirts-- best
corporate shwag ever?
In June, my company ran a hackathon. It was modeled after the "startup weekends" that many of us in the company had been involved in. (In fact, our Product Director Matthew Mamet is heavily involved with some of the ones in Boston.)

The schedule for such a hackathon was/is as follows:

  • The week before: people think of an improvement or new feature for our site/product.
  • Wednesday afternoon: people give 2 minute pitches for their idea, and everyone has three votes (represented by a post-it to attach to the pitch's title sheet). Each of the top 4 post-it getters than have a crossfunctional team formed for it, captained by the person who pitched the idea.
  • Next 48 hours: people discuss, code, and user survey like crazy to validate the concept and see how much of it they can put into action. We had students in to user test and give feedback, and various Mentors to provide constructive criticism.
  • Friday late afternoon: each of the 4 teams gives a 5-minute presentation and has 5 minutes of Q+A. Then, the judge (Patrick, our President) goes out to mull over what he's seen and pick a winner, and also each participant gets to vote for any team except there own as a "People's Choice" winner.

I pitched an idea: TTT, "Typing Topic Targetting" (letter expanded to 4 "T"s to include Textbooks)... and my idea got picked by my peers. It was right-sized to be able to get big bang for the buck, fast (my experience with other hackathons and gamejams has taught me the value of aiming... well, not low, but in a way that assure you get value for money.)

The rationale of TTT was that since earlier word clouds had shown that visitors on the site were able to type in just what were looking for, math-help-wise, we should leverage that ability to get them more quickly to the topic they wanted help on, rather than forcing them to navigate through the hierarchical taxonomy of math that the site had to offer.

 My team was appropriately small, consisting of me (as captain and coder), Ari (who is interning here this summer) and Vincent-- we also had design support from Tom. We came up with mockups quickly to put in front of the students who were coming in to test things, and then did online surveys with Survey Monkey and click/label tests with I also toiled away on a functioning prototype for the final presentation -- experience had shown that functioning demos impress judges.
search on keywords, hover for a view of the topic
After early discussions we decided on the importance of taking advantage of the topic screenshots that were already part of the site. We also realized that if we had a text search capability we could manually type in the table of contents of a student's textbook and then be able to synch our sites info with what the student was actually studying. 

We ended up building a nice interface for that, where you could either scroll through the table of contents and click your current section, or type in a page number and it would do the scrolling and clicking for you. We also showed a concept that would take the user directly to the first recommended activity, the core idea being the quicker we get people to what we have to offer in the context of just what they're looking for, the better off everyone is.

On the final day, we had a bit of time to polish up our presentation. Ari made a slick Prezi presentation, and we rehearsed until we had our 5 minutes down cold, explaining the benefits of our feature in terms of user onboarding and retention, a summary of the research we had done, and showing off our demo of the tech. (Part of the trick is to cut away all the extraneous padding, and then have one person pick up RIGHT when the other person drops off, a trick a mentor suggested as the "Radiolab" treatment.)

In the end, I'd say Team TTTT was a big success. We didn't score as the first place judge's pick, but we did get the second place "People's Choice" award - not bad for a plucky little 3 person team. (The winning team had 8 or so folks from all parts of the company, a beautifully faked online demo, and an intriguing idea.) Plus, all 4 ideas are being integrated into the real site.

Other groups in Pearson have showed interested in the hackathon, both the results (especially in my take on search UI) and in the process itself. I learned that a UI coder shouldn't build his or her own search engine under a tight deadline...

Anyway, I purposefully made the tech demo portable, and you can see and play with it on my personal website. The search and textbook sections are active, though there's a fair amount of fakery going on. ("Any sufficiently advanced technology is indistinguishable from a rigged demo ") I like the way kinetics of the search came out, and Tom did a nice job with the look and feel.

Not bad for half a week's work!

Tuesday, July 10, 2012

simple buttons for simple minds

Just a random note, as long as you don't mind cutting off IE8, you can get pretty decent button-looking divs in CSS now, with something like

box-shadow: 0 0 3px 3px #888888 inset;
border-radius: 7px 7px 7px 7px;
You can get
It even works as a button:

Attractive, and easier and more flexible than using a background image.