Wednesday, 28 September 2011

Game UI Discoveries: What Players Want


 

Link:http://www.gamasutra.com/view/feature/4286/game_ui_discoveries_what_players_.php?print=1

Game UI Discoveries: What Players Want

By Marcus Andrews
[EA DICE designer Marcus Andrews examines the UIs of several recent games and picks apart what's required for both a novel and player-satisfying interface -- one that serves the needs of the game and its audience.]
I was recently asked to investigate the merits of immersive UI for the potential inclusion in future DICE products. Traditional HUDs live under constant scrutiny in ongoing efforts to make the UI as transparent as possible, allowing the player to immerse themselves into the game.
DICE had already made bold moves into the territory but it's a risky and difficult endeavor, and seldom 100 percent successful. UI is one of the areas where great progress can still be made.
My mission included understanding what "putting the interface in the game world" really meant. The easiest way to describe it to someone is to say "like they did in Far Cry 2" -- but what is it really and how can it be utilized? You can read the analysis of several games and my subsequent final conclusion in the article below.

Terminology

Before reading further in this article there is some terminology you need to be familiar with.
Diegetic: Interface that is included in the game world -- i.e., it can be seen and heard by the game characters. Example: the holographic interface in Dead Space.
Non-diegetic: Interface that is rendered outside the game world, only visible and audible to the players in the real world. Example: most classic heads-up display (HUD) elements.
Spatial: UI elements presented in the game's 3D space with or without being an entity of the actual game world (diegetic or non-diegetic). The character outlines in Left 4 Dead are an example of non-diegetic spatial UI.
Meta: Representations can exist in the game world, but aren't necessarily visualized spatially for the player; these are meta representations. The most apparent example is effects rendered on the screen, such as blood spatter on the camera to indicate damage.

Terminology from Fagerholt, Lorentzon (2009) "Beyond the HUD - User Interfaces for Increased Player Immersion in FPS Games". Master of Science Thesis, Chalmers University of Technology

Game Analyses

Far Cry 2

Far Cry 2 (Ubisoft, 2008) is an example of a game that goes to great lengths in making the interface diegetic, especially for being an FPS. The primary diegetic method in Far Cry 2 is making in-game gadgets take on roles typically associated with HUD interface -- map features, time of day, and the condition of your weapon.

Click for full size.
Above are examples of interface elements that are diegetic. Time is presented with a watch, and navigation with a GPS and physical map. It's worth noting that even though the map is physically represented in the world, the icons and indicators are moving and behaving based on game play.
What works?
The novelty factor
Visually it's cool to see the hero dig bullets out of his arm, and to look at a compass in your hand. Further proof of the novelty factor is how Ubisoft showed off the diegetic interface in the pre-launch marketing. It was considered a selling point -- a means to compete with other FPS games.
Interaction with other characters
Ironically, interacting with another character than yourself works great, since it allows you to see what that character is doing. This is particularly cool when a friendly character comes to save you when you are injured; that's a good snapshot example of immersion.
What doesn't work?
FC2 appears conflicted in its use of interface since it has a traditional non-diegetic HUD that indicates ammo, interaction opportunities, health etc, complimentary to the ambitious diegetic interface. This HUD is in its turn quite bluntly non-diegetic and very traditional.
In an effort to minimize the intrusiveness the non-diegetic elements fade in and out, out of the player's control, which of course results in a complete lack of control for the player. The screen below is captured in game and shows how non-diegetic HUD elements may show up during play.

There is a profound lack of real estate in FPS games on which to render interface beside the HUD, which shows in Far Cry 2. The camera simply does not allow diegetic representation of some things, especially if you restrain yourself to a realistic fiction.
Final analysis
Judging from Far Cry 2 it seems nearly hopeless to make the game playable and 100 percent diegetic, particularly in an FPS. Some sort of compromise seems to be necessary. The benefit of such compromise is likely greatest if a diegetic interface design is the goal from the beginning, rather than being forced in the end. If you find yourself adding complimentary non-diegetic UI to support a diegetic solution, you might have to rethink the solution as a whole.

Dead Space

Dead Space (EA, 2008) is the most recent example of a fully diegetic interface. In contrast to most games, Dead Space has an explicit direction that all interface elements should be "in the game world".
The interface uses a fairly traditional HUD system with a big twist: it's rendered in the game as a hologram, a textbook example of a diegetic solution where the interface exists in the game world and can theoretically be seen by the game characters. The UI is explained as holograms created by the avatar's space suit. This "excuse" opens up the possibility of using almost any interface, as long as it's holographic.

Click for full size.
Beside the holographic interface, Dead Space also draws interface on the actual player avatar, a very appropriate solution for diegetic third person games.


Above: A locator feature that plots the way where you are expected to go. This feature came about when the ambitious holographic 3D map failed to serve players, according to Glen Schofield, the game's executive producer.
What works?
Setting
Dead Space takes advantage of its sci-fi setting to make the interface diegetic. It could in principle be explained as "a typical UI, rendered atypically".
Perspective
Using the player avatar as a canvas to actually draw UI elements on, such as health and stasis, is a great way to promote immersion -- but seems largely dependent on setting, and a third person camera.
Preserving functionality
Dead Space clearly shows some the style benefits of a diegetic interface, and that such an interface can preserve the functionality of a traditional interface.
What doesn't work?
Functionality breakdown leading to complementary solutions
The holographic 3D map largely failed to aid player navigation. The failure to serve player needs likely forced the development team to implement a complementary feature, "the locator", that was not using the same diegetic method (hologram) but rather a diegetic spatial method (projected on the ground) -- once again "excused" by the sci-fi fiction.
Benefit?
It is hard to see an absolute benefit from the UI other than the functionality it provides. Given there has no doubt been a lot of cost involved in making the holographic interface, this needs to be considered.
Final analysis
Dead Space raises the question "How much is gained by implementing a diegetic user interface?" One could easily imagine all Dead Space's interface elements as traditional HUD elements. Dead Space could also be criticized for only translating traditional interface solutions from non-diegetic to diegetic, without making any real improvements to the traditional designs.
I consider Dead Space a valuable measurement of the actual benefits of going diegetic. There might be a greater benefit than that realized in Dead Space -- but deciding if the pursuit is worthwhile is a decision each development team has to make. Conclusively it can be said that Dead Space uses a fairly traditional interface rendered in a novel, diegetic fashion, and that the benefits were fairly subjective.

Team Fortress 2

Team Fortress 2 (Valve, 2007) is a game I chose to analyze because I think of it as a game with a very straightforward approach to interface. "Use whatever means to inform the player" seems to be the developers' modus operandi, as their interface solution is spread across all methods of interface design.
Information such as ammo, health, and critical game mode information is permanently displayed on static positions in the HUD (non-diegetic). There is a complementary second layer of static "pop-up" non-diegetic HUD elements that appear based on player actions, such as when the player stands on a control point or equips a construction kit.
On top of that, TF2 also uses a diegetic interface, particularly for the engineer class, who can build objects in the world. In this case a blueprint hologram appears in 3D that allows the player to know exactly how the object will appear when completed. It's worth noting that non-diegetic HUD elements co-exist on the screen at the same time.
TF2 also makes heavy use of "spatial non-diegetic" elements, like icons over players' heads, and other markers. It's worth noting that the name tag is not spatial but rather fixed to the observer's camera, just below the crosshair.
A little more unusual is the way which the medi-gun and its subsequent "uber charge" is portrayed. The colored ray that comes from the medi-gun is clearly diegetic, but at the same time a spatial marker for the bond between the healer and the one being healed. Likewise the "uber charge" coloring can be seen as a diegetic effect of being radiated with the medi-gun, but it's also a spatial marker for all players to be aware of who is uber charged.

Click for full size.
What works?
Mixing UI elements from various categories (diegetic, non-diegetic, spatial, etc) can really allow for providing loads of information without having to put all of it in the HUD.
UI components do not have to follow an immediately obvious theme or be immersive to work.
What doesn't work?
For all the above reasons, Team Fortress 2 can sometimes look and be perceived as a little "messy". The "awesome factor" and novelty value suffers.
Final Analysis
Team Fortress 2 hardly makes the charts for diegetic qualities, but manages to be a hugely successful title and very playable nonetheless. Team Fortress 2 shows the strengths of a mixed interface where little or no regard is paid to a diegetic direction. Team Fortress 2 can also be considered an example of player tolerance for mixed interfaces taking away some of the validity of arguing that diegetic interface are better tolerated.

World of Warcraft

World of Warcraft (Blizzard, 2004) is a pioneer in the UI scene for releasing the UI code for third party development -- not only allowing players to move the various UI entities around the screen, but also allowing the creation if new UI elements. These can even show completely new data that isn't obtainable with the default UI. This bold move by Blizzard gave birth to a huge "add-on" scene, where players create stand alone UI elements that serve very specific purposes.
Not unlike Team Fortress 2, the World of Warcraft approach seems especially keen on giving players the information they might want with very little regard to esthetics or diegetic qualities. One thing that unifies almost all aspects of the World of Warcraft UI is that it is, with few exceptions, a non-diegetic classical 2D HUD complemented with spatial non-diegetic info -- nametags, health bars, etc.
Below is an image of the default WoW interface, a fairly traditional non-diegetic 2D solution complemented by spatial non-diegetic and meta elements.

Below is one of countless examples of customized interface in WoW with several add-ons providing information not otherwise obtainable.

What worked?
Customization
Having a freely customizable interface seems to greatly increase the tolerability of traditional 2D HUD elements even when the screen gets cluttered.
Aid to perform
Seemingly advanced and intrusive non-diegetic interfaces seem to be tolerated and even appreciated if they aid the player to perform his task, especially in the presence of other players.
Perspective
The third person perspective allows a 360 degree awareness that vastly helps player orientation and navigation.
What didn't work?
Stress to perform
Immersion isn't a big factor from an interface standpoint, and the scriptable interface is always subjects to exploits. It is hardly an option to play the game with the default interface if you wish to be competitive -- adding stress to players about getting the right stuff for their interface.
Final analysis
World of Warcraft could be an example where other developers might overestimate the importance of immersion or at least the forms immersion takes. WoW is a fantasy role playing game and is as such by no means extra suitable for complex or data heavy non-diegetic interface elements; still players seem to prefer them over the lighter default interface.
The cause and effect here are difficult to fully untangle, but it seems in the case of World of Warcraft, when given the choice, players want more information and more UI to aid them reach optimal play performance. However, how much of a choice it actually is can be debated given the competitive nature of World of Warcraft.
The success of World of Warcraft sends a strong signal that immersion might not, or at least not always, be in the consumer's best interest. Maybe they just want to perform at the peak of their ability in harmony with the game.

Conclusion

As I mentioned in the Far Cry 2 analysis, inclusion of non-diegetic interface elements seems almost required to reach the level of playability required in today's competitive market. The opposite does not seem to be true, judging from my analysis of Team Fortress 2.
My conclusion is that there is a fundamental rule for all games that must always be met regardless of the looks and functions of any given interface: The rule of functionality preservation and translation must be met.
The discovery is that the players exist in your game in two instances, the "avatar" and the "organism". The avatar is, of course, what is rendered on screen; the organism is what is left of the player after passing through the plane into the game world -- the preservation the game's functionality and its translation into in-game abilities.
In nature, there is no "avatar", since a creature's body is an exact representation of the organism's capabilities. In games, however, there is an inherent discrepancy between the two -- since the developer dictates in detail the embodiment of the organism. The game might dictate that the hero is a space marine; the challenge, however, is to design a user interface -- or let's call it "organism interface" -- that makes the player feel adequately that he or she is a space marine.
Imagine the opposite -- that the "avatar" is withheld from the player's perception, and that you as a developer are challenged to make the player describe themselves as "space marines" based only on how they feel when they play. The risk is that they describe themselves as hovering box with a mounted machine gun.

Passing through planes
The player becomes the organism when he passes through the plane between reality and your game. The UI is that plane. Take a prosthesis as an example -- a human is robbed of his right arm, a doctor fits a prosthetic arm to take its place. The prosthesis is the interface in this example, and the better the interface, the more right arm functions will be preserved. You could say that this person has crossed his right arm through the plane.
Now imagine the prosthesis designer had decided that preserved functionality was not as important as the authenticity of the rubber skin covering the mechanics. The person with the prosthesis would have a more authentic looking arm, with less preserved functionality. Since UI could be considered a virtual prosthesis, always make preserved functionality your main goal!
Regardless of your overall UI direction, be it immersion or a HUD your first priority has to be to enable the organism to operate in your game world, otherwise all else will fail. There is simply no viable strategy that allow for neglect of this vital aspect.

Designing Your Organism Interface

  • Look at your main avatar - "the hero". Describe how it feels to be the hero
    • Example: Badass, Confident, Fearless, Aware
      • Is your hero "aware" of being an elite soldier? You have to make sure the player feels aware! How do you handle enemies outside the screen, enemies behind the player, enemies behind trees, etc.?
  • List the functions you know must be present in the UI (without regard to how it will eventually be implemented)
    • Example: Crosshair, Health, Ammo, Mini-map, Weapons inventory, Objective locator
  • Start designing a preliminary interface
    • Map your "must haves" to different interface methods, diegetic, HUD, etc.
  • Review your preliminary design by asking: "Will this UI allow me to be aware of 1, 2, 3 and will I feel A, B, C when I do it?"
  • Iterate on your UI design until you can answer the above question "yes!"
    • Remember that UI comes in many forms, Audio, Animation, HUD, effects - mix it up!
(Where 1, 2, and 3 are your must have functions and A, B, and C are how it should feel to be the hero.)
In the last step you are bringing the avatar and the organism together by designing interface solutions that will make the player actually feel and behave the part assigned by the game.
It could be argued that "feeling badass" is not mainly achieved with UI but that depend mostly on the interpretation of UI. It might not be achieved with a 1999 HUD, but with a skillful implementation of various UI components from various categories tailored to fit the experience I would argue UI has everything to do with feeling badass!

Wednesday, 21 September 2011

翻转吧,界面!-3D UI概述


翻转吧,界面!-3D UI概述

Link: http://cdc.tencent.com/?p=3781

随着技术发展,界面越来越简易化,二维的操作难以提供更好的交互体验,因此平面化的操作界面转向3D 空间维度发展,我们又迎来的了新的时代,一场革命性新的交互体验;本次分享,作为3D UI的概述,以下就整体的来了解下3D UI。

图1:如何定义3D

什么是3D
  我们首先了解下什么是3D:
  一般而言,3D也称为三次元、三维空间;日常生活中可指由长、宽、高、3个维度所构成的空间,而且日常生活中使用“三维空间”一词,常常是指三维的欧几里得空间;3D 这个空间几何概念加上UI人机交互界面这个概念组成新的词汇3D UI  ,那么,什么是3D UI,如何理解3D UI?
图2:各类3D游戏界面,是否3D化就是3DUI?
  在电脑中最常见的3D应该就是游戏,但即使是最新的游戏,其中的操作界面是否就是3D UI?
  
  我们先暂时放下这个话题,粗略的看下我们最常见的UI变革,系统UI的变革:

UI的变革
图3:计算机UI从无到有的发展变化
1 最早的计算机系统是没有UI的,他是命令式的操作界面。用户所有的操作都必须依靠键入命令,例如:运行“打开文件夹”这个操作,必须键入命令“CD”,列出文件夹内容则需要键入“Dir”;
2 时间进入1983年,Apple的 Lisa OS ,此时已经引入了鼠标的操作,一切都变得不一样,我们的电脑发生了新奇的变化,不用去记住那些复杂的命令,打开文件夹只需要简单的鼠标点击,就可以进入,并且已经展现出文件夹的内容;
3 时间再次推移,我们看下1997年的 Mac OS System 8 ,这时已经加入不少新的技术,首先画面更精美了,不在只是单色,所有的图标更加物体化,不在只是简单的黑白线条架构起匪夷所思的线框图,所有的命令也更加图形化;
4 进入到2001年的 Mac OS X 图形更加的细致,硬件的升级导致分辨率的不断提升,所见的物体已经更为逼真,我们可以看到更多拟物化的设计,并非传统四四方方的操作界面,我们甚至可以看到垃圾筒的不断塞满,这和你现实中并无二致;
5 点开系统看下现在的系统,我们可以看到不仅仅是图形上的变化,你可以犹如真的在现实中翻页,我们可以用手指放大缩小照片,我们可以翻转它拨弄它。

3D UI的探讨
  在技术的革新,界面和交互的不断进化演变,这些越来越3D化的设计和现实的交互体验说明了什么,我们回到3D UI这一话题,我们又能发现这么一个问题:“3D化界面究竟有何意义”带上这个问题我们看下早期的一些3D化界面的效果。
图4:TheSkinsFactory 为 Alienware 定制的WMP 视觉外观
  
  在早期的界面中,只是简单的模仿3D化的效果,换句话来说,我们真正操作和使用还是停留在平面上。就如在黑板上以透视的方法画下一个立体的盒子;这只是看起来效果更好一点而已,如何能更进一步?
  
  单纯的视觉变化只是看上去更好一点,如果要进一步的提升则需要把操作和交互带入进去,现在的设备,如 iphone、ipad、已经不是单纯的在视觉上单纯的拟物,我们可以在设备上进行推拉、移动等物理的方式直接操作内容,在目前的科技中简单的模拟物理环境已经越来越普及;看看以下的设备,他给我们提供了什么:
图5:Microsoft Surface
  
  我们看下这样直接的操作能带来什么好处:
1 直接自然的操作方式,用户可以直接与内容进行互动,关注用户的当前需要完成的任务,在界面中保持最少数量的可见控件,减少用户对内容直接操作时可能出现的干扰。
2  除了与人交互,也可以与实物交互。在虚拟世界和现实世界建立了联系。充分整合发挥现实世界的操作自然等优势与虚拟世界的智能等优势。
回到之前的问题“3D化界面究竟有何意义”,显而易见的,3D技术是模拟现实生活中的物理或自然环境。

拟物化的设计
图6:更多拟物化的界面设计
  
  因此3D化的界面让我们在使用操作设备上更加的接近现实;随着技术的发展,在虚拟的程序上,有足够的技术模拟现实中存在的物体,包含物体效果;拟物的好处是让用户、操作者对于程序本身的使用减少学习成本和拥有更熟悉良好的体验。3D化的设计并不只是单纯的视觉炫耀,他能让内容更加的贴近生活,未来的生活中,设备只是介质,他让内容、信息直接融入了生活。我们期待着那个时代的来临!