High Level Takeaways: * Understanding how designers think will help you understand your client better. * It forces you to listen * UI Improves your communication * Forces clarity * It's completely about getting people to understand something better, & facilitating their ability to complete the task you want them to do. * Example: Billing. * UI improves your trustworthiness * Awesome video of trust fall. * Simple and Clear Communication Builds Trust * UI increases transparency, which builds trust. We are explanatory creatures. We are story-based. If we don't see a story for something, we will invent one. * People feel less stupid when they understand something. * Trust increases speed. * Understanding Information Architecture will help you run a more efficient office. * Understanding good UI will help you market more effectively. * Website conventions UI stands for User Interface design. So let's take a look at what UI is, because it's not what you might think it is. A lot of people think UI design is about pretty stuff. But that's only the tip of the iceberg. So for example, UI is not just… * Balance * Color * Typography Design is about how things work. And User Interface design is about how to design a system so that humans can understand it., So, aside from the fact that we're enamored with beautiful technology here at MILOFest. Why should Lawyers learn a little bit about UI? Because you're an advocate. You want to help your client. You need to persuade people - opposing counsel, judges, juries, your client. Because it improves your communication. People understand things better when they're presented well. And that builds trust. it's going to build trust with your clients.

1. Why Good UI Can Help
You Be a Better Lawyer
10.25.2013
Larry Port - Rocket Matter, LLC

3. UI = User Interface

4. Bad UI’s Kill Kittens

5. Good UI is not just
about...

6. Typography

7. Flow

8. Balance

9. Color

10. The Rule of Thirds

12. The visual part
of a design, the
look and feel, is
only the tip of
the iceberg.

13. Design is not just
what it looks like and
feels like. Design is
how it works.

14. User Interfaces make
things usable

15. How can UI help you
become a better
lawyer?

16. 1. Incorporating design
techniques will help you
understand the people
you work with better.

17. 2. Good UI improves
your communication.

18. Problem: Our Methodology
Explained v 1.0

19. Our Methodology Explained v 2.0

20. Our Methodology Explained v 2.0

21. Selling a Home v 1.0
The Home Sale Process for
Home Sellers
1.You sign contract, accepting offer & send to us
1.1. We get in touch with Buyer’s Attorney
lender & share contact & other info.
2. Inspection & Modification Phase
2.1.We receive inspection report & attorney
letter proposing changes.
2.2.With our help, YOU decide how to respond
to request.
2.3.We document the revised agreement.
2.4.You schedule and complete the home
repairs.
Thanks to Mark Metzger for material

22. Selling a Home v 2.0
© 2013 Metzger, Metzger, & Metzger P.A. All Rights Reserved.

23. Selling a Home v 3.0
© 2013 Metzger, Metzger, Metzger, & Metzger P.A. All Rights Reserved.

24. 3. Good UI builds trust.

26. 4. Good UI will help you
run a more efficient
office.

27. The UI’s you consume
can radically transform
your office.

28. 5. Good UI will help you
market better.

29. 6. UI is about pursuing
perfection.

30. How can UI help you become a
better lawyer?
1. Incorporating design techniques will help you
understand the people you work with better.
2. Good UI improves your communication.
3. Good UI builds trust.
4. Good UI will help you run a more efficient office.
5. Good UI will help you market better.
6. UI is about pursuing perfection.

31. Exercise 1:
Identify a situation in your
practice where
communication is a critical
challenge.

32. Part One
Let’s learn how to think like a
designer

33. Glossary
Usability
The extent to which something is fit to be
used to accomplish goals.
Information
Architecture
How information is organized on a web site
or web application.
User
Experience
User eXperience (UX) is about how a person
feels about using a system.

34. Affordances:
“It looks like I could
stick my fingers in
those things.”
Constraints:
“My thumb goes in
the small one and
my fingers in the
big one.”

35. Conceptual Model:
“If I open and close my
hand, the thing will work”

36. Conceptual Model:
“That thing is not going to
work.”

37. Mental Model:
“Based on my life
experience, this is
how it’s supposed
to work.”

38. Broken Mental Model:
The thermostat does not
work as we think it should.

39. Mapping:
The relationship between
two things, i.e. a steering
wheel and control of a car.

40. Broken Mapping:
“Which knob controls
which burner again?”

