Communication with Flexible Documentation

Communication with Flexible Documentation

Jon Hadden @niceux

Effective communication and efficient workflow for today’s web designers

NiceUX

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 information architecture, observing human behavior, front-end development and helping people enjoy the web.

Advisory Board Minneapolis Community Technical College

Independent IA & Development Consultant at NiceUX



…by doing as little thinking as possible.

=

Photo Credits: http://toparkornottopark.com/

Nikki Sylianteng

http://toparkornottopark.com/

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

Pay attention to peripheral information. Be efficient. Remain flexible and adapt to surroundings. Effectively communicate to properly set expectations.

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











Documentation


Responsive web design didn’t create new problems in IA, it amplified the ones that existed.

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

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 4 things needed to approve an invoice


Transactions Notes

Invoice Notes

~ 5 minutes per approved invoice


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

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


@niceux


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

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?

Content Modeling

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. Frequency, Maintenance,

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


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

Wireframes

Realistic Screen Real Estate

Source Ordering

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

Major vs. Minor Breakpoints

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


@niceux #IAS15


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


@niceux #IAS15


Visual Design

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

Samantha Warren

http://styletil.es/

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!

@[email protected]