Experience-Interface-Interaction.pdf

Hassey Wijetunge
Second Edition
Experience,Interface
&
Interaction

Acknowledgment
This book is compiled with various research resources. Firstly I like to thank all
the content contributors. All the original content adopted has been references at the
beginning of the chapter and as well as in the “References” section.
I wish to thank the following people for their contribution from Billy Blue
College:
* Jane Connory
* Melisa
* Melinda Coombes
* Andrew Marsh
* David Agius
* Jens Schroeder
* Liam Key

Topic Index
Chapter 1: Digital Art Pg 08 - 13
Chapter 2: Experience, Interface & Interaction
Pg 14 - 43
Chapter 3: Human Computer Interaction (HCI)
Pg 44 - 151
Chapter 4: Mobile Application Interface
Pg 152 - 185
Chapter 5: Browser Wars Pg 186 - 203
Chapter 6: Strange Behaviors Pg 204 - 227
Chapter 7: User Experience Pg 228 - 295
Chapter 8: The Industry Pg 296 - 387
Chapter 9: Interactive Visualization Pg 388 - 431
Chapter 10: The future of interaction Design
Pg 432 - 471
Chapter 11: Future Career Paths
Pg 472 - 503
Chapter 12: Blogging Pg 504 - 567

Know thy
user, and you
are not thy
user.
Arnie Lund

Chapter 1:
Digital Art
https://www.youtube.com/watch?v=2RWop0Gln24

What is Digital Art?
Digital Art can be defined as any form of art that is made with the help of a computer.
Drawings made on paper that are scanned in and changed in any way on
the computer, photographs that are modified, 3D characters created using a
computer are all examples of digital art.
• Illustration – vector drawings
• Digital photo manipulation
• Digital painting
• 3D modeling
• Web site design
• Computer generated images
• Animation
• Games
•
Importance of Digital Art
It is been debated that digital art is not real art since it is computer
generated and there are infinite copies and there is no ‘original’. However it
is now widely accepted as art since it involves creativity, and the knowledge
of art and design principles.

Why should we learn about Digital
Art
1. Builds creativity and innovation – The key tool in the 21st
century
2. Tomorrow’s workforce must be ﬂuent in technology as well as
demonstrate creativity and innovation.
3. Teaches visual communication in today’s multimedia world.
4. Most of our communication now takes place using computers.
Text is no longer the default communication method. Every
presentation or communication includes photos, graphics, video
and other multimedia elements. Everyone must be able to
communicate in this increasingly non textual and multi-media way.
Knowledge of visual design and digital technologies to manipulate
multimedia is now essential.
5. Brings ‘’STEM” to schools (STEM= Science,Technology,
Engineering, and Math) through the medium of Art. Read more on
the importance of digital art education under Education
6. Prepares workforce for tomorrow’s jobs.
7. Digital artists will ﬁnd an increased demand for their work
in this increasingly non textual, multimedia world. Web sites,
presentations, games, movies all use digital technologies.

Future of Digital Art
Before the camera, the role of artists was to depict the real world. Art
changed in the way it was used or the subjects it showed, but each time it
was a ‘window into the real world’. When the camera was invented, artists
realized that it was no longer important to portray the real world, and their
role could be redeﬁned. They started to express their imagination in different
ways and to show something that is not real – something abstract. Abstract
art can be considered a major step in the evolution of art and it started
with the invention of new technology – the camera. With the creation of the
computer and its use in art, we are now looking at the next major step in the
evolution of art. With the use of the computer, artists can create something
that was never possible. The way art is deﬁned itself is changing.
Use of Digital Art
• Graphic illustrations – in advertising, logos, brochures, posters
• Illustrations - in Books, Comics, web sites
• 3D models – in Animations, Movies, Video Games
• Digital photo artwork to create posters, advertisements
• Digital painting
• Web sites
• Computer generated images
• Animations
• Games

Digital Art brings together Art, Technology, Math and Science.Digital art
requires a creative spirit and the knowledge of art, design and computers.
The digital artists must be able to move easily between the worlds of art,
science, math and technology.
https://www.youtube.com/watch?v=-rvlaTg3vPg

Chapter 2:
Experience, Interface,
Interaction
https://www.youtube.com/watch?v=lciYKwVLTuk

Interfaces
Definition of an Interface
• A surface forming a common boundary of two bodies,
spaces, or phases
• The place or area at which different things meet and
communicate with or affect each other
• A system that is used for operating a computer : a
system that controls the way information is shown to a
computer user and the way the user is able to work with
the computer
• An area or system through which one machine is
connected to another machine
Types of User Interfaces
The three main types of user interface are;
⊗ Command Driven Interfaces
⊗ Menu Driven
⊗ Graphical User Interface (GUI)

⊗ Command Line (Command driven)
interfaces:
When using a command driven system to communicate with computer the
user has to type in special command words. For example DOS. DOS, which
stands for Disk Operating System, is a very commonly used command-
driven user interface. The main advantage of command driven interfaces
is that they can be quick to use as long as the user knows the correct
commands. The main disadvantage of command-driven interfaces is that
they are very difﬁcult to use if the user is a beginner or doesn’t know the
correct commands. Command-driven systems can be very unfriendly and
confusing for non-computer experts to use.

⊗ Menu Driven Inter ces
Menu-driven systems offer the user lists of options which they can select by
pressing a particular key on the keyboard. The main advantage of menu-
driven systems is that they are easy to use. The main disadvantage of
menu-driven systems is getting to one particular option can often involve
working through many different menu screens.

⊗ Graphical User Inter ce (GUI)
The most widely used type of graphical user interfaces are WIMP systems.
WIMP stands for Windows Icons Menu Pointer. Options are represented by
small pictures or ‘icons’ arranged inside rectangular boxes called windows.
The main advantage of graphical user interfaces is that they are very easy
to use, especially for a beginner. The main disadvantage is the amount of
memory space they need. A graphical user interface needs a lot of RAM to
run properly and takes up a large amount of hard disk space.

Principles, Tips & Tricks, Rules in
Interface Design
⊗Shneiderman’s “Eight
Golden Rules of Interface
Design”
⊗User Interface Design Tips
& Techniques
⊗User Interface Design
Principles
⊗Effective Web Design
Interface

⊗ Shneiderman’s “Eig Golden Rules
of Inter ce Design”
1. Strive for consistency: It is important to maintain consistent
sequences of actions should be required in similar situations; identical
terminology should be used in prompts, menus, and help screens; and
consistent commands should be employed throughout.
2. Enable frequent users to use shortcuts: When the frequency
of use increases, number of user’s desired interaction reduces along with
the increase of the pace of interaction. Abbreviations, function keys, hidden
commands, and macro facilities are very helpful to an expert user.
3. Offer informative feedback: For every operation action, it is
necessary to have some kind of feedback relating to the action. For frequent
and minor actions, the response can be modest, while for infrequent and
major actions, the response should be more substantial.
4. Design dialog to produce closure: Sequences of actions
must be organized into 3 groups: beginning, middle, and end. At the
completion the feedback informative gives the operators the satisfaction of
accomplishment, a sense of relief, the signal to drop contingency plans and
options from their minds, and an indication that the way is clear to prepare
for the next action.
5. Offer simple error handling: A system must be designed to
prevent the user cannot make a serious error. If an error is made, the
system should be able to detect the error and oﬀer simple, comprehensible
mechanisms for handling the error.
6. Permit easy reversal of actions: This feature is targeting to relief
nervousness of the user. User understands the errors cannot be undone.
When an option is provided to the user, he tends to engage using the
interface without hesitation knowing a safe area is installed for him to carry
out the operations. An “Undo” and “Redo” buttons are must.

7. Support internal locus of control: Advanced users believe they
are control of a system and system responds to their actions. Make sure
the system is designed to make users feel that they are the initiators of the
system rather than responders.
8. Reduce short-term memory load: As for the limitations of
human’s power of information processing displays must be kept simple,
multiple page displays be consolidated, window-motion frequency be
reduced, and sufﬁcient training time be allotted for codes, mnemonics, and
sequences of actions.
⊗ User Interface Design Tips &
Techniques
♦ Consistency, consistency, consistency & consistency. As said in
the food industry to push a chef to his limits, always chanting “push, push,
push”; in design industry, the most important thing you can possibly do is
ensure your user interface works consistently. If you can double-click on
items in one list and have something happen, then you should be able
to double-click on items in any other list and have the same sort of thing
happen. Put your buttons in consistent places on all your windows, use the
same wording in labels and messages, and use a consistent color scheme
throughout. Consistency in your user interface enables your users to build
an accurate mental model of the way it works, and accurate mental models
lead to lower training and support costs.
♦ Set standards and stick to them. The only way you can ensure
consistency within your application is to set user interface design standards,
and then stick to them.

♦Be prepared to hold the line. When you are developing the user
interface for your system, people who are investing on your system or
who asked you to design it will come up with unusual ideas. Be patient
with them, and explain them why you cannot do that. Stick to the UI
standards when explaining to them. Tell them why you cannot modify as
they want.
♦Explain the rules. Your users need to know how to work with the
application you built for them. When an application works consistently, it
means you only have to explain the rules once. This is a lot easier than
explaining in detail exactly how to use each feature in an application step-
by-step.
♦Navigation between major user interface items is important. If it is
difficult to get from one screen to another, then your users will quickly
become frustrated and give up. When the flow between screens matches
the flow of the work the user is trying to accomplish, then your application
will make sense to your users. Because different users work in different
ways, your system needs to be flexible enough to support their various
approaches. User interface-flow diagrams should optionally be developed
to further your understanding of the flow of your user interface.
♦Navigation within a screen is important. In Western societies, people
read left to right and top to bottom. Because people are used to this,
should you design screens that are also organized left to right and top to
bottom when designing a user interface for people from this culture? You
want to organize navigation between widgets on your screen in a manner
users will find familiar to them.

