SlideShare a Scribd company logo
B.Des Game/ BSc Game AFT: 713 Credit: 2
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. Unity game engine introduction
5. UI design with photoshop
6. UI design with game engine
1. Introduction and overview
1.1 Introduction to user interface
3
1. Lecture
1. Introduction and overview
Topics include:
1. Introduction to user interface
2. Types of user interface
3. Graphic user interface definition
4. History of user interface
5. Difference between UI and UX
6. Characteristics of GUI
7. Advantages and disadvantages
1. Introduction and overview
1.1 Introduction
4
1. Lecture
Introduction to user interface
Human-computer interaction is a topic of research that includes interface design (HCI).
Human-computer interaction (HCI) is the study, planning, and design of how humans
and computers interact to meet people's needs in the most efficient way possible.
• The user interface is the part of a computer and its software that people can see,
hear, touch, talk to, or otherwise understand or direct. The user interface has
essentially two components:
Input Output
Introduction to user interface
• Input is how people communicate his needs to the system using keyboard or any
pointing device and output is how the system returns processing result to user
through screen or sound.
• The best interface is one which has proper design with combination of effective input
and output mechanisms.
• The goal of user interface design is to make the user's interaction as simple and
efficient as possible, in terms of accomplishing user goals (user-centered design).
Introduction to user interface
User interface design or user interface engineering is the design of user interfaces for
machines and software, such as computers, home appliances, mobile devices, and
other electronic devices, with the focus on maximizing usability and the user
experience.
• Good user interface design makes it easier to do the work at hand without attracting
too much attention to itself.
• 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.
Introduction to user interface
IMPORTANCE OF GOOD DESIGN
• Inspite of today’s rich technologies and tools we are unable to provide effective and
usable screen because lack of time and care.
• A well-designed interface and screen is terribly important to our users. It is their
window to view the capabilities of the system and it is also the vehicle trough which
complex tasks can be performed.
• A screen’s layout and appearance affect a person in a variety of ways. If they are
confusing and inefficient, people will have greater difficulty in doing their jobs and
will make more mistakes.
• Poor design may permanently push some users away from a system. It can also
create dissatisfaction, frustration, and an increase in stress levels.
Introduction to user interface
BENEFITS OF GOOD DESIGN
• The benefits of a well-designed screen have also been under experimental study for
many years. One researcher, for example, attempted to improve screen clarity and
readability by making screens less crowded. The result: screen users of the modified
screens completed transactions in 25 percent less time and with 25 percent fewer
errors than those who used the original screens.
• Good design principles reduced decision-making time by about 40 percent, resulting
in a savings of 79 person-years in the affected system.
Introduction to user interface
USER INTERFACE & USER EXPERIENCE DEFFRENCE
What is UI?
The “UI” in UI design stands for “user interface.” The user interface is the graphical
layout of an application. It consists of the buttons users click on, the text they read, the
images, sliders, text entry fields, and all the rest of the items the user interacts with. This
includes screen layout, transitions, interface animations and every single micro-
interaction. Any sort of visual element, interaction, or animation must all be designed.
This job falls to UI designers. They decide what the application is going to look like. They
have to choose color schemes and button shapes — the width of lines and the fonts
used for text. UI designers create the look and feel of an application’s user interface.
Introduction to user interface
UI designers are graphic designers. They’re concerned with aesthetics. It’s up to them to
make sure the application’s interface is attractive, visually-stimulating and themed
appropriately to match the purpose and/or personality of the app. And they need to
make sure every single visual element feels united, both aesthetically, and in purpose.
What is UX?
“UX” stands for “user experience.” A user’s experience of the app is determined by how
they interact with it. Is the experience smooth and intuitive or clunky and confusing?
Does navigating the app feel logical or does it feel arbitrary? Does interacting with the
app give people the sense that they’re efficiently accomplishing the tasks they set out to
achieve or does it feel like a struggle? User experience is determined by how easy or
difficult it is to interact with the user interface elements that the UI designers have
created.
Introduction to user interface
So UX designers are also concerned with an application’s user interface, and this is why
people get confused about the difference between the two. But whereas UI designers
are tasked with deciding how the user interface will look, UX designers are in charge of
determining how the user interface operates.
They determine the structure of the interface and the functionality. How it’s organized
and how all the parts relate to one another. In short, they design how the interface
works. If it works well and feels seamless, the user will have a good experience. But if
navigation is complicated, then a bad user experience is likely.
There’s also a certain amount of iterative analysis involved in UX design. UX designers
will create wireframe rendering of their interface interactions and get user feedback.
They’ll integrate this into their designs. It’s important for UX designers to have a holistic
understanding of how users prefer to interact with their applications.
Introduction to user interface
HOW THEY WORK TOGETHER
So a UX designer decides how the user interface works while the UI designer decides how
the user interface looks. This is a very collaborative process, and the two design teams
tend to work closely together. As the UX team is working out the flow of the app, how all of
the buttons navigate you through your tasks, and how the interface efficiently serves up
the information user’s need, the UI team is working on how all of these interface elements
will appear on screen.
Let’s say at some point in the design process it’s decided that extra buttons need to be
added to a given screen. This will change how the buttons will need to be organized and
could require changing their shape or size. The UX team would determine the best way to
lay out the buttons while the UI teams adapt their designs to fit the new layout. Constant
communication and collaboration between UI and UX designers help to assure that the
final user interface looks as good as it can, while also operating efficiently and intuitively.
Introduction to user interface
RESEARCH IS KEY
Research is vital for both UI and UX designers. It’s important for both disciplines to gather
as much good information as possible to assist them in crafting appropriate designs, and
both follow a similar approach.
Both will research what users want. What they expect from applications of the sort being
developed. This research is often iterative, involving usability sessions, where real users
will interact with scaled versions of certain functionality or visual designs being tested to
determine whether the designers are moving down the proper path. Feedback is
integrated with each iteration.
This process involves generating low fidelity prototypes, like wireframe renderings of
interface elements in order to gauge a user’s response strictly to the functionality being
tested. This can also involve fast visual prototypes and A/B tests of different possible
versions of the look and feel of the interface to determine which one users prefer.
Introduction to user interface
RESEARCH IN UI DESIGNS
UI designers need to make sure the visual language they choose fits the class of
application they’re writing. They’re trying to predict user expectations. If your team is
designing a travel app, it’s important to research how other travel apps have been
developed in the past. Which ones worked? Which ones didn’t? There are design lessons
to be learned from the work others have done before.
Research might indicate that people prefer outlined icons instead of bold shapes. This is
a visual shorthand that people are comfortable with and enjoy. UI designers would then
do well to incorporate that lesson.
The exact aesthetic they choose is up to them, but the basic “rules,” or the need to
conform to user expectations, is something designers ignore at their own risk.
Introduction to user interface
Not to say risks shouldn’t be taken. UI designers want their interface designs to stand
out and be memorable. But this must be balanced against making sure people recognize
the purpose of the elements you’re placing on screen.
RESEARCH FOR UX DESIGN
UX design is particularly interested in user expectations. All of the experiences and
interactions that users have had with every application they’ve used in their lives have
helped set their expectations for how interfaces are supposed to work. If a UX designer
isn’t intimately familiar with these expectations, they could inadvertently design an
interface interaction that seems logical to them but breaks commonly accepted
conventions. Users don’t like when an interface behaves very differently than they were
expecting, and this could negatively impact their experience.
Introduction to user interface
If a UX designer decides to do something different, they need to have a very good
reason, because breaking a deeply trained expected behavior will likely cause people to
do the wrong thing frequently.
As an example, most people are comfortable with the idea that you click twice on a file
to open it and once to select it. This is an interface behavior that has existed almost as
long as there have been graphical user interfaces.
Introduction to user interface
UI VS. UX: TWO VERY DIFFERENT DISCIPLINES THAT WORK IN HARMONY
UI design and UX design involve very different skill sets, but they are integral to each
other’s success. A beautiful design can’t save an interface that’s clunky and confusing to
navigate, and a brilliant, perfectly-appropriate user experience can be sunk by bad visual
interface design that makes using the app unpleasant.
Both UI and UX designs need to be flawlessly executed and perfectly aligned with pre-
existing user expectations to create an excellent user interface/experience. And when
those stars align the results can be astounding.
1. Introduction and overview
1.2 Types user interface
19
2. Lecture
Types of user interface
1. Command Line Interface
2. Menu-driven Interface
3. Graphical User Interface
4. Touchscreen Graphical User Interface
5. Conversational UI (Voice over interface)
Types of user interface
1. Command Line Interface: The command line interface is no longer common as a
form of basic user interface in everyday consumer products, but it is still in use
under certain circumstances. Command Line Interface requires users to type
appropriate instructions into the command line.
Advantages Disadvantages
Simple structure Difficult to learn command
language
Minimal memory usage Complex for beginner users
Great for slow-running
computers, or those low on
memory
Something hanging issue
An expert CLI user can give
commands and perform tasks
much faster than when using an
alternative UI type
Minimal error message
information
Types of user interface
2. Menu driven Interface: 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. An ATM is an example of a menu-driven interface.
Advantages Disadvantages
It is not necessary to remember
a long list of manual commands
Slower for experienced users
Simple interface for novices Limited menu options
Self-explanatory menu options Often requires you to access
multiple menu screens to
perform simple functions
Types of user interface
3. Graphic user Interface: The graphical user interface, or GUI, is the type of interface
with which the majority of people are the most familiar. You interact with these
interfaces by using a mouse, tack pad, or other peripheral to point and click on graphics
or icons.
Advantages Disadvantages
Self-explanatory and easy to use
Uses large amounts of memory –
however this is less of a concern as
computers get more powerful.
Memorizing command lists is not
necessary
Allows for running multiple
applications, programs, and tasks
simultaneously
Solid support facilities
The similar format among different
programs adds familiarity
Makes for easy design and
formatting
Types of user interface
4. Touch screen Interface: The touchscreen GUI is very similar to the regular GUI, except
that you use your fingers or a stylus to select icons and perform tasks, rather than a
mouse or trackpad.
Advantages Disadvantages
Easier and quicker than manipulating a
mouse or typing
Control elements size is limited by
mobile display size
Avoids external devices such as a
keyboard or mouse
Possibility of adding various motion
actions
Additional motions may not be easy to
discover
Accessible to children and elders
Zoom-in gestures promote accessibility
for visually impaired May be unnecessarily activated by stray
touches
Adaptable to a wide range of devices
Types of user interface
5. Conversational Interface: 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). In order to employ the first type, the software should have
voice recognition capabilities.
Advantages Disadvantages
Versatile in applications Limited amount of visual and textual
clues
No need to learn new skills
Voice provides a realistic feel
Connects with users on a personal
level
Responds with context to build
interactions
Articulating commands might be
complicated
Adapts to gender, tone, accent, and
pace of speech
Can be integrated into existing apps
1. Introduction and overview
1.3 Graphic user interface
26
3. Lecture
Graphic user interface
GRAPHIC USER INTERFACE DEFINITION
• In brief, a graphical user interface can be defined as follows. A user interface, as
recently described, is a collection of techniques and mechanisms to interact with
something. In a graphical interface, the primary interaction mechanism is a pointing
device of some kind.
• What the user interacts with is a collection of elements referred to as objects. They
can be seen, heard, touched, or otherwise perceived. Objects are always visible to
the user and are used to perform tasks. They are interacted with as entities
independent of all other objects.
• People perform operations, called actions, on objects. The operations include
accessing and modifying objects by pointing, selecting, and manipulating.
BENEFITS OF GOOD DESIGN
• Other benefits also accrue from good design. Training costs are lowered because
training time is reduced, support line costs are lowered because fewer assist calls are
necessary, and employee satisfaction is increased because aggravation and
frustration are reduced.
• Another benefit is, ultimately, that an organization’s customers benefit because of
the improved service they receive.
• Identifying and resolving problems during the design and development process also
has significant economic benefits.
Graphic user interface
POPULARITY OF GRAPHICS
• Graphics revolutionized design and the user interface. Graphics assumes three
dimensional look whereas text based system assumes one dimensional look.
• Information can appear or disappear through floating windows and navigation and
commands can be done through menu or pull downs or screen controls.
• Increased computer power and the vast improvement in the display enable the user’s
actions to be reacted to quickly, dynamically, and meaningfully.
• If properly used graphics can reduce mental and perceptional load and increases
information transfer between men and machine because of visual comparisons and
simplification of the perception of structure.
Graphic user interface
CONCEPT OF DIRECT MANIPULATION
The term used to describe this style of interaction for graphical systems was first used by
Shneiderman (1982). He called them “direct manipulation” systems, suggesting that
they possess the following characteristics:
• The system is portrayed as an extension of the real world: A person is allowed to
work in a familiar environment and in a familiar way, focusing on the data, not the
application and tools. The physical organization of the system, which most often is
unfamiliar, is hidden from view and is not a distraction.
• Continuous visibility of objects and actions: objects are continuously visible.
Reminders of actions to be performed are also obvious. Nelson (1980) described this
concept as “virtual reality,” a representation of reality that can be manipulated.
Graphic user interface
• Actions are rapid and incremental with visible display of results: The results of
actions are immediately displayed visually on the screen in their new and current
form. Auditory feedback may also be provided. The impact of a previous action is
quickly seen, and the evolution of tasks is continuous and effortless.
• Incremental actions are easily reversible: Finally, actions, if discovered to be
incorrect or not desired, can be easily undone.
INDIRECT MANIPULATION
In practice, indirect manipulation of all screen objects and actions may not be workable
because of the following:
• The operation may be difficult to conceptualize in the graphical system. The graphics
capability of the system may be limited.
Graphic user interface
• The amount of space available for placing manipulation controls in the window
border may be limited.
• It may be difficult for people to learn and remember all the necessary
operations and actions.
When this occurs, indirect manipulation is provided. Indirect manipulation substitutes
words and text, such as pull-down or pop-up menus, for symbols, and substitutes typing
for pointing.
Graphic user interface
Graphic user interface
GRAPHICAL SYSTEM ADVANTAGES
The success of graphical systems has been attributed to a host of factors. The following
have been commonly referenced in literature and endorsed by their advocates as
advantages of these systems.
• Symbols recognized faster than text: symbols can be recognized faster and more
accurately than text. An example of a good classification scheme that speeds up
recognition is the icons. These icons allow speedy recognition of the type of message
being presented.
• Faster learning: a graphical, pictorial representation aids learning, and symbols can
also be easily learned.
Graphic user interface
• Faster use and problem solving: Visual or spatial representation of information has
been found to be easier to retain and manipulate and leads to faster and more
successful problem solving.
• Easier remembering: Because of greater simplicity, it is easier for casual users to
retain operational concepts.
• More natural: symbolic displays are more natural and advantageous because the
human mind has a powerful image memory.
• Fewer errors: Reversibility of actions reduces error rates because it is always possible
to undo the last step. Error messages are less frequently needed.
• Increased feeling of control: The user initiates actions and feels in control. This
increases user confidence
Graphic user interface
• Immediate feedback: The results of actions furthering user goals can be seen
immediately. If the response is not in the desired direction, the direction can be
changed quickly.
• Predictable system responses: Predictable system responses also speed learning.
• Easily reversible actions: This ability to reverse unwanted actions also increases user
confidence
• More attractive: Direct-manipulation systems are more entertaining, cleverer, and
more appealing.
• May consume less space: Icons may take up less space than the equivalent in words
but this is not the case always.
Graphic user interface
• Replaces national languages: Icons possess much more universality than text and are
much more easily comprehended worldwide.
• Easily augmented with text displays: Where graphical design limitations exist, direct-
manipulation systems can easily be augmented with text displays. The reverse is not
true.
• Low typing requirements: Pointing and selection controls, such as the mouse or
trackball, eliminate the need for typing skills.
Graphic user interface
GRAPHICAL SYSTEM DISADVANTAGES
• Greater design complexity: Controls and basic alternatives must be chosen from a
pile of choices numbering in excess of 50. This design potential may not necessarily
result in better design unless proper controls and windows are selected. Poor design
can undermine acceptance.
• Learning still necessary: The first time one encounters many graphical systems, what
to do is not immediately obvious. A severe learning and remembering requirement is
imposed on many users because meanings of icons or using pointing device have to
be learned.
• Not always familiar: Symbolic representations may not be as familiar as words or
numbers. Numeric symbols elicit faster responses than graphic symbols in a visual
search task.
Graphic user interface
• Lack of experimentally-derived design guidelines: today there is a lack of widely
available experimentally-derived design guidelines. Earlier only few studies to aid in
making design decisions were performed and available for today now. Consequently,
there is too little understanding of how most design aspects relate to productivity
and satisfaction.
• Inconsistencies in technique and terminology: Many differences in technique,
terminology, and look and feel exist among various graphical system providers, and
even among successive versions of the same system. So the user has to learn or
relearn again while shifting to next terminology.
• Window manipulation requirements: Window handling and manipulation times are
still excessive and repetitive. This wastes time
Graphic user interface
• Production limitations: The number of symbols that can be clearly produced using
today’s technology is still limited. A body of recognizable symbols must be produced
that are equally legible and equally recognizable using differing technologies. This is
extremely difficult today.
• Few tested icons exist: Icons must be researched, designed, tested, and then
introduced into the marketplace. The consequences of poor or improper design will
be confusion and lower productivity for users.
• Inefficient for touch typists: For an experienced touch typist, the keyboard is a very
fast and powerful device.
• Not always the preferred style of interaction: Not all users prefer a pure iconic
interface. User will also prefer alternatives with textual captions.
Graphic user interface
• May consume more screen space: Not all applications will consume less screen
space. A listing of names and telephone numbers in a textual format will be more
efficient to scan than a card file.
• Hardware limitations: Good design also requires hardware of adequate power,
processing speed, screen resolution, and graphic capability.
1. Introduction and overview
1.4 History of user interface
41
4. Lecture
Many computer users believe its interface is the device. They perceive their interactions
with keyboard, mouse, and screen are the computer when it is just the machine’s User
Interface (UI).
An interface sits between you and technology, and nearly every technology has one. Yet
when we say the word interface, we naturally think of the UI between a user and a
computer, smartphone, tablet, or similar device. They can be physical devices such as
keyboards, mice, touchscreens, and virtual objects such as screen icons and menus,
voice-driven natural language assistants, gesture recognition devices, and more.
History of user interface
So let’s start with a brief history of user interfaces, and see where the
UI journey will take us in 2021 and beyond.
History of user interface
Interfaces have been around since the dawn of mankind, and some are
more memorable than others.
The Evolution
Horse
About 5,000-6,000 years ago, the first interface mankind used to control a
horse was a rope around its neck or nose.
The rope interface evolved into a bit that was placed in the horse’s mouth and
was eventually made of metal along with a bridle interface to guide the horse
sometime between the 14th and 8th century BC.
The saddle was likely introduced around 700 BC.5 Together, the bridle and
saddle comprise a rider’s “horse interface.”
History of user interface
Car
Henry Ford’s first car was called the Quadricycle. With four bicycle tires, a boat-
like tiller directional arm to steer it, no brakes and no reverse gear, it weighed
500 pounds, used a crude 4 horsepower engine and had a bell on the front to
warn people and horses that it was coming down the road.6,7 Its user interface
could have gone horribly wrong, such as using a horse bridle or ropes attached
to the wheel’s axels to steer it, but fortunately, over time, the car and its
interfaces grew and matured, and now we have a steering wheel, power
brakes, durable tires, and other standard features.
History of user interface
Elevator
Elisha Otis is regarded as the father of the
elevator and is known for creating a safety
break that prevented it from crashing if its
cable broke.8 His Otis Elevator, up until the
1960’s, had no end-user interface and
required a semi-skilled “elevator operator” to
manually open and close the doors. The
worker remotely controlled the elevator’s
motor using an “up” and “down” lever
pictured to the left to level a car with a floor
as well as set the car’s speed.
Evolution of Computer Interfaces
The punch card
When electronic computing arrived, they
leveraged early user interfaces such as paper
punch cards and teletypewriters.
The earliest use of punch cards was in the
Jacquard loom of 1804 shown to the right
image. The loom’s UI consisted of a loop of
cards to weave patterns, with each card
controlling individual yarns in one row of the
pattern.
Evolution of Computer Interfaces
The Keyboard
While keyboards were required for punch
cards, they really became common when the
PC burst onto the scene in the early 1980’s.
Users back then used an MS-DOS
Command Line Interface (CLI) to enter
commands like “dir” to get a list of files
and folders.
Evolution of Computer Interfaces
The mouse
Few user interface innovations have had
more impact on human-computer
interaction than the computer mouse, a
pointing device that helped launch the
desktop metaphor.
While working at Xerox PARC in 1964,
Douglas Engelbart built the mouse from a
piece of wood and two metal wheels that
moved when rolled on a surface.
Evolution of Computer Interfaces
The touchscreen
Before computer mice became popular, and
at a time when most computer interactions
involved punch cards and paper printouts,
the touchscreen represented a more natural
way of interacting with a display screen.
Developed in 1965 by Eric Johnson of
England’s Royal Radar Establishment, his user
interface consisted of copper wires attached
to the bottom of a screen.
Other types of interface
A remote Lift buttons Type writer
Other types of interface
A calculator Smart switches Electrical board
Other types of interface
Future User Interface
That Is Almost Here
Other types of interface
Virtual reality
Other types of interface
Augmented reality
Other types of interface
Smart glasses
Other types of interface
Smart devices
Other types of interface
Voice User Interfaces
1. Introduction and overview
1.5 History of user interface
59
5. Lecture
1.4 Web user interface
60
Web user interface
THE WEB USER INTERFACE
• Web interface design is essentially the design of navigation and the presentation of
information.
• Proper interface design is largely a matter of properly balancing the structure and
relationships of menus, content, and other linked documents or graphics. The design
goal is to build a hierarchy of menus and pages that feels natural, is well structured, is
easy to use, and is truthful.
• The Web is a navigation environment where people move between pages of
information, not an application environment. It is also a graphically rich environment.
Web user interface
• Web interface design is difficult for a number of reasons. First, its underlying design
language, HTML. Next, browser navigation retreated to the pre-GUI era.
• Web interface design is also more difficult because the main issues concern
information architecture and task flow, neither of which is easy to standardize. It is
more difficult because of the availability of the various types of multimedia, and the
desire of many designers to use something simply because it is available. It is more
difficult because users are ill defined, and the user’s tools so variable in nature.
Web user interface
THE POPULARITY OF WEB
• While the introduction of the graphical user interface revolutionized the user
interface, the Web has revolutionized computing. It allows millions of people
scattered across the globe to communicate, access information, publish, and be
heard. It allows people to control much of the display and the rendering of Web
pages.
• Web usage has reflected this popularity. The number of Internet hosts has risen
dramatically.
• Users have become much more discerning about good design. Slow download times,
confusing navigation, confusing page organization, disturbing animation, or other
undesirable site features often results in user abandonment of the site for others
with a more agreeable interface.
Web user interface
GUI VERSUS WEB DESIGN
Characteristic GUI WEB
Devices User hardware variations limited. User
hardware characteristics well defined
Screens appear exactly as specified.
User hardware variations enormous.
Screen appearance influenced by
hardware being used.
User Focus Data and applications Information and navigation
Data Typically created and used by known and
trusted.
Full of unknown content.
Information Sources are trusted. Properties generally
known. Typically placed into system by
users or known people and organizations.
Source not always trusted. Often not
placed onto the Web by users or known
people and organizations. Highly variable
organization.
User Tasks Install, configure, personalize, start, use,
and Open, use, and close data files.
User hardware variations enormous.
Screen appearance influenced by
hardware being used.
Web user interface
GUI VERSUS WEB DESIGN
Characteristic GUI WEB
Navigation Through menus, lists, trees, dialogs, and
wizards.
Through links, bookmarks, and typed
URLs.
Interaction Interactions such as clicking menu
choices, pressing buttons, selecting list
choices, and cut/copy/paste occur within
context of active program.
Basic interaction is a single click. This can
cause extreme changes in context, which
may not be noticed.
Integration Seamless integration of all applications
into the platform environment is a major
objective.
Apparent for some basic functions within
most Web sites (navigation, printing, and
so on.) in accomplishing this objective
Sites tend to achieve individual distinction
rather than integration.
Security Tightly controlled, proportional to degree
of willingness to invest resources and
effort. Not an issue for most home
PC users.
Renowned for security exposures.
Browser-provided security options
typically understood by average users.
When employed, may have function-
limiting side effects
Web user interface
PRINTED PAGES VERSUS WEB PAGES
Page size: Printed pages are generally larger than their Web counterparts. They are also
fixed in size, not variable like Web pages. The visual impact of the printed page is
maintained in hard-copy form, while on the Web all that usually exists are snapshots of
page areas.
The visual impact of a Web page is substantially degraded, and the user may never see
some parts of the page because their existence is not known or require scrolling to bring
into view.
The design implications: the top of a Web page is its most important element, and
signals to the user must always be provided that parts of a page lie below the surface.
Web user interface
Page rendering: Printed pages are immensely superior to Web pages in rendering.
Printed pages are presented as complete entities, and their entire contents are available
for reading or review immediately upon appearance. Web pages elements are often
rendered slowly, depending upon things like line transmission speeds and page content.
Design implications: Provide page content that downloads fast, and give people
elements to read immediately so the sense of passing time is diminished.
Page layout: With the printed page, layout is precise with much attention given to it.
With Web pages layout is more of an approximation, being negatively influenced by
deficiencies in design toolkits and the characteristics of the user’s browser and
hardware, particularly screen sizes.
Design implication: Understand the restrictions and design for the most common user
tools.
Web user interface
Page resolution: the resolution of displayed print characters still exceeds that of screen
characters, and screen reading is still slower than reading from a document.
Design implication: Provide an easy way to print long Web documents.
Page navigation: Navigating printed materials is as simple as page turning. Navigating
the Web requires innumerable decisions concerning which of many possible links should
be followed.
Design implications are similar to the above provide overviews of information
organization schemes and clear descriptions of where links lead.
Web user interface
Interactivity: Printed page design involves letting the eyes traverse static information,
selectively looking at information and using spatial combinations to make page elements
enhance and explain each other.
Web design involves letting the hands move the information (scrolling, pointing,
expanding, clicking, and so on) in conjunction with the eyes.
Page independence: Because moving between Web pages is so easy, and almost any
page in a site can be accessed from anywhere else, pages must be made freestanding.
Every page is independent. Printed pages, being sequential, fairly standardized in
organization, and providing a clear sense of place, are not considered independent.
Design implication: Provide informative headers and footers on each Web page.
Ad

