SlideShare ist ein Scribd-Unternehmen logo
1 von 69
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.

Weitere ähnliche Inhalte

Was ist angesagt?

The difference between ux and ui design
The difference between ux and ui designThe difference between ux and ui design
The difference between ux and ui designShweta Joshi
 
UI vs UX workshop
UI vs UX workshopUI vs UX workshop
UI vs UX workshopInova LLC
 
How to Find a Good UI/UX Designer (or be one!)
How to Find a Good UI/UX Designer (or be one!)How to Find a Good UI/UX Designer (or be one!)
How to Find a Good UI/UX Designer (or be one!)Emerentiana Meicy
 
UX & UI Design - Differentiate through design
UX & UI Design - Differentiate through designUX & UI Design - Differentiate through design
UX & UI Design - Differentiate through designDMI
 
What is UI/UX and the Difference
What is UI/UX and the DifferenceWhat is UI/UX and the Difference
What is UI/UX and the DifferenceVibloo
 
UI-UX Practical Talking - Mohamed Shehata
UI-UX Practical Talking - Mohamed ShehataUI-UX Practical Talking - Mohamed Shehata
UI-UX Practical Talking - Mohamed ShehataMohamed Shehata
 
UX/UI design process - Studio CreativeMe
UX/UI design process - Studio CreativeMeUX/UI design process - Studio CreativeMe
UX/UI design process - Studio CreativeMeMadhuri Garg
 
UX Patterns & Design Systems
UX Patterns & Design SystemsUX Patterns & Design Systems
UX Patterns & Design SystemsRoshan Ravi
 
i/o extended: Intro to <UX> Design
i/o extended: Intro to <UX> Design  i/o extended: Intro to <UX> Design
i/o extended: Intro to <UX> Design GDGKuwaitGoogleDevel
 
UI UX introduction
UI UX introductionUI UX introduction
UI UX introductionIsmail Norri
 
UX & UI Design: Differentiate through design
UX & UI Design: Differentiate through designUX & UI Design: Differentiate through design
UX & UI Design: Differentiate through designMoodLabs
 

Was ist angesagt? (20)

The difference between ux and ui design
The difference between ux and ui designThe difference between ux and ui design
The difference between ux and ui design
 
UI vs UX workshop
UI vs UX workshopUI vs UX workshop
UI vs UX workshop
 
Ui vs UX design
Ui vs UX designUi vs UX design
Ui vs UX design
 
What is UX?
What is UX?What is UX?
What is UX?
 
How to Find a Good UI/UX Designer (or be one!)
How to Find a Good UI/UX Designer (or be one!)How to Find a Good UI/UX Designer (or be one!)
How to Find a Good UI/UX Designer (or be one!)
 
UX & UI Design - Differentiate through design
UX & UI Design - Differentiate through designUX & UI Design - Differentiate through design
UX & UI Design - Differentiate through design
 
What is UI/UX and the Difference
What is UI/UX and the DifferenceWhat is UI/UX and the Difference
What is UI/UX and the Difference
 
Adobe XD
Adobe XD Adobe XD
Adobe XD
 
UI-UX Practical Talking - Mohamed Shehata
UI-UX Practical Talking - Mohamed ShehataUI-UX Practical Talking - Mohamed Shehata
UI-UX Practical Talking - Mohamed Shehata
 
What is UX?
What is UX?What is UX?
What is UX?
 
UI UX Design Presentation
UI UX Design Presentation UI UX Design Presentation
UI UX Design Presentation
 
Introduction to UI UX
Introduction to UI UXIntroduction to UI UX
Introduction to UI UX
 
UX/UI design process - Studio CreativeMe
UX/UI design process - Studio CreativeMeUX/UI design process - Studio CreativeMe
UX/UI design process - Studio CreativeMe
 
UX Patterns & Design Systems
UX Patterns & Design SystemsUX Patterns & Design Systems
UX Patterns & Design Systems
 
i/o extended: Intro to <UX> Design
i/o extended: Intro to <UX> Design  i/o extended: Intro to <UX> Design
i/o extended: Intro to <UX> Design
 
UI UX introduction
UI UX introductionUI UX introduction
UI UX introduction
 
Animation graphics
Animation graphicsAnimation graphics
Animation graphics
 
UI/UX Courses
UI/UX Courses UI/UX Courses
UI/UX Courses
 
UX & UI Design: Differentiate through design
UX & UI Design: Differentiate through designUX & UI Design: Differentiate through design
UX & UI Design: Differentiate through design
 
UX is not UI!
UX is not UI!UX is not UI!
UX is not UI!
 

Ähnlich wie Game interface design part 1

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.docxWilliamJames717223
 
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 BabajideBabajide Aroyewun
 