41. Feedback:
“Did my action have any
effect?”

42. Our Goal:
Align our mental model
with that of our client
My mental model
My client’s

43. Our Goal:
Our UI should closely
match our mental
models
My mental model
My client’s
System

44. How do we align our
mental models:
Develop personas

45. .
rton..
u
had B es esta
C
e hac ?
¿Qu
e
noch

46. Exercise 2:
Using the output of
exercise 1, identify a
persona and try to identify
their mental model for the
situation.

47. Iterate:
Multiple communication
cycles are required.

48. Part Two
Usability Rules + Guidelines
for Websites and Beyond

49. Most web pages
are garbage,
and users know it.

50. 10 Seconds

51. Time on a Web Page vs
Probability of Leaving
Probability of Leaving the Page Now
5%
4%
3%
2%
1%
0%
0
20
40
60
80
100
120
Time Visiting the Page So Far (Seconds)
Source: http://www.useit.com/alertbox/page-abandonment-time.html

52. First Rule of Usability:
Don’t make me think.

53. The more obvious something is, the
better. Lots of little decisions and
indecisiveness add up.

54. Second Rule of Usability:
It doesn’t matter how many
times I have to click, as long as
each click is a mindless,
unambiguous choice.

55. Third Rule of Usability:
Get rid of half the words on a
page, then get rid of half of
what’s left.

56. Are there needless words
on the webpage?
Happy talk (introductory small talk) must die.
Instructions must die.
Get right to the beef, cut to the chase - web users have
no time.

57. Usability Rules
1. Don’t make me think.
2. It doesn’t matter how many times I have to click,
as long as each click is a mindless, unambiguous
choice.
3. Get rid of half the words on a page, then get rid
of half of what’s left.

58. Fact of Life #1:
We don’t read pages.
We scan them.

60. Fact of Life #2:
We don’t make optimal
choices. We satisfice.

61. Satisfice = Satisfy + Suffice

62. Studies have shown we take the
first reasonable course of action, not
the best of all possible choices.

63. Fact of Life #3:
We don’t figure out how
things work.
We muddle through.

64. People succeed in using things in
ways they weren’t designed to be
used, but it’s inefficient and
error-prone.

65. Facts of Life
1. We don’t read pages. We scan them.
2. We don’t make optimal choices. We satisfice.
3. We don’t figure out how things work. We
muddle through.

66. Are navigation conventions used?

67. Where do I start?
When you enter a site,
you should know how
to either find what you’re
looking for with search,
or how to browse to
desired information.
Good: Clear call to
action on the site.
Good: First action on
the right side, under
nav, but above the fold.
SITE ID
Tagline
CTA

68. SITE ID
Is the site ID on
every page and is
it prominently
located?

69. Is there a tagline?
Taglines efficiently get an
organization’s message
across. They’re a
concise statement of
purpose. They are not
as important for famous
companies or sites.
Location: below, above,
or next to Site ID.
SITE ID
Tagline

70. Is the tagline good?
Good = Clear and informative
Ohio Workers Compensation Attorney
Bad = Vague
Defending Your Rights

71. Is it obvious what’s clickable?
Buttons should look like buttons.
Links should look like links.
Triangular arrows: towards link

72. Does the home
page convey the
big picture?
The tendency to do
everything on a
home page makes
it harder to
concentrate on its
primary importance:
conveying the big
picture.
BIG PICTURE
What is this?
What do they have here?
What can I do here?
Why should I be here
and not somewhere
else?

73. Is there a clear
visual hierarchy on
each page?
The more important
something is, the
more prominent
it is.
More Important
Important
Less Important

74. Title Here
Is there a clear
visual hierarchy on
each page?
Things are nested
(inside one another)
to visually show
what’s part of what.

75. Is your site noisy?
Many users have low tolerance for complexity
and distractions.

76. Website Usability Questions
1. Are navigation conventions used?
2. Where do I start?
3. Is the site ID on every page and is it prominently located?
4. Is there a value-add tagline?
5. Is it obvious what’s clickable?
6. Does the home page convey the big picture?
7. Is there a clear visual hierarchy on each page?
8. Is the site noisy?

77. Pursue Clarity
Pursue Simplicity
Pursue Perfection

78. Thank You!
larry@rocketmatter.com
@larryport