Archive

Posts Tagged ‘user experience’

UX Case Study: My Antique Slot Machine

12/05/2010 1 comment

When I was a kid, my Grandpa bought a couple of 1948 antique slot machines made by the Mill Novelty company. One was a quarter machine and the other was built for dimes. Every Sunday we went to Grandpa and Grandma’s house for a visit and Grandpa would always give each grand kid a roll of quarters and dimes so that we could play the slot machines. One Sunday, after spending all my dimes and quarters on the slots, I had a good idea. There was a keyhole on the back of the machine where you could take the back off and get the money out of the machine. Learning how to open locks with a bobbie-pin from the movies, I shoved a bobbie-pin in the lock on the back and broke it off, jamming the lock and rendering the antique machine useless. After a long talk from my Dad, a lot of tears and a locksmith, the machine was eventually fixed.

Before my Grandpa passed away, he gave me that old 10 cent antique slot machine because of my attempt at Casino robbery. I now have the key and can play it anytime I want. It still works great and occasionally I get a big win, but ever since I was a little kid I have never hit the jackpot, unless you count inheriting the machine itself.

Playing this Mills antique machine the other day I realized something. For being a simple machine, it has a great user experience. Through a couple of simple inputs and outputs, it manages to create anticipation, amusement, pressure, addiction and even anxiety. All the things I experienced when I was a kid that made me want to break into the back of the machine. This machine, with its very complex, mechanical inter-workings has a very simple user interface that entices and intrigues the user keeping them coming back for more.

This machine is perfect for a website/app analogy don’t you think!

The Backend

When you take the back off the machine (using the key preferably) you reveal a very complex mechanical system that blows the game Mouse Trap out of the water. Its pretty scary and amazing to look at, much like viewing the backend code of a piece of software or website.

Functions

The mechanics of the slot machine are a series of functions that build upon each other and work together when a dime is inserted and the user pulls the handle. Watching the machine process a dime with the back open is pretty interesting to watch. Before the lever is pulled, the machine must check to see if a dime has been inserted, if there is a dime present, the machine will unlock the lever for the user. After the lever is pulled a series of functions are called and executed, each function is started either by the initial pull or by the completion of another function.

These mechanical functions include:

  • Slide dime(s) down the coin slot to the collection box OR the jack pot container
  • Start spinning the all spindles
  • Stop each spindle randomly one at a time from left to right
  • Stop all spindles
  • Calculate results
  • Pay out appropriate amount of money
  • Lock lever

Along with these basic functions, there are more safety feature functions, adjustment functions and a variety of other mechanical logic functions. All these functions must work together to accomplish the machine’s task (stealing your money). This is the equivalent of scripting functions on a website by which the website processes how the user interacts with it and how the website dynamically displays information for the user.

The Frontend

The outer shell of the slot machine serves not only as a cover to disguise the complex functions that hide inside, they also make the machine appealing and inviting for the user. This is where the user gets to interface with the many moving components on the inside. This is where the user gets to experience its magic and wonder.

Structure

The over all, compact structure of the slot machine is built on a wooden foundation. All the components are contained, or wrapped inside four steel walls. These steel walls serve to keep all the parts and pieces together as well as the foundational structure of the user input, output and display components like the dime receptacle, the lever, the output slot and the spindle display windows.

The structure of the slot machine is much like the structure of a website, the HTML and CSS. The mark-up code of a website serves as the structure of the website, its determines the layout of smaller structures, the position of components and the location of user devices. The HTML and CSS should be a simple structure that props up the website and holds and hides its inter-workings. It allows the user the interact with the complex functions on the inside without having to display its functions.

Design

The main purpose of the slot machine is to make money right? To do this, the machine can’t just be a big steel box sitting on a simple piece of wood. It needs to attract the potential users and then keep them there playing for hours until all their money is gone. That’s where the sweet cherry burst design, bright colors, user friendly shape, ergonomic user inputs and spinning fruit symbols come into play. This is the skin or graphic display of a website.

