作者：Desi Quintans

让你的玩家把意图转化为行动，或理解你的游戏中的情况，这有多困难？在本文中，我将通过分析游戏UI的正面案例和反面案例，让读者理解如何制作出更好的游戏UI。另外，在文章结尾，我还附上UI设计的一般准则以供参考。

前言

作为玩家和开发者，我们都知道沉浸感就是一切。当你处于沉浸状态时，除了眼前的游戏，你会连时间都忘记。对沉浸感的产生和破坏具有主要影响的因素是，玩家是否能轻易地把想法转化为游戏中的行动——也就是，你的游戏的UX有多流畅，以及游戏的I设计有多好。UI提供的信息太多或太少、要求太多输入、多余的提示或指导不足，都会损害玩家在游戏中的沉浸感。糟糕的UI设计甚至可能彻底破坏你的游戏。

（《Honey Bee Match 3》中的两半截图。左上半张是绿色盲患者看到的图像，右下半张是游戏真正的图像。100个人中大约有1个人是绿色盲，绿色盲基本上玩不了这款游戏。）

在本文中，我的目的不是教你如何整合UI。相反地，我只想告诉你优秀的UI和糟糕的UI分别是怎么样的，以及启发你在自己的游戏中利用值得借鉴的思路。我把UI和UX设计当作一系列与制作游戏的其他部分一样重要和准确的目标。我将选取案例分析游戏开发者做错和做对的地方。

什么是UI和UX？

有时候UI和UX被当成可以互换的两个术语，但它们有各自具体的含义。

UI，也就是用户界面，是指用户与游戏产生交互作用的方法（键盘操作、鼠标控制）和界面（目录页面、地图窗口等）。UX，也就是用户体验，是指那些UI的直观程度和使用户产生的愉悦程度。

做个类比：汽车的UI是它的方向盘、踏板、转盘和仪表盘上的控制键；汽车的UX受到刹车踏板的反应灵敏度、引擎加速性能、变速杆的阻力等因素的影响——这些因素决定了开这部小车是否令人愉快。

优秀的UI做什么？

简单地说，优秀的UI的作用是准确迅速地提供相关的信息，提供完信息后马上退到一边。一句概括就是：

“优秀的UI告诉你你必须知道的东西，然后就退到一边。”

我们可以进一步把UI的设计过程归纳为以下六个基本问题：

1、这个界面是否立即告诉我我必须知道的信息？

2、是否容易找到我正在寻找的信息，或者我是否需要四处搜索？（游戏邦注：即菜单是否藏得太深，以至于玩家看不到信息？）

3、我是否可以不阅读说明就知道如何使用这个界面？

4、我可以在这个屏幕上做的事情是否明显？

5、我是否需要等待界面加载或动画？

6、是否存在可以减少的或完全删除的重复性或无聊的操作（如，允许使用快捷键）？

当你设计和玩你自己的游戏时，你要经常问自己以上几个问题。UI设计是不断挑剔的过程，是游戏开发中少数几个必须力求完美的环节之一。

正面案例

《辐射3》的Pipboy就是一个好例子，或者更准确地说是，当你使用Pipboy时，你的角色总是把它举到与眼睛平齐的高度。

这段动画只有半秒钟，所以你不会想太多。但当你要在80个小时的游戏过程中无数次看完它，你就会觉得这是一个巨大的耐心考验。永远不要以为你的玩家会“习惯于”以非最佳方式做某事。他们只会责备你的设计欠考虑。

如何学习UI设计？

我认为最简单的学习UI设计的方法就是制作网页。像 Jakob Nielsen的Alertbox就是一个好资源，你可以从中找到大量关于如何制作好UI和人与软件的交互方式等信息。

优秀的UI最核心的特点是易用性，这个属性就以上六个基本问题的答案所在。关于易用性和如何提高界面的易用性，可以说的东西有很多，但我希望读者自己从Alertbox中寻找信息，并看看哪些印证了你的经验。

