dnalounge.com web design

Are there any web sites out there that have detailed event calendars on them that you actually like?

I'm not entirely happy with the presentation on dnalounge.com, however, the web sites for every other nightclub in the world are even worse. Have you seen any that work well?

The site could use some design/usability help, but I'm not finding much inspiration out there.

One of the problems with our calendar pages is that the canonical URL for events has an anchor in it, like http://www.dnalounge.com/calendar/2010/05.html#28 -- this has become a problem because lots of recent web tools don't understand anchors, for example, posting this URL to Facebook grabs the text of the first event of the month instead of the event you're looking at; and similarly, tinyurl strips off the anchor.

Lots of sites that do calendars have their calendar page show just the cal-grid of event names (like we have at the top of the calendar page) and force you to drill down on a day to see more info (e.g., Slim's.)

But the reason I don't like that is that it makes it less likely that people will ever read the event descriptions. I suspect that by putting the event descriptions and embedded video clips right there, we are pulling in the occasional customer who might not have known that a given event was of interest to them. If you are just looking at a calendar grid that contains only the name of the headliner, you won't bother clicking on it unless you recognise their name. But if you are scanning down a page full of descriptions, maybe something about that unfamiliar event will catch your eye.

I would like to do more to encourage people to invite their friends to events, with the "I'm going" link so many social-networking sites have; that's why we spend so much time creating events on Facebook and other sites, and why the "Add this event to your calendar" box is there on the event listings. But, the look of that is kind of awful. I'm not sure whether the text-only version I have is less bad than the traditional NASCAR-badge-like mess of web-site logos that everyone else uses. Mine takes up more space, but I think it's more clear what's going on.

We also have this second tree for each event, the flyers archive, (which is linked to by the calendar as well as the top-level menu). I'm tempted to just combine the two somehow, but I'm not sure about that. Maybe it would be too cluttered and it should stay as-is, just an image gallery rather than an event-info page.

I also don't like it that our calendar pages are so wide. But there's a lot of info there, and the alternative is making the page require even more vertical scrolling... I'm not sure what a better layout for that would be, short of moving it off the calendar entirely and putting it all on dedicated sub-pages.

Our "Tickets" page is also kind of a travesty. It made more sense back when we only sold tickets for large live shows, but these days we tend to sell advance tickets for every event, so it has ended up basically duplicating our entire calendar.

Currently the front page of the site contains 3 photos from upcoming events, and 3 photos from random events, in an attempt at giving a sense of what goes on here. Maybe that space could be better used some other way. Maybe it should just be a calendar grid. Maybe emphasizing the Youtube clips would be more eye-catching (though mostly those are music videos of upcoming bands, not video that was recorded at DNA.)

Tags: , , ,

47 Responses:

  1. jgcr says:

    It is possible that xauth will help with the Nascar problem. (It's also possible that it won't, for various reasons.)
    http://techcrunch.com/2010/04/18/spearheaded-by-meebo-xauth-looks-to-make-social-sites-smarter/

    For the calendar grid vs. single event pages, probably you should just do both. Have the current setup w/ descriptions inline, but have a "event page" with the same basic info, and maybe more if you have it (e.g. bigger video embeds). That last is what you point social media to. Make it super-easy to traverse event pages in various ways, like you do with the flyers archive. Put ticket stuff on the single pages, by the time you've decided to buy a ticket browsing other events is less important. Kill the tickets page, you don't need it anymore.

    Eventually you could integrate the flyers stuff too, but that's more work for less obvious payoff.

    • jwz says:

      If this xauth thing is "something I could actually use" as opposed to "some random proposal that possibly N-zillion social-networking sites might all decide to adopt some day", I can't tell how.

      • jgcr says:

        It isn't something you could use yet, no. I do give it *slightly* better than zero odds of happening, though.

  2. sushispook says:

    The one for cat club is full of the unhappy making - the UI is *awful*.

    I do like that the calendar for DNA is very simple to read and understand, but perhaps move to a format where only days with events are listed, in ascending order of date? You might have more luck just stuffing it all on one page without the anchor links, and getting people to take in all the events. Maybe one step further - segregate the one-off events from the recurring ones?

    You know, because I'm sure you have unlimited resources and time to devote to this. Er. Yeah.

    • baconmonkey says:

      the calendar grid tells people a huge amount of information in a way that requires virtually no thinking. There is no having to search for the words that say what day it is.

      good UI design makes use of a lot of non-linguistic cues, as linguistic information takes more brain power and has higher chances of missing important information or simply losing interest. Colors and shapes are processed much faster than words. This is why logos exist, ditto for abbreviations, and color coding things to denote importance works better than adding more words like "this is important, please take note". than and that whole saying about pictures and 1000 words...

      In this case, crawling into the rat-hole of CSS and javascript for pop-ups, expansions and such might be in order. The way http://videosift.com/ handles expanding video clips is pretty slick.

      separating one-offs and recurrings defeats the point of all of this. the current setup makes it easy to see everything at once. Quite good, for example, for people who want to see what's coming up next weekend, because they don't have any plans yet. It's instant to see where next weekend is from today. a line-item calendar list requires a lot of hunting to find that information.
      Some people are looking for specific events, some are looking for something to do on a specific date or date range. Some will also, as Jamie said, discover new bands/clubs, or old favorites that they didn't know about.

  3. fantasygoat says:

    Perhaps something AJAXy. Mouseover pop-ups with the flyer and description and whatnot. That way, people don't have to actually click.

  4. mayoff says:

    If Facebook etc. don't strip query params, change your links to look like this:

    http://www.dnalounge.com/calendar/2010/05.html?28#28

    and add this just before your </body> tag:

    <script>window.onload = 'if (location.search && !location.hash) { location.hash = '#' + location.search.slice(1); }'</script>

    Tested in Safari and Firefox.

    • mayoff says:

      That didn't come out quite right. The window.onload part isn't necessary and not what I actually tested. You just need what's in the quotes.

    • baconmonkey says:

      Wouldn't that make it so that every link on the calendar grid would force a page reload, since they all would have to include the Question Mark and date number?

      Granted, that might be acceptable if it fixes the URL destruction.

      However, I can't get tinyurl to strip the anchor. when I punch this into tinyurl
      http://www.dnalounge.com/calendar/2010/05.html#28
      I get this http://tinyurl.com/2bs52jl which seems to respect the anchor.

      The only thing I can think of for the facebook issue, would be some javascript or server scripting BS that would look at the anchor number or search query number and inject a copy of the text and image to be displayed into a div with style set to "display:none" at the top of the page.

      I did some testing on that, and facebook seems to be smart enough to skip all the navigation stuff at the top, so I had to insert it into the bbox class TD for the first blurb above the actual blurb text. But facebook took the bait and showed my undisplayed text as it's summary.

      So if the URL was
      http://www.dnalounge.com/calendar/2010/06.html#18

      then right above the The 2010 MIDI Ghetto Tour brings together text, there would be the following
      <div style=display:none;> Shine up your pitchfork and hang on to your soul because San Francisco's premiere burlesque and variety show is taking you on a wickedly wild romp... straight to the Stygian Depths of Hell!</div>

  5. sc00ter says:

    All the calendars I use are Google calendars. They usually have a small sidebar showing that week, you can click on it to get the full calendar, or subscribe.

    Anything of interest I subscribe and it shows up in my calendar too.

    • jwz says:

      "I don't actually use web sites, I only subscribe to ical feeds" does not tell me how to improve a web site.

      Yes, we have an ical feed.

  6. dossy says:

    Perhaps you should look at larger performing arts venue websites for design inspiration? You may think they suck, but perhaps there's aspects that are good that you can borrow from ...

    * Madison Square Garden
    * Sydney Opera House
    * Lincoln Center for the Performing Arts

    Having developed and supported websites for two performing arts organizations, including their event calendars and online ticketing systems, I totally feel your pain, Jamie.

    • jwz says:

      Well, I kinda think all of those are worse than what I have now. Less information, harder to find. But hey, at least they load slower. At least there's that.

      • dossy says:

        Join the year 2010 and get rid of that TABLE-based layout. Make the calendar page narrower by moving the contents of td.bbox to a hidden div that spans the columns to the right of td.dbox, add a "More info vVv" link that when clicked, reveals the hidden div.

        Kill the td.dbox, put the date as a horizontal bar that clearly divides events, since it doesn't seem like you ever have more than one event per date, anyway. Move the flyer thumbnail to where the "Add this event to your calendar" box is, now. Move *that* box to the right-hand column. *OR* keep the td.dbox, and move the "add this event" box to the td.dbox cell, underneath the flyer thumbnail. Basically, either eliminate that cell OR maximize its value.

        • jwz says:

          Like I said in other comments, I'm not crazy about the whole "more info" business, and only showing 10% of the info by default.

          We do occasionally have 2 events per day. It happens about once a month. Last was May 29, next is Aug 14.

          (If you are offended by <TABLE> then you are talking about how it should be implemented rather than how it should look.)

          • dossy says:

            The few times there will be more than one event per day, having the date horizontally as a separating bar (visually) will still look nice, I think.

            My comment about TABLE's isn't the standard CSS fanboy "zomg tables!" - TABLEs are good for creating columns of uniform width - but, it also results in cells that seem a bit sparse. The information being presented is row-oriented and having all the "columns" being equal width across all the rows gives the presentation a very boxy look, where some boxes (cells) seem very busy where there's lots of information, while others end up looking mostly empty.

  7. sjp says:

    <Numa> Can someone with a Live Journal account reply to this post: http://jwz.livejournal.com/1243664.html
    <Numa> With a pointer to: http://www.theindependentsf.com/

    • jwz says:

      It's one of the better ones, but the fact that almost all of the info is hidden behind a "more info" link bugs me because as I'm scrolling down the page, the only thing I know is the names of the bands and a photo. That defeats my para #6.

  8. vordark says:

    I've looked at the sites for a lot of venues over the last few months and DNA's site is the least bad and most informative. You have a lot of information about each event, what with the YouTube videos, text, etc.

    I wish more sites did that because a lot of times, for me, the weekend's festivities would be decided by browsing through what's going on at places that don't generally suck. Easily seeing, on one page, what's happening during that two or three day span is great. It's not even a "Oh, I haven't heard of that event before." thing. It's a "My friends can only get one night off this week from their girlfriends/boyfriends/spouse, so which night are we going to go out to see what?" thing.

    So as to the design of the site, I wouldn't change anything if it meant losing the utility you have now. And I don't readily see a way to "clean up" the design without dropping something.

    As for the technical issues, can you have each event in its own file and #include that file on the calendar page (with the anchor) as well as display that same information on a separate page for each event? If so, you still have only one thing to edit, anchors will work for anything expecting them and people will have event pages that they can link to via Facebook and whatnot.

    This is the only thing I can think of that doesn't involve the html-flavor-of-the-month or server-side scripting of some sort.

  9. it is difficult to find any calendar that shows the info I want in a way that I want it - no shocker there.

    a useful calendar for me looks like this . . .

    http://www.blogto.com/events/

    stuff and detail, a calendar grid etc - all there - hope this helps.

    • jwz says:

      Well, that's pretty much exactly what I have now, except with all the information truncated to the first 10%.

  10. unwoman says:

    This is a comment from Doctor Popular who doesn't have an LJ:

    The number one thing the DNA Lounge could do to help encourage me to a) buy tickets in advance and b) encourage my friends to do the same thing is to drop that $2 convenience fee. Tickets should be one flat price, not listed as $12, but actually $14. I really dislike buying tix in advance from the site for that very reason. Never had a problem with the design or anything though.

    • jwz says:

      If you find no value in spending money to ensure that you get in to a show and not risk it selling out -- plus, often wait in a shorter line -- then feel free to pay at the door.

      "I would prefer that you give me shit for free" is a great answer to the question, "how can I improve the web site", thanks. Tell your friend his fucking pony is on the way.

  11. baconmonkey says:

    I like the way http://www.first-avenue.com/ does it's main page. the link box is a horizontal bar that eats up less space than the vertical box.

    I hate hate hate the lack of calendar grid.

    I think maybe the DNA grid might be improved by some sort of mouse hover additional information. not sure initially what that info would be. flyer thumbnail? summary? genre & event-type (bands/club/club+band)?

    I also am not a fan of the seeming random placement of video clips in the event details.

    • jwz says:

      I would love to replace the left-side menu with a top menu, but there are too many items to do that without deleting some, and I can't decide which to delete. That's how it ended up vertical in the first place.

      The "seemingly random" placement is manual binpacking to conserve vertical space: I put the video in whichever column is shortest.

  12. drkscrtlv says:

    I actually really like the DNA Lounge calendar; if someone else had asked "Are there any web sites out there that have detailed event calendars on them that you actually like?" I would have likely pointed at yours.

    In my eyes, the fix is possibly much like the "Thread" links in the comments here.

    e.g. the bits between the

    in

    http://www.dnalounge.com/calendar/2010/06.html#03

    would also be available at

    http://www.dnalounge.com/calendar/2010/06/03.html

    except the latter might have a more obvious "Thursday, June 3, 2010" at the top, with links back to June and/or the front of the calendar at the bottom maybe.

    • jwz says:

      It's easy enough to dup all that info on its own sub-page, but as long as the existing 2010/06.html page exists, so will the anchors, and so that's what people will link to...

      I know this because I do exactly that on the blog --
      http://www.dnalounge.com/backstage/log/2010/05/#25 vs
      http://www.dnalounge.com/backstage/log/2010/05/25.html -- and I often see people getting messed up by using the anchor.

      I think the only way to solve the anchor problem is to just never use anchors. But that has its own set of problems.

      • drkscrtlv says:

        Hm, ok.

        I think many people are savvy enough that "link to this event" or "printer friendly" or even "permanent link to this comic:" or YouTube's copy-paste-this-embed-code helps, but I can definitely see people being oblivious and just copy-pasting the url bar.

      • flipzagging says:

        As for fragments in URLs (aka anchors) -- I just tried this with TinyURL and Facebook and the fragment was preserved and worked once we clicked through to the page. Even for DNA Lounge. I think you can rely on any link-sharing tool to preserve URL fragments. This is absolutely required these days. As you noted yourself a couple of weeks ago, a lot of sites use the fragment to load additional content via AJAX.

        In the case of DNA Lounge it did take a lot of time for the browser to scroll to the anchor. I am assuming that the browser has to wait for layout to be complete, and something about your page makes it very time consuming to lay out. You do have a lot of media links but even so it shouldn't be that bad, so I suspect something else. Maybe this is the problem?

        Also -- my guess is that by now, people have been well-trained by Facebook to use the "Share" button rather than copying the URL bar. So you can rely on people using that, and you could use that to link directly to a yyyy/mm/dd.html page.

        As for your other concerns -- when I worked on events sites I would usually look to dnalounge.com as an example of what any club owner would like to have, if only they were more tech-savvy. I have a few quibbles with how it works, and it may be presenting a little too much to the user at once, but overall I think you're doing way better than most.

        Have you ever tried what some people call hallway usability testing? You don't need to pay a company lots of money or have eye-tracking to get great results, just plunk your friends in front of the site and without helping them, ask them to do things like "share this link with your friends" or "add it to your calendar".

        I *suspect* that you might do better with simple "Share" or "Add to Calendar" buttons, near to the lower right of the block representing an event (that's where other sites put such links). When the user clicks, then show them a modal dialog that gives them options about how to share on FB, Twitter, etc, or how to post to GCal, local iCal, etc. I think that might work better, but that's just a guess.

        • flipzagging says:

          Also -- another benefit of creating and then sharing URLs for individual pages for events -- Facebook will then do the preview correctly.

          • baconmonkey says:

            disadvantage:
            people will not be exposed to other events. the current system makes it hard to not notices at least 3-4 other events.
            People might see other things they like and didn't know about, or might just start scrolling around.

            The goals here are more centered on "get many people through the door, often", as opposed to "give people just the information about the one event they already knew a bit about"

            and a few comments up, I did find a wonky workaround that involved sneaking in a non-displayed div at the top based upon the anchor.

            I suppose that could be made a hair less wonky by an ajax request that just looks at the anchor tag and asks DNA website for the appropriate micro summary to inject there.

            • flipzagging says:

              disadvantage: people will not be exposed to other events.

              That's a secondary goal, and we won't even get there if the sharing doesn't work. People are trying to tell their friends about a DNA show. Isn't that good enough?

              Okay, I've looked at what FB does -- they are doing a very simple parse of the page picking the first element which contains lots of uninterrupted text and complete sentences. The title of the link is derived from the page title.

              Your hack of putting a non-displayed div at the top works, but that probably doesn't fix the title issue and it's also going to be confusing to crawlers. And... it's just the wrong thing to do from the user's perspective IMO. I suspect you'll get more clicking around if the site is fast to load and easy to use than you will forcing people to hunt through stuff they don't care about.

              I suggest that you have a separate, individual page per show, specifically for sharing and for web crawlers to find. It should have an appropriate page title and get straight to the point about the basic info for the show.

              Then, optionally, you can put "Other shows this month" below that. Ideally they'd be somehow related to this event -- like the same genre or something, if that's in your database. But it could just be a dump of links to other such pages, near in time.

        • jwz says:

          I'm pretty sure tinyurl didn't used to preserve anchors at all. Maybe they fixed it.

          If you paste a calendar URL that has an anchor in it into Facebook, the text it pulls out of the page is the first text that occurred on the page, rather than the text following that anchor, so it defaults to the description of the first event of the month.

          What is the simplest / least offensive multi-site Share button implementation out there?

          • flipzagging says:

            Yeah, I came to the same conclusion in my comment above. I think it's reasonable to have one page per event - it will help with sharing and also make pages Google can rank higher for a particular search.

            I don't know how to answer "simplest / least offensive". A row of icons is definitely simple, but ruins the aesthetics of the page, which is I think what you mean by "offensive". It's also simple from a site management perspective to use ShareThis.com, who may also have the most incentive or resources to work on usability. But then you're relying on a third party.

            I posted a couple of questions on Quora to see what happens. Quora is this week's trendy question & answer site, but it's seeded with Valley people, so there's a chance I'll get a good answer. I'll let you know if I do.

            • flipzagging says:

              Bleah, sharethis.com annoys the user to sign up for their services. Forget that. Still, their widget, if it could be stripped of the irritating parts, isn't too bad.

  13. chrisam says:

    I stumbled on this a while back and found it again: http://events.unl.edu/upcoming/

    You can do the full descriptions or the grid calendar... or let the user choose. All of their templates are open source too at http://wdn.unl.edu/