♦Word your messages and labels effectively. The text you display on
your screens is a primary source of information for your users. If your
text is worded poorly, then your interface will be perceived poorly by your
users. Using full words and sentences, as opposed to abbreviations and
codes, makes your text easier to understand. Your messages should be
worded positively, imply that the user is in control, and provide insight into
how to use the application properly. For example, which message do you
find more appealing “You have input the wrong information” or “An account
number should be eight digits in length.” Furthermore, your messages
should be worded consistently and displayed in a consistent place on
the screen. Although the messages “The person’s first name must be
input” and “An account number should be input” are separately worded
well, together they are inconsistent. In light of the first message, a better
wording of the second message would be “The account number must be
input” to make the two messages consistent.
♦Understand the UI widgets. You should use the right widget for the right
task, helping to increase the consistency in your application and probably
making it easier to build the application in the first place. The only way you
can learn how to use widgets properly is to read and understand the user-
interface standards and guidelines your organization has adopted.
♦Look at other applications with a grain of salt. Unless you know
another application has been verified to follow the user interface-standards
and guidelines of your organization, don’t assume the application is doing
things right. Although looking at the work of others to get ideas is always a
good idea, until you know how to distinguish between good user interface
design and bad user interface design, you must be careful. Too many
developers make the mistake of imitating the user interface of poorly
designed software.
♦Use color appropriately. Color should be used sparingly in your
applications and, if you do use it, you must also use a secondary indicator.
The problem is that some of your users may be color blind and if you
are using color to highlight something on a screen, then you need to do
something else to make it stand out if you want these people to notice it.
You also want to use colors in your application consistently, so you have a
common look and feel throughout your application.

♦Follow the contrast rule. If you are going to use color in your application,
you need to ensure that your screens are still readable. The best way to
do this is to follow the contrast rule: Use dark text on light backgrounds
and light text on dark backgrounds. Reading blue text on a white
background is easy, but reading blue text on a red background is difficult.
The problem is not enough contrast exists between blue and red to make
it easy to read, whereas there is a lot of contrast between blue and white.
♦Align fields effectively. When a screen has more than one editing field,
you want to organize the fields in a way that is both visually appealing and
efficient. I have always found the best way to do so is to left-justify edit
fields: in other words, make the left-hand side of each edit field line up in
a straight line, one over the other. The corresponding labels should be
right-justified and placed immediately beside the field. This is a clean and
efficient way to organize the fields on a screen.
♦Expect your users to make mistakes. How many times have you
accidentally deleted some text in one of your files or deleted the file itself?
Were you able to recover from these mistakes or were you forced to redo
hours, or even days, of work? The reality is that to err is human, so you
should design your user interface to recover from mistakes made by your
users.
♦Justify data appropriately. For columns of data, common practice is
to right-justify integers, decimal align floating-point numbers, and to left-
justify strings.
♦Your design should be Understandable. In other words, if your users
don’t know how to use your software, they should be able to determine
how to use it by making educated guesses.. Even when the guesses are
wrong, your system should provide reasonable results from which your
users can readily understand and ideally learn.
♦Don’t create busy user interfaces. Crowded screens are difficult to
understand and, hence, are difficult to use. Experimental results show that
the overall density of the screen should not exceed 40%, whereas local
density within groupings should not exceed 62%.

♦Group things effectively. Items that are logically connected should be
grouped together on the screen to communicate they are connected,
whereas items that have nothing to do with each other should be
separated. You can use white space between collections of items to group
them and/or you can put boxes around them to accomplish the same
thing.
♦Take an evolutionary approach. Techniques such as user interface
prototyping is critical to your success as a developer.
⊗ User Interface Design Principles
♦The structure principle. Your design should organize the user interface
purposefully, in meaningful and useful ways based on clear, consistent
models that are apparent and recognizable to users, putting related things
together and separating unrelated things, differentiating dissimilar things
and making similar things resemble one another. The structure principle is
concerned with your overall user interface architecture.
♦The simplicity principle. Your design should make simple, common
tasks simple to do, communicating clearly and simply in the user’s own
language, and providing good shortcuts that are meaningfully related to
longer procedures.
♦The visibility principle. Your design should keep all needed options
and materials for a given task visible without distracting the user with
extraneous or redundant information. Good designs don’t overwhelm
users with too many alternatives or confuse them with unneeded
information.

♦The feedback principle. Your design should keep users informed of
actions or interpretations, changes of state or condition, and errors or
exceptions that are relevant and of interest to the user through clear,
concise, and unambiguous language familiar to users.
♦The tolerance principle. Your design should be ﬂexible and tolerant,
reducing the cost of mistakes and misuse by allowing undoing and
redoing, while also preventing errors wherever possible by tolerating
varied inputs and sequences and by interpreting all reasonable actions
reasonable.
♦The reuse principle. Your design should reuse internal and external
components and behaviors, maintaining consistency with purpose rather
than merely arbitrary consistency, thus reducing the need for users to
rethink and remember.
⊗ Effective Web Design Interface
To understand the principles of web design, it is important to understand the
behavior of the users who use the web. We need to understand what they
think and how they think.

User’s thinking pattern
A person who visits a normal shopping store has different habits when
compared to the same person visiting the same shop online. They have
different interests. They read the information differently. They spend less
time on the online shop compared to being inside the physical shop. Most
users search for something interesting (or useful) and clickable; as soon as
some promising candidates are found, users click. If the new page doesn’t
meet users’ expectations, the Back button is clicked and the search process
is continued.
• Users don’t read, they scan. Analyzing a web-page,
users search for some fixed points or anchors which would
guide them through the content of the page.
• Web users are impatient and insist on instant
gratification. Very simple principle: If a web-site isn’t
able to meet users’ expectations, then designer failed
to get his job done properly and the company loses
money. The higher is the cognitive load and the less
intuitive is the navigation, the more willing are users
to leave the web-site and search for alternatives.
• Users don’t make optimal choices. Users don’t search
for the quickest way to find the information they’re
looking for. Neither do they scan web-page in a linear
fashion, going sequentially from one site section to
another one. Instead users satisfice; they choose the
first reasonable option. As soon as they find a link
that seems like it might lead to the goal, there is a
very good chance that it will be immediately clicked.
Optimizing is hard, and it takes a long time. Satisficing
is more efficient.
• Users follow their intuition. In most cases users
muddle through instead of reading the information a
designer has provided. According to Steve Krug, the
basic reason for that is that users don’t care.

