A presentation I gave to the Girl Develop IT meetup group in Ottawa on March 27, 2012.

1. A Developer’s Guide to
Interaction and Interface Design
Toronto | Ottawa | Calgary | Regina | New York 1

2. Today’s Agenda
1. Introduction
2. Section 1
Who’s Your Audience?
Visual Design
General Design Guidelines
Layout
3. Exercise 1
4. Section 2
Forms and Input
Rich Experiences
5. Exercise 2
6. Section 3
Constraints
Getting Things Right
7. Conclusion
2

3. Introduction
3

4. Platforms I've Designed 4
For
While at Hummingbird/OpenText I designed for Web 1.0 and Web
2.0 clients, for a cross-section of mobile platforms and Windows
XP and 7 - with a focus on Office 2003 and 2007. I did a brief stint
of command line interface design.

5. An Attempt at Platform- 5
Independent Design
Today I'm going to try to provide theories and patterns that should
work across platforms - mobile, desktop, web. When there's special
consideration for specific platforms I'll mention them.

6. Love your passion. 6
Know your business.
It's my hope that you're a developer who loves developing.
You recognize the value of having a good experience built into the
software you produce, but think consideration for usability is a
necessary evil to getting the software accepted by the business.

7. 7
Approach for Today
I'm going to cover three sets of principles. Between each set we'll
do an exercise that employs some of the principles that I just
covered. You shouldn't worry about learning it all, you just need to
learn enough to do the exercises.
My goal is to overwhelm you.

8. Generalists are better than 8
Specialists.
In the world of User Experience, people fall into one of three large
buckets. Today we're going to look at functions that all these roles
would perform.
• Conceptual Designers
• Interaction Designers
• Usability Testers

9. 9
Take my word for it.
Most of you are going to disagree with some portion of the
principles I'll cover tonight. That's great - I don't have a problem
with people disagreeing with me - but I would like to cover the
material that I've prepared and this means we have to move
quickly.
My goal is to spend our time together exposing you to new ideas
rather than discussing things you already know.

10. Questions if Interest 10
Permits
We have a lot of material to cover today. A LOT. I'm going to
assume that all of you have been in classes where you've been the
smartest kid and you've been bored to death by the questions of
others. Tonight you're invited to ask questions as often as you'd
like, but we'll vote as a group on whether we want to spend the
time on listening to the answer. If not, record your question on a
sticky note and we'll answer them at the end of the course.

11. 11
The Clap
When I clap like this: Clap --- Clap. ______ Clap, Clap, Clap.
You clap like this: Clap, Clap, Clap, Clap. ______ Clap --- Clap.

12. Find a Partner - 2 mins
Now, find a partner whose last name starts with the
same letter as your own. Each team should have one
package of markers and sticky notes.

13. Section 1 - Understanding the
Problem
In this section, we'll be reviewing some of the more
conceptual things that are needed to understand the
problem domain.

14. Who's Your Audience?

15. 15
Manage your Ego
No one cares what you want. The egotistical designer will envision
the perfect product for themselves and get it implemented, only to
find that the target audience has COMPLETELY different needs.
Consider the difference between yourself and a nurse working a
hospital ward.

16. 16
Manage IT's ego
IT may say they know what the business wants. They'll come to
meetings to "represent the business". Their input is valuable, but
functional areas who are representing other areas are going to
skew the information they're giving to you based on their own
perception, goals and politics. Sometimes it's on purpose, but
generally it's going to be unintentional, which makes it even harder
to manage

17. Manage your Owners, 17
Sponsors, Users and
Stakeholders
Who are these people?
• Owners will make decisions and will be paying for the product.
• Sponsors have an interest in what you're doing and can derail
your project.
• Users are the lucky ones who get to use your awesome product.
• Stakeholders need to be kept in the loop as the project
progresses because the product will impact them or their staff at
some point.

18. Know your Users' 18
Characteristics
Age, education, motivation level, how long they've been in the
position, types of things they know, speed at which they
work, pressure they're under, amount of time they have to perform
a task, and goals are all things that will inform and impact your
design.

