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

UI = User Interface

Bad UI’s Kill Kittens

Good UI is not just about...

Typography

Flow

Balance

Color

The Rule of Thirds

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

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

User Interfaces make things usable

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.

Problem: Our Methodology Explained v 1.0

Our Methodology Explained v 2.0

Our Methodology Explained v 2.0

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.

Selling a Home v 2.0

© 2013 Metzger, Metzger, & Metzger P.A. All Rights Reserved.

Selling a Home v 3.0

© 2013 Metzger, Metzger, Metzger, & Metzger P.A. All Rights Reserved.

3. Good UI builds trust.

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

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

5. Good UI will help you market better.

6. UI is about pursuing perfection.

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?

Exercise 1:Identify a situation in your

practice where communication is a critical

challenge.

Part One

Let’s learn how to think like a designer

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.

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.”

Conceptual Model:“If I open and close my

hand, the thing will work”

Conceptual Model:“That thing is not going to

work.”

Mental Model:“Based on my life experience, this is how it’s supposed

to work.”

Broken Mental Model:The thermostat does not

work as we think it should.

Mapping:The relationship between two things, i.e. a steering

wheel and control of a car.

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

Feedback:“Did my action have any

effect?”

Our Goal:Align our mental model with that of our client

My mental model My client’s

Our Goal:Our UI should closely

match our mental models

My mental model My client’s

System

How do we align our mental models:

Develop personas

Chad Burton...

¿Que haces esta

noche?

Exercise 2:Using the output of exercise 1, identify a

persona and try to identify their mental model for the

situation.

Iterate:Multiple communication

cycles are required.

Part Two

Usability Rules + Guidelines for Websites and Beyond

Most web pages are garbage,

and users know it.

10 Seconds

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

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

The more obvious something is, the better. Lots of little decisions and

indecisiveness add up.

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.

Third Rule of Usability:Get rid of half the words on a page, then get rid of half of

what’s left.

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.

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

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

We scan them.

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

Satisfice = Satisfy + Suffice

Studies have shown we take the first reasonable course of action, not

the best of all possible choices.

Fact of Life #3:We don’t figure out how

things work. We muddle through.

People succeed in using things in ways they weren’t designed to be

used, but it’s inefficient and error-prone.

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

Are navigation conventions used?

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

Is the site ID on every page and is

it prominently located?

SITE ID

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

Is the tagline good?

Good = Clear and informativeOhio Workers Compensation Attorney

Bad = VagueDefending Your Rights

Is it obvious what’s clickable?

Buttons should look like buttons.

Links should look like links.

Triangular arrows: towards link

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?

Is there a clear visual hierarchy on

each page?

The more important something is, the more prominent

it is.

More Important

Important

Less Important

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

Is your site noisy?

Many users have low tolerance for complexity and distractions.

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

Pursue ClarityPursue SimplicityPursue Perfection

Thank You!

larry@rocketmatter.com@larryport