Project 2 Part 3: the Final Oblivion

[to be expanded upon]

We forgot about the 2-page summary as well as the accompanying product: although we never managed to turn those two required pieces in on time, I will post them here in this post.

I am also posting our rough prototype: it is still relatively buggy, and we were never able to really discover how to incorporate our idea of having resizable windows. Nevertheless the keyboard shortcuts work:

tab- shows/hides menu

q- a shorcut to the Quests page

m- a shortcut to the Map page

i- a shortcut to the Inventory page

s- a shortcut to the Magic (spells) page

p- a shortcut to the Personal Information page

Coming Soon: A link to the Flash Prototype, in-depth information into our intentions, class commentary, late 2-page research report, late accompanying product.

Posted in Projects | Leave a comment

Project 2 Part 2: the New Oblivion in a Flash

After feedback from the class and some collaboration with the other group, we decided to specifically focus on improving the Quests page: all three subgroups agreed to work on improving the Maps feature, as well as redesign the overall menu system according to their own ideals.

I thought about menu systems from other games I’d played and I noted that the more intuitive menu systems would list the main pages to one side. In certain games a menu listing the various other pages will first pop up: you would then hit a link and you would be taken to the respective page. In other games, particularly console role playing games, hitting a button would take you to a window listing the pages down one side with the current page in front of you.

In Pokemon Emerald, hitting the Start button on the GBA makes the menu slide in from the side. You can then choose to view one of the pages. You will then be taken to the page, which takes up the whole window. Pressing ‘B’ for back returns you to your game.

In Kingdom Hearts, the menu is listed to the side: choosing an option takes you to the page with its submenu. If you chose “Items” in the menu below, you would be taken to the inventory, and a submenu that gave you further options would appear. Pressing “O” would take you back to the main menu.


Taking the main menu idea, I decided that once the player hits the “Tab” key the menu would slide out from the right with the choices listed legibly.

Hitting the “Maps” button or pressing its hotkey M would bring up the following window: the Map was redesigned so that players could now zoom in and out of the map. In the original game players cannot zoom in or out, and to find a location players would then have to pan across the screen to find a location. Users can also mark locations for later reference. For example, you might have found a clump of rare plants that you can use for a health-healing potion.

Quests now has its own page and can be accessed either by the menu or by the hotkey “Q”. Though I didn’t play enough through Oblivion to get into guilds, my partner stated that managing all the quest lines later becomes difficult. Quest lines are basically a series of related quests that can make up a sort of storyline. The very first quest line you complete, for example, are the Tutorial Quests that guide you through theย  first dungeon. There is apparently no way to organize your quest lines later, meaning that tracking your progress on a particular questline can get messy if you have several running at once. Almost all quests come from a guild, which you join later. For this reason we decided that quests should be further divided according to what guild assigned it to you. Quests would then be listed as questlines: clicking a questline would then show the quests you have completed/ are working on under that questline.

Classmates who were familiar with the game either didn’t like the concept of organizing quests by guild or appreciated it: Oblivion is a game with many different angles people can play it from. For example, one classmate mostly used spells and magic: another freely wandered about and didn’t care much about quests. I personally also had little interest in quests and was more interested in leveling up/ finishing the main storyline. Those who did do quests, however, declared it would be useful.

Many people appreciated the map markers; the fact that they could be labeled and that the user can place as many of them as they want on the map were pluses. Classmates noted that we should remember to put some indicator at the ends of the zoom-bar to tell users which way to slide the bar to zoom in or out.

It was noted that the light text on dark is difficult to see, and that the additional lines on the quest page were unnecessary. The font didn’t help with the lack of legibility, and the new design took away from the antiquated feel of the original game. We decided based on the feedback to return to a look and feel more similar to Oblivion’s original menu design.

Posted in Projects | Leave a comment

Project 2 Part 1: Obliviating Oblivion’s Flaws

I personally found this project difficult to do, since I had another group project running at the same time that took up much more of my time and energy than I wanted… but that’s no excuse. In the end we were able to make a somewhat-buggy-but-still-working prototype courtesy of my partner’s amazing actionscripting skills that I believe helps alleviate a lot of the original game’s obscure and difficult-to-navigate menu design.

the Original Game:

Unlike most of the members of the original group of 6, I had never played Oblivion before, which I took to be a big plus for me: I could examine and consciously note any issues and setbacks I had while attempting to start and play the game. When you start up the game you are presented with this innocuous screen:

