Action Stations

Action Stations!

“Let’s see if we can get rid of the ‘Actions’ menu” he said, coyly. 5 weeks and over 500 commits later, we’ve gone and shipped our 2nd major UI update in 4 months. This one builds on the strengths of March’s release, adding tons of improvements, fixes, niggles ironed out, and sanity restored to many, many screens.

Kudos, thanks, praise and free tickets to our celebration party go to Peter McDonagh for some really fantastic UI work on this release.

  • A “woah” UI

    • A cleaner, clearer home screen The previous home screen was quite heavyweight and dragged attention every which way. Today’s home screen is light as a feather, highlighting the two things that we want to get you to quickly: your last viewed event, or the New Event link. Everything else is there if you need it, just out of the way.
    • Event nav that gets out of the way If our event nav and app header used to be a set square on top of the main UI, it is now a mount that the UI sits on: exactly where it should be. Rather than shocking blue, the blue-gray sits behind the main content, and the shocking blue acts as a highlight. The whale-grey and shocking blue stick true to the original “marine” theme that we were going for.
    • Considered list views for Tickets and Orders Long relegated to the simple formula of “Name, email, other”, our list views now introduce a structure of their own. Tickets are now listed with their sales counts and status inline. Orders lead now with their reference, which is the essence of an order, with clear payment status. Elsewhere, list items are more consistent.
    • Simpler “inner” stats dashboards “No order selected” clearly shows that this is where order details will appear when selected. If a list is empty clearer empty states give an overview of what the section contains, and clearer call to actions use shocking blue: since we’ve taken blue from the main nav, it’s now particularly effective as a highlight/call-to-action colour. Exactly as it should be.
    • Consistent visual headers Details screens now share a consistent clear header. We’ver restored the close “x” button to a more conventional position, and introduced a consistent place for edit links across all of the detail screens. These headers give a clear sense of orientation at a glance, while providing quick essential information.
    • An order details screen that looks like an order In terms of a redesign, this is where we started. “An order is an order, so it should look like an order”. Orders now look like what they represent: styled as a flat skeumorph of an invoice, with order details and payment history outlined in a single view that also includes context links and actions. There’s even a direct link to the payment provider. The rest of the interface is informed by this pattern.
    • An attendee details screen that looks like a ticket Just as “An order is an order”, “An attendee is an attendee” … or in this case, a ticket-holder. The attendee details screen now includes a flattened skeumorph that mirrors the attendee’s public ticket view, again with context links top right and actions bottom left.
    • A cleaner, clearer ticket details screen Despite being higher in the nav, this was the screen we addressed last, and is the most challenging screen in the app. The screen acts as a status, as well as a control panel to quickly alter the state of a ticket: whether it’s on sale, has particular requirements, should be on sale at a certain time, has particular questions attached, or is public or private. The scren stays consistent to the rest of the app, but introduces an additional header status with quick access to state and visibility toggles.

      • Toggle switches that slide Speaking of toggles. Pete’s comp included iOS-style toggle switches. Obviously these were going to be super handy for making quick clear changes to ticket states, but this isn’t native and we’re in HTML, CSS and JavaScript and. A quick web-search reveals that there are many iOS toggle switch imitators, but none of them actually slide. Rest assured, these toggle switches are clickable, tappable, springable, touchable, slideable and loveable. Please enjoy them at your own risk.
    • Cleaner Search/Filter/Sort/Export headers for lists Out of the way, there if you need them. Sensing a theme?
    • Goodbye to “Actions” menus This was the original intent of this redesign. “Actions” menus (or “kitchen sink menus”) are ultimate in style over substance. Necessary actions can be added willy nilly, but when it comes to finding core functions, the UI turns out unusable. All of our key screens now no longer have any action menus, with key actions appearing on the central view of details screens. Our hope is that it is now consistent, clear and obvious where actions are, and fewer folks will need to reach for support@tito.io! In general, links that show things in a different context are on the top right of details screens (like view PDF, view public links etc.), and actions (eg. refund, archive, void) are bottom left of details screens
    • Strong, clear, active states for list items Once again, now that the main nav is now longer sucking all the blue from the known universe, blue is put to good use as the active highlight colour for the current selected list item. And it looks smart.
    • Loading animations that accelerate time If you gaze into the centre of our new loading animations, you gain 500ms back of your life. Do it enough and we swear you’ll find yourself getting younger.*
  • Nicer words
  • We’re trying to build an app that feels great to use. This release puts a little bit more personality here and there, without going too overboard. There’s still a lot to do in this department, but we’re happy with the direction.

Along with the UI overhaul, we also shipped a few new features:

  • An updateable graph

    • For the longest time, our graph looked pretty if you had any data in the previous 30 days, but otherwise just stuck around like a rotting centipede painted blue and grey. By default, it now displays orders, tickets, page-views and uniques spanning your event creation until your event is over. You can also change the start and end dates to narrow down the graph to a date of your choosing. Much more useful, and our pledge to you that we care about visualising your data, and we’ll be adding more visualisations and more filter-ability soon.
  • starwavatars Since day zero, the force has been strong with the demo data that appears in Tito when you first create an event. Now we’re increasing our moon-count to 2. Anywhere we list attendees, if someone hasn’t set up a gravatar, we will display a … ahem … starwavatar. Thanks to Jory for the midi-chlorian-tastic icon set. All that’s left is for Pete to go and learn some lore. We may explore Middle Earth in the future…
  • “Import Attendees from CSV” A beta feature that’s been gathering dust in our “hasn’t shipped yet” cupboard for way too long. Does what it says on the label!
  • Paging, grouping and toggling for Dashboard activities Apart from a rather delicious restyle, the activity timeline on the event dashboard now has some neat functionality: First, it is off-by-default, but if there are new items, the bell on the dashboard lights up and you can pin the feed if you want it, or toggle it off. Next, if an action is repeated by someone, it is only displayed once on the dashboard. Finally, you can now page through all of the activity for an event if lots of things happen.

Aaaaaaaand a big breath. What a huge release. This is a pretty significant milestone for us. All that’s left to be said is: ?

  • You actually won’t. It’s just a trick of psychological perceived performance. You’re still getting older. Sorry.