UI UX design.docx
UI UX design.docxUI UX design.docx
UI UX design.docxRiniyaMary
 
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_.pptxTandrimaTithi
 
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
 
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.pptxTurboAnchor
 
UI & UX Engineering
UI & UX EngineeringUI & UX Engineering
UI & UX Engineeringsuslpst
 
Difference Between UI and UX Designer.pdf
Difference Between UI and UX Designer.pdfDifference Between UI and UX Designer.pdf
Difference Between UI and UX Designer.pdfCodevelop us
 
Get to know about UI/UX designing
Get to know about UI/UX designingGet to know about UI/UX designing
Get to know about UI/UX designingMenusha Pathirana
 
The-Role-of-UXUI-in-Graphic-Design-Crafting-User-Friendly-Experiences 7.pptx
The-Role-of-UXUI-in-Graphic-Design-Crafting-User-Friendly-Experiences 7.pptxThe-Role-of-UXUI-in-Graphic-Design-Crafting-User-Friendly-Experiences 7.pptx
The-Role-of-UXUI-in-Graphic-Design-Crafting-User-Friendly-Experiences 7.pptxAttitude Tally Academy
 
UX Design Mini Course
UX Design Mini CourseUX Design Mini Course
UX Design Mini CourseDigital Snack
 
User Centered Design
User Centered DesignUser Centered Design
User Centered DesignShawn Calvert
 
Creating-Seamless-Experiences-through-UI.pdf
Creating-Seamless-Experiences-through-UI.pdfCreating-Seamless-Experiences-through-UI.pdf
Creating-Seamless-Experiences-through-UI.pdfAlice James
 

Ähnlich wie 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
 
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
 
UI.docx
UI.docxUI.docx
UI.docx
 
UI.docx
UI.docxUI.docx
UI.docx
 
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
 
UI & UX Engineering
UI & UX EngineeringUI & UX Engineering
UI & UX Engineering
 
UI UX design.docx
UI UX design.docxUI UX design.docx
UI UX design.docx
 
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
 
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)
 
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...
 
Ui design by mhm
Ui design by mhmUi design by mhm
Ui design by mhm
 
Introduction To User Interface Design.pptx
Introduction To User Interface Design.pptxIntroduction To User Interface Design.pptx
Introduction To User Interface Design.pptx
 
UI & UX Engineering
UI & UX EngineeringUI & UX Engineering
UI & UX Engineering
 
UI & UX Engineering
UI & UX EngineeringUI & UX Engineering
UI & UX Engineering
 
Difference Between UI and UX Designer.pdf
Difference Between UI and UX Designer.pdfDifference Between UI and UX Designer.pdf
Difference Between UI and UX Designer.pdf
 
Get to know about UI/UX designing
Get to know about UI/UX designingGet to know about UI/UX designing
Get to know about UI/UX designing
 
The-Role-of-UXUI-in-Graphic-Design-Crafting-User-Friendly-Experiences 7.pptx
The-Role-of-UXUI-in-Graphic-Design-Crafting-User-Friendly-Experiences 7.pptxThe-Role-of-UXUI-in-Graphic-Design-Crafting-User-Friendly-Experiences 7.pptx
The-Role-of-UXUI-in-Graphic-Design-Crafting-User-Friendly-Experiences 7.pptx
 
UX Design Mini Course
UX Design Mini CourseUX Design Mini Course
UX Design Mini Course
 
User Centered Design
User Centered DesignUser Centered Design
User Centered Design
 
Creating-Seamless-Experiences-through-UI.pdf
Creating-Seamless-Experiences-through-UI.pdfCreating-Seamless-Experiences-through-UI.pdf
Creating-Seamless-Experiences-through-UI.pdf
 

Mehr von Durgesh Pandey

2d animation pipeline.pptx
2d animation pipeline.pptx2d animation pipeline.pptx
2d animation pipeline.pptxDurgesh 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 narrativeDurgesh 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 designDurgesh Pandey
 
Aft733 cinematic game art part 2
Aft733  cinematic game art part 2Aft733  cinematic game art part 2
Aft733 cinematic game art part 2Durgesh Pandey
 
Aft733 cinematic game art part 1
Aft733  cinematic game art part 1Aft733  cinematic game art part 1
Aft733 cinematic game art part 1Durgesh Pandey
 
Game interface design part 2
Game interface design part 2Game interface design part 2
Game interface design part 2Durgesh Pandey
 
Narrative skill of game content development
Narrative skill of game content developmentNarrative skill of game content development
Narrative skill of game content developmentDurgesh 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-2021Durgesh 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-2021Durgesh 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-2021Durgesh Pandey
 
5 lecture (fun and passes ) 1 2-2021
5 lecture (fun and passes ) 1 2-20215 lecture (fun and passes ) 1 2-2021
5 lecture (fun and passes ) 1 2-2021Durgesh Pandey
 