谁来设计游戏的UI？

许多程序员都害怕制作UI，因为他们觉得这是一件创造性工作，最好由更加精通表现法的美工来负责。然而，UI设计很大程度上与逻辑有关，这无疑是程序员擅长的。

事实上，我认为程序员（或创意总监，或者团队中任何直接参与制作游戏体验的人）都应该参与制作UI，因为他们正是了解游戏里里外外各方面、知道什么信息重要或不重要的人。

他们应该专注于UI的功能性方面：如UI元素多大、是否滚动、在哪里展示哪些信息以及玩家如何导航等。用两三种颜色装饰UI，永远不要指望用颜色变化来传达信息。至少，要参考色盲模拟器ColorOracle或Coblis，以确保色盲患者不会遗漏信息。

糟糕的游戏UI案例

在谈这一部分前，我想先强调，我对糟糕的UI的判断标准是以使用键盘和鼠标PC游戏玩家的想法和行动为基础的。

用户的输入选择与UX大有关系，尽管不是唯一有关的。例如，有些人习惯了触屏就会觉得按键界面难用，但设计良好的按键界面对这些人来说仍然是容易理解和适应的。

《湮灭》

在《湮灭》中，一个平台的UI与另一个并不相称。即使《湮灭》是从游戏机移植到PC的，它仍然保留着针对控制器的UI。这简直就相当于，在iOS或Android平台发布的游戏要求玩家像使用电脑那样移动光标，而不是用手指触击。

所以，是什么导致《湮灭》的UI变得这么糟糕？空间利用不佳、缩放比例失调和控制失当。

我希望你一次性看六个选项不会让你觉得烦；因为这些窗口是不能调节大小的。菜单上用于传达相关信息（如仓库里的东西）的部分只占整个屏幕空间的21.7%，分辨率是1920×1080。

只使用五分之一的屏幕空间没那么糟，因为那么大的空间就能做很多事了。真正的问题是，根据PC显示器的需要，字体和图标太大了，这大大限制了可以显示的项目数量。

线性列表显示也意味着你往往要经常滚动菜单，而且列表界面隐藏了所有信息。查看你的状态效果必须点击魔法标签，然后进入效果副标签，再滚动列表。把较少使用的信息如角色属性隐藏在标签后，完全不同于隐藏重要的信息如当你在行走时什么东西在消耗你的命值。

《湮灭》还缺少快捷键。没有地图按钮；你必须点击指南调出地图标签。没有“快速出售”按键，也不能成组出售；你必须用你的鼠标移动数量滑块，然后点击“进入”来确认数量。没有退出窗口的标准按钮（在大部分游戏中是ESC),所以要按E、Tab、Esc或其他键才能退出不同的窗口。

《天际》系列修改了一些问题，但有些没有改，有些甚至变本加厉。第一次打开《天际》中的一个小箱子时，我确实感到困惑：按Esc不能退出窗口；按存货键也不行；再次使用小箱子还是不行。你不能点击按钮退出，也没有提示告诉你该怎么做。点击外部窗口也不管用。你们猜猜最后我是怎么退出的？当在是覆盖/准备武器。

《孤岛惊魂3》

《孤岛惊魂3》的菜单对PC玩家来说简直是笨拙。有时候游戏对点击没反应，所以你不得不点击三次；菜单加载很慢；空间使用效率低——你现在知道是怎么回事了。

我本打算以第一版的游戏内HUD的状态为例，但它被修复了。所以我们还是看看《孤岛惊魂2》的HUD。

这就是大部分时候你看到的画面。生命条和弹药计算在需要时会淡入和淡出，但通常不显示在屏幕上。

现在我们看看《孤岛惊魂3》的HUD。

《孤岛惊魂3》的HUD始终显示在屏幕上。我很难接受它出现在屏幕或视频中；因为那让我产生的感觉就是，我突然被人从游戏中硬生生地拽回现实，太糟糕 了。