19. 19
Use Personas
"Why do I need to know that Fiona has a cat?"
Sometimes UX professionals go a little far putting details into their
personas. The goal of a persona is to capture an understanding of
who the user is so that good design decisions can be made for that
person. Fiona's cat may have nothing to do with the software she's
using, but consider the impact to the design of a tablet app whose
user is petting her cat with one hand.

20. Provide Benefits. 20
Forget Features.
Your users don't care that your product has single sign-on. They
don't know what that means. But, they really like that they don't
have to reenter their credentials as they navigate around the
applications on their workstation.

21. Be Process Orientated, 21
Not Product Driven
In your work, are you trying to create a great product? Or are you
trying to develop the best process for developing great products?
The first may result in a great product, but the second will help you
make great products throughout your career.

22. Learn to Facilitate People 22
to Achieve your Goals
You need to get to know your users. You need to talk to them. You
might think they're stupid: "how can they not understand the
client-server relationship?"
But they know WAY more about what you need to know: what's
involved in their work.

23. Quick Exercise - 2 mins
Two roles: one partner is the facilitator, one is the participant.
As facilitator, your job is to be perceived as intensely interested in
the participant. Some questions to get you going:
• How did you get here today?
• What was the best part of your day today?
• What did you eat for dinner?

24. Quick Exercise - 2 mins
Participants share with the facilitator:
• How did that feel?
• Do you feel like sharing more information?
• Do you feel closer to the facilitator?

25. Don't trust what a user says. 25
Watch what they do.
One of the scariest things about UX design is the fact that users
don't know what they know. And they'll misrepresent what they
do. Consensus from the user base is not what you need. What you
need is to understand what they do in their jobs.
There's many approaches to getting this info, but first you must
not trust what they say.

26. 26
Consider the User's Context
Where and when are your users going to be using the product? Are
they in their car? In a quiet or noisy space? Will they be working
for hours inside your product, or are they switching between
applications? Or do they only visit your site/app once a week? A
month? Is their screen tiny or large? Do they have a good internet
connection? How much power do they have to run their device? Is
storage a concern?

27. Visual Design

28. "A brand is not what you say it is. 28
It's what they say it is."
- The Brand Gap

29. Take Advantage of 29
Rebranding Efforts
For a long time I thought rebranding efforts were about changing
the visual design of a product or site. In fact, it's actually an
organization-wide effort to change the way their customers feel
about their services or product. It just rolls down to development
as an update to the look and feel. During this period, take the
opportunity to ask the marketing team for help understanding
what the personality of the product should be.

30. Value the Aesthetic 30
Usability Effect
The Aesthetic-Usability Effect causes users to perceive prettier
designs to be easier to use than less pretty designs. (Note: Prettier
= more aesthetically pleasing) This means that if you can make
your designs more appealing, people will find them easier to use.

31. Make Friends with a 31
Visual Designer
Its not your job to know what is "aesthetically pleasing" . And, in
fact, it's a full time job trying to keep up with it. Not only will a
visual designer help you out with suggesting when to use more
color, they'll also be able to point out things in your existing design
that aren't as aesthetically pleasing as they could be.

32. General Design Principles

33. 33
Some Important Concepts
You might be aware of the following core concepts already, but I
think they're critical to understanding the domain of interaction
design so I'm going to repeat them.

34. The Quality of the Design 34
Communicates its State
If your design looks like crap people will think it's not done. If it
looks perfect, they'll think it's done. Consider carefully when it's
appropriate to use different qualities of designs.

35. 35
Location Must be Visible
Users should always know where they are. Always. Provide a visual
cue in a consistent place that allows users to answer the question
"Where am I?"

36. System Status Must be 36
Visible
Users should know what's going on. If the computer is working, the
user should be able to see that. If the computer is broken, the user
should be able to see that, too.

37. 37
Provide an Escape Hatch
Expect your users to experience moments of anxiety and
frustration. Plan for an escape hatch. On the desktop, the "ESC"
button is the traditional escape hatch, while the logo is normally
the place users will expect to go when they're lost. I suspect the
home screen is the last resort of a confused user on a mobile
device. Supporting them in their "Get me outta here" or "I'm
LOST!" moments will earn you and your software some loyalty.