4 lecture (mda frame work) 25 1-2021
4 lecture (mda frame work) 25 1-20214 lecture (mda frame work) 25 1-2021
4 lecture (mda frame work) 25 1-2021Durgesh Pandey
 

Mehr von Durgesh Pandey (20)

2d animation pipeline.pptx
2d animation pipeline.pptx2d animation pipeline.pptx
2d animation pipeline.pptx
 
Screen art 1.pptx
Screen art 1.pptxScreen art 1.pptx
Screen art 1.pptx
 
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
 
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
 
Game balance part 2
Game balance part 2Game balance part 2
Game balance part 2
 
Game balance part 1
Game balance part 1Game balance part 1
Game balance part 1
 
Aft733 cinematic game art part 2
Aft733  cinematic game art part 2Aft733  cinematic game art part 2
Aft733 cinematic game art part 2
 
Aft733 cinematic game art part 1
Aft733  cinematic game art part 1Aft733  cinematic game art part 1
Aft733 cinematic game art part 1
 
World building part 4
World building part 4World building part 4
World building part 4
 
World building part 3
World building part 3World building part 3
World building part 3
 
World building part 2
World building part 2World building part 2
World building part 2
 
World building part 1
World building part 1World building part 1
World building part 1
 
Game interface design part 2
Game interface design part 2Game interface design part 2
Game interface design part 2
 
Narrative skill of game content development
Narrative skill of game content developmentNarrative skill of game content development
Narrative skill of game content development
 
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
 
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
 
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
 
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
 
5 lecture (fun and passes ) 1 2-2021
5 lecture (fun and passes ) 1 2-20215 lecture (fun and passes ) 1 2-2021
5 lecture (fun and passes ) 1 2-2021
 
4 lecture (mda frame work) 25 1-2021
4 lecture (mda frame work) 25 1-20214 lecture (mda frame work) 25 1-2021
4 lecture (mda frame work) 25 1-2021
 

Kürzlich hochgeladen

怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证ehyxf
 
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...nirzagarg
 
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...instagramfab782445
 
Pondicherry Escorts Service Girl ^ 9332606886, WhatsApp Anytime Pondicherry
Pondicherry Escorts Service Girl ^ 9332606886, WhatsApp Anytime PondicherryPondicherry Escorts Service Girl ^ 9332606886, WhatsApp Anytime Pondicherry
Pondicherry Escorts Service Girl ^ 9332606886, WhatsApp Anytime Pondicherrymeghakumariji156
 
Independent Escorts Goregaon WhatsApp +91-9930687706, Best Service
Independent Escorts Goregaon WhatsApp +91-9930687706, Best ServiceIndependent Escorts Goregaon WhatsApp +91-9930687706, Best Service
Independent Escorts Goregaon WhatsApp +91-9930687706, Best Servicemeghakumariji156
 
Gamestore case study UI UX by Amgad Ibrahim
Gamestore case study UI UX by Amgad IbrahimGamestore case study UI UX by Amgad Ibrahim
Gamestore case study UI UX by Amgad Ibrahimamgadibrahim92
 
Sweety Planet Packaging Design Process Book.pptx
Sweety Planet Packaging Design Process Book.pptxSweety Planet Packaging Design Process Book.pptx
Sweety Planet Packaging Design Process Book.pptxbingyichin04
 
Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...
Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...
Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...gajnagarg
 
LANDSCAPE ARCHITECTURE PORTFOLIO - MAREK MITACEK
LANDSCAPE ARCHITECTURE PORTFOLIO - MAREK MITACEKLANDSCAPE ARCHITECTURE PORTFOLIO - MAREK MITACEK
LANDSCAPE ARCHITECTURE PORTFOLIO - MAREK MITACEKMarekMitek1
 
Furniture & Joinery Details_Designs.pptx
Furniture & Joinery Details_Designs.pptxFurniture & Joinery Details_Designs.pptx
Furniture & Joinery Details_Designs.pptxNikhil Raut
 
Abortion pills in Kuwait 🚚+966505195917 but home delivery available in Kuwait...
Abortion pills in Kuwait 🚚+966505195917 but home delivery available in Kuwait...Abortion pills in Kuwait 🚚+966505195917 but home delivery available in Kuwait...
Abortion pills in Kuwait 🚚+966505195917 but home delivery available in Kuwait...drmarathore
 
ab-initio-training basics and architecture
ab-initio-training basics and architectureab-initio-training basics and architecture
ab-initio-training basics and architecturesaipriyacoool
 
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...nirzagarg
 
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证eeanqy
 