小地图是很大且不透明的，所以很碍眼。左上角的目标提示框也一样碍眼，尽管它会在几秒钟所消失，但当你正要忘记你是在玩游戏时，它又会跑出来破坏你的沉浸感。当你中弹时，命中提示非常碍眼地挡在屏幕中央，而不是像其他游戏那样出现在屏幕边缘的地方。如果你收集到足够的制作材料，另一个大的、不透明的弹出窗口就会出现在右边，让你知道你可以做新东西了。

每一次这些弹出窗口出现，都意味着把玩家从有趣的游戏世界中拽回现实，让他们知道自己只是在使用软件。过多的提示信息使玩家觉得游戏似乎在怀疑玩家的能力。游戏补丁允许玩家关闭大部分HUD功能，但小地图仍然在留在屏幕上，用鼠标和键盘仍然很难使用菜单。

优秀的游戏UI案例

我们还是不要把所有篇幅花在讨论糟糕的UI上吧。优秀的UI出自那些认识到系统的局限和优势的游戏。

《晨风》

大多数PC玩家都认可《晨风》（《湮灭》的上一部》是UI设计得最出色的游戏之一——除了我下面要说的一个问题。

我们来看一下这个屏幕上的几个基本元素：

1、这是一个由四个不同的、无标签的窗口组成的屏幕。顺时针方向看，你可以看到角色细节设定、地图（可缩放）、法术和魔法道具列表以及角色的仓库（有分类物品的标签）。

2、各个窗口上都有一个突起的小矩形块。点击后，相应的窗口就会在退出菜单模式后保留在屏幕上。例如，如果你要探索地形，你可以把地图窗口打开；或者你可以把魔法窗口打开，以便留心角色的生命值变化。

3、你可以把这些窗口拖放在屏幕的任何位置，也可以根据需要调整窗口或最小化窗口。

4、在这屏幕的右下方有一些状态图标。当你看到陌生的图标时，你可以在菜单模式下把鼠标悬停在它上面，这样就会出现一个小提示框告诉你它是什么。魔法窗口的顶部也有这些图标。

5、角色的仓库对空间的利用很有效，你可以通过调整仓库界面的大小，改变显示物品的数量。

这个UI对PC玩家意味着什么？基本上就是一键操作。想查看技能？滚动角色窗口。想装备物品？把物品拖放在角色纸娃娃上。这个界面用起来非常快捷简单，游戏世界中几乎所有类型的物品都有对应的图标，所以，想看Journeyman之锤？只需要在你整齐的仓库中寻找半秒。

这个UI的唯一缺陷就是，药水和滚动重用仓库图标；有药水品质的专用图标，但它的效果图标却没有，所以Master Water Breathing药水就很难与体力恢复大药水区别开来了。

《Beyond Good and Evil》

用控制器进行文本输入在大多数时候是很不方便的，有时甚至让人抓狂。你不能用手指直接按键盘上的按键，你必须用鼠标点击按钮才行，这就多了不必要的移动距离和动作。

《Beyond Good and Evil》通过执行被普遍接受的一种游戏机文本输入方案解决了这个问题：一条按顺序排列的字母和数字组成的螺旋带子。这条带子可以无延迟地快速滚动，它用声音反馈玩家的调整。令人不解的是，为什么其他游戏就没想到使用这么方便的设计呢？

好吧，我的说法有失偏颇了。其他键盘类文本输入屏幕确实允许玩家长按方向键和连续滚动所有按键，但通常会有延迟，而且滚动得不够快。（记住这个基本问题：“是否必须等待页面加载或直动画？”）

《家园》

《家园》于1999年问世，是第一款真正实现了3D移动的RTS。能够沿着三个轴方向称动物品是一个全新的设计挑战，而《家园》显然用风格和精致交出令人满意的答案。问题：如何在2D平面（你的显示屏）上体现3D移动。

解决方案：一，解决玩家习惯看到的传统水平面。

然后，解决额外的垂直面。

