Interaction Design

Basics– Part II

Introduction
A single screen image often has to present information clearly and also act as the locus for
interacting with the system.
This is a complex area, involving some of the psychological understanding of interactivity as
well as aspects of graphical design.
Basic principles of design

Ask: The user is requesting information or assistance from someone or something, like you
asking me a question right now.
Think: Here, the user is contemplating or considering something. They might be reflecting on
options, ideas, or consequences to make a decision or understand something better.
 What information, comparisons, and order: This suggests the user is looking for
specific details, making comparisons between different options or things, or arranging
things in a particular sequence or order.
Design: The user is likely planning or creating something with a specific purpose in mind.
Design involves arranging elements in a way that is both functional and aesthetically pleasing.
 Form follows function: This principle means that the design of something should
prioritize its practical use or function over its appearance. It's like saying what something
does is more important than how it looks.
So, in simple words, the user is asking questions, thinking about options or details, organizing
information, comparing things, and designing with a focus on practical function over looks.

Tools for layout

We have a number of visual tools available to help us suggest to the user appropriate ways to
read and interact with a screen or device.

Available tools: These are the things someone can use to get a job done, like hammers and nails
for building or pens and paper for writing.
Grouping of items: This means putting similar things together, like keeping all your toys in one
box or your clothes in a closet.
Order of items: It's arranging things in a sequence, like putting your socks on before your shoes
or listing items in alphabetical order.
Decoration (fonts, boxes, etc.): This is making things look nice or more interesting by using
different styles of writing (fonts), drawing boxes around them, or adding other decorative
touches.
Alignment of items: its making sure things are lined up neatly, like making sure all the
paragraphs in a document start at the same point.
White space between items: This is leaving some empty space around things, like having a gap
between sentences or pictures so they don't look crowded.
So, in simple words, it's about using the right tools, putting similar things together, arranging
them in a specific order, making them look nice with different styles, lining them up neatly, and
leaving some space around them so they don't look too cramped.
Grouping and structure
If things logically belong together, then we should normally physically group them together.
This may involve multiple levels of structure.

For example, in Figure, we can see a potential design for an ordering screen. Notice how the
details for billing and delivery are grouped together spatially; also note how they are separated
from the list of items actually ordered by a line as well as spatially. This reflects the following
logical structure:

Order of groups and items: This is about arranging different sets of things and the things
within those sets in a specific sequence. For example, putting fruits in one group and vegetables
in another, then arranging the fruits alphabetically.
Think! - What is natural order: Here, it's about considering what arrangement feels most logical
or intuitive to people. Like organizing a recipe from start to finish, so it's easy to follow.
Should match screen order: This means that how things are organized on the screen should
match how they're organized in the content or function. For example, if you're listing steps for a
task, they should appear in the same order on the screen.
Use boxes, space, etc.: It's about using visual elements like boxes and spaces to organize and
separate content, making it easier to understand and navigate.
Set up tabbing right: This involves arranging the order in which someone moves through
interactive elements, like buttons or links, using the "tab" key on a keyboard. It should follow a
logical sequence that matches the flow of the content or function.
Instructions - beware the cake recipe syndrome: This warns against assuming people know
the order of steps without clear instruction. Like in a recipe, saying "mix milk and flour, add the
fruit after beating them" is clearer than assuming everyone knows to mix ingredients before
adding others.
So, in simple words, it's about organizing groups and items logically, making sure the order on
the screen matches the content, using visual elements effectively, arranging interactive elements
sensibly, and providing clear instructions to avoid confusion.

Decoration
We can see how the design uses boxes and a separating line to make the grouping clear. Other
decorative features like font style and text or background colors can be used to emphasize
groupings.
Imagine a microwave control panel. Here's how we can apply decoration principles:

Using boxes to group logical items: We can visually separate different functions or settings on
the control panel by placing them within clear boxes or sections. For example, one box might
contain the timer settings, another power levels, and another cooking modes.
Using fonts for emphasis and headings: We can use different font styles or sizes to highlight
important information or headings. For instance, the main display showing the time might use a
larger, bold font, while labels for specific buttons or settings could be in a clear, easy-to-read
font.
Limiting the number of decorations: It's important not to overdo it with decorations. Too many
different fonts or styles can make the control panel cluttered and confusing. Keeping it simple
and consistent makes it easier for users to understand and navigate.
So, in summary, decorating a microwave control panel involves using boxes to group functions
logically, using fonts effectively to emphasize important information, headings, or labels, and
being mindful not to overwhelm users with too many different decorations.
Alignment - text
When designing interfaces or layouts for English and European languages, it's important to
consider the natural reading direction, which is from left to right. Here's how we can apply this
principle:

