This Is Nowhere: The Single-Button UX
Oct 12, 2018 12:04

This is part of an ongoing series about my work on Zuppa Theatre's "This Is Nowhere" project. Here's the previous one.

For the This Is Nowhere mobile app, we knew we had the following requirements:

  • It should provide clues to help you find locations
  • It should know how far you are from a location and give you some sense of that without being too explicit
  • When at a location, it should provide extra context for the performance

Besides the core functionality, there were some other things it needed:

  • It should work on as many different kinds of device as possible, both Android and iOS, and ideally quite old ones
  • it shouldn’t be intrusive, but should rather act as a companion to the main action
  • anybody at any level of technical expertise should be able to start using it immediately without any extra training
  • part of the project’s mandate (and funding) involved support for people with various kinds of special needs requirements

We had trial runs scheduled with the writers and other key team members, so I aimed to have at least something for them to work with. As I mentioned in my previous post, I always prefer minimally-working prototypes over mockups, so I set to work building something that would at least handle the specific requirements. I updated the server side CMS to support locations having clues and captions, which was pretty straightforward. The client side had a lot more going on.

For flexibility, this first version was done as a mobile-friendly web application, using my old friends Bootstrap and JQuery. This was a great way to start for many reasons:

  • any Android or iOS device from the last decade should be able to load and run this page with basic layout and JavaScript
  • new features and updates could be deployed instantly, and users just have to reload the page to get the latest version
  • things like getting JSON from a server is really easy to do with JQuery and doesn’t require complex parsing techniques
  • I’ve been working with Bootstrap and plain JavaScript / JQuery for many many years now, so I could focus on features and usability instead of wrestling with new programming concepts

I wanted to have some kind of a distinctive look for the app, beyond just black-on-white. The evolving backstory of the show involved a manifesto written by a “Nowhere Collective” back in 1968. I’m old enough to remember back before photocopiers were ubiquitous when things like class tests and newsletters were duplicated with mimeograph / “ditto” machines - producing a distinctive purple-on-white document (and if your teacher was running late, damp paper which still smelled strongly of solvent). So I decided on a vintage typewriter font and a strong purple-on-white look. As many elements as possible would be plain typewriter text, which would be genuine to the 1968 aesthetic but also meant that I wouldn’t have to worry about fancy graphics and icons, at least at the start. I’ve always been a fan of plain text, and this context gave me the perfect excuse to use it.

The first versions of the app had the clues show and then disappear like a slideshow, but this quickly turned out to be unsatisfactory. If you missed a clue as it went by you’d be out of luck. Because of this you would have to spend all your time looking at the app, just in case something new came up. You’d also be entirely subject to the tempo of the app, regardless of what situation you might be in, such as crossing the street or watching (or even participating in) a performance.

I teach a part-time course in web development, and at this time I had recently done a unit on all the DOM manipulation methods in JQuery, such as .append() and .prepend(). Personally, I prefer to set everything up in data and then swap it all in at once with an .html() call, but here I realized I could actually use .prepend() to build a continuously building list of content, giving it a feel a little bit like Twitter or the Facebook timeline, something which many users would already find familiar. As new clues arrived, the older ones would be pushed down, but they’d all still be available for review through a simple swipe. This also easily supported longer content or larger font sizes: since it was scrollable already a single clue could stretch for more than a screen in height.

The next challenge was how to have clues triggered by timing or distance while also keeping them under the user’s control in case they were busy or distracted or otherwise overwhelmed. The solution to that was to have new clues arrive with a cover. To read the clue the user has to tap on the cover. This gives it a nice feeling of revealing a secret, but we can also have the app pause until the user actually taps on the cover to read the clue. Once they’ve tapped, we can start the timers and distance checks or whatever else to start the process of sending a new clue to them. This way the tempo of the experience is a combination of the user and the app, but in the end it’s always under the user’s control.

We ended up building a fairly sophisticated experience where the only thing a user has to do is tap one large button every so often. Because even that isn’t necessarily that obvious we did a few extra things:

  • we added a label to the button which says “Tap For More”. This label is customizable, so when the app first starts it instead says “TAP ME” like the bottles that say “DRINK ME” in Alice in Wonderland. It then says “Thank You” and the next button label says “TAP ME AGAIN”. This is as much training as anybody needed.
  • we made the button label fade in and out gently. I’ve found that a repeating pattern like this is a great way to flag something as interactive and potentially tappable.
  • eventually, we added a fade in / slide down effect when the clue is revealed. The sliding down highlights the fact that the content is scrollable.