More Related Content

What's hot (20)

UX/UI Design 101
UX/UI Design 101UX/UI Design 101
UX/UI Design 101
Jasmine Phan
 
UI & UX Design for Startups
UI & UX Design for StartupsUI & UX Design for Startups
UI & UX Design for Startups
Richard Fang
 
UI/UX Courses
UI/UX Courses UI/UX Courses
UI/UX Courses
Nardia Infotech
 
UI/UX Workshop - Hackvision
UI/UX Workshop - HackvisionUI/UX Workshop - Hackvision
UI/UX Workshop - Hackvision
Prottay Karim
 
UX/UI design
UX/UI designUX/UI design
UX/UI design
JuliaMezhennaya
 
User Experience 3: User Experience, Usability and Accessibility
User Experience 3: User Experience, Usability and AccessibilityUser Experience 3: User Experience, Usability and Accessibility
User Experience 3: User Experience, Usability and Accessibility
Marc Miquel
 
UX Experience Design: Processes and Strategy
UX Experience Design: Processes and StrategyUX Experience Design: Processes and Strategy
UX Experience Design: Processes and Strategy
CHI UX Indonesia
 
Ui vs UX design
Ui vs UX designUi vs UX design
Ui vs UX design
Maksym Babych
 
Look at UI/UX Design Process
Look at UI/UX Design ProcessLook at UI/UX Design Process
Look at UI/UX Design Process
Elumalai Jayaraman
 
