Save Button? What Save Button?Why Software Applications should behave like Video Games

Written for the Design For Use Blog

I recently had the opportunity to play Pitfall on the Atari 2600 (a game 5 years older than I am). To my delight, I was reminded of a time when video games didn’t offer “continues”, “save points”, or even passwords! There was only progress and failure (usually death). I had three opportunities (lives) to accomplish as much as possible before starting over, from scratch.

Since 1982 there have been significant advances in the technology used to develop video games. With the introduction of Internal Hard Drives came the ‘Auto-save’ feature. In contemporary Games, Auto-Save functions to (nearly constantly) save the user’s progress up to the point of failure. Sadly, failure (death) in most games which feature Auto-Save is now inconsequential. It is too easy to pick up where you left off, rethink your approach and then capitalize on some sort of newly acquired knowledge.

In fact, auto-save -- and the ease of overcoming difficult challenges -- actually creates a problem for gamers. They want to rescue the princess or triumph over evil…but they don’t enjoy it when it’s too easy; gamers like to fail.

“Failure is central to the experience of depth in a game, to the experience of improving skills. Studies support the idea that growth, the experience of learning, of adjusting strategies, of trying something new, is a core attraction of video game.”
Fear of Failing? The Many Meanings of Difficulty in Video Games

What Gamers have to say about auto-save

“I enjoy Autosaving because I can put down my controller and go do something else at any time. I don’t have to worry about reaching a savepoint or having to re-tread pre-trodden ground.”

“Today's games also offer embarrassingly little customization options for saving games. I want more save-file control in-game and less automation.”

“My biggest hang up are games that create a new file location every time they auto save as opposed to merely over writing it. However sometimes it's a life-saver to have at least one secondary load location.”



It’s important to acknowledge that playing Video Games and working in Software Applications are two entirely different animals. A Game, by rough definition is “The voluntary attempt to overcome unnecessary obstacles” (Jane McGonigal). Work, on the other hand, is defined as “exertion or effort directed to produce or accomplish something” (dictionary.com). It’s also worthwhile to recognize that both activities yield different Personas with unique short-term goals. According to Michael J. Apter’s reversal theory, people seek low arousal in normal goal-directed activities such as work, but high arousal, and hence challenge and danger, in activities performed for their intrinsic enjoyment, such as games (Kerr and Apter 1991, 17).

In addition to the primary differences between Video Games and Software Applications, the saving mechanisms of these two interfaces also varies. Here are two scenarios that have caused me a great deal of frustration: 

Scenario 1: I am working diligently on a project that needs to be completed by the end of my workday when: my computer freezes! All attempts at recovering my recent progress since my last save fail. I now have to manually re-do the work.

Scenario 2: I am making major edits to an open document when: I notice that I have made a critical mistake. I Ctrl + Z (undo) as many times as possible in hopes that the system has saved a state that benefits me. No dice.

When we fail while using Software Applications for work, we aren’t having fun. Losing progress is irritating, it’s stressful and a waste of resources. If succeeding in a game has become too easy, why is recovering from error while using Software Applications still so difficult?

Blue-sky Thinking: ideas for future functionality

In an effort to improve the user experience and overall satisfaction with software programs, there are many ways to improve the save capabilities. Below are a few ideas I played around with on paper while writing this post.

Retain “Save” and “Save As” Functionality (Soft Saves & Hard Saves)
Soft Saves are files being saved to the same location with the same name. currently realized as “File>Save”. A hard save is any time when you choose to save an open document as its own file on your computer. This is currently realized as ‘File> Save As’.

Introduce Limitless “Document States” (Auto-Save)
Regardless of whether you are working on a project which is an original or duplicated version, the software program should retain a history of user actions since the creation of the document. Users should have the ability to go back, all the way back, to the beginning. For example, a MS Word document could create invisible background data attached to each document, storing an unlimited number of user actions.
When creating a new document, Users should have the ability to enable or configure some sort of auto-save feature. It would be nice to have the option to specify the frequency of auto-save based on the system’s recommendations. If my hardware specifications are not blue-sky, I should be able to adjust the frequency according to the system or simply disable the feature. The settings for an auto-save feature should also be adjustable at any moment while the document is open. Think of this like an unlimited number of Edit>Undo, or Adobe CS Actions Window.