Press “New” and you’ll enter into an opening clip introducing you to the game’s backstory: frankly the ‘realistic’ graphics creeped me out, since they were bordering on ‘uncanny valley’ for me. I’ve linked a clip from the opening below:

After the cinematic ends you’ll find yourself at the character creator: frankly I found this part confusing as well, and since I didn’t really like the realistic look of the characters, I spent a lot of time trying to navigate the menu to create a somewhat-appealing character. It took me a while to realize I had to click the top “Enter character name.” text to type in the name. If you’re not picky, though, this part of the game should be relatively simple.

You are then taken to a lovely 1st-person-view of a cell you apparently got yourself into. You also see four items at the bottom of the screen: three bars, a fist, a heart and a compass. The compass is clearly self-explanatory and even non-gamers should recognize it immediately. The three bars are easily identifiable if you are familiar with gaming: red bars are conventionally health meters that tell you how much health you have: blue bars are usually magic meters to tell you how much magic you have left. I had no idea what the green bar was. As for the fist and heart, I didn’t learn what those stood for until much later into the game: the fist icon represents what weapon you have equipped. Since you start off with nothing, your only weapon would be your fist. If you equipped a sword, that fist icon would change accordingly into a sword icon. The heart icon represents what type of spell you have equipped. By default it is set to a healing spell so you can replenish your health meter.

From messing with the keyboard you eventually learn that WASD are the directional keys to move yourself around: moving the mouse moves the direction you are looking, and clicking the mouse makes you punch whatever is in front of you. E is your jump button, and you’ll see later that when you place your cursor over an object you can take, a red hand appears. Clearly this means you can do something with the object, and with a bit of exasperated keyboard-hammering, you’ll learn that Spacebar lets you pick up the object and put it into your inventory.

While you’re fumbling around in your cell trying to figure out the controls, the people in the cell in front of you will talk to you (albeit not very nicely). Whatever a person says will appear as text at the bottom of the screen, a feature I liked, since I’m more of a visual person.

Your friendly neighbor will later let you know that the guards are coming: when the guards do come, they will ask you to move over to the window (using the WASD keys).

Wow, such nice people…

The emperor from the intro video will appear and talk to you (introducing you to conversations). He and the guard will then Magically open the wall to your right and disappear through it. Follow them and along the way Quest Tutorial windows will pop up to help you learn the controls better.

The first Quest Tutorial window to pop up at me was after I hit the mouse-button several times, punching needlessly into thin air. It was here that I learned that the green bar basically represents Fatigue, or how much energy you have left for fighting. If you run low on health or magic, Quest Tutorial windows explaining those meters will pop up as well.

Once you begin following behind the guards and assassins a rather important Quest Tutorial window will pop up. This window explains that you need to hit the Tab key to access the Journal, aka the Menu. The menu holds basically everything you need in the game: unfortunately the menu isn’t very intuitive and requires the Quest Tutorial windows to explain everything.

After grabbing some weapons and opening your Journal/ the Menu, it will explain what the fist icon at the very bottom is for. At first, I didn’t understand what it meant by ‘fist icon’ and looked for something that looked like a fist in the five paper tabs located under the page. It took me a while to understand that the bars, compass and two icons at the bottom were also menu buttons.

If you accidentally skip over a Quest Tutorial window, you can read it again later in the Quest log. However, if you don’t know that the Quest logs are hidden in the Map menu, you will struggle quite a bit in the beginning, like I did. Notice how the gold brackets are around the compass now: this means that you are at your Map menu. You then have to search through the paper-tabs to find the page that lists all your quests. I didn’t find out about the Quest logs until much later, after I had long escaped the first dungeon.

My main Qualms with the Menu:

I understand that the iconographic symbols on the tabs and the lack of words are supposed to add to the old, ancient, antique feel of the game: however, it made navigation of the menu extremely difficult for me at first. The fancy icons did not give me a clear idea of what tab it represented: for example, what does a hand holding a cup have to do with a cup? It took me a while to realize the cup icon represented a trophy being presented to you. I later found it more convenient to just memorize the location of all the tabs instead of relying on the icons. I don’t think labeling the tabs with words would take away from the feel of the game.