HCI 2015 (4/10) Visual Design. Information Architecture. Design Patterns
HCI 2015 (4/10) Visual Design. Information Architecture. Design PatternsHCI 2015 (4/10) Visual Design. Information Architecture. Design Patterns
HCI 2015 (4/10) Visual Design. Information Architecture. Design Patterns
Sabin Buraga
 
Ux design process
Ux design processUx design process
Ux design process
Junying Chang
 
Introduction to User Experience Design
Introduction to User Experience DesignIntroduction to User Experience Design
Introduction to User Experience Design
Ravi Bhadauria
 
UX/UI design process - Studio CreativeMe
UX/UI design process - Studio CreativeMeUX/UI design process - Studio CreativeMe
UX/UI design process - Studio CreativeMe
Madhuri Garg
 
UX Explained
UX ExplainedUX Explained
UX Explained
Mind Over Machines
 
UX Design process, #UX, #Design Process, #Agile UX
UX Design process, #UX, #Design Process, #Agile UX UX Design process, #UX, #Design Process, #Agile UX
UX Design process, #UX, #Design Process, #Agile UX
Murali Krishna
 
Introduction to blender
Introduction to blenderIntroduction to blender
Introduction to blender
Carlos Cámara
 
UX - User Experience Design and Principles
UX - User Experience Design and PrinciplesUX - User Experience Design and Principles
UX - User Experience Design and Principles
Peeyush Sahu CAPM®
 
UX & UI Design - Differentiate through design
UX & UI Design - Differentiate through designUX & UI Design - Differentiate through design
UX & UI Design - Differentiate through design
DMI
 
Adobe Photoshop
Adobe PhotoshopAdobe Photoshop
Adobe Photoshop
Government Engineering College, Gandhinagar
 
UX RULES: 10 ESSENTIAL PRINCIPLES
UX RULES: 10 ESSENTIAL PRINCIPLESUX RULES: 10 ESSENTIAL PRINCIPLES
UX RULES: 10 ESSENTIAL PRINCIPLES
Jeremy Robinson
 
UI & UX Design for Startups
UI & UX Design for StartupsUI & UX Design for Startups
UI & UX Design for Startups
Richard Fang
 
UI/UX Workshop - Hackvision
UI/UX Workshop - HackvisionUI/UX Workshop - Hackvision
UI/UX Workshop - Hackvision
Prottay Karim
 
User Experience 3: User Experience, Usability and Accessibility
User Experience 3: User Experience, Usability and AccessibilityUser Experience 3: User Experience, Usability and Accessibility
User Experience 3: User Experience, Usability and Accessibility
Marc Miquel
 
UX Experience Design: Processes and Strategy
UX Experience Design: Processes and StrategyUX Experience Design: Processes and Strategy
UX Experience Design: Processes and Strategy
CHI UX Indonesia
 
