Communication with Flexible Documentation

Jon Hadden @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)

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

Hi, my name is Jon.

NiceUX

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

Hi, my name is Jon.

NiceUX

Photo Credits: http://toparkornottopark.com/

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

Pay attention to contextual information. Be efficient. Remain flexible and adapt to surroundings. 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

Story time

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

~ 5 minutes per approved invoice

Photo Credits: Dennis Kardys http://www.wsol.com/a-more-flexible-workflow/

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

Photo Credits: Dennis Kardys http://www.wsol.com/a-more-flexible-workflow/

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.

Utilize collaborative, cross-functional sketch sessions to gain buy-in and converge on design concepts together.

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

@niceux #leandocs

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;

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

@niceux

Thank you!

Communication with Flexible Documentation - IxDA Miami 2014

Transcript of Communication with Flexible Documentation - IxDA Miami 2014

Communication with Flexible Documentation - IxDA Miami 2014

Design

Transcript of Communication with Flexible Documentation - IxDA Miami 2014

IxDA Taiwan 6th slide

Journey Mapping 101 - IxDA Phoenix

Agile Design - Chicago IXDA Presentation

Interaction15 redux — IxDA Lyon

Building Learning Experiences (IxDA 2015 Education Summit)

Ux Week 15 redux for IxDA Sydney

Strategic Design Workshops, IXDA Munich

Designing Frictionless Experiences - IxDA Grand Rapids

IXD14 - Recap for IxDA Chicago Redux

IxDA BA Mobile 20 julio 2010

Brief History of IxDA

Sketchnoting IxDA 2012

Chicago IxDA Interaction14 Conference Takeaways

Strategic Design Workshop and Tools, IXDA Munich

Ixda Taiwan 7th Party

IxDA Chicago Mobile Site by Svetlin Denkov

IxDA State College: Processes

HTML Prototyping - IxDA Presentation

Play & Embodiment @ IxDA Interaction 09

IxDA Portland - Is It Usable yet?