Game interface design part 2

B.Des Game/ BSc Game AFT: 713 Credit: 2 By Durgesh Pandey
Game interface design
1

Course overview
Through this course students can understand the concepts of user interface design for game.
CO1:: Analyze the world building concept for game design.
CO2:: Evaluate the essentials of worldbuilding for game design.
CO3:: Point out the narrative structure of creating life, places, culture with beyond and fantasy for worldbuilding in game design.
CO4:: Develop a fantasy world for a game.
CO5:: Produce a fantasy map for the game.
CO6:: Create a fantasy world using worldbuilding software .
Course outcomes Keywords
2
Core topic
1. Introduction and overview
2. Fundamental of user interface
3. Game user interface
4. UI design with photoshop
5. UI design in game engine

3
Topics include:
1. Principles of user interface
2. UI design process
3. Design principles
4. Wireframe
5. Graphic icon, image and color physiology
6. User experience and research

2.1 Principles of user interface
4
5. Lecture

Principles of user interface
XEROX STAR PRINCIPLES
It should be useful, accomplishing some business objectives faster and more efficiently
than the previously used method or tool did. It must also be easy to learn, for people
want to do, not learn to do.
The interface itself should serve as both a connector and a separator: a connector in that
it ties the user to the power of the computer, and a separator in that it minimizes the
possibility of the participants damaging one another. We will begin with the first set of
published principles, those for the Xerox STAR.
The illusion of manipulable objects: Displayed objects that are selectable and
manipulable must be created. A design challenge is to invent a set of displayable objects
that are represented meaningfully and appropriately for the intended application. It
must be clear that these objects can be selected.

Visual order and viewer focus: Effective visual contrast between various components of
the screen is used to achieve this goal. Animation is also used to draw attention, as is
sound. Feedback must also be provided to the user.
Revealed structure: The distance between one’s intention and the effect must be
minimized. The relationship between intention and effect must be tightened and made
as apparent as possible to the user.
Consistency: Consistency aids learning. Consistency is provided in such areas as element
location, grammar, font shapes, styles, and sizes, selection indicators, and contrast and
emphasis techniques.
Appropriate effect or emotional impact: The interface must provide the appropriate
emotional effect for the product and its market. Is it a corporate, professional, and
secure business system? Should it reflect the fantasy, wizardry, and bad puns of
computer games?

A match with the medium: The interface must also reflect the capabilities of the device
on which it will be displayed. Quality of screen images will be greatly affected by a
device’s resolution and color-generation capabilities.
GENERAL PRINCIPLES
The design goals in creating a user interface are described. They are fundamental to the
design and implementation of all effective interfaces, including GUI and Web ones.
These principles are general characteristics of the interface, and they apply to all
aspects.
The compilation is presented alphabetically, and the ordering is not intended to imply
degree of importance. They are derived from the various principles described in Galitz
(1992), IBM (1991, 2001), Mayhew (1992), Microsoft (1992, 1995, 2001), Open Software
Foundation (1993), and Verplank (1988).

1. Aesthetically Pleasing: Provide visual appeal by following these presentation and
graphic design principles:
• Provide meaningful contrast between screen elements
• Create groupings
• Align screen elements and groups
• Provide three-dimensional representation
• Use color and graphics effectively and simply
A design aesthetic, or visually pleasing composition, is attractive to the eye. It draws
attention subliminally, conveying a message clearly and quickly. Visual appeal makes a
computer system accessible and inviting. A lack of visually pleasing composition is
disorienting, obscures the intent and meaning, and slows down and confuses the user.
Visual appeal is terribly important today because most human-computer communication
occurs in the visual realm.

Visual appeal is provided by following the presentation and graphic design principles to be
discussed, including providing meaningful contrast between screen elements, creating spatial
groupings, aligning screen elements, providing three-dimensional representation, and using
color and graphics effectively. Good design combines power, functionality, and simplicity with
a pleasing appearance.
2. Clarity: The interface should be visually, conceptually, and linguistically clear, including:
• Visual elements
• Functions
• Metaphors
• Words and text
The interface must be clear in visual appearance, concept, and wording. Visual elements
should be understandable, relating to the user’s real-world concepts and functions.
Metaphors, or analogies, should be realistic and simple. Interface words and text should be
simple, unambiguous, and free of computer jargon.

4. Compatibility: Provide compatibility with the following:
• The user
• The task and job
• The product
Design must be appropriate and compatible with the needs of the user or client.
Effective design starts with understanding the user’s needs and adopting the user’s point
of view.
The organization of a system should match the tasks a person must do to perform the
job. The structure and flow of functions should permit easy transition between tasks.
The user must never be forced to navigate between applications or many screens to
complete routine daily tasks.

