Making an iPhone WebApp
Since Flash is still nothing but a dream for the iPhone/iPod Touch brothers it leaves advanced web development somewhat up a creek. Luckily, the Mobile Safari performs admirably in all other interactive fields, including JavaScript, allowing you to make use of some of the fun features revolving around AJAX and JSON to make a really sweet webApp. The adventure of building an application that would work with the memory and quiz features of the Bradley University Renaissance Gala taught me a great deal about using the web features of the iPhone/iPod touch.
The gala was a big thank you to BU supporters and a kick-off to the biggest fund raising campaign to date. The design team wanted an interactive event during and after dinner wherein guests could use their cell phones to text in their memories of the campus and also later on be able to take an interactive quiz.
Many ideas were thrown about the table about how our Multimedia for Mobile Devices class would deal with the event. We spent a good amount of time thinking we could buy a cell phone for each table, trick it out with a custom paint job, tasteful stickers, wallpapers, ring tones, minigames, all Bradley themed of course. If that were the case we could make sure we got every table a phone with Opera Mini and Flash and make a Flash application that could talk to the quiz and memory gateway system that was being designed with Drupal by our instructor Steve Merrill. After discovering that our budget wouldn’t allow that, it was decided that the best plan was to just let people text in their memories and answers to the quiz with a short code.
My part in this was to design a web page for iPod Touch/iPhone users with my fellow student Brandon Klotz. The system was to have 3 functions: allow the user to send in a memory to the drupal site, allow the user to take the quiz that would be timed with the show going on the big screens, and cycle through the images that were being taken real-time at the event.
The Goal
I set up a few ultimatums for the system for usability and design reasons. I wanted the application to look like it was made for the iPhone and not just any other website, that meant I didn’t want the users to have to scroll or zoom in, in order to make it appear less like a web page and more like an application.
Along the line of thought that this was an application instead of a web page, I wanted to keep the user from ever having to use the safari controls to manipulate the site. That meant no page navigation and no refreshing. On most of the pages it even meant hiding the URL bar from sight completely and allowing the page to fill up the entire screen. This was done with a line of JavaScript window.scrollTo(0, 1);
Tilty Nav
The first hurdle was figuring out how to put that much content on one small screen that the user could not scroll through. JavaScript provided the solution which was window.orientation that returns either 90, 0 or -90 depending on which way the phone has been tilted. With this I called a function that allowed some CSS divs to display block and others to display none. Steve turned me on to a handy bit of code and I think it’s something the web developers for iPod should get to know and get to love since it’s ability to call a function on rotation change is a powerful and fun tool.
Now I had 3 separate orientations, I could put a different functionality on each one. In this case vertical was the opening screen that displayed the gala logo and the image. Tilting to the left would give you the quiz show, and tilting to the right would give you an area where you could type your memories.
AJAX Memories
In order to send in the memory message without reloading I had to send out a PHP GET request with some specific information in the URL to make it emulate a text message coming in through the SMS gateway. Again I didn’t want the user to have to reload or refresh the page so here AJAX was the solution. Specifically I found Mini AJAX which is a petite set of AJAX functions tailored to just this sort of thing.
I built a form where the user could type in their memory. Then, remembering that I could use the tilting of the iPhone to call functions, gave the user a prompt to tilt their iPhone to submit the memory instead of using a button, simultaneously calling the function and bringing them back to the vertical home screen.
AJAX and JSON Quiz
The quiz posed a much more complicated challenge. A question would display with 4 possible answers and 4 corresponding buttons. The submission process worked much the same as the memory’s. Actually it was exactly the same. When the user clicked on a button it would pass a function that would populate the memory’s form with their chosen answer and run the Mini AJAX function to send it along. Although the form was no longer rendering with this orientation because it’s display was set to none, I was still able to change its value and submit it. This saved me a bit of time coding and allowed me to focus on the more challenging aspect of the quiz, the timing.
JSON really got involved at this point. Steve’s drupal site that was acting as a controller for the quiz both on the big screen and for the iPhone. JSON allowed me to make a POST request from that site without reloading or changing the web page which would return if the quiz was on or off, if it was accepting answers, or what question it was on. Once it got a successful return it would call a function that would display the proper divs for that situation. The JSON request was set on an interval, popping every couple of seconds so that it could stay current with what was going on in the quiz show. This later had a bit of a problem when the huge amount of text messages were flooding into the server as it became too busy to respond in time with the JSON requests from the iPhone.
JSON Dynamic Image Loading
The final element was the dynamic loading of photographs that were going to appear on the vertical home orientation. This was done using JSON once again. Originally every few seconds it would grab an entire array of image URLs and then pick one randomly to display. This idea was later trashed in order to decrease demand on the server and the JSON response from the server was changed so that it would randomly choose a single URL to send.
Design
The design for the final look of the application was an evolutionary process. The original concept was to have, on the vertical home screen, a title at the top that said Memories and one at the bottom of the page that said Quiz. Since we were annoyed at Steve Jobs for snuffing out our hope of ever getting Flash on the iPhone any time in the near future, we considered the idea of using .gifs for animations. In true web 1.0 fashion we adhered a .gif of a rotating iPhone to each title bar, each one rotating a different way. The other two orientations were left relatively unstyled since we wanted to theme it after the quiz and the memories on the big screen and we had no idea what that would look like.
After the first couple days the design took a back seat next to all the code work that had to be done and it didn’t seem important until the final deadline began to approach. Then the idea hit us… “Hey.. user testing is probably a good idea right?” And so, with my heart filled with confidence that this would be totally obvious to anyone who saw it, I found a few willing test subjects. How could I fail? I had rotating animated .gifs!
The first few seconds happened like I expected them to. They tried to click on the headers to navigate the site. I figured they would see the .gifs and figure it out, but hardly anyone did. They just kept poking till they decided the application was somehow broken. This had us scratching our heads for a while. It was so obvious to us who had built it that you just had to rotate the iPhone that we had lost the end user’s perspective.
It was suggested that we put written instructions on the vertical page about the tilting navigation, but I was against that idea. If this idea was going to fly, both in this one time event and in future applications of tilty navigation, it had to be somehow obvious that tilting the iPhone would change the page without spelling it out.
The idea came to me a few days before the gala. We have to make people want to tilt their iPhones, once they do they will see that the page has changed and then realize that rotating the iPhone changes the page around. This was achieved by placing the headers that were still at the top and bottom of the vertical screen, on the left and right of the screen and rotating the words. If the words “Quiz” and “Memories” appeared sideways, users were prompted to rotate the iPhone to better read them and then poof, the site would change. In practice this was found to be MUCH more effective and also added a fun design quirk with which to base a .gif free theme around.
Images coming soon.
Tags: Bradley, iPhone, iPod Touch, renaissance, web