Align left-hand side: Most of the content, such as text blocks, buttons, and controls, should start
from the left-hand side of the screen or interface. This way, users can easily locate and read the
content in the order they're accustomed to.
By aligning elements to the left, users can naturally progress through the content without having
to adjust their scanning pattern, making the experience more intuitive and user-friendly.
Alignment - Names:
When you're scanning for surnames, you want to make it easy. That means organizing them in a
way that's quick to read. So, if you're looking at a list of names, you'd want to arrange them in a
way that makes it easy for your eyes to scan through them, maybe alphabetically or by some
other logical order.

Alignment - Numbers:
Think Purpose: Here, it means considering what you're trying to achieve. Are you comparing
numbers, adding them up, or something else? Knowing your goal helps you decide how to align
them.
Which is Biggest? This depends on the context. In some cases, a larger number means it's
"bigger." But if you're talking about debts or temperatures, sometimes a smaller number might be
"bigger" because it represents more owed or hotter temperatures.
Alignment - Numbers Visually:
Long Number = Big Number: Generally, if you see a long number, it tends to be bigger. For
example, 1000 is smaller than 1000000.
Align Decimal Points or Right Align Integers: Imagine lining up numbers in a column. If
you're dealing with numbers that have decimal points, like money or measurements, you'd line
them up by the decimal point. If they're just whole numbers (integers), you'd line them up on the
right side, kind of like when you're doing math by hand.
To put it simply, aligning numbers helps you compare and understand them better. If they're
aligned neatly, it's easier to see patterns or differences. And remember, when in doubt, organize
things in a way that serves your purpose best!

Multiple Columns:
Scanning Across Gaps: When you have multiple columns of data, sometimes there are spaces
between them. These gaps can make it difficult to scan across the rows, especially with large
databases.
Use Leaders: Leaders are like guiding lines. You can use dots or dashes to connect related
pieces of information across columns, making it easier to follow along horizontally.
Greying (Vertical Too): Adding a light shade of gray to the background of your columns can
visually separate them. You can even extend this gray shade vertically to help distinguish
between rows.
Bad Alignment (With Care!): Sometimes, if aligning everything perfectly makes the layout
messy, you might intentionally choose to align things a little "badly" to keep the overall look
clean and organized. But you have to be careful with this approach so it doesn't confuse readers.
White Space - The Counter:
In simple terms, white space is the empty area around text or objects. It's like the blank space on
a page. When we talk about "the counter," we're referring to the white space inside letters like 'o'
or 'e'. It's the empty space enclosed by the curves or lines of a letter. Understanding how much
white space there is helps in designing text and layouts so they're easy to read and visually
appealing. Too much can make things look cluttered, while too little can make them hard to read.
So, finding the right balance is important.

White Space
In typography the space between the letters is called the counter.
In painting this is also important and artists may focus as much on the space between the
foreground elements such as figures and buildings as on the elements themselves.
White space - the counter

White Space
Often the shape of the counter is the most important part of the composition of a painting and in
calligraphy and typography the balance of a word is determined by giving an even weight to the
counters.
If one ignores the ‘content’ of a screen and instead concentrates on the counter – the space
between the elements – one can get an overall feel for the layout.
White Space
If elements that are supposed to be related look separate when you focus on the counter, then
something is wrong.
Screwing up your eyes so that the screen becomes slightly blurred is another good technique for
taking your attention away from the content and looking instead at the broad structure.

User action and control

Entering Information
Some of the most complicated and difficult screen layouts are found in forms-based interfaces
and dialog boxes is to design for entering information.
In each case the screen consists not only of information presented to the user, but also of places
for the user to enter information or select options.
Forms and Dialog Boxes:
These are screens where you have to fill in information or make choices. Think of a sign-up form
on a website or a pop-up asking you to confirm something.
Presentation + Data Input:
These screens not only show you information but also have places where you can type in or
choose information.
Similar Layout Issues:
Both forms and dialog boxes face similar design challenges.
Alignment:
Making sure everything looks neat and organized, especially when labels (like "Name" or
"Email") have different lengths.
Logical Layout:
Arranging things in a way that makes sense for the user. For example, putting related questions
together.
Task Analysis:
Understanding what the user needs to do on the screen and organizing it accordingly.
Groupings:
Putting similar things together. For example, all the questions about your personal information
might be grouped together.
Natural Order for Entering Information:
Setting things up so it feels natural for the user to go from one question to the next. For example,
asking for your name before your email.
Top-Bottom, Left-Right:
Deciding whether to arrange things vertically (up and down) or horizontally (side to side), which
can depend on what people are used to in their culture.
Setting Tab Order for Keyboard Entry:
Making it easy for people who are using the keyboard to move from one question to the next by
pressing the "Tab" key.
In a nutshell, designing forms and dialog boxes involves making sure they look good, are easy to
understand, and are convenient to use, whether you're typing on a keyboard or tapping on a
touchscreen.