While compatibility across products must always be considered in relation to improving
interfaces, making new systems compatible with existing systems will take advantage of
what users already know and reduce the necessity for new learning.
5. Comprehensibility: A system should be easily learned and understood. A user should
know the following:
• What to look at
• What to do
• When to do it
• Where to do it
• Why to do it
• How to do it
The flow of actions, responses, visual presentations, and information should be in a
sensible order that is easy to recollect and place in context.

A system should be understandable, flowing in a comprehensible and meaningful order.
Strong clues to the operation of objects should be presented. The steps to complete a
task should be obvious. Reading and digesting long explanations should never be
necessary.
6. Configurability: Permit easy personalization, configuration, and reconfiguration of
settings.
• Enhances a sense of control.
• Encourages an active role in understanding.
Easy personalization and customization through configuration and reconfiguration of a
system enhances a sense of control, encourages an active role in understanding, and
allows for personal preferences and differences in experience levels. It also leads to
higher user satisfaction.

7. Consistency: A system should look, act, and operate the same throughout. Similar
components should:
• Have a similar look.
• Have similar uses.
• Operate similarly.
• The same action should always yield the same result.
• The function of elements should not change.
• The position of standard elements should not change.
Design consistency is the common thread that runs throughout these guidelines. It is the
cardinal rule of all design activities. Consistency is important because it can reduce
requirements for human learning by allowing skills learned in one situation to be transferred
to another like it. While any new system must impose some learning requirements on its
users, it should avoid encumbering productive learning with nonproductive, unnecessary
activity. Consistency also aids learning of the system’s mental model.

In addition to increased learning requirements, inconsistency in design has a number of other
prerequisites and by-products, including:
• More specialization by system users.
• Greater demand for higher skills.
• More preparation time and less production time.
• More frequent changes in procedures.
• More error-tolerant systems (because errors are more likely).
• More kinds of documentation.
• More time to find information in documents.
• More unlearning and learning when systems are changed.
• More demands on supervisors and managers.
• More things to do wrong.
Inconsistencies in design are caused by differences in people. Several designers might
each design the same system differently. Inconsistencies also occur when those
performing design activities are pressured by time constraints.

8. Control: The user must control the interaction.
• Actions should result from explicit user requests.
• Actions should be performed quickly.
• Actions should be capable of interruption or termination.
• The user should never be interrupted for errors.
Control is feeling in charge, feeling that the system is responding to your actions. Feeling
that a machine is controlling you is demoralizing and frustrating. The interface should
present a tool-like appearance.
Control is achieved when a person, working at his or her own pace, is able to determine
what to do, how to do it, and then is easily able to get it done. Simple, predictable,
consistent, flexible, customizable, and passive interfaces provide control.

Lack of control is signaled by unavailable systems, long delays in system responses,
surprising system actions, tedious and long procedures that cannot be circumvented,
difficulties in obtaining necessary information, and the inability to achieve the desired
results. The feeling of control has been found to be an excellent mitigator of the work
stress associated with many automated systems.
In general, avoid modes since they restrict the actions available to the user at any given
time. If modes must be used, they should be visually obvious (for example, a changed
mouse pointer shape). Existing modes must also be easy to learn and easy to remove.
9. Directness: Provide direct ways to accomplish tasks.
• Available alternatives should be visible.
• The effect of actions on objects should be visible.

Tasks should be performed directly. Available alternatives should be visible, reducing the
user’s mental workload. Directness is also best provided by the object-action sequence
of direct-manipulation systems. Tasks are performed by directly selecting an object, then
selecting an action to be performed, and then seeing the action being performed.
10. Efficiency: Minimize eye and hand movements, and other control actions.
• Transitions between various system controls should flow easily and freely.
• Navigation paths should be as short as possible.
• Eye movement through a screen should be obvious and sequential.
Eye and hand movements must not be wasted. One’s attention must be captured by
relevant elements of the screen when needed. Sequential eye movements between
screen elements should be predictable, obvious, and short. Web pages must be easily
scannable. All navigation paths should be as short as possible.

Manual transitions between various system controls should also be as short as possible.
Avoid frequent transitions between input devices such as the keyboard and mouse.
Always try to anticipate the user’s wants and needs. At each step in a process, present to
the user all the information and tools needed to complete the process. Do not require
user to search for and gather necessary information and tools.
11. Flexibility: A system must be sensitive to the differing needs of its users, enabling a
level and type of performance based upon:
• Each user’s knowledge and skills.
• Each user’s experience.
• Each user’s personal preference.
• Each user’s habits.
• The conditions at that moment.

12. Responsiveness: The system must rapidly respond to the user’s requests. An provide
immediate acknowledgment for all user actions:
• Visual.
• Textual.
• Auditory.
A user request must be responded to quickly. Knowledge of results, or feedback, is a
necessary learning ingredient. It shapes human performance and instills confidence. All
requests to the system must be acknowledged in some way. Feedback may be visual, the
change in the shape of the mouse pointer, or textual, taking the form of a message. It
may also be auditory, consisting of a unique sound or tone.

