Archive

Archive for the ‘UX’ Category

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: , , ,

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: , , ,

Re-post: Keeping Safe Those Things We Hold Precious; Our Memories

Here’s a freaking awesome article from 52 Weeks of UX guest author Alan Colville. Here’s a quick teaser, click here to read the full article.

Brooklyn Beta was a most memorable web conference. It can be relived through peoples’ stories, anecdotes, images and more, which are strewn far and wide across the web. Although not altogether typical, the quantity of data created around this event demonstrates the ruthless efficiency with which we record moments that matter to us.

We’ve never recorded so much in so many ways. In theory, the delight in rediscovery should be richer than ever before. However, given the complexity involved in these recordings, not least of which are the multiple sites, devices, formats we use, will our online recordings still be there in years to come? Decisions users make and actions designers take now could decide how easy it will be to relive memories with the richness we recorded them.

Living in the here and now
We’ve become intensely focused on the here and now. The single point in time or update in a our ‘lifestream’. So fastidious are we at updating, checking-in and tweeting, that our recordings become instantly submerged in a sea of updates. With this focus on the here and now, there’s an acceptance that in leaving a site, the rich recordings we’ve spent time building there are lost. Without these recordings, we rely on our own memory. I was recently reminded, proving the point, that our memories don’t serve us well. In fact they’re often wrong as Susan Weinschenk’s highlights in ‘100 Things you should know about memory – Your most vivid memories are wrong’. The human mind is good at piecing together memories to form a picture of an event. The web is still learning how to collate in this way. The mind is poor at remembering detail. So, what we can’t remember, our mind sometimes make up and fills in the gaps. The web can support this human frailty by being the place to hold the detail to accurately remind us later. For this to happen, we need to be able to find the detail in years to come as memories fade.

This wonderful story from This American Life beautifully demonstrates the creative license our mind can take.

The delight in rediscovery
We’ve always compensated for the inefficiency of our memory. From the first cave paintings or stories to photo’s, we record to help us remember and share. What has changed in this digital age is the sheer quantity of data being recorded. Whereas before, only the important events were recorded, such was the overhead in recording. Take for example portrait paintings, which was time consuming and a luxury of the rich. Now we record even the most mundane with infinite ease. Recordings of an event happen in multiple places, formats and ways across the web, whereas before there was a single recording of an event held in one place. We’re industrious like never before. Blogging and publishing on our own and others people’s sites. An intricate and intelligent web of data is quickly created around a place, opinion, moment or event.

As with any recording, there’s delight in rediscovery. As our memory falters overtime, the value of the recording grows. So focused are we on the here and now, that we seldom think that far ahead. An additional benefits of all this recording is that it compensates for yet another human frailty. We’re poor at knowing how important moments are when they happen! Retrospectively, it’s clear that some events that seemed minor at the time prove to be very important. Scott Berkun calls this ‘The Impact Ratio’. He defines it as the relationship between your perception of the importance of something, and how it turns out to be a year or ten years later. Because we capture more moments, chances are, even as our priority changes, the ones we considered minor are recorded nevertheless.

READ THE FULL ARTICLE @ 52 WEEKS OF UX (WEEK 40)

Categories: Design, UX

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.

Follow

Get every new post delivered to your Inbox.