HCI 2015 (4/10) Visual Design. Information Architecture. Design Patterns
HCI 2015 (4/10) Visual Design. Information Architecture. Design PatternsHCI 2015 (4/10) Visual Design. Information Architecture. Design Patterns
HCI 2015 (4/10) Visual Design. Information Architecture. Design Patterns
Sabin Buraga
 
Introduction to User Experience Design
Introduction to User Experience DesignIntroduction to User Experience Design
Introduction to User Experience Design
Ravi Bhadauria
 
UX/UI design process - Studio CreativeMe
UX/UI design process - Studio CreativeMeUX/UI design process - Studio CreativeMe
UX/UI design process - Studio CreativeMe
Madhuri Garg
 
UX Design process, #UX, #Design Process, #Agile UX
UX Design process, #UX, #Design Process, #Agile UX UX Design process, #UX, #Design Process, #Agile UX
UX Design process, #UX, #Design Process, #Agile UX
Murali Krishna
 
Introduction to blender
Introduction to blenderIntroduction to blender
Introduction to blender
Carlos Cámara
 
UX - User Experience Design and Principles
UX - User Experience Design and PrinciplesUX - User Experience Design and Principles
UX - User Experience Design and Principles
Peeyush Sahu CAPM®
 
UX & UI Design - Differentiate through design
UX & UI Design - Differentiate through designUX & UI Design - Differentiate through design
UX & UI Design - Differentiate through design
DMI
 
UX RULES: 10 ESSENTIAL PRINCIPLES
UX RULES: 10 ESSENTIAL PRINCIPLESUX RULES: 10 ESSENTIAL PRINCIPLES
UX RULES: 10 ESSENTIAL PRINCIPLES
Jeremy Robinson
 

Similar to Game interface design part 1 (20)

The Fundamentals of UI and UX Design - Cuneiform
The Fundamentals of UI and UX Design - CuneiformThe Fundamentals of UI and UX Design - Cuneiform
The Fundamentals of UI and UX Design - Cuneiform
Cuneiform Consulting Pvt Ltd.
 
A Beginner's Guide To The Difference Between UX and UI Design.pdf
A Beginner's Guide To The Difference Between UX and UI Design.pdfA Beginner's Guide To The Difference Between UX and UI Design.pdf
A Beginner's Guide To The Difference Between UX and UI Design.pdf
Elsner Learning & Development Institute
 
Topic 1 Overview of UI UX Design.ppt this
Topic 1 Overview of UI UX Design.ppt thisTopic 1 Overview of UI UX Design.ppt this
Topic 1 Overview of UI UX Design.ppt this
Ganesh Chandrasekaran
 
What Are the Roles and Responsibility of a UX UI Designer.docx
What Are the Roles and Responsibility of a UX UI Designer.docxWhat Are the Roles and Responsibility of a UX UI Designer.docx
What Are the Roles and Responsibility of a UX UI Designer.docx
WilliamJames717223
 
UI.docx
UI.docxUI.docx
UI.docx
zeeshanahmad318
 
UI.docx
UI.docxUI.docx
UI.docx
Tabassum Bahar
 
What is the difference between UI and UX 2024 Guide Jamtech.pdf
What is the difference between UI and UX 2024 Guide  Jamtech.pdfWhat is the difference between UI and UX 2024 Guide  Jamtech.pdf
What is the difference between UI and UX 2024 Guide Jamtech.pdf
Jamtech Technologies Pvt Ltd
 
Understanding UI/UX Design by Aroyewun Babajide
Understanding UI/UX Design by Aroyewun BabajideUnderstanding UI/UX Design by Aroyewun Babajide
Understanding UI/UX Design by Aroyewun Babajide
Babajide Aroyewun
 
UI & UX Engineering
UI & UX EngineeringUI & UX Engineering
UI & UX Engineering
Sabaragamuwa University
 
UI UX design.docx
UI UX design.docxUI UX design.docx
UI UX design.docx
RiniyaMary
 
What is the difference between UI and UX design_.pptx
What is the difference between UI and UX design_.pptxWhat is the difference between UI and UX design_.pptx
What is the difference between UI and UX design_.pptx
TandrimaTithi
 
What’s the difference between a UX and UI designer? (Part two)
What’s the difference between a UX and UI designer? (Part two)What’s the difference between a UX and UI designer? (Part two)
What’s the difference between a UX and UI designer? (Part two)
iFactory Digital
 
PRINCESAHANIPKSppt.pptxghghhfdreg ttr ty
PRINCESAHANIPKSppt.pptxghghhfdreg ttr tyPRINCESAHANIPKSppt.pptxghghhfdreg ttr ty
PRINCESAHANIPKSppt.pptxghghhfdreg ttr ty
vikashbharati917
 
The Essential UIUX Designing Principles to Follow for Maintain Customer Engag...
The Essential UIUX Designing Principles to Follow for Maintain Customer Engag...The Essential UIUX Designing Principles to Follow for Maintain Customer Engag...
The Essential UIUX Designing Principles to Follow for Maintain Customer Engag...
Inexture Solutions
 
Ui design by mhm
Ui design by mhmUi design by mhm
Ui design by mhm
Md Mosharof Hosen
 
Introduction To User Interface Design.pptx
Introduction To User Interface Design.pptxIntroduction To User Interface Design.pptx
Introduction To User Interface Design.pptx
TurboAnchor
 
The Magic Behind the Screen_ A Deep Dive into Elements of UI_UX Design.pdf
The Magic Behind the Screen_ A Deep Dive into Elements of UI_UX Design.pdfThe Magic Behind the Screen_ A Deep Dive into Elements of UI_UX Design.pdf
The Magic Behind the Screen_ A Deep Dive into Elements of UI_UX Design.pdf
EZ
 
What's the Difference Between nteraction Design and Visual Design (UI).pdf
What's the Difference Between nteraction Design and Visual Design (UI).pdfWhat's the Difference Between nteraction Design and Visual Design (UI).pdf
What's the Difference Between nteraction Design and Visual Design (UI).pdf
Unitedworld Institute of Design (UID)
 
How to Master UI/UX Design: Tips from Experts
How to Master UI/UX Design: Tips from ExpertsHow to Master UI/UX Design: Tips from Experts
How to Master UI/UX Design: Tips from Experts
Miller Smith
 
UI & UX Engineering
UI & UX EngineeringUI & UX Engineering
UI & UX Engineering
suslpst
 
Topic 1 Overview of UI UX Design.ppt this
Topic 1 Overview of UI UX Design.ppt thisTopic 1 Overview of UI UX Design.ppt this
Topic 1 Overview of UI UX Design.ppt this
Ganesh Chandrasekaran
 
What Are the Roles and Responsibility of a UX UI Designer.docx
What Are the Roles and Responsibility of a UX UI Designer.docxWhat Are the Roles and Responsibility of a UX UI Designer.docx
What Are the Roles and Responsibility of a UX UI Designer.docx
WilliamJames717223
 
What is the difference between UI and UX 2024 Guide Jamtech.pdf
What is the difference between UI and UX 2024 Guide  Jamtech.pdfWhat is the difference between UI and UX 2024 Guide  Jamtech.pdf
What is the difference between UI and UX 2024 Guide Jamtech.pdf
Jamtech Technologies Pvt Ltd
 
Understanding UI/UX Design by Aroyewun Babajide
Understanding UI/UX Design by Aroyewun BabajideUnderstanding UI/UX Design by Aroyewun Babajide
Understanding UI/UX Design by Aroyewun Babajide
Babajide Aroyewun
 
UI UX design.docx
UI UX design.docxUI UX design.docx
UI UX design.docx
RiniyaMary
 
What is the difference between UI and UX design_.pptx
What is the difference between UI and UX design_.pptxWhat is the difference between UI and UX design_.pptx
What is the difference between UI and UX design_.pptx
TandrimaTithi
 
What’s the difference between a UX and UI designer? (Part two)
What’s the difference between a UX and UI designer? (Part two)What’s the difference between a UX and UI designer? (Part two)
What’s the difference between a UX and UI designer? (Part two)
iFactory Digital
 
PRINCESAHANIPKSppt.pptxghghhfdreg ttr ty
PRINCESAHANIPKSppt.pptxghghhfdreg ttr tyPRINCESAHANIPKSppt.pptxghghhfdreg ttr ty
PRINCESAHANIPKSppt.pptxghghhfdreg ttr ty
vikashbharati917
 
The Essential UIUX Designing Principles to Follow for Maintain Customer Engag...
The Essential UIUX Designing Principles to Follow for Maintain Customer Engag...The Essential UIUX Designing Principles to Follow for Maintain Customer Engag...
The Essential UIUX Designing Principles to Follow for Maintain Customer Engag...
Inexture Solutions
 
Introduction To User Interface Design.pptx
Introduction To User Interface Design.pptxIntroduction To User Interface Design.pptx
Introduction To User Interface Design.pptx
TurboAnchor
 
The Magic Behind the Screen_ A Deep Dive into Elements of UI_UX Design.pdf
The Magic Behind the Screen_ A Deep Dive into Elements of UI_UX Design.pdfThe Magic Behind the Screen_ A Deep Dive into Elements of UI_UX Design.pdf
The Magic Behind the Screen_ A Deep Dive into Elements of UI_UX Design.pdf
EZ
 
What's the Difference Between nteraction Design and Visual Design (UI).pdf
What's the Difference Between nteraction Design and Visual Design (UI).pdfWhat's the Difference Between nteraction Design and Visual Design (UI).pdf
What's the Difference Between nteraction Design and Visual Design (UI).pdf
Unitedworld Institute of Design (UID)
 
How to Master UI/UX Design: Tips from Experts
How to Master UI/UX Design: Tips from ExpertsHow to Master UI/UX Design: Tips from Experts
How to Master UI/UX Design: Tips from Experts
Miller Smith
 
UI & UX Engineering
UI & UX EngineeringUI & UX Engineering
UI & UX Engineering
suslpst
 
Ad

More from Durgesh Pandey (20)

Introduction to Intrection design UX UI.
Introduction to Intrection design UX UI.Introduction to Intrection design UX UI.
Introduction to Intrection design UX UI.
Durgesh Pandey
 
Artificial Intelligence for you for design education
Artificial Intelligence  for you for design educationArtificial Intelligence  for you for design education
Artificial Intelligence for you for design education
Durgesh Pandey
 
2d animation pipeline.pptx
2d animation pipeline.pptx2d animation pipeline.pptx
2d animation pipeline.pptx
Durgesh Pandey
 
