Designing with Patterns

UnderstandingPatterns

HOSTILE SHEEPresearch & design

Designing with

PatternsAn Introduction

2hr version

Fri Jun 16 2017

www.understandingpatterns.comwww.hostilesheep.com

WHO SHOULD ATTEND & WHAT YOU WILL LEARN

YOU’LL LEARNFOR DESIGNERS

⁃ What digital products are.⁃ What design patterns are.⁃ Why design patterns should be used.⁃ How to begin using design patterns.⁃ Who should be responsible for UX.

A person who determines how something looks or works. Design decisions are often made by people who aren’t officially identified as a designer. This is for those people too.

PRODUCTSgoods and services brought to market

goods services

PRODUCTS ARE TYPICALLY PHYSICAL OR INVISIBLE; GOODS ARE PHYSICAL AND SERVICES ARE INVISIBLE.

DIGITAL PRODUCTS ARE A NEW CLASS OF PRODUCT. THESE PRODUCTS ARE BOTH VISIBLE AND INVISIBLE.


goods services

digital


goods services

digital

website

app

game

kiosk

VR/AR

“Each pattern describes a problem which occurs over and over again in our environment, and then describes the core of the solution to that problem in such a way that you could use this solution a million times over without doing it the same way twice"

page 6

PATTERN DESIGN FROMCHRISTOPHER ALEXANDER

ALEXANDER COMES FROM AN ARCHITECTURAL BACKGROUND

Alexander intended that patterns answer questions such as "Where should I place a terrace?" "How should I design the front entrance?" or even "How should I organize my community?"

HIS 1977 WORK A PATTERN LANGUAGE INSPIRED THE USE OF PATTERNS IN SOFTWARE DESIGN.

STRUCTURAL BEHAVIOURAL

CREATIONAL

Software development patterns are NOT design patterns

PATTERNS HELP US UNDERSTAND THE WORLD.

The Understanding Patterns initiative was created by Hostile Sheep to introduce product designers to the concept of UX design patterns.

research & designpage 14

DIGITAL PRODUCTS HAVE UNIQUE PATTERNS


Navigation

Home Page Hero

Home Page Promospage 18


page 19


Home Page Hero

Home Page Promospage 20


page 22

Navigation

Home Page Promos

Home Page Hero

page 22

Navigation

Home Page Hero

Home Page Promos

Navigation Navigation

Home Page Hero Home Page Hero

Home Page Promos Home Page Promos

These patterns appear so often they’ve become easy for most people to understand. People have started calling this pattern the Wordpress homepage pattern, because many Wordpress themes use this type of home page pattern.

This is one of hundreds of patterns we use regularly. Lets explore more of these patterns.

WHAT YOU’LL NEED

People

Time

Equipment

+

WHAT TO DO

min. 20 mins

paper, markers, computer

Instructions

WHAT YOU’LL NEED

People

Time

Equipment

+min. 20 mins

writing surface, markers, timer, patterns

Most designers already use design patterns, but may not be consciously aware of it. When we understand how/when to use various design patterns, we can begin accepting ownership of our design decisions on the user experience.

page 24

PATTERN PICTIONARY

Divide the room into two teams, like typical pictionary. Teams take turns sending one member up to draw, while the rest of the team guesses.

The drawer will select a pattern and must get someone from his team to guess the pattern.

If a team can not guess the pattern during the allotted time, the opposing team may make one guess to steal the point. First to 5 points win.

WHAT TO DO

UNTIL YOU CAN OBSERVE PEOPLE USING YOUR PRODUCT,DESIGN IS JUST A BUNCH OF GUESSES

Even the most empathic designer can’t anticipate every way people will use a product. This is what user research and testing is for.

Products aren’t static. They must evolve to stay relevant.

GETTING FAMILIAR WITH USERS OFTEN LEADS DESIGN IN THE WRONG DIRECTION.

People have needs but sometimes it’s hard to express a need. When needs go unexpressed, they become latent needs. These are the hardest kinds of needs to identify through research.

Another approach to discover needs is by focusing on what the user wants to accomplish. These are called desired outcomes or jobs. Many people have difficulty expressing needs, but most can articulate a desired outcome.

WHAT YOU’LL NEED

People

Time

Equipment

+

WHAT TO DO

min. 20 mins

paper, markers, computer

Instructions

WHAT YOU’LL NEED

People

Time

Equipment

+min. 10 mins

paper, markers, computer, projector

The facilitator will display a website or app and ask the group to write down the motivation(s) they think the design appeals to.

