communication with flexible documentation edmonton ux camp 2014

Communication with Flexible Documentation

Jon Hadden #UXCamp @niceux niceux.com

Effective communication and efficient workflow for today’s web designers

33 years ago…

Birth of A Legend designed by Jakub Gruber (Buy this t-shirt)

33 years ago…

Birth of A Legend designed by Jakub Gruber (Buy this t-shirt)

Hi, my name is Jon.I am an American

Hi, my name is Jon.I am an Minnesotan-American

I love information architecture, observing human behavior, front-end development and helping people enjoy the web.

Hi, my name is Jon.

NiceUX

I love information architecture, observing human behavior, front-end development and helping people enjoy the web.

Hi, my name is Jon.

NiceUX

Photo Credits: http://www.smashingmagazine.com/wp-content/uploads/2011/12/7.jpg

1. Be efficient.

1. Be efficient. 2. Remain flexible and adapt to

surroundings.

1. Be efficient. 2. Remain flexible and adapt to

surroundings. 3. Find the best way to effectively

communicate to your audience.

The approach and manner in which you tell a story, influences an audience’s perception of that story’s value.

Photo Credits: http://www.bbc.co.uk/blogs/legacy/bbcinternet/2012/06/bbc_tv_channel_homepages_redes.html

@niceux #UXCamp

Story timeThe project that broke the narwhal’s back

Approve an invoice• Performed multiple times per day, every day. • User’s end of the year bonus depended upon

number of non-error approvals. • Used by 40-60 year olds who don’t use their

computers besides to check in over email or Facebook with their college aged kids.

• Primarily used at a desktop PC, using IE7 • Originally built as desktop application, and 10 yr

old code was “dropped” into a web version.

4 things needed to approve an invoice without error

1. Invoice Amount 2. Bill Amount 3. Route Details 4. Associated Notes

Invoice List

Invoice Amount

3-5 seconds

Invoice List

Invoice Amount

3-5 seconds

Invoice List

Invoice Amount

3-5 seconds

Bill Amount

Invoice List

Invoice Amount

3-5 seconds

Bill Amount

Invoice List

Invoice Amount

3-5 seconds

Bill Amount Route Details

Invoice List

Invoice Amount

3-5 seconds

Bill Amount Route Details

Transactions~ 6 seconds

Transactions

3-5 seconds

Invoice Notes

Transactions

3-5 seconds

Invoice Notes

Transactions Notes

Invoice Notes

~ 6 seconds

Transactions Notes

Invoice Notes

~ 2 minutes per approved invoice

User Research & Analysis Personas Information Architecture Measurement & Iteration Build & Maintain

Concept Direction 1

30 Wireframes

Concept Direction 2 Concept Direction 3

20 PSDs

20 Wireframes 10 PSDs

Medium

X-Small

Concept Direction 1

30 Wireframes

20 PSDs

Medium

X-Small

Concept Direction 1

30 Wireframes

20 PSDs

Medium

X-Small

Concept Direction 1

30 Wireframes

20 PSDs

Medium

X-Small

Concept Direction 1

30 Wireframes

20 PSDs

Medium

X-Small

Concept Direction 1

30 Wireframes

20 PSDs

Medium

X-Small

Concept Direction 1

30 Wireframes

20 PSDs

Medium

X-Small

Concept Direction 1

30 Wireframes

20 PSDs

Medium

X-Small

Concept Direction 1

30 Wireframes

20 PSDs

Medium

X-Small

Concept Direction 1

30 Wireframes

20 PSDs

Medium

X-Small

1. Nights and weekends.

Concept Direction 1

30 Wireframes

20 PSDs

Medium

X-Small

1. Nights and weekends. 2. Changing the same thing a billion

times … just because.

Concept Direction 1

30 Wireframes

20 PSDs

Medium

X-Small

times … just because. 3. File names like:

204_OH_PortalRedesign_wireframes_FINAL_DRAFT_FINAL.graffle

Concept Direction 1

30 Wireframes

20 PSDs

Medium

X-Small

times … just because. 3. File names like:

204_OH_PortalRedesign_wireframes_FINAL_DRAFT_FINAL.graffle

4. Sucking at life.

NOPEPhoto Credits: http://catswallpaperhd.us/cat/grumpy-cat-clipart-hd/attachment/grumpy-cat-clipart-hd-download-new-grumpy-cat-cartoon-free-wallpaper-x-full-hd-pictures/

1. Where are opportunities to reduce misinterpretation when viewing a design?

Considering the variables:

2. How can I make my process more efficient, or reduce the amount of work I need to do in order to get everyone from point A to B?

3. Can I increase the portability of my documentation?

Approach the cognitive load of consuming and creating your documentation like you would the usability of an app.

@niceux #UXCamp

As a designer1. Conceptual Design

• Strategy & Concept Convergence 2. Content Strategy & IA

• Substance & Structure of Content • Environment, Organization, Portability and Structural Layout

3. Interaction Design • Types of Interactions, States and Transitions

4. Visual Design • Element Design

As a developer1. Environments 2. Data Binding 3. Content Delivery 4. Modular Elements

