UI Prototypes


This shows changes after adding ‘cards’ about speakers:
Screenshot - Mar 21, 2017


  • The feature seems really instructive, to me. Getting data was not difficult, as most of the people who are famous enough to end up here are the first results in book searches already.
  • Data comes from Open Library. There is an opportunity to use Wikidata to get some additional trivia, but that will require learning their arcane query language.
  • These could also be useful as topic cards (books on Python, etc).
  • These changes are to make the site look better, so that it’s more credible.
  • Semantic UI is mostly compatible with Bootstrap, so I was able to get this to work piecemeal
  • Semantic UI has a lot more components than Boostrap - I chose it because it had cards. A lot of the “Bootstrap alternatives” or themes have obvious rendering defects on their sites.
  • The footer looks much more professional than before.
  • Cards are more complex than I expected - you have to establish rules for when to show them (e.g. I filtered to a speaker, all the talks from a search result are by one speaker, I searched for a speaker by name)
  • I set it up so that hovering over a speaker name brings up the card, like Rapportive. There is a bit of code to ignore the case where your mouse moves fast across the screen, catching the hover in the process.
  • I tried to ‘sticky’ the cards. I had to do a custom implementation - I think you need to convert the whole site for this Semantic UI feature to work. It also would otherwise require jQuery. Right now there are some issues, e.g. if you get a big card and scroll to the bottom, it can overlaps the footer.
  • Introducing Semantic UI made the search results look better, but in some cases the rendering is glitchy, especially on a Mac. The play buttons in headers don’t wrap correctly, and the vertical alignment is wrong for some of the metadata (speaker names).


This shows the search suggestion box after adding Semantic UI:
Screenshot - Mar 14, 2017

  • This is based on the top prior searches - a fixed list of around 400.
  • It pulls suggestions doing ‘starts with’.
  • There is an opportunity to use full text search (e.g. lunr) to make that better.
  • The search box is from Semantic UI, and I think it looks much more professional than the original Bootstrap one.


Screenshot - Jan 22, 2017


  • People have some trouble finding download buttons.
  • Some people have suggested it could be “slicker”
  • I think the facet changing is distracting, because it refreshes too fast.
  • The inline help doesn’t render well.
  • No one uses the inline player (Reddit has this, but their icons are larger)
  • A couple people have suggested “tabs” for categories

Some ideas:

  • Maybe show some options for things you can search for (to help with discovery)
  • I’d like a version where the search box is tied to the top of the screen
  • This doesn’t show what matched your query, or why you should watch a talk