这个移动屏幕也给玩家提供了一些小而强大的工具：

1、注意这些侦察飞船的移动范围之外的罗盘圆环。《家园》的地图很大很空，所以罗盘指向对于在太空中前进是非常重要的。

2、看看这些线条多么轻易就组成了屏幕的功能部分。有些游戏为了让UI元素与世界保持和谐，就使UI元素透明，但《家园》没有那么做。这里，《帝国：全面战争》是一个反面教材：攻击弧指示器是由淡红色线镶不纯的白色构成的，经常与地形混起来。多亏了有MOD爱好者和他们提供的MOD。

3、在移动范围圈中央有一个十字准星，总是指向你选中的对象的中心。没有它，你将不得不寻找选中飞船的生命条来查看他们的位置，然而当飞船受伤害时，生命条会就得相当短小和模糊。

4、移动线给你指明前进方向，便于在没有明显的路标的情况下估计在通过地图的时间。

5、看看侦察飞船前面的收割飞船。有一条线通过它，终止于一个小圆形。这个小圆形位于侦察飞船（绿圆）的水平面上。这条线显示了收割飞船从上或从下距离平面有多远。有了这两个指示器，移动飞船就很快很准确了：移动圆盘上部的水平面标记，然后向下拖放到线的底部，以设置垂直面。

《十字军之王2》

《十字军之王2》是一款复杂又多重的游戏，几乎让玩家觉得自己很迟钝。然而，玩家却能通过它的界面克服困难。首先，帮助框多；当玩家遇到不熟悉的东西时，游戏会弹出相应的提示框。第二，有非常功大的功能。比如，我想知道某图标的含意，我只要把鼠标鼠停在它上面就行了。

（这里的工具提示有点儿空洞，因为这个截图没有捕捉到指针。）

一个工具提示出现了！游戏告诉我这些图标名称和相关信息，甚至告诉我那些信息是怎么组织的。游戏中的其他元素也有工具按提示，并且弹出反应非常灵敏，我几乎不需要等待。

你可能会说：“工具提示到处都是啊。当玩家把鼠标悬停在某物上时，弹出工具提标是自然而然的事。”确实，但人们容易忘记这一点。

《无风之谷》

提示工具特别容易被忘记的一个地方是，你的游戏的前面菜单。以下是《无风之谷》的垂直同步工具提示。

以下是《半条命2》的选项菜单的垂直同步工具提示：

相当实用。大部分了解高级图像选项的PC玩家都知道垂直同步是什么，但提供工具提示只是出于礼貌——只要它是一种实用的工具提示，且不是人们所说的：“关闭垂直同步或开启垂直同步。”

《文明5》

在快速提供可用信息方面，《文明5》的城市屏幕是一个好榜样。

从以上屏幕可知：你的整个帝国的经济和文明状态、包括人口增长在内的城市生产情况、城市可用的单位和建筑以及建造时间、 城市的扩张情况、城市区域内的资源和人民目前在作业的资源、城市范围内的已建成建筑、以及一个缩小了的在城市管理面板，你可以切换到不同的工人分配页面，以查看这个城市的各项生产情况。

你还可以在城市地图上移动工人，这样就充分利用屏幕空间了。

总结

最后，我们再看看UI设计的六条基本原则（也就是上述六个基本问题的答案）：

1、预测玩家想知道的东西，并提供相应的信息。

2、必须容易寻找信息。

3、你的UI应该容易使用和导航。使用普遍接受的习惯：所有人都知道按Ctrl是连选物品，所以不要把它变成交换物品。

4、使玩家容易知道自己在菜单系统中的位置，以便了解从这里可以切换到其他什么菜单以及在这个位置可以做什么。

5、尽可能减少加载时间和避免在菜单中使用动画。

6、删除或简化重复性操作。