“If we ﬁnd something that works, we stick to it. It
doesn’t matter to us if we understand how things work,
as long as we can use them. If your audience is going to
act like you’re designing billboard, then design great
billboards.”
• Users want to have control. Users want to be able to
control their browser and rely on the consistent data
presentation throughout the site. E.g. they don’t want
new windows popping up unexpectedly and they want to
be able to get back with a “Back”-button to the site
they’ve been before: therefore it’s a good practice to
never open links in new browser windows.
Principles Of Effective Web Design
[Article published by Smash Magazine: Author: Vitaly Freedman
(http://www.smashingmagazine.com/author/vitaly-friedman/)]
1. Don’t make users think.
According to Krug’s ﬁrst law of usability, the web-page should be obvious
and self-explanatory. When you’re creating a site, your job is to get rid
of the question marks — the decisions users need to make consciously,
considering pros, cons and alternatives.

If the navigation and site architecture aren’t intuitive, the number of
question marks grows and makes it harder for users to comprehend how
the system works and how to get from point A to point B. A clear structure,
moderate visual clues and easily recognizable links can help users to ﬁnd
their path to their aim.
Let’s take a look at an example. Beyondis.co.uk claims to be “beyond
channels, beyond products, beyond distribution”. What does it mean?
Since users tend to explore web-sites according to the “F”-pattern, these
three statements would be the ﬁrst elements users will see on the page
once it is loaded.Although the design itself is simple and intuitive, to
understand what the page is about the user needs to search for the answer.
This is what an unnecessary question mark is. It’s designer’s task to make
sure that the number of question marks is close to 0. The visual explanation
is placed on the right hand side. Just exchanging both blocks would
increase usability.

2. Don’t squander users’ patience
In every project when you are going to offer your visitors some service or
tool, try to keep your user requirements minimal. The less action is required
from users to test a service, the more likely a random visitor is to actually
try it out. First-time visitors are willing to play with the service, not ﬁlling
long web forms for an account they might never use in the future. Let users
explore the site and discover your services without forcing them into sharing
private data. It’s not reasonable to force users to enter an email address to
test the feature.
Stikkit is a perfect example for a user-friendly service which requires almost
nothing from the visitor which is unobtrusive and comforting. And that’s what
you want your users to feel on your web site.

3. Manage to focus users’ attention
As web-sites provide both static and dynamic content, some aspects of
the user interface attract attention more than others do. Obviously, images
are more eye-catching than the text — just as the sentences marked as
bold are more attractive than plain text. The human eye is a highly non-
linear device, and web-users can instantly recognize edges, patterns and
motions. This is why video-based advertisements are extremely annoying
and distracting, but from the marketing perspective they perfectly do the job
of capturing users’ attention.

.Humanized.com perfectly uses the principle of focus. The only element
which is directly visible to the users is the word “free” which works
attractive and appealing, but still calm and purely informative. Subtle hints
provide users with enough information of how to find more about the
“free” product. Focusing users’ attention to specific areas of the site with
a moderate use of visual elements can help your visitors to get from point
A to point B without thinking of how it actually is supposed to be done.
The less question marks visitors have, the better sense of orientation they
have and the more trust they can develop towards the company the site
represents. In other words: the less thinking needs to happen behind the
scenes, the better is the user experience which is the aim of usability in the
first place.
4. Strive for feature exposure
Modern web designs are usually criticized due to their approach of guiding
users with visually appealing 1-2-3-done-steps, large buttons with visual
effects etc. But from the design perspective these elements actually aren’t a
bad thing. On the contrary, such guidelines are extremely effective as they
lead the visitors through the site content in a very simple and user-friendly
way.

Dibusoft.com combines visual appeal with clear site structure. The site has
9 main navigation options which are visible at the ﬁrst glance. The choice of
colors might be too light, though.Letting the user see clearly what functions
are available is a fundamental principle of successful user interface design.
It doesn’t really matter how this is achieved. What matters is that the content
is well-understood and visitors feel comfortable with the way they interact
with the system.

5. Make use of effective writing
As the Web is different from print, it’s necessary to adjust the writing style to
users’ preferences and browsing habits. Promotional writing won’t be read.
Long text blocks without images and keywords marked in bold or italics will
be skipped. Exaggerated language will be ignored. Talk business. Avoid
cute or clever names, marketing-induced names, company-speciﬁc names,
and unfamiliar technical names. For instance, if you describe a service and
want users to create an account, “sign up” is better than “start now!” which
is again better than “explore our services”

Eleven2.com gets directly to the point. No cute words, no exaggerated
statements. Instead a price: just what visitors are looking for.An optimal
solution for effective writing is to¥ use short and concise phrases (come
to the point as quickly as possible),¥ use scannable layout (categorize
the content, use multiple heading levels, use visual elements and bulleted
lists which break the ﬂow of uniform text blocks),¥ use plain and objective
language (a promotion doesn’t need to sound like advertisement; give your
users some reasonable and objective reason why they should use your
service or stay on your web-site)
6. Strive for simplicity
The “keep it simple”-principle (KIS) should be the primary goal of site
design. Users are rarely on a site to enjoy the design; furthermore, in most
cases they are looking for the information despite the design. Strive for
simplicity instead of complexity.

Crcbus provides visitors with a clean and simple design. You may have
no idea what the site is about as it is in Italian, however you can directly
recognize the navigation, header, content area and the footer. Notice how
even icons manage to communicate the information clearly. Once the icons
are hovered, additional information is provided. From the visitors’ point
of view, the best site design is a pure text, without any advertisements
or further content blocks matching exactly the query visitors used or the
content they’ve been looking for. This is one of the reasons why a user-
friendly print-version of web pages is essential for good user experience.

7. Don’t be afraid of the white space
Actually it’s really hard to overestimate the importance of white space. Not
only does it help to reduce the cognitive load for the visitors, but it makes
it possible to perceive the information presented on the screen. When a
new visitor approaches a design layout, the ﬁrst thing he/she tries to do
is to scan the page and divide the content area into digestible pieces of
information. Complex structures are harder to read, scan, analyze and work
with. If you have the choice between separating two design segments by a
visible line or by some whitespace, it’s usually better to use the whitespace
solution. Hierarchical structures reduce complexity (Simon’s Law): the better
you manage to provide users with a sense of visual hierarchy, the easier
your content will be to perceive.
White space is good. Cameron.io uses white space as a primary design
element. The result is a well-scannable layout which gives the content a
dominating position it deserves.

8. Communicate effectively with a “visible language”
♦In his papers on effective visual communication, Aaron Marcus states
three fundamental principles involved in the use of the so-called “visible
language” — the content users see on a screen. Organize: provide
the user with a clear and consistent conceptual structure. Consistency,
screen layout, relationships and navigability are important concepts of
organization. The same conventions and rules should be applied to all
elements.
♦Economize: do the most with the least amount of cues and visual
elements. Four major points to be considered: simplicity, clarity,
distinctiveness, and emphasis. Simplicity includes only the elements that
are most important for communication. Clarity: all components should
be designed so their meaning is not ambiguous. Distinctiveness: the
important properties of the necessary elements should be distinguishable.
Emphasis: the most important elements should be easily perceived.
♦Communicate: match the presentation to the capabilities of the user. The
user interface must keep in balance legibility, readability, typography,
symbolism, multiple views, and color or texture in order to communicate
successfully. Use max. 3 typefaces in a maximum of 3 point sizes — a
maximum of 18 words or 50-80 characters per line of text.

9. Conventions are our friends
Conventional design of site elements doesn’t result in a boring web site.
In fact, conventions are very useful as they reduce the learning curve, the
need to ﬁgure out how things work. For instance, it would be a usability
nightmare if all web-sites had different visual presentation of RSS-feeds.
That’s not that different from our regular life where we tend to get used
to basic principles of how we organize data (folders) or do shopping
(placement of products).
With conventions you can gain users’ conﬁdence, trust, reliability and prove
your credibility. Follow users’ expectations — understand what they’re
expecting from a site navigation, text structure, search placement etc.

10. Test early, test oftenThis so-called
TETO-principle should be applied to every web design project as usability
tests often provide crucial insights into significant problems and issues
related to a given layout. Test not too late, not too little and not for the
wrong reasons. In the latter case it’s necessary to understand that most
design decisions are local; that means that you can’t universally answer
whether some layout is better than the other one as you need to analyze it
from a very specific point of view (considering requirements, stakeholders,
budget etc.).Some important points to keep in mind: according to Steve
Krug, testing one user is 100% better than testing none and testing one
user early in the project is better than testing 50 near the end. According to
Boehm’s first law, errors are most frequent during requirements and design
activities and are the more expensive the later they are removed. testing is
an iterative process. That means that you design something, test it, fix it and
then test it again. There might be problems which haven’t been found during
the first round as users were practically blocked by other problems. usability
tests always produce useful results. Either you’ll be pointed to the problems
you have or you’ll be pointed to the absence of major design flaws which is
in both cases a useful insight for your project. according to Weinberg’s law,
a developer is unsuited to test his or her code. This holds for designers as
well. After you’ve worked on a site for few weeks, you can’t observe it from
a fresh perspective anymore. You know how it is built and therefore you
know exactly how it works — you have the wisdom independent testers and
visitors of your site wouldn’t have.
Bottom line: if you want a great site, you’ve got to test.

Reference List!
• 10 Principles Of Effective Web Design â€“
Smashing Magazine. (2008, January 31). Retrieved
June 4, 2015, from http://www.smashingmagazine.
com/2008/01/31/10-principles-of-effective-web-
design/ Software for Use: A Practical Guide to the
Models and Methods of Usage ...
• By Larry L. Constantine, Lucy A.D.
LockwoodDesigning the User Interface: Strategies
for Effective Human-computer Interaction, By Ben
Shneiderman, Catherine Plaisant, 5, Illustration,
Addison-Wesley, 2010, ISBN 0321601483,
9780321601483
• What's the difference between UI
and UX design? (n.d.). Retrieved April
5, 2015, from http://www.quora.com/
Whats-the-difference-between-UI-and-UX-design

Design is not just what it
looks like and feels like"
Design is how it works"
Steve Jobs

Chapter 3:
Human Computer
Interaction ( HCI)
https://www.youtube.com/watch?v=bzFv09QrY6E

What is Human Computer
Interaction (HCI)?
HCI stands for human-computer Interaction, a discipline concerned with
the study, design, construction and implementation of human-centric
interactive computer systems. A user interface, such as a Graphical User
Interface (GUI), is how a human interacts with a computer, and HCI goes
beyond designing screens and menus that are easier to use and studies
the reasoning behind building speciﬁc functionality into computers and the
long-term effects that systems will have on humans. HCI is a very broad
discipline that encompasses different specialties with different concerns
regarding computer development: computer science is concerned with the
application design and engineering of the human interfaces; sociology and
anthropology are concerned with the interactions between technology, work
and organization and the way that human systems and technical systems
mutually adapt to each other; ergonomics is concerned with the safety of
computer systems and the safe limits of human cognition and sensation;
psychology is concerned with the cognitive processes of humans and the
behavior of users; linguistics is concerned with the development of human
and machine languages and the relationship between the two.
As computers become more and pervasive in culture, designers are
increasingly looking for ways to make interfacing with devices easier, safer
and more efﬁcient.

HCI Principles
1. General design principles involve being aware of, and catering to, human
abilities, skills and differences (human factors). These apply to design
of any human-machine system e.g. cars, playgrounds, lifts, phones,
computers.
2. Designing human-computer interaction is a particular area of human
factors design with speciﬁc principles and guidelines.
Human Factors
Invention of machines (cars, airplanes, electronic devices ...) taxed
people’s sensor motor abilities to control them. Even after high degree
of training, frequent errors (often fatal) occurred. Result: human factors
became critically important. However, designers still often consider cost and
appearance over human factors design.

People tend to blame themselves when errors occur:
• “I was never very good with machines”
• “I knew I should have read the manual!”
• “Look at what I did! Do I feel stupid!”
Bad design not always visible, but sometimes it is very obvious. There are
some human characteristics involved with human factors. Designer must
take into account variations in human senses and motor abilities:
• Vision – e.g. depth, contrast, colour blindness, and
motion sensitivity.
• Hearing - e.g. audio cues must be distinct.
• Touch: e.g. keyboard and touchscreen sensitivity.
• Motor control/ hand-eye coordination e.g use of
pointing devices.
• Physical strength, coordination.
Personality factors also need to be taken into account. There is no single
taxonomy for identifying user personality types. Designers must be aware
that populations are subdivided and that these subdivisions have various
responses to different stimulation.
It is important to consider the cultural awareness and international diversity
when designing the interface. The following are the areas considered as
cultural and international diversity.

• Characters, numerals, special characters, grammar, spelling
• L-to-r vs r-to-l vs vertical input & reading
• Date and time formats
• Numeric and currency formats
• Telephone numbers and addresses
• Names and titles (Mr., Ms., Mme.)
• Social-security, national id & passport numbers
• Etiquette, policies, tone, formality, metaphors
Special attention must be played for users with disabilities. Need to plan
early to accommodate users with disabilities as costs may be very high
later. Some countries have laws which specify requirements to comply with
equal opportunity legislation

Design Process
Important to consider the What, Why and How of design process for an
application before you even begin to think about the interface, coding, etc.
User needs and usability goals must be addressed at the beginning of
the design process. Designers can make incorrect assumptions about the
requirements. Four basic activities of interaction design:
1. Identifying needs and establishing requirements Who our
target users are?
What kind of support an interactive product can provide?
2. Developing alternative designs
• ● Conceptual design: produce the conceptual model
for the product, e.g., what the product should do,
behave and look like
• ● Physical design: consider detail of the product
including the colors, sounds, images to use, menu
design, icon design, etc
3. Building interactive versions of the designs
Not necessarily build a software version, other possible simple
prototypes include paper-based storyboard, wood, etc. e.g., When the idea
for the PalmPilot was being developed, Jeff Hawkin carved up a piece of
wood about the size and shape of the device he had imagined. He used to
carry this piece of wood around with him and pretend to enter information
into it, just to see what it would be like to own such a device

4. Evaluating designs
Determine usability & acceptability of product or design require user
involvement throughout development
Game Controller Hardware
⊗ The Computer Keyboard
⊗ Paddle for PONG
⊗ ATARI 2600 JOYSTICK
⊗ THE COMPETITION PRO 5000
⊗ SPEEDKING
⊗ FAMICON
⊗ NITENDO 64 AND SONY DUAL SHOCK
⊗ MICROSOFT XBOX & GAME CUBE
⊗ Wii
⊗ Kinect
⊗ Touch Screens
⊗ Evaluation of Home Video Game Consoles
1967 to 2011
⊗ Development of the game controller :
console standards

⊗ THE COMPUTER KEYBOARD:
Yes the trusty QWERTY keyboard has always had a place for gaming. The
earliest games were on old school ‘server like’ systems at defense buildings
and universities. They were controlled via keyboards and games were
developed for them. Nowadays a quality mouse and keyboard is still seen
as the pinnacle of control for PC gamers (even though many are starting to
use console controllers with their PC setups). In addition the home of the
MMO is still the PC due to the keyboard (and mouse).

⊗ Paddle for PONG
Pong was the ﬁrst proper, mainstream console game for the home. It was
a simple, top down, 2D version of tennis (well kinda). You moved a knob
left and right to move your on screen ‘bat’ up and down the screen. It was
simple, and the controller was purpose built for the gameplay. It was limited
in that it could only be used for Pong and it showed that controllers were key
to gameplay.

⊗ ATARI 2600 JOYSTICK
This is the joystick that the masses remember. Sleek with an omni-
directional control stick. The unit also had a trigger button and opened up
arcade style gaming at home. The style was widely copied, such as onto the
popular Spectrum series of computers. However as time and the complexity
of games increased Commodore and Spectrum gamers demanded more.
They got more.

⊗ THE COMPETITION PRO 5000
It had two buttons for choice and an extra sturdy and solid control stick.
This became the choice for many home computer enthusiasts as it could
take a good bashing (still a quality people look for in their controllers). Other
varieties became available, ideal for slight sims and shooters such as the
Quickshot Pro

⊗ SPEEDKING
Out of the Commodore 64/Speccy/Amiga generation one of the joysticks
which is remembered fondly is the good old Speedking. This was unique
for it’s time as it offered a control stick in the palm of the hand. No more
placing the controller, with suction points, on a table. This sat in the palm
of your hand and offered precise control. Once again, build quality was
really impressive, with the trigger quite literally being placed under your
trigger ﬁnger. Many of the ingredients in current console controllers can be
referenced to the SpeedKing.

⊗ FAMICON
Nintendo through their Game and Watch range and home consoles, such
as the NES introduced the Dpad. This steered away from the idea of a
control stick, hence avoiding the size (and associated production costs) with
a micro-switched pad which you could rest your thumb on. For platformers
(Nintendo’s speciality) it offered a precise and exact form of control, with
the right hand having access to two buttons, an A and B, increasing types
of actions players could execute within the gameplay.As time went on
Sega produced their own versions and between them Nintendo and Sega
added more buttons, to give a wider range of actions the player could
trigger, emulating the arcade cabinets which by this time had many buttons
accessible to the player.

⊗ NITENDO 64 & SONY DUAL
SHOCK
Now we move onto familiar territory. This was the generation where control
sticks came back to the mainstream. Nintendo added only one, something
they would repeat in later years with the 3DS. Sony on the other hand,
initially launched with none, but then altered their PS1 controller to include
two, sitting side by side. Buttons increased on the front, and triggers
were added on the rear. FPS games already existed a-plenty on PCs,
using mouse and keyboard solutions. Whilst the dual sticks were never
considered by purists as nearly as accurate, they did allow these types of
games to make their way to consoles. Quake 2 on PS1 is a great example.
The Dual stick also led to the third person shooter, which started on the PS1
generation but came to the fore with the PS2 onwards.

⊗ MICROSOFT XBOX & GAME CUBE
When the Xbox was released it introduced two control sticks, with the layout
being offset (similar to how we produce our own Gioteck controllers). The
overall shape of the controller was similar to the failed Dreamcast (perhaps
as Microsoft were involved in the Dreamcast), but the size was huge. It was
so huge that you would think that it would replace the harp in the gamers
version of Jack and the Beanstalk. This was a huge problem for the launch
of the device in size conscious Japan. Microsoft soon replaced it with the
controller S (s for sensible perhaps), which bar a few buttons which have
been lost on the 360 controller, is easily recognizable today as an Xbox
controller. The Gamecube also launched with offset control sticks and was
a superb and light controller. It’s crime though was not having enough
shoulder triggers to allow the full range of FPS games being made available
on PS2 and Xbox to easily convert to the world of Nintendo. This was an
example of a great controller, which didn’t innovate, but also didn’t keep up
and hence locked Nintendo OUT of certain gameplay styles.

⊗ Wii
Clearly the Wii controller unlocked a lot of
potential. It allowed ways of playing games which
had never been approached before, or in some
cases referenced the earliest types of controllers
such as the Pong Paddle or the Amiga joypad.
Turned on it’s side it also mimicked a traditional
Famicon/NES setup which so many consumers
still knew and understood how to use. It was so
successful it led Sony to develop its competing
(but ultimately failed) ‘Move’ technology (which is
being built into the PS4 in a different format) and
Microsoft to release…..

⊗ KINECT
Kinect was interesting. One of the reasons why the Wii controller was so
successful was in part due to the ability of the technology to empower the
gamer. The gamer could play the game as they would in the real world.
Hence bowling was very similar to bowling a real ten pin bowling ball, or
swinging in a golf game was very similar to actually swinging a real golf
club. Microsoft took the lesson one step further. Why hold anything? Why
not just become the controller? To be honest whilst the implementation
was very different, the concept had already been brought to the market as
part of the PS2 ‘Eyetoy’.As with all cutting edge tech, the marketing was
ahead of the ability of Kinect to deliver and whilst Kinect dance games
have done well, the technology has failed to offer the level of control
promised. Kinect completely missed it’s target at bringing ‘motion based’
control to hardcore gamers whilst the ‘casual’ and youth market are more
involved in tablet based gaming. Yet, with the soon to be announced
successor to the Xbox, Microsoft are sure to increase the ability of Kinect
to meet the original marketing speech. Peripheral eye movement during
FPS games? Finger based motion? The ability to use it whilst sitting down
– you’d think that would have been in version one – but it was a ‘stand up
only’ device!

⊗ TOUCH SCREENS
We are mentioning touch screens as their own format, as they are now
everywhere. The first time they became used in gaming, for the mainstream,
was with the Nintendo DS. There was a time when phones did not have
touch screens! It wasn’t the first of course, Apple’s Newton and Palm’s
devices had always had basic games on them. However the Nintendo DS
allowed a much greater fidelity and accuracy, along with the games and
graphics one would expect from a gaming system. The DS also allowed
you to use a touch screen alongside traditional buttons and a Dpad.Since
the DS, we have seen the explosion of touch screen phones and the rise
of the tablet. This has resulted in new gameplay mechanics (Angry Birds
for example) or in some cases new workarounds as people try to bring
traditional games to touch devices where they don’t really belong (virtual
control sticks being one awkward solution).

Ironically the impact of the touchscreen has resulted in the traditional
console companies now incorporating them into their offering. The Nintendo
WiiU has a touchscreen at the heart of it’s controller. The PS4 will have a
small touchpad (not screen) on it’s new Dual Shock. Microsoft already allow
the 360 to work with tablets and it’s sure to increase this functionality with
it’s new consoles.

⊗ Evolution of Home Video Game
Consoles 1967 to 2011
Video gaming has come a long way since the early days of Pong and Pac-
man. We can now play affordable games of high calibre with 3D graphics
and awesome interactivity in the comfort of our home, taking for granted
the little and subtle improvements made to each and every consoles
before becoming what they are today. In a way, the aggressive competition
between companies of video game consoles had churned out the superior
features of video gaming to bring to us the excellent quality we see today.
As you shall see below, the evolution of video game consoles is indeed
intriguing. Did you know that there were more than 70 different consoles to
date? And did you know that there was a peak era of video arcade game
when Nintendo and Sega were ﬁercely pitting against each other with their
revolutionary consoles? If you are amazed by such facts, then I guarantee
that this entry will excite you even further with the bits and pieces of
fascinating historical facts across the video game consoles timeline.Whether
you’re a gamer or not, this is a great opportunity for you to go behind the
scene and uncover the ‘making’ of present-day consoles!

1967
The ﬁrst video game console (working prototype) debuted as a bulky
rectangular brown wooden box with two attached controllers, and thus the
name "Brown Box". Invented by Ralph H. Baer (1922 – ), also known as
"The Father of Video Games", he developed the brown video game console
such that it can be hooked up with any ordinary TV sets. There were only
six simple games for the console, namely ping-pong, tennis, handball,
volleyball, chase games and a light-gun game.

1972
The demonstration of the "Brown Box" led to the licensing of the technology
by Magnavox in 1972, resulting in the release of the first official home video
game console – Magnavox Odyssey. Just as the earliest films do not feature
recorded sound, the first video game console is silent as well, with graphics
which we would consider very primitive by today’s standard.

1978 to 1980
Nintendo, the company which eventually became a major player in the
video gaming industry for the next three decades, delivered their ﬁrst series
of video game console from 1977 to 1979. The Color TV Game Series
were only for sale in Japan. These consoles essentially followed in the
footsteps of Atari and featured Pong-style games. Once again, there were
a few newcomers to the market but they were met with limited success.
Bally Astrocade came about in 1977 and was celebrated for its superior
graphic capabilities. For some reason, it did not last long. Mattel introduced
its Intellivision console in 1979, which actually intimidated Atari 2600 with
its exceptional capabilities. Coleco continued with its line of consoles of
all sorts, in an attempt to pit against the mighty Atari 2600. Coleco had
consoles for playing shooting, car racing and pinball games. Similarly,
Magnavox persisted on with a few more upgraded consoles of its own, but
they were inherently Pong consoles that play Pong-based games. Philips,
having bought Magnavox in 1974, developed some variations of Magnavox
Odyssey’s models as well. Regardless, Atari 2600 remained at the top
owing to its cartridge-based console equipped with better graphics and
games.

1981 to 1985
The golden age of video gaming has arrived! With progressively advanced
gaming technology,the 1980s was a period of genre innovation when the
industry began experimenting with non-Pong games like fighting, platform,
adventure and RPG games. It is also this era that we saw the release
of all-time classic games such as Pac-man (1980), Mario Bros (1983),
The Legend of Zelda (1986), Final Fantasy (1987), Golden Axe (1988),
etc. There was also a major shift from dedicated consoles (with built-in
games) to cartridge-based video game systems. Both Sega and Nintendo
dominated the video gaming scene in that decade. The first console
ever released by Sega was the SG-1000 in 1983. It was not exactly well-
known since it was mostly distributed in Asia and never launched in North
America. However, that machine laid the foundation for its top-notch
successor in 1985, the Sega Master System. Nevertheless, the Nintendo
Entertainment System (NES) revealed in 1983 emerged victorious as the
best-selling console of that generation. It is even fair to say that the NES
single-handedly raised Nintendo to a company easily identified with gaming.
Companies within the video game consoles market like Atari, Mattel and
Coleco released new consoles, Atari 5200, Intellivision II and ColecoVision,
respectively, but these were not comparable with the popularity of Sega
and Nintendo. In fact, ColecoVision was the last home video game console
Coleco released. They dominated the home video gaming market until they
were dethroned by NES when it was introduced to the US and UK market
a year after the 1984 video game industry crash. As a result of the crash,
ColecoVision ended up as the last console released by Coleco. Meanwhile,
a few new and unheard consoles were brought to the market by hopeful
companies, only to be overwhelmed by the intense competition between the
Sega Master System and NES.

1961 to 1990
As the struggle for domination continues between Nintendo and Sega, each
of them released brand new consoles to challenge each other’s positions.
Sega came up with the its number one console of all time, the Mega Drive/
Genesis in 1988. To counter the threat, Nintendo presented the Super
Nintendo Entertainment System (SNES) two years later, the console next
in line after NES. Sega released the Master System II in the very same
year after gaining signiﬁcant success with Mega Drive/Genesis. This was
the major console war that occurred in the 80s.Atari was slowly slipping out
of the console market despite yet another undertaking in its latest system,
the Atari 7800. The draw was that it offered backward compatibility with the
phenomenal Atari 2600, allowing players to enjoy classic games of the past.
Newcomer TurboGrafx-16 by NEC tried to target both Sega Genesis and
Nintendo’s SNES and NES consoles but was ultimately overtaken by them
in 1991, ranking fourth in the video game market. An enhanced version,
the SuperGrafx (1989), was also not well-received. SNK Neo Geo, already
famous for its arcade machines production, went ahead to bring the arcade
experience to home video game consoles in 1990. The Neo Geo AES
(Advanced Entertainment System) was equipped with remarkable graphics
thanks to the larger size of the games, which consequently led to the pricey
tag (the console costs more than 800 dollars, while each game piece over
200 dollars). It is for this reason that the public’s reception of the ﬁrst Neo
Geo console was less than great.

1991 to 1993
In the ﬁrst few years of 1990s, there is a notable shift in the medium used
for storing games from cartridges to compact discs. What this meant
was that there were increased capacities for video gaming, prompting
as well a transition of 2D graphics to that of 3D. The ﬁrst CD console
was launched by Philips (1991) – the CD-i. Regrettably, the console was
more commonly recognized as a failure for its sub-standard games and
frustrating controllers.In 1992, NEC TurboGrafx-16 was upgraded to the
TurboGrafx-CD to meet the demands of CD-based consoles. But again, it
lost itself to Sega Genesis/MegaDrive with its latest add-on, the Sega CD.
Atari made its last console appearance with their CD-based Atari Jaguar
in 1993, which was meant to contest against the other 16-bit consoles like
the Sega Genesis and SNES. It then found itself losing the console battle
with more advanced next generation console like the Sega Saturn and
Sony Playstation a year later. Commodore, a US-based home computer
manufacturer, gained entry into the market with its very own Amiga CD32
(1993). Sadly, it was only for a brief few months before Commodore
declared bankrupcy in 1994, thus prematurely ending the sales of a video
game console with some potential.

1994 to 1997
In 1994, Sony ﬁnally made its entrance with the leading Playstation. Sega
At the same time, Sega with its immense success of its MegaDrive/Genesis
system, went on to expand it into a series, with the Genesis 2 (1994) and
Genesis 3 (1997). It also developed an entirely new console, Saturn, to
rival against the rest of the CD-based consoles. Nintendo, on the other
hand, stuck to its cartridge system for its new Nintendo 64.SNK Neo Geo
moved on with a CD-based console in 1994. Having learnt their lesson for
putting a costly tag for their console and games, the Neo Geo CD console
costed $300 while its games costed around $50, which were sharp drops
from its previous AES system. NEC now exhibited its new PC-FX, which
looked more like a desktop CPU than a console. The technology they
utilized was outdated when compared to that of Sega Saturn and Sony
Playstation, hence what followed was that the console was phased out and
NEC no longer produced home consoles. During this time, there were also
many other consoles which most of us would not have heard of. Bandai,
Casio and even Apple came up with their own consoles. The Virtual Boy by
Nintendo, launched in 1995, consisted of a head-mounted display to view
3D graphics.

1998 to 2004
Sega Saturn was not a major success, so Sega thought of another new
console for the next generation – the Sega Dreamcast (1998). In terms
of providing internet support via its built-in modem for online playing,
Dreamcast was the pioneer back in 1998. Two years later, Sony progressed
on with the next Playstation, the Playstation 2. In 2001, Nintendo switched
its cartridge-based Nintendo 64 to a DVD-ROM GameCube. That very same
year, we saw Microsoft entered in the video game console industry in 2001
with its well-received Xbox, which featured online gaming service as well,
the Xbox Live.
Now that the industry is stabilized after three decades of experimenting
with all sorts of consoles, there were rarely any entry attempts by fresh
companies. Interestingly enough, there is one XaviXPORT in 2004 that is
relatively unheard of. The console uses cartridges and have controllers
which looked like sports equipments to interact with on-screen games. It
was basically used for working out and keeping ﬁt. Kind of reminds us of the
existing Nintendo Wii, doesn’t it?

2005 to Today
Finally, the current generation of video game console only has room for
three major competitors: Xbox 360, Sony Playstation 3 and Nintendo
Wii. With full 1080p HD graphics for both the Xbox 360 and Playstation
3, and Wii’s innovative remote for sensing 3D movements, it seems that
video gaming had indeed came a long, long way. In addition to these, all
three consoles had expanded with add-ons such as the MotionPlus for
Wii (2009), Kinect (2010) for Xbox 360 and Move (2010) for Playstation
3. These three add-ons similarly involved the capability to sense physical
motion accurately, enhancing the interactive experience for players.Most
of the companies were already phased out – Atari, Coleco, NEC, Sega,
etc, but there are currently still two adventurous companies who dare to
compete head-on with the Big Three. Mattel is back with its Hyperscan
console after disappearing from the industry for three decades. Marketed to
young boys of the age of five to nine, it was only available for a year before
they were taken off the shelf in 2007. The PC World Magazine ranked it the
7th worst video game system of all time.On the other hand, the EVO Smart
Console (2008) looks to be more promising with its HD graphics, internet
access, 120GB hard drive and 2GB RAM. Also a Media PC, it is the first
Linux Open Source game console. However, for some strange reason, the
console’s official website is no longer available and is not even indicated in
Envisions’ website.

⊗ Development of the game controller –
console standards

Evolution Of Video Games User
Interface (Ui)
Deﬁning Ui
What we’re referring to as UI here is the way players can interact with
the game and receive feedback of their interaction. It generally applies to
the interactivity and concepts of a game. This includes several aspects
of gameplay such as the graphics, storyline, visual perspectives (point-
of-view), controls, level designs, behaviors of Ai, etc. The experience
generated from the resultant gameplay or interaction is the objective of the
game.
⊗ Mindless & Repetitive Games Of Skill
⊗ Storylines & Interactivity
⊗ From Games To Movies
⊗ The Quest For Realism
⊗ Open-World & Non-Linearity Gameplay
⊗ Physics Engine
⊗ Physical Simulation
⊗ Sports Consoles And Controllers
⊗ Full-Body Movement

⊗Mindless & Repetitive
Games Of Skill
The first type of gameplay the video game industry had for players was that
involving a test of their control and/or reflex skills as they progress into the
game with increasing difficulties. The enemies within these games could
be another human player or the AI and the objective was to stay alive by
means of maintaining the necessary skill level to defeat them.
⊗ Tennis for Two (1958)
⊗ Spacewar! (1961)
⊗ Pong (1972)
⊗ Space Invaders (1978)
⊗ Pac-Man (1980)

⊗ Tennis for Two (1958)
One example of such primitive games is that of Tennis for Two (1958), a
game which simulates tennis or ping pong where each player manipulates
the ball trajectory over a simpliﬁed tennis court from the side. Players
simply press the button to hit the ball when it is at their side of the net after
adjusting the hitting angle with a control knob. The game goes on until a
player misses.

⊗ Spacewar! (1961)
As one of two players in Spacewar! (1961), you are to control a spaceship
to ﬁre against your opponent. The additional challenge comes about with
a star at the center of the screen that suck players toward it, even though
players get to activate ‘Hyperspace’ that places their ship at a random
location on screen. The game may have a more complex gameplay than
Tennis for Two, but the idea was still on reﬂex training.

⊗ Pong (1972)
It was also the same for the classic video game Pong (1972), where two
players battle in out with their paddles onscreen and try to return the ball
to their opponent without a miss. When the opponent fails to hit the ball,
the other player gains a point. It was about this time that game developers
realize that players get an extra incentive to play when things start
becoming competitive with player scores.

⊗ Space Invaders (1978)
The scoring feature was further popularized with the classic, Space
Invaders (1978), which pitted players with cute pixelated aliens! A 2D fixed-
shooter game, players have to move a laser cannon horizontally across the
bottom of the screen and fire at descending aliens, which can fire back.
The game speeds up as time passes, and players spent hours to clear the
aliens off the screen, logging in high scores that were posted for all to see.

⊗ Pac Man (1980)
By the 1980s, skill-based games had evolved to include other features to
test players on their reﬂex-and puzzle-solving capabilities. Scores, power-
ups and avoiding enemies (versus confronting and killing them) in classic
hits like Pac-Man (1980) took game development further. Navigate through
a maze and consume all the pellets to advance to the next stage, avoid the
ghosts or consume power pellets to turn the tables temporarily.

Storylines & Interactivity
While skill games were evolving to include scores and other added
features, another genre was emerging within the industry to spice up the
content of games.
⊗ Colossal Cave Adventure (1975)
⊗ Donkey Kong (1981)
⊗ Super Mario Bros (1985)
⊗ Final Fantasy (1987)

⊗ Colossal Cave Adventure (1975)
Colossal Cave Adventure (1975) was known as the first computer
adventure game that eventually brought storylines into games. It had no
graphical interface, only textual. The draw of the game was its story-rich
content and the interactivity involved. Players type in commands indicating
what they wish to do next in each situation. Depending on the choices the
players make, the story unfolds in different ways with different endings.

⊗ Donkey Kong (1981)
Developers eventually tried putting story elements and graphics together in
their games; one of the pioneers was Donkey Kong (1981). It was one of the
earliest game to have a storyline. You play Jumpman who has to rescue the
Lady from Donkey Kong and in-game characters began to take form – with
pink dresses, red overalls and villain-trademark smirks. Such details allow
for players to identify with the characters and immerse themselves into the
story.

⊗ Super Mario Bros (1985)
With the advent of scrolling computer display technology, games were soon
no longer confined to a single, static playing field; page-flipping emerged.
The expansion of the playing field allowed for side-scrolling video games,
popularizing the platform game genre. Super Mario Bros (1985) easily one
of the most prominent games to grace our childhood banked on a cute and
simple storyline, cute characters and multiple-stage quests.

⊗ Final Fantasy (1987)
Other games depend more heavily on storylines as the impetus for players
to ﬁnish the game. Role-playing video games (RPG) arose from the
evolution of story-based games and the ‘leveling-up‘ of game character
experience was introduced. Final Fantasy (1987), although not the ﬁrst
(RPG) available on the gaming market, was the game that popularized this
genre.

From Games To Movies
Over the next two decades, the storylines in games continue to develop,
to the point of actually becoming movie-worthy. As a matter-of-fact, some
of them were actually made into movies. For instance, the moderately
successful ﬁlm Lara Croft: Tomb Raider and its sequel, Lara Croft Tomb
Raider: The Cradle of Life were created in 2001 and 2003 for the Tomb
Raider video games series. Other noteworthy game movies include
Resident Evil (2002), Silent Hill (2006) and Prince of Persia: The Sands of
Time (2010).

The Quest For Realism
Back in the early days of video games, the limiting graphical capabilities
and computing power shifted the focus of games to the little details like
storylines and high scores. Those were the times when ‘realism’ had more
to do with how players interact and relate with the game than just graphics
per se. But the 3D graphics in the 1990s changed that, allowing us to skip
from 2D to 3D. It made possible the idea of a ‘first-person’ point-of-view
(POV) gameplay, which is pretty much you seeing the action through the
eyes of the game character. Such gameplay has been popularized with first-
person shooter (FPS) games such as Wolfenstein 3D (1992). It may not
be the firstborn of the genre, but it laid the path for classics such as Doom
(1993) and Quake (1996).

Open-World &
Non-Linearity Gameplay
Yet another major milestone was reached with the rise of 3D open world
action-adventure games following the release of Grand Theft Auto III (2001).
Following in the footsteps of its predecessors, Grand Theft Auto (1997) and
Grand Theft Auto 2 (1999), GTA III afforded players with a considerable
level of freedom to explore the virtual world and options in fulfilling certain
objectives. The switch from the usual top-down view of GTA and GTA 2
to roaming the streets and interacting with objects and characters in GTA
III endorsed the open world concept. No more loading screens as your
character crosses from one stage to another, or invisible boundaries where
you cannot surpass. Nonetheless, the game stayed true to its non-linearity
gameplay concept from its first two games of the series. The resultant
paradigm of open-ended game design and open world concept by GTA III
was adopted by many video games that follow, thereby making it one of the
most influential games of all time.

Physics Engine
While game content is also crucial to the players’ gaming experience, one
must play for an extended period of time to feel the ‘realism’. Graphics, on
the other hand, have a more direct impact on players since they are the
in the front line of exposure to the players. In the years that follow the rise
of 3D games, developers have focused on making games more detailed
and life-like in terms of its presentation. Equally important is the gameplay
physics of the game, comprising of movements and reaction from the
physical environment.
For Every Action
Games like Dirt (2007) featured physics where car controls were realistic
and players could witness car parts ﬂying and falling off in car crashes. In
a similar vein, Crysis (2007) used its own physics engine to create a lifelike
gameplay where objects fall and spin off naturally with accompanying bullets
and explosions. Check out the awesome demo of the physics engine.

We have also seen the transition of gameplay physics from Ragdoll to the
Euphoria physics engine. Both are commonly used to physically simulate
the death of game characters.
Ragdoll Deaths
Before there was the Ragdoll game physics, character death sequences
were often repeated because the animations were already created
beforehand. With Ragdoll, the character will collapse to the ground much
like a ragdoll. Some games that used such an engine were Hitman:
Codename 47 (2000), Halo: Combat Evolved (2001) and Uncharted:
Drake’s Fortune (2007).But for obvious reasons one can see, it still wasn’t
realistic enough.

The Euphoria Engine
The Euphoria engine was more complex and realistic because it takes
into account the virtual skeleton and muscles of the character, and even
contains self-preservation behaviors built within. This makes the movement
adaptive and interactive in accordance to the gaming scenario, as evident
in newer games such as Grand Theft Auto IV (2008), Star Wars: The Force
Unleashed (2008) and Max Payne 3 (2012).

Physical Simulation
Developing in parallel is physical simulation of controllers. There had been
attempts to improvise the gaming experience for players by having realistic
controllers since the beginning of the gaming history. Some of the earliest
usage of physical props for games include the light gun for Shooting Gallery
(1972) and a steering wheel for Gran Trak 10 (1974).Then came Guitar
Freaks (1998), a rhythm game from the genre of music-theme action video
games which showcased the guitar as a controller. And the world saw
another side of immerse, realistic gaming. The ﬁrst guitar controller game
to be released was an instant hit with Japanese gamers. However, it wasn’t
until 2005 before the Guitar Hero franchise in 2005 took things outside of
Japan.

Guitar Hero was so well-received by the masses that it had been recognized
as a cultural phenomenal, sparking the public’s interest with the actual
musical instrument itself. Players may feel as if they were playing an actual
guitar, except that it was just the controller for a game that anyone could
play and master. Without the special guitar controller, Guitar Hero would not
have attained the same level of success as it did.

Sports Consoles And
Controllers
From there, non-orthodox controllers developed. Motion controllers like
Wii Remote (2006), which was packaged along with the Nintendo Wii
console (2006). The launch title, Wii Sports showcased the motion-sensing
capabilities of the remote. Players get to choose from ﬁve sports games
to play with, namely tennis, baseball, golf, boxing and bowling. For each
individual game, players had to execute real-life motions while holding the
controller, such as punching and swinging. As a result, players of all ages
including young children and the elderly were able to grasp the controls
of the games and adapt to the gameplay UI easily. Suddenly video games
became a great way to lose weight. Wii Sports soon became commonplace
in social gatherings as a way of bonding with family and friends by means of
friendly competitions. The game went on to become the best-selling video
game of all time (as of 2012).

Full Body Movement
Finally, the breakthrough technology of full-body movement control was
demonstrated with the release of Kinect Adventures! (2010) that came
bundled with Kinect. Using its motion camera, Kinect games track the full-
body motion of players as they shift left or right, move towards or away from
the sensor and acquire or hit targets.

These bundled mini-games utilized one or more of such capabilities and
allowed two players to compete or co-op in either split-screen mode or
online mode in Xbox Live multiplayer. The technology spelled out the
opportunities for upcoming games to tap into full-body motion control sans
controller user interface. The future UI of video games may very well evolve
along such a control concept.

Game UI By Example: A Crash
Course in the Good and the Bad
As gamers and game developers we know that immersion is everything.
When you're immersed you lose track of time and become involved in what
the game is presenting. A major factor in what makes or breaks immersion
is how easy it is for your player to convert an idea into an in-game action
-- that is, how ﬂuid your game's User Experience (UX) is and how well-
designed its User Interface (UI) is. A game hurts itself by providing too little
information or too much, requiring too many inputs, confusing the player
with unhelpful prompts or making it hard for a new player to interact. Poor UI
design can even break your game completely.

A composited screenshot from Honey Bee Match 3. The top-left half is
rendered in green-blind mode by ColorOracle; the bottom-right half is the
original. An estimated 1 in 100 people are green-blind, and this game is
almost unplayable for them. In this article I won't be teaching you how to put
a UI together. Instead, I'll be focusing on what makes a UI well-designed or
poorly-designed, and how you can apply this thinking to your own game. I'll
be examining UI and UX design as a series of goals which are as important
and as precise as any other part of your game, using examples from games
that get it wrong and games that get it right.
What Does a Good UI Do?
Put simply, the role of a good UI is to provide relevant information clearly
and quickly, and to get out of the way once it has done its job. If you only
take one bit of information from this tutorial, let this be it:
A good UI tells you what you need to know, and then gets
out of the way.

We can go further and boil down the process of UI design to six
fundamental questions:
• Does this interface tell me what I need to know right
now?
• Is it easy to ﬁnd the information I’m looking for, or
do I have to look around for it? (Are the menus nested
so deep that they hide information from the player?)
• Can I use this interface without having to read
instructions elsewhere?
• Are the things I can do on this screen obvious?
• Do I ever need to wait for the interface to load or
play an animation?
• Are there any tedious or repetitive tasks that I can
shorten (with a shortcut key, for example) or remove
entirely?
Ask these questions frequently as you design and play your game. The
world of UI design is a world of endless nitpicking, and it’s one of the few
areas of game development where it’s okay to obsess.
⊗ Case in Point
⊗ Games With Good UIs
⊗ Games With Poor UIs
⊗ Beyond Good and Evil

⊗Case in Point
One good example is Fallout 3's Pipboy - or, more speciﬁcally, the short
animation of your character raising the Pipboy to eye level whenever you
access it. The animation lasts for only half a second, so you might not put
much thought into it. But watch how it challenges the patience of your
players after sitting through it countless times over the course of an 80 hour
game. Never conclude that your player will "get used to" doing something
in a non-optimal way. They will only seethe and bad-mouth your lack of
design sense.
⊗Games With Poor UIs
Before getting into this, it's important to understand that when I talk about
bad UIs, I make that judgment based on the ideas and behaviors that I
bring to it as a PC gamer who plays games with a keyboard and mouse.
The user's choice of input is extremely relevant to the user experience,
although it's not the whole story. Someone who is used to a touch interface
is going to ﬁnd a button interface awkward, for example, but a well-
designed button interface will still be easy to understand and predict.
⊗ Oblivion
⊗ Far Cry 3

⊗ Oblivion
Oblivion's UI is a classic example of one platform's UI being incompatible
with another. Even though Oblivion was ported from consoles to PC, it still
retained its controller-focused UI. This is completely analogous to releasing
a game on iOS or Android and making the player move an on-screen cursor
around like they're using a laptop's trackpad instead of taking advantage
of absolute touch positioning. So what makes Oblivion's UI so bad? It's a
combination of wasted space, improper scaling, and inappropriate controls.
I hope you're cool with viewing six items at a time; these windows
aren't adjustable. The actual part of the menu that conveys the relevant
information, such as the contents of your inventory, uses only 21.7% of the
total screen space at a resolution of 1920x1080.

Using only a fifth of a screen isn't that bad: you can do a lot in that much
space. The real problem is that the font and icons are double the size they
need to be for viewing on a PC monitor, and this greatly limits the number
of items that can be displayed. A linear list view also means that you tend
to do a lot of scrolling, and the tabbed interface hides everything from you.
Checking your status effects involves clicking on the Magic tab, going to the
Effects sub-tab, then scrolling through the list. It's one thing to hide seldom-
used information like character stats behind tabs, but completely different
to hide important information such as what is draining your health while
you walk around .Oblivion also lacks shortcuts. There's no Map button to
bring up the map; you have to click on the compass to bring up the Map
tab. There's no Quick-Sell key or Sell Stack shortcut; you've got to work the
quantity slider with your mouse and confirm it by clicking or hitting Enter.
There's no standard button for getting out of a window (Escape in most
games), so exiting different windows is done by pressing either E, Tab,
Escape or some other key. The sequel, Skyrim, would go on to fix some
of these problems, but some would remain or become worse. I actually
got stuck the first time I opened a chest in Skyrim: Escape didn't get me
out of that window; the inventory key didn't get me out; trying to Use the
chest again didn't get me out. There was no button you could click to exit
or prompt that told you what to do. Clicking outside the window didn't work.
Guess what key finally let me exit the chest? Sheathe/Ready Weapon, of
course.

⊗ Far Cry 3
Far Cry 3's menus are really awkward for a PC user. Sometimes it doesn't
respond to clicks so you have to click three times; menus can take some
time to load; it's not really space-eﬃcient - you know the deal by now. It
was patched, so I'm going to focus on the state of its in-game HUD when it
was ﬁrst released. Let's start with a look at the HUD in its predecessor, Far
Cry 2.
This is what you see most of the time. Things like health indicators and
ammo count fade in and out as you need them, but in general the HUD
leaves you alone.

Now let#s look at Far Cry 3#s HUD"
Far Cry 3's HUD doesn't leave you alone. I have a hard time showing it in
screenshots or videos; it's just something that you experience as a player
who keeps getting jerked back into reality. It creates a claustrophobic
feeling. The minimap is large and opaque, so it gets in your way. The
objective reminder in the top left is also large and opaque and gets in your
way, and although it disappears after a few seconds it has a tendency
to reappear just as you're about to start forgetting that you're playing a
game. When you get shot the hit indicators appear near the center of the
screen where they again get in your way, instead of appearing at the very
edges of the screen like in every other game. If you gather enough crafting
ingredients, another big, opaque popup appears on the right to let you know
that you can craft something new.

Every time one of these popups appears it snaps the player out of whatever
fun they were having and reminds them that they're using software. The
over-supply of obvious information makes it feel like the game doesn't
trust the player to be competent. The patch lets you turn off the worst of
these HUD features, but the minimap is still there, and the menus are still
awkward for mouse and keyboard interaction.

⊗Games With Good UIs
But let's not spend all this time talking about bad UIs. Great examples of
UIs come from games which acknowledge the limitations and strengths of
their systems.
⊗ Morrowind

⊗ Morrowind
Most PC gamers agree that Morrowind (Oblivion's predecessor) has one of
the best PC UIs around - except for one issue which I'll talk about below.
Let's go over the basic elements of this screen.
• It's a single screen with four different, untabbed
windows. Clockwise from top-left you have the character
details, the map (which you can zoom), your list of
spells and magic items, and your inventory (with tabs
for sorting items).
• At the top-right of each of these windows is a small
raised square. If you click this square, then that
particular window will remain on-screen even after you
exit Menu mode. You can keep the map window open if
you're trying to completely map the coast, for example,
or you can keep the Magic window open to keep an eye on
the number of charges left in your Ring of Healing.

• You can drag these windows anywhere on the screen,
and you can resize them or minimize them to tailor the
UI to your needs.
• At the bottom-right of the screen are some status
icons. If you see an unfamiliar icon there you can hover
over it in Menu mode, and a tooltip will tell you what
it is. The same icons appear at the top of the Magic
window too.
• The inventory is laid out in a space-efﬁcient grid,
and you can adjust the number of items it displays by
resizing the inventory screen.
What does this UI mean for the PC player? Almost everything is literally one
click away. If you want to look at your skills you scroll the character window.
If you want to equip something, you drag it onto your paper doll. The
interface is fast and accessible, and almost every type of item in the world
has a unique inventory icon, so ﬁnding your Journeyman Hammer involves
half a second of looking at your neat, scalable inventory.
The only detail that lets this UI down is the fact that potions and scrolls
reuse inventory icons; there are unique icons for the quality of the potion,
but not for its effect, so a Master Water Breathing potion looks just like a
Master Restore Fatigue potion.

⊗Beyond Good and Evil
Text entry with a controller is inconvenient at the best of times, and painful
in the worst. You can't move your ﬁngers directly to a key, you've got to
button-press your way there, creating a lot of unnecessary movements
and actions. Beyond Good and Evil sidestepped all of this by implementing
what's commonly accepted as the best console text input scheme ever: An
inﬁnite ribbon with letters and numbers arranged on it in order. The ribbon
scrolls fast and without delay, it provides constant aural feedback, and
it's responsive to adjustments. It's a mystery why other games have not
followed its example. Well I've been a little unfair. Other keyboard-style text
input screens do allow you to hold down a direction and scroll through all of
the keys sequentially, but they often have a delay before they start scrolling
at full speed, or they don't scroll fast enough. (Remember the fundamental
question, "Do I ever need to wait for the interface to load or play an
animation?")
⊗ Homeworld
⊗ Crusader Kings 2
⊗ A Valley Without Wind
⊗ Civilization 5

⊗ Homeworld
Homeworld broke ground back in 1999 for being the ﬁrst RTS with true
three-dimensional movement. Being able to move units along three axes
was a new design challenge, and Homeworld absolutely delivered with style
and elegance. The problem: How to represent 3D movement on a 2D plane
(your monitor).The solution: First, deal with the traditional horizontal plane
that gamers are used to.
Then, deal with the extra vertical plane.

The movement screen also gives the player some subtle but powerful tools:
• Notice the compass ring outside the movement range of
these Scouts. Homeworld's maps are big and empty, and
compass headings are important for orienting yourself in
local space.
• Look how easy it is to see the lines that make up
the functional part of this screen. Some games try to
harmonise their UI elements with the game world by
making them pale or transparent, but Homeworld doesn’t.
Empire: Total War is a good counter-example here. The
ﬁring arc indicator is made of a thin red line bordered
by a white smudge, and it blends into the terrain quite
often. Thank goodness for mods and modders.
• There’s a nice crosshair in the center of the
movement range circle, and it always points to the
center of your selected formation. Without it, you’d
have to look for the health bars of your selected ships
to ﬁnd out where they are, and health bars can get quite
small and dark when a ship is damaged.
• The movement line provides you with a move distance,
handy for estimating transit time in a map with no
obvious landmarks.
• Look at the Harvester ship just ahead of the Scouts.
There’s a line protruding through it, terminating in
a small circle above. That circle is located on the
horizontal plane of the Scouts (the green circle).
The line marks how far below or above that plane the
Harvester actually is. With these two indicators, moving
towards a ship is fast and accurate: move the horizontal
plane marker on top of the disc, then drag downwards to
the bottom of the line to set the vertical plane.

⊗ Crusader Kings 2
Crusader Kings 2 is the kind of complex, multi-layered game that makes
you feel dumb. However, its interface does its best to help you through it
all. Firstly, there are many Help boxes that pop up until you're comfortable
enough with that part of the game to tell it to stop. Secondly, there's this
wonderful feature. Say I want to know what an icon of coins represents; I
just hover over it and BAM!
The tooltip looks a little disembodied here because the pointer isn't
captured in screenshots.
A wild tooltip appeared! The game tells me what to call the coins icon, gives
me the information relevant to it, and even tells me how that information
is organised. You can do this with any other element in the game, and the
tooltip appears quickly so I don't have to wait.
You might look at this and say, "Duh, tooltips have been around forever. Of
course one should pop out when I hover over something." Just keep it in
mind, as it's easy to forget.

⊗ A Valley Without Wind
One place where it's particularly easy to forget about tooltips is in the front-
facing menus of your game. Here is the Vsync tooltip in A Valley Without
Wind's Options menu.
Here is the Vsync tooltip in Half Life 2: Episode 2's Options menu.
Really helpful. Most PC gamers who wander into the Advanced graphics
options will know what VSync is, but placing a tooltip is just polite - just as
long as it's a helpful tooltip and not one that reads, "Turns VSync on or off."

⊗ Civilization 5
Civ 5's city screen is a great example of making information available
quickly.
This single screen tells you: the economic and cultural state of your whole
empire; the production of this city, including population growth (and border
growth if the building list is collapsed); the units and buildings available to
this city and how long it will take to construct them; the sprawl of your city,
as well as the resource tiles within it and which tiles citizens are currently
working; the buildings already built within it, and a collapsed Citizen
Management panel where you can switch to different worker allocation
proﬁles to specialise this city's output. You can also move workers between
tiles right on the map of the city, putting all this screen space to good use.

The six fundamental questions of UI design as six general guidelines:
• Predict what the user wants to know, and give them
that information.
• Information must be easy to ﬁnd.
• Your UI should be easy to use and navigate. Use
established patterns where you can: Everyone knows that
Ctrl-Click adds items to the selection, so don't make it
swap items instead.
• Make the user's location in the menu system obvious,
and make it obvious where the user can go and what they
can do from there.
• Minimise load times and avoid animations in your
menus.
• Eliminate or simplify repetitive tasks.
UI design is a logical job that you shouldn't be scared of doing. Pay attention
to the games you play, take note of how they present information and how
that makes you feel. Take note of things that you do repetitively, and how
they could be improved. Look for information that acts only as decoration,
and consider what you would replace it with. Pay attention to things that
confuse you. And ﬁnally, always have some people play-test your game in
front of you. Tell them how to run the game, then watch silently and resist
the urge to guide them. It's quite humbling.

Intuitive vs Efﬁcient User
Interface Design
Intuitive matters mast when you're designing an app that people aren't going
to invest time into learning. It's important that they get a win as soon as
possible, and that means that they need to be able to use the product with
little or no time learning it. Think of a small mobile app. Instagram is a great
example. Efﬁciency matters when people are likely to use the app a lot and
they are prepared to spend time learning it. This applies when the perceived
value in learning to use the application is greater than the perceived initial
learning barrier. Note, perception matters a lot here. Think of an app which a
programmer will use all day. Garageband, iMovie are good examples.

Feedback Loop
A feedback loop involves four distinct stages. First comes the data: A
behavior must be measured, captured, and stored. This is the evidence
stage. Second, the information must be relayed to the individual, not in
the raw-data form in which it was captured but in a context that makes it
emotionally resonant. This is the relevance stage. But even compelling
information is useless if we don’t know what to make of it, so we need a
third stage: consequence. The information must illuminate one or more
paths ahead. And ﬁnally, the fourth stage: action. There must be a clear
moment when the individual can recalibrate a behavior, make a choice,
and act. Then that action is measured, and the feedback loop can run once
more, every action stimulating new behaviors that inch us closer to our
goals.

Symbols and Semiotics
[Article published by Mark Boulton
(http://markboulton.co.uk/journal/icons-symbols-and-a-semiotic-web)]
Icons and symbols
Maps always use symbols to indicate specific kinds of landmark. Sometimes
these are recognizably pictorial (the standard symbols for tree and church),
but others are fairly arbitrary conventions (the symbol for a railway station).
As the resolution of computer displays increased in the 1970s, a greater
variety of symbols could be differentiated, b making them more detailed,
as in the MIT SDMS system that mapped a naval battle scenario with
symbols for different kinds of ship. However, the dividing line between
pictures and symbols is ambiguous. Children’s drawings of houses often
use conventional symbols (door, four windows, triangle roof and chimney)
whether or not their own house has two storeys, or a fireplace. Letters
of the Latin alphabet are shapes with completely arbitrary relationship to
their phonetic meaning, but the Korean phonetic alphabet is easier to learn
because the forms mimic the shape of the mouth when pronouncing those
sounds.
The field of semiotics offers sophisticated ways of analysing the basis on
which marks correspond to meanings. In most cases, the best approach for
an interaction designer is simply to adopt familiar conventions. When these
do not exist, the design task is more challenging.

It is unclear which of the designers working on the Xerox Star coined the
term ‘icon’ for the small pictures symbolising different kinds of system object.
David Canfield Smith winningly described them as being like religious icons,
which he said were pictures standing for (abstract) spiritual concepts. But
‘icon’ is also used as a technical term in semiotics. Unfortunately, few of the
Xerox team had a sophisticated understanding of semiotics. It was fine art
PhD Susan Kare’s design work on the Apple Macintosh that established a
visual vocabulary which has informed the genre ever since. Some general
advice principles are offered by authors such as Horton (1994), but the
successful design of icons is still sporadic. Many software publishers simply
opt for a memorable brand logo, while others seriously misjudge the kinds of
correspondence that are appropriate (my favourite blooper was a software
engineering tool in which a pile of coins was used to access the ‘change’
command).
It has been suggested that icons, being pictorial, are easier to understand
than text, and that pre-literate children, or speakers of different languages,
might thereby be able to use computers without being able to read. In
practice, most icons simply add decoration to text labels, and those that
are intended to be self-explanatory must be supported with textual tooltips.
The early Macintosh icons, despite their elegance, were surprisingly open
to misinterpretation. One PhD graduate of my acquaintance believed that
the Macintosh folder symbol was a briefcase (the folder tag looked like
a handle), which allowed her to carry her files from place to place when
placed inside it. Although mistaken, this belief never caused her any trouble
– any correspondence can work, so long as it is applied consistently.
Summary: the design of simple and memorable visual symbols is a
sophisticated graphic design skill. Following established conventions is the
easiest option, but new symbols must be designed with an awareness of
what sort of correspondence is intended - pictorial, symbolic, metonymic
(e.g. a key to represent locking), bizarrely mnemonic, but probably not
monolingual puns.

Visual metaphor
The ambitious graphic designs of the Xerox Star/Alto and Apple Lisa/
Macintosh were the first mass-market visual interfaces. They were marketed
to office professionals, making the ‘cover story’ that they resembled an office
desktop a convenient explanatory device. Of course, as was frequently
noted at the time, these interfaces behaved nothing like a real desktop.
The mnemonic symbol for file deletion (a wastebasket) was ridiculous if
interpreted as an object placed on a desk. And nobody could explain why
the desk had windows in it (the name was derived from the ‘clipping window’
of the graphics architecture used to implement them – it was at some later
point that they began to be explained as resembling sheets of paper on a
desk). There were immediate complaints from luminaries such as Alan Kay
and Ted Nelson that strict analogical correspondence to physical objects
would become obstructive rather than instructive. Nevertheless, for many
years the marketing story behind the desktop metaphor was taken seriously,
despite the fact that all attempts to improve the Macintosh design with
more elaborate visual analogies, as in General Magic and Microsoft Bob,
subsequently failed.
The ‘desktop’ can be far more profitably analysed (and extended) by
understanding the representational conventions that it uses. The size and
position of icons and windows on the desktop has no meaning, they are
not connected, and there is no visual perspective, so it is neither a map,
graph nor picture. The real value is the extent to which it allows secondary
notation, with the user creating her own meaning by arranging items as she
wishes. Window borders separate areas of the screen into different pictorial,
text or symbolic 9 contexts as in the typographic page design of a textbook
or magazine. Icons use a large variety of conventions to indicate symbolic
correspondence to software operations and/or company brands, but they
are only occasionally or incidentally organised into more complex semiotic
structures.

Experience-Interface-Interaction.pdf

Experience-Interface-Interaction.pdf

Recommandé

Recommandé

Contenu connexe

Similaire à Experience-Interface-Interaction.pdf

Similaire à Experience-Interface-Interaction.pdf (20)

Plus de HasseyWijetunge

Plus de HasseyWijetunge (17)

Dernier

Dernier (20)

Experience-Interface-Interaction.pdf