85

Simplicity: A Methodology for Design

Embed Size (px)

Citation preview

PowerPoint Presentation

Simplicity:A Methodology For DesignBrady BonusVP User Experience Boston Interactive

Who I am

What is simplicity?

Years ago i realized that the common thread in all great designs was its ability to condense a fully realized message into a clear and simple experience.

Simplicity was always better than complexity when it came to digital and all the digital things we care about: conversion, time to goal, satisfaction & delight - but there wasn't any road map to get there.

knowing it when you see it wasn't good enough, so i sought out a methodology to apply to my work and the result is what you will experience today. its a working hypothesis

1. The quality or condition of being easy to understand or do2. Freedom from complexity, intricacy, or division into parts3. Directness of expression

4. Absenceofluxury,pretentiousness,ornament,etc.;plainness

Simplicity is not the goal. It is the by-product of a good idea and modest expectations.- Paul Rand

Is it Cleaning House?

total arbitrary removal of EVERYTHING, no choices

total arbitrary removal of EVERYTHING, no choices

is it more Whitespace?

whitespace is an element of design, its not a means towards simplicity.

too much whitespace.

Is it about One thing?

its about just 1 thing

its about just 1 thing

its about just 1 thing

123456789101112131415161718192021222324

its about just 1 thing

is it minimalism?

Design

DecorationProcess of planning the form and structure of a functional object.Process of furnishing or adorning an object with ornamental embellishments(The Rendering of Intent*)*Jared Spool, UX Strategy Means Business

Ive always thought that its about telling the difference between design and decoration. this is important, but isn't enough unto itself

Simplicity is about subtracting the obvious and adding the meaningful.

-John Maeda

definitions, design vs decoration, adding the meaningful..this is is multiple angles to it, but in the end its about this.

Simplicity is easy access to the Things that i Need.

definitions, design vs decoration, adding the meaningful..this is is multiple angles to it, but in the end its about this.

Simplicity is easy access to the Stuff that i want.

definitions, design vs decoration, adding the meaningful..this is is multiple angles to it, but in the end its about this.

Simplicity is easy access to the tasks that i do.

definitions, design vs decoration, adding the meaningful..this is is multiple angles to it, but in the end its about this.

hotel tonight definition - release hotel rooms day of occupancy at 10am

artifact conference - i found and booked in less than 90 seconds.

i encourage you to download this app.

just the information that i need to move forward

a less simple solution might have been to require some sort of text confirmation, a password or a captcha

So how do we create simple experiences?

Reduce. The easiest way to approach a clinical problem is to reduce it to its minimal meaningful expression.Organize. Grouping problems and information make infinite problems appears finite.Time. Decrease time spent in meaningless activities and increasing time on essential tasks.Learn. Knowledge is key, you need to know where to find the answer to any question.Differences. The key is to find what makes a clinical problem different from others and not how to make it fit into a pattern.Context. The environment provides meaning to the problem; not the other way around.Emotion. Use your intuition (quasirrational decision making) and avoid your emotional and cognitive biases.Trust. Less information is better than more information. Subtract the meaningless and add the meaningful.Failure. Use metacognition to learn where the system failed. Learn from your and others mistakes.The-One. Clinical problems are more complex than they look but simpler than you think.

x