UI设计是一项讲究逻辑的工作，但你不应该感到害怕。注意你玩的游戏，研究它们展示信息的方法及其让你产生的感觉。注意你反复做的事，以及如何改进这些重复性操作。寻找那些装饰性信息，考虑是否可以用其他东西取代它。注意让你感到困惑的东西。最后，总是邀请别人当着你的面试玩你的游戏。告诉他们如何运行游戏，然后静静观察他们的执行，此时你务必克制指导他们的冲动。（本文为游戏邦/gamerboom.com编译，拒绝任何不保留版权的转载，如需转载请联系：游戏邦）

Game UI By Example: A Crash Course in the Good and the Bad

by Desi Quintans

How easy is it for your player to put their intention into action, or to understand what’s going on in your game? In this tutorial, you’ll learn how to build a better game UI by examining both good and bad examples from existing games, and end up with a checklist of questions to guide you through designing them.

Introduction

As gamers and game developers we know that immersion is everything. When you’re immersed you lose track of time and become involved in what the game is presenting. A major factor in what makes or breaks immersion is how easy it is for your player to convert an idea into an in-game action — that is, how fluid your game’s User Experience (UX) is and how well-designed its User Interface (UI) is. A game hurts itself by providing too little information or too much, requiring too many inputs, confusing the player with unhelpful prompts or making it hard for a new player to interact. Poor UI design can even break your game completely.

A composited screenshot from Honey Bee Match 3. The top-left half is rendered in green-blind mode by ColorOracle; the bottom-right half is the original. An estimated 1 in 100 people are green-blind, and this game is almost unplayable for them.

In this article I won’t be teaching you how to put a UI together. Instead, I’ll be focusing on what makes a UI well-designed or poorly-designed, and how you can apply this thinking to your own game. I’ll be examining UI and UX design as a series of goals which are as important and as precise as any other part of your game, using examples from games that get it wrong and games that get it right.

What Are UI and UX?

The terms UI and UX are sometimes (incorrectly) used interchangeably, but they have specific meanings.

UI, or User Interface, refers to the methods (keyboard control, mouse control) and interfaces (inventory screen, map screen) through which a user interacts with your game. UX, or User Experience, refers to how intuitive and enjoyable those interactions are.

To look at it another way: the UI of a car is its steering wheel, its pedals, the dials and controls on the dashboard; the UX of the car comes from intangibles like the brake pedal being responsive, the engine smoothly accelerating when you step on the gas, the gear stick having just the right amount of resistance – those things that make the car enjoyable to drive.

What Does a Good UI Do?

Put simply, the role of a good UI is to provide relevant information clearly and quickly, and to get out of the way once it has done its job. If you only take one bit of information from this tutorial, let this be it:

A good UI tells you what you need to know, and then gets out of the way.

We can go further and boil down the process of UI design to six fundamental questions:

Does this interface tell me what I need to know right now?

Is it easy to find the information I’m looking for, or do I have to look around for it? (Are the menus nested so deep that they hide information from the player?)

Can I use this interface without having to read instructions elsewhere?

Are the things I can do on this screen obvious?

Do I ever need to wait for the interface to load or play an animation?

Are there any tedious or repetitive tasks that I can shorten (with a shortcut key, for example) or remove entirely?

Ask these questions frequently as you design and play your game. The world of UI design is a world of endless nitpicking, and it’s one of the few areas of game development where it’s okay to obsess.

Case in Point

One good example is Fallout 3‘s Pipboy – or, more specifically, the short animation of your character raising the Pipboy to eye level whenever you access it:

The animation lasts for only half a second, so you might not put much thought into it. But watch how it challenges the patience of your players after sitting through it countless times over the course of an 80 hour game. Never conclude that your player will “get used to” doing something in a non-optimal way. They will only seethe and bad-mouth your lack of design sense.

How Can I Practice Designing UIs?

I believe that the single best way to learn UI design is to make websites. Amazing resources like Jakob Nielsen’s Alertbox exist to give you as much information as you want about what exactly makes a UI easy to use, how people interact with software and so on.

