Usually, I start the conversation about Game Design with a discussion of HCI and User Experiences more generally. This year, we’re doing it backwards.
what I want you to think about is something even more fundamental than Human Computer Interaction: let’s start by considering the design considerations for making usable things in general.
The readings for this come from The Design of Everyday Things, a great book by Don Norman (link on Amazon). The required reading is the first 2 chapters. The third chapter is optional (but highly recommended).
Chapter 1: The Psychopathology of Everyday Things
Chapter 2: The Psychology of Everyday Actions
Chapter 3: Knowledge in the Head and in the World
Note: all three chapters are in the protected reader.
Read at least chapters 1 and 2 (I recommend reading chapter 3 as well), and post a comment.
In your comment, consider some object (it might be a computer program, or it might be something else) that you use on a regular basis. How does it follow Norman’s principles? (having a good conceptual model, making things visible, good mappings, feedback, affordances).
Please post your comment before reading other people’s – although, you will probably find reading other peoples’ comments instructive (and comment on their comments). There has been some interesting discussion in the past around this.
We’ll discuss this material in class on Wednesday, October 12th. Please complete the reading and post your comment before class on 10/12.
{ 24 comments }
The first time I played the full version of minecraft I actually had a problem with it based on Norman’s principles.
I had played the free version where you were given all of the blocks, and to mine a block you just had to hit it once. When I started playing the full version, I didn’t have any blocks (I knew I wouldn’t) but when I tried to mine a block it would crack but not break. My conceptual model was different than the game as I had previously developed a different model from the free version. The game was good at making the effect visual (cracking) but the problem was that I was on my laptop with it’s track pad. It’s less intuitive to click and hold on a track pad, which is what I needed to do in order to break the block. The feedback I was getting eventually led me to try something else (click and hold) which then changed my conceptual model once the block broke. The mapping was also good, but my conceptual model was just the dominant force until I figured out that the full version had different mappings than the free version.
I’ll consider one aspect of Android phones, the back button.
When I got my first Android phone I thought the back button seemed like a great idea. In almost any application, you will eventually have to go back to a previous menu, page, or other view. My conceptual model of the back button is that it should display the previous view. This could be the previous view in the same application or the previous application if I had just switched to a new one. In practice, my model doesn’t always hold up. Some applications will always display an application specific view, such as moving up in a hierarchy or loading the previous page. This doesn’t match my conceptual model and led to some initial confusion. The visibility and mapping of the back button are largely application-specific. Over time, I learned what the button did depending on which application I currently had open. The feedback given to me allowed me to quickly learn the results of pressing the back button.
The object I use frequently is the 3rd generation Kindle. I like this as an example because it has some really good design elements and some really bad ones. It represents a technology that was really still in its infancy when it came out.
As a conceptual model it functions very well. There is a keyboard with arrow keys underneath the screen, which behaves as one would expect. Choosing a book to read is also intuitive. The buttons to turn the pages are preeminently featured in either side of the screen (visibility) which lends itself to ease of use.
Where the Kindle does suffer some is in the area of mappings. There are two page turning buttons on each side of the screen: a big button and little button, one above the other. Using the Kindle, you would think the big button on the right would advance the page forward and the big button on the left backwards. This is not the case. Both the large buttons move the page forward and both the little buttons move the page back. This is confusing since it does not align with the user’s expectations of what right and left mean while reading an electronic book.
Another are where it lags is with the on/off switch. A short flip of the switch puts the device in hibernate, a long hold will eventually turn it off. The feedback to shut it off is lacking. There is no response that the device will soon shut off. You just hold the button and wait for about 10 seconds. It takes a really long time. Often, I w
For this exercise I am going to consider the toaster oven I just used. The toaster oven has a pretty straight forward conceptual model, it cooks things via two heating elements located on the top and bottom of a metal tray. The interface consists of 3 knobs. One configures the elements (bake, toast, broil, etc), one controls the temperature, and one is an on/timer knob. These 3 controls map to the things you would want to change for cooking different things in a toaster oven. The toaster oven also does a good job at providing feedback. The timer / on switch has a blue light that indicates the device is currently on. In addition, the elements in the oven turn red when they are heated. The only control which has visually poor feedback is temperature, as the elements illuminate at a low temperature so it is difficult to distinguish kind of hot and very hot. The timer has a audible tick, providing feedback that time is progressing towards done, where an alarm informs you that the time period you set has expired. The 3 knobs provide good affordance, giving you all the control you need for an optimal cooking experience.
My product is the Ubuntu GUI Natty Narwhal:
After using the standard linux GUI, Natty Narwhal has an abundant amount of design flaws contributing to a frustrating learning curve. The interface in general changed from the Windows drop down menus and organization to the Mac quick bar. The change makes finding lesser used programs very difficult to find when first experimenting with the GUI because only the main functions are originally placed on the widget. Along the same lines, adding things to the widget can also be frustrating for a new user. The pane doesn’t allow users to drag and drop icons and shortcuts wherever you want, especially when using the netbook version of the GUI. Finally, the organized menus of the previous version of the GUI had programs organized by function, but now they are all located within a searching feature that requires you to have an idea of what you are searching for. Overall, the initial experience with the GUI is frustrating and challenge. Learning the specific functions and possibilities of the GUI have drastically less intuitiveness than other versions.
The thing I’m going to talk about is my Windows Phone.
Touch phones have taken off in general, partially because they are more intuitive than other technological innovations. To be more specific, Norman talks about how mapping can make something intuitive (turning a switch “up” in a car will roll “up” the window); On Windows Phone 7, you see mapping in the way you can move tiles and scroll up and down using your fingers, and if you want to switch the way the screen is oriented, instead of pushing a button you can simply tilt the phone on its side. In terms of affordances, smartphones in general can make good flashlights if you really need them, but there aren’t a whole lot of things they afford (that aren’t what you would find in any other mobile computer).
Windows Phone does a decent job of being a good conceptual model. In fact, I’d say that’s what it does best. Live tiles make organizing information (like your e-mail, calls, apps and other things) easy. You can essentially have a tile for everything that you “do”. This “tile” system lets you know that you can touch a tile and easily bring up an intuitive screen for that specific function, as opposed to having to find it by going into something like your settings.
One problem that makes using touch phones difficult however, is the lack of feedback. Because you’re touching a screen, you don’t “feel” a keyboard like you would on a computer. This doesn’t seem like it’d be that important, but the amount of typing errors I make on my WP7 is far greater than the amount of errors I used to make on a QWRTY-button smartphone I used to own. Having the tactile response is important.
Microsoft Windows.
It’s an operating system that is extremely, maybe unneededly, complex but yet it manages to be simplistic enough that even my 80+ year old grandma can still perform basic tasks on it with a little direction. There are positive and negative feedback both visually with windows that popup alerting the user of an error, as well as sound chimes and various sounds that train the user to expect certain things when said sound is played. Windows is has been around long enough that it has kind of brain washed the vast majority of people expecting certain things from an operating system, and as a result it is the conceptual model that people tend to think of when thinking about modern computers. With various means of user interaction with a keyboard, mouse, and other peripherals the OS utilizes these to create a very streamlined user experience, often one that many users take for granted. Case in point of this is that many times when users complain it is because they are so used to the computer being able to do what they want it to, that when it all of a suddenly can’t, they feel like it is broken and that there is something wrong with it preventing it from being able to do that.
The Home Screen on the iPhone (and iPad) uses a simple arrangement of icons to maximize the visibility of all possible software installed on a user’s device. Apple also channels people’s tactile intuition to help them quickly discover otherwise obscure gestures, such as a horizontal swipe. They continue to carefully enhance this system as required, but they prioritize visibility and tactile intuition to avoid introducing overly complex mappings or concepts.
On the original iPhone, the Home Screen only contained a handful of icons. Every core function of the device was in plain sight, and showed a completely flat hierarchy of app arrangement. There was only one action to perform on these icons—tap to open the app. The idea that one can click or double-click something, such as a button or an icon, to activate it seems like a simple and obvious mapping safely borrowed from traditional computer interaction.
When Apple added web bookmarks and apps, the Home Screen could no longer show every icon on one page. They had to add some way to view app icons not visible on the current screen, so the challenge was to give enough feedback and affordances to compensate for the loss of visibility.
They added a horizontal paging system and a row of page indicator dot. For example, if the Home Screen shows the first of three pages of icons, it displays three dots, with the leftmost dot being brighter than the others, at the bottom of the screen. The page indicator builds the user’s mental model by showing them the arrangement and bounds of this new system at a glance (unlike the transient scroll bars on the iPhone, the dots are always visible).
The dots’ horizontal arrangement also gives users a hint at how to move between pages—it turns out they can use left and right swipes on the touchscreen. These gestures would be difficult to discover if it weren’t for the visual feedback the user receives when tenuously trying to slide his or her finger horizontally for the first time—the Home Screen slides, just as one might slide a piece of paper across the surface of a desk with one finger. It will also snap back into place if the user didn’t apply enough “force” when performing the gesture, as if the page is attached to a rubber band keeping it in place.
Apple thus mapped fundamental tactile actions and feedback from everyday life, such as sliding an object or plucking at a rubber band, to the Home Screen’s movement controls. This lets even toddlers quickly discover how to use the Home Screen effectively.
One the most well designed products I have encountered is my electric kettle. It excels in feedback and a standard conceptual model.
As one fills it up the pot there is a small gauge on the side that shows how much water there is in the pot in liters as well as a horizontal bar labeled “max” at the top of the gauge to show how much water it can hold. (Feedback)
There is a button at the top of the pot which opens the lid which is located where many other products have their lid opening buttons. (Conceptual Model, Visibility, Mapping)
At the bottom of the pot there is a switched near the power cord labeled on and off with the corresponding colors green and red for on and off which these colors appear in many other electronics. (Conceptual Model, Mapping)
When the kettle is on there is a light that shines through the water gauge and the kettle to show that the water is heating up. (Feedback)
When the water comes to a boil the kettle will automatically turn itself off and there is a bell that dings when the switch flips back to its original position to inform the waiting user that the water has boiled. (Feedback)
There’s no device I use more often than my Android phone.,
As far as design goes, however, it isn’t always necessarily ideal. I should qualify this in that I have an HTC, which runs their custom UI “Sense” over the top of Android, so some design concerns may be a result of that. The first time I picked it up I didn’t immediately grasp the methods of switching between each of the seven home screens. I understood that you could slide between them, which was sometimes irritating and time consuming to get all the way from screen one to seven. However, there is an alternative method in which pressing the home button will bring up a preview of all seven home screens and allow you to select one to load. There is no clear way to learn this shortcut besides accidentally activating it and noticing the outcome. As a result, the feature isn’t clearly visible and thus the mapping of how to quickly change screens is non-intuitive until the trick is learned.
Beyond that, with the first use of the phone it was not immediately obvious how to access apps installed on it. To reach the app menu, you need to press a button next to the ‘phone’ button which isn’t labeled, it has only a picture of a triangle inside a circle. When pressed, it pulls up a menu full of apps which was ostensibly hidden below the screen. But why a circle with a triangle? To me it isn’t visible at all why apps would be hidden behind a symbol of this type.
All in all it quickly becomes clear by trial and error how to do basic tasks such as these, as Android is quick and provides enough feedback that helps out. But before a few key features are discovered, it could potentially be a frustrating experience.
As a photographer, I have used dozens of different cameras. When using a digital camera, it could be a point and shoot, or DSLR, or even a camera phone. I expect certain functions to be readily and easily available. With so much competition in the camera market and manufacturers coming out with new ones with features we don’t need or ever use, they push back the important features to a secondary level in design.
Manufacturers come up with settings like scene selection and make these useless features as physical buttons thinking that we will use it almost as much as the on off switch. Then they burry very useful things to actual photography like exposure control and white balance into a very difficult to use menu system which is even further slowed by the stupid animations and sometimes terrible touchscreen (buttons are tiny to press and not always work when touched).
Switching between models of point and shoots, even if they share the same manufacturer, requires a tedious learning curve. Cameras need to be designed simply and you can start shooting pictures right away. Why would we want to get stuck in an idiotic setting menu which locks down the picture taking capabilities of the camera until we figure out how to exit that screen???
Cameras in the 80s were very simple and lacked the unnecessary electronics (obviously no digital yet). The shutter button always took a picture, you had auto-exposure if so desired, and could change important things on the fly. Aperture control was a physical ring on the lens, and shutter speed was right on top next to the shutter release button. New digital cameras need to be like this. Boot time should be instant (which most cameras have), and menus need to be simple and totally lag-less. The shutter button should always exit to the picture taking mode instantly. And controls like exposure compensation should always have a dedicated button, same with flash on/off.
My doorknob.
First, let me note that my doorknob here is probably a very ‘normal’ american doorknob you guys are all used to by now. It’s very different from Dutch doorknobs though.
This is one of those ’round’ doorknobs. It’s the door to my room, that leads to the kitchen. Two others share this kitchen. From the kitchen there’s another door to the hallway. My mental model is this: if I turn it to the right, the bar moves to the right. If I turn it to the left, the bar turns to the left. The same goes for the key & keyhole: If I move the key to the right, the bar moves to the right, if I move it to the left, the bar moves to the left.
However, this door has a system where you also lock the door by moving the doorknob. While the door is open, you turn the knob on the inside away from the doorpost. You then close the door behind you and you won’t be able to open it without a key. To open the door, you move the key towards the doorpost. I have no idea how this system actually works, but I always wriggle around with it until I find I achieved the result I was looking for.
Apart from how it actually works, I think it’s incredibly stupid that you have to think of taking your keys before leaving the room. You use this door all the time, to go to the bathroom; kitchen; etc. Therefore, I don’t connect this door to the thought “did I take my keys?” and knew I was going to lock myself out as soon as I arrived. It only happened once so far, and when I asked the residence manager that opened my door for me how often this happens, he said on average someone locks himself out about twice (!!!) a day.
For this discussion, I will consider VIM. I personally consider VIM to be one of the worst designed products from an HCI standpoint that despite this fact is extremely widely used (I myself use it almost daily). The design of VIM is pretty much the polar opposite of the way things are commonly designed now in that it has a massive learning curve with basically no tutorial and thus it takes a long time for users to create a good conceptual model of how to use it. It provides thousands of affordences, but doesn’t let the user know any of them! Further, it only gives “feedback” in the sense that either the user’s desired action took effect or something different the user did not intend happened onscreen – with new users there is often a vast gulf of execution. On the other hand, once the user has (through time reading a manual and by trail and error) gotten a good conceptual model, they can use VIM very efficiently and it becomes an excellent tool. Designing expert systems like VIM has gone out of fashion with more of an emphasis on tools that everyone can immediately understand and use, however its continued use shows that sometimes you can have a useful tool even if its design provides little information to the user that enables the user to create a conceptual model.
I use facebook everyday. I think that it has or had a good conceptual model. After every update there is a large number of complaints. Although I use facebook everyday this latest update still has me looking around for features or things I did before. Usually when you do a status update or upload a photo it shows in your news feed right away right on top. Now you have to look at the side bar thing to find the newest updates. the side bar kind of acts like a feed where you can see updates no matter what page you are on. I think the developers thought that this was a good idea to add but it has cause problems for me.
A household object that I am wary of using (though it figures a lot in my daily life) is the Microwave oven.
The conceptual model is good enough, we know how it works, put food in, press button, food comes out hot. In my head there should be a button that lets you set the power level. That way, if you’re auto defrost button is broken(or nonexistent), you don’t need to risk cooking half the chicken(which actually happened) as you defrost it manually on whatever power level the oven is set at. Half the buttons on it are not very helpful, the beverage button gives you options that say ‘1’ , ‘2’ etc . What does 2 mean? Two cups, or double some obscure quantity? I’m not sure! Also, the only instructions frozen pizza boxes give you is ‘set microwave at high power’, the result of which is I have to stay on watch so that my dinner doesn’t explode even if it takes 5 min or more. The cherry on the top is the ‘transparent’ screen, which should allow me to see my food but is really only translucent and has some white spotty pattern of sorts across it, so I have to squint too, or just open the oven every 30 seconds to make sure nothing burned.
Visibility and mappings, I’d say, fail in this contraption.
When it comes to affordances, I can’t discount the role that videogame controllers have when playing. Once it is communicated to the player that game is of a certain genre there are control schemes that those games are required to follow. Perhaps one of the most rigid of these control schemes is that of the First Person Shooter. The xbox, playstation, and Wii all have controllers with triggers. During a first person shooter this is naturally the button that people press to fire because of the affordances that the controller conveys. Games that do not use these affordances in the way they are meant to be used are usually considered have bad control schemes.
Games, in my opinion, have the most to gain from the ideas presented by Norman. In fact, most successful games follow these ideas conventions already. Today, if the HUD does not convey the information needed players often become frustrated. If the player doesn’t understand that they lost life (by being hit by a bullet, or walking into an enemy), they won’t understand why they keep dying. In this case the information must be presented visually in a way the players understand. The feedback must also be instantaneous so that the player can determine what damaged them. This is perhaps why elements of good UI’s are stolen from one game and used in another.
In addition to good UI and feedback, games also rely heavily on the player’s understanding of Genre. I would argue that a Genre is a great example of a conceptual model. The first time a player plays a game they usually determine if it’s a Sidescroller, FPS, RPG, RTS etc. Once they understand what they’re playing they continue to draw on their prebuilt conceptual model in order to play it successfully. However, Games that stand the test of time are usually the games that take a preconceived conceptual model, and add a new form of interaction. Portal, for example, too the conceptual model of an FPS but added the ability to warp from place to place instantaneously using portals. Braid takes the conceptual model of a sidescroller and adds the ability to turn back time.
I frequently use a small lamp on my bedside table.
As far as feedback is concerned, it is quite obvious when the lamp is functioning correctly. When it is active, I am able to see the lamp, my table and just about everything else in the room clearly, and then it is inactive I am unable to see anything.
The conceptual model of the lamp is very straightforward. Points of interest include an exchangeable light bulb, detachable lampshade and on/off switch. The switch maps to the activation/deactivation the lamp.
I ride the bus to campus every day because I unfortunately live quite far away from all of my class buildings. Figuring out which bus I needed to take was quite a process, before they integrated Google Maps.
Next time you need to get somewhere, but you don’t know how to get there, try using this: http://trip.cityofmadison.com/
Then utilize Google’s implementation: http://www.cityofmadison.com/metro/google/index.cfm
The real improvement is in visibility. The different steps to transfer buses need to be clearly illustrated, because getting on the proper bus is so vital to a good experience. Google’s implementation allows for quick changes and feedback, while affords users access to everything Google has to offer with a few mouse clicks. If I wanted to research different businesses with the Madison Metro website, I would have to open a new tab in my browser and probably use a search engine (Google?).
An object that I think follows Normans principles very well is the program that I am currently using to write this post… Microsoft Word. Over the many iterations of Word it’s user interface has improved greatly. The main new feature that I think adds a lot to the usability of the application is the “ribbon”. There is now a very pretty layout of all the things you can do inside of work always at the top of the screen. Inside the ribbon there are very simple and easy to understand images that represent the tasks you can do. Two great examples are a simple picture of a photograph that represents the insert picture button, and the Picture of a bar graph that takes you to the create chart window! These images allow me to quickly get the general idea of what that button will do, and if I want more information I can simply hover over the button and it will give me a brief explanation of what this button does!
I want to share with you 3 problems I had with my new HTC Android phone. Since I’ve played around with my friends’ iPhones and iPads before, I expected to have similar Concept Models on this one. But,
Situation 1: “How to reset the phone to its default settings?”
We’ve got 2 identical phones shipped in the same day, and I wrongly set up my Google account on my wife’s phone, and vice versa. Our phones began to synchronize and copy all contacts with their email addresses and phone numbers from our Gmail accounts to the mobile devices. When I tried to reset the phones, there’s no “reset” button or icon that could be easily found.
Situation 2: “How to move apps or widgets from one desktop to another?”
My wife accidentally moved her clock widget to another desktop. Since there are totally 7 desktops on the phone, and she still wanted the clock to be centered on the main desktop, I had to figure out how to do that. And the user manual did not help.
Situation 3: “How to do ‘copy & paste’ on an Android phone?”
On computers it’s easy to use a mouse to select a chunk of info, copy it, and paste it somewhere else. On my Android phone, I still haven’t figured out how to do that or if that is doable.
From Visibility perspective, it seems that touch screens are designed to be user-friendly, so every movement is natural. And there should be no Mapping problems because users simply use their hands and fingers as tools to tap, drag, expand, shrink, or tilt. However, I had to look for online resources for some Feedback and suggestions to solve problem 1 & 2. I guess the Affordances of mobile devices is great, but it is definitely not 100% intuitive and visible yet.
Vim.
This is a large part by design, but for someone who doesn’t already know how to use it, it makes no sense. Its feedback is cryptic at best, yet gives no intuitive instruction as to how to do anything.
However, if one does know how to use it, the user is free of the clutter of a no-longer-needed intuitive/instructional interface. This gives the user more space on the screen with no distraction. Plus, the ‘unintuitive’ controls, once mastered, are extremely efficient.
I would like to talk about my digital camera. Focusing on taking the
picture, there is actually a good affordance. There is only one way to
hold it comfortably, in which the index finger naturally puts on the
shutter. The camera has different modes such as scene, aperture-first,
shutter-first, etc. Each mode has an icon on the corresponding button
indicating the characteristic of it. This is an example of good
visibility. The mapping is also good regarding taking pictures: you
move it and the image you can see from the screen moves accordingly,
which also demonstrates the good feedback things. There is a rocker on
the camera to control zooming in or zooming out. At first you cannot
figure out whether to pull it to the left or to the right to get the
scene zoomed in. It’s not a natural mapping. However you learn it very
fast with the good feedback on the screen. The conceptual model
(still, only focus on taking photos) is just press the shutter and the
image will be displayed on the screen, as well as stored in the SD
card.
My item I use almost every day. A remote control.
Considering an almost complete reliance on this object, I am surprised it has not conformed to Norman’s principles very well. Every remote control I have encountered seems to have a different button mapping. Channel and volume buttons always seem to be in a different place or position and their configuration seems to place them parallel or perpendicular with no real conceptual consistency.
An older remote I had placed the numbers and button functions directly on the buttons. This worked fine until after some use all these characters rubbed off. I was left with a remote that only I could use because I remembered where the buttons were. Anyone who tried to use the remote would have no idea how to use it without conceptual consistence or visual representation.
The only reason I can conceive why this device is still around is it’s success with mappings and feedback. We use a remote control so we can stay on our couch and save about 5 seconds from getting off the couch. It’s instant feedback is the greatest lure of the remote. I know of people who will spend more time looking for the remote than to stand up and use the TV controls. This immediate gratification seems to supersede continued design complaints.
I’ve always been in love with my humidifier, especially in dry seasons. First of all it has great visibility, as it’ quite obvious where the moisture stream is coming out of, it has a round plate with a arrow and notation above it showing you can turn it on and off by twisting. It also has a good conceptual model as when I try to refill the watertank, the tank has a uniquely designed matching shape with the bottom part, makes it very easy to operate on even at the first time. The beak shaped moisture export conveys a good feedback mechanism, it makes the moisture stream compressed in the export that it looks white and very easy to determine the volume of stream. Good mapping is also an element that makes the humidifier a user friendly product, more specifically there’s a array of dots aligning from smallest to largest indicating the volume of moisture stream, when you twist the indicator towards the largers dots, naturally we expect to get bigger volume, and that is what happened.
Comments on this entry are closed.
{ 2 trackbacks }