Show a Timeline
Another way to improve the auto-save experience in software applications is to include a timeline window or panel where users can review the changes they have made. This idea is half realized in Adobe CS within the Actions window, but it is not as useful as it could be. An auto-save timeline should also be treated with actual frames of the states the user has created. It would be gratifying to see some sort of iconography where the user has performed a Soft Save or Hard Save.

Finally, I would like to acknowledge that workflow, like gameplay, has come a long way. As with all domains, there are still rich user experiences yet to be designed, innovation not yet realized and many problems that have gone untouched or unnoticed. I feel strongly that Games and traditional UX medias have a lot to learn from each other. Moving forward, there is value in maintaining distinction between the two. It would be foolish, however, to dismiss Games as mere Child's Play just as it is equally foolish to assume that great things cannot be born in a word processor. Here's to hoping Work becomes a lot more fun, and Games a lot more stressful. Cheers.

Written for the Design For Use Blog

Collateral Designs

"I need some useful and buzzworthy collateral to hand out at a conference next month. The audience is tech/development oriented so if you could also make it relevant to them that would be great" 

Here's what I came up with

Producing Better Facial Composites for Police Use

World of Warcraft players call them 'Toons', Nintendo fans probably have a 'Mii' but the rest of us are more familiar with the term 'avatar'


These digital representations of one’s self are commonplace within the video game industry. Players customize the physical features of their avatar as they see fit. The game developers probably expect players to render a true-to-life self-portrait but what often happens is quite the opposite. Players choose to create an avatar they feel is a ‘better’ representation of their self. They exaggerate, enhance or completely re-envision their self-image. Customizing them is a significant part of the overall experience.




I read an online news article this morning that featured an image released by the Michigan State Police. The image was a facial composite of a man suspected in connection with a three-state serial stabbing spree. Let’s take a look at the sketch and a photograph of the arrest suspect.


Now, let’s compare the achievements of the sketch vs. the photograph. The sketch simply depicts a male with facial fair and a hat. The sketch doesn't depict an ethnicity, eye color, hair color or any of the correct facial features.

It's about time we ditched traditional police sketch artist. According to Wikipedia, “the FBI maintains that hand-drawing is still the correct method for constructing a facial composite.” What if, instead, they utilized the system of avatar creation from Video Games? Victims/Witnesses would digitally construct features of criminals without having to wait for the render by the sketch artist. These digital composites should not be as simple as Nintendo Miis, yet still more complex than XBOX 360 avatars. The user could choose which features to start with and revisit/revise their creation throughout the process.




My name is Verne Troyer, I live in Hollywood, California, and I’m a mage! A master of the arcade.

Design Exercise: daily planner

Last night at Vitorio Miliano's Design Workshop he prompted us with the task of designing a daily planner. The complaint was that Microsoft Outlook's mini calendar doesn't do a great job of displaying both events and time necessary to prepare for them. Daily planners should display a buffering time to help people better manage their time before and after events. For example: if you had a meeting downtown but you know it will take you 5 minutes to wrap-up at the previous event and an additional 30 minutes of driving then the UI should reflect that time needed to prepare for the actual meeting. Here's what I came up with.



This first figure is the framework for our daily planner's data. The upper half is a linear representation of one day's time divded into two halves. In this example, the user has set their normal daily activity from 7 A.M. to 11 P.M. The lower half is a space for daily checklist items.

The first (daily) step to this interaction is entering data into the checklist section. These are tasks that should be completed before the day's end but will not have major ramifications if not tackled before the day's end. In this scenario, our user has to offered to walk the dog for their roommate, take the trash out and call their mother among other tasks.