Editor’s Note: And there’s always our sister site Webdesigntuts+…

At the center of what makes a good UI is usability, an attribute that incorporates the answers to the six fundamental questions mentioned previously. There’s much more to be said about usability and making your interface usable, and I leave it to you to pick over Alertbox and find the parts that are relevant to your experience.

Who Should Design a Game’s UI?

Many programmers are scared off from making UIs because they feel that this is a creative job, one better left to someone like an artist who has a better understand of presentation. And yet UI design is a largely logical process, one that’s perfectly approachable to a developer.

In fact, I believe that the programmer (or creative director, or whoever in your team has the most direct role in shaping the playing experience of your game) should be responsible for making the UI, as they are the ones who know the game inside and out, and who know what information is important and what is incidental.

They should focus on the functional aspects of the UI: How big is it, does it (or should it) scroll, what information is displayed and where, and how the player navigates through it. Mock it up with two or three colors, and never rely on color changes alone to convey information. At the very least, run it through ColorOracle or Coblis to ensure that color-blind people aren’t missing out.

Games With Poor UIs

Before getting into this, it’s important to understand that when I talk about bad UIs, I make that judgement based on the ideas and behaviours that I bring to it as a PC gamer who plays games with a keyboard and mouse.
The user’s choice of input is extremely relevant to the user experience, although it’s not the whole story. Someone who is used to a touch interface is going to find a button interface awkward, for example, but a well-designed button interface will still be easy to understand and predict.

Oblivion

Oblivion’s UI is a classic example of one platform’s UI being incompatible with another. Even though Oblivion was ported from consoles to PC, it still retained its controller-focused UI. This is completely analogous to releasing a game on iOS or Android and making the player move an on-screen cursor around like they’re using a laptop’s trackpad instead of taking advantage of absolute touch positioning.

So what makes Oblivion’s UI so bad? It’s a combination of wasted space, improper scaling, and inappropriate controls.

I hope you’re cool with viewing six items at a time; these windows aren’t adjustable. The actual part of the menu that conveys the relevant information, such as the contents of your inventory, uses only 21.7% of the total screen space at a resolution of 1920×1080.

Using only a fifth of a screen isn’t that bad: you can do a lot in that much space. The real problem is that the font and icons are double the size they need to be for viewing on a PC monitor, and this greatly limits the number of items that can be displayed.

A linear list view also means that you tend to do a lot of scrolling, and the tabbed interface hides everything from you. Checking your status effects involves clicking on the Magic tab, going to the Effects sub-tab, then scrolling through the list. It’s one thing to hide seldom-used information like character stats behind tabs, but completely different to hide important information such as what is draining your health while you walk around.

Oblivion also lacks shortcuts. There’s no Map button to bring up the map; you have to click on the compass to bring up the Map tab. There’s no Quick-Sell key or Sell Stack shortcut; you’ve got to work the quantity slider with your mouse and confirm it by clicking or hitting Enter. There’s no standard button for getting out of a window (Escape in most games), so exiting different windows is done by pressing either E, Tab, Escape or some other key.

The sequel, Skyrim, would go on to fix some of these problems, but some would remain or become worse. I actually got stuck the first time I opened a chest in Skyrim: Escape didn’t get me out of that window; the inventory key didn’t get me out; trying to Use the chest again didn’t get me out. There was no button you could click to exit or prompt that told you what to do. Clicking outside the window didn’t work. Guess what key finally let me exit the chest? Sheathe/Ready Weapon, of course.

Far Cry 3

Far Cry 3′s menus are really awkward for a PC user. Sometimes it doesn’t respond to clicks so you have to click three times; menus can take some time to load; it’s not really space-efficient – you know the deal by now.

It was patched, so I’m going to focus on the state of its in-game HUD when it was first released. Let’s start with a look at the HUD in its predecessor, Far Cry 2.

This is what you see most of the time. Things like health indicators and ammo count fade in and out as you need them, but in general the HUD leaves you alone.