Screen art 1.pptx
Screen art 1.pptxScreen art 1.pptx
Screen art 1.pptx
Durgesh Pandey
 
Level design and devlopment part 2 stories and narrative
Level design and devlopment part 2  stories and narrativeLevel design and devlopment part 2  stories and narrative
Level design and devlopment part 2 stories and narrative
Durgesh Pandey
 
Level design and devlopment part 1 introduction to level design
Level design and devlopment part 1  introduction to level designLevel design and devlopment part 1  introduction to level design
Level design and devlopment part 1 introduction to level design
Durgesh Pandey
 
Game balance part 2
Game balance part 2Game balance part 2
Game balance part 2
Durgesh Pandey
 
Game balance part 1
Game balance part 1Game balance part 1
Game balance part 1
Durgesh Pandey
 
Aft733 cinematic game art part 2
Aft733  cinematic game art part 2Aft733  cinematic game art part 2
Aft733 cinematic game art part 2
Durgesh Pandey
 
Aft733 cinematic game art part 1
Aft733  cinematic game art part 1Aft733  cinematic game art part 1
Aft733 cinematic game art part 1
Durgesh Pandey
 
World building part 4
World building part 4World building part 4
World building part 4
Durgesh Pandey
 
World building part 3
World building part 3World building part 3
World building part 3
Durgesh Pandey
 
World building part 2
World building part 2World building part 2
World building part 2
Durgesh Pandey
 
World building part 1
World building part 1World building part 1
World building part 1
Durgesh Pandey
 
Game interface design part 2
Game interface design part 2Game interface design part 2
Game interface design part 2
Durgesh Pandey
 
Narrative skill of game content development
Narrative skill of game content developmentNarrative skill of game content development
Narrative skill of game content development
Durgesh Pandey
 
20 lecture (gdc talk) 30 3-2021
20 lecture (gdc talk) 30 3-202120 lecture (gdc talk) 30 3-2021
20 lecture (gdc talk) 30 3-2021
Durgesh Pandey
 
10 lecture (paper prototype) 16 2-2021
10 lecture (paper prototype) 16 2-202110 lecture (paper prototype) 16 2-2021
10 lecture (paper prototype) 16 2-2021
Durgesh Pandey
 
7 lecture (more game elements ) 8 2-2021
7 lecture (more game elements ) 8 2-2021 7 lecture (more game elements ) 8 2-2021
7 lecture (more game elements ) 8 2-2021
Durgesh Pandey
 
6 lecture (game elements ) 2 2-2021
6 lecture (game elements ) 2 2-20216 lecture (game elements ) 2 2-2021
6 lecture (game elements ) 2 2-2021
Durgesh Pandey
 
Introduction to Intrection design UX UI.
Introduction to Intrection design UX UI.Introduction to Intrection design UX UI.
Introduction to Intrection design UX UI.
Durgesh Pandey
 
Artificial Intelligence for you for design education
Artificial Intelligence  for you for design educationArtificial Intelligence  for you for design education
Artificial Intelligence for you for design education
Durgesh Pandey
 
2d animation pipeline.pptx
2d animation pipeline.pptx2d animation pipeline.pptx
2d animation pipeline.pptx
Durgesh Pandey
 
Level design and devlopment part 2 stories and narrative
Level design and devlopment part 2  stories and narrativeLevel design and devlopment part 2  stories and narrative
Level design and devlopment part 2 stories and narrative
Durgesh Pandey
 
Level design and devlopment part 1 introduction to level design
Level design and devlopment part 1  introduction to level designLevel design and devlopment part 1  introduction to level design
Level design and devlopment part 1 introduction to level design
Durgesh Pandey
 
Aft733 cinematic game art part 2
Aft733  cinematic game art part 2Aft733  cinematic game art part 2
Aft733 cinematic game art part 2
Durgesh Pandey
 
Aft733 cinematic game art part 1
Aft733  cinematic game art part 1Aft733  cinematic game art part 1
Aft733 cinematic game art part 1
Durgesh Pandey
 
Game interface design part 2
Game interface design part 2Game interface design part 2
Game interface design part 2
Durgesh Pandey
 
Narrative skill of game content development
Narrative skill of game content developmentNarrative skill of game content development
Narrative skill of game content development
Durgesh Pandey
 
20 lecture (gdc talk) 30 3-2021
20 lecture (gdc talk) 30 3-202120 lecture (gdc talk) 30 3-2021
20 lecture (gdc talk) 30 3-2021
Durgesh Pandey
 
10 lecture (paper prototype) 16 2-2021
10 lecture (paper prototype) 16 2-202110 lecture (paper prototype) 16 2-2021
10 lecture (paper prototype) 16 2-2021
Durgesh Pandey
 
7 lecture (more game elements ) 8 2-2021
7 lecture (more game elements ) 8 2-2021 7 lecture (more game elements ) 8 2-2021
7 lecture (more game elements ) 8 2-2021
Durgesh Pandey
 
6 lecture (game elements ) 2 2-2021
6 lecture (game elements ) 2 2-20216 lecture (game elements ) 2 2-2021
6 lecture (game elements ) 2 2-2021
Durgesh Pandey
 
Ad

Recently uploaded (20)

Take this ppt refference and give content on mahindra commitment to sustainab...
Take this ppt refference and give content on mahindra commitment to sustainab...Take this ppt refference and give content on mahindra commitment to sustainab...
Take this ppt refference and give content on mahindra commitment to sustainab...
kochars428
 
Hi! I'm Lori Vanzant. Please take a look
Hi! I'm Lori Vanzant. Please take a lookHi! I'm Lori Vanzant. Please take a look
Hi! I'm Lori Vanzant. Please take a look
vanzan01
 
325295919-AAC-Blocks-Seminar-Presentation.pdf
325295919-AAC-Blocks-Seminar-Presentation.pdf325295919-AAC-Blocks-Seminar-Presentation.pdf
325295919-AAC-Blocks-Seminar-Presentation.pdf
shivsin165
 
Designing Interactive and Engaging Museum Exhibits
Designing Interactive and Engaging Museum ExhibitsDesigning Interactive and Engaging Museum Exhibits
Designing Interactive and Engaging Museum Exhibits
Peach Prime Consultancy
 
MOCCAE SUSTAINABLE TROPHY 2025 Presentation.pdf
MOCCAE SUSTAINABLE TROPHY 2025 Presentation.pdfMOCCAE SUSTAINABLE TROPHY 2025 Presentation.pdf
MOCCAE SUSTAINABLE TROPHY 2025 Presentation.pdf
asfianoor1
 
An updated content measurement model - Elle Geraghty Content Strategy.pdf
An updated content measurement model - Elle Geraghty Content Strategy.pdfAn updated content measurement model - Elle Geraghty Content Strategy.pdf
An updated content measurement model - Elle Geraghty Content Strategy.pdf
Elle Geraghty
 
Presentation for Schoool Management System
Presentation for Schoool Management SystemPresentation for Schoool Management System
Presentation for Schoool Management System
kolay922013
 
19 Best B,u,y Verified Cash App Accounts
19 Best B,u,y Verified Cash App Accounts19 Best B,u,y Verified Cash App Accounts
19 Best B,u,y Verified Cash App Accounts
https://sellsusa.com/product/buy-verified-cash-app-accounts/
 
4K Video Downloader Crack (2025) + License Key Free
4K Video Downloader Crack (2025) + License Key Free4K Video Downloader Crack (2025) + License Key Free
4K Video Downloader Crack (2025) + License Key Free
Designer
 
Download Chimera Tool Setup V42.47.0924 [Latest Version]
Download Chimera Tool Setup V42.47.0924 [Latest Version]Download Chimera Tool Setup V42.47.0924 [Latest Version]
Download Chimera Tool Setup V42.47.0924 [Latest Version]
Designer
 
Design of a Low-Power VLSI Router for Network-on-Chip.pptx
Design of a Low-Power VLSI Router for Network-on-Chip.pptxDesign of a Low-Power VLSI Router for Network-on-Chip.pptx
Design of a Low-Power VLSI Router for Network-on-Chip.pptx
BapujiBanothu
 
Lori Vanzant Portfolio. Take a look! ty.
Lori Vanzant Portfolio. Take a look! ty.Lori Vanzant Portfolio. Take a look! ty.
Lori Vanzant Portfolio. Take a look! ty.
vanzan01
 
Wondershare Filmora Crack Free Download 2025
Wondershare Filmora Crack Free Download 2025Wondershare Filmora Crack Free Download 2025
Wondershare Filmora Crack Free Download 2025
Designer
 
Lori Vanzant Portfolio. Please take a look !
Lori Vanzant  Portfolio. Please take a look !Lori Vanzant  Portfolio. Please take a look !
Lori Vanzant Portfolio. Please take a look !
vanzan01
 
interpolacrcrdcrdrcrdctctfct frfctfction.ppt
interpolacrcrdcrdrcrdctctfct frfctfction.pptinterpolacrcrdcrdrcrdctctfct frfctfction.ppt
interpolacrcrdcrdrcrdctctfct frfctfction.ppt
pawan070201
 
mid-term all revisions g11 s1.pmdzs,zxptx
mid-term all revisions g11 s1.pmdzs,zxptxmid-term all revisions g11 s1.pmdzs,zxptx
mid-term all revisions g11 s1.pmdzs,zxptx
omar164646
 
Lori Vanzant Online Presence. Take a look!
Lori Vanzant Online Presence. Take a look!Lori Vanzant Online Presence. Take a look!
Lori Vanzant Online Presence. Take a look!
vanzan01
 
Modern Gradient Startup Pitch Deck PowerPoint Presentation and Google Slides ...
Modern Gradient Startup Pitch Deck PowerPoint Presentation and Google Slides ...Modern Gradient Startup Pitch Deck PowerPoint Presentation and Google Slides ...
Modern Gradient Startup Pitch Deck PowerPoint Presentation and Google Slides ...
SlidesBrain
 
presentation on healing architecture .pptx
presentation on healing architecture .pptxpresentation on healing architecture .pptx
presentation on healing architecture .pptx
buildnpl
 
dFdDVWeb_Design_Basics_Presentation.pptx
dFdDVWeb_Design_Basics_Presentation.pptxdFdDVWeb_Design_Basics_Presentation.pptx
dFdDVWeb_Design_Basics_Presentation.pptx
AKSHAYKAMBLE806728
 