Knowing what to do
Some elements of a screen are passive, simply giving you information; others are active,
expecting you to fill them in, or do something to them.
It is often not even clear which elements are active, let alone what the effect is likely to be when
you interact with them!
Active vs. Passive:
Active: Things you can interact with, like buttons or links. They respond to your clicks or taps.
Passive: Elements that display information but don't respond to interaction, like text or images.
Where to Click:
Click on active elements such as buttons or links. They're usually visually distinct and look
clickable.
Where to Type:
Type in designated areas like text boxes or fields. These are meant for inputting information,
such as your name or email.
Consistent Style:
Keeping a consistent design throughout the interface helps users understand how to navigate and
interact with it.
For instance, on the web, underlined text often signifies a clickable link, so maintaining this style
across the site enhances user understanding.
Labels and Icons:
Labels provide clear descriptions of elements, like buttons or options, making their purpose
evident.
Icons are visual representations of actions or concepts, aiding users in quickly identifying
functionalities. For example, a "trash can" icon typically signifies deletion.
Standards for Common Actions:
Employing standard labels and actions across interfaces enhances user familiarity and reduces
confusion. Actions like "Save" or "Cancel" should be consistently labeled and behave
predictably.
Language Conventions:
Using formatting like bold text to indicate the current state or action draws attention to important
information. For instance, in a task list, bold text might signify the task currently being worked
on or selected.
In essence, clear design, consistent elements, and intuitive interactions contribute to a user-
friendly experience, aiding users in navigating and utilizing interfaces effectively.
Affordances
These are especially difficult problems in multimedia applications where one may deliberately
adopt a non-standard and avant-garde style.
How are users supposed to know where to click?
The psychological idea of affordance says that things may suggest by their shape and other
attributes what you can do to them.
Physical Objects:
In the physical world, the shape, size, and texture of objects suggest how they can be interacted
with. For instance, a handle on a door suggests pulling or pushing, while the shape of a ball
suggests throwing or catching.
Cultural norms also play a role. For example, buttons are designed to be pushed, based on our
cultural understanding of how they work.
Screen Objects:
In digital interfaces, objects such as buttons, icons, and other elements similarly suggest actions
based on their appearance.
A button-like object on a screen suggests it can be clicked or tapped, akin to pushing a physical
button.
Icons represent actions or concepts and suggest clicking or tapping. However, digital affordances
can sometimes differ from physical ones. For instance, double-clicking an icon is a digital
convention that doesn't have a direct physical counterpart.
Culture of Computer Use:
Users develop a mental model of how digital interfaces work based on their experiences and
cultural norms. For example, people familiar with computers understand that icons on a screen
can be clicked or tapped to perform actions.
Over time, as users become more accustomed to interacting with digital interfaces, certain
actions become second nature, even if they don't directly mimic physical interactions.
In essence, affordances play a crucial role in user interface design by guiding users on how to
interact with elements, both in the physical world and in digital environments, based on their
visual cues and cultural context.
Appropriate appearance

Presenting information effectively involves balancing aesthetics with utility, considering

factors like color, dimensionality, localization, and purpose. Here's how these elements can be
incorporated while drawing inspiration from paper presentation principles and adding
interactivity:

Aesthetics and Utility:

