design for lawyers : why ui can make you a better attorney

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

Upload: rocket-matter-llc

Post on 08-May-2015

1.175 views

Category:

Education


0 download

DESCRIPTION

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.

TRANSCRIPT

Page 1: Design for Lawyers : Why UI Can Make You a Better Attorney

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
Page 3: Design for Lawyers : Why UI Can Make You a Better Attorney

UI = User Interface

Page 4: Design for Lawyers : Why UI Can Make You a Better Attorney

Bad UI’s Kill Kittens

Page 5: Design for Lawyers : Why UI Can Make You a Better Attorney

Good UI is not just about...

Page 6: Design for Lawyers : Why UI Can Make You a Better Attorney

Typography

Page 7: Design for Lawyers : Why UI Can Make You a Better Attorney

Flow

Page 8: Design for Lawyers : Why UI Can Make You a Better Attorney

Balance

Page 9: Design for Lawyers : Why UI Can Make You a Better Attorney

Color

Page 10: Design for Lawyers : Why UI Can Make You a Better Attorney

The Rule of Thirds

Page 11: Design for Lawyers : Why UI Can Make You a Better Attorney
Page 12: Design for Lawyers : Why UI Can Make You a Better Attorney

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

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

User Interfaces make things usable

Page 15: Design for Lawyers : Why UI Can Make You a Better Attorney

How can UI help you become a better

lawyer?

Page 16: Design for Lawyers : Why UI Can Make You a Better Attorney

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

2. Good UI improves your communication.

Page 18: Design for Lawyers : Why UI Can Make You a Better Attorney

Problem: Our Methodology Explained v 1.0

Page 19: Design for Lawyers : Why UI Can Make You a Better Attorney

Our Methodology Explained v 2.0

Page 20: Design for Lawyers : Why UI Can Make You a Better Attorney

Our Methodology Explained v 2.0

Page 21: Design for Lawyers : Why UI Can Make You a Better Attorney

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

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

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

3. Good UI builds trust.

Page 25: Design for Lawyers : Why UI Can Make You a Better Attorney
Page 26: Design for Lawyers : Why UI Can Make You a Better Attorney

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

Page 27: Design for Lawyers : Why UI Can Make You a Better Attorney

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

Page 28: Design for Lawyers : Why UI Can Make You a Better Attorney

5. Good UI will help you market better.

Page 29: Design for Lawyers : Why UI Can Make You a Better Attorney

6. UI is about pursuing perfection.

Page 30: Design for Lawyers : Why UI Can Make You a Better Attorney

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

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

Part One

Let’s learn how to think like a designer

Page 33: Design for Lawyers : Why UI Can Make You a Better Attorney

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

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

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

Conceptual Model:“That thing is not going to

work.”

Page 37: Design for Lawyers : Why UI Can Make You a Better Attorney

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

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

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

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

Page 41: Design for Lawyers : Why UI Can Make You a Better Attorney

Feedback:“Did my action have any

effect?”

Page 42: Design for Lawyers : Why UI Can Make You a Better Attorney

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

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

How do we align our mental models:

Develop personas

Page 45: Design for Lawyers : Why UI Can Make You a Better Attorney

Chad Burton...

¿Que haces esta

noche?

Page 46: Design for Lawyers : Why UI Can Make You a Better Attorney

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

Iterate:Multiple communication

cycles are required.

Page 48: Design for Lawyers : Why UI Can Make You a Better Attorney

Part Two

Usability Rules + Guidelines for Websites and Beyond

Page 49: Design for Lawyers : Why UI Can Make You a Better Attorney

Most web pages are garbage,

and users know it.

Page 50: Design for Lawyers : Why UI Can Make You a Better Attorney

10 Seconds

Page 51: Design for Lawyers : Why UI Can Make You a Better Attorney

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

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

Page 53: Design for Lawyers : Why UI Can Make You a Better Attorney

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

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

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

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

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

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
Page 60: Design for Lawyers : Why UI Can Make You a Better Attorney

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

Satisfice = Satisfy + Suffice

Page 62: Design for Lawyers : Why UI Can Make You a Better Attorney

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

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

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

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

Are navigation conventions used?

Page 67: Design for Lawyers : Why UI Can Make You a Better Attorney

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

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

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

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

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

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

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

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

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

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

Pursue ClarityPursue SimplicityPursue Perfection

Page 78: Design for Lawyers : Why UI Can Make You a Better Attorney

Thank You!

[email protected]@larryport