38. Invest in the 20% of the 38
features that are used 80%
of the time.
The 80/20 rule states that 20% of the features in a product are
used 80% of the time. You MUST know which features are most
important in order to know where invest your time.

39. 39
Delete your Features
A useful exercise to perform at any stage of a design is to remove
three features and see if the goal of the design is still fulfilled. Then
repeat. The fewer features you can implement while still
maintaining the value you're trying to achieve, the cheaper the
product to build and maintain and the more streamlined the
experience will be.

40. 40
Comparable is not Better
Just because your competition is doing it, doesn't mean that you
should. Cramming your product with all of your competitors
features is a really expensive, time consuming way to be just about
as good as them. It's good to know what the competition is
doing, but it's better to be able to offer the same benefits in a
better, simpler way.

41. Movement is NOT your 41
friend
The peripheral areas of our vision are hard coded to cause us to
respond to motion by looking at it. It's a response that evolved to
help us survive when we lived in the woods and needed to hunt
and be warned of something approaching. Movement outside of
the area where the user is focusing can, at a minimum, be
annoying and, at a maximum, can create stress. Don't use
movement. Not even on transitions to get attention. They waste
time and they're annoying.

42. Use Metaphors to 42
Facilitate Understanding
What does the icon of the back of an envelope represent? An email.
In reality, email has nothing to do with envelopes, but the
association helps users abstract out the complexities of the email
construct. When trying to communicate complex ideas, use a
metaphor to help users understand. Other examples of metaphors
include the desktop representing the home screen of a O/S, a page
of paper representing a word processor and a file folder to
represent a container.

43. Know How Responsive 43
You Have To Be
• Users won't notice if they have to wait less than a second.
• They'll notice but not mind if they have to wait 1-2 seconds.
• They walk away after 10 seconds.

44. 44
Consistency is Critical
New users will come to your software with a mental model that
determines what they will expect your system to do. Its your job to
create something that facilitates the evolution of that mental
model so that they can learn how to get the most out of your
product. Using core elements consistently will allow them to be
comfortable with the newer elements.

45. 45
If it Sucks, Toss It.
The more senior a designer is, the more likely they are to be willing
to discard a design. They understand they're not artists: their
creations must work. It's not enough for them to be beautiful .
Many different constraints exist that eliminate potential designs
and when you're faced with some new information you MUST be
willing to toss everything you've done.

46. Exercise
Put something on the table in front of you.
Stand up.
Grab it as fast as you can.

47. It's faster to hit if it's big 47
and close.
No kidding. Really.
This is called Fitt's Law and it's really important to consider size
and relative distance when you want to make something easy for
user to do.

48. People move quickly, 48
overshoot and then refine.
When moving a mouse to an area of a screen, a user will basically
fling their mouse towards the target and then make minute
corrections to actually acquire the target.

49. The edges of the screen 49
allow for infinite reach
Users don't have to correct if the thing they're after is at the top
right, top left, bottom right or bottom left corners. You can use any
amount of movement and arrive in the same place.
They're sweet spots.

50. Layout

51. Use Grids to Plan your 51
Layout
Every page should have a grid. No elements should cross the
boundaries of the lines of the grid. Using this mechanism will
ensure that the content of your interfaces is easy to consume.

52. 52
Think Modularly
Spend time and energy on designing an interaction - a menu, a
content element, a special control - once and reuse it often.
Designing and implementing visual or interactive modules will not
only allow you to cheaply create awesome interfaces, you'll also
provide a more consistent experience.

53. 53
Design Asymmetrically
In Western languages, people read from upper left to bottom right.
Design your dialogs and pages so that the most important content,
controls and activities occur in this area.

54. 54
Use Whitespace
Leaving whitespace helps users understand what to focus on.

55. Centered Text is 55
Amateurish
Center aligning your text will give you away as an amateur to any
professional.
If you don't believe me, take a look at any professional product or
mainstream advertisement.

56. 56
Use Visual Landmarks
Visual landmarks provide a sense of stability. If you want your
application to have a shallow learning curve or if you know users
will not be immersed in it, it's critical to provide visual landmarks
so they don't get lost.