I also don’t think that making the meters, two icons and compass on the bottom brass bar serve two functions was a good idea. The items on the bar already have the function of telling you your health/magic/fatigue, equipped weapon, equipped spell and location. Making these items also serve as buttons just seems lazy and unintuitive: I usually expect buttons to be evenly sized, which also threw me off. Creating a separate side menu you can turn off or on sounds more convenient and intuitive to me.

Lastly, I disliked the fact that quests were located inside the map menu. They could have easily given quests their own separate menu, and in fact, most games usually do. It feels like they didn’t want to add a fifth icon to the brass bar for aesthetic reasons, wanted the Map menu to have five tabs like the other menus, and then stuck Quests in. I also couldn’t understand why there were 3 tabs for the quests when they could have easily concatenated everything into one tab. I believe that in this case a strong desire to stick with a certain look and feel to the game blinded the developers from making good, intuitive design choices.

Our Improvement Ideas:

My partner and I drew up about 20 ways of improving Oblivion’s interface. We then shared the ideas with members from the original six that decided to redesign Oblivion. Our main concerns were with labeling and making sure the user would be able to navigate themselves through the menu once they pull it up with the tab button.

Many of the original sketches are difficult to see… I really need to stop using pencil and just be bold and use a Sharpie from the get-go. I also dislike how all 20 images are just spread out: I may try to compile them all into a Flash later. It should be easier than compiling 100 images together! It might also be better to type up our ideas first, print them out on half-sheets, then draw out our sketch on top of that. ๐Ÿ™‚

Posted in Projects | Leave a comment

Project 1 Part 5: the Final Product

Using the feedback we received, we created a final prototype, as well as a use-case video detailing how to use the machine and how the machine would operate:

The special touch-screen-glass-display we originally had in mind was replaced with a regular glass display: to make up for the loss of the screen, we’ve added a tiny little screen below the buzzcard-scanner/ bill acceptor, like those seen in most conventional vending machines. Our vending machine is on wheels, for mobility, with rounded corners for safety and aesthetic appeal. Buttons are located beneath the drinks and the machine is a bit squatter, to accommodate shorter people. Selected drinks are still lit, as with the original design, and lit when it is placed in the receptacle. As for how the machine goes about retrieving the drink, a flexible cup-holder will rise up to where the drink is, where it will then take the selected drink from its row. The cup-holder then moves down, out of site, where it then translates the drink onto a platform. This platform comes with a weight-sensor: if the sensor senses no drink, the machine assumes that it is jammed and will alert the reader, then returning the user’s money. If the sensor senses the drink, the platform then DRAMATICALLY rises into the receptacle:ย  the drink is then lit and a sound issued from the machine to let the user know that their purchase is ready.

We also gave a presentation on our research, what we learned and the various prototypes we ran through before reaching our final design. You can access our presentation (which is a Flash) below:

Posted in Projects | Leave a comment

Project 1 Part 4: Prototyping Our Improved Vending Machine

According to our last critique session with the class, there was some concern with the right-to-left and left-to-right idea. There was also some concern concerning space. We went ahead and incorporated our ideas into the vending machine prototypes you see below: there were originally 5, but one got destroyed.

Other ideas we incorporated into the design were a coin-basket, a proxy-based buzzcard reader (users usually fumbled with which direction to swipe their card: this would alleviate that problem), and wheels for mobility. What you see below represent the front of the machines: we had a separate box-with-wheels that we would then paste the following designs on top of.

Many people had a difficult time learning that the actual glass display itself is a touch-screen (a few had to wrap their heads around the concept and questioned whether it was possible yet with today’s technology). Though I wasn’t too happy with it originally, we’ve decided that for our final idea it would be a wise idea to include buttons underneath all the drinks: it’s true that it will take away from the appeal of the design, and that short people will have difficulties reaching the very top (another concern a classmate raised), but the direct connection customers have with the selection they make will still be there. Many people also expressed that they disliked the assembly-line approach, and preferred the familiar approach of having the display on one side and the controls/ dispenser on the other. People preferred their controls to be on the right. In the long run, users were more comfortable using a machine that looked familiar to the ones they were used to.

There was also a really nice, snazzy-looking white design with rounded corners: many people found it the most attractive of the five, but unfortunately it got a bit mangled before it could reach the scanner. It was fairly close to the original rough prototype and was the first one made. Perhaps I’ll remake it when I have time.

Posted in Projects | Leave a comment

Project 1 Part 3: Idea Selection