The main purpose of a website is to make money right? Just like the slot machine, a website can’t just be a white screen with blue underlined links and black Times New Roman text, it also needs to attract and keep the user. This is where brilliant color schemes, enticing graphics, well placed user elements and animated displays come into play.

The Experience

Functions, structure and design all come together to create a unique, fun experience for the slot machine user. The user is attracted to the slot machine because the design promises to deliver instant winnings and in some cases big winnings all for the price of a dime. After the user drops a dime in the coin slot they are un-aware of the physical and emotional experience they will have in the next 30 seconds.

The user reaches up, grabs the lever and pulls. They instantly hear the functions fire as metal levers, gears and linkages click and clack together. The dime moves and is displayed for the user under a thin piece of glass. The spindles the hold the fruit graphics start out spinning fast and make a whirling noise that starts to build the anticipation. One at a time each spindle stops instantly revealing a fruit symbol, the slight delay between spindle stops continues to build tension and excitement. After two spindles stop, the user can compare and anticipate what the results will be by referencing the visual description of the different winning combinations on the front of the machine. After the third spindles stops and makes an audible clunking noise, the results are finally revealed and the winnings are then ejected through the machine into the little cup at the bottom. If you don’t win, then the machine just goes silent, its like a little quiet smirk the machine gives you.

Collaboration

With a few more dimes in hand, the user is now hooked on all the noises, movement and excitement the machine has created so they pull the lever a few more times. This user experience is created by seamless collaboration between structure, function and design. The user experience of a website is no different. A successful website or app needs to have a solid structure, fine tuned functions and a beautiful interface. To accomplish this complex task of creating a unique user experience, seamless collaboration between designer, developer and programmer has to occur. User experience goes much deeper than just the simple interaction the user will have. Like the slot machine, the functions, structure and design are all key parts of the experience itself.

Advertisements
Categories: UX Tags: , , ,

You make the decision for me

I am a user as much, if not more, than a designer and a indecisive one at that. I have a hard time making a decision over where I’m going for lunch. Now, I’m  not saying that users are just as indecisive as me, but why not make the important decisions for the user instead of making them decide.

At a recent WordCamp, Matt Mullenweg talked about how WordPress has focused on user centered design and that one key thing in designing for the blogger (user) was to take the important decision making away from the user. He gave many examples of when the crew at WordPress had to make touch decisions on what plugins and features to add to the WordPress core or leave as plugins. One being the WYSIWYG, but the decision was made to add the text editor to the core. The decision was made to add it because they felt that the text editor was to important for the user/blogger to have to find and install themselves.

Making tough decisions for the user allows the user to experience and use the website/app more easily. Its the basic, “don’t make me think” mentality. Web users don’t generally spend a lot of time on a site so they won’t have the time to spend on making tough decisions. Plus, users (like me) don’t want to deal with consequences of choosing the wrong option or get ‘buyers remorse’ if they find a better option later. Matt and the WordPress crew choose what text editor would function best for the user and added it, we should do the same. We need to make the choices before hand so that the user is confronted with a painful decision.

Drupal, unlike WordPress, doesn’t make any decisions for the user. It has a really big open source development community which is great, but this kind of large developer base creates a lot of options and a lot of options means that the user needs to make those critical decisions on what modules they will need to set up a simple website. Where WordPress is more user centered, Drupal is more community centered and this can be difficult for a first time user of Drupal to build and set up a simple website. Drupal is a powerful CMS and will, in general, have more options than WordPress so it is somewhat unfair to compare the two, but Drupal itself could make some important decisions for the user to simplify the creation process.

Wait… Don’t Design for the Advanced User

To often as designers and developers we focus on the sweet, slick features of our apps instead of focusing on who is gonna use they features. Complex, feature rich apps are very powerful tools and are great products, but we can’t keep designing these apps for the advanced users. Advanced users are the low percentage user of any app and they won’t keep your product a float.

Facebook, Gmail, Pandora and many other popular web apps are very complex and deep in features, but one reason why we all use them is not for there complex features but the experience that they have created.

