Communication with Flexible Documentation - IxDA Miami 2014

Communication with Flexible Documentation

Jon Hadden @niceux niceux.com

Effective communication and efficient workflow for today’s web designers

http://niceux.com

33 years ago…

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

33 years ago…

https://www.threadless.com/product/4762/Birth_of_a_Legend?clickid=wNURg434aQb1XWz0gyS-vWzRUkQytrSpTwulzc0&utm_campaign=59129&utm_medium=affiliate&utm_source=ImpactRadius

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

https://www.threadless.com/product/4762/Birth_of_a_Legend?clickid=wNURg434aQb1XWz0gyS-vWzRUkQytrSpTwulzc0&utm_campaign=59129&utm_medium=affiliate&utm_source=ImpactRadius

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/

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.

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










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

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

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

Notes



Transactions

3-5 seconds

Notes

Invoice Notes



Transactions

3-5 seconds

Notes

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/

http://www.wsol.com/a-more-flexible-workflow/

Concept Direction 1

30 Wireframes

Concept Direction 2 Concept Direction 3

20 PSDs

Large

20 Wireframes 10 PSDs

Medium


Small


X-Small









Concept Direction 1

30 Wireframes


20 PSDs

Large


Medium


Small


X-Small









Concept Direction 1

30 Wireframes


20 PSDs

Large


Medium


Small


X-Small









Concept Direction 1

30 Wireframes


20 PSDs

Large


Medium


Small


X-Small









Concept Direction 1

30 Wireframes


20 PSDs

Large


Medium


Small


X-Small









Concept Direction 1

30 Wireframes


20 PSDs

Large


Medium


Small


X-Small









Concept Direction 1

30 Wireframes


20 PSDs

Large


Medium


Small


X-Small









Concept Direction 1

30 Wireframes


20 PSDs

Large


Medium


Small


X-Small









Concept Direction 1

30 Wireframes


20 PSDs

Large


Medium


Small


X-Small









Concept Direction 1

30 Wireframes


20 PSDs

Large


Medium


Small


X-Small









1. Nights and weekends.

Concept Direction 1

30 Wireframes


20 PSDs

Large


Medium


Small


X-Small









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

times … just because.

Concept Direction 1

30 Wireframes


20 PSDs

Large


Medium


Small


X-Small










times … just because. 3. File names like:

204_OH_PortalRedesign_wireframes_FINAL_DRAFT_FINAL.graffle

Concept Direction 1

30 Wireframes


20 PSDs

Large


Medium


Small


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/

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?



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






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.

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

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

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.

s

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

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







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/


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

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.



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


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

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

http://www.amazon.com/Responsive-Design-Workflow-Stephen-Hay/dp/0321887867

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

http://styletil.es/

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

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

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

Me

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!