For this part of the project my partner and I met up and looked through the 50 ideas we had. We noted that many of the 50 ideas fell into categories, such as:

– Utilizes a screen of some sort

– Adds lights/ sounds for feedback

– Increases Safety

– Utilizes wireless technology

– Helps the less fortunate

– Changes the way people make selections

– Miscellaneous

We ultimately decided to utilize concepts from the first three groupings: a screen, light/sounds for feedback, and helps the less fortunate.

There was some light confusion regarding how we were incorporating the screen into the machine. What I had in mind was to make the actual glass display double-function as a touch screen: in other words users would look through the glass to find a product they wanted, then actually touch the glass where the product is. Later during user testing we learned that many other people were also confused by this idea: there was no intuitive way to tell the users that the glass display itself is a touch screen. Although the idea was cool, it did not give users an intuitive idea on how to use the touch-screen-glass-display. In the end the screen was taken out and replaced with little buttons underneath each drink.

Light/ sounds were easily incorporated into the machine: we decided that upon the user choosing a drink, the row where the drink is stored will light up, giving the user visual feedback. Once the machine has vended the drink into the receptacle, the machine will beep and the drink in the receptacle will be lit again.

Our original idea was to make vending machines easier for handicapped people to use. We therefore made a very rough prototype of an assembly-line inspired vending machine, where a handicapped person would be able to pay, select a drink on the touch-screen-glass-display, and then grab the drink, moving from right-to-left. We also decided that the vending machine should donate a percentage of its proceedings to charities, and that it should advertise that it did so. We would later indicate where such advertisements would be located in pink on our later prototypes.

Our very rough prototype:

Now imagine a person in a wheelchair, moving from right to left in a smooth, convenient line. ๐Ÿ™‚

Posted in Projects | Leave a comment

Project 1 Part 2: 50 Ways to Improve a Vending Machine

Sorry for the exceptionally long delay in my project updates: to tell the truth I’ve been wrestling with a way to present the 50 ideas my partner and I sketched up without spamming the whole page with 100 little squares, and Flash kept freezing on me when I attempted to load and use the pictures. Thankfully I managed to forcefeed all the sketches into Flash in the end:

50 Possible Ways to Improve a Vending Machine:

I’ve tried to embed the Flash file into the post, but apparently WordPress doesn’t allow Flash to be embedded for security reasons. The image resolution in the Flash isn’t particularly clear, so it’s hard to read the text: I plan on replacing the scanned sketches with digital copies and typing up the descriptions, so that they’re easier to read later. For now I’ll provide a list of the 50 ideas:

  1. Light-up Bottom Dispenser
  2. Omni-Directional Bill Scanning
  3. Machine says “Thank You for your purchase!”
  4. Credit/ Debit Card Reader
  5. Hand Sanitizer
  6. Easy-to-Replace Parts
  7. Cellphone Pay
  8. Braille on the Buttons
  9. Advertised Charity Donations
  10. Wireless Transmitter
  11. Bottom-Heavy (for safety reasons)
  12. Cartridges for Loading
  13. If VM is Outside, a Fan & Shade
  14. Transportable (+mobility)
  15. Rounded Corners (Child Safety)
  16. a “Game”
  17. Machine-About-to-Tip Alert
  18. Drink Popularity Tally
  19. Status Bar
  20. “Jackpot” for every nth user
  21. Video Advertising (requires Screen)
  22. Jam/ Out-of-Order Notification
  23. BuzzCard Scanner
  24. Drink Information (Nutrition Facts)
  25. Hands you the Drink
  26. Shelf next to Machine
  27. Easy-Unlock on Back
  28. Accept Larger Bills
  29. Frequent User Point System
  30. Airlock Selection
  31. Drink/ Snack Combo
  32. Facebook Connection
  33. Weight Sensor (Be sure drink has vended)
  34. Push Button
  35. Wheelchair Accessible
  36. Drink Suggestions
  37. Coin Basket
  38. Audio Cues
  39. Four-person Hub
  40. Variety
  41. Multi-Ordering
  42. Pre-Order
  43. Touch Menu
  44. Visibility
  45. Consistency in Audio Cues
  46. Swiveling Vending Machine
  47. Chosen Drink is LIT
  48. Bill Crisper
  49. Self-Fixes Jams
  50. Pay Before OR After
Posted in Projects | Leave a comment