Facebook has a sophisticated email system, a decent notes app, an event planning and invitation tool and a powerful group feature for sharing private info between group members of your choice. But the majority of users don’t use any of these things, a lot pf people don’t even know that Facebook has a grouping feature. The majority of users just use Facebook for its intended purpose, to share their status with their friends and to view their friends status’ (and to play Farmville and MafiaWars of course).

The 80/20 Rule

I call it the 80/20 rule (in general terms). Lets say that the majority of your users make up 80% of your apps demographic, this includes your first time users and your average users. The other 20% of your users are your advanced users, the people who love and use all the features of you app and understand its power.

This is a general rule, obviously these percentages don’t actually represent your users, but its a good visual concept to use as you design and attempt to guess at what your users are doing on your app.

If you think in these vague terms as you figure out what functions and features you will “feature” than you can get a better idea of which ones will best suit the largest amount of users. Facebook does this really well, the status updating widget is located at the top of your home and profile pages where the majority of the users spend their time.

The power of the 80/20 rule is that is forces you to examine what 80% of your users should or are doing. I like to break it down even further and find the three features that the 80 percenters should or are using.

Focusing your design on what the majority of your users will or are doing allows you to re-focus you attention on the user instead of the features. Features are awesome, but kind in mind that the majority of your users will not use all the features, just a few of them all the time.

Create Advanced Users

When you design, assume that every user is NOT an advanced user.

If you are just launching an app for the first time is not a assumption, this is fact, you have no advanced users yet. On a new app, focusing you attention to what 3 features will the 80% use is very crucial because this is where you will teach your users about the app and create an app culture. The purpose of any app is to keep people using the app, if you over whelm your users with a bunch of features from the get go, then you will scare them off and intimidate them.

You can’t teach somebody math by jumping into Linear Algebra, you have to start with the basics functions first, but this can be tricky because you can assume that most you your users are not new to web apps. The best way to teach a user without making them feel dumb is to focus your feature set, this way the user can jump in and start using the app and then when they get brave they can discover the other features as they wish. The design goal for your new app should be centered around creating advanced users not designing for advanced users.

If you are re-designing an existing app that already has a large user base the same rules apply. The most appropriate thing to do though is find out exactly what users are doing in your app. Don’t just assume that all users are using all the features, you may discover that a lot of your regular users, the ones you consider advanced users, are not advanced users at all. They may just be using your app for a few of its main features. I am a regular Gmail user, but I only use it to email, I rarely use it to set up tasks or to manage my calendar.

Keep that in mind as you re-design. The real struggle with re-designing an app that already has a user base is not to disrupt the app culture that had been created. In some cases, you must change the culture if the culture is bad and is the reason why you are re-designing, but most of the time you want to maintain the cultural aspects and user workflow of the app.

The key here is design for both the 80 and the 20. Keep the advanced features available but also provide simple, easy methods for the first time or average user. Remember that you still need to be creating advanced users, just because you already have them doesn’t mean you don’t need more of them.

An App that has Everything

Look, if features where that reason why people did something then why doesn’t somebody just come up with one app that does everything, that allows me to check my email, manage tasks, socialize with my friends, listen to the radio, watch the latest viral video, buy e-books, plan my vacation to Yellowstone and teach me how to fly fish (I know, Google is trying).

The reason we can’t just have one giant app that does everything is because people don’t really care about the features, they care about how they access the features. If an app could really do all these things there would be no user friendly way to access them, unless of course the app could Jedi mind trick you and read your mind.

Besides the Magic 8 Ball, apps can’t read the users mind, so focusing your app on its purpose and designing your app centered around what the user is doing is important to the over all success and usability of the app. People are more likely to use multiple apps that focus on a particular feature then use an app that tries to be all things to all people.

A car is used to carry a few people from place to place, a truck is used to carry lots of stuff from place to place and a bus is used to carry lots of people form place to place. But its not a good idea to combine the three into some multi-functional car-truck-bus that can carry 50 people and 2 tons of lumber at 42 miles per gallon, it just doesn’t make sense. It would be pretty cool though.

The Moral of the Story

Don’t design for the advanced user, design for the creation of advanced users.

Categories: UX Tags: , , ,