Abortion pills in Riyadh +966572737505 <> buy cytotec <> unwanted kit Saudi A...
Abortion pills in Riyadh +966572737505 <> buy cytotec <> unwanted kit Saudi A...Abortion pills in Riyadh +966572737505 <> buy cytotec <> unwanted kit Saudi A...
Abortion pills in Riyadh +966572737505 <> buy cytotec <> unwanted kit Saudi A...samsungultra782445
 
Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...gajnagarg
 
Minimalist Orange Portfolio by Slidesgo.pptx
Minimalist Orange Portfolio by Slidesgo.pptxMinimalist Orange Portfolio by Slidesgo.pptx
Minimalist Orange Portfolio by Slidesgo.pptxbalqisyamutia
 
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证wpkuukw
 
TRose UXPA Experience Design Concord .pptx
TRose UXPA Experience Design Concord .pptxTRose UXPA Experience Design Concord .pptx
TRose UXPA Experience Design Concord .pptxtrose8
 

Kürzlich hochgeladen (20)

怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
怎样办理莫纳什大学毕业证(Monash毕业证书)成绩单留信认证
 
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
Top profile Call Girls In Mau [ 7014168258 ] Call Me For Genuine Models We ar...
 
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
 
Pondicherry Escorts Service Girl ^ 9332606886, WhatsApp Anytime Pondicherry
Pondicherry Escorts Service Girl ^ 9332606886, WhatsApp Anytime PondicherryPondicherry Escorts Service Girl ^ 9332606886, WhatsApp Anytime Pondicherry
Pondicherry Escorts Service Girl ^ 9332606886, WhatsApp Anytime Pondicherry
 
Independent Escorts Goregaon WhatsApp +91-9930687706, Best Service
Independent Escorts Goregaon WhatsApp +91-9930687706, Best ServiceIndependent Escorts Goregaon WhatsApp +91-9930687706, Best Service
Independent Escorts Goregaon WhatsApp +91-9930687706, Best Service
 
Gamestore case study UI UX by Amgad Ibrahim
Gamestore case study UI UX by Amgad IbrahimGamestore case study UI UX by Amgad Ibrahim
Gamestore case study UI UX by Amgad Ibrahim
 
Sweety Planet Packaging Design Process Book.pptx
Sweety Planet Packaging Design Process Book.pptxSweety Planet Packaging Design Process Book.pptx
Sweety Planet Packaging Design Process Book.pptx
 
Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...
Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...
Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...
 
LANDSCAPE ARCHITECTURE PORTFOLIO - MAREK MITACEK
LANDSCAPE ARCHITECTURE PORTFOLIO - MAREK MITACEKLANDSCAPE ARCHITECTURE PORTFOLIO - MAREK MITACEK
LANDSCAPE ARCHITECTURE PORTFOLIO - MAREK MITACEK
 
Furniture & Joinery Details_Designs.pptx
Furniture & Joinery Details_Designs.pptxFurniture & Joinery Details_Designs.pptx
Furniture & Joinery Details_Designs.pptx
 
Abortion pills in Kuwait 🚚+966505195917 but home delivery available in Kuwait...
Abortion pills in Kuwait 🚚+966505195917 but home delivery available in Kuwait...Abortion pills in Kuwait 🚚+966505195917 but home delivery available in Kuwait...
Abortion pills in Kuwait 🚚+966505195917 but home delivery available in Kuwait...
 
ab-initio-training basics and architecture
ab-initio-training basics and architectureab-initio-training basics and architecture
ab-initio-training basics and architecture
 
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...
 
Hackathon evaluation template_latest_uploadpdf
Hackathon evaluation template_latest_uploadpdfHackathon evaluation template_latest_uploadpdf
Hackathon evaluation template_latest_uploadpdf
 
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
怎样办理伯明翰大学学院毕业证(Birmingham毕业证书)成绩单留信认证
 
Abortion pills in Riyadh +966572737505 <> buy cytotec <> unwanted kit Saudi A...
Abortion pills in Riyadh +966572737505 <> buy cytotec <> unwanted kit Saudi A...Abortion pills in Riyadh +966572737505 <> buy cytotec <> unwanted kit Saudi A...
Abortion pills in Riyadh +966572737505 <> buy cytotec <> unwanted kit Saudi A...
 
Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...
Top profile Call Girls In Mysore [ 7014168258 ] Call Me For Genuine Models We...
 
Minimalist Orange Portfolio by Slidesgo.pptx
Minimalist Orange Portfolio by Slidesgo.pptxMinimalist Orange Portfolio by Slidesgo.pptx
Minimalist Orange Portfolio by Slidesgo.pptx
 
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证
 
TRose UXPA Experience Design Concord .pptx
TRose UXPA Experience Design Concord .pptxTRose UXPA Experience Design Concord .pptx
TRose UXPA Experience Design Concord .pptx
 

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.