Soda Machines UI

I got way too excited when I saw this new soda machine at a local sandwich shop. Simple, fresh touch screen with a classic old-school container. But it only has one output nozzle so you gotta stand in line. Older machines conveniently had one nozzle for each type of soda. Maybe they'll make a new dual version eventually, but for now, I like this fun design.

Disney's "Where's My Water" UX Review

Adorably cute alligator, Swampy, wants to take a bath & needs help getting water. How could I say no to that?

Loads of free levels, fun puzzles, and unobtrusive nudges to upgrade to full version. Here I give an analysis of the UI & user experience (UX) of this game. I'm reviewing the higher res iPad version, but most comments are relevant to smaller screens as well.







Main Menu Screen
Menu Buttons - great giant buttons, easy to press. But I dislike that most buttons in the game have only text on them. I'm guessing Disney was going for a novice audience that hasn't learned the icon language common to these games, but it seems like "Play" and "Settings" could have at least had the right-facing arrow & gear icons. It's tricky that touch device interfaces don't allow for hover-tips to explain what icon driven buttons mean.

Buy Full Version Button - Clean & has a different visual style from the other Main Menu buttons so it stands out, but I would have drawn even more attention to it. Somehow it looks boring with the white background & static duck icon. We don't want the full version to seem boring! Also, as a user merely trying to discover what's in the full version, clicking this button unfortunately takes me out of the game & it's difficult to get back into the game (which is true with many mobile games). Still, it's debatable if you'd rather pop up an in-app screen explaining what the full version offers, as this puts your user one click further from purchasing.


Main Menu Polish - The animations on the radio & alligator are nice - make this screen more lively. The smile on Swampy makes me smile every time I launch the app. After playing more, I notice a new duck appears in the tub, dressed in a suit & bow-tie. Cool that they give this screen more interest over time, but I wish the Easter egg was more noticeable - I never would have realized it unless I had been taking screenshots.

Ads - The ads across the bottom 30 pixels of the screen are unobtrusive. They use most of that area to advertise the full version of "Where's My Water" and the rest of the area for paid ads. It draws a bit of attention to itself when it animates onto the screen, but I'm guessing users don't click it much in the iPad version.

Area Select Screen

Area Select Screen
Area Tiles Slide  - Each area tile has great big images with short titles. Glad they're using the convention of showing a bit of the left & right tiles to hint that you can move this horizontally. Tiles slide easily one at a time, although no matter how hard you slide it, it rubberbands to the next tile only (I was having fun & wanted to really fling it, but they don't allow it). I like that the "Meet Swampy" image reveals that he lives in the sewer & hints at the ducks you'll be saving.


Back Button - Why use the convention of a "Back" button icon here but no icons for the previous screen's "Play" and "Settings" buttons? Still, I always like a good left arrow back button.


Duck Progress Non-button - They broke their own convention here with their Main Menu's "Buy Full Version" button by making this Duck progress image (below showing "28/78") the same visual style & duck icon. They taught me to click the other button & I was disappointed I couldn't click this one. Tiny frustration point for the user, but easily avoided with setting some UI art standards.

Intro Cinematic
Upon starting the first level, you're given a simple intro cinematic that introduces you to the story. A single oversized image that the camera pans down & to the right to reveal our nemesis & hero. Clean, inexpensive, and becoming a standard for many casual games these days.

 

In-Game

Tutorial
Simple tutorial made clever with the use of an alligator hand motioning the direction to swipe. But the "Drag to cut the dirt" instructions box could do with some rounded corners for polish. They use semi-transparent rounded corner boxes in the achievement description popups (below), so I'm not sure why they didn't continue that style here.

 

HUD Buttons
Great use of the common 'refresh' icon, but then why spell out the word "Pause"? It's long, adds visual distraction, requires localization, and takes longer to process than the pause icon that's been in our common symbol library  for 40+ years.

Duck Progress
Similar to Angry Birds, you can score 0-3 stars (ie ducks) to master a level. The player must get enough water pass over the duck to collect it. As a great progress bar, they show how close you are to collecting the duck by having animated water fill up the duck in 4 sections. This gives a great one-to-one relationship between the cause of the progress (water) and duck, as apposed to using a generic abstract progress bar. Also, the ducks in the game-space are identical to the 3 ducks in the HUD. Again a nice one-to-one correlation that needs no explanation.

Bath Water Progress 
As you fill the tub, Swampy gets excited & the water splashes around in the tub. It's not as visually precise as a meter that fills up pixel by pixel, but it's a good enough indication of your progress.

 

Level Complete Screen

Standard animating numbers & ducks that go from no progress to the amount of progress you achieved. One interesting thing was the "Full Version" button animates in from the right to draw attention to itself & encourage purchase. It's not too intrusive or annoying, so I agree with it from a business standpoint. All that said, this screen could have been much more epic looking with less text & more focus on kick ass images (as seen in Angry Birds below).

 

 

"Full Version" Call to Action Screen

Nice screen, good screenshots & icons for slime & other more advanced gameplay elements. I'm disappointed in the white text box with the unattractive, center justified bullet points & the fact that '-' dashes are used instead of cute bullet images. It's good that they've put the buy button on the right, as that's what people are most likely to click. "Maybe Later" is not common language for canceling, but that's probably on purpose to confuse you on how to escape this screen. Not too annoying so it's probably worth keeping for increasing purchases.


More Screens
I've put off reviewing the Achievements, Level Select, & Collectable screens as they had less to discuss. But if I have time I'll come back & add them here.

Good game & user experience overall. Some tweaks to each screen could have made it amazing, but I'm guessing Disney is making their money's worth on this game.

UX Conferences 2012

Here's a great place to see all the upcoming UX Conferences for 2012 - http://finduxevents.com/ux-calendar/ux-conferences/2012/

Cross Platform Mobile Development Tools

Article on 6 Cross Platform Mobile Dev Tools

Checking out the best options for cross platform mobile development. This is a good high-level overview of 6 products available. Products I'm interested in checking out - Appcelerator, appMobi (browser based dev environment for beginners), Sencha (for high quality UI), and Corona (SDK for building games). I downloaded Appcelerator first since we've got a Meetup group in town recommending & using it.

Research Showing Positive Results for iPads as an Educational Tool

iPad a solid education tool, study reports - Christina Bonnington, WIRED

Wired Reports - "In a partnership with Apple, textbook publishers Houghton Mifflin Harcourt performed a pilot study using an iPad text for Algebra 1 courses, and found that 20% more students (78% compared to 59%) scored 'Proficient' or 'Advanced' in subject comprehension when using tablets rather than paper textbook counterparts."

Edutopia - George Lucas

Check out http://www.edutopia.org/. I'm learning about new game/tech driven teaching techniques & stumbled across this project. Full of amazing stuff & part of the George Lucas Educational Foundation. He may not be advancing Star Wars like we want, but maybe this is better.