57. 57
Repeat Common Elements
Repeating elements help users know where they are, and give them
a sense of familiarity. These elements provide information about
where the user is. Common elements in websites are headers,
footers and status indicators.

58. Follow the Layout Pattern 58
for your Platform
There are some basic patterns for the layout of any application, be
they web or desktop. Although it may feel like it's stifling your
creativity, these patterns helps user know how to get around. Pay
attention in particular to where confirmation buttons appear.
• For example, in a Windows dialog the "OK" button appears at the
bottom left, to the left of Cancel. On a Mac the confirmation button
is generally more specifically named and appears to the right of
Cancel.

59. On the Web, 59
the Logo goes Home
The logo should appear in the upper left of all your pages. It should
be hyperlinked to the homepage.

60. Simplify to Keep Users on 60
Task
Anytime you need a user to complete a task, you want to make
their next step as evident and simple as possible to increase the
likelihood they'll complete it. This means that many elements that
are common on most pages should be removed, including
navigation.

61. If they can't see it, they 61
won't click on it
In print design there's a concept called "Below the Fold". That's the
section of the newspaper or publication that can't be seen. The
concept has been reused on the web to indicate the area of the page
that you can't see. Be aware of what's in this area. It's less likely to
be clicked.

62. Use Visual Hierarchies to 62
Communicate
Relationships
Bigger Fonts are Parents.
To smaller fonts.
Indents and new lines can be used to indicate
parent
child relationships.

63. Use the appropriate 63
Navigation Mode for your
Content
Horizontal navigation, like tabs or horizontal links across the top
of the page, are good when you've got 3-6 pages of content. For
more content, use a vertical list on the left hand side of the page.

64. Mobile Exercise
Take out your phone and look at it.

65. Mobile: 65
Design for Portrait Orientation
Optimize for portrait orientation if you're designing for mobile
platforms. But plan to use landscape view if you want your user to
do lots of typing.

66. Choose a Set of Mobile 66
Platforms
If you're developing for mobile, choose 2-3 platforms. They'll most
likely be Windows 7, iOS and Android, although certain industries
use other devices like RIM's BlackBerry.

67. Exercise #1

68. Section 2
Collecting Information
In this section, we'll take at look at some tactical things
you can do to improve the experience you offer users
when their input.

69. Forms and Input

70. 70
One Form, One Goal
Each form you're constructing should have a clearly stated goal. If
you find that the information you're collecting is too large for one
form or has multiple goals, try to divide the content up more
granularly.

71. Understand the Path to the 71
Goal
Before constructing a form, it's a best practice to envision what the
most correct set of data is that that form could collect. Then try to
design the simplest method a user could take to completing it.
Your job is to clear the path to the goal so that it's easiest for the
user to take the action you want them to.

72. Content should be the 72
focus
Save the fancy graphics and transitions for the stage where you're
engaging the user. When they're filling out a complex form: you've
already got them. Now, you need to help them achieve the goal as
quickly as possible and during this process content is king.

73. Use Contrast to Initiate 73
Action
Using color or different sizes of things draws the user's attention to
the element you want them to read or take an action on. This
increases the likelihood they'll see it and guides them as to the next
step that you want them to take.

74. People don't always use 74
their mouse
Lots of users will use their keyboard to fill out a form, rather than a
mouse. As such, the form must be optimized to support keyboard
input.
In a form, tab order goes from left to right, top to bottom. If
you're working in a browser, let the browser determine the tab
order. Don't fight it. The goal should be to let everyone do
everything, not always in the same order.

75. 75
Tab Order: Anti-pattern
In some cases it's tempting to move the user from one field to the
next. Consider the case where the phone number input is
represented by three boxes. It's tempting to move the user to the
second field after they've entered the first three numbers.
Don't do this. It's not standard practice to move the cursor for the
user and they won't expect it. Most likely they’ll end up in the
third box because they'll have pressed the tab key after the last
number.

76. Properly Aligned Forms 76
are Beautiful
The easiest way to make your form look beautiful is to sort out the
alignment. Using a grid, ensure that all elements are aligned to the
left side of the grid. Controls should be full width of the column
that they're in.