The second step is entering data into the time bar. Users would reserve blocks (or chunks) of time to represent events. Events should be thought of as highly important tasks that cannot be forgotten or missed. Events, unlike checklist items, must be completed at a scheduled time and in a particular order. The colors used in this example represent different types of events: Blue represents professional/career events, Yellow represents social functions, Green represents personal or family time and Red represents personal development. In this scenario the user has Work starting at 9AM, Lunch with a friend at 12:15, Dinner at 6:15, a graphic design workshop at 6:45 and finally a late night jog with their neighbor at '8ish'. One could see that this user has a schedule conflict: their jog and design workshop overlap each other as represented by blocks. This blocky representation of time allows us to see when we've stacked our time too high with events. Had this user planned on attending a third event at 8pm then another block of time would be stacked beneath the other two events.

The next step in this interaction is entering the last set of data into the time bar. Again users would reserve blocks of time for events; but this time they will determine how much time is needed to prepare for each event. These buffer times should include the amount of time it takes to prepare and travel. These blocks of time are located in the time bar directly above and before the scheduled event takes place. Their color matches the relative event. The buffering block's form is represented as being half solid. Events are represented as solid color because they are non-negotiable time frames. The time it takes to prepare and travel to a scheduled event is subjective: the user could include an extra 10 minutes of travel time but regardless of when they arrive at their destination the event still occurs at a specific time. In this scenario, the user has booked themselves pretty tight with buffer time. This UI also displays to the user that if they should feel like leaving their design workshop to jog with their neighbor, they would have to leave their event at 730. This presentation of time creates an interesting opportunity for people who regularly make brief appearances to multiple events in a single day. It gives them the information they would need to make time-sensitive plans and actions.

In this figure we see what a day in progress looks like. The time of day is just after 10:30 am and the user has completed three of their checklist items. The dashed red line represents the constant of time while it leaves a trail of muted color represented time past.

Another example, this time shortly after 7PM with five items completed on their daily checklist.


Here we have an example of nearly an entire day passed. It's almost 10:30pm and the user is wrapping up their day and checking their daily planner before bed. They've inserted two notes for the day (represented by colored triangles) as actionable items or reminders for the future. We can also see in this scenario that the user didn't manage to take out their trash or get a recipe from their friend, Jillian.

Finally we have an example of a summary of daily notes. This would appear near the end of the day or the first thing to appear the following morning. Daily notes include a list of all incomplete checklist items for the day and footnotes from all events. From here the user is able to automatically include these items into their daily checklist for tomorrow ~or~ delete them.

So there you have it. This started as a simple wire framing exercise sketch turned digital mock-up. That being said this is not the final solution visually as there are more choices to be made and areas to fine tune: but I feel the essence of the interaction is here.

end


Christopher Griego
graphic designer
Austin, TX
portfolio - christophergriego.com

Design Exercise: bus stop UX

In Dan Saffer's "Designing for Interaction" he lists several real-world opportunities for improvement in UX. One of these examples is "waiting at the bus stop with no idea when the next buss will arrive." Well, as I was waiting at the bus stop, with no idea when my bus was supposed to arrive when I came up with an idea: A bus stop kiosk (obelisk) of sorts. Basically the idea is to replace the current road-side signs and replace them with solar powered towers that notify people how soon their bus should be arriving.

How it would work
As the bus passes each stop on its scheduled run, it sends a geolocation signal the next several stops informing them of the bus's current location. This would pair with data taken on average travel time from stop to stop. The result is a system that can produce meaningful information to passengers.

Implementation

• Each bus would need to be equipped with a device that allows digital signaling between stop and bus


• Each bus stop would need to be equipped with a similar device, and a power source (ideally solar)

The Rules

• Depending on the distance the bus is to the actual stop, the light matching the bus number will begin to pulse more rapidly on the corresponding panel


• Any stop the bus passes will reset to a default signal (dim light and very slow pulse)


• A route which is not in service for that day (or at certain times of the day) would show no light at all at each applicable stop
  

