Topics include:
Introduction to user interface
Types of user interface
Graphic user interface definition
History of user interface
Difference between UI and UX
Characteristics of GUI
Advantages and disadvantages
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
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.
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
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.
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
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.