Pure Bragging: Two Cool New Portent Thingamabobs

Ian Lurie Aug 28 2015

Note: Right now I’m bragging, but Blake has promised he’ll soon write a post about how he actually did this stuff. So you might want to subscribe to the blog using that form on the right over there. See what I just did? Marketing!!!

Our resident all-things-user-experience nerd just developed two new site feature/thingamabobs (that’s a technical term). I’m kvelling a bit:

Keyboard-only site search and contextual navigation

Open our site in a new browser window. Then just start typing (no clicking, just type). Type the word ‘dragons’ and click enter. Go ahead. I’ll wait.

How freaking cool was that?!!!

In case you’re on a mobile device and couldn’t start typing, here’s what you’ll see on the desktop:

Poof, you're searching

How freaking cool is that?!!!

An instant search overlay. But wait, it gets cooler. This is a navigation tool. Again, Open our site in a new browser window. Type ‘SEO’:

I can't help it. I love this.

Typed navigation

Hit enter. You should end up here:

Direct, typed navigation

Navigate via typing, straight to SEO

Poof. Instant nav. Depending on user behavior, we also pre-render the target page for faster load time.

This is pretty and chock full of nifty (I don’t want to pretend we’re the first to do this, by the way. Other sites do it. But serious nerdgasm here). It’s also got some real potential for an improved user experience. We’ll keep testing and tweaking this to do more and keep you posted.

Oh, and we may or may not start hiding Easter eggs. Try a few searches and see what you find.

Rescue the widows and orphans!

We don’t have this deployed on our site yet. Clients go first.

This one’s more subtle, but possibly more important. Sometimes, you create a headline like “fierce accountability training program”. Depending on the browser width, it can wrap awkwardly:

Orphaned 'program'

Headline wraps awkwardly

And, since browser windows come in all sizes, a hard line break doesn’t necessarily help. What to do?

Enter Rescue Widows And Orphans. This javascript checks screen width and content, then adjusts line breaks accordingly. So you get this:

Orphan no more

Javascript to the rescue

Like I said, it’s subtle. But it’s one of those things that impacts the reader experience and aesthetics.

Why am I telling you all this? Blake reports he’ll be posting this to Github soon. Now he’s committed because I’ve told the entire Internet.

Why am I telling you all this?

Because my development and creative team doesn’t get enough credit and I have a chip on my shoulder the size of my car about it. And it’s Friday, so we get to all have a little fun. So there.

Leave comments about how obnoxious this all is below.

PS: You should follow Blake on Twitter. He does cool stuff like this all the time.

5 Comments

  1. Brian

    Brian

    Instant text search is one of those things I haven’t seen before but is obviously perfect and mandatory that I will now expect to see everywhere and be perpetually disappointed.

  2. Kittie

    Kittie

    Nah, it’s not obnoxious dev teams deserve some love :-)

    Love the full search overlay, nifty indeed. We’ve been playing with variants of that too.

    Awesome job!

    ~Kittie

  3. David Sayce

    David Sayce

    Cool, very cool!

  4. Andrea

    Andrea

    F****ing awesome :D

  5. Hey guys

    Wooh nice, i can really appreciate the effort and skill behind the coder for this, what was the thinking that led you to do this. Until the user is educated on how to search and use it, it will be very complicated and i notice you have kept your standard search widget. Even though i followed the instructions when i landed on the new page i was expecting to see the overlay prior to typing anything, then when it didn’t open i re followed the link to see if the overlay came up haha, then i realised just start typing and bamn there it is. I even put in random phrases to see what happened and still got results.

    The Rescue Widows And Orphans is awesome, while im not a coder recently i asked a coder to do something similar then as you found out it doesn’t work so we had to modify it, this is great use of code to give awesome UI/UX.

    Most web development agencies wont invest the time to develop this for a client, unless the customer specifically asks for it. Probably like you the UI/UX is one of the utmost things wee consider when doing work even on cheap sites it something we spend alot of time clarifying for the user / customer, i think it can sometime be more important then the content or product or service itself.
    Thanks for this post, really interested to see how smart search evolves and it would be interesting to see how people are using it for you

Comments are closed.