This tap-read-scroll-tap-again experience stayed as the core of the app for all of the many iterations that were to come. It seems quite simple, but as one of the actors noted after a test run, quoting Dolly Parton: “it costs a lot to look this cheap!”

Here's a video of the early version of the app in action:

Other Blog Posts
This Is Nowhere: Bloomsday Halifax This Is Nowhere: Why an HTML/JavaScript Single-Page App With GPS Is A Bad Idea This Is Nowhere: GPS and Wayfinding and More UX This Is Nowhere: The Single-Button UX This Is Nowhere: Don’t Just Stand There! This Is Nowhere: Finding My Duck Finding Burgers Fast: My DIY Halifax Burger Week Site "This is Nowhere" at PodCamp Halifax 2018 The Diary Diaries: Fixing Remembary's Facebook Connection Special Leap Day Edition of "Some Weird Things About Time" What's Up With Remembary Can't get pg_dump To Work Now That Heroku Has Upgraded Postgresql to 9.4? The Best Thing I Ever Did To Promote My App If You Build It, They WON'T Come #deployaday, My Big Hairy Plan for 2015 Extracting Plain Text from an NSAttributedString My Year of "Hits" Part 2: Remembary Rolling My Year of "Hits" Part 1: Remembary Rises (and Stumbles) Handy Little Test Method to Check for Translations in Rails Apps My Suddenly Slow-Waking MacBook Air Indie App PR: Keeping Control of Your Tone A Quick Note on 'clone' in Rails 3.2 My eBook Apps 2: iOS, JavaScript, and Ruby My eBook Apps 1: Introduction Quick Tip: No Sound on Mountain Lion My Upcoming Talk at PodcampHFX 2012: My Year of "Hits" starshipsstarthere.ca: Building at the Speed of Funny Screencast Tips Remembary's Cool New Picture Support Indie App PR 2: Keeping On Top Of User Feedback Indie App PR 1: How to Handle an App Disaster Giles Bowkett Diary Project 2 Remembary Video Congratulations! Welcome to Your Nightmare! How My iPad App Remembary Took Off Why You Should Have an App in the App Store (Even If You Probably Won't Make Any Money) PodCampHFX Remembary Presentation - Part 3 How I Used MailChimp Autoresponders to Promote Remembary PodCampHFX Remembary Presentation Part 2 PodCampHFX Remembary Presentation Part 1 Why AdWords Ads Don't Work for iPad Apps Remembary is Sponsoring PodcampHFX Why Can't I Resize my Views in Interface Builder? Momento and Remembary Concerning Remembary iPad-Friendly eBooks of Gracian's Art of Worldly Wisdom Project Report: PTOS2 A Quick Note on Encryption We're all LUsers Thoughts on HAML Friday Afternoon Hack - Getting Beyond the Basics Halifax Friday Hack and Back to Basics Quote from Wil Shipley FutureRuby Make Web Not War Busy Week I: Toronto Ruby Job Fair Employment.nil - the Toronto Ruby Job Fair Code Count: Ruby on Rails vs. C#/ASP.NET A Brief Note on Twitter The Hub Halifax and Mobile Tech for Social Change Deep Thoughts on Microsoft From The Accordion Guy The Two Kinds of Defensive Programming Presentation - Fixing Careerious: From C#/.NET to Ruby on Rails Enterprise! Presenting at Ruby on Rails Project Night - May 7th New Name and New Look for Careerious/Clearfit FutureRuby and More From Unspace Health Tips for Programmers This tables meme won't die Careerious - Ruby and Rails vs. C#/.NET Yeah I Use Tables For Layout, So Sue Me The Different Kinds of Done Giles Bowkett's RubyFringe presentation OfficeTime: Great Time-Tracking App for OS X Back With A New Look Non-DRY Feed torontorb Keeping Your Sanity With The Command Design Pattern shindigital Is All Grown Up! (according to the spambots) Startup Stars? I'm so bored! The Magic Words for RMagick Jennifer from Operations You see? Naming is HARD Business Software as Process Documentation Deployment note: 'execve failed' Steve Jobs on Market Research Why Canada Is Better for Entrepreneurs "Program first and blog second" Toronto Tech Collage The MacBook Air Is A Roadster RubyFringe! Quote of the Week: Steve Yegge Starting Up: Cards Great design tool: browsershots.org Starting Up: The Logo Quotes Of The Day: Hedge Fund Interview TSOT Ruby / Rails Presentation Night - Part 1 Moneyworks: Accounting Software for Canadians on OS X Starting Up: The Name Nice logo, but why is your site so bland? Welcome to shindigital.com