Design should be visually appealing while serving its purpose. Clean layouts, clear typography,
and balanced use of color contribute to aesthetics without compromising utility.
Color and 3D:
Colors should be chosen deliberately to enhance comprehension and guide attention. Avoid
overwhelming users with excessive use of 3D effects, which can distract from the information.
Localization & Internationalization:
Consider cultural preferences and linguistic nuances when presenting information. Ensure that
the design accommodates different languages and cultural sensitivities, such as reading direction
and color symbolism.
Sort Order:
Sort data logically based on the purpose of the presentation. For example, numeric data may be
sorted numerically, while alphabetical data should follow alphabetical order.
Text vs. Diagram:
Use a combination of text and visual elements like diagrams, charts, and graphs to convey
complex information effectively. Text provides context, while visuals offer a quick overview.
Scatter Graph vs. Histogram:
Choose the appropriate visualization type based on the nature of the data and the insights you
want to convey. Scatter graphs are ideal for showing relationships between variables, while
histograms are useful for illustrating distribution patterns.
Paper Presentation Principles:
Emulate principles from paper-based presentations, such as clarity, hierarchy, and consistency.
Use grids, whitespace, and typography to organize content and guide the viewer's attention.
Interactivity:
Incorporate interactive elements to engage users and provide a dynamic experience. For
example, allow users to reorder columns or dynamically filter data to customize their view.
Implement subtle animations, like "dancing histograms," to add visual interest without
overwhelming the user. These animations can help illustrate changes or trends in the data
dynamically.
By integrating these elements, you can create information presentations that are both visually
compelling and functionally effective, providing users with valuable insights while maintaining
an engaging user experience.
Aesthetics and utility
Aesthetically pleasing designs not only enhance user satisfaction but can also improve
productivity by making interfaces more engaging and intuitive. However, there's often a delicate
balance between beauty and utility, as conflicting design elements can lead to confusion. Here's
how to navigate this balance:

Mixed Visual Styles:

Incorporate a variety of visual styles in your design to make different elements easily
distinguishable. This helps users quickly identify interactive components and understand the
hierarchy of information.
Clean Design vs. Differentiation:
While clean design is essential for clarity, too little differentiation between elements can lead to
confusion. Use subtle visual cues like color, size, or spacing to differentiate between different
types of content or interactive elements.
Backgrounds Behind Text:
Backgrounds can enhance the aesthetics of a design, but they should not compromise readability.
Ensure that background colors or patterns behind text provide sufficient contrast to make the text
easy to read.
Integration of Beauty and Utility:
Aim for designs where beauty and utility complement each other. For example, the design of a
kitchen appliance like a countertop can combine sleek aesthetics with functional features,
enhancing both the user experience and the overall appeal of the product.
Consumer Products as Key Differentiators:
In consumer products, aesthetics often serve as a key differentiator. For example, the design of
the iMac has been a significant factor in its success, as its sleek and modern appearance appeals
to consumers while also reflecting its advanced technology and functionality.
By striking a balance between aesthetics and utility, designers can create visually appealing
interfaces that not only delight users but also enhance their overall experience and productivity.
Colour and 3D
You've pointed out two design elements—color and 3D effects—that are frequently used poorly.
Let's dive into each:

Color:

Limited Palette on Older Monitors:

In the past, monitors had limited color capabilities, leading to a tendency to oversaturate designs
when more colors became available.
Overuse Due to Availability:
With the abundance of color options, there's often a temptation to use them excessively, simply
because they're there.
Consideration for Color Blindness:
It's crucial to be mindful of color blindness when designing. Using colors sparingly and ensuring
there's sufficient contrast can help accommodate users with color vision deficiencies.
Sparing Use for Reinforcement:
Rather than relying solely on color, it's best to use it to reinforce other information. For instance,
color can be used to highlight important elements or indicate status changes.
3D Effects:

Appropriateness for Physical Information:

3D effects can be beneficial when representing physical objects or certain types of data
visualization, such as three-dimensional graphs.
Risk of Overuse:
However, if used excessively or inappropriately, 3D effects can lead to cluttered and confusing
designs. For example, applying perspective to text or using 3D effects in pie charts can make
them difficult to interpret.
In summary, both color and 3D effects can enhance designs when used thoughtfully and
appropriately. It's essential to consider factors like accessibility, user experience, and clarity to
ensure that these design elements contribute positively to the overall design rather than
detracting from it.
Cross countries and cultures
Absolutely, localization and internationalization are critical considerations when designing
interfaces for diverse audiences. Here's a breakdown of these concepts and the challenges they
present:

Localization & Internationalization:

Customizing Interfaces for Different Cultures/Languages:

Localization involves adapting interfaces to specific cultural and linguistic contexts, including
translating text, formatting dates and numbers, and adjusting images or symbols.
Internationalization involves designing interfaces in a way that allows for easy localization. This
includes separating text from code and using flexible layouts to accommodate different text
lengths and orientations.
Globalization:
Globalization refers to the process of designing products or services that can be used worldwide.
It involves considering the needs and preferences of diverse cultures and languages from the
outset of the design process.
Challenges and Considerations:

Symbol and Icon Usage:

Symbols and icons may have different meanings or connotations in different cultures. For
example, the meanings of a tick and a cross can vary significantly across cultures, representing
positivity and negativity in some, while having the same meaning in others.
Cultural Assumptions and Values:
Cultural differences extend beyond language to include values, norms, and customs. Designers
must be sensitive to these differences and avoid imposing cultural assumptions on users.
Certain colors, images, or gestures may be considered offensive or inappropriate in some
cultures, highlighting the need for cultural awareness in design.
Deeper Issues in Symbolism and Meaning:
Symbols and visual cues may carry cultural or historical significance that may not be
immediately apparent to users from different backgrounds. Careful consideration is needed to
ensure that symbols are universally understood and do not inadvertently convey unintended
messages.
Best Practices:

Research and Consultation:

Conduct thorough research into the cultural and linguistic backgrounds of your target audience
and consult with native speakers or cultural experts to ensure sensitivity and appropriateness in
design choices.
Flexibility and Adaptability:
Design interfaces with flexibility and adaptability in mind, allowing for easy customization and
localization to meet the needs of diverse users.
User Testing and Feedback:
Regularly test interfaces with users from different cultural and linguistic backgrounds to identify
any issues or misunderstandings and incorporate feedback into the design process.
By addressing these challenges and adopting best practices, designers can create interfaces that
are inclusive, culturally sensitive, and accessible to users worldwide.
Prototyping
Iteration and Prototyping:
Human situations are complex, and designers aren't perfect. Therefore, it's common for initial
designs to be imperfect.
Iteration involves refining and improving designs through multiple cycles of feedback and
revision.
Prototyping allows designers to quickly test ideas and gather feedback from colleagues and
users, leading to iterative improvements.
Early Prototyping with Paper Designs and Storyboards:
The prototyping process often begins early with low-fidelity methods such as sketching on paper
or creating storyboards. These visual representations help communicate design concepts and
gather initial feedback.
Later Prototyping with Mockups and Software Tools:
As the design progresses, designers may create higher-fidelity prototypes using tools like
mockups of physical devices or software applications such as Shockwave or Visual Basic.
These prototypes simulate the functionality and interactions of the final product, allowing for
more realistic user testing and refinement.
Getting Better by Starting Early:
By embracing iteration and prototyping from the beginning of the design process, designers can
incrementally improve their designs and address issues before they become more difficult or
costly to fix.
Never Getting It Right the First Time:
Design is an iterative process, and it's rare to achieve a perfect solution on the first attempt.
Prototyping allows designers to experiment, fail, learn, and iterate towards better designs.
In summary, prototyping is a crucial tool for designers to explore ideas, gather feedback, and
refine their designs iteratively, ultimately leading to more effective and user-friendly products
and experiences.

In design, prototypes are evaluated through two main approaches: formative and summative
evaluation.

Formative Evaluation:
Formative evaluation occurs throughout the design process and focuses on improving the design.
It involves assessing prototypes to identify strengths and weaknesses, gather feedback, and make
iterative improvements.
Formative evaluation helps designers refine their designs incrementally, leading to better
outcomes.
Summative Evaluation:
Summative evaluation occurs at the end of the design process and aims to determine whether the
final product meets predetermined criteria or standards.
It assesses the overall effectiveness and quality of the product, often using specific metrics or
benchmarks.
Summative evaluation verifies whether the product is acceptable or "good enough" for its
intended purpose.
Pitfalls of Prototyping:

Prototyping can be challenging if there's uncertainty about the direction or goal of the design.
Without a clear understanding of the problem or desired outcome, designers may struggle to
make meaningful progress.
Designers may need to iterate slowly and cautiously, ensuring they're moving in the right
direction rather than aimlessly progressing.
It's essential to have a solid starting point and a thorough understanding of what needs
improvement to avoid wasting time and resources.

"Malverns or the Matterhorn?" is a metaphorical way of asking whether to take a cautious

(Malverns) or bold (Matterhorn) approach to a situation or problem. It's about choosing between
a safe, gradual path or a more risky, ambitious one.
Design Approach:

Experienced designers may use their intuition and expertise to make educated guesses about
initial designs.
Another approach is to generate multiple initial design ideas and refine them iteratively,
eliminating weaker options as they progress.
Both approaches require a deep understanding of user needs, goals, and constraints to ensure
effective design solutions.
Summary
We have seen that design in HCI is not just about creating devices or software, but instead is
about the whole interaction between people, software and their environment.
Because of this it is good to see the product of design not just as the obvious artifacts but as the
whole intervention that changes the existing situation to a new one.