77. 77
Left Align Labels, Controls
All labels should be left aligned in one column with the control left
aligned in a second. One exception is the checkbox, whose label
appears to the right of the checkbox.
Another exception exists for the left alignment of labels: if you're
certain that your fields are familiar to the user you can right align
the labels. But, this only works if the user can guess what the fields
are without the labels.

78. 78
Labels: Anti-pattern
Try not to put labels inside controls. The problem is that the user
can't see what's expected of them.
In the case where there's not enough room for a label, you could
consider using this approach. But if you do, it is essential that
when the field is empty and the focus is shifted away that the label
reappears.

79. Controls for Picking 79
Things
The following types of controls should be used to help the user choose
from things:
• Checkbox - Choose to use a radio button with Yes/No options
where two options exist. If space does not permit, use a
checkbox with a label that is written in the affirmative.
• Radio button - 2 to 5 choices
• Dropdown – 6 to 10 choices
• List box - 11 to 25 choices
• Picklist with built in search - 26 and more

80. 80
Validate Fields on Entry
Where possible, as the user exits the field, show an inline error
message and visual state change to indicate when the information
they've entered is incorrectly formatted.
If the form must be submitted before an error can be
detected, then include a message at the top of the screen that
summarizes the errors that were found and highlight the fields in
error.

81. Validate Password Fields 81
as the User Types
Users will find it helpful if you communicate the security
requirements for their passwords and provide some guidance on
how well their password meets these requirements.

82. 82
Allow Expected Errors
Help users complete fields by thinking of a few ways that a field
could be completed incorrectly and then build logic that supports
these expected errors without throwing an error.

83. 83
Co-locate Related Controls
The proximity principle says that things that are next to each other
are perceived to belong together. This means that if you place two
controls next to each other they will naturally be associated with
one another and help the user fill out the form.

84. 84
Lists have standard layouts
• Columns whose headers trigger a sort action. By default, they
are sorted by the most important or relevant column.
• Buttons at the top like a toolbar
• Some sort of visual indication that separates the rows
• Pagination at the bottom with a Back, Next, First Page and Last
Page button.

85. 85
Pagination: it's for you!
Pagination is not for the user. It does not help them. It's used for
performance reasons.
Ask yourself if the back end supports pagination on tables of data
before using pagination. If it doesn't, consider the experience of
loading the entire list of results.

86. 86
Tabs vs. Wizards
Use tabs for small changes to pre-entered information.
Use wizards to guide the user through a complicated set of steps or
a process where that requires a lot of data-entry or where you want
to tailor the experience.

87. 87
Four buttons on a wizard
Four buttons should appear on a wizard. Use your platform conventions, but if
you don't have any, the placement of these buttons should be as follows:
• Back - at bottom left of screen. Is not visible on the first step.
• Next - at bottom right of screen. Has a special visual style to draw
attention to it.
• Finish - replaces the "Next" button on the last step. If it's possible for
the user to submit their work half-way through the wizard, this button
can appear between Next and Cancel.
• Cancel - to right of Next

88. 88
Saving Wizard States
If your wizard is long or it's likely that the user will need to look
somewhere else for information to complete it, support auto-save
so that their work is not lost and they can start where they left off.

89. Rich Experiences

90. 90
Rich Web Designs
With the introduction of AJAX, richer, more desktop-like
interactions can be built on the web. In this section, we'll cover
some of those rich design patterns.

91. Put actions where the user 91
wants to use them
Use a small visual indicator to tell the user that there's something
more available for the element on the screen. Sometimes its
enough to have a hover effect on a label l that communicates that it
can be edited inline. Other times, you can use a small triangle to
indicate the availability of more actions or a menu.

92. Web: 92
Support Inline Editing
It's tempting to force the user to switch into an edit mode to edit
some data they entered. A better, richer experience can be offered
by allowing the user to simply click on text in place and edit it.
Don't use this in cases where the controls are more complicated
than single or multi-line text boxes.

93. Know the Drag and Drop 93
Events
The following are states to consider when designing a drag and drop
interaction:
• On Hover - should invite the user to drag the object
• Clicked and Hold - should communicate to the user that the
object is now in a moveable state
• Moving - Communicates that the object is being moved. Has
two substates: "You can drop me here" and "You can't."
• Dropped - should communicate that the object has been
dropped on a target that's acceptable and that it has moved.

