Archive

Posts Tagged ‘UI’

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.

Categories: UX Tags: , , ,

My Web Super Heros

I sit in front of my TweetDeck all day and receive tweets from awesome web people. Awesome people who have tons of experience and knowledge in web design, UI design, development and programming.

These people are the ones who get me excited to come to work and expand my knowledge, they have more influence on me and my career than any college professor I had or any other web professional out there in the web quagmire (that’s the word of the day, everybody scream!) I’m gonna share these people with you. If you are someone who follows the interwebs regularly, you have probably heard of most of these people, if not, here you go. They are listed in no particular order..

Jeffrey Zeldman

Every time my Growl alert pops up and I see that blue beanie in the corner of my display I pause whatever I am doing to read Zeldman’s latest tweet. Some times the tweets are funny, some times they share good articles, but most of the time they are just way over my head. The problem with reading Zeldman’s tweets is that most of the time I have to do some research to figure out what he is referencing or talking about. This is awesome though. Zeldman’s tweets force me to learn and expand my web knowledge is ways that I never have. He’s like own Yoda of sorts. ‘Better web design you must.’

I first saw and heard Zeldman on 5by5’s The Big Web Show, episode number two, when he was interviewing Jeremy Keith the author of HMTL5 for designers (which I still don’t own and haven’t read yet). I was hooked on who and what Zeldman represented for web design. During the show I added him to my twitters and the rest is history.

Zeldmman manages zeldman.com where he shares his brilliant web ideas with the world through blog posts and conversation. He is the founder of Happy Cog and is most famos for his book on web standards called Designing with Web Standards. Zeldman is also the co-founder of An Event Apart, the best multi-city web design convention ever, and A Book Apart with Eric Meyer (he’s further down on the list.)

Jason Santa Maria

My freaking favorite web designer ever. If only I could just copy his style and get away with it. Jason Santa Maria is great on so many levels. He is great at bringing typography to the web in beautiful form. He designs information that is pure and readable. He lays out content in brilliant, simple and elegant ways so that it is usable and easy to navigate.

The average web surfer has used his designs on many occasions. I used dictionary.com (and its family of products) for years, and up until a few months ago I never knew that Jason Santa Maria was designer. He also has a really great portfolio that I have used in the past to inspire me as I go through the design process if I get stuck or if I am just bored with design.

Jason is the founder of a the design studio Mighty and is the creative director for A List Apart and Typekit and the co-founder of A Book Apart. Some of is design include; Happy Cog, A List Apart, Objectified, The Chicago Tribune, Dictionary.com, They Might Be Giants and much, much more.

Luke W

Luke W is a little green man that spreads the word of web design and usability across the world. Okay, he’s not really a little green man even though that’s his avatar, but he does spread the word of better web design and usability across the world. I was introduced to Luke W on somebodies design blog where I heard his presentation on Web Form Design in Action. I had a class on interaction design in college, but that class lacked any real education on the subject. After hearing Luke W present on designing web forms, I started to understand what interaction design really was. From there I started learning more about usability, a lot from other Luke W presentations. He was the first web ‘dude’ who really struck a cord with me on the importance of user centered design.

Luke W is an entrepreneur and the co-founder of Stealth Start-up. He was the Chief Design Architect at Yahoo! and was the Lead User Interface Designer at Ebay. Luke also does amazing presentations on web design, user interaction and usability at a variety of web conferences all over the world.

Elliot Jay Stocks

Surfing the design magazines one day I came across a site called neutroncreations and I was blown away by the design. I was like, “man, who designed this freaking site?” For some reason this site jumped out at me, maybe its because up to that point I had never seen anybody use typography and background images real well. Plus I had never seen anybody use content blocks and offset grid patterns in that fashion before. The layout was cool and it’s unique in that the layout changes ever so slightly between pages. Not enough to freak your senses out and make it unusable, but just enough to make you interested. After perusing this site I found out that Elliot Jay Stocks and Tim Van Damme were the masterminds behind the design.

Seeing more of Elliot’s work I really started to see a real original style developed in his work. It seems that most designer and developers love to recycle and not take the necessary risks to break the mold and create original designs. His use of background images blew me away, nobody uses background images, that’s so crazy! Plus, my professors had drilled it into my head that you NEVER use background images because it destroys load times. Well, now I know that they had no idea what they were talking about. Its not the image that destroys load times… its the method. I appreciate Elliot’s designs because he likes to push the boundaries and conventions of web design, which is just awesome. He’s not your father’s web designer, if that makes any sense.

Elliot currently tweets from London. He is the author of the popular SitePoint book Sexy Web Design, an extremely good illustrator, and the slayer of the “Web 2.0” look (thank goodness.) Elliot is also a musician known as Sourhaze, which makes me like and appreciate him even more.

Janko Jovanovic

Jankoatwarpspeed is pretty freaking sweet. It’s like a free college course on web design and usability, except you actually learn valuable stuff. Janko writes on everything UI from the ideological theories behind the human mind and how people react psychologically to the web, to the the practical side of just making things work better for users. If you want references for UI Design Patterns or know why you users aren’t sticking around, Janko will have the answer for you, not just the answer though, the reason why and the solution. In the world of web design and development there are a lot of ideas, some proven and most unproven. Jankoatwarpspeed is a practical blog that will not only show you if something works or doesn’t work, but he will tell you why. Janko is huge into Javascript and the Jquery library, I didn’t know that you could do so much with it. He shows you how to use Jquery to make your web pages sing with usability delight. Plus, its one of the most unique and coolest web sites I’ve been to.

Besides publishing Jankoatwarpspeed, he is also an artist and painter, go check out his flickr photostream. Janko has also published a lot of free UI and design tools like the Sketching&WireframingKit and HandyIcons, and if you are zipping around from design blog to design blog you’ll so more of his free designer tools pop up here and there.

Eric Meyer

CSS Guru. I use Guru because ‘Ninja’ is so overused and trite. Eric Meyer is a Bill Gates look a like who is one the foremost experts in Cascading Style Sheets and one of the rare individuals who have moved the web into a better place as a whole. I first found out about Eric after picking up his book CSS: The Definitive Guide. Then I realized that I had already owned his CSS Pocket Reference. If you ever want to learn CSS, learn it from Eric, either through his speaking engagements, his many books and articles or his blog where he throws in some of his own thoughts as well. And he has some great free tools on CSS, design and WordPress for you to use.

Eric Meyer is the editor and co-founder of A List Apart and the co-founder of An Event Apart and a founding member of Global Multimedia Protocols Group. He has written the best CSS books in business and pretty much every designer has purchased and owns his books.