13. Simplicity: Provide as simple an interface as possible.
These are five ways to provide simplicity:
1. Use progressive disclosure, hiding things until they are needed.
• Present common and necessary functions first.
• Prominently feature important functions.
• Hide more sophisticated and less frequently used functions.
2. Provide defaults.
3. Minimize screen alignment points.
4. Make common actions simple at the expense of uncommon actions being made
harder.
5. Provide uniformity and consistency.

Introduce system components gradually so the full complexity of the system is not
visible at first encounter. Teach fundamentals first. Then, slowly introduce advanced or
more sophisticated functions.
Providing defaults is another form of system layering. When a system is first presented,
provide a set of defaults for all system-configurable items.
A larger number of alignment points of elements displayed on a screen are associated
with greater screen visual complexity.
Make common actions within a system easier to accomplish than uncommon actions.
The benefit will be greater overall system efficiency.
Inconsistency is really a foolish form of complexity. It forces a person to learn that things
that appear different are not different.

14. Transparency: Permit the user to focus on the task or job, without concern for the
mechanics of the interface.
• Workings and reminders of workings inside the computer should be invisible to the
user.
Never force the user to think about the technical details of the system. One’s thoughts
must be directed to the task, not the computer communication process. Reminders of
the mechanics of the interface occur through the use of technical jargon, the heavy use
of codes, and the presentation of computer concepts and representations.
15. Trade-Offs: Final design will be based on a series of trade-offs balancing often
conflicting design principles. People’s requirements always take precedence over
technical requirements.

Design guidelines often cover a great deal of territory and often conflict with one
another or with technical requirements. In such conflicts the designer must weigh the
alternatives and reach a decision based on trade-offs concerning accuracy, time, cost,
and ease of use.
Making these trade-offs intelligently requires a thorough understanding of the user and
all design considerations. The ultimate solution will be a blend of experimental data,
good judgment, and the important user needs.
This leads to a second cardinal rule of graphical system development: Human
requirements always take precedence over technical requirements.

2.2 Interface design process
25
6. Lecture

Interface design process
THE FIVE COMMANDMENTS
1. Discover everything there is to discover regarding users and their jobs.
2. Encourage early and continuous user participation.
3. Prototyping and testing should be done quickly.
4. Refine and change the design as much as you need to.
5. All of the elements of the system should be designed properly.

THE DESIGN TEAM
Provide a balanced design team, including specialists in:
1. Development
2. Human factors
3. Visual design
4. Usability assessment
5. Documentation
6. Training
A balanced design team with very different talents must be established. Needed are
specialists in development to define requirements and write the software, human
factors specialists to define behavioral requirements and apply behavioral
considerations, and people with good visual design skills. Also needed are people skilled
in testing and usability assessment, documentation specialists, and training specialists.

THE DESIGN PROCESS
STEP 1: KNOW WHO YOUR CUSTOMER OR CLIENT IS?
The most essential component of any computer system is the system user, and the
journey into the world of interface design and the screen design process must begin
with a knowledge of the system user. It is the user's needs that a system is designed to
meet. Because of the knowledge, skills, and attitudes divide that exists between system
users and the engineers who design them, understanding people and what they do is a
challenging and frequently neglected task. The designer must always execute the
following to build a really useful system:
• Identify the ways in which humans interact with computers.
• Understand the key human aspects in design.
• Establish the user's skills and experience.