94. 94
Modals are for Disasters!
If something has gone wrong and the user must take an action, use
a modal. If you're letting them know something - particularly if you
want to confirm that their action succeeded - use a message inlaid
in the page or dialog.
Always use a modal to confirm actions that destroy some of the
user's work in such a way that it cannot be undone.

95. 95
Progress Indicator
• Two types exist: Asynchronous and Synchronous
• Use the mouse to indicate when a wait of less than 2 seconds is expected.
Otherwise use the following types of dialogs, as well:
• On the web, use a in-page modal dialog to indicate the progress of the action
• On the desktop, use a pop-up modal to indicate the progress of the action
• When showing an estimated time of completion, use a Fibonacci-ish
sequence to provide estimated time of completion - 90 mins, 60 mins, 30
mins, 20 mins, 10 mins etc..

96. 96
Progressive Disclosure
Users need you to make a decision about how much they need to
know about something. Where you have a large set of settings, try
grouping them and abstracting them out into bigger buckets of
settings. Allow the user to take an action to edit the more granular
settings if they wish.

97. 97
Auto-Save!
You can build loyalty in your user base by supporting frequent
intermediate saves of their work. Implement this approach
whenever it makes sense.

98. Exercise #2

99. Section 3
Understanding the Boundaries
In this section, we'll look at how to find the boundaries
of your solution and verify that you're inside them.

100. Constraints

101. "Give me constraints and 101
you set me free”
- Bill Buxton
The solution lies within the boundaries of the constraints. Once
you can identify the elements that bound your solution, you're
better able to understand what a valid solution looks like. Welcome
constraints. Their role is to help you understand what the right
solution looks like.

102. Which screen sizes are you 102
designing for?
It used to be that the standard answer for this was 800 x 600 pixel.
These days are gone. Now we're designing for iPads, HTC phones
and super duper giant monitors. For your design to work for your
audience, you have to know what type of device is most common
and then invent a way to provide an upgraded experience for better
devices and downgraded experience for less capable devices.

103. Accessibility and 103
Universal Design
Accessibility is a property of software that allows people with
disabilities to use it. Sometimes additional equipment, like screen
readers, are used to facilitate the use of the software.
Universal Design is a more inclusive approach whose goal is to
ensure that anyone can easily use the software effectively,
regardless of ability.

104. Use W3C, Section 508 and 104
Common Look and Feel
where appropriate
• W3C - The World Wide Web Consortium (W3C) is an
international community that develops protocols and guidelines
that ensure long-term growth for the Web.
• Section 508 - A section of the US Rehabilitation Act that
contains a set of requirements that ensure technologies work for
people with disabilities.
• Common Look and Feel - the standard that the Government of
Canada uses to ensure that a high level of Web accessibility is
applied uniformly across its Web sites.

105. Check your design in 105
greyscale
There should be a strong contrast between the text on the screen
and the background color. You can check this by printing your
interface in black and white.
As well, one of every ten men is red/green colorblind. Other
portions of the population have other colorblind attributes. You
must consider this to ensure that the contrast between the
background and the text is not only relying on color to
communicate.

106. Ensure that color is 106
redundant
Meaning should be communicated using more than just color. Use
different symbols to accommodate those who may not see color.

107. 107
Design to Support Zoom
The population is aging and so are their eyes. Although 8pt font
allows you to put lots of text on the screen, it's useless if your
audience can't see it.
Understand how your chosen platform handles the resizing of
content on the screen - whether it's zoom in a web browser, change
of DPI in the O/S, or by pinching and expanding on a mobile - and
ensure your design works at different sizes.

108. Internationalize more than 108
your strings
Traditionally, internationalization is thought of as ensuring that the
strings in a user interface can be translated, while localization is where
a product's internationalized strings are presented in a specific
language.
Not only does the language of the text matter, but different cultures
read text in different directions and pages in different order than left to
right, top to bottom. For example, letters in Arabic appear right to left
while traditionally, Chinese, Japanese, and Korean are written
vertically in columns going from top to bottom and ordered from right
to left.