Now let’s look at Far Cry 3‘s HUD.

Far Cry 3‘s HUD doesn’t leave you alone. I have a hard time showing it in screenshots or videos; it’s just something that you experience as a player who keeps getting jerked back into reality. It creates a claustrophobic feeling.

The minimap is large and opaque, so it gets in your way. The objective reminder in the top left is also large and opaque and gets in your way, and although it disappears after a few seconds it has a tendency to reappear just as you’re about to start forgetting that you’re playing a game. When you get shot the hit indicators appear near the center of the screen where they again get in your way, instead of appearing at the very edges of the screen like in every other game. If you gather enough crafting ingredients, another big, opaque popup appears on the right to let you know that you can craft something new.

Every time one of these popups appears it snaps the player out of whatever fun they were having and reminds them that they’re using software. The over-supply of obvious information makes it feel like the game doesn’t trust the player to be competent. The patch lets you turn off the worst of these HUD features, but the minimap is still there, and the menus are still awkward for mouse and keyboard interaction.

Games With Good UIs

But let’s not spend all this time talking about bad UIs. Great examples of UIs come from games which acknowledge the limitations and strengths of their systems.

Morrowind

Most PC gamers agree that Morrowind (Oblivion’s predecessor) has one of the best PC UIs around – except for one issue which I’ll talk about below.

Let’s go over the basic elements of this screen.

It’s a single screen with four different, untabbed windows. Clockwise from top-left you have the character details, the map (which you can zoom), your list of spells and magic items, and your inventory (with tabs for sorting items).

At the top-right of each of these windows is a small raised square. If you click this square, then that particular window will remain on-screen even after you exit Menu mode. You can keep the map window open if you’re trying to completely map the coast, for example, or you can keep the Magic window open to keep an eye on the number of charges left in your Ring of Healing.

You can drag these windows anywhere on the screen, and you can resize them or minimize them to tailor the UI to your needs.

At the bottom-right of the screen are some status icons. If you see an unfamiliar icon there you can hover over it in Menu mode, and a tooltip will tell you what it is. The same icons appear at the top of the Magic window too.

The inventory is laid out in a space-efficient grid, and you can adjust the number of items it displays by resizing the inventory screen.

What does this UI mean for the PC player? Almost everything is literally one click away. If you want to look at your skills you scroll the character window. If you want to equip something, you drag it onto your paper doll. The interface is fast and accessible, and almost every type of item in the world has a unique inventory icon, so finding your Journeyman Hammer involves half a second of looking at your neat, scalable inventory.

The only detail that lets this UI down is the fact that potions and scrolls reuse inventory icons; there are unique icons for the quality of the potion, but not for its effect, so a Master Water Breathing potion looks just like a Master Restore Fatigue potion.

Beyond Good and Evil

Text entry with a controller is inconvenient at the best of times, and painful in the worst. You can’t move your fingers directly to a key, you’ve got to button-press your way there, creating a lot of unnecessary movements and actions.

Beyond Good and Evil sidestepped all of this by implementing what’s commonly accepted as the best console text input scheme ever: An infinite ribbon with letters and numbers arranged on it in order. The ribbon scrolls fast and without delay, it provides constant aural feedback, and it’s responsive to adjustments. It’s a mystery why other games have not followed its example.

Well I’ve been a little unfair. Other keyboard-style text input screens do allow you to hold down a direction and scroll through all of the keys sequentially, but they often have a delay before they start scrolling at full speed, or they don’t scroll fast enough. (Remember the fundamental question, “Do I ever need to wait for the interface to load or play an animation?”)

Homeworld

Homeworld broke ground back in 1999 for being the first RTS with true three-dimensional movement. Being able to move units along three axes was a new design challenge, and Homeworld absolutely delivered with style and elegance. The problem: How to represent 3D movement on a 2D plane (your monitor).

The solution: First, deal with the traditional horizontal plane that gamers are used to.

Then, deal with the extra vertical plane.

