1. INFORMATION
ARCHITECTURE
Usability | Content | Personas | Site Mapping | Navigation | Taxonomy
INTERFACE AND
INTERACTION DESIGN
User Workflows | Affordances | Wireframes | Prototyping | User Testing
Katherine Pradt
IA/UX

2. RETURN TO
The study of
usability was my
introduction to the
world of information
architecture and
user experience. Its
principles—usability
heuristics→—should
form the basis of the
first investigation
of a user interface,
and inform the
construction or
reconstruction of
everything that the
user navigates.
Visibility of system status
Match between system
and the real world
User control and freedom
Consistency and
standards
Error prevention
Recognition rather than
recall
Flexibility and efficiency
of use
Aesthetic and minimalist
design
Help users recognize,
diagnose, and recover
from errors
Help and documentation

3. RETURN TO
UX has everything
to do with
how content is
presented and
understood—so
I have to learn
everything I can
about the content
of the projects I
work on.
Much of a
design is based
on the answers to
questions about
content.
inventory

4. RETURN TO
I create personas
to help me and my
clients understand
how (and why,
and for what) the
product will be
used. They are
lenses through
which we can
see from a user’s
perspective.
Personas are also
an exercise in
writing realistic
fiction; that MFA
of mine has turned
out to be useful.

5. RETURN TO
An early task that
becomes a tool is
site mapping. Site
maps are great to
include in a final
product to help
the user; they also
show the makers
what should go
where, and begin
the process of
organizing content
and finding
language for labels.
Who We Are What We Offer WhatYou Can Do
BK Farmyards
Community
bk farmyards SOME KIND OF CATCHY TAGLINE Sign Up | Sign In
New to BK Farmyards?
New to urban farming?
Click here to learn
what it's all about.
Newsletter | Contact Us | Site Map | Our Partners & Friends
SITE MAP
Who We Are
How bkf Works
Mission & Philosophy
Staff Bios
Press
Glossary/FAQ
Contact
What We Offer
Farms
Foxtrot Farm
Imani Farm
Chicken Coop
HSPS Youth Farm
CSAs
Produce
Eggs
Events
Pop-up Dinner
Volunteer Days
Workshops
Getting Started on Your Urban Farm
Raising Chickens
Beekeeping
Soil
Compost
Blog
Forum
Events
Workshops
Calendar
Donate
LATEST ON
THE BLOG
Bacon nisi
consectetur boudin
sausage shoulder.
Boudin
reprehenderit velit
in....
MORE >>
What You Can Do
Sign Up
Account Signup
Volunteer
Internships
Compost
Market & Farm Share
Apprenticeships
Chickens
Farm
Backyard
Food Activism
BK Farmyard Community
Farms
Member Profiles
Forum
Map
Donate
Newsletter
Site Map

6. RETURN TO
Sketching out basic
navigation helps
me see how the
interface needs
to be organized.
Some content
will fit neatly and
beautifully under
menu headings;
some won’t. How
do users access—or
even know of—the
things that won’t?
What new windows
and doors do we
have to build?
card sort

7. RETURN TO
I bring my
background in
understanding
content, as well
as training in
information
organization and
metadata, to
taxonomy. Good
taxonomy makes
searching and
browsing possible.
It also creates
(or illuminates)
organizational
structures.

8. RETURN TO
Ultimately, all of these techniques add up to the
investigation and organization of the project.
Then I can build the skeleton, the strong, straight,
articulated bones that make beautiful, functional
sense of the content.

9. RETURN TO
Setting out user
workflows is often,
for me, the most
information-rich
part of the planning
process, even if
none of these
schema make it
into a deliverable.
Plotting every
aspect of a user’s
interaction with
a design catches
those tiny,
thoughtless errors
that separate good
(invisible) UX from
frustrating UX.

10. RETURN TO
How will this
audience best
understand how
to work with
this interface? I
incorporate the
affordances that
are right for the
user—not any
user, but specific
users. Age, techno-
savviness, the kinds
of software they
are already familiar
with: these help
inform the choice
of toolset.
Older users are
strikingly unfamiliar
with the hamburger icon.
Swipe, however, is so
intuitive that even small
children recognize it.

11. RETURN TO
I can crank out
wireframes
with the best of
them, and I am
quick but careful
in production.
Omnigraffle, Axure,
Balsamiq, InDesign,
Keynote, Sketch: If
it makes a picture, I
can make it work.

12. RETURN TO
Desktop, web,
tablet, phone;
touchscreen,
touchpad,
keyboard, mouse;
gesture, menu,
voice command…
Joe Baby
12:34 PMCarrier
L
Breastfeeding
R
00:05:10
Running timer
Tap to stop
User can tap button or
timer to stop feed
More options
Change feeding method
(Fig. 4)
Changes to sleep timer,
ends feeding timer
Baby change (Fig. 5)
Feeding statistics
Returns to home screen
(Fig. 1)
Active feeding indicated
Figure 3:
Active Feeding
Feeding
1 hr 47 min ago
Sleeping
2 hr 22 min ago
8 hr 05 min total
Diaper
2 hr 22 min ago
12:34 PMCarrier
Tap to
Activate
Voice
Control
X
Tap to Activate
Voice Control,
Or Say "Voice"
Figure 1.1:
Choosing
Voice Control
Feeding
1 hr 47 min ago
Sleeping
2 hr 22 min ago
8 hr 05 min total
Diaper
2 hr 22 min ago
12:34 PMCarrier
Tap to
Activate
Voice
Control
X
Spoken Commands:
to change screen
"Feed," "Sleep," "Diaper"
to change states
"Start," "Stop"
to change baby tracked
say name of baby
for more commands
"Voice Info"
Figure 1.2:
Voice Command
Info Screen
close and
speak commands
close and
speak commands
Feeding
1 hr 47 min ago
Sleeping
2 hr 22 min ago
8 hr 05 min total
Diaper
2 hr 22 min ago
12:34 PMCarrier
Joe Baby
Figure 1.3:
Home Screen,
Voice Command
Active

13. RETURN TO
I’m intimate with every action
we can put into an interface, I
watch carefully for the next new
thing, and I pay attention to the
interaction that every project
and that project’s particular
audience expects or needs.
CONTACT ABOUT SITEMAP CONTRIBUTE
!"#$%&$
'()
LOGIN|JOIN
>>ADVANCEDSEARCH
Search
TIMELINE MOVEMENTMAP
2003
Demo vs. Iraq War
MAKEAPOSTER
–
This wireframe uses a horizontal
scroll. Often, a horizontal scroll
is used because it’s kind of cool or
because there is so much content
on one page that it seems better
to divide one giant vertical scroll
into a ladder of horizontal ones—
both bad reasons. A horizontal
scroll for a timeline, though, is an
intuitive solution that matches a
“real-world” experience.

14. RETURN TO
When it is
appropriate to
a project, my
wireframes can
be high-fidelity—
looking more
like a graphically
designed final
product.

15. RETURN TO
I will use whatever
makes sense to
make a prototype.
Paper and
cardboard, clickable
PDFs, HTML: they
all have uses.

16. RETURN TO
Why is user
testing so often a
luxury? It is such a
valuable tool, both
for determining
whether things
work and for
proving what does
(and doesn’t). Of
course, it needs
to be done well.
I can plan the
right questions
and ask them
in the way that
elicits the clearest
information.

17. RETURN TO
All of the tools of information architecture and
UX design are iterative: I never expect to march
through a process step by step. An initial site map
gives me a start on the wireframes; as I make the
wireframes, I realize there are changes to make
to the map; prototypes show me things that I left
out of the workflows.