Design for Lawyers : Why UI Can Make You a Better Attorney
-
Upload
rocket-matter-llc -
Category
Education
-
view
1.176 -
download
0
description
Transcript of Design for Lawyers : Why UI Can Make You a Better Attorney
![Page 1: Design for Lawyers : Why UI Can Make You a Better Attorney](https://reader033.fdocuments.net/reader033/viewer/2022051400/554c31acb4c90513198b5369/html5/thumbnails/1.jpg)
Why Good UI Can HelpYou Be a Better Lawyer
10.25.2013Larry Port - Rocket Matter, LLC
![Page 2: Design for Lawyers : Why UI Can Make You a Better Attorney](https://reader033.fdocuments.net/reader033/viewer/2022051400/554c31acb4c90513198b5369/html5/thumbnails/2.jpg)
![Page 3: Design for Lawyers : Why UI Can Make You a Better Attorney](https://reader033.fdocuments.net/reader033/viewer/2022051400/554c31acb4c90513198b5369/html5/thumbnails/3.jpg)
UI = User Interface
![Page 4: Design for Lawyers : Why UI Can Make You a Better Attorney](https://reader033.fdocuments.net/reader033/viewer/2022051400/554c31acb4c90513198b5369/html5/thumbnails/4.jpg)
Bad UI’s Kill Kittens
![Page 5: Design for Lawyers : Why UI Can Make You a Better Attorney](https://reader033.fdocuments.net/reader033/viewer/2022051400/554c31acb4c90513198b5369/html5/thumbnails/5.jpg)
Good UI is not just about...
![Page 6: Design for Lawyers : Why UI Can Make You a Better Attorney](https://reader033.fdocuments.net/reader033/viewer/2022051400/554c31acb4c90513198b5369/html5/thumbnails/6.jpg)
Typography
![Page 7: Design for Lawyers : Why UI Can Make You a Better Attorney](https://reader033.fdocuments.net/reader033/viewer/2022051400/554c31acb4c90513198b5369/html5/thumbnails/7.jpg)
Flow
![Page 8: Design for Lawyers : Why UI Can Make You a Better Attorney](https://reader033.fdocuments.net/reader033/viewer/2022051400/554c31acb4c90513198b5369/html5/thumbnails/8.jpg)
Balance
![Page 9: Design for Lawyers : Why UI Can Make You a Better Attorney](https://reader033.fdocuments.net/reader033/viewer/2022051400/554c31acb4c90513198b5369/html5/thumbnails/9.jpg)
Color
![Page 10: Design for Lawyers : Why UI Can Make You a Better Attorney](https://reader033.fdocuments.net/reader033/viewer/2022051400/554c31acb4c90513198b5369/html5/thumbnails/10.jpg)
The Rule of Thirds
![Page 11: Design for Lawyers : Why UI Can Make You a Better Attorney](https://reader033.fdocuments.net/reader033/viewer/2022051400/554c31acb4c90513198b5369/html5/thumbnails/11.jpg)
![Page 12: Design for Lawyers : Why UI Can Make You a Better Attorney](https://reader033.fdocuments.net/reader033/viewer/2022051400/554c31acb4c90513198b5369/html5/thumbnails/12.jpg)
The visual part of a design, the look and feel, is only the tip of the iceberg.
![Page 13: Design for Lawyers : Why UI Can Make You a Better Attorney](https://reader033.fdocuments.net/reader033/viewer/2022051400/554c31acb4c90513198b5369/html5/thumbnails/13.jpg)
Design is not just what it looks like and feels like. Design is how it works.
![Page 14: Design for Lawyers : Why UI Can Make You a Better Attorney](https://reader033.fdocuments.net/reader033/viewer/2022051400/554c31acb4c90513198b5369/html5/thumbnails/14.jpg)
User Interfaces make things usable
![Page 15: Design for Lawyers : Why UI Can Make You a Better Attorney](https://reader033.fdocuments.net/reader033/viewer/2022051400/554c31acb4c90513198b5369/html5/thumbnails/15.jpg)
How can UI help you become a better
lawyer?
![Page 16: Design for Lawyers : Why UI Can Make You a Better Attorney](https://reader033.fdocuments.net/reader033/viewer/2022051400/554c31acb4c90513198b5369/html5/thumbnails/16.jpg)
1. Incorporating design techniques will help you understand the people you work with better.
![Page 17: Design for Lawyers : Why UI Can Make You a Better Attorney](https://reader033.fdocuments.net/reader033/viewer/2022051400/554c31acb4c90513198b5369/html5/thumbnails/17.jpg)
2. Good UI improves your communication.
![Page 18: Design for Lawyers : Why UI Can Make You a Better Attorney](https://reader033.fdocuments.net/reader033/viewer/2022051400/554c31acb4c90513198b5369/html5/thumbnails/18.jpg)
Problem: Our Methodology Explained v 1.0
![Page 19: Design for Lawyers : Why UI Can Make You a Better Attorney](https://reader033.fdocuments.net/reader033/viewer/2022051400/554c31acb4c90513198b5369/html5/thumbnails/19.jpg)
Our Methodology Explained v 2.0
![Page 20: Design for Lawyers : Why UI Can Make You a Better Attorney](https://reader033.fdocuments.net/reader033/viewer/2022051400/554c31acb4c90513198b5369/html5/thumbnails/20.jpg)
Our Methodology Explained v 2.0
![Page 21: Design for Lawyers : Why UI Can Make You a Better Attorney](https://reader033.fdocuments.net/reader033/viewer/2022051400/554c31acb4c90513198b5369/html5/thumbnails/21.jpg)
Selling a Home v 1.0
Thanks to Mark Metzger for material
The Home Sale Process for Home Sellers
1.You sign contract, accepting offer & send to us1.1. We get in touch with Buyer’s Attorney lender & share contact & other info.
2. Inspection & Modification Phase2.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.
![Page 22: Design for Lawyers : Why UI Can Make You a Better Attorney](https://reader033.fdocuments.net/reader033/viewer/2022051400/554c31acb4c90513198b5369/html5/thumbnails/22.jpg)
Selling a Home v 2.0
© 2013 Metzger, Metzger, & Metzger P.A. All Rights Reserved.
![Page 23: Design for Lawyers : Why UI Can Make You a Better Attorney](https://reader033.fdocuments.net/reader033/viewer/2022051400/554c31acb4c90513198b5369/html5/thumbnails/23.jpg)
Selling a Home v 3.0
© 2013 Metzger, Metzger, Metzger, & Metzger P.A. All Rights Reserved.
![Page 24: Design for Lawyers : Why UI Can Make You a Better Attorney](https://reader033.fdocuments.net/reader033/viewer/2022051400/554c31acb4c90513198b5369/html5/thumbnails/24.jpg)
3. Good UI builds trust.
![Page 25: Design for Lawyers : Why UI Can Make You a Better Attorney](https://reader033.fdocuments.net/reader033/viewer/2022051400/554c31acb4c90513198b5369/html5/thumbnails/25.jpg)
![Page 26: Design for Lawyers : Why UI Can Make You a Better Attorney](https://reader033.fdocuments.net/reader033/viewer/2022051400/554c31acb4c90513198b5369/html5/thumbnails/26.jpg)
4. Good UI will help you run a more efficient office.
![Page 27: Design for Lawyers : Why UI Can Make You a Better Attorney](https://reader033.fdocuments.net/reader033/viewer/2022051400/554c31acb4c90513198b5369/html5/thumbnails/27.jpg)
The UI’s you consume can radically transform your office.
![Page 28: Design for Lawyers : Why UI Can Make You a Better Attorney](https://reader033.fdocuments.net/reader033/viewer/2022051400/554c31acb4c90513198b5369/html5/thumbnails/28.jpg)
5. Good UI will help you market better.
![Page 29: Design for Lawyers : Why UI Can Make You a Better Attorney](https://reader033.fdocuments.net/reader033/viewer/2022051400/554c31acb4c90513198b5369/html5/thumbnails/29.jpg)
6. UI is about pursuing perfection.
![Page 30: Design for Lawyers : Why UI Can Make You a Better Attorney](https://reader033.fdocuments.net/reader033/viewer/2022051400/554c31acb4c90513198b5369/html5/thumbnails/30.jpg)
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.
How can UI help you become a better lawyer?
![Page 31: Design for Lawyers : Why UI Can Make You a Better Attorney](https://reader033.fdocuments.net/reader033/viewer/2022051400/554c31acb4c90513198b5369/html5/thumbnails/31.jpg)
Exercise 1:Identify a situation in your
practice where communication is a critical
challenge.
![Page 32: Design for Lawyers : Why UI Can Make You a Better Attorney](https://reader033.fdocuments.net/reader033/viewer/2022051400/554c31acb4c90513198b5369/html5/thumbnails/32.jpg)
Part One
Let’s learn how to think like a designer
![Page 33: Design for Lawyers : Why UI Can Make You a Better Attorney](https://reader033.fdocuments.net/reader033/viewer/2022051400/554c31acb4c90513198b5369/html5/thumbnails/33.jpg)
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.
![Page 34: Design for Lawyers : Why UI Can Make You a Better Attorney](https://reader033.fdocuments.net/reader033/viewer/2022051400/554c31acb4c90513198b5369/html5/thumbnails/34.jpg)
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.”
![Page 35: Design for Lawyers : Why UI Can Make You a Better Attorney](https://reader033.fdocuments.net/reader033/viewer/2022051400/554c31acb4c90513198b5369/html5/thumbnails/35.jpg)
Conceptual Model:“If I open and close my
hand, the thing will work”
![Page 36: Design for Lawyers : Why UI Can Make You a Better Attorney](https://reader033.fdocuments.net/reader033/viewer/2022051400/554c31acb4c90513198b5369/html5/thumbnails/36.jpg)
Conceptual Model:“That thing is not going to
work.”
![Page 37: Design for Lawyers : Why UI Can Make You a Better Attorney](https://reader033.fdocuments.net/reader033/viewer/2022051400/554c31acb4c90513198b5369/html5/thumbnails/37.jpg)
Mental Model:“Based on my life experience, this is how it’s supposed
to work.”
![Page 38: Design for Lawyers : Why UI Can Make You a Better Attorney](https://reader033.fdocuments.net/reader033/viewer/2022051400/554c31acb4c90513198b5369/html5/thumbnails/38.jpg)
Broken Mental Model:The thermostat does not
work as we think it should.
![Page 39: Design for Lawyers : Why UI Can Make You a Better Attorney](https://reader033.fdocuments.net/reader033/viewer/2022051400/554c31acb4c90513198b5369/html5/thumbnails/39.jpg)
Mapping:The relationship between two things, i.e. a steering
wheel and control of a car.
![Page 40: Design for Lawyers : Why UI Can Make You a Better Attorney](https://reader033.fdocuments.net/reader033/viewer/2022051400/554c31acb4c90513198b5369/html5/thumbnails/40.jpg)
Broken Mapping:“Which knob controls which burner again?”
![Page 41: Design for Lawyers : Why UI Can Make You a Better Attorney](https://reader033.fdocuments.net/reader033/viewer/2022051400/554c31acb4c90513198b5369/html5/thumbnails/41.jpg)
Feedback:“Did my action have any
effect?”
![Page 42: Design for Lawyers : Why UI Can Make You a Better Attorney](https://reader033.fdocuments.net/reader033/viewer/2022051400/554c31acb4c90513198b5369/html5/thumbnails/42.jpg)
Our Goal:Align our mental model with that of our client
My mental model My client’s
![Page 43: Design for Lawyers : Why UI Can Make You a Better Attorney](https://reader033.fdocuments.net/reader033/viewer/2022051400/554c31acb4c90513198b5369/html5/thumbnails/43.jpg)
Our Goal:Our UI should closely
match our mental models
My mental model My client’s
System
![Page 44: Design for Lawyers : Why UI Can Make You a Better Attorney](https://reader033.fdocuments.net/reader033/viewer/2022051400/554c31acb4c90513198b5369/html5/thumbnails/44.jpg)
How do we align our mental models:
Develop personas
![Page 45: Design for Lawyers : Why UI Can Make You a Better Attorney](https://reader033.fdocuments.net/reader033/viewer/2022051400/554c31acb4c90513198b5369/html5/thumbnails/45.jpg)
Chad Burton...
¿Que haces esta
noche?
![Page 46: Design for Lawyers : Why UI Can Make You a Better Attorney](https://reader033.fdocuments.net/reader033/viewer/2022051400/554c31acb4c90513198b5369/html5/thumbnails/46.jpg)
Exercise 2:Using the output of exercise 1, identify a
persona and try to identify their mental model for the
situation.
![Page 47: Design for Lawyers : Why UI Can Make You a Better Attorney](https://reader033.fdocuments.net/reader033/viewer/2022051400/554c31acb4c90513198b5369/html5/thumbnails/47.jpg)
Iterate:Multiple communication
cycles are required.
![Page 48: Design for Lawyers : Why UI Can Make You a Better Attorney](https://reader033.fdocuments.net/reader033/viewer/2022051400/554c31acb4c90513198b5369/html5/thumbnails/48.jpg)
Part Two
Usability Rules + Guidelines for Websites and Beyond
![Page 49: Design for Lawyers : Why UI Can Make You a Better Attorney](https://reader033.fdocuments.net/reader033/viewer/2022051400/554c31acb4c90513198b5369/html5/thumbnails/49.jpg)
Most web pages are garbage,
and users know it.
![Page 50: Design for Lawyers : Why UI Can Make You a Better Attorney](https://reader033.fdocuments.net/reader033/viewer/2022051400/554c31acb4c90513198b5369/html5/thumbnails/50.jpg)
10 Seconds
![Page 51: Design for Lawyers : Why UI Can Make You a Better Attorney](https://reader033.fdocuments.net/reader033/viewer/2022051400/554c31acb4c90513198b5369/html5/thumbnails/51.jpg)
Time on a Web Page vs Probability of Leaving
Time Visiting the Page So Far (Seconds)
Prob
abilit
y of
Lea
ving
the
Page
Now
0 20 40 60 80 100 1200%
1%
2%
3%
4%
5%
Source: http://www.useit.com/alertbox/page-abandonment-time.html
![Page 52: Design for Lawyers : Why UI Can Make You a Better Attorney](https://reader033.fdocuments.net/reader033/viewer/2022051400/554c31acb4c90513198b5369/html5/thumbnails/52.jpg)
First Rule of Usability:Don’t make me think.
![Page 53: Design for Lawyers : Why UI Can Make You a Better Attorney](https://reader033.fdocuments.net/reader033/viewer/2022051400/554c31acb4c90513198b5369/html5/thumbnails/53.jpg)
The more obvious something is, the better. Lots of little decisions and
indecisiveness add up.
![Page 54: Design for Lawyers : Why UI Can Make You a Better Attorney](https://reader033.fdocuments.net/reader033/viewer/2022051400/554c31acb4c90513198b5369/html5/thumbnails/54.jpg)
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.
![Page 55: Design for Lawyers : Why UI Can Make You a Better Attorney](https://reader033.fdocuments.net/reader033/viewer/2022051400/554c31acb4c90513198b5369/html5/thumbnails/55.jpg)
Third Rule of Usability:Get rid of half the words on a page, then get rid of half of
what’s left.
![Page 56: Design for Lawyers : Why UI Can Make You a Better Attorney](https://reader033.fdocuments.net/reader033/viewer/2022051400/554c31acb4c90513198b5369/html5/thumbnails/56.jpg)
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.
![Page 57: Design for Lawyers : Why UI Can Make You a Better Attorney](https://reader033.fdocuments.net/reader033/viewer/2022051400/554c31acb4c90513198b5369/html5/thumbnails/57.jpg)
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.
Usability Rules
![Page 58: Design for Lawyers : Why UI Can Make You a Better Attorney](https://reader033.fdocuments.net/reader033/viewer/2022051400/554c31acb4c90513198b5369/html5/thumbnails/58.jpg)
Fact of Life #1:We don’t read pages.
We scan them.
![Page 59: Design for Lawyers : Why UI Can Make You a Better Attorney](https://reader033.fdocuments.net/reader033/viewer/2022051400/554c31acb4c90513198b5369/html5/thumbnails/59.jpg)
![Page 60: Design for Lawyers : Why UI Can Make You a Better Attorney](https://reader033.fdocuments.net/reader033/viewer/2022051400/554c31acb4c90513198b5369/html5/thumbnails/60.jpg)
Fact of Life #2:We don’t make optimal choices. We satisfice.
![Page 61: Design for Lawyers : Why UI Can Make You a Better Attorney](https://reader033.fdocuments.net/reader033/viewer/2022051400/554c31acb4c90513198b5369/html5/thumbnails/61.jpg)
Satisfice = Satisfy + Suffice
![Page 62: Design for Lawyers : Why UI Can Make You a Better Attorney](https://reader033.fdocuments.net/reader033/viewer/2022051400/554c31acb4c90513198b5369/html5/thumbnails/62.jpg)
Studies have shown we take the first reasonable course of action, not
the best of all possible choices.
![Page 63: Design for Lawyers : Why UI Can Make You a Better Attorney](https://reader033.fdocuments.net/reader033/viewer/2022051400/554c31acb4c90513198b5369/html5/thumbnails/63.jpg)
Fact of Life #3:We don’t figure out how
things work. We muddle through.
![Page 64: Design for Lawyers : Why UI Can Make You a Better Attorney](https://reader033.fdocuments.net/reader033/viewer/2022051400/554c31acb4c90513198b5369/html5/thumbnails/64.jpg)
People succeed in using things in ways they weren’t designed to be
used, but it’s inefficient and error-prone.
![Page 65: Design for Lawyers : Why UI Can Make You a Better Attorney](https://reader033.fdocuments.net/reader033/viewer/2022051400/554c31acb4c90513198b5369/html5/thumbnails/65.jpg)
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.
Facts of Life
![Page 66: Design for Lawyers : Why UI Can Make You a Better Attorney](https://reader033.fdocuments.net/reader033/viewer/2022051400/554c31acb4c90513198b5369/html5/thumbnails/66.jpg)
Are navigation conventions used?
![Page 67: Design for Lawyers : Why UI Can Make You a Better Attorney](https://reader033.fdocuments.net/reader033/viewer/2022051400/554c31acb4c90513198b5369/html5/thumbnails/67.jpg)
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 IDTagline
CTA
![Page 68: Design for Lawyers : Why UI Can Make You a Better Attorney](https://reader033.fdocuments.net/reader033/viewer/2022051400/554c31acb4c90513198b5369/html5/thumbnails/68.jpg)
Is the site ID on every page and is
it prominently located?
SITE ID
![Page 69: Design for Lawyers : Why UI Can Make You a Better Attorney](https://reader033.fdocuments.net/reader033/viewer/2022051400/554c31acb4c90513198b5369/html5/thumbnails/69.jpg)
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 IDTagline
![Page 70: Design for Lawyers : Why UI Can Make You a Better Attorney](https://reader033.fdocuments.net/reader033/viewer/2022051400/554c31acb4c90513198b5369/html5/thumbnails/70.jpg)
Is the tagline good?
Good = Clear and informativeOhio Workers Compensation Attorney
Bad = VagueDefending Your Rights
![Page 71: Design for Lawyers : Why UI Can Make You a Better Attorney](https://reader033.fdocuments.net/reader033/viewer/2022051400/554c31acb4c90513198b5369/html5/thumbnails/71.jpg)
Is it obvious what’s clickable?
Buttons should look like buttons.
Links should look like links.
Triangular arrows: towards link
![Page 72: Design for Lawyers : Why UI Can Make You a Better Attorney](https://reader033.fdocuments.net/reader033/viewer/2022051400/554c31acb4c90513198b5369/html5/thumbnails/72.jpg)
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?
![Page 73: Design for Lawyers : Why UI Can Make You a Better Attorney](https://reader033.fdocuments.net/reader033/viewer/2022051400/554c31acb4c90513198b5369/html5/thumbnails/73.jpg)
Is there a clear visual hierarchy on
each page?
The more important something is, the more prominent
it is.
More Important
Important
Less Important
![Page 74: Design for Lawyers : Why UI Can Make You a Better Attorney](https://reader033.fdocuments.net/reader033/viewer/2022051400/554c31acb4c90513198b5369/html5/thumbnails/74.jpg)
Is there a clear visual hierarchy on
each page?
Things are nested (inside one another)
to visually show what’s part of what.
Title Here
![Page 75: Design for Lawyers : Why UI Can Make You a Better Attorney](https://reader033.fdocuments.net/reader033/viewer/2022051400/554c31acb4c90513198b5369/html5/thumbnails/75.jpg)
Is your site noisy?
Many users have low tolerance for complexity and distractions.
![Page 76: Design for Lawyers : Why UI Can Make You a Better Attorney](https://reader033.fdocuments.net/reader033/viewer/2022051400/554c31acb4c90513198b5369/html5/thumbnails/76.jpg)
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?
Website Usability Questions
![Page 77: Design for Lawyers : Why UI Can Make You a Better Attorney](https://reader033.fdocuments.net/reader033/viewer/2022051400/554c31acb4c90513198b5369/html5/thumbnails/77.jpg)
Pursue ClarityPursue SimplicityPursue Perfection