• Evaluate the features of the user's requirements, duties, and professions.
• Analyze the psychological qualities of the user.
• Affect the physical features of the user.
• Use the approaches that have been provided to gain a better knowledge of your
consumers.
STEP 2: IDENTIFY THE BUSINESS FUNCTION
After gaining a deep knowledge of the user, the attention now switches to the business
function that needs to be resolved. Through task analysis, requirements must be defined and
user activities must be described. From them, a system's conceptual model will be developed.
Design standards must be developed (if they aren't already in place), usability goals must be
set, and training and documentation requirements must be defined. The scope of this work
does not allow for a detailed description of all of these issues. If further information is
needed, the user is directed to works that focus only on systems analysis, task analysis,
usability, training, and documentation. The following are the general actions to take:

• Analyze the business description and needs.
• Determine the fundamental business functions.
• Using task analysis, describe present actions.
• Create a system's conceptual model.
• Create design guidelines or style recommendations.
• Set usability design goals for the system.
• Determine the training and documentation requirements.
STEP 3 : UNDERSTAND THE PRINCIPLES OF GOOD SCREEN DESIGN
A screen that is well-designed:
• Its users' capabilities, requirements, and duties are reflected in it.
• Is created within the physical limitations of the technology on which it will be shown.
• Utilizes the capabilities of its controlling software to its full potential.
• It meets the business goals of the system for which it was created.

STEP 4 : CREATE MENUS AND NAVIGATION SCHEMES FOR THE SYSTEM
Menus are a common way for users to navigate around a system, and if they're well-designed,
they may help them build a mental picture of the system. The following menu themes will be
discussed in this stage.
1. The structures of menus.
2. The functions of menus.
3. The content of menus.
4. Formatting menus.
5. Navigation using menus.
6. Types of graphical menus.

1. The structures of menus
Single menu
Sequential linear menus
Simultaneous menus.

Hierarchical menus. Connected menus

2. The functions of menus.
• Navigation to a new menu
• Execute an action or procedure
• Displaying information
• Data or parameter input
3. Content of menu
Menu Context: A menu’s context provides information to keep the user oriented. This
kind of information is critical in complex or hierarchical menu systems, where loss of
position or disorientation can easily occur.
Menu Title: A menu’s title provides the context for the current set of choices. The title
must reflect the choice selected on the previously displayed menu.

4. Formatting of Menus
The human-computer interface has a rich history of experimental studies with menus,
the results of which can and have been applied to graphical screen and Web page menu
design and presentation. What follows is a series of guidelines for formatting menus.
a. Provide consistency with the user’s expectations.
b. Critical options should be continuously displayed
c. Ensure that a menu and its choices are obvious to the user by presenting them with
a unique and consistent structure, location, and/or display technique.
d. Provide both simple and complex menus.
• Simple: a minimal set of actions and menus.
• Complex: a complete set of actions and menus.
e. Create groupings of items that are logical, distinctive, meaningful, and mutually
exclusive.

5. Navigation
A well-designed navigation system facilitates quick and easy navigation between
components whose structure and relationship are easily comprehendible. For the user,
answers to the following questions must be obvious at all times during an interaction:
• Where am I now?
• Where did I come from?
• Where can I go from here?
• How can I get there quickly?
6. Kinds of Graphical Menus
Providing the proper kinds of graphical menus to perform system tasks is also critical to
system success. The best kind of menu to use in each situation depends on several
factors.

The following must be considered:
• The number of items to be presented in the menu.
• How often the menu is used.
• How often the menu contents may change.
Type of graphic menu
1. Menu bar Pull-down menu

Cascading menu.
Pop-up menu.
Tear off menu
Pie menu.

STEP 5 : SELECT THE PROPER KINDS OF WINDOWS
A window is an area of the screen, usually rectangular in shape, defined by a border that
contains a particular view of some area of the computer or some portion of a person’s dialog
with the computer. It can be moved and rendered independently on the screen. A window
may be small, containing a short message or a single field, or it may be large, consuming most
or all of the available display space. A display may contain one, two, or more windows within
its boundaries.
Component's of windows:
• Frame
• Title bar and icon
• Button
• Menu, status, scroll and tool bar
• Split box
• Work area

STEP 6 : SELECT THE PROPER DEVICE-BASED CONTROLS
Device-based controls, often called input devices, are the mechanisms through which people
communicate their desires to the system. The evolution of graphical systems has seen a whole
new family of devices provided to assist and enhance this communication. These new
mechanisms are most commonly referred to as pointing devices. In this step, we will:
Identify the characteristics and capabilities of various device-based controls:
• Trackball
• Joystick
• Graphic tablet
• Light pen
• Touch screen
• Voice
• Mouse
• Keyboard

STEP 7 : CHOOSE THE PROPER SCREEN BASED CONTROLS
Screen-based controls, often simply called controls and sometimes called widgets, are the
elements of a screen that constitute its body. By definition, they are graphic objects that
represent the properties or operations of other objects. A control may:
• Permit the entry or selection of a particular value.
• Permit the changing or editing of a particular value.
• Display only a particular piece of text, value, or graphic.
• Cause a command to be performed.
• Possess a contextual pop-up window.

STEP 8 : WRITE CLEAR TEXT AND MESSAGES
The wording of the interface and its screens is the basic form of communication with the
user. Clear and meaningfully crafted words, messages, and text lead to greatly enhanced
system usability and minimize user confusion that leads to errors and possibly even
system rejection. In this step, general guidelines for choosing the proper words and
writing clear messages and text will be presented.
All communications should simply, clearly, and politely provide the information one must have
to effectively use a system. The design of these communications must take into account the
user’s experience and knowledge of the system topic, and how much information the user
actually needs to efficiently interact with the system. Like all aspects of interface design,
knowing the user is the first step in choosing the proper words and creating acceptable
messages and text.

STEP 9 : PROVIDE EFFECTIVE FEEDBACK AND GUIDANCE AND ASSISTANCE
All user actions must be reacted to in some way. Feedback, as has been noted, shapes
human performance. Without it, we cannot learn. To aid user learning and avoid
frustration, it is also important to provide thorough and timely guidance and assistance.
In this step, the following feedback topics are addressed:
• Acceptable response times.
• Dealing with time delays.
• Blinking for attention.
• The use of sound.
This will be followed by a review of guidance and assistance, including:
• Preventing errors and problem management.
• The types of guidance and assistance to provide.

• Instructions or prompting.
• A Help facility.
• Contextual Help.
• Task-oriented Help.
• Reference Help.
• Wizards.
• Hints or tips.
STEP 9 : PROVIDE EFFECTIVE FEEDBACK AND GUIDANCE AND ASSISTANCE
Today the Internet and the market for software are global. It crosses endless culture and language
boundaries, each with its own requirements, conventions, customs, and definitions of acceptability.
To be accepted, and used, a screen’s text and images must reflect the needs and sensibility of each
partner in the worldwide community where it is used. To make a product acceptable worldwide, it
must be internationalized. A system must also be designed to be usable by an almost unlimited
range of people, being accessible to anyone who desires to use it. The design concepts used to
achieve these goals are called internationalization and accessibility.

STEP 10 : CREATE MEANINGFUL ICONS
Icons
Icons are most often used to represent objects and actions with which users can interact with
or that they can manipulate. These types of icons may stand alone on a desktop or in a
window, or be grouped together in a toolbar. A secondary use of an icon is to reinforce
important information, a warning icon in a dialog message box, for example.
Whatever the past, today, objects or actions are depicted on screens by icons. The term icon
by itself, however, is not very specific and can actually represent very different things. An
attempt has been made by some to define the actual types of icons that do exist. Marcus
(1984) suggests icons fall into these categories:
Icon. Something that looks like what it means.
Index. A sign that was caused by the thing to which it refers.
Symbol. A sign that may be completely arbitrary in appearance.

He states that what are commonly referred to as icons may really be indexes or symbols.
• A true icon is something that looks like what it means. It is representational and easy
to understand.
• A picture of a telephone or a clock on a screen is a true icon. An index is a sign caused
by the thing to which it refers. An open door with a broken window indicates the
possible presence of a burglar. The meaning of an index may or may not be clear,
depending upon one’s past experiences.
• A symbol is a sign that may be completely arbitrary in appearance and whose
meaning must be learned. The menu and sizing icons on screens are examples of
symbols. From this perspective, strictly speaking, so-called icons on screens are
probably a mixture of true icons, signs, and indexes.

Factors influence an icon’s usability:
1. Provide icons that are:
a. Familiar.
b. Clear and Legible.
c. Simple.
d. Consistent.
e. Direct.
f. Efficient.
g. Discriminable.
2. Also consider the:
a. Context in which the icon is used.
b. Expectancies of users.
c. Complexity of task.

STEP 11 : CHOOSE THE PROPER COLORS
Color adds dimension, or realism, to screen usability. Color draws attention because it attracts a
person’s eye. If used properly, it can emphasize the logical organization of information, facilitate the
discrimination of screen components, accentuate differences among elements, and make displays
more interesting. If used improperly, color can be distracting and possibly visually fatiguing,
impairing the system’s usability. So in this process follow these:
• Choose the proper colors for textual graphic screens.
• Choose the proper colors for statistical graphics screens.
• Choose the proper color for Web screen text and images.
STEP 11 : ORGANIZE AND LAYOUT WINDOWS AND PAGES
During the design process to this point, the individual elements, or building blocks, of screens
will have been identified, and each element’s content and wording established. A logical flow
of information will also have been determined. The next step is to organize and lay out
individual windows and Web pages clearly and meaningfully.

STEP 12 : USABILITY TESTING
Usability testing serves a twofold purpose. First, it establishes a communication bridge
between developers and users. Through testing, the developer learns about the user’s
goals, perceptions, questions, and problems. Through testing, the user is exposed to the
capabilities of the system early on, before design is solidified.
Second, testing is used to evaluate a product. It validates design decisions. It also can
identify potential problems in design at a point in the development process where they
can be more easily addressed.
Testing also enables comparison of alternate versions of a design element, when a clear
direction is not immediately evident. How well the interface and screens meet user
needs and expectations can also be assessed.

2.3 Prototype
50
7. Lecture

PROTOTYPING USER EXPERIENCE
A prototype is a rough version or version of a product created by a design team or front-
end development team throughout the design phase. A prototype's purpose is to test
the flow of a design solution and receive input from both employees and customers
before building the final product. A prototype is in a state of change as the team
modifies the design iteratively depending on user input.
WHY ARE PROTOTYPES NECESSARY?
Prototyping is essential to the design process for two reasons:
1. UX designers may use prototypes to show users how the final product will appear
and operate.

2. Prototypes encourage input both team members as well as user test groups. Potential
consumers may engage with a near-final product and point out parts that aren't user-
friendly. The design team may then iterate on the design before the product team
launches the final product, saving the business time and money.
PROTOTYPES' TYPES AND FIDELITY
There is no one-size-fits-all approach to prototyping. Each prototype's kind and fidelity
are up to the UX designer's decision. There are, however, a few recommended practices
to remember. A designer usually decides the fidelity of a prototype based on the phase
of the design process, available resources, and the prototype's aims.
A low-fidelity prototype, for example, could serve if the objective is to offer the
customer an early sense of the user flow. A more visually attractive, high-fidelity
prototype, on the other hand, could be desirable if the aim is to run a prototype past a
focus group and observe how potential consumers engage with it.

The fidelity of a prototype relates to how near it is to the final product. A sketched
prototype is low-fidelity, but an HTML/CSS prototype is extremely high-fidelity.
Let's examine the many sorts of low-fidelity and high-fidelity prototypes.
1. LOW-FIDELITY
Low-fidelity prototyping is a quick, easy technique of developing a design idea into a
rather more physical version of a software product. The objective of a low-fidelity
prototype is to describe a product’s flow and evaluate the utility and usability of its
features. Hence, low-fidelity prototypes are not as aesthetically polished as high-fidelity
prototypes. Examples of low-fidelity prototypes include:
1. sketches
2. paper prototypes
3. click-through prototypes

Sketches
Sketched prototypes, like those
illustrated in Figure 7.1, are frequently
free-form, pen-and-pencil drawings that
sketch out an early concept.
They are the most basic type of
prototype. Sketches are commonly used
by UX designers to generate ideas and
engage with product teams.
Figure 7.1

When Should You Make Sketches?
Sketching is typically used at the beginning of the design process. Sketches are
frequently used to start conversations about usability and project goals, as well as to
generate design concepts. The sketches can be created by a single UX designer or by a
complete product team working together. Other people of the UX team—designers and
researchers—the marketing department, or other users may be included in the sketching
process. You can use a sketch to communicate the original idea to other users and teams
if your product team has agreed on one.
There are numerous advantages to sketching, but the most important benefit is that it is
quick. A sketch can be made in under a minute using pencil and paper, a whiteboard, or
software. Sketching does not require any programming skills. It is also cheap. Sketching is
a good approach to get all stakeholders engaged in the design process when it's a
collaborative process. Sketches are also simple to modify, whether with an eraser or by
rearranging a group of pictures.

PAPER PROTOTYPES
Sketches are not the same as paper prototypes.
While paper prototypes are also used in the early
stages of the design process, their structure is more
defined than that of a group of sketches. Paper
prototypes, on the other hand, often include using
stencils and cardboard to make more significant,
detailed mockups of various Web pages or
application screens for usability testing. You can
also use Post-it Notes or other paper add-ons with
these. Paper prototyping is typically collaborative,
similar to sketching, and is a suitable first step
before going on to an interactive prototype. Figure
7.2 depicts the instruments used to make paper
prototypes.
Figure 7.2

When Should You Make Paper prototypes? And benefits
Paper prototypes, like sketches, are frequently created at the start of the design process.
Paper prototypes can be used as the first step in prototyping or as a follow-up to your
first designs. To better explain user flows or represent drop-down menus and other on-
screen features, you can add Post-it Notes or index cards to simple sketches. Early in the
design process, employ paper prototypes to illustrate a user interface during usability
testing.
Creating paper prototypes is similar to sketching in that it is quick, simple, and
inexpensive, and it requires no technical skills. Creating a paper prototype is frequently a
collaborative effort. Paper prototypes are simple to change and allow teams to
experiment with different user-flow options and design aspects.

CLICK-THROUGH PROTOTYPES
As shown in Figure 7.3, click-through prototypes
depict the items on the pages of a website or the
screens of an app. They use hotspots to connect
many screens. These prototypes are higher-fidelity
variants of low-fidelity prototypes as well as the
most basic interactive prototypes.
Some apps allow you to generate prototypes from
scratch, while others allow you to upload your early
ideas or paper prototypes and turn them into a
digital version so you can test and refine your
concepts.
Figure 7.3

When Should You Make Clickable prototypes ? And benefits
While sketching and paper prototypes are excellent first steps, click-through prototypes
allow you to go even further. Using a click-through prototype to evaluate product flows
early in the design process is a wonderful approach to save time.
Clickable prototypes are more realistic than sketches and paper prototypes at simulating
a real user experience. As a result, they require less creativity from your teammates.
While they take longer to make than their other low-fidelity competitors, they are far
less time-consuming to make than high-fidelity prototypes.

2. HIGH-FIDELITY
Prototypes with higher fidelity are more advanced than those with lower fidelity. They're
more appealing to the eye, and their function is more similar to that of the final product.
When a team has a clear understanding on what they want the completed product to
represent, high-fidelity prototypes are often created later in the design phase. High-
fidelity prototypes are sometimes preferable to low-fidelity prototypes for usability
testing. High-fidelity prototypes include, for example,
1. Interactive prototypes
2. Digital prototypes
3. Coded prototypes

INTERACTIVE PROTOTYPES
Interactive prototypes, like the one shown in Figure
7.4, are more advanced versions of click-through
prototypes that you may make with a prototyping
tool that supports interactivity but only medium-
fidelity visual design.
They are, in a sense, the culmination of the process
of drawing and then making paper or click-through
prototypes. Interactive prototypes are more
aesthetically beautiful than their low-fidelity
prototype predecessors because they are clickable
and responsive, allowing people to engage with
them and witness animations in response.
Figure 7.4

When Should You Make Interactive prototypes ? And benefits
When a product's design and functionality are reasonably well established, you'll often
construct interactive prototypes later in the design and prototyping process. Interactive
prototypes are better for gathering input and doing usability testing than low-fidelity
prototypes since they are more realistic.
Low-fidelity prototypes appear less lifelike than interactive prototypes. They're also
clickable and responsive, giving stakeholders a solid notion of how the final product will
look and function. However, because these prototypes are created before the product is
developed, there is still time for design revisions.
To construct interactive prototypes, you probably don't need to know how to code
because a variety of tools provide drag-and-drop user interfaces that make the process
simple.

DIGITAL PROTOTYPES
A digital prototype, created with prototyping
software, is the most common sort of high-
fidelity prototype. It allows UX designers to
produce aesthetically rich, interactive, and
even animated product prototypes of a user
interface that is almost ready for execution.
These prototypes, as illustrated in Figure 5,
have a realistic appearance and allow for
more accurate testing of user-interface
elements.
Figure 7.5

When Should You Make Digital prototypes ? And benefits
Only create a digital prototype when a product and its flow have been thoroughly
thought out and accepted by key stakeholders for final testing and deployment. Because
digital prototypes require a significant amount of time and work to create, they should
never be the initial stage in the prototyping process.
Digital prototypes are as similar to the final product as feasible in terms of appearance,
but not in terms of functionality. They may, however, be dynamic and animated, with
seamless page transitions.

DIGITAL PROTOTYPES
Creating a coded prototype like the one shown in Figure 7.6 is more
difficult since it necessitates the knowledge of coding by the UX
designer or prototype.
These prototypes are the most accurate representations of a
product's final design and are the most effective way to get
customer feedback.
A coded prototype should be the final type of prototype you create.
Because coded prototypes are the most realistic and closest to the
final product, they’re ideal for usability testing. While digital
prototypes look, but don’t behave like the final product, coded
prototypes both look and behave as much like the final product as
possible.
Figure 7.5

FINAL CONCLUSION
Types of low-fidelity prototypes include sketches, paper prototypes, and clickable
prototypes. Benefits of low-fidelity prototypes are that they’re
 fast
 cheap
 easy to revise
Types of high-fidelity prototypes include interactive prototypes, digital prototypes, and
coded prototypes. They offer the following benefits:
 They’re more realistic in terms of both visual design and functionality.
 They require less imagination on the part of reviewers and approvers.
 They’re better for sharing with external parties and soliciting feedback

2.4 Player-Centric Interface
Design
67
10. Lecture

Player-Centric Interface Design
A game’s user interface plays a more complex role than does the UI of most other kinds
of programs. Most computer programs are tools, so their interfaces allow the user to
enter and create data, to control processes, and to see the results.
A video game, on the other hand, exists to entertain and, although its user interface
must be easy to learn and use, it doesn’t tell the player everything that’s happening
inside the game, nor does it give the player maximum control over the game. It
mediates between the internals and the player, creating an experience for the player
that feels to him like gameplay and storytelling.
SOME GENERAL PRINCIPLES
The following general principles for user interface design apply to all games regardless
of genre:

1. Be consistent. This applies to both aesthetic and functional issues; your game should
be stylistically as well as operationally consistent. If you offer the same action in several
different gameplay modes, assign that action to the same controller button or menu
item in each mode. The names for things that appear in indicators, menus, and the main
view should be identical in each location. Your use of color, capitalization, typeface, and
layout should be consistent throughout related areas of the game.
2. Give good feedback. When the player interacts with the game, he expects the game
to react—at least with an acknowledgment—immediately. When the player presses any
screen button, the game should produce an audible response even if the button is
inactive at the time. An active button’s appearance should change either momentarily
or permanently to acknowledge the player’s click.

3. Remember that the player is the one in control. Players want to feel in charge of the
game—at least in regard to control of their avatars. Don’t seize control of the avatar and
make him do something the player may not want. The player can accept random,
uncontrollable events that you may want to create in the game world or as part of the
behavior of nonplayer characters, but don’t make the avatar do random things the user
didn’t ask him to do.
4. Limit the number of steps required to take an action. Set a maximum of three
controller-button presses to initiate any special move unless you need combo moves for
a fighting game. The casual gamer’s twitch ability tops out at about three presses.
Similarly, don’t require the player to go through menu after menu to find a commonly
used command.

5. Permit easy reversal of actions. If a player makes a mistake, allow him to undo the
action unless that would affect the game balance adversely. Puzzle games that involve
manipulating items such as cards or tiles should keep an undo/redo list and let the
player go backward and forward through it, though you can set a limit on how many
moves backward and forward the game permits.
6. Minimize physical stress. Video games famously cause tired thumbs, and
unfortunately, repetitive stress injuries from overused hands can seriously debilitate
players. Assign common and rapid actions to the most easily accessible controller
buttons. Not only do you reduce the chance of injuring your player, but you allow him to
play longer and to enjoy it more.
7. Don’t strain the player’s short-term memory. Don’t require the player to remember
too many things at once; provide a way for him to look up information that he needs.
Display information that he needs constantly in a permanent feedback element on the
screen.

8. Group related screen-based controls and feedback mechanisms on the screen. That
way, the player can take in the information he needs in a single glance rather than
having to look all over the screen to gather the information to make a decision.
9. Provide shortcuts for experienced players. Once players become experienced with
your game, they won’t want to go through multiple layers of menus to find the
command they need. Provide shortcut keys to perform the most commonly used actions
from the game’s menus, and include a key-reassignment feature.

Quiz session
Question 1
Is Clarity means the interface should be visually,
conceptually, and linguistically clear?
Yes or no

Quiz session
Question 2
Is Design must be appropriate and compatible with the
needs of the user or client. ?
Yes or no

Quiz session
Question 3
Is Comprehensibility means a system should be easily
learned and understood?
Yes or no

Quiz session
Question 4
Is Configurability means permit easy personalization,
configuration, and reconfiguration of settings?
Yes or no

Quiz session
Question 5
What kind of menu structure system is this?
A: Single
B: Multiple

Quiz session
Question 6
A: Sequential linear menus
B: Simultaneous menus.

Quiz session
Question 7
A: Multiple menus
B: Simultaneous menus.

Quiz session
Question 8
Is navigation tell the user?
A. Where am I now?
B. Where did I come from?
C. Where can I go from here?
D. How can I get there quickly?
Yes or no

Quiz session
Question 9
What kind of graphic menu is this?
A: Menu bar
B: Pull-down menu

Quiz session
Question 10
What kind of graphic menu is this?
A: Menu bar
B: Pull-down menu

Quiz session
Question 11
Is these are the Component's of windows?
A. Menu, status, scroll and tool bar
B. Split box
C. Work area
Yes or no

Quiz session
Question 12
Icons are most often used to represent objects and
actions with which users can interact with or that they
can manipulate?
Yes or no

Quiz session
Question 13
UX designers may use prototypes to show users how the
final product will appear and operate.
Yes or no

Quiz session
Question 14
Is a prototype's purpose is to test the flow of a design
solution and receive input from both employees and
customers before building the final product?
Yes or no

Quiz session
Question 15
Is Low-fidelity prototyping is a quick, easy technique of
developing a design idea into a rather more physical
version of a software product?
Yes or no

Quiz session
Question 16
Is Low-fidelity prototyping is including:
1. Interactive prototypes
2. Digital prototypes
3. Coded prototypes
Yes or no

Quiz session
Question 17
Graphic design and typography are utilized to support
its usability, influencing how the user performs certain
interactions and improving the aesthetic appeal of the design.
Is this statement is true or false?
A: True
B: False

Quiz session
Question 18
Command Line Interface requires users to type appropriate
instructions into the command line.
A: True
B: False

Quiz session
Question 19
The menu-driven user interface provides you with a range of
commands or options in the form of a list or menu displayed in
full-screen, pop-up, pull-down, or drop-down.
A: True
B: False

Quiz session
Question 20
Conversational UIs allow users to interact with computers
simply by telling them what to do. It can be verbal or voice-
controlled (like Siri or Alexa) or written (like chatbots).
A: True
B: False

Quiz session
Question 21
About 5,000-6,000 years ago, the first interface mankind used
to control a horse was a rope around its neck or nose.
A: True
B: False

Quiz session
Question 21
Is keyboard is a type of interface?
A: True
B: False

Game interface design part 2

More Related Content

What's hot (19)

Similar to Game interface design part 2 (20)

More from Durgesh Pandey (20)

Recently uploaded (20)

Game interface design part 2