If a computer/projector isn’t available print-outs of the various websites/apps can be posted around the room. Members of the group can then use post-it notes to indicate the motivation they associate with with design(s).

Discuss reasons certain design patterns appeal to certain motivations.

Intrinsic Motivationscuriosityfunpowerfulfillmentpridedesire to learnprogresscontactstatus

Extrinsic Motivationspraise painpleasurerewardfear

page 27

WHAT MOTIVATES YOU?

WHAT TO DO

A DESIGN CAN BE EXPERIENCED, BUT AN EXPERIENCE CAN’T BE DESIGNED… OR CAN IT?

If a designer can predict the way a person will behave when using a product, the experience can be anticipated and designed. While every person may have a unique experience, the variance between experiences can be modelled and shaped. This is predictable behaviour.

GETTING INTO A CAR

page 29

Determine handle type Open Door Get in

Locate handle

Inspect handle

Unlock Turn handle

Pull door Sit down Adjust seat

IF I THROW A BASEBALL AT YOU, I CAN PREDICT THAT YOU WILL EITHER CATCH IT OR LET IT FALL.A design artifact, called mental models, illustrate predictable behaviour to ensure designers are building products that help users achieve their desired outcomes

WHAT YOU’LL NEED

People

Time

Equipment

+min. 20 mins

paper, markers, scenarios, classes and objects

Patterns consist of objects and classes. In this exercise, the team(s) will work together to build a shopping app. Unique scenarios will be distributed by the facilitator. Each team must use the provided objects and classes to design an app.

The team will evaluate the app(s) together, determining whether the most appropriate patterns were used & how the app(s) could be optimized over time.

page 30

Objects

Class

blue box with top grey full box blue empty box

full boxes

SHOPPING WITH OBJECTS AND CLASSES: CO-CREATION

WHAT TO DO

DIGITAL PRODUCTS USE SIMILAR PATTERNS BECAUSE THEY WORK. THESE PATTERNS BECOME STANDARD CONVENTIONS FOR TWO REASONS:

NO.2POPULARITY

Many digital products are popular-enough they can establish standard conventions on their own. Even less intuitive patterns can become standard when popular products use them consistently.

NO.1INTUITIVENESS

Users take rules they’ve learned from other products and often expect them to apply to all similar products. By using patterns users already understand, they do not have to re-learn how to use your product.

Empathy is an important skill but it’s vastly misunderstood in design. Many people think empathic design means adopting the mindset of a user; they couldn’t be more wrong.

In design, empathy involves user research. Empathy-based design is simply using those research insights to guide the design.

page 32

WHAT YOU’LL NEED

People

Time

Equipment

+

WHAT TO DO

min. 20 mins

paper, markers, timer, buzzer.

Select someone to be the first subject; this wil l be the person the rest of the group tries to match with.

The facil itator wil l read out scenarios with a gap. For instance “I use the blank app to bid on products, but today I chose to use the buy it now button.” The subject and the group will write down a guess that could fi l l the gap in the scenario.

Each match gives 1 point to the subject and group-member. The group will cycle through subjects.

First person with 5 points wins.

MATCH GAME: EMPATHY-BASED DESIGN

PATTERN REFERENCE LIBRARIES AREN’T NEW. HERE ARE A FEW WE LIKE.

⁃ BBC Global Experience Language(http://www.bbc.co.uk/gel)

⁃ A List Apart Pattern Library(http://patterns.alistapart.com/)

⁃ Yelp Style Guide(https://www.yelp.com/styleguide)

⁃ Gov UK Design Library(http://govuk-elements.herokuapp.com/)

⁃ Mailchimp UX Library(http://ux.mailchimp.com/patterns)

⁃ Google Material Design(https://material.io/)

⁃ iOS Guidelines(https://developer.apple.com/ios/human-interface-guidelines)

PATTERN LIBRARIES, GUIDELINES AND STYLE GUIDES FROM OUR FAVOURITE BRANDS.

http://www.bbc.co.uk/gel

http://patterns.alistapart.com/

https://www.yelp.com/styleguide

http://govuk-elements.herokuapp.com/

http://ux.mailchimp.com/patterns

https://material.io/guidelines/material-design/introduction.html

https://developer.apple.com/ios/human-interface-guidelines/overview/design-principles/

THANK YOUQUESTIONS?

request a workshop:

[email protected]@hostilesheep.com

UnderstandingPatterns

Designing with Patterns

Design

Transcript of Designing with Patterns