1. thoughtful reduction, remove functionality2. group, hide, sort, integrate - make a system of many appear fewer3. savings in time feels simpler, hiding time, creating efficiency4. knowledge of how to use a system makes it feel simpler5. things seem simpler in contrast to complexity6. understanding of where you are provides ease of mind and certainty to task7. use intuition, avoid emotional and cognitive biases8. ease of mind makes things feel simpler9. some things cannot be made simple, (teslers law - theres in an inherent ant of complexity in any system10. im not sure what this one means

3 laws

these 10 laws didn't really apply to digital design space, so i modified this list to create a hypothesis design methodology to test in the wild

ReduceOrganizePrioritize

Simplicity law #1:Reduce

Remove everything except whats necessary, hide where applicable

Perfection is achieved not when there Is nothing more to add, but when there is nothing left to take away.- Antoine de Saint-Exupery

Simplicity law #1: Reduce

Simplicity law #1: Reduce

3%

Simplicity law #1: Reduce

30%

Simplicity law #1: Reduce

Sheena Iyengar, then a doctoral student and now a professor at Columbia Business School, set out pots of jam on supermarket tables in groups of either six or 24. About 30% of those who were given six choices bought some jam; only 3% of those confronted with 24 choices did.

As the psychologist Barry Schwartz demonstrates in The Paradox of Choice, an excess of input leads to angst, indecision, regret, and ultimately lowered satisfaction with both the purchase process and the products themselves

How to design interfaces for choice: Hick-Hyman law and classification for information architecturehicks law

Simplicity law #1: Reduce

Simplicity law #1: Reduce

HICKS LAW - increasing the choices increases the time it takes to make a choice.

too many choices inserted into a users path creates friction, confusion, and frustration.

less confusion, more conversion.

Simplicity law #1: Reduce

Simplicity law #1: Reduce

branding and logo design are always a microcosm to witness the successful employment of reduction

Simplicity law #1: Reduce

Simplicity law #1: Reduce

Simplicity law #1: Reduce

Simplicity law #1: Reduce

Simplicity law #1: Reduce

Simplicity law #1: Reduce

Simplicity law #1: Reduce

Simplicity law #1: Reduce

iOS 7 icons

you dont have to go far to find complex inspiration in digital

Simplicity law #1: Reduce

its about just 1 thing

Simplicity law #1: Reduce

its about just 1 thing

Simplicity law #1: Reduce

its about just 1 thing

HOW MANY PEOPLE THINK THIS IS A GOOD DESIGN?

2012

superfluous: bg image, left ribbon icon, browse word BGs, popular box icons, even search copy sitting outside search box

Simplicity law #1: Reduce

easy access to the stuff i need

Simplicity Rule #2:Organize

group, hide, sort, integrate - make a system of many appear fewercombine content & functionsconceal similar content behind other contentestablish repeatable, recognizable patterns that require very little discovery for interaction

Simplicity law #2: organize

other examples of grouping: carousel to stack news behind one anotherimage galleries instead of image mosaicscollecting sharing and social icons in a similar place on a page, or behind a single iconcombining link options - the headline, a button, and a read more link are often one visual cue

Simplicity law #2: organize

Simplicity law #2: organize

reduced functionality, designed to fit the hand, popular controls designed for the thumbs

Simplicity law #2: organize

Simplicity law #2: organize

Paradox of ChoiceSome choice is better than none, but it doesn't follow that more choice is better than some.

Barry Schwartz, The Paradox of Choice

Simplicity law #2: organize

Barry schwartz has a great body of work around the paradox of choice.

Every additional choice increases expectations, and always reduces satisfaction

Opportunity costs subtracts from satisfaction even if the choice that was made was optimal

Opportunity Costs - the loss of potential gain from other alternatives when one alternative is chosen".

Simplicity law #2: organize

it comes in a BINDER

Simplicity law #2: organize

ill have the DINNER please.

the difference between asking your kids what they want for breakfast and telling they can have cereal or toast. less angst, happier kids.

Barry Schwartz, The Paradox of ChoiceThe secret to happiness is low expectations. Everybody needs a fishbowl.

Simplicity law #2: organize

Our fishbowl in this case, is a web experience

i should rename this talk - Designing for Fishbowls

Simplicity Law #3:Prioritize

Assemble what remains into a clear hierarchy

Simplicity law #3: prioritize

2222222221112006

Simplicity law #3: prioritize

112222223332009

Simplicity law #3: prioritize

1232014

Simplicity law #3: prioritize

2014

Simplicity law #3: prioritize

Simplicity law #3: prioritize

can't i just apply these rules to my existing stuff?

"When you start looking at a problem and it seems really simple, you dont really understand the complexity of the problem. Then you get into the problem, and you see that its really complicated, and you come up with all these convoluted solutions. Thats sort of the middle, and thats where most people stop. But the really great person will keep on going and find the key, the underlying principle of the problem and come up with an elegant, really beautiful solution that works."- Steve Jobs

SIMPLEComplexSimple

Start ThinkingComplicated middleSimple solutionDiscovery

Thoughtful reductionPrioritizationSystem of organization

process

ingredients

???

The art of thoughtful reduction and simplification is great, but its not a place to start.this is all wasted if you don't start with the right collection of stuff to apply these rules to

ingredients

???USER EXPERIENCE requirementsInterviews

Content Inventory

Personas

Audience Goal KPI BreakdownUse Cases

Journey Maps

Process Maps

Flow Diagrams

Competitive Analysis

SEO, SEM Analysis

Analytics

USER EXPERIENCE requirements

Technical requirements documentation

Audience Task & KPIs

Content Documentation

Sitemap

Wireframes

Design ArtifactsUSER EXPERIENCE requirements

Content DocumentationReduce

Organize

Prioritize1

2

3

Design Artifacts: content

Apply method within word doc at a high level (categories, taxonomy) and a more detailed level (pages, components Write for the web

Design Artifacts: WIREFRAMES

Reduce

Organize

Prioritize1

2

3

Simplify the UX & choicesMap to audience documentationEnsure simplification of pages, not just strategy

AKA every things important to someone

Reduce

Organize

Prioritize1

2

3

Design Artifacts: Visual design

Every design element has a purposeShadows, lifted papers, gradients, lines, strokes, copy, navigation, images Get out of the way

ReduceOrganizePrioritize

I wouldn't give a fig for the simplicity on this side of complexity; I would give my right arm for the simplicity on the far side of complexity.- Oliver Wendell Holmes, Sr.

Had I but more time, I would have written less.- Mark Twain

Thank you very little.- Ty Webb

Thank You

[email protected]@bradybonus

appendix

The Elements of Typographic Style Applied to the Web

http://amzn.to/10yNHja

The Elements of Typographic Style

Letting Go of the Words

http://amzn.to/1eAx4UXhttp://webtypography.net/toc/