Ideation & HTML
Dr. Will Kurlinkus
Upcoming Deadlines
1. Statement of Need:
Midnight Tonight
2. Proof of 2 User Interviews:
Monday
3. Proof of Data Collection
Using Survey & Another
Method: Wednesday
Craft: The positive memories and human
connections gained from contributing to the
life cycle of an object.
• The IKEA effect: People value things
more if they took part in making them
(even if a little bit)
• The ecology of care surrounding an
object (its aura+my grandma made this
for me): connects us to people across
time
• Objects that age with grace: How can
you make your experience get better
with use?
What Craft Interactions Might you add to Your
Design: Getting Your user to make/contribute?
Connoisseurship: Sharing in communal
consumption and a taste for playing with
time that require memorable rituals and
traditional knowledge as badges of
membership
• Focusing and slowing
consumption (learning to
become a part of a
community): wine tasting,
chocolate tasting,
ritualizing, oreos, blue
moon beer
• Rewarding communities of
”forensic fans” who deeply
engage with and nerd-out
on your project
What Types of Rituals Might you add to
your design to Focus Users’ Attentions
Deceptive Patterns of
Interaction
• A deceptive or dark pattern is a type of
user interface that appears to have been
carefully crafted to trick users into doing
things that are not in their interest and is
usually at their expense. —Harry Brignull
1. Confirm Shaming
2. Hidden Costs
3. Forced Continuity
Emotional Manipulation That isn’t
Positive: Confusing Design
• Gruen transfer: the
moment when
consumers enter a
shopping mall or store
and, surrounded by an
intentionally confusing
layout, lose track of
their original intentions,
making them more
susceptible to making
impulse buys.
Crazy Eights: What
Are Some Nuances
in How You Might
Resolve Your User’s
Problem?—What
Will You Design?
LET’S GET STARTED
• HTML: Hypertext mark up language. It’s not pretty. It’s for
labeling things. (CSS is pretty.)
• Our textbook: w3schools
• Notepad on Windows:
• Windows 8 or later:
• Open the Start Screen (the window symbol at the
bottom left on your screen). Type Notepad.
• Windows 7 or earlier:
• Open Start > Programs > Accessories > Notepad
• text edit on Macs
• Open Finder > Applications > TextEdit
• Also change some preferences to get the application to
save files correctly. In Preferences > Format
> choose "Plain Text"
• Then under "Open and Save", check the box that says
"Display HTML files as HTML code instead of formatted
text".
• Then open a new document to place the code.
• Create another folder in this folder. Call it images
• Find a picture of yourself and put it in that folder. Rename the
picture to something simple.
Add some information
• Will Kurlinkus Bio
• Hometown: Roscoe, IL
• Website: wkurlinkus.com
• Job: Professor of English, Director of
Technical Writing
• Favorite Author: Terry Pratchet
• Favorite Food: Candy
• Favorite Cat: NeNe
Basic Webpage Structure
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<!--note to self this is how I can take notes
in my html without anyone knowing-->
</body>
</html>
Parts of an HTML Tag
• This is an html element: <tagname> content goes here...</tagname>
• Most elements have an opening and a closing tag. Closing tags are
indicated by a forward slash.
• Elements tell the browser how to read and display what is inside
them
• Open elements (br and images, for example) don’t need an end tag.
• Many times elements contain attributes that give extra information
about the element. They are always contained in the opening tag.
• Attributes often come in name value pairs: <tag name=“value”>
• <img src=“kitten.jpg”>