Take this ppt refference and give content on mahindra commitment to sustainab...
Take this ppt refference and give content on mahindra commitment to sustainab...Take this ppt refference and give content on mahindra commitment to sustainab...
Take this ppt refference and give content on mahindra commitment to sustainab...
kochars428
 
Hi! I'm Lori Vanzant. Please take a look
Hi! I'm Lori Vanzant. Please take a lookHi! I'm Lori Vanzant. Please take a look
Hi! I'm Lori Vanzant. Please take a look
vanzan01
 
325295919-AAC-Blocks-Seminar-Presentation.pdf
325295919-AAC-Blocks-Seminar-Presentation.pdf325295919-AAC-Blocks-Seminar-Presentation.pdf
325295919-AAC-Blocks-Seminar-Presentation.pdf
shivsin165
 
Designing Interactive and Engaging Museum Exhibits
Designing Interactive and Engaging Museum ExhibitsDesigning Interactive and Engaging Museum Exhibits
Designing Interactive and Engaging Museum Exhibits
Peach Prime Consultancy
 
MOCCAE SUSTAINABLE TROPHY 2025 Presentation.pdf
MOCCAE SUSTAINABLE TROPHY 2025 Presentation.pdfMOCCAE SUSTAINABLE TROPHY 2025 Presentation.pdf
MOCCAE SUSTAINABLE TROPHY 2025 Presentation.pdf
asfianoor1
 
An updated content measurement model - Elle Geraghty Content Strategy.pdf
An updated content measurement model - Elle Geraghty Content Strategy.pdfAn updated content measurement model - Elle Geraghty Content Strategy.pdf
An updated content measurement model - Elle Geraghty Content Strategy.pdf
Elle Geraghty
 
Presentation for Schoool Management System
Presentation for Schoool Management SystemPresentation for Schoool Management System
Presentation for Schoool Management System
kolay922013
 
4K Video Downloader Crack (2025) + License Key Free
4K Video Downloader Crack (2025) + License Key Free4K Video Downloader Crack (2025) + License Key Free
4K Video Downloader Crack (2025) + License Key Free
Designer
 
Download Chimera Tool Setup V42.47.0924 [Latest Version]
Download Chimera Tool Setup V42.47.0924 [Latest Version]Download Chimera Tool Setup V42.47.0924 [Latest Version]
Download Chimera Tool Setup V42.47.0924 [Latest Version]
Designer
 
Design of a Low-Power VLSI Router for Network-on-Chip.pptx
Design of a Low-Power VLSI Router for Network-on-Chip.pptxDesign of a Low-Power VLSI Router for Network-on-Chip.pptx
Design of a Low-Power VLSI Router for Network-on-Chip.pptx
BapujiBanothu
 
Lori Vanzant Portfolio. Take a look! ty.
Lori Vanzant Portfolio. Take a look! ty.Lori Vanzant Portfolio. Take a look! ty.
Lori Vanzant Portfolio. Take a look! ty.
vanzan01
 
Wondershare Filmora Crack Free Download 2025
Wondershare Filmora Crack Free Download 2025Wondershare Filmora Crack Free Download 2025
Wondershare Filmora Crack Free Download 2025
Designer
 
Lori Vanzant Portfolio. Please take a look !
Lori Vanzant  Portfolio. Please take a look !Lori Vanzant  Portfolio. Please take a look !
Lori Vanzant Portfolio. Please take a look !
vanzan01
 
interpolacrcrdcrdrcrdctctfct frfctfction.ppt
interpolacrcrdcrdrcrdctctfct frfctfction.pptinterpolacrcrdcrdrcrdctctfct frfctfction.ppt
interpolacrcrdcrdrcrdctctfct frfctfction.ppt
pawan070201
 
mid-term all revisions g11 s1.pmdzs,zxptx
mid-term all revisions g11 s1.pmdzs,zxptxmid-term all revisions g11 s1.pmdzs,zxptx
mid-term all revisions g11 s1.pmdzs,zxptx
omar164646
 
Lori Vanzant Online Presence. Take a look!
Lori Vanzant Online Presence. Take a look!Lori Vanzant Online Presence. Take a look!
Lori Vanzant Online Presence. Take a look!
vanzan01
 
Modern Gradient Startup Pitch Deck PowerPoint Presentation and Google Slides ...
Modern Gradient Startup Pitch Deck PowerPoint Presentation and Google Slides ...Modern Gradient Startup Pitch Deck PowerPoint Presentation and Google Slides ...
Modern Gradient Startup Pitch Deck PowerPoint Presentation and Google Slides ...
SlidesBrain
 
presentation on healing architecture .pptx
presentation on healing architecture .pptxpresentation on healing architecture .pptx
presentation on healing architecture .pptx
buildnpl
 
dFdDVWeb_Design_Basics_Presentation.pptx
dFdDVWeb_Design_Basics_Presentation.pptxdFdDVWeb_Design_Basics_Presentation.pptx
dFdDVWeb_Design_Basics_Presentation.pptx
AKSHAYKAMBLE806728
 

