MMO UI Sketch
User interface sketch for an early version of Final Fantasy XIV. The goal is to provide a command interface to accommodate a user's skill level (novice, intermittent user, or expert) and optimize the task to be performed (ranging from ad-hoc to frequently-invoked). This interface would replace the simple menu-driven interface with a combinations of menu selection methods: hierarchical organization by fixed frequency of use, auto-complete, and contextual selection.
Sketch
- Visual Design
Main and contextual menus with macros
The commands of this game follow a general pattern:
command > target
command > auxiliary command > target
In the menu root, there are several commands available: magic, abilities, attack, items, etc. The most basic pattern: command performed on selected target. Some command types will require an additional auxiliary command selected and then a target. For example, when 'magic' is selected, the player will need to choose which type of magic to cast. The target types are constrained by the magic. Harmful actions cannot be performed on other players.
Context Menus
Objects are selected, the contextual menu invoked, and the player selects commands applicable to the current context (first image). Since the target is already selected, the action will be performed immediately (second image). For example, if the player were to select another player, attacking commands would not be available. The commands are organized by frequency of usage which is set by the developers based on player testing. The following screenshots show the selection process:
Selecting the creature and bringing up the list of available actions..
Selecting magic to cast on the selected object.
Auto-Complete Menus
This interaction method allows for rapid command execution by allowing players to quickly type in their commands while receiving guidance. As the player types (image 1) a menu appears showing the list of commands available organized alphabetically with the closest matching items placed above and below the current entry (image 2). The following screenshots show the selection process:
Player invokes the command window and begins typing.
As the player begins to type the command, a menu of commands appears with the closest matching command appearing in place of the text.
Entering the magic to be cast.
Entering the target to receive the action.
Macro System
Macros record previous commands executed by the user and store them in a menu for quick selection. The user can select commands from the menu (screenshot 1) or tear them off and place them on anywhere on the screen (screenshot 2). Once placed on the screen, the user can activate the command at any time by simply clicking on it (screenshot 3). The following screenshots show the selection and macro creation process:
Browsing the list of previously-performed commands.
Dragging a macro out of the menu to save and place on the screen.
Activating a macro by clicking on it.