So maybe the execution isn't perfect, but the idea is there. I took a stab at this challenge in an afternoon: what would you do differently? What did I miss?

end


Christopher Griego
graphic designer
Austin, TX
portfolio - christophergriego.com

Video Games won't need controllers soon

Skinput



Project Natal



And then this dude





The future of gaming is bright. These UI could serve so many more users beyond entertainment. The Nintendo Wii has already gotten a lot of praise from physical rehabilitation centers: what about motion controlled training for sports events? What if Agoraphobics could practice driving a car using Google Earth data? Soldiers could experience close quarters combat without risk. Rich experiences ahead!


end


Christopher Griego
graphic designer
Austin, TX
portfolio - christophergriego.com

Design Exercise: Nutrition fact labeling

I am not a fan of the current FDA regulated Nutrition labeling. Counting calories is difficult enough but what about the people interested in measuring their daily protein intake? The problem is that nutrition labeling is an overly complicated and insufficient means of 'being informed' about what you are actually eating. Serving Sizes are always unique and never quite accurate as some self serve drinks in cold cases contain 2 servings. Let's think about this for one second. You're at Target, you reach into a cold case for something like a Snapple but never bother to check the nutrition label because you assume that it's healthy. I mean, just look at it, graphics of fruit and labeling like "contains REAL fruit juice"! The sad truth is that these products usually contain a second serving and consuming an entire bottle spikes your blood sugar levels and then before you know it you've consumed the same calories you could've had by eating a healthy snack that would have made you less hungry for a longer period of time.

Below is an exercise (definitely not THE solution) in labeling 4 different foods nutrition levels calories for calorie. Regardless of serving size, for every nibble, bite or entire package you consume-your nutrition level is reflected. The formula follows the FDA recommended intake of Carbs, protein and fats per calorie.
Where 2000 calories = 65gFat(585calories) + 300gCarbs(1200calories) + 50gProtein(200calories)

First we have a nice juicy-carcinogen-filled big mac.
Carbs are slightly low, protein is very high and fat also very high. If you ate Big Macs for breakfast lunch and dinner your cholesterol levels would rise from the fat and proteins but no energy to maintain a healthy heart without carbohydrates. Of course, we already know what happens when you live off of McDonald's food...

Our next contestant is Oreos. Chocolate + lard. YUM.
Oreos are a staple of the vegan diet because they contain so many synthetics they don't include any organic ingredients derived from animals. Oreos are a nice fit for the carbohydrate intake but imagine how weak you would be and overweight...Now think about obesity in American children and diabetes. Any relationship? Also, I read that sales of double stuffed Oreos far surpass regular Oreos nowadays.

One potential problem with this design system is that foods which are generally acknowledged as 'healthy' might have readings which seem off the chart or unhealthy. Below is an example of how Almonds would rate.
There is possibility that a parent shopping for their child might see the high amount of fats as unhealthy. In reality a huge percentage of the fats in almonds are great for maintaining cholesterol levels. Ideally a diet including almonds would necessitate the rest of foods eaten throughout the day being low in fat, high in carbohydrates, and stable protein levels....Wait that sounds like Fruits, Vegetables and Dairy products....

Finally we have Apples.
You can clearly see that apples are a bit higher than the FDAs recommended carbohydrate intake-severely low in protein and fat. This is why you should not sustain yourself on Apples alone. Again, a well balanced diet is key.

What I've learned from this design quickie is that nutrition labeling is no easy task: but it isn't impossible. There just has to be a more effective way of communicating nutrition levels for consumers. My concept excludes the important information regarding Vitamin and Mineral intake so a subsystem dedicated to those would need to be implemented. Additionally I haven't listed a caloric intake so people counting their calories would be in distress! Whole Foods has implemented their ANDI nutrition rating but I'm not a proponent of their rating system. I have to give a huge shout-out to the Nuval Rating system for their work done so far. I'd like to see their identity system flushed out a tiny bit more but their heads are in the right places.

end


Christopher Griego
graphic designer
Austin, TX
portfolio - christophergriego.com