Game interface design part 1

  • 1. B.Des Game/ BSc Game AFT: 713 Credit: 2 Game interface design 1
  • 2. 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. Unity game engine introduction 5. UI design with photoshop 6. UI design with game engine
  • 3. 1. Introduction and overview 1.1 Introduction to user interface 3 1. Lecture 1. Introduction and overview Topics include: 1. Introduction to user interface 2. Types of user interface 3. Graphic user interface definition 4. History of user interface 5. Difference between UI and UX 6. Characteristics of GUI 7. Advantages and disadvantages
  • 4. 1. Introduction and overview 1.1 Introduction 4 1. Lecture
  • 5. Introduction to user interface Human-computer interaction is a topic of research that includes interface design (HCI). Human-computer interaction (HCI) is the study, planning, and design of how humans and computers interact to meet people's needs in the most efficient way possible. • The user interface is the part of a computer and its software that people can see, hear, touch, talk to, or otherwise understand or direct. The user interface has essentially two components: Input Output
  • 6. Introduction to user interface • Input is how people communicate his needs to the system using keyboard or any pointing device and output is how the system returns processing result to user through screen or sound. • The best interface is one which has proper design with combination of effective input and output mechanisms. • The goal of user interface design is to make the user's interaction as simple and efficient as possible, in terms of accomplishing user goals (user-centered design).
  • 7. Introduction to user interface User interface design or user interface engineering is the design of user interfaces for machines and software, such as computers, home appliances, mobile devices, and other electronic devices, with the focus on maximizing usability and the user experience. • Good user interface design makes it easier to do the work at hand without attracting too much attention to itself. • 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.
  • 8. Introduction to user interface IMPORTANCE OF GOOD DESIGN • Inspite of today’s rich technologies and tools we are unable to provide effective and usable screen because lack of time and care. • A well-designed interface and screen is terribly important to our users. It is their window to view the capabilities of the system and it is also the vehicle trough which complex tasks can be performed. • A screen’s layout and appearance affect a person in a variety of ways. If they are confusing and inefficient, people will have greater difficulty in doing their jobs and will make more mistakes. • Poor design may permanently push some users away from a system. It can also create dissatisfaction, frustration, and an increase in stress levels.
  • 9. Introduction to user interface BENEFITS OF GOOD DESIGN • The benefits of a well-designed screen have also been under experimental study for many years. One researcher, for example, attempted to improve screen clarity and readability by making screens less crowded. The result: screen users of the modified screens completed transactions in 25 percent less time and with 25 percent fewer errors than those who used the original screens. • Good design principles reduced decision-making time by about 40 percent, resulting in a savings of 79 person-years in the affected system.
  • 10. Introduction to user interface USER INTERFACE & USER EXPERIENCE DEFFRENCE What is UI? The “UI” in UI design stands for “user interface.” The user interface is the graphical layout of an application. It consists of the buttons users click on, the text they read, the images, sliders, text entry fields, and all the rest of the items the user interacts with. This includes screen layout, transitions, interface animations and every single micro- interaction. Any sort of visual element, interaction, or animation must all be designed. This job falls to UI designers. They decide what the application is going to look like. They have to choose color schemes and button shapes — the width of lines and the fonts used for text. UI designers create the look and feel of an application’s user interface.
  • 11. Introduction to user interface UI designers are graphic designers. They’re concerned with aesthetics. It’s up to them to make sure the application’s interface is attractive, visually-stimulating and themed appropriately to match the purpose and/or personality of the app. And they need to make sure every single visual element feels united, both aesthetically, and in purpose. What is UX? “UX” stands for “user experience.” A user’s experience of the app is determined by how they interact with it. Is the experience smooth and intuitive or clunky and confusing? Does navigating the app feel logical or does it feel arbitrary? Does interacting with the app give people the sense that they’re efficiently accomplishing the tasks they set out to achieve or does it feel like a struggle? User experience is determined by how easy or difficult it is to interact with the user interface elements that the UI designers have created.
  • 12. Introduction to user interface So UX designers are also concerned with an application’s user interface, and this is why people get confused about the difference between the two. But whereas UI designers are tasked with deciding how the user interface will look, UX designers are in charge of determining how the user interface operates. They determine the structure of the interface and the functionality. How it’s organized and how all the parts relate to one another. In short, they design how the interface works. If it works well and feels seamless, the user will have a good experience. But if navigation is complicated, then a bad user experience is likely. There’s also a certain amount of iterative analysis involved in UX design. UX designers will create wireframe rendering of their interface interactions and get user feedback. They’ll integrate this into their designs. It’s important for UX designers to have a holistic understanding of how users prefer to interact with their applications.
  • 13. Introduction to user interface HOW THEY WORK TOGETHER So a UX designer decides how the user interface works while the UI designer decides how the user interface looks. This is a very collaborative process, and the two design teams tend to work closely together. As the UX team is working out the flow of the app, how all of the buttons navigate you through your tasks, and how the interface efficiently serves up the information user’s need, the UI team is working on how all of these interface elements will appear on screen. Let’s say at some point in the design process it’s decided that extra buttons need to be added to a given screen. This will change how the buttons will need to be organized and could require changing their shape or size. The UX team would determine the best way to lay out the buttons while the UI teams adapt their designs to fit the new layout. Constant communication and collaboration between UI and UX designers help to assure that the final user interface looks as good as it can, while also operating efficiently and intuitively.
  • 14. Introduction to user interface RESEARCH IS KEY Research is vital for both UI and UX designers. It’s important for both disciplines to gather as much good information as possible to assist them in crafting appropriate designs, and both follow a similar approach. Both will research what users want. What they expect from applications of the sort being developed. This research is often iterative, involving usability sessions, where real users will interact with scaled versions of certain functionality or visual designs being tested to determine whether the designers are moving down the proper path. Feedback is integrated with each iteration. This process involves generating low fidelity prototypes, like wireframe renderings of interface elements in order to gauge a user’s response strictly to the functionality being tested. This can also involve fast visual prototypes and A/B tests of different possible versions of the look and feel of the interface to determine which one users prefer.
  • 15. Introduction to user interface RESEARCH IN UI DESIGNS UI designers need to make sure the visual language they choose fits the class of application they’re writing. They’re trying to predict user expectations. If your team is designing a travel app, it’s important to research how other travel apps have been developed in the past. Which ones worked? Which ones didn’t? There are design lessons to be learned from the work others have done before. Research might indicate that people prefer outlined icons instead of bold shapes. This is a visual shorthand that people are comfortable with and enjoy. UI designers would then do well to incorporate that lesson. The exact aesthetic they choose is up to them, but the basic “rules,” or the need to conform to user expectations, is something designers ignore at their own risk.
  • 16. Introduction to user interface Not to say risks shouldn’t be taken. UI designers want their interface designs to stand out and be memorable. But this must be balanced against making sure people recognize the purpose of the elements you’re placing on screen. RESEARCH FOR UX DESIGN UX design is particularly interested in user expectations. All of the experiences and interactions that users have had with every application they’ve used in their lives have helped set their expectations for how interfaces are supposed to work. If a UX designer isn’t intimately familiar with these expectations, they could inadvertently design an interface interaction that seems logical to them but breaks commonly accepted conventions. Users don’t like when an interface behaves very differently than they were expecting, and this could negatively impact their experience.
  • 17. Introduction to user interface If a UX designer decides to do something different, they need to have a very good reason, because breaking a deeply trained expected behavior will likely cause people to do the wrong thing frequently. As an example, most people are comfortable with the idea that you click twice on a file to open it and once to select it. This is an interface behavior that has existed almost as long as there have been graphical user interfaces.
  • 18. Introduction to user interface UI VS. UX: TWO VERY DIFFERENT DISCIPLINES THAT WORK IN HARMONY UI design and UX design involve very different skill sets, but they are integral to each other’s success. A beautiful design can’t save an interface that’s clunky and confusing to navigate, and a brilliant, perfectly-appropriate user experience can be sunk by bad visual interface design that makes using the app unpleasant. Both UI and UX designs need to be flawlessly executed and perfectly aligned with pre- existing user expectations to create an excellent user interface/experience. And when those stars align the results can be astounding.
  • 19. 1. Introduction and overview 1.2 Types user interface 19 2. Lecture
  • 20. Types of user interface 1. Command Line Interface 2. Menu-driven Interface 3. Graphical User Interface 4. Touchscreen Graphical User Interface 5. Conversational UI (Voice over interface)
  • 21. Types of user interface 1. Command Line Interface: The command line interface is no longer common as a form of basic user interface in everyday consumer products, but it is still in use under certain circumstances. Command Line Interface requires users to type appropriate instructions into the command line. Advantages Disadvantages Simple structure Difficult to learn command language Minimal memory usage Complex for beginner users Great for slow-running computers, or those low on memory Something hanging issue An expert CLI user can give commands and perform tasks much faster than when using an alternative UI type Minimal error message information
  • 22. Types of user interface 2. Menu driven Interface: 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. An ATM is an example of a menu-driven interface. Advantages Disadvantages It is not necessary to remember a long list of manual commands Slower for experienced users Simple interface for novices Limited menu options Self-explanatory menu options Often requires you to access multiple menu screens to perform simple functions
  • 23. Types of user interface 3. Graphic user Interface: The graphical user interface, or GUI, is the type of interface with which the majority of people are the most familiar. You interact with these interfaces by using a mouse, tack pad, or other peripheral to point and click on graphics or icons. Advantages Disadvantages Self-explanatory and easy to use Uses large amounts of memory – however this is less of a concern as computers get more powerful. Memorizing command lists is not necessary Allows for running multiple applications, programs, and tasks simultaneously Solid support facilities The similar format among different programs adds familiarity Makes for easy design and formatting
  • 24. Types of user interface 4. Touch screen Interface: The touchscreen GUI is very similar to the regular GUI, except that you use your fingers or a stylus to select icons and perform tasks, rather than a mouse or trackpad. Advantages Disadvantages Easier and quicker than manipulating a mouse or typing Control elements size is limited by mobile display size Avoids external devices such as a keyboard or mouse Possibility of adding various motion actions Additional motions may not be easy to discover Accessible to children and elders Zoom-in gestures promote accessibility for visually impaired May be unnecessarily activated by stray touches Adaptable to a wide range of devices
  • 25. Types of user interface 5. Conversational Interface: 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). In order to employ the first type, the software should have voice recognition capabilities. Advantages Disadvantages Versatile in applications Limited amount of visual and textual clues No need to learn new skills Voice provides a realistic feel Connects with users on a personal level Responds with context to build interactions Articulating commands might be complicated Adapts to gender, tone, accent, and pace of speech Can be integrated into existing apps
  • 26. 1. Introduction and overview 1.3 Graphic user interface 26 3. Lecture
  • 27. Graphic user interface GRAPHIC USER INTERFACE DEFINITION • In brief, a graphical user interface can be defined as follows. A user interface, as recently described, is a collection of techniques and mechanisms to interact with something. In a graphical interface, the primary interaction mechanism is a pointing device of some kind. • What the user interacts with is a collection of elements referred to as objects. They can be seen, heard, touched, or otherwise perceived. Objects are always visible to the user and are used to perform tasks. They are interacted with as entities independent of all other objects. • People perform operations, called actions, on objects. The operations include accessing and modifying objects by pointing, selecting, and manipulating.
  • 28. BENEFITS OF GOOD DESIGN • Other benefits also accrue from good design. Training costs are lowered because training time is reduced, support line costs are lowered because fewer assist calls are necessary, and employee satisfaction is increased because aggravation and frustration are reduced. • Another benefit is, ultimately, that an organization’s customers benefit because of the improved service they receive. • Identifying and resolving problems during the design and development process also has significant economic benefits. Graphic user interface
  • 29. POPULARITY OF GRAPHICS • Graphics revolutionized design and the user interface. Graphics assumes three dimensional look whereas text based system assumes one dimensional look. • Information can appear or disappear through floating windows and navigation and commands can be done through menu or pull downs or screen controls. • Increased computer power and the vast improvement in the display enable the user’s actions to be reacted to quickly, dynamically, and meaningfully. • If properly used graphics can reduce mental and perceptional load and increases information transfer between men and machine because of visual comparisons and simplification of the perception of structure. Graphic user interface
  • 30. CONCEPT OF DIRECT MANIPULATION The term used to describe this style of interaction for graphical systems was first used by Shneiderman (1982). He called them “direct manipulation” systems, suggesting that they possess the following characteristics: • The system is portrayed as an extension of the real world: A person is allowed to work in a familiar environment and in a familiar way, focusing on the data, not the application and tools. The physical organization of the system, which most often is unfamiliar, is hidden from view and is not a distraction. • Continuous visibility of objects and actions: objects are continuously visible. Reminders of actions to be performed are also obvious. Nelson (1980) described this concept as “virtual reality,” a representation of reality that can be manipulated. Graphic user interface
  • 31. • Actions are rapid and incremental with visible display of results: The results of actions are immediately displayed visually on the screen in their new and current form. Auditory feedback may also be provided. The impact of a previous action is quickly seen, and the evolution of tasks is continuous and effortless. • Incremental actions are easily reversible: Finally, actions, if discovered to be incorrect or not desired, can be easily undone. INDIRECT MANIPULATION In practice, indirect manipulation of all screen objects and actions may not be workable because of the following: • The operation may be difficult to conceptualize in the graphical system. The graphics capability of the system may be limited. Graphic user interface
  • 32. • The amount of space available for placing manipulation controls in the window border may be limited. • It may be difficult for people to learn and remember all the necessary operations and actions. When this occurs, indirect manipulation is provided. Indirect manipulation substitutes words and text, such as pull-down or pop-up menus, for symbols, and substitutes typing for pointing. Graphic user interface
  • 33. Graphic user interface GRAPHICAL SYSTEM ADVANTAGES The success of graphical systems has been attributed to a host of factors. The following have been commonly referenced in literature and endorsed by their advocates as advantages of these systems. • Symbols recognized faster than text: symbols can be recognized faster and more accurately than text. An example of a good classification scheme that speeds up recognition is the icons. These icons allow speedy recognition of the type of message being presented. • Faster learning: a graphical, pictorial representation aids learning, and symbols can also be easily learned.
  • 34. Graphic user interface • Faster use and problem solving: Visual or spatial representation of information has been found to be easier to retain and manipulate and leads to faster and more successful problem solving. • Easier remembering: Because of greater simplicity, it is easier for casual users to retain operational concepts. • More natural: symbolic displays are more natural and advantageous because the human mind has a powerful image memory. • Fewer errors: Reversibility of actions reduces error rates because it is always possible to undo the last step. Error messages are less frequently needed. • Increased feeling of control: The user initiates actions and feels in control. This increases user confidence
  • 35. Graphic user interface • Immediate feedback: The results of actions furthering user goals can be seen immediately. If the response is not in the desired direction, the direction can be changed quickly. • Predictable system responses: Predictable system responses also speed learning. • Easily reversible actions: This ability to reverse unwanted actions also increases user confidence • More attractive: Direct-manipulation systems are more entertaining, cleverer, and more appealing. • May consume less space: Icons may take up less space than the equivalent in words but this is not the case always.
  • 36. Graphic user interface • Replaces national languages: Icons possess much more universality than text and are much more easily comprehended worldwide. • Easily augmented with text displays: Where graphical design limitations exist, direct- manipulation systems can easily be augmented with text displays. The reverse is not true. • Low typing requirements: Pointing and selection controls, such as the mouse or trackball, eliminate the need for typing skills.
  • 37. Graphic user interface GRAPHICAL SYSTEM DISADVANTAGES • Greater design complexity: Controls and basic alternatives must be chosen from a pile of choices numbering in excess of 50. This design potential may not necessarily result in better design unless proper controls and windows are selected. Poor design can undermine acceptance. • Learning still necessary: The first time one encounters many graphical systems, what to do is not immediately obvious. A severe learning and remembering requirement is imposed on many users because meanings of icons or using pointing device have to be learned. • Not always familiar: Symbolic representations may not be as familiar as words or numbers. Numeric symbols elicit faster responses than graphic symbols in a visual search task.
  • 38. Graphic user interface • Lack of experimentally-derived design guidelines: today there is a lack of widely available experimentally-derived design guidelines. Earlier only few studies to aid in making design decisions were performed and available for today now. Consequently, there is too little understanding of how most design aspects relate to productivity and satisfaction. • Inconsistencies in technique and terminology: Many differences in technique, terminology, and look and feel exist among various graphical system providers, and even among successive versions of the same system. So the user has to learn or relearn again while shifting to next terminology. • Window manipulation requirements: Window handling and manipulation times are still excessive and repetitive. This wastes time
  • 39. Graphic user interface • Production limitations: The number of symbols that can be clearly produced using today’s technology is still limited. A body of recognizable symbols must be produced that are equally legible and equally recognizable using differing technologies. This is extremely difficult today. • Few tested icons exist: Icons must be researched, designed, tested, and then introduced into the marketplace. The consequences of poor or improper design will be confusion and lower productivity for users. • Inefficient for touch typists: For an experienced touch typist, the keyboard is a very fast and powerful device. • Not always the preferred style of interaction: Not all users prefer a pure iconic interface. User will also prefer alternatives with textual captions.
  • 40. Graphic user interface • May consume more screen space: Not all applications will consume less screen space. A listing of names and telephone numbers in a textual format will be more efficient to scan than a card file. • Hardware limitations: Good design also requires hardware of adequate power, processing speed, screen resolution, and graphic capability.
  • 41. 1. Introduction and overview 1.4 History of user interface 41 4. Lecture
  • 42. Many computer users believe its interface is the device. They perceive their interactions with keyboard, mouse, and screen are the computer when it is just the machine’s User Interface (UI). An interface sits between you and technology, and nearly every technology has one. Yet when we say the word interface, we naturally think of the UI between a user and a computer, smartphone, tablet, or similar device. They can be physical devices such as keyboards, mice, touchscreens, and virtual objects such as screen icons and menus, voice-driven natural language assistants, gesture recognition devices, and more. History of user interface
  • 43. So let’s start with a brief history of user interfaces, and see where the UI journey will take us in 2021 and beyond. History of user interface Interfaces have been around since the dawn of mankind, and some are more memorable than others.
  • 44. The Evolution Horse About 5,000-6,000 years ago, the first interface mankind used to control a horse was a rope around its neck or nose. The rope interface evolved into a bit that was placed in the horse’s mouth and was eventually made of metal along with a bridle interface to guide the horse sometime between the 14th and 8th century BC. The saddle was likely introduced around 700 BC.5 Together, the bridle and saddle comprise a rider’s “horse interface.”
  • 45. History of user interface Car Henry Ford’s first car was called the Quadricycle. With four bicycle tires, a boat- like tiller directional arm to steer it, no brakes and no reverse gear, it weighed 500 pounds, used a crude 4 horsepower engine and had a bell on the front to warn people and horses that it was coming down the road.6,7 Its user interface could have gone horribly wrong, such as using a horse bridle or ropes attached to the wheel’s axels to steer it, but fortunately, over time, the car and its interfaces grew and matured, and now we have a steering wheel, power brakes, durable tires, and other standard features.
  • 46. History of user interface Elevator Elisha Otis is regarded as the father of the elevator and is known for creating a safety break that prevented it from crashing if its cable broke.8 His Otis Elevator, up until the 1960’s, had no end-user interface and required a semi-skilled “elevator operator” to manually open and close the doors. The worker remotely controlled the elevator’s motor using an “up” and “down” lever pictured to the left to level a car with a floor as well as set the car’s speed.
  • 47. Evolution of Computer Interfaces The punch card When electronic computing arrived, they leveraged early user interfaces such as paper punch cards and teletypewriters. The earliest use of punch cards was in the Jacquard loom of 1804 shown to the right image. The loom’s UI consisted of a loop of cards to weave patterns, with each card controlling individual yarns in one row of the pattern.
  • 48. Evolution of Computer Interfaces The Keyboard While keyboards were required for punch cards, they really became common when the PC burst onto the scene in the early 1980’s. Users back then used an MS-DOS Command Line Interface (CLI) to enter commands like “dir” to get a list of files and folders.
  • 49. Evolution of Computer Interfaces The mouse Few user interface innovations have had more impact on human-computer interaction than the computer mouse, a pointing device that helped launch the desktop metaphor. While working at Xerox PARC in 1964, Douglas Engelbart built the mouse from a piece of wood and two metal wheels that moved when rolled on a surface.
  • 50. Evolution of Computer Interfaces The touchscreen Before computer mice became popular, and at a time when most computer interactions involved punch cards and paper printouts, the touchscreen represented a more natural way of interacting with a display screen. Developed in 1965 by Eric Johnson of England’s Royal Radar Establishment, his user interface consisted of copper wires attached to the bottom of a screen.
  • 51. Other types of interface A remote Lift buttons Type writer
  • 52. Other types of interface A calculator Smart switches Electrical board
  • 53. Other types of interface Future User Interface That Is Almost Here
  • 54. Other types of interface Virtual reality
  • 55. Other types of interface Augmented reality
  • 56. Other types of interface Smart glasses
  • 57. Other types of interface Smart devices
  • 58. Other types of interface Voice User Interfaces
  • 59. 1. Introduction and overview 1.5 History of user interface 59 5. Lecture
  • 60. 1.4 Web user interface 60
  • 61. Web user interface THE WEB USER INTERFACE • Web interface design is essentially the design of navigation and the presentation of information. • Proper interface design is largely a matter of properly balancing the structure and relationships of menus, content, and other linked documents or graphics. The design goal is to build a hierarchy of menus and pages that feels natural, is well structured, is easy to use, and is truthful. • The Web is a navigation environment where people move between pages of information, not an application environment. It is also a graphically rich environment.
  • 62. Web user interface • Web interface design is difficult for a number of reasons. First, its underlying design language, HTML. Next, browser navigation retreated to the pre-GUI era. • Web interface design is also more difficult because the main issues concern information architecture and task flow, neither of which is easy to standardize. It is more difficult because of the availability of the various types of multimedia, and the desire of many designers to use something simply because it is available. It is more difficult because users are ill defined, and the user’s tools so variable in nature.
  • 63. Web user interface THE POPULARITY OF WEB • While the introduction of the graphical user interface revolutionized the user interface, the Web has revolutionized computing. It allows millions of people scattered across the globe to communicate, access information, publish, and be heard. It allows people to control much of the display and the rendering of Web pages. • Web usage has reflected this popularity. The number of Internet hosts has risen dramatically. • Users have become much more discerning about good design. Slow download times, confusing navigation, confusing page organization, disturbing animation, or other undesirable site features often results in user abandonment of the site for others with a more agreeable interface.
  • 64. Web user interface GUI VERSUS WEB DESIGN Characteristic GUI WEB Devices User hardware variations limited. User hardware characteristics well defined Screens appear exactly as specified. User hardware variations enormous. Screen appearance influenced by hardware being used. User Focus Data and applications Information and navigation Data Typically created and used by known and trusted. Full of unknown content. Information Sources are trusted. Properties generally known. Typically placed into system by users or known people and organizations. Source not always trusted. Often not placed onto the Web by users or known people and organizations. Highly variable organization. User Tasks Install, configure, personalize, start, use, and Open, use, and close data files. User hardware variations enormous. Screen appearance influenced by hardware being used.
  • 65. Web user interface GUI VERSUS WEB DESIGN Characteristic GUI WEB Navigation Through menus, lists, trees, dialogs, and wizards. Through links, bookmarks, and typed URLs. Interaction Interactions such as clicking menu choices, pressing buttons, selecting list choices, and cut/copy/paste occur within context of active program. Basic interaction is a single click. This can cause extreme changes in context, which may not be noticed. Integration Seamless integration of all applications into the platform environment is a major objective. Apparent for some basic functions within most Web sites (navigation, printing, and so on.) in accomplishing this objective Sites tend to achieve individual distinction rather than integration. Security Tightly controlled, proportional to degree of willingness to invest resources and effort. Not an issue for most home PC users. Renowned for security exposures. Browser-provided security options typically understood by average users. When employed, may have function- limiting side effects
  • 66. Web user interface PRINTED PAGES VERSUS WEB PAGES Page size: Printed pages are generally larger than their Web counterparts. They are also fixed in size, not variable like Web pages. The visual impact of the printed page is maintained in hard-copy form, while on the Web all that usually exists are snapshots of page areas. The visual impact of a Web page is substantially degraded, and the user may never see some parts of the page because their existence is not known or require scrolling to bring into view. The design implications: the top of a Web page is its most important element, and signals to the user must always be provided that parts of a page lie below the surface.
  • 67. Web user interface Page rendering: Printed pages are immensely superior to Web pages in rendering. Printed pages are presented as complete entities, and their entire contents are available for reading or review immediately upon appearance. Web pages elements are often rendered slowly, depending upon things like line transmission speeds and page content. Design implications: Provide page content that downloads fast, and give people elements to read immediately so the sense of passing time is diminished. Page layout: With the printed page, layout is precise with much attention given to it. With Web pages layout is more of an approximation, being negatively influenced by deficiencies in design toolkits and the characteristics of the user’s browser and hardware, particularly screen sizes. Design implication: Understand the restrictions and design for the most common user tools.
  • 68. Web user interface Page resolution: the resolution of displayed print characters still exceeds that of screen characters, and screen reading is still slower than reading from a document. Design implication: Provide an easy way to print long Web documents. Page navigation: Navigating printed materials is as simple as page turning. Navigating the Web requires innumerable decisions concerning which of many possible links should be followed. Design implications are similar to the above provide overviews of information organization schemes and clear descriptions of where links lead.
  • 69. Web user interface Interactivity: Printed page design involves letting the eyes traverse static information, selectively looking at information and using spatial combinations to make page elements enhance and explain each other. Web design involves letting the hands move the information (scrolling, pointing, expanding, clicking, and so on) in conjunction with the eyes. Page independence: Because moving between Web pages is so easy, and almost any page in a site can be accessed from anywhere else, pages must be made freestanding. Every page is independent. Printed pages, being sequential, fairly standardized in organization, and providing a clear sense of place, are not considered independent. Design implication: Provide informative headers and footers on each Web page.