Intro to

Interaction
Design
Dr. Will Kurlinkus
Upcoming Due Dates

1. Answer your SME questions:

tonight by midnight
2. Statement of Need: November
10
3. Interviews: November 13
1. Create Your First Proto Persona

“I love the Western U.S. and seeing how

different Oklahoman artists represent it”

Add image that

represents this Goals Frustrations
● Find new local artists ● Finding out info about
persona
● Travel the state local artists can be
● Learn more about difficult
these artists before ● Some gallery owners
buying their works don’t know about their
artists or don’t like to
talk
Bryan Larson
Age: 53 Bryan is a history professor who studies “the West” and is
Education: PhD History interested in western U.S. art and culture. On the weekends he
Hometown: Norman, OK travels around Oklahoma to find small art galleries that display
Family: Wife local artists. He loves discovering new artists and finding out
Occupation: Professor more about them.
2. Create User Persona 2: With a Slight Difference in
User Goal This Time
“Oklahoma is…different. I’m trying to start a
new home here.”

Add image that

represents this Goals Frustrations
● Meet new people ● ”I don’t know anything
persona
through art about Oklahoma and
● Find art about cities am new to the area so
● Learn about local finding local galleries
artists who have and knowing about
moved too how to talk to them is
hard”
Mel Petersen
Age: 40 Mel just moved to Oklahoma from New York City after
Education: MD completing her MD and working for a year. She works for the
Hometown: Oklahoma City local university medical center. She’s experienced a culture
Family: none shock but has found that art, particularly art about
Occupation: Doctor metropolitan areas, and the people she meets exploring local
art is fun pastime.
What Are User Stories?

User Stories: Fictional, one-sentence stories, told from the persona’s

point of view to inspire and inform design decisions. They connect the
needs of a potential user to a specific action and benefit.
Type of User + Action + Benefit

1. "As a.... ” type of user

2. "I want... ” What the user hopes to happen.
3. "So That... ” Why the user wants that to happen.

• As a dog owner, I want to trust my dog walker so I can

hire them for regular walks.
• As a mother of two, I want to limit the amount of access
to my home so I can keep my family safe.
• As a former police officer, I want to track my dog walker
so I am comfortable with the safety of my pets.
What is Interaction Design?

• Interaction Design: The design of the interaction between users and

products. Involves aesthetics, motion, sound, space, interface, play
theory, et al.
• 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 (colour, shape, size, etc.) gives the
user a clue about how it may function? This helps us give users
clues about what behaviours 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.
Shneiderman’s Eight Golden Rules of Interface
Design (In Canvas Think of Your Own)
1. Consistency: Use familiar and repeated icons, colors, calls-to-action, etc. Standardize the process. Also realize that generes of apps
and websites have conventions: where is a search bar or shopping cart icon located?
2. Enable shortcuts: Whether through creating scannable headings, keyboard shortcuts like control c for copy, or something else,
provide ways for frequent users to do things faster.
3. Feedback (visability of the system status): let users know they are doing things right or wrong through feedback mechanism. Show
them things are working behind the scenes with beeps and boops, with spinning beachballs, etc.
4. Design dialogue to yield closure: tell users when actions and key goals have been completed: from a thankyou after purchase to a
badge for completing a step.
5. User Error: if your users make an error allow them to fix it quickly and with no big deal. Eg what happens if they forgot to enter
their phone number.
6. Allow users to easily reverse an action: think control z but for all applications. Think of how to exit something easily vs. pop up
adds.
7. Internal locus of control: let users control things, allowing for opt in vs. opt out for instance.
8. Reduce short term memory load: simplify interfaces and interactions—avoiding crowded screens like a messy desktop with
everything in similar folders. (seven plus or minus two chunks). Putting key icons/nav bar consistently on every page.
1. Consistency: Web Design Page Structure
1. Consistency: Same Navigation & Page Names

• Sign Posting: Once I’m on a page I should be able to see

the title of the specific page, have a visual marker of the
page I’m on (a button is lit up), and know the path I took
to get to that page (breadcrumb trail).
• Uniformity: When I click something, the title of the button
should match the title of the page I’m sent to.
Skeuomorphs
an object or feature
which imitates the design of a
similar artifact made from another
material. It makes users feel like
they know a system.
2. Shortcuts: fast common actions, customizations, don’t
treat me like it’s my first time here (same training every
year)
3. Feedback:
show me that
things are
working
4. Design dialogue to
yield closure: Make
that closure happy &
fun. Think of your
interaction as having
a clear beginning,
middle and end
5. Simple
Error
Handling
5. Easy Undo
6. Internal
Locus of
Control: Opt in
Vs. Opt Out
 7. Reduce
Memory Load
Skeuomorphs and Interaction
Metaphors Also Lock us Into a
Limited Interaction Mindset
What might have replaced the desktop interface?
Web Design: Don’t Make Me Think

• Don’t Make Me Think: Web design should be obvious

and self-explanatory. Don’t create frustration and
confusion. Let a user accomplish tasks as easily as
possible.
Web Design: Home Page

• Goals: What is this website? What’s the

company? How can I get from here to the
place I need to be? Should spell out the big
picture of the site.
• Clear navigation
• Clear imagery and logo
• Search bar
• Avoids needless words
• Resonates with target audience
Web Design: Site Structure

• There generally should only have to be three

levels of a site structure: Homepage>Level
1>Level 2>Level 3
• Getting to these lower-level pages should be
easy and obvious
• Understanding what content belongs in what
section and how to get a user to that content is
the most difficult parts of web design
Web Design: Page Structure

• Clear visual
hierarchy
• Size, spacing, font
• Nesting
• Chunk pages into
clear sections
• Avoid having too
much on any page
• Beware of content
below the fold
Web Design: Navigation 1

• Let me get where

I want to go
• Make terms
obvious
• Give a search
bar
• Navigation
should tell us
where we are