The movement screen also gives the player some subtle but powerful tools:

Notice the compass ring outside the movement range of these Scouts. Homeworld’s maps are big and empty, and compass headings are important for orienting yourself in local space.

Look how easy it is to see the lines that make up the functional part of this screen. Some games try to harmonise their UI elements with the game world by making them pale or transparent, but Homeworld doesn’t. Empire: Total War is a good counter-example here. The firing arc indicator is made of a thin red line bordered by a white smudge, and it blends into the terrain quite often. Thank goodness for mods and modders.

There’s a nice crosshair in the center of the movement range circle, and it always points to the center of your selected formation. Without it, you’d have to look for the health bars of your selected ships to find out where they are, and health bars can get quite small and dark when a ship is damaged.

The movement line provides you with a move distance, handy for estimating transit time in a map with no obvious landmarks.

Look at the Harvester ship just ahead of the Scouts. There’s a line protruding through it, terminating in a small circle above. That circle is located on the horizontal plane of the Scouts (the green circle). The line marks how far below or above that plane the Harvester actually is. With these two indicators, moving towards a ship is fast and accurate: move the horizontal plane marker on top of the disc, then drag downwards to the bottom of the line to set the vertical plane.

Crusader Kings 2

Crusader Kings 2 is the kind of complex, multi-layered game that makes you feel dumb. However, its interface does its best to help you through it all. Firstly, there are many Help boxes that pop up until you’re comfortable enough with that part of the game to tell it to stop. Secondly, there’s this wonderful feature. Say I want to know what an icon of coins represents; I just hover over it and BAM!

The tooltip looks a little disembodied here because the pointer isn’t captured in screenshots.

A wild tooltip appeared! The game tells me what to call the coins icon, gives me the information relevant to it, and even tells me how that information is organised. You can do this with any other element in the game, and the tooltip appears quickly so I don’t have to wait.

You might look at this and say, “Duh, tooltips have been around forever. Of course one should pop out when I hover over something.” Just keep it in mind, as it’s easy to forget.

A Valley Without Wind

One place where it’s particularly easy to forget about tooltips is in the front-facing menus of your game. Here is the Vsync tooltip in A Valley Without Wind’s Options menu.

Here is the Vsync tooltip in Half Life 2: Episode 2‘s Options menu.

Really helpful. Most PC gamers who wander into the Advanced graphics options will know what VSync is, but placing a tooltip is just polite – just as long as it’s a helpful tooltip and not one that reads, “Turns VSync on or off.”

Civilization 5

Civ 5′s city screen is a great example of making information available quickly.

This single screen tells you: the economic and cultural state of your whole empire; the production of this city, including population growth (and border growth if the building list is collapsed); the units and buildings available to this city and how long it will take to construct them; the sprawl of your city, as well as the resource tiles within it and which tiles citizens are currently working; the buildings already built within it, and a collapsed Citizen Management panel where you can switch to different worker allocation profiles to specialise this city’s output.

You can also move workers between tiles right on the map of the city, putting all this screen space to good use.

Conclusion

Let’s recast the six fundamental questions of UI design as six general guidelines:

Predict what the user wants to know, and give them that information.

Information must be easy to find.

Your UI should be easy to use and navigate. Use established patterns where you can: Everyone knows that Ctrl-Click adds items to the selection, so don’t make it swap items instead.

Make the user’s location in the menu system obvious, and make it obvious where the user can go and what they can do from there.

Minimise load times and avoid animations in your menus.

Eliminate or simplify repetitive tasks.

UI design is a logical job that you shouldn’t be scared of doing. Pay attention to the games you play, take note of how they present information and how that makes you feel. Take note of things that you do repetitively, and how they could be improved. Look for information that acts only as decoration, and consider what you would replace it with. Pay attention to things that confuse you. And finally, always have some people play-test your game in front of you. Tell them how to run the game, then watch silently and resist the urge to guide them. It’s quite humbling.(source:gamedev)