Understanding What is Interaction Design, Its History (Pre-Computer era, Pre-Software era), Modern era of Interaction Design, Current Trends, Features, Principles and much more for beginners.
2. WHAT IS INTERACTION DESIGN ?
• The design of the interaction between users and products.
• The goal of interaction design is to create products that enable the
user to achieve their goals in the best way possible.
3. OVERLAP OF INTERACTION DESIGN
AND UX
• UX design is about shaping the experience of using a product, and most
part of that experience involves some interaction between the user and
the product.
• UX design is more than interaction design.
• It also involves user research (finding out who the users are in the first
place), creating user personas (why, and under what conditions, would
they use the product), performing user testing and usability testing etc.
4. Models of interaction design
WORDS
VISUAL REPRESENTATION
PHYSICAL OBJECTS OR SPACE
TIME
BEHAVIOUR
5. Important questions interaction
designers ask:
• What can a user do with their mouse, finger, or stylus to directly interact with the
interface? This helps us define the possible user interactions with the product.
• What about the appearance (color, shape, size, etc.) gives the user a clue about how it may
function? This helps us give users clues about what behaviors are possible.
• Do error messages provide a way for the user to correct the problem or explain why the error
occurred? This lets us anticipate and mitigate errors.
• What feedback does a user get once an action is performed? This allows us to ensure that the
system provides feedback in a reasonable time after user actions.
• Are the interface elements a reasonable size to interact with? Questions like this helps us think
strategically about each element used in the product.
• Are familiar or standard formats used? Standard elements and formats are used to simplify
and enhance the learnability of a product.
6. So what do interaction designers do?
This is concerned with what the goal(s) of a user are, and in turn what
interactions are necessary to achieve these goals. Depending on the
company, interaction designers might have to conduct user research to find
out what the goals of the users are before creating a strategy that translates
that into interactions.
1.Design strategy 2.Wireframes and prototypes
Most interaction designers are tasked to create wireframes that lay out the
interactions in the product. Sometimes, interaction designers might also
create interactive prototype and/or high feudality prototypes that look
exactly like the actual app or website.
8. Before computer there wasn’t “Interaction Design”. But most of
the qualities that we seek have been followed through ages:
• Useful.
• Usable.
• Affordable for the right people.
• Appropriately complexed and style.
• Appropriately transparent in function and use.
• Appropriately adaptable, malleable and extensible.
• Having good fit with people, context, activity and result.
9. Good Design
• Good design against misuse and unintended uses and abuses.
• Design for all shapes, size, attitudes and personalities of
people.
11. PUNCH CARDS
Those where the times when people adapt to the machine.Think about no software, no application,
No mobile phones, no laptops and present technologies before reading this.
PUNCH CARDS:
80 Columns to hold 80 Numbers or
Characters.
PAPER TAPES:
Encoding characters with holes
12. Wiring the ENIAC with New Program
ENIAC
1946
Mauchly and Eckert
• 3,000 cubic feet.
• 30Tones
• 18,000Vaccum tubes.
• 70,000 resistors.
• 170 Kw per sq.
• 1 kb memory.
• Approximately process present day singing
birthday card.
• Not used as a storing device
13. Front Panel Switches
DEC PDP-8
It is an Octal machine, where the switches with 3-bit
configuration, counts (0-7).
TI 980
• It is an hexadecimal machine, where the switches
with 4-bit configuration, counts (0-15).
• You can type one word at a time.
1960’s…
20. Command line interfaces.
• Very efficient once learned them.
• Still existing.
• Still its very much “Operate the
machine”.
• User Friendly.
• Easy to remember commands.
• Provide clear helps.
21. Discovery Of SKETCHPAD
“You can actually Talk to the computer”…
SKETCHPAD
1963
Ivan Sutherland.
CAD features in 4K RAM using
oscilloscope and lightpen.
Think about working on punch cards before reading this. One of the important events in history of
interaction Design.
22. Discovery Of MOUSE
In the meantime few people where thinking differently…….
MOUSE
1964
Doug Englebart
• A landmark event in the history of
interaction design.
• The mouse hypertext.
• Objects in the interface.
• Dynamic Linking.
• Communication of people in different
locations.
25. VisiCalc
A tool for home and business usage.
VisiCalc
1979
Dan Bricklin
• First Spreadsheet.
• Intereactive.
• Point to Change Value.
• Instant recalculation.
• Scrolling facilities.
• Numeric and text formatting.
• Status and formula lines.
• Input, definition and output were all merged
into a natural, program-by-example-interface.
Finally people had reasons to buy a home computer(specifically Apple II).
26. MS Wordstar
“A tool for writing”.
Wordstar
1979
Seymour Rubenstein & John Barnaby
• Complicated Interface.
• Very Powerful.
• Create , format, edit and store texts.
27. Operating a machine to people doing
a task using a tools.
• Wordstar was complex yet popular.
• It received both compliments and complaint.
• The success of Lotus 1-2-3 overVisiCalc was partly due to its ease of
use and appropriate power.
• It is used in large companies for its ease of learning, reduction of
errors and time saving.
• A tool with good controls.
29. Software Operate the machine Perform a task
INTERACTION DESIGN in Modern
times
experience( live, learn, play)
30. Experience
• After 20 years of trying to help people performing a task, we realise
success depends on increasing the scope of view.
• Most of the good works involves fitting the content, use of
characteristics of individuals and patterns of life.
• Most of good works attempts to break the principles.
31. Software Operate the machine Perform a task
INTERACTION DESIGN in Modern
times
experience( live, learn, play) Connect
32. Connect
• Another aspect of Modern time Interaction Design.
• Designers are not only working hard to help people use a tool and
use it with an experience to complete a task.They are also working
on new Designs to connect people with one another.
33. Software Operate the machine Perform a task
INTERACTION DESIGN in Modern
times
experience Connect Dynamic enabling
34. Dynamically Enabling
• Some Designers have already begun imagining and working hard
towards:
from “we adapt to the machine” to “machine adapt
to us as we move through life”.
For eg: Imagine if a user is asking “ why should I convert word to pdf
while sharing it to my friend ?” “why the conversion is not
while sharing the document to an authoring format itself ?”
35. Modern Interaction Design
Techniques
• Parallax Scrolling and effects
• Card Style layouts
• Video and animation.
• Design elements that require physical actions such as swipes or clicks.
• Micro Interactions, which are distinct moments that happen while using a website or app
(think of an alarm bell or deleting an email)
• Push notifications and reminders from websites or apps
• Personalization and location tools so that every app or website feels like it was designed
specifically for that user, creating memorable contextual experiences (for
example, Waze automatically asks if you’re driving home at 6PM based on your usage
• Quickly show or hide content with clicks or swipes.
• Hover effects and actions for secondary content.
• Transitions and loop functions between elements.
36. CONCLUSION
Interaction design is changing almost daily with technology and user
access to new tools.While we can’t predict the “next big thing,” we can
prepare for it by keeping a keen eye on what’s happening, what
devices and tools are selling – think wearables in the recent future –
and how users want digital information delivered and how they want it
to work.
1. Words
Words—especially those used in interactions, like button labels—should be meaningful and simple to understand. They should communicate information to users, but not too much information to overwhelm the user.
2. Visual representations
This concerns graphical elements like images, typography and icons that users interact with. These usually supplement the words used to communicate information to users.
3. Physical objects or space
Through what physical objects do users interact with the product? A laptop, with a mouse or touchpad? Or a smartphone, with the user’s fingers? And within what kind of physical space does the user do so? For instance, is the user standing in a crowded train while using the app on a smartphone, or sitting on a desk in the office surfing the website? These all affect the interaction between the user and the product.
4. Time
While this model sounds a little abstract, it mostly refers to media that changes with time (animation, videos, sounds). Motion and sounds play a crucial role in giving visual and audio feedback to users’ interactions. Also of concern is the amount of time a user spends interacting with the product: can users track their progress, or resume their interaction some time later?
5. Behaviour
This includes the mechanism of a product: how do users perform actions on the website? How do users operate the product? In other words, it’s how the previous models define the interactions of a product. It also includes the reactions—for instance emotional responses or feedback—of users and the product.