Participatory Conceptual Design means involving non-designers to the designer tea party.

Photo Credits: http://www.slideshare.net/runger/big-d-sketchingkey

Consider trying the 6-8-5 Sketch Workshop on your next project during the requirements gathering and conceptual brainstorming phase with stakeholders and other team members.

1. Define strategy, context of use and content.

1. Define strategy, context of use and content. 2. Rapidly produce many variations.

1. Define strategy, context of use and content. 2. Rapidly produce many variations. 3. Critique and repeat.

Separate features, assumptions, risks and potential usability points of friction.

Think through high level page flows and the conversation the user will have throughout their experience.

Individually focus on UI elements, potential options for handling information and interaction.

Put it all together.

Tell your story.

Collaborative, cross-functional sketch sessions are the new post-it notes of experience design.

Photo Credits: http://spin.atomicobject.com/2012/04/22/more-takeaways-from-cooper-ux-bootcamp/

@niceux #UXCamp

Content strategists in the digital age need to become data philosophers and explore the metaphysics of content, starting with the question “What is content?”

Rachel Lovinger in 2007: http://boxesandarrows.com/content-strategy-the-philosophy-of-data/

1. Structure and Relationships.Content Modeling

Photo Credits: http://alistapart.com/article/content-modelling-a-master-skill

1. Structure and Relationships. 2. Volume and Details.

Content Modeling

1. Structure and Relationships. 2. Volume and Details. 3. Potential Issues Posed to Design and Development.

Content Modeling

• Artist • Album

• Title • Cover Art • Genres • Songs

• Title • Time • Explicit

Utilizing JSON gives me and rest of the team a flexible, structured, and sharable information set to distribute in various environments.

Information Architecture is the structural design of shared information environments

Wikipedia: http://en.wikipedia.org/wiki/Information_architecture

Realistic Screen Real Estate

Responsive DesignSource Ordering

Major vs. Minor Breakpoints

Photo Credits: http://zurb.com/word/source-order

Edge Cases

Using code for your wireframes gives you realistic detail control. Transitions lasting 250 ms feel a lot different than 750 ms.

@niceux #UXCamp

If you’re using code to prototype, plan ahead for the inevitable request to have it represent the end product.

@niceux #UXCamp

…using the implicit psychology at work in design presentations to our advantage … don’t let the client think you’re further ahead than you actually are.http://www.amazon.com/Responsive-Design-Workflow-Stephen-Hay/dp/0321887867

Stephen Hay

Plan ahead to supplement a coded prototype with annotations, a static PDF of key screens or a how-to guide.

@niceux #UXCamp

[Style tiles are] a catalyst for discussions around the preferences and goals of the client.http://styletil.es/

Samantha Warren

Wireframes and moodboards tend to be too abstract. Perhaps it’s just that I’ve never perfected the art of articulating their purpose, but I find it akin to showing someone a blueprint of their dream house and asking them what curtains would fit well in the space

http://danielmall.com/articles/rif-element-collages/

Dan Mall

Now is my happy time with CSS. In-browser visual tweaks using the inspector and console.

Design Wireframe / Dev

Too much spacing

Incorrect Typeface

Text is too big

Too much spacing

Text isn’t bold, wrong typeface

Not enough “leading”

Too much spacing

Incorrect Typeface

Text is too big

Too much spacing

Text isn’t bold, wrong typeface

Not enough “leading”

Reduce #header’s top-padding to 10px

Add font-weight: bold to nav

Increase padding-top to 300px and reduce margin-top to 100px

Reduce line-height to 1.25em

Add font-family: “Open sans”, Helvetica, sans-serif;

• Involve stakeholders throughout design process so they understand critical thinking

• High level concept creation using sketches • Utilize JSON to make your content modeling portable. • Wireframe in your products natural environment, the

browser, in order to educate your client, identify design nuances and jump start your build.

• Stop with all the Wireframe and PSD decks • Utilize the browser’s inspector to give proper design

direction

Measuring success of a workflow change means answering one question: Does this change make everyone on the team happier?

@niceux #UXCamp

Thank you!

communication with flexible documentation edmonton ux camp 2014

psds20 wireframes

psds30 wireframes

psdslarge20 wireframes

psdsmedium30 wireframes

psdssmall20 wireframes

approvean invoice

invoice amount2

bill amount3

Design

ux field research basics chicago camp 2017

exhibition "digital design:behind the pixels" - ux camp...

the productfield – ux camp hamburg 2015

bussiness model canvas, ux camp 13

the pains of sprinting | ux camp cph 2017

microfeedback - ux camp switzerland

conversion camp: mobile ux, keep it usable

content editors are users too | ux camp amsterdam 2015

presenting to decision makers—ux camp 2017

ux camp europe 2017

ux & product management: ux camp brighton 2012

ux camp brighton 2014 rob pearson 1.1

conversion camp: ux keeping it lean at autotrader

ux camp cph ignite presentation 24 april 2014

ux camp ams-2015- user checks

content first, designing in the browser - ux camp cph

ux boot camp i lossodromici

ux boot camp i pesceluna

big-tent ux (ux camp west 2016)

ux camp why ux matters