109. Consider Different 109
Learning Styles
There are three ways that people learn. Considering the different
approaches will ensure that your software isn't prevented from
reaching people who learn in a different way.
• Visual - learn by reading and seeing
• Audio - learn by hearing
• Haptic - lean by doing

110. Choose the Right Level of 110
Language
Some people read at a Grade 4 level, while others read at a Grade 12 level. In this
case, design the content for the lowest common denominator.
Here's an example of the different words that different levels of people can read:
• to — see — cat — milk — red — tree — big — book — was — city
• vehemence — regicidal — evanescence — heinous — omniscience —
conduit

111. DON'T USE ALL 111
CAPITALS UNLESS
YOU'RE SHOUTING
Sentence case is for labels and other things that we want to be easy
and quick to read. Title Case is for Page Titles and Buttons and
Other Things We Want People to Take Time to Read and Think
About.

112. Getting Things Right

113. 113
Share as often as possible.
The more frequently that you can share your work, the lower the
chances are that you're heading down the wrong path. The
problem that you'll run into is that every time you share your work,
someone is going to find something you have to change. Every
time.

114. Decide Now. 114
Refactor Later.
Many questions will come up during development and sometimes
the people with the answers won't be available. In these cases
you're going to have to accept a bit of uncertainty. I've found that
it's better to make an assumption and act accordingly than to wait
for an answer.

115. 115
Testing and Verification
Usability testing is about seeing if the interactions that have been
created match the user's expectations. Ease of use problems
quickly become evident when a facilitator watches a user try to
perform a task.

116. "Elaborate usability tests 116
are a waste of resources."
- Jakob Nielsen

117. 117
Usability Test Rapidly
1. Get a participant and a prototype. The prototype could be on paper,
in a program or actual working software.
2. Act interested in the participant's feedback.
3. Ask them to perform a task.
4. Listen to them, watch them and nod. Do NOT justify an
implementation decision. Imply that everything they are saying is
correct.
5. Modify your prototype where possible and where it makes sense.
Repeat.

118. 5 participants will find 118
80% of the problems
You need 15 users to understand the usability issues with a piece of
software. But rather than wasting your time finding the same
issues over and over, run the test with 5 participants on one
prototype, incorporate their feedback and then repeat the test
twice more. You get the 15 recommended participants and avoid
finding the same problems over and over.

119. Statistics don't impact 119
your product
Academic, formal usability testing methods require a great many
participants and time and capture some measurements can be
taken. These measurements - time on task, number of errors - can
be used to evaluate the progress made on a product from one
release to another.
In the real world, it costs a lot of money to run a usability study
that results in tidy statistics and, at the end of the day, the results
are only available after a product has launched, leaving no time for
it to be improved.

120. Exercise #3

121. Conclusion
121

122. 122
5 Love Languages
In his book "The 5 Love Languages" Gary Chapman lists the
following five ways of showing love: Words of Affirmation, Quality
Time, Receiving Gifts, Acts of Service and Physical Touch.
If you enjoyed this presentation, post a comment to my blog or
twitter.

123. Today's Content was 123
Inspired By:
Books include The Brand Gap, 101 Things I Learned in Architecture School, 101
Things I Learned in Business School, Rocket Surgery Made Easy and Don't Make
Me Think, Designing Web Interfaces and Universal Principles of Design.
Slideshare content includes: Mobile Interface Design by Jonathan Stark and The
Principles of Good User Interface Design by David Van Camp.
Nods to Jared Spool, Jakob Nielsen and Alan Cooper. Roel Vertegaal at Queen's
University got me started when I was in school.
Thanks to Dmitry Nekrasovski for his twitter feed, Bill Lucas for his devotion to
implementing the right model and Pierre Spenard for the help understanding
the complex world of visual design.

124. 124
We’re Hiring
If you are or know a SharePoint developer or a Project Manager,
we’d love to talk to you about a job with NLC.

125. 125
Thanks!
You can reach me (for fun) at amanda.holtstrom@gmail.com and
(for work) at aholtstrom@nonlinear.ca.
I'm also on Twitter (@Holtstrom) and have a blog that I'